<script setup>
import {ref} from 'vue'
import {NUpload,NModal} from 'naive-ui'
const previewFileList=ref([
  {
    id: "react",
    name: "我是react.png",
    status: "finished",
    url: "https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
  }
])
const showModal=ref(false)
const previewImageUrl=ref('')
const handlePreview=()=>{

}
</script>

<template>
  <div class="box-border relative w-screen h-screen bg-center bg-no-repeat bg-cover bg-[url('@/assets/image/dfa45@2x.png')] flex items-center flex-col">
    <div class="absolute top-0 left-[193px]">
      <img src="@/assets/image/gdz47@2x.png" class="w-[316px] h-[391px]" alt="">
    </div>
    <div class="absolute bottom-[40px] 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-[280px] h-[46px] mt-[176px] mb-[33px]" src="@/assets/image/zu3311@2x.png" alt="">
    </div>
    <div class="bg-[url('@/assets/image/zue3250@2x.png')] pb-20px pb-12px w-[1211px] h-794px bg-center bg-no-repeat bg-cover pt-35px pr-137px pl-137px flex items-center flex-col">
      <div class="flex items-center">
        <div class="text-primary text-[19px] pl-5px w-[68px] font-bold">*姓名</div>
        <div class="text-primary">
          <input class="pl-16px pr-16px w-[860px] h-[45px] focus:outline-none placeholder-text-primary placeholder-text-19px focus: bg-[#DCE5E9]   border-none" placeholder="请输入宝贝姓名" type="text">
        </div>
      </div>
      <div class="flex items-center mt-24px">
        <div class="text-primary text-[19px] w-[68px] pl-5px font-bold">*年龄</div>
        <div class="text-primary">
          <input class="pl-16px pr-16px w-[827px] h-[45px] focus:outline-none placeholder-text-primary placeholder-text-19px focus: bg-[#DCE5E9]   border-none" placeholder="请输入年龄" type="text">
        </div>
        <div class="text-primary text-19px ml-16px">岁</div>
      </div>
      <div class="flex items-center mt-23px">
        <div class="text-primary text-[19px] pl-5px w-[68px] font-bold">*性别</div>
        <div class="text-primary relative">
          <input readonly class="pl-16px pr-16px w-[860px] h-[45px] focus:outline-none placeholder-text-primary placeholder-text-19px focus: bg-[#DCE5E9]   border-none " placeholder="请选择宝贝性别" type="text">
          <img src="@/assets/image/hsmr@2x.png" class="w-13px h-7px absolute right-19px top-50% translate-y-[-50%]" alt="">
        </div>
      </div>
      <div class="bg-#F5F5F5 pb-12px mt-21px w-[936px] flex  flex-col grow-1">
        <div class="flex">
          <div class="text-primary text-19px  w-[68px] font-bold mt-20px shrink-0 pl-5px ">*作品1</div>
          <div class="mt-10px">
            <n-upload
                action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
                :default-file-list="previewFileList"
                list-type="image-card"
                :max="1"
            >
              <div class="w-393px h-188px bg-#D6E0E9">
          <div class="flex items-center flex-col justify-center w-100% h-100% rounded-5px">
            <img src="@/assets/image/zu3264@2x.png" class="w-23px h-23px" alt="">
            <div class="text-19px text-primary mt-11px">上传作品</div>
          </div>
              </div>
            </n-upload>
            <div class="mt-11px text-16px text-[#2B69A1]">作品名称</div>
            <input class="pl-16px pr-16px w-[827px] h-[45px] mt-5px focus:outline-none placeholder-text-primary placeholder-text-19px focus: bg-[#DCE5E9]   border-none" placeholder="请输入作品名称" type="text">
            <div class="flex justify-between mt-11px mb-5px">
              <div class="flex flex-col">
                <div class="text-16px text-[#2B69A1]">长度</div>
                <div class="flex items-center mt-[5px]">
                  <input class="pl-16px pr-16px w-372px h-[45px] mt-5px focus:outline-none placeholder-text-primary placeholder-text-19px focus: bg-[#DCE5E9]   border-none" placeholder="请输入作品名称" type="text">
                  <div class="ml-13px text-[#2B69A1] text-19px mr-21px">cm</div>
                </div>
              </div>
              <div class="flex flex-col">
                <div class="text-16px text-[#2B69A1]">宽度</div>
                <div class="flex items-center mt-[5px]">
                  <input class="pl-16px pr-16px w-372px h-[45px] mt-5px focus:outline-none placeholder-text-primary placeholder-text-19px focus: bg-[#DCE5E9]   border-none" placeholder="请输入作品名称" type="text">
                  <div class="ml-13px text-[#2B69A1] text-19px">cm</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div  class=" w-48px h-48px mt-15px bg-[#336699] rounded-full flex items-center justify-center shadow-0-0-10px-rgba(0,0,0,0.1) relative mx-auto">
          <div class="absolute w-23px h-3px bg-white"></div>
          <div class="absolute w-3px h-23px bg-white"></div>
        </div>
      </div>
      <div class="mt-15px w-320px h-52px bg-cover bg-no-repeat bg-[url('@/assets/image/dfdf1.png')] flex justify-center items-center text-white text-21px">
        确定
      </div>
    </div>
    <div class="absolute bottom-0 right-0">
      <img class="w-876px h-385px" src="@/assets/image/dfdf4@2x.png" alt="">
    </div>
  </div>
</template>

<style scoped lang="scss">
:deep(.n-upload-file.n-upload-file--success-status.n-upload-file--image-card-type){

  border:none;
  width: 393px;
  height: 188px;
}
:deep(.n-upload-trigger.n-upload-trigger--image-card){
  border:none;
  width: 393px;
  height: 188px;
}
</style>
