kidArtExpo/src/views/signup/size375/index.vue

<script setup>
import { useAdaptation } from "@/utils/self-adaption.js";
import {ref} from "vue";
const { maxWidth } = useAdaptation([
  { maxWidth: '375px' },
  { maxWidth: '768px' }
])
const showPicker=ref(false)
const columns=ref([
  {text:'男',value:0},
  {text:'女',value:1}
])
function onConfirm(){
}
</script>
<template>
  <div class="box-border relative w-1920px h-screen bg-no-repeat bg-cover bg-[url('@/assets/image/zu3237.png')] flex items-center flex-col">
    <div class="mt-143px w-1074px h-178px bg-cover bg-no-repeat bg-[url('@/assets/image/zu3311@2x.png')]"></div>
    <div class="relative w-671px h-728px bg-cover">
      <img src="@/assets/image/gdz27.png" alt="">
    </div>
    <div class="relative bottom-200px w-1270px h-145px">
      <img src="@/assets/image/zu733@2x.png" alt="">
    </div>
    <div class="flex flex-col items-center w-1654px h-2729px bg-cover bg-no-repeat bg-[url('@/assets/image/zu3186@2x.png')] mt-123px pt-164px px-82px">
      <div class="flex items-center w-full mt-80px px-31px">
        <div class="text-72px font-bold text-[#2B69A1] w-256px">*姓名</div>
        <div class="w-1174px h-174px bg-[#DCE5E9] pl-61px">
          <input class="w-full h-full bg-transparent border-none placeholder-[#2B69A1] placeholder-text-72px focus:outline-none" placeholder="请输入宝贝姓名" type="text">
        </div>
      </div>
      <div class="flex items-center w-full mt-80px px-31px">
        <div class="text-72px font-bold text-[#2B69A1] w-256px">*年龄</div>
        <div class="w-1174px h-174px bg-[#DCE5E9] pl-61px">
          <input class="w-full h-full bg-transparent border-none placeholder-[#2B69A1] placeholder-text-72px focus:outline-none" placeholder="请输入年龄" type="text">
        </div>
      </div>
      <div class="flex items-center w-full mt-87px px-31px">
        <div class="text-72px font-bold text-[#2B69A1] w-256px">*性别</div>
        <div class="relative w-1174px h-174px bg-[#DCE5E9] pl-61px" @click="showPicker=true">
          <input readonly class="w-full h-full bg-transparent border-none placeholder-[#2B69A1] placeholder-text-72px focus:outline-none" placeholder="请选择性别" type="text">
          <img src="@/assets/image/hsmr@2x.png" class="absolute right-72px top-1/2 transform -translate-y-1/2 w-50px h-28px" alt="">
        </div>
      </div>
      <div class="flex flex-col items-center w-full pt-46px bg-[#F5F5F5]">
        <div class="flex w-full">
          <div class="w-256px font-bold text-[#2B69A1]">*作品1</div>
          <div>
            <van-uploader>
              <div class="w-410px h-410px bg-[#D6E0E9] rounded-20px flex flex-col items-center justify-center">
                <img class="w-88px h-88px" src="@/assets/image/zu3264@2x.png" alt="">
                <div class="mt-36px text-[#2B69A1] text-72px">上传作品</div>
              </div>
            </van-uploader>
            <div class="mt-41px text-61px text-[#2B69A1]">作品名称</div>
            <input class="mt-20px w-1174px h-174px bg-[#DCE5E9] pl-61px border-none placeholder-[#2B69A1] placeholder-text-72px focus:outline-none" placeholder="请输入作品名称" type="text">
            <div class="flex justify-between mt-41px">
              <div class="flex flex-col">
                <div class="text-61px text-[#2B69A1]">长度</div>
                <div class="flex items-center">
                  <input class="w-379px h-174px bg-[#DCE5E9] pl-61px border-none placeholder-[#2B69A1] placeholder-text-72px focus:outline-none" placeholder="请输入" type="text">
                  <div class="ml-51px text-[#2B69A1] text-72px">cm</div>
                </div>
              </div>
              <div class="flex flex-col">
                <div class="text-61px text-[#2B69A1]">宽度</div>
                <div class="flex items-center">
                  <input class="w-379px h-174px bg-[#DCE5E9] pl-61px border-none placeholder-[#2B69A1] placeholder-text-72px focus:outline-none" placeholder="请输入" type="text">
                  <div class="ml-51px text-[#2B69A1] text-72px">cm</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="mt-51px mb-46px w-184px h-184px bg-[#336699] rounded-full flex items-center justify-center shadow-0-0-10px-rgba(0,0,0,0.1) relative">
          <div class="absolute w-88px h-6px bg-white"></div>
          <div class="absolute w-6px h-88px bg-white"></div>
        </div>
      </div>
      <div class="mt-133px w-866px h-200px bg-contain bg-no-repeat bg-[url('@/assets/image/zu3189@2x1.png')] flex justify-center items-center text-white text-82px">
        确定
      </div>
    </div>
    <van-popup v-model:show="showPicker" round position="bottom">
      <van-picker
          :columns="columns"
          @cancel="showPicker = false"
          @confirm="onConfirm"
      />
    </van-popup>
  </div>
</template>