1`212
This commit is contained in:
parent
ac4cb11292
commit
eb0ab15eae
@ -22,5 +22,8 @@ const themeOverrides= ref({
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
||||
.n-base-icon{
|
||||
width: initial;
|
||||
height: initial;
|
||||
}
|
||||
</style>
|
||||
|
||||
BIN
src/assets/image/dfdc46@2x.png
Normal file
BIN
src/assets/image/dfdc46@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 741 KiB |
@ -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',
|
||||
|
||||
@ -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)=>{
|
||||
|
||||
@ -1,30 +1,31 @@
|
||||
<script setup>
|
||||
import {useAdaptation} from "@/utils/self-adaption.js";
|
||||
import {sizes} from "@/dict/index.js";
|
||||
import size375 from '@/views/confirm/size375/index.vue'
|
||||
import {computed} from "vue";
|
||||
import size768 from "@/views/confirm/size768/index.vue";
|
||||
import size1440 from "@/views/login/size1440/index.vue";
|
||||
import size1920 from "@/views/login/size1920/index.vue";
|
||||
const {currentRange }= useAdaptation(sizes)
|
||||
const viewComponent = computed(()=>{
|
||||
switch (currentRange.value?.minWidth){
|
||||
case '0px':
|
||||
return size375
|
||||
case '768px':
|
||||
return size768
|
||||
case '1440px':
|
||||
return size1440
|
||||
case '1920px':
|
||||
return size1920
|
||||
import { computed } from 'vue';
|
||||
import { useWindowSize } from '@vueuse/core';
|
||||
import { useAuth } from '@/store/auth/index.js';
|
||||
import size375 from '@/views/confirm/size375/index.vue';
|
||||
import size768 from '@/views/confirm/size768/index.vue';
|
||||
import size1440 from '@/views/confirm/size1440/index.vue';
|
||||
import size1920 from '@/views/confirm/size1920/index.vue';
|
||||
const { clickSendCode } = useAuth();
|
||||
const { width } = useWindowSize();
|
||||
const viewComponent = computed(() => {
|
||||
const viewWidth = width.value;
|
||||
if (viewWidth <= 450) {
|
||||
return size375;
|
||||
} else if (viewWidth <= 1100) {
|
||||
return size768;
|
||||
} else if (viewWidth <= 1500) {
|
||||
return size1440;
|
||||
} else if (viewWidth <= 1920) {
|
||||
return size1920;
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<component :is="viewComponent"></component>
|
||||
<component @sendCode="clickSendCode" :is="viewComponent" />
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
|
||||
65
src/views/confirm/size1440/index.vue
Normal file
65
src/views/confirm/size1440/index.vue
Normal file
@ -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>
|
||||
65
src/views/confirm/size1920/index.vue
Normal file
65
src/views/confirm/size1920/index.vue
Normal file
@ -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>
|
||||
@ -1,30 +1,31 @@
|
||||
<script setup>
|
||||
import {useAdaptation} from "@/utils/self-adaption.js";
|
||||
import {sizes} from "@/dict/index.js";
|
||||
import size375 from '@/views/details/size375/index.vue'
|
||||
import {computed} from "vue";
|
||||
import size768 from "@/views/details/size768/index.vue";
|
||||
/*import size1440 from "@/views/details/size1440/index.vue";
|
||||
import size1920 from "@/views/details/size1920/index.vue";*/
|
||||
const {currentRange }= useAdaptation(sizes)
|
||||
const viewComponent = computed(()=>{
|
||||
switch (currentRange.value?.minWidth){
|
||||
case '0px':
|
||||
return size375
|
||||
case '768px':
|
||||
return size768
|
||||
/* case '1440px':
|
||||
return size1440
|
||||
case '1920px':
|
||||
return size1920*/
|
||||
import { computed } from 'vue';
|
||||
import { useWindowSize } from '@vueuse/core';
|
||||
import { useAuth } from '@/store/auth/index.js';
|
||||
import size375 from '@/views/details/size375/index.vue';
|
||||
import size768 from '@/views/details/size768/index.vue';
|
||||
import size1440 from '@/views/details/size1440/index.vue';
|
||||
import size1920 from '@/views/details/size1920/index.vue';
|
||||
const { clickSendCode } = useAuth();
|
||||
const { width } = useWindowSize();
|
||||
const viewComponent = computed(() => {
|
||||
const viewWidth = width.value;
|
||||
if (viewWidth <= 450) {
|
||||
return size375;
|
||||
} else if (viewWidth <= 1100) {
|
||||
return size768;
|
||||
} else if (viewWidth <= 1500) {
|
||||
return size1440;
|
||||
} else if (viewWidth <= 1920) {
|
||||
return size1920;
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<component :is="viewComponent"></component>
|
||||
<component @sendCode="clickSendCode" :is="viewComponent" />
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
|
||||
68
src/views/details/size1440/index.vue
Normal file
68
src/views/details/size1440/index.vue
Normal file
@ -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>
|
||||
64
src/views/details/size1920/index.vue
Normal file
64
src/views/details/size1920/index.vue
Normal file
@ -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>
|
||||
@ -20,7 +20,7 @@ const viewComponent = computed(() => {
|
||||
return size1920;
|
||||
}
|
||||
})
|
||||
localStorage.clear()
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@ -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="">
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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">
|
||||
|
||||
@ -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 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=()=>{
|
||||
|
||||
}
|
||||
const {formData,genderOptions,clickAddWorks,removeWorks,afterRead,goConfirm} =useAuth()
|
||||
</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"
|
||||
:default-file-list="previewFileList"
|
||||
v-model:file-list="item.imgList"
|
||||
: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>
|
||||
|
||||
@ -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'
|
||||
const previewFileList=ref([
|
||||
{
|
||||
id: "react",
|
||||
name: "我是react.png",
|
||||
status: "finished",
|
||||
url: "https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
|
||||
}
|
||||
])
|
||||
import {NUpload,NSelect,NScrollbar} from 'naive-ui'
|
||||
const {clickApply,formData,genderOptions,clickAddWorks,removeWorks,afterRead,goConfirm} =useAuth()
|
||||
</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="flex" v-for="(item,index) of formData.works" :key="index">
|
||||
<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="bg-#F5F5F5 pb-9px mt-16px w-[710px] flex flex-col overflow-y-auto">
|
||||
<n-scrollbar>
|
||||
<div class="flex" v-for="(item,index) of formData.works" :key="index">
|
||||
<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"
|
||||
:default-file-list="previewFileList"
|
||||
v-model:file-list="item.imgList"
|
||||
: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">
|
||||
<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-8px text-12px text-[#2B69A1]">作品名称</div>
|
||||
<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 class="flex justify-between mt-5px mb-5px">
|
||||
<div class="flex flex-col">
|
||||
<div class="text-12px text-[#2B69A1]">长度</div>
|
||||
<div class="flex items-center ">
|
||||
<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="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>
|
||||
<div class="flex flex-col">
|
||||
<div class="text-12px text-[#2B69A1]">宽度</div>
|
||||
<div class="flex items-center">
|
||||
<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>
|
||||
</n-upload>
|
||||
<img src="@/assets/image/sc@2x.png" v-if="formData.works?.length>1" @click="removeWorks(index)" class="w-16px h-18px ml-8px" alt="">
|
||||
</div>
|
||||
<div class="mt-8px text-12px text-[#2B69A1]">作品名称</div>
|
||||
<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="flex justify-between mt-5px mb-5px">
|
||||
<div class="flex flex-col">
|
||||
<div class="text-12px text-[#2B69A1]">长度</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 class="flex flex-col">
|
||||
<div class="text-12px text-[#2B69A1]">宽度</div>
|
||||
<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">
|
||||
<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">
|
||||
<div class="absolute w-17px h-2px bg-white"></div>
|
||||
<div class="absolute w-2px h-17px bg-white"></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="absolute w-17px h-2px bg-white"></div>
|
||||
<div class="absolute w-2px h-17px bg-white"></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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user