<template>
  <div>
    <div class="w-1200px bg-white mt-20px flex justify-center min-h-936px">
      <div class="w-1000px">
        <div class="mb-20px text-size-16px mt-30px">{{ $t("购买人信息") }}</div>

        <ui-devider></ui-devider>
        <div class="mt-50px flex items-center">
          <div class="w-100px mr-25px">{{ $t("收货人") }}</div>
          <ui-input :placeholder="$t('请输入收货人')" class="!w-444px"></ui-input>
        </div>
        <div class="mt-50px flex items-center">
          <div class="w-100px mr-25px">{{ $t("收货电话") }}</div>
          <ui-input :placeholder="$t('请输入收货电话')" class="!w-587px"></ui-input>
        </div>

        <div class="mt-50px flex items-center">
          <div class="w-100px mr-25px">{{ $t("收货地址") }}</div>
          <ui-input :placeholder="$t('请输入收货地址')" class="!w-912px"></ui-input>
        </div>
        <div class="mb-20px text-size-16px mt-50px">{{ $t("商品信息") }}</div>

        <ui-devider class="mb-30px"></ui-devider>
        <div class="px-24px pb-24px bg-[#F7F7F7] relative">
          <div
            class="order-header h-52px flex items-center text-[#686868] text-size-14px"
          >
            <div class="w-100px text-center">产品图</div>
            <div class="w-300px text-center">产品名称</div>
            <div class="flex-1 text-center">单价</div>
            <div class="flex-1 text-center">数量</div>
            <div class="flex-1 text-center">小计</div>
          </div>
          <ui-devider class="bg-[#B8B8B8]"></ui-devider>
          <div class="order-body flex mt-30px items-center relative">
            <img src="/imgs/product_item.png" class="w-100px h-100px object-contain" />
            <div class="w-300px text-center text-size-16px">这里是产品名称</div>
            <div class="flex-1 text-center font-thin text-size-16px">79.00</div>
            <div class="flex-1 text-center">
              <el-input-number
                v-model="num"
                @change="handleChange"
                :min="1"
                :max="10"
                label="描述文字"
              ></el-input-number>
            </div>
            <div class="flex-1 text-center font-thin text-size-16px">79.00</div>
          </div>
        </div>
        <div
          class="mt-20px w-380px h-210px border-1px border-primary border-solid rounded-3px ml-auto pr-32px pt-24px flex flex-col items-end"
        >
          <div class="flex items-end mb-28px">
            <span class="text-size-16px text-primary">{{ $t("实付金额") }}：</span
            ><span class="font-thin text-size-36px text-primary">￥79.00</span>
          </div>

          <div class="text-size-16px text-primary mb-10px">
            {{ $t("收货人") }}：陈小婷 86+18926171468
          </div>
          <div class="text-size-16px text-primary mb-20px">
            {{ $t("收货地址") }}：广东广州海珠区新满西中53号
          </div>
          <el-button class="!text-white !w-200px !h-40px !bg-primary" round>提交订单</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style></style>
