|
|
@ -1,5 +1,7 @@
|
|
|
|
<script setup>
|
|
|
|
<script setup>
|
|
|
|
|
|
|
|
import {useAuth} from "@/store/auth/index.js";
|
|
|
|
|
|
|
|
import {NSelect} from "naive-ui";
|
|
|
|
|
|
|
|
const {formData,genderOptions,clickAddWorks,removeWorks,goConfirm,deleteImg,afterRead} =useAuth()
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
@ -17,59 +19,107 @@
|
|
|
|
<div class="flex items-center">
|
|
|
|
<div class="flex items-center">
|
|
|
|
<div class="text-primary text-[35px] w-[165px] font-bold">*姓名</div>
|
|
|
|
<div class="text-primary text-[35px] w-[165px] font-bold">*姓名</div>
|
|
|
|
<div class="text-primary text-[35px]">
|
|
|
|
<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">
|
|
|
|
<input v-no-space v-model="formData.name" 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>
|
|
|
|
</div>
|
|
|
|
<div class="flex items-center mt-[45px]">
|
|
|
|
<div class="flex items-center mt-[45px]">
|
|
|
|
<div class="text-primary text-[35px] w-[165px] font-bold">*年龄</div>
|
|
|
|
<div class="text-primary text-[35px] w-[165px] font-bold">*年龄</div>
|
|
|
|
<div class="text-primary text-[35px]">
|
|
|
|
<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">
|
|
|
|
<input v-no-space v-model="formData.age" 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>
|
|
|
|
</div>
|
|
|
|
<div class="bg-#F5F5F5 mt-38px w-[1065px] flex items-center flex-col grow-1">
|
|
|
|
<div class="flex items-center mt-18px">
|
|
|
|
<div class="flex">
|
|
|
|
<div class="text-primary text-[35px] w-[165px] font-bold">*性别</div>
|
|
|
|
<div class="text-primary text-[35px] w-[165px] font-bold mt-38px">*作品1</div>
|
|
|
|
<div class="text-primary text-[35px]">
|
|
|
|
|
|
|
|
<n-select
|
|
|
|
|
|
|
|
v-model:value="formData.gender"
|
|
|
|
|
|
|
|
placeholder="请选择性别"
|
|
|
|
|
|
|
|
class="w-[853px] h-[85px] focus:outline-none placeholder-text-primary placeholder-text-35px focus: bg-[#DCE5E9] border-none"
|
|
|
|
|
|
|
|
:options="genderOptions.map(x=>{
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
|
|
|
label:x.text,value:x.value
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
})"
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
<!-- <input class="pl-16px pr-16px w-[645px] h-[34px] focus:outline-none placeholder-text-primary placeholder-text-14px focus: bg-[#DCE5E9] border-none" placeholder="请输入宝贝姓名" type="text">
|
|
|
|
|
|
|
|
<img src="@/assets/image/hsmr@2x.png" class="w-10px h-5px absolute right-19px top-50% translate-y-[-50%]" alt="">-->
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="bg-#F5F5F5 overflow-y-auto mt-38px w-[1065px] flex items-center flex-col grow-1">
|
|
|
|
|
|
|
|
<div :class="`flex w-full ${formData.works?.length>1&&index+1!==formData.works?.length?'border-b-1px border-b-[#D6E0E9] border-b-solid mb-50px pb-50px':''}` " v-for="(item,index) of formData.works" :key="index">
|
|
|
|
|
|
|
|
<div class="text-primary text-[35px] w-[165px] font-bold mt-38px">*作品{{index+1}}</div>
|
|
|
|
<div class="mt-20px">
|
|
|
|
<div class="mt-20px">
|
|
|
|
<van-uploader>
|
|
|
|
<div class="flex items-end">
|
|
|
|
|
|
|
|
<van-uploader v-model="item.imgList" @delete="deleteImg(item)" :max-count="1" :after-read="(e)=>{afterRead(e,item)}">
|
|
|
|
<div class="w-738px h-342px bg-[#D6E0E9] rounded-20px flex flex-col items-center justify-center">
|
|
|
|
<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="">
|
|
|
|
<img class="w-43px h-43px" src="@/assets/image/zu3264@2x.png" alt="">
|
|
|
|
<div class="mt-20px text-[#2B69A1] text-35px">上传作品</div>
|
|
|
|
<div class="mt-20px text-[#2B69A1] text-35px">上传作品</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</van-uploader>
|
|
|
|
</van-uploader>
|
|
|
|
|
|
|
|
<div class="ml-15px" v-if="formData.works?.length>1" @click="removeWorks(index)">
|
|
|
|
|
|
|
|
<img class="w-41px h-41px" src="@/assets/image/sc@2x.png" alt="">
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="mt-20px text-30px text-[#2B69A1]">作品名称</div>
|
|
|
|
<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">
|
|
|
|
<input v-no-space v-model="item.workName" 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 justify-between mt-20px">
|
|
|
|
<div class="flex flex-col">
|
|
|
|
<div class="flex flex-col">
|
|
|
|
<div class="text-30px text-[#2B69A1]">长度</div>
|
|
|
|
<div class="text-30px text-[#2B69A1]">长度</div>
|
|
|
|
<div class="flex items-center mt-[10px]">
|
|
|
|
<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">
|
|
|
|
<input v-no-space v-model="item.length" class="text-35px 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 class="ml-25px text-[#2B69A1] text-35px">cm</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="flex flex-col">
|
|
|
|
<div class="flex flex-col">
|
|
|
|
<div class="text-30px text-[#2B69A1]">宽度</div>
|
|
|
|
<div class="text-30px text-[#2B69A1]">宽度</div>
|
|
|
|
<div class="flex items-center mt-[10px]">
|
|
|
|
<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">
|
|
|
|
<input v-no-space v-model="item.wide" class="w-330px h-85px bg-[#DCE5E9] pl-30px pr-[30px] border-none placeholder-[#2B69A1] placeholder-text-35px text-35px focus:outline-none" placeholder="请输入" type="text">
|
|
|
|
<div class="ml-25px text-[#2B69A1] text-35px">cm</div>
|
|
|
|
<div class="ml-25px text-[#2B69A1] text-35px">cm</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</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=" 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 shrink-0 mb-50px" @click="clickAddWorks">
|
|
|
|
<div class="absolute w-43px h-6px bg-white"></div>
|
|
|
|
<div class="absolute w-43px h-6px bg-white"></div>
|
|
|
|
<div class="absolute w-6px h-43px bg-white"></div>
|
|
|
|
<div class="absolute w-6px h-43px bg-white"></div>
|
|
|
|
</div>
|
|
|
|
</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 class="mt-43px w-600px h-98px bg-cover bg-no-repeat bg-[url('@/assets/image/dfdf1.png')] flex-center text-white text-40px shrink-0" @click="goConfirm">
|
|
|
|
确定
|
|
|
|
确定
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="absolute bottom-0 right-0">
|
|
|
|
<div class="absolute bottom-0 right-0 ">
|
|
|
|
<img class="w-1170px h-557px" src="@/assets/image/dfdf4@2x.png" alt="">
|
|
|
|
<img class="w-1170px h-557px" src="@/assets/image/dfdf4@2x.png" alt="">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
|
|
|
:deep(.van-uploader__preview){
|
|
|
|
|
|
|
|
margin: 0;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
:deep(.van-image.van-uploader__preview-image){
|
|
|
|
|
|
|
|
width: 738px;
|
|
|
|
|
|
|
|
height: 353px;
|
|
|
|
|
|
|
|
border-radius: 10px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
:deep(.n-base-selection-placeholder__inner){
|
|
|
|
|
|
|
|
color: rgb(131, 162, 195)!important;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
:deep(.n-base-selection-label){
|
|
|
|
|
|
|
|
height: 85px;
|
|
|
|
|
|
|
|
background: #DCE5E9!important;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
:deep(.n-upload-file.n-upload-file--success-status.n-upload-file--image-card-type){
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
border:none;
|
|
|
|
|
|
|
|
width: 295px;
|
|
|
|
|
|
|
|
height: 141px;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
:deep(.n-upload-trigger.n-upload-trigger--image-card){
|
|
|
|
|
|
|
|
border:none;
|
|
|
|
|
|
|
|
width: 295px;
|
|
|
|
|
|
|
|
height: 141px;
|
|
|
|
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</style>
|
|
|
|