"实现主题配置和作品集上传功能的优化"
This commit is contained in:
parent
2f615b36c1
commit
ac4cb11292
BIN
src/assets/image/gdzd57@2x.png
Normal file
BIN
src/assets/image/gdzd57@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 72 KiB |
24
src/main.js
24
src/main.js
@ -25,18 +25,24 @@ app.directive('no-space', {
|
||||
});
|
||||
}
|
||||
})
|
||||
app.directive('number-only', {
|
||||
// 注册全局自定义指令
|
||||
app.directive('decimal', {
|
||||
mounted(el) {
|
||||
el.addEventListener('input', (event) => {
|
||||
const { value } = event.target;
|
||||
// 使用正则表达式限制输入格式
|
||||
event.target.value = value.replace(/[^0-9.]/g, ''); // 只保留数字和小数点
|
||||
if (event.target.value.indexOf('.') !== -1) {
|
||||
// 如果已经包含小数点
|
||||
const parts = event.target.value.split('.');
|
||||
event.target.value = `${parts[0]}.${parts[1].slice(0, 1)}`; // 只保留一位小数
|
||||
// 获取当前输入的值
|
||||
let value = event.target.value;
|
||||
|
||||
// 匹配有效的数字（最多一位小数）
|
||||
const regex = /^\d*\.?\d{0,1}$/;
|
||||
|
||||
if (!regex.test(value)) {
|
||||
// 如果不匹配，将输入值设置为最后一次有效输入的值
|
||||
event.target.value = el._lastValidValue || '';
|
||||
} else {
|
||||
// 如果匹配，保存该有效输入值
|
||||
el._lastValidValue = value;
|
||||
}
|
||||
});
|
||||
},
|
||||
}
|
||||
});
|
||||
app.mount('#app');
|
||||
|
||||
@ -15,6 +15,11 @@ const routes = [
|
||||
name: 'signup',
|
||||
component: () => import('@/views/signup/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/result',
|
||||
name: 'result',
|
||||
component: () => import('@/views/result/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/confirm',
|
||||
name: 'confirm',
|
||||
|
||||
@ -86,6 +86,10 @@ export const useAuth=createGlobalState(()=>{
|
||||
item.picUrl=''
|
||||
item.imgList=[]
|
||||
}
|
||||
const viewDetails=async ()=>{
|
||||
await getDetail()
|
||||
router.push('/details')
|
||||
}
|
||||
const clickApply=async ()=>{
|
||||
const isValid = validateFormData();
|
||||
if (!isValid){
|
||||
@ -98,7 +102,8 @@ export const useAuth=createGlobalState(()=>{
|
||||
const res=await competitionApply(data)
|
||||
if(res.status===0){
|
||||
message.success('报名成功')
|
||||
router.push('/confirm')
|
||||
|
||||
router.push('/result')
|
||||
}
|
||||
}
|
||||
let timer = null;
|
||||
@ -109,7 +114,6 @@ export const useAuth=createGlobalState(()=>{
|
||||
}
|
||||
const res=await competitionWorks({telNum:telNum.value})
|
||||
if (res.status===0){
|
||||
console.log(res.data,'getDetail')
|
||||
detailData.value=res.data
|
||||
}
|
||||
}
|
||||
@ -178,6 +182,7 @@ export const useAuth=createGlobalState(()=>{
|
||||
})*/
|
||||
}
|
||||
return {
|
||||
viewDetails,
|
||||
goBack,
|
||||
openMask1,
|
||||
deleteImg,
|
||||
|
||||
@ -20,6 +20,7 @@ const viewComponent = computed(() => {
|
||||
return size1920;
|
||||
}
|
||||
})
|
||||
localStorage.clear()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@ -20,7 +20,7 @@ const {clickSendCode,telNum,code,showTextCode ,clickLogin }= useAuth()
|
||||
<div class="text-primary text-[19px] font-bold w-[88px]">验证码</div>
|
||||
<div class="flex items-center justify-between w-[454px] grow-1">
|
||||
<input v-model="code" v-no-space class="pl-[16px] w-[281px] h-[45px] focus:outline-none placeholder:text-primary placeholder:text-[19px] focus: bg-[#DCE5E9] border-none" placeholder="请输入验证码" type="text">
|
||||
<div class="w-[160px] h-[45px] bg-primary text-#fff flex items-center justify-center shrink-0" @click="clickSendCode">{{ showTextCode }}</div>
|
||||
<div class="w-[160px] h-[45px] bg-primary text-#fff flex items-center justify-center shrink-0 text-19px" @click="clickSendCode">{{ showTextCode }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-[url('@/assets/image/z3255@2x.png')] w-[320px] h-[52px] bg-center bg-no-repeat bg-contain flex items-center justify-center text-#fff text-[21px] mt-[97px]" @click="clickLogin">登录/注册</div>
|
||||
@ -34,5 +34,16 @@ const {clickSendCode,telNum,code,showTextCode ,clickLogin }= useAuth()
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
:deep(.n-upload-file.n-upload-file--success-status.n-upload-file--image-card-type){
|
||||
border-radius: 5px;
|
||||
border:none;
|
||||
width: 393px;
|
||||
height: 188px;
|
||||
}
|
||||
:deep(.n-upload-trigger.n-upload-trigger--image-card){
|
||||
border-radius: 5px;
|
||||
border:none;
|
||||
width: 393px;
|
||||
height: 188px;
|
||||
}
|
||||
</style>
|
||||
|
||||
31
src/views/result/index.vue
Normal file
31
src/views/result/index.vue
Normal file
@ -0,0 +1,31 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
import { useWindowSize } from '@vueuse/core';
|
||||
import { useAuth } from '@/store/auth/index.js';
|
||||
import size375 from '@/views/result/size375/index.vue';
|
||||
import size768 from '@/views/result/size768/index.vue';
|
||||
import size1440 from '@/views/result/size1440/index.vue';
|
||||
import size1920 from '@/views/result/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;
|
||||
}
|
||||
})
|
||||
localStorage.clear()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<component @sendCode="clickSendCode" :is="viewComponent" />
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
</style>
|
||||
11
src/views/result/size1440/index.vue
Normal file
11
src/views/result/size1440/index.vue
Normal file
@ -0,0 +1,11 @@
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
11
src/views/result/size1920/index.vue
Normal file
11
src/views/result/size1920/index.vue
Normal file
@ -0,0 +1,11 @@
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
36
src/views/result/size375/index.vue
Normal file
36
src/views/result/size375/index.vue
Normal file
@ -0,0 +1,36 @@
|
||||
<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/gdz53@2x.png')] flex items-center flex-col">
|
||||
<div class="mt-143px">
|
||||
<img src="@/assets/image/zu3311@2x.png" class="w-1074px h-178px" alt="">
|
||||
</div>
|
||||
<div class="top-0 absolute left-0px">
|
||||
<img src="@/assets/image/gdz27.png" class="w-671px h-728px" alt="">
|
||||
</div>
|
||||
<div class="absolute bottom-0 right-0">
|
||||
<img class="w-1170px h-557px" src="@/assets/image/dfdf4@2x.png" alt="">
|
||||
</div>
|
||||
<div class="absolute bottom-75px translate-x-[-50%] left-50%">
|
||||
<img class="w-620px h-71px" src="@/assets/image/zu733@2x.png" alt="">
|
||||
</div>
|
||||
<div class="mt-[123px] w-[1608px] h-[2678px] bg-[url('@/assets/image/zu3186@2x.png')] bg-cover bg-no-repeat flex flex-col items-center">
|
||||
<div class="mt-394px">
|
||||
<img src="@/assets/image/gdzd57@2x.png" class="w-829px h-1044px" alt="">
|
||||
</div>
|
||||
<div class="text-primary text-72px mt-51px">
|
||||
提交成功
|
||||
</div>
|
||||
<div class="w-866px h-200px bg-contain bg-no-repeat bg-[url('@/assets/image/zu3189@2x1.png')] flex-center text-white text-82px shrink-0 mt-[236px]" @click="viewDetails">查看详情</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
36
src/views/result/size768/index.vue
Normal file
36
src/views/result/size768/index.vue
Normal file
@ -0,0 +1,36 @@
|
||||
<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/gdz53@2x.png')] flex items-center flex-col">
|
||||
<div class="mt-303px">
|
||||
<img src="@/assets/image/zu3311@2x.png" class="w-525px h-87px" alt="">
|
||||
</div>
|
||||
<div class="top-0 absolute left-40px">
|
||||
<img src="@/assets/image/gdz47@2x.png" class="w-610px h-668px" alt="">
|
||||
</div>
|
||||
<div class="absolute bottom-0 right-0">
|
||||
<img class="w-1170px h-557px" src="@/assets/image/dfdf4@2x.png" alt="">
|
||||
</div>
|
||||
<div class="absolute bottom-75px translate-x-[-50%] left-50%">
|
||||
<img class="w-620px h-71px" src="@/assets/image/zu733@2x.png" alt="">
|
||||
</div>
|
||||
<div class="mt-[90px] w-[1173px] h-[1489px] bg-[url('@/assets/image/zu3327@2x.png')] bg-cover bg-no-repeat flex flex-col items-center">
|
||||
<div class="mt-333px">
|
||||
<img src="@/assets/image/gdzd57@2x.png" class="w-405px h-510px" alt="">
|
||||
</div>
|
||||
<div class="text-primary text-35px mt-25px">
|
||||
提交成功
|
||||
</div>
|
||||
<div class="w-600px h-98px bg-contain bg-no-repeat bg-[url('@/assets/image/dfdf1.png')] flex-center text-white text-40px shrink-0 mt-[333px]" @click="viewDetails">查看详情</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
@ -1,6 +1,9 @@
|
||||
<script setup>
|
||||
import {ref} from 'vue'
|
||||
import {NUpload,NModal} from 'naive-ui'
|
||||
import {NUpload, NModal, 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",
|
||||
@ -21,9 +24,7 @@ const handlePreview=()=>{
|
||||
<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>
|
||||
@ -31,66 +32,78 @@ const handlePreview=()=>{
|
||||
<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">
|
||||
<input v-no-space v-model="formData.name" 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">
|
||||
<input v-no-space v-model="formData.age" 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="number">
|
||||
</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 class="text-primary">
|
||||
<n-select
|
||||
v-model:value="formData.gender"
|
||||
placeholder="请选择宝贝性别"
|
||||
class="w-861px"
|
||||
:options="genderOptions.map(x=>{
|
||||
return {
|
||||
label:x.text,value:x.value
|
||||
}
|
||||
})"
|
||||
/>
|
||||
</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="bg-#F5F5F5 pb-12px mt-21px w-[936px] flex flex-col grow-1 overflow-y-auto">
|
||||
<div :class="`flex w-full ${formData.works?.length>1&&index+1!==formData.works?.length?'border-b-1px border-b-[#D6E0E9] border-b-solid mb-27px pb-27px':''}` " v-for="(item,index) of formData.works" :key="index">
|
||||
<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="flex items-end">
|
||||
<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>
|
||||
<img src="@/assets/image/sc@2x.png" v-if="formData.works?.length>1" @click="removeWorks(index)" class="w-22px h-24px ml-8px" alt="">
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<input v-no-space v-model="item.workName" 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">
|
||||
<input v-decimal v-no-space v-model="item.length" 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="number">
|
||||
<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">
|
||||
<input v-decimal v-no-space v-model="item.wide" 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="number">
|
||||
<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=" 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 shrink-0" @click="clickAddWorks">
|
||||
<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 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>
|
||||
</div>
|
||||
@ -101,12 +114,28 @@ const handlePreview=()=>{
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.n-base-selection-input__content){
|
||||
color:#2B69A1 ;
|
||||
}
|
||||
:deep(.n-base-selection-placeholder__inner){
|
||||
color: rgb(131, 162, 195)!important;
|
||||
}
|
||||
:deep(.n-base-selection-label){
|
||||
height: 45px;
|
||||
background: #DCE5E9!important;
|
||||
}
|
||||
:deep(.n-upload-file.n-upload-file--success-status.n-upload-file--image-card-type){
|
||||
|
||||
border:none;
|
||||
width: 393px;
|
||||
height: 188px;
|
||||
}
|
||||
:deep(.n-upload){
|
||||
|
||||
border:none;
|
||||
width: 393px;
|
||||
height: 188px;
|
||||
}
|
||||
:deep(.n-upload-trigger.n-upload-trigger--image-card){
|
||||
border:none;
|
||||
width: 393px;
|
||||
|
||||
@ -26,7 +26,7 @@ const {formData,genderOptions,clickAddWorks,removeWorks,goConfirm,deleteImg,afte
|
||||
<div class="flex items-center mt-[45px]">
|
||||
<div class="text-primary text-[35px] w-[165px] font-bold">*年龄</div>
|
||||
<div class="text-primary text-[35px]">
|
||||
<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">
|
||||
<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="number">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center mt-18px">
|
||||
@ -34,7 +34,7 @@ const {formData,genderOptions,clickAddWorks,removeWorks,goConfirm,deleteImg,afte
|
||||
<div class="text-primary text-[35px]">
|
||||
<n-select
|
||||
v-model:value="formData.gender"
|
||||
placeholder="请选择性别"
|
||||
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 {
|
||||
@ -42,13 +42,11 @@ const {formData,genderOptions,clickAddWorks,removeWorks,goConfirm,deleteImg,afte
|
||||
}
|
||||
})"
|
||||
/>
|
||||
<!-- <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="text-primary text-[35px] w-[165px] font-bold mt-38px pl-20px">*作品{{index+1}}</div>
|
||||
<div class="mt-20px">
|
||||
<div class="flex items-end">
|
||||
<van-uploader v-model="item.imgList" @delete="deleteImg(item)" :max-count="1" :after-read="(e)=>{afterRead(e,item)}">
|
||||
@ -67,14 +65,14 @@ const {formData,genderOptions,clickAddWorks,removeWorks,goConfirm,deleteImg,afte
|
||||
<div class="flex flex-col">
|
||||
<div class="text-30px text-[#2B69A1]">长度</div>
|
||||
<div class="flex items-center mt-[10px]">
|
||||
<input v-number-only 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="number">
|
||||
<input v-decimal 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="number">
|
||||
<div class="ml-25px text-[#2B69A1] text-35px">cm</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<div class="text-30px text-[#2B69A1]">宽度</div>
|
||||
<div class="flex items-center mt-[10px]">
|
||||
<input v-number-only 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="number">
|
||||
<input v-decimal 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="number">
|
||||
<div class="ml-25px text-[#2B69A1] text-35px">cm</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -86,7 +84,7 @@ const {formData,genderOptions,clickAddWorks,removeWorks,goConfirm,deleteImg,afte
|
||||
<div class="absolute w-6px h-43px bg-white"></div>
|
||||
</div>
|
||||
</div>
|
||||
<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 class="mt-43px w-600px h-98px bg-contain bg-no-repeat bg-[url('@/assets/image/dfdf1.png')] flex-center text-white text-40px shrink-0" @click="goConfirm">
|
||||
确定
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user