1`212

src/App.vue

@@ -22,5 +22,8 @@ const   themeOverrides= ref({
 </template>
 
 <style>
-
+.n-base-icon{
+  width: initial;
+  height: initial;
+}
 </style>

src/router/index.js

@@ -8,7 +8,11 @@ const routes = [
     {
         path: '/login',
         name: 'login',
-        component: () => import('@/views/login/index.vue')
+        component: () => import('@/views/login/index.vue'),
+        beforeEnter: (to, from, next) => {
+            localStorage.clear()
+            next()
+        }
     },
     {
         path: '/signup',

src/store/auth/index.js

@@ -73,13 +73,23 @@ export const useAuth=createGlobalState(()=>{
     const removeWorks=(index)=>{
         formData.value.works.splice(index,1)
     }
-    const afterRead=async (file,item)=>{
+    const afterRead=async (file,item,e)=>{
+        console.log('执行了afterRead')
         const formData1 = new FormData()
         formData1.append("file", file.file)
         formData1.append("type", 'image')
         const res=await uploadFile(formData1)
+        console.log(res,'res')
         if (res.status===0){
+
             item.picUrl=res.data
+            if (e.onFinish){
+                e.onFinish()
+                item.imgList=[    {
+                    status: 'finished',
+                    url: item.picUrl
+                },]
+            }
         }
     }
     const deleteImg=(item)=>{

src/views/confirm/index.vue

@@ -1,30 +1,31 @@
 <script setup>
-import {useAdaptation} from "@/utils/self-adaption.js";
+import { computed } from 'vue';
-import {sizes} from "@/dict/index.js";
+import { useWindowSize } from '@vueuse/core';
-import size375 from '@/views/confirm/size375/index.vue'
+import { useAuth } from '@/store/auth/index.js';
-import {computed} from "vue";
+import size375 from '@/views/confirm/size375/index.vue';
-import size768 from "@/views/confirm/size768/index.vue";
+import size768 from '@/views/confirm/size768/index.vue';
-import size1440 from "@/views/login/size1440/index.vue";
+import size1440 from '@/views/confirm/size1440/index.vue';
-import size1920 from "@/views/login/size1920/index.vue";
+import size1920 from '@/views/confirm/size1920/index.vue';
-const {currentRange }= useAdaptation(sizes)
+const { clickSendCode } = useAuth();
-const viewComponent = computed(()=>{
+const { width } = useWindowSize();
-  switch (currentRange.value?.minWidth){
+const viewComponent = computed(() => {
-    case '0px':
+  const viewWidth = width.value;
-      return size375
+  if (viewWidth <= 450) {
-    case '768px':
+    return size375;
-      return size768
+  } else if (viewWidth <= 1100) {
-    case '1440px':
+    return size768;
-      return size1440
+  } else if (viewWidth <= 1500) {
-    case '1920px':
+    return size1440;
-      return size1920
+  } else if (viewWidth <= 1920) {
+    return size1920;
   }
 })
+
 </script>
 
 <template>
-  <component :is="viewComponent"></component>
+  <component @sendCode="clickSendCode" :is="viewComponent" />
 </template>
 
 <style scoped lang="scss">
-
 </style>

src/views/confirm/size1440/index.vue

@@ -0,0 +1,65 @@
+<script setup>
+import {useAuth} from "@/store/auth/index.js";
+
+const {clickApply,formData,openMask1,goBack} =useAuth()
+
+</script>
+
+<template>
+  <div class="box-border relative w-[1920px] h-screen bg-no-repeat bg-cover bg-[url('@/assets/image/dfa45@2x.png')] flex items-center flex-col">
+    <div class="mb-[33px] mt-[176px]">
+      <img class="w-[280px] h-[46px]" src="@/assets/image/zu3314@2x.png" alt="">
+    </div>
+    <div class="absolute top-0 left-[193px]">
+      <img class="w-[315px] h-[391px]" src="@/assets/image/gdz47@2x.png" alt="">
+    </div>
+    <div class="bg-[url('@/assets/image/zue3250@2x.png')] w-[1211px] h-[794px] bg-no-repeat bg-contain pt-[52px] pr-[137px] pl-[137px] pb-31px">
+      <div class="flex">
+        <div class="text-primary text-[19px] w-[83px] font-bold pl-15px">*姓名</div>
+        <div class="text-primary text-[19px]">{{formData.name}}</div>
+      </div>
+      <div class="flex mt-[15px]">
+        <div class="text-primary text-[19px] w-[83px] font-bold pl-15px">*年龄</div>
+        <div class="text-primary text-[19px]">{{formData.age}} 岁</div>
+      </div>
+      <div class="flex  mt-[15px]">
+        <div class="text-primary text-[19px] w-[83px] font-bold pl-15px">*性别</div>
+        <div class="text-primary text-[19px]">{{formData.gender}}</div>
+      </div>
+      <div class="w-[936px] h-[523px] bg-#F5F5F5 mt-[8.26px] mb-20px flex pt-[15px]">
+        <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-19px font-bold shrink-0 w-[83px] pl-15px">*作品{{index+1}}</div>
+          <div>
+            <img class="w-[393px] h-[188px] object-contain" @click="openMask1(item.picUrl)" :src="item.picUrl" alt="">
+            <div class="flex text-primary text-[16px] mt-20px  w-50%">
+              <div class="font-bold w-100px">作品名称</div>
+              <div class="">{{item.workName}}</div>
+            </div>
+            <div class="flex text-primary text-[16px] mt-20px">
+             <div class="flex w-50%">
+               <div class="font-bold w-100px">长度</div>
+               <div class="">{{item.length}} <span class="ml-16px">cm</span></div>
+             </div>
+              <div class="flex w-50% ml-a">
+                <div class="w-100px">宽度</div>
+                <div class="">{{item.wide}} <span class="ml-16px">cm</span></div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+      <div class="flex-center">
+        <div class="text-primary text-21px w-320px h-52px flex justify-center items-center bg-#fff shadow-[0_16px_16px_rgba(0,0,0,0.1)] rounded-60px" @click="goBack">取消</div>
+        <div class="bg-[url('@/assets/image/asdf3255@2x1.png')] w-320px h-52px bg-contain ml-29px text-21px text-#fff flex-center" @click="clickApply">确定</div>
+      </div>
+      <div class="absolute bottom-0 right-0 ">
+        <img class="w-876px h-385px" src="@/assets/image/dfdc46@2x.png" alt="">
+      </div>
+    </div>
+</div>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/confirm/size1920/index.vue

@@ -0,0 +1,65 @@
+<script setup>
+import {useAuth} from "@/store/auth/index.js";
+
+const {clickApply,formData,openMask1,goBack} =useAuth()
+
+</script>
+
+<template>
+  <div class="box-border relative w-screen h-screen bg-center bg-no-repeat bg-cover bg-[url('@/assets/image/zu3346@2x.png')] flex items-center flex-col">
+
+    <div class="mb-[33px] mt-[176px]">
+      <img class="w-[280px] h-[46px]" src="@/assets/image/zu3314@2x.png" alt="">
+    </div>
+    <div class="absolute top-0 left-[385px]">
+      <img class="w-[235px] h-[293px]" src="@/assets/image/gdz47@2x.png" alt="">
+    </div>
+    <div class="bg-[url('@/assets/image/zue3250@2x.png')] w-[908px] h-[595px] bg-no-repeat bg-contain pt-[39px] px-103px pb-23px z-10">
+      <div class="flex">
+        <div class="text-primary text-[14px] w-[62px] font-bold pl-15px">*姓名</div>
+        <div class="text-primary text-[14px]">{{formData.name}}</div>
+      </div>
+      <div class="flex mt-[11px]">
+        <div class="text-primary text-[14px] w-[62px] font-bold pl-15px">*年龄</div>
+        <div class="text-primary text-[14px]">{{formData.age}} 岁</div>
+      </div>
+      <div class="flex  mt-[11px]">
+        <div class="text-primary text-[14px] w-[62px] font-bold pl-15px">*性别</div>
+        <div class="text-primary text-[14px]">{{formData.gender}}</div>
+      </div>
+      <div class="w-[702px] h-[392px] bg-#F5F5F5 mt-[8.26px] mb-10px flex pt-[15px]">
+        <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-14px font-bold shrink-0 w-[62px] pl-15px">*作品{{index+1}}</div>
+          <div>
+            <img class="w-[393px] h-[188px] object-contain" @click="openMask1(item.picUrl)" :src="item.picUrl" alt="">
+            <div class="flex text-primary text-[12px] mt-8px  w-50%">
+              <div class="font-bold w-100px">作品名称</div>
+              <div class="">{{item.workName}}</div>
+            </div>
+            <div class="flex text-primary text-[12px] mt-20px">
+              <div class="flex w-50%">
+                <div class="font-bold w-100px">长度</div>
+                <div class="">{{item.length}} <span class="ml-12px">cm</span></div>
+              </div>
+              <div class="flex w-50% ml-a">
+                <div class="w-100px">宽度</div>
+                <div class="">{{item.wide}} <span class="ml-12px">cm</span></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="flex-center">
+        <div class="text-primary text-16px w-240px h-39px flex justify-center cursor-pointer items-center bg-#fff shadow-[0_16px_16px_rgba(0,0,0,0.1)] rounded-60px z-999" @click="goBack">取消</div>
+        <div class="bg-[url('@/assets/image/asdf3255@2x1.png')] cursor-pointer w-240px h-39px bg-contain ml-29px  text-#fff flex-center text-16px z-999" @click="clickApply">确定</div>
+      </div>
+      <div class="absolute bottom-0 right-0 ">
+        <img class="w-876px h-385px" src="@/assets/image/dfdc46@2x.png" alt="">
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/details/index.vue

@@ -1,30 +1,31 @@
 <script setup>
-import {useAdaptation} from "@/utils/self-adaption.js";
+import { computed } from 'vue';
-import {sizes} from "@/dict/index.js";
+import { useWindowSize } from '@vueuse/core';
-import size375 from '@/views/details/size375/index.vue'
+import { useAuth } from '@/store/auth/index.js';
-import {computed} from "vue";
+import size375 from '@/views/details/size375/index.vue';
-import size768 from "@/views/details/size768/index.vue";
+import size768 from '@/views/details/size768/index.vue';
-/*import size1440 from "@/views/details/size1440/index.vue";
+import size1440 from '@/views/details/size1440/index.vue';
-import size1920 from "@/views/details/size1920/index.vue";*/
+import size1920 from '@/views/details/size1920/index.vue';
-const {currentRange }= useAdaptation(sizes)
+const { clickSendCode } = useAuth();
-const viewComponent = computed(()=>{
+const { width } = useWindowSize();
-  switch (currentRange.value?.minWidth){
+const viewComponent = computed(() => {
-    case '0px':
+  const viewWidth = width.value;
-      return size375
+  if (viewWidth <= 450) {
-    case '768px':
+    return size375;
-      return size768
+  } else if (viewWidth <= 1100) {
- /*   case '1440px':
+    return size768;
-      return size1440
+  } else if (viewWidth <= 1500) {
-    case '1920px':
+    return size1440;
-      return size1920*/
+  } else if (viewWidth <= 1920) {
+    return size1920;
   }
 })
+
 </script>
 
 <template>
-  <component :is="viewComponent"></component>
+  <component @sendCode="clickSendCode" :is="viewComponent" />
 </template>
 
 <style scoped lang="scss">
-
 </style>

src/views/details/size1440/index.vue

@@ -0,0 +1,68 @@
+<script setup>
+import {useAuth} from "@/store/auth/index.js";
+
+const {clickApply,openMask1,goBack,detailData} =useAuth()
+
+</script>
+
+<template>
+  <div class="box-border relative w-[1920px] h-screen bg-no-repeat bg-cover bg-[url('@/assets/image/dfa45@2x.png')] flex items-center flex-col">
+    <div class="mb-[33px] mt-[176px]">
+      <img class="w-[280px] h-[46px]" src="@/assets/image/zu3316@2x.png" alt="">
+    </div>
+    <div class="absolute top-0 left-[193px]">
+      <img class="w-[315px] h-[391px]" src="@/assets/image/gdz47@2x.png" alt="">
+    </div>
+    <div class="bg-[url('@/assets/image/zue3250@2x.png')] w-[1211px] h-[794px] bg-no-repeat bg-contain pt-[52px] pr-[137px] pl-[137px] pb-31px">
+      <div class="flex">
+        <div class="text-primary text-[19px] w-[83px] font-bold pl-15px">*姓名</div>
+        <div class="text-primary text-[19px]">{{detailData.name}}</div>
+      </div>
+      <div class="flex mt-[15px]">
+        <div class="text-primary text-[19px] w-[83px] font-bold pl-15px">*年龄</div>
+        <div class="text-primary text-[19px]">{{detailData.age}} 岁</div>
+      </div>
+      <div class="flex  mt-[15px]">
+        <div class="text-primary text-[19px] w-[83px] font-bold pl-15px">*性别</div>
+        <div class="text-primary text-[19px]">{{detailData.gender}}</div>
+      </div>
+      <div class="w-[936px] h-[597px] bg-#F5F5F5 mt-[8.26px] mb-20px flex pt-[15px]">
+        <div :class="`flex w-full ${detailData.works?.length>1&&index+1!==detailData.works?.length?'border-b-1px border-b-[#D6E0E9] border-b-solid mb-50px pb-50px':''}` "  v-for="(item,index) of detailData?.worksInfo" :key="index">
+          <div class="text-primary text-19px font-bold shrink-0 w-[83px] pl-15px">*作品{{index+1}}</div>
+          <div>
+        <div class="flex">
+          <div><img class="w-[393px] h-[188px] object-contain" @click="openMask1(item.picUrl)" :src="item.picUrl" alt=""></div>
+          <div class="shrink-0 ml-16px mt-83px">
+            <img v-if="item.status === 3" src="@/assets/image/zu3222@2x.png" class="w-[105px] h-[105px]" alt="" />
+            <img v-if="item.status === 1" src="@/assets/image/zu3220@2x.png" class="w-[105px] h-[105px]" alt="" />
+            <img v-if="item.status === 2" src="@/assets/image/zdw221@2x.png" class="w-[105px] h-[105px]" alt="" />
+          </div>
+        </div>
+            <div class="flex text-primary text-[16px] mt-20px  w-50%">
+              <div class="font-bold w-100px">作品名称</div>
+              <div class="">{{item.workName}}</div>
+            </div>
+            <div class="flex text-primary text-[16px] mt-20px">
+              <div class="flex w-50%">
+                <div class="font-bold w-100px">长度</div>
+                <div class="">{{item.length}} <span class="ml-16px">cm</span></div>
+              </div>
+              <div class="flex w-50% ml-a">
+                <div class="w-100px">宽度</div>
+                <div class="">{{item.wide}} <span class="ml-16px">cm</span></div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+      <div class="absolute bottom-0 right-0 ">
+        <img class="w-876px h-385px" src="@/assets/image/dfdc46@2x.png" alt="">
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/details/size1920/index.vue

@@ -0,0 +1,64 @@
+<script setup>
+import {useAuth} from "@/store/auth/index.js";
+import {NImage} from 'naive-ui'
+const {clickApply,detailData,openMask1,goBack} =useAuth()
+
+</script>
+
+<template>
+  <div class="box-border relative w-screen h-screen bg-center bg-no-repeat bg-cover bg-[url('@/assets/image/zu3346@2x.png')] flex items-center flex-col">
+
+    <div class="mb-[33px] mt-[176px]">
+      <img class="w-[280px] h-[46px]" src="@/assets/image/zu3314@2x.png" alt="">
+    </div>
+    <div class="absolute top-0 left-[385px]">
+      <img class="w-[235px] h-[293px]" src="@/assets/image/gdz47@2x.png" alt="">
+    </div>
+    <div class="bg-[url('@/assets/image/zue3250@2x.png')] w-[908px] h-[595px] bg-no-repeat bg-contain pt-[39px] px-103px pb-23px z-10">
+      <div class="flex">
+        <div class="text-primary text-[14px] w-[62px] font-bold pl-15px">*姓名</div>
+        <div class="text-primary text-[14px]">{{detailData.name}}</div>
+      </div>
+      <div class="flex mt-[11px]">
+        <div class="text-primary text-[14px] w-[62px] font-bold pl-15px">*年龄</div>
+        <div class="text-primary text-[14px]">{{detailData.age}} 岁</div>
+      </div>
+      <div class="flex  mt-[11px]">
+        <div class="text-primary text-[14px] w-[62px] font-bold pl-15px">*性别</div>
+        <div class="text-primary text-[14px]">{{detailData.gender}}</div>
+      </div>
+      <div class="w-[702px] h-[392px] bg-#F5F5F5 mt-[8.26px] mb-10px flex pt-[15px]">
+        <div :class="`flex w-full ${detailData.worksInfo?.length>1&&index+1!==detailData.worksInfo?.length?'border-b-1px border-b-[#D6E0E9] border-b-solid mb-50px pb-50px':''}` "  v-for="(item,index) of detailData.worksInfo" :key="index">
+          <div class="text-primary text-14px font-bold shrink-0 w-[62px] pl-15px">*作品{{index+1}}</div>
+          <div>
+            <n-image
+                class="w-295px h-141px"
+                :src="item.picUrl.replace('https', 'http')"
+            />
+            <div class="flex text-primary text-[12px] mt-8px  w-50%">
+              <div class="font-bold w-100px">作品名称</div>
+              <div class="">{{item.workName}}</div>
+            </div>
+            <div class="flex text-primary text-[12px] mt-20px">
+              <div class="flex w-50%">
+                <div class="font-bold w-100px">长度</div>
+                <div class="">{{item.length}} <span class="ml-12px">cm</span></div>
+              </div>
+              <div class="flex w-50% ml-a">
+                <div class="w-100px">宽度</div>
+                <div class="">{{item.wide}} <span class="ml-12px">cm</span></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="absolute bottom-0 right-0 ">
+        <img class="w-876px h-385px" src="@/assets/image/dfdc46@2x.png" alt="">
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/views/login/index.vue

@@ -20,7 +20,7 @@ const viewComponent = computed(() => {
     return size1920;
   }
 })
-localStorage.clear()
+
 </script>
 
 <template>

src/views/login/size1920/index.vue

@@ -1,6 +1,6 @@
 <script setup>
 import {useAuth} from "@/store/auth/index.js";
-const {clickSendCode,telNum,code}= useAuth()
+const {clickSendCode,telNum,code,clickLogin}= useAuth()
 
 </script>
 
@@ -24,7 +24,7 @@ const {clickSendCode,telNum,code}= useAuth()
             <div class="w-[120px] h-[34px] bg-primary text-#fff flex items-center text-[14px] justify-center shrink-0 cursor-pointer" @click="clickSendCode">获取验证码</div>
           </div>
         </div>
-        <div class="bg-[url('@/assets/image/z3255@2x.png')] w-[240px] h-[39px] bg-center bg-no-repeat bg-contain flex items-center justify-center text-#fff text-[16px] mt-[73px] cursor-pointer">登录/注册</div>
+        <div class="bg-[url('@/assets/image/z3255@2x.png')] w-[240px] h-[39px] bg-center bg-no-repeat bg-contain flex items-center justify-center text-#fff text-[16px] mt-[73px] cursor-pointer" @click="clickLogin">登录/注册</div>
       </div>
       <div class="mt-[116px]">
         <img class="w-[248px] h-[28px]" src="@/assets/image/zu733@2x.png" alt="">

src/views/result/size1440/index.vue

@@ -1,9 +1,32 @@
 <script setup>
+import {useAuth} from "@/store/auth/index.js";
+
+const {viewDetails} =useAuth()
 
 </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="mt-176px mb-33px">
+      <img src="@/assets/image/zu3311@2x.png" class="w-280px h-46px" alt="">
+    </div>
+    <div class="top-0 absolute left-193px">
+      <img src="@/assets/image/gdz47@2x.png" class="w-315px h-391px" alt="">
+    </div>
+    <div class="absolute bottom-0 right-0 ">
+      <img class="w-876px h-385px" src="@/assets/image/dfdc46@2x.png" alt="">
+    </div>
 
+    <div class="bg-[url('@/assets/image/zue3250@2x.png')] w-[1211px] h-[794px] bg-no-repeat bg-contain flex flex-col items-center">
+      <div class="mt-180px">
+        <img src="@/assets/image/gdzd57@2x.png" class="w-216px h-272px" alt="">
+      </div>
+      <div class="text-primary  text-19px mt-13px">
+        提交成功
+      </div>
+      <div class="w-320px h-52px bg-contain bg-no-repeat bg-[url('@/assets/image/dfdf1.png')] flex-center text-white text-21px shrink-0 mt-[71px]" @click="viewDetails">查看详情</div>
+    </div>
+  </div>
 </template>
 
 <style scoped lang="scss">

src/views/result/size1920/index.vue

@@ -1,9 +1,32 @@
 <script setup>
+import {useAuth} from "@/store/auth/index.js";
+
+const {viewDetails} =useAuth()
 
 </script>
 
 <template>
+  <div class="box-border relative w-screen h-screen bg-center bg-no-repeat bg-cover bg-[url('@/assets/image/zu3346@2x.png')] flex items-center flex-col">
+    <div class="mt-123px mb-25px">
+      <img src="@/assets/image/zu3311@2x.png" class="w-210px h-35px" alt="">
+    </div>
+    <div class="top-0 absolute left-385px">
+      <img src="@/assets/image/gdz47@2x.png" class="w-235px h-293px" alt="">
+    </div>
+    <div class="absolute bottom-0 right-0 ">
+      <img class="w-876px h-385px" src="@/assets/image/dfdc46@2x.png" alt="">
+    </div>
 
+    <div class="bg-[url('@/assets/image/zue3250@2x.png')] w-[908px] h-[595px] bg-no-repeat bg-contain flex flex-col items-center">
+      <div class="mt-135px">
+        <img src="@/assets/image/gdzd57@2x.png" class="w-162px h-204px" alt="">
+      </div>
+      <div class="text-primary  text-14px mt-10px">
+        提交成功
+      </div>
+      <div class="w-240px h-39px bg-contain bg-no-repeat bg-[url('@/assets/image/dfdf1.png')] flex-center text-white text-16px shrink-0 mt-[53px] cursor-pointer" @click="viewDetails">查看详情</div>
+    </div>
+  </div>
 </template>
 
 <style scoped lang="scss">

src/views/signup/size1440/index.vue

@@ -1,22 +1,8 @@
 <script setup>
 import {ref} from 'vue'
-import {NUpload, NModal, NSelect} from 'naive-ui'
+import {NUpload, NSelect} from 'naive-ui'
 import {useAuth} from "@/store/auth/index.js";
-const {formData,genderOptions,clickAddWorks,removeWorks,goConfirm,deleteImg,afterRead} =useAuth()
+const {formData,genderOptions,clickAddWorks,removeWorks,afterRead,goConfirm} =useAuth()
-
-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>
@@ -63,8 +49,8 @@ const handlePreview=()=>{
           <div class="mt-10px">
          <div class="flex items-end">
            <n-upload
-               action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
+               v-model:file-list="item.imgList"
-               :default-file-list="previewFileList"
+               :custom-request="(e)=>{afterRead(e.file,item,e)}"
                list-type="image-card"
                :max="1"
            >
@@ -103,7 +89,7 @@ const handlePreview=()=>{
           <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 shrink-0">
+      <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 shrink-0" @click="goConfirm">
         确定
       </div>
     </div>
@@ -141,4 +127,9 @@ const handlePreview=()=>{
   width: 393px;
   height: 188px;
 }
+:deep(.n-upload-file.n-upload-file--info-status.n-upload-file--image-card-type){
+  border:none;
+  width: 393px;
+  height: 188px;
+}
 </style>

src/views/signup/size1920/index.vue

@@ -1,18 +1,8 @@
 <script setup>
 import {useAuth} from "@/store/auth/index.js";
-
-const {clickApply,formData,genderOptions,clickAddWorks,removeWorks} =useAuth()
-
 import {ref} from 'vue'
-import {NUpload,NSelect} from 'naive-ui'
+import {NUpload,NSelect,NScrollbar} from 'naive-ui'
-const previewFileList=ref([
+const {clickApply,formData,genderOptions,clickAddWorks,removeWorks,afterRead,goConfirm} =useAuth()
-  {
-    id: "react",
-    name: "我是react.png",
-    status: "finished",
-    url: "https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
-  }
-])
 </script>
 
 <template>
@@ -26,25 +16,26 @@ const previewFileList=ref([
     <div class="">
       <img class="w-[210px] h-[35px] mt-[132px] mb-[25px]" src="@/assets/image/zu3311@2x.png" alt="">
     </div>
-    <div class="bg-[url('@/assets/image/zue3250@2x.png')] pt-23px pb-12px w-908px h-595px bg-center bg-no-repeat bg-cover  pr-103px pl-103px flex items-center flex-col">
+    <div class="bg-[url('@/assets/image/zue3250@2x.png')] pt-23px pb-12px w-908px h-595px bg-center bg-no-repeat bg-cover  pr-103px pl-103px flex items-center flex-col z-2">
       <div class="flex items-center">
         <div class="text-primary text-[14px] pl-5px w-[68px] font-bold">*姓名</div>
         <div class="text-primary">
-          <input v-no-space v-model="formData.name" 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">
+          <input v-no-space v-model="formData.name" class="pl-12px pl-12px w-[645px] h-[34px] focus:outline-none placeholder-text-primary placeholder-text-14px focus: bg-[#DCE5E9]   border-none" placeholder="请输入宝贝姓名" type="text">
         </div>
       </div>
       <div class="flex items-center mt-18px">
         <div class="text-primary text-[14px] pl-5px w-[68px] font-bold">*年龄</div>
         <div class="text-primary">
-          <input v-no-space v-model="formData.age" 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="number">
+          <input v-no-space v-model="formData.age" class="pl-12px pl-12px w-[645px] h-[34px] focus:outline-none placeholder-text-primary placeholder-text-14px focus: bg-[#DCE5E9]   border-none" placeholder="请输入宝贝年龄" type="number">
         </div>
       </div>
       <div class="flex items-center mt-18px">
         <div class="text-primary text-[14px] pl-5px w-[68px] font-bold">*性别</div>
         <div class="text-primary relative">
           <n-select
+              clearable
+              placeholder="请选择宝贝性别"
                v-model:value="formData.gender"
-              placeholder="请选择性别"
               style="--n-border-hover:none!important;"
               class="w-[645px] h-[34px] focus:outline-none placeholder-text-primary placeholder-text-14px focus: bg-[#DCE5E9]   border-none"
               :options="genderOptions.map(x=>{
@@ -57,53 +48,58 @@ const previewFileList=ref([
           <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 pb-9px mt-16px w-[710px] flex  flex-col">
+      <div class="bg-#F5F5F5 pb-9px mt-16px w-[710px] flex  flex-col overflow-y-auto">
-        <div class="flex" v-for="(item,index) of formData.works" :key="index">
+        <n-scrollbar>
-          <div class="text-primary text-[14px] pl-5px w-[68px] font-bold shrink-0 mt-15px">*作品{{index+1}}</div>
+          <div class="flex" v-for="(item,index) of formData.works" :key="index">
-          <div class="mt-10px">
+            <div class="text-primary text-[14px] pl-5px w-[68px] font-bold shrink-0 mt-15px">*作品{{index+1}}</div>
+            <div class="mt-10px">
+          <div class="flex items-end">
             <n-upload
-                action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
+                v-model:file-list="item.imgList"
-                :default-file-list="previewFileList"
+                :custom-request="(e)=>{afterRead(e.file,item,e)}"
                 list-type="image-card"
                 :max="1"
             >
               <div class="w-295px h-141px bg-#D6E0E9">
-          <div class="flex items-center flex-col justify-center w-100% h-100% rounded-5px">
+                <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="">
+                  <img src="@/assets/image/zu3264@2x.png" class="w-23px h-23px" alt="">
-            <div class="text-19px text-primary mt-11px">上传作品</div>
+                  <div class="text-19px text-primary mt-11px">上传作品</div>
-          </div>
+                </div>
               </div>
             </n-upload>
-            <div class="mt-8px text-12px text-[#2B69A1]">作品名称</div>
+            <img src="@/assets/image/sc@2x.png" v-if="formData.works?.length>1" @click="removeWorks(index)" class="w-16px h-18px ml-8px" alt="">
-            <input v-no-space v-model="item.workName" class="pl-16px pr-16px w-[634px] h-[34px] mt-5px focus:outline-none placeholder-text-primary placeholder-text-14px focus: bg-[#DCE5E9]   border-none" placeholder="请输入作品名称" type="text">
+          </div>
-            <div class="flex justify-between mt-5px mb-5px">
+              <div class="mt-8px text-12px text-[#2B69A1]">作品名称</div>
-              <div class="flex flex-col">
+              <input v-no-space v-model="item.workName" class="px-12px w-[634px] h-[34px] mt-5px focus:outline-none placeholder-text-primary placeholder-text-14px focus: bg-[#DCE5E9]   border-none" placeholder="请输入作品名称" type="text">
-                <div class="text-12px text-[#2B69A1]">长度</div>
+              <div class="flex justify-between mt-5px mb-5px">
-                <div class="flex items-center ">
+                <div class="flex flex-col">
-                  <input v-no-space v-model="item.length" class="pl-16px pr-16px w-279px h-34px mt-5px focus:outline-none placeholder-text-primary placeholder-text-14px focus: bg-[#DCE5E9]   border-none" placeholder="请输入" type="text">
+                  <div class="text-12px text-[#2B69A1]">长度</div>
-                  <div class="ml-10px text-[#2B69A1] text-14px mr-16px">cm</div>
+                  <div class="flex items-center ">
+                    <input v-no-space v-decimal v-model="item.length" class="px-12px w-279px h-34px mt-5px focus:outline-none placeholder-text-primary placeholder-text-14px focus: bg-[#DCE5E9]   border-none" placeholder="请输入" type="number">
+                    <div class="ml-10px text-[#2B69A1] text-14px mr-16px">cm</div>
+                  </div>
                 </div>
-              </div>
+                <div class="flex flex-col">
-              <div class="flex flex-col">
+                  <div class="text-12px text-[#2B69A1]">宽度</div>
-                <div class="text-12px text-[#2B69A1]">宽度</div>
+                  <div class="flex items-center">
-                <div class="flex items-center">
+                    <input v-no-space v-decimal v-model="item.wide" class="px-12px w-279px h-34px mt-5px focus:outline-none placeholder-text-primary placeholder-text-14px focus: bg-[#DCE5E9]   border-none" placeholder="请输入" type="number">
-                  <input v-no-space v-model="item.length" class="pl-16px pr-16px w-279px h-34px mt-5px focus:outline-none placeholder-text-primary placeholder-text-14px focus: bg-[#DCE5E9]   border-none" placeholder="请输入" type="text">
+                    <div class="ml-10px text-[#2B69A1] text-14px mr-16px">cm</div>
-                  <div class="ml-10px text-[#2B69A1] text-14px mr-16px">cm</div>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
-        </div>
+          <div  class=" w-36px h-36px mt-5px bg-[#336699] cursor-pointer rounded-full flex items-center justify-center shadow-0-0-10px-rgba(0,0,0,0.1) relative mx-auto" @click="clickAddWorks">
-        <div  class=" w-36px h-36px mt-5px bg-[#336699] cursor-pointer rounded-full flex items-center justify-center shadow-0-0-10px-rgba(0,0,0,0.1) relative mx-auto">
+            <div class="absolute w-17px h-2px bg-white"></div>
-          <div class="absolute w-17px h-2px bg-white"></div>
+            <div class="absolute w-2px h-17px bg-white"></div>
-          <div class="absolute w-2px h-17px bg-white"></div>
+          </div>
-        </div>
+        </n-scrollbar>
       </div>
-      <div class="mt-15px w-240px h-39px bg-cover bg-no-repeat bg-[url('@/assets/image/dfdf1.png')] cursor-pointer flex justify-center items-center text-white text-16px">
+      <div class="mt-10px w-240px h-39px bg-cover bg-no-repeat bg-[url('@/assets/image/dfdf1.png')] cursor-pointer flex justify-center items-center text-white text-16px shrink-0" @click="goConfirm">
         确定
       </div>
     </div>
-    <div class="absolute bottom-0 right-0">
+    <div class="absolute bottom-0 right-0 z-0">
       <img class="w-876px h-385px" src="@/assets/image/dfdf4@2x.png" alt="">
     </div>
   </div>
@@ -115,6 +111,12 @@ const previewFileList=ref([
 :deep(.n-base-selection-label){
   background: #DCE5E9!important;
 }
+:deep(.n-upload){
+
+  border:none;
+  width: 295px;
+  height: 141px;
+}
 :deep(.n-upload-file.n-upload-file--success-status.n-upload-file--image-card-type){
 
   border:none;