<script setup>

</script>

<template>
  <div class="box-border relative w-screen h-screen bg-center bg-no-repeat bg-cover bg-[url('@/assets/image/gdz53@2x.png')] flex items-center flex-col">
      <div class="absolute top-0 left-[70px]">
        <img src="@/assets/image/gdz47@2x.png" class="w-[610px] h-[668px]" alt="">
      </div>
    <div class="absolute bottom-[75px] left-[50%] transform translate-x-[-50%]">
      <img class="w-[620px] h-[71px]" src="@/assets/image/zu733@2x.png" alt="">
    </div>
    <div class="">
      <img class="w-[525px] h-[87px] mt-[303px] mb-[100px]" src="@/assets/image/zu3311@2x.png" alt="">
    </div>
    <div class="bg-[url('@/assets/image/zu3327@2x.png')] pb-60px w-[1173px] h-[1489px] bg-center bg-no-repeat bg-cover pt-[80px] pr-[54px] pl-[54px] flex items-center flex-col">
      <div class="flex items-center">
        <div class="text-primary text-[35px] w-[165px] font-bold">*姓名</div>
        <div class="text-primary text-[35px]">
          <input class="pl-30px pr-[30px] w-[853px] h-[85px] focus:outline-none placeholder-text-primary placeholder:text-[35px] focus: bg-[#DCE5E9] focus:text-[35px]  border-none" placeholder="请输入宝贝姓名" type="text">
        </div>
      </div>
      <div class="flex items-center mt-[45px]">
        <div class="text-primary text-[35px] w-[165px] font-bold">*年龄</div>
        <div class="text-primary text-[35px]">
          <input class="pl-30px pr-[30px] w-[853px] h-[85px] focus:outline-none placeholder-text-primary placeholder:text-[35px] focus: bg-[#DCE5E9] focus:text-[35px]  border-none" placeholder="请输入年龄" type="text">
        </div>
      </div>
      <div class="bg-#F5F5F5 mt-38px w-[1065px] flex items-center flex-col grow-1">
        <div class="flex">
          <div class="text-primary text-[35px] w-[165px] font-bold mt-38px">*作品1</div>
          <div class="mt-20px">
            <van-uploader>
              <div class="w-738px h-342px bg-[#D6E0E9] rounded-20px flex flex-col items-center justify-center">
                <img class="w-43px h-43px" src="@/assets/image/zu3264@2x.png" alt="">
                <div class="mt-20px text-[#2B69A1] text-35px">上传作品</div>
              </div>
            </van-uploader>
            <div class="mt-20px text-30px text-[#2B69A1]">作品名称</div>
            <input class="mt-20px w-835px h-85px bg-[#DCE5E9] pl-30px pr-[30px] border-none placeholder-[#2B69A1] placeholder-text-35px focus:outline-none" placeholder="请输入作品名称" type="text">
            <div class="flex justify-between mt-20px">
              <div class="flex flex-col">
                <div class="text-30px text-[#2B69A1]">长度</div>
                <div class="flex items-center mt-[10px]">
                  <input class="w-330px h-85px bg-[#DCE5E9] pl-30px pr-[30px] border-none placeholder-[#2B69A1] placeholder-text-35px focus:outline-none" placeholder="请输入" type="text">
                  <div class="ml-25px text-[#2B69A1] text-35px">cm</div>
                </div>
              </div>
              <div class="flex flex-col">
                <div class="text-30px text-[#2B69A1]">宽度</div>
                <div class="flex items-center mt-[10px]">
                  <input class="w-330px h-85px bg-[#DCE5E9] pl-30px pr-[30px] border-none placeholder-[#2B69A1] placeholder-text-35px focus:outline-none" placeholder="请输入" type="text">
                  <div class="ml-25px text-[#2B69A1] text-35px">cm</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class=" w-90px h-90px mt-[28px] bg-[#336699] rounded-full flex items-center justify-center shadow-0-0-10px-rgba(0,0,0,0.1) relative">
          <div class="absolute w-43px h-6px bg-white"></div>
          <div class="absolute w-6px h-43px bg-white"></div>
        </div>
      </div>
      <div class="mt-43px w-600px h-98px bg-cover bg-no-repeat bg-[url('@/assets/image/dfdf1.png')] flex justify-center items-center text-white text-40px">
        确定
      </div>
    </div>
    <div class="absolute bottom-0 right-0">
      <img class="w-1170px h-557px" src="@/assets/image/dfdf4@2x.png" alt="">
    </div>
  </div>
</template>

<style scoped lang="scss">
</style>
