Compare commits
3 Commits
9fbcec356e
...
ac4cb11292
| Author | SHA1 | Date | |
|---|---|---|---|
| ac4cb11292 | |||
| 2f615b36c1 | |||
| c753fb96fc |
@ -24,6 +24,7 @@
|
||||
"postcss-pxtorem": "^6.1.0",
|
||||
"postcss-responsive-type": "^1.0.0",
|
||||
"vant": "^4.9.4",
|
||||
"vconsole": "^3.15.1",
|
||||
"vue": "^3.4.31",
|
||||
"vue-router": "^4.2.5"
|
||||
},
|
||||
|
||||
@ -44,6 +44,9 @@ importers:
|
||||
vant:
|
||||
specifier: ^4.9.4
|
||||
version: 4.9.4(vue@3.4.35)
|
||||
vconsole:
|
||||
specifier: ^3.15.1
|
||||
version: 3.15.1
|
||||
vue:
|
||||
specifier: ^3.4.31
|
||||
version: 3.4.35
|
||||
@ -1563,6 +1566,10 @@ packages:
|
||||
convert-source-map@2.0.0:
|
||||
resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
|
||||
|
||||
copy-text-to-clipboard@3.2.0:
|
||||
resolution: {integrity: sha512-RnJFp1XR/LOBDckxTib5Qjr/PMfkatD0MUCQgdpqS8MdKiNUzBjAQBEN6oUy+jW7LI93BBG3DtMB2KOOKpGs2Q==}
|
||||
engines: {node: '>=12'}
|
||||
|
||||
core-js-compat@3.38.0:
|
||||
resolution: {integrity: sha512-75LAicdLa4OJVwFxFbQR3NdnZjNgX6ILpVcVzcC4T2smerB5lELMrJQQQoWV6TiuC/vlaFqgU2tKQx9w5s0e0A==}
|
||||
|
||||
@ -1943,6 +1950,9 @@ packages:
|
||||
ms@2.1.2:
|
||||
resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
|
||||
|
||||
mutation-observer@1.0.3:
|
||||
resolution: {integrity: sha512-M/O/4rF2h776hV7qGMZUH3utZLO/jK7p8rnNgGkjKUw8zCGjRQPxB8z6+5l8+VjRUQ3dNYu4vjqXYLr+U8ZVNA==}
|
||||
|
||||
naive-ui@2.39.0:
|
||||
resolution: {integrity: sha512-5oUJzRG+rtLSH8eRU+fJvVYiQids2BxF9jp+fwGoAqHOptEINrBlgBu9uy+95RHE5FLJ7Q/z41o+qkoGnUrKxQ==}
|
||||
peerDependencies:
|
||||
@ -2477,6 +2487,9 @@ packages:
|
||||
peerDependencies:
|
||||
vue: ^3.0.0
|
||||
|
||||
vconsole@3.15.1:
|
||||
resolution: {integrity: sha512-KH8XLdrq9T5YHJO/ixrjivHfmF2PC2CdVoK6RWZB4yftMykYIaXY1mxZYAic70vADM54kpMQF+dYmvl5NRNy1g==}
|
||||
|
||||
vdirs@0.1.8:
|
||||
resolution: {integrity: sha512-H9V1zGRLQZg9b+GdMk8MXDN2Lva0zx72MPahDKc30v+DtwKjfyOSXWRIX4t2mhDubM1H09gPhWeth/BJWPHGUw==}
|
||||
peerDependencies:
|
||||
@ -4286,6 +4299,8 @@ snapshots:
|
||||
|
||||
convert-source-map@2.0.0: {}
|
||||
|
||||
copy-text-to-clipboard@3.2.0: {}
|
||||
|
||||
core-js-compat@3.38.0:
|
||||
dependencies:
|
||||
browserslist: 4.23.3
|
||||
@ -4653,6 +4668,8 @@ snapshots:
|
||||
|
||||
ms@2.1.2: {}
|
||||
|
||||
mutation-observer@1.0.3: {}
|
||||
|
||||
naive-ui@2.39.0(vue@3.4.35):
|
||||
dependencies:
|
||||
'@css-render/plugin-bem': 0.15.14(css-render@0.15.14)
|
||||
@ -5297,6 +5314,13 @@ snapshots:
|
||||
'@vue/shared': 3.4.35
|
||||
vue: 3.4.35
|
||||
|
||||
vconsole@3.15.1:
|
||||
dependencies:
|
||||
'@babel/runtime': 7.25.0
|
||||
copy-text-to-clipboard: 3.2.0
|
||||
core-js: 3.38.0
|
||||
mutation-observer: 1.0.3
|
||||
|
||||
vdirs@0.1.8(vue@3.4.35):
|
||||
dependencies:
|
||||
evtd: 0.2.4
|
||||
|
||||
16
src/App.vue
16
src/App.vue
@ -1,8 +1,24 @@
|
||||
<script setup>
|
||||
import {ref} from 'vue'
|
||||
import {NConfigProvider} from 'naive-ui'
|
||||
const primaryColor=ref('#2B69A1')
|
||||
const themeOverrides= ref({
|
||||
common: {
|
||||
primaryColorPressed: primaryColor,
|
||||
primaryHover:primaryColor,
|
||||
primaryDefault: primaryColor,
|
||||
primaryActive: primaryColor,
|
||||
primarySuppl: primaryColor,
|
||||
primaryColor: primaryColor,
|
||||
primaryColorHover: primaryColor
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<n-config-provider :theme-overrides="themeOverrides">
|
||||
<router-view />
|
||||
</n-config-provider>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
||||
BIN
src/assets/image/asdf3255@2x1.png
Normal file
BIN
src/assets/image/asdf3255@2x1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
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 |
@ -1,3 +1,54 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const show = ref(false);
|
||||
const imgUrl = ref('');
|
||||
const scale = ref(1);
|
||||
const translateX = ref(0);
|
||||
const translateY = ref(0);
|
||||
const isDragging = ref(false);
|
||||
const startX = ref(0);
|
||||
const startY = ref(0);
|
||||
const imgElement = ref(null);
|
||||
const imgContainer = ref(null);
|
||||
|
||||
const startDrag = (event) => {
|
||||
isDragging.value = true;
|
||||
const e = event.type.includes('touch') ? event.touches[0] : event;
|
||||
startX.value = e.clientX - translateX.value;
|
||||
startY.value = e.clientY - translateY.value;
|
||||
};
|
||||
|
||||
const onDrag = (event) => {
|
||||
if (!isDragging.value) return;
|
||||
const e = event.type.includes('touch') ? event.touches[0] : event;
|
||||
translateX.value = e.clientX - startX.value;
|
||||
translateY.value = e.clientY - startY.value;
|
||||
};
|
||||
|
||||
const endDrag = () => {
|
||||
isDragging.value = false;
|
||||
};
|
||||
|
||||
const onWheel = (event) => {
|
||||
event.preventDefault();
|
||||
const scaleAmount = event.deltaY * -0.001;
|
||||
scale.value = Math.min(Math.max(0.5, scale.value + scaleAmount), 3);
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
show.value = false;
|
||||
};
|
||||
|
||||
const showImgModal = ({ url }) => {
|
||||
imgUrl.value = url;
|
||||
show.value = true;
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
showImgModal,
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<teleport to="body">
|
||||
<div v-if="show" class="modal-overlay flex flex-col">
|
||||
@ -5,31 +56,36 @@
|
||||
<img class="w-525px h-87px" src="@/assets/image/cddfdf.png" alt="">
|
||||
</div>
|
||||
<div class="bg-[url('@/assets/image/zu3327@2x.png')] w-1173px h-1489px bg-cover mt-90px flex flex-col items-center pt-75px">
|
||||
<div class="h-1210px flex justify-center">
|
||||
<img :src="imgUrl" alt="" class="max-h-100% max-w-90% object-contain">
|
||||
<div
|
||||
class="h-1210px flex justify-center overflow-hidden w-1110px"
|
||||
ref="imgContainer"
|
||||
@mousedown="startDrag"
|
||||
@mousemove="onDrag"
|
||||
@mouseup="endDrag"
|
||||
@mouseleave="endDrag"
|
||||
@wheel="onWheel"
|
||||
@touchstart="startDrag"
|
||||
@touchmove="onDrag"
|
||||
@touchend="endDrag"
|
||||
>
|
||||
<img
|
||||
:src="imgUrl"
|
||||
alt=""
|
||||
class="object-contain"
|
||||
:style="{ transform: `scale(${scale}) translate(${translateX}px, ${translateY}px)` }"
|
||||
ref="imgElement"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="bg-[url('@/assets/image/z3255@2x.png')] w-600px h-98px bg-cover text-#fff text-40px flex justify-center items-center mt-48px"
|
||||
@click="closeModal"
|
||||
>
|
||||
关闭
|
||||
</div>
|
||||
<div class="bg-[url('@/assets/image/z3255@2x.png')] w-600px h-98px bg-cover text-#fff text-40px flex justify-center items-center mt-48px" @click="closeModal">关闭</div>
|
||||
</div>
|
||||
</div>
|
||||
</teleport>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref,defineEmits} from 'vue';
|
||||
const show=ref(false)
|
||||
const imgUrl=ref('')
|
||||
const emit = defineEmits(['close']);
|
||||
const closeModal=()=>{
|
||||
show.value=false
|
||||
emit('close')
|
||||
}
|
||||
const showImgModal=({url})=>{
|
||||
imgUrl.value=url
|
||||
show.value=true
|
||||
}
|
||||
defineExpose({
|
||||
showImgModal
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.modal-overlay {
|
||||
@ -45,15 +101,7 @@ defineExpose({
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.modal-close {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
border: none;
|
||||
background: none;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
.object-contain {
|
||||
transition: transform 0.1s ease-out;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1 +1 @@
|
||||
export const sizes = [ {minWidth:'0px',maxWidth:'768px'}, {minWidth:'768px',maxWidth:'1440px'}, {minWidth:'1440px',maxWidth: '1920px'}, {minWidth:'1920px'}]
|
||||
export const sizes = [ {minWidth:'0px',maxWidth:'768px'}, {minWidth:'0px',maxWidth:'768px'}, {minWidth:'768px',maxWidth:'1440px'}, {minWidth:'1440px',maxWidth: '1920px'}, {minWidth:'1920px'}]
|
||||
|
||||
24
src/main.js
24
src/main.js
@ -4,8 +4,10 @@ import App from './App.vue'
|
||||
import '@unocss/reset/sanitize/sanitize.css'
|
||||
import '@unocss/reset/sanitize/assets.css'
|
||||
import 'virtual:uno.css'
|
||||
import "vant/es/image-preview/style";
|
||||
import { ImagePreview } from 'vant';
|
||||
|
||||
import Vconsole from 'vconsole'
|
||||
new Vconsole()
|
||||
import router from "./router/index.js";
|
||||
const app = createApp(App);
|
||||
app.use(router);
|
||||
@ -23,4 +25,24 @@ app.directive('no-space', {
|
||||
});
|
||||
}
|
||||
})
|
||||
// 注册全局自定义指令
|
||||
app.directive('decimal', {
|
||||
mounted(el) {
|
||||
el.addEventListener('input', (event) => {
|
||||
// 获取当前输入的值
|
||||
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',
|
||||
|
||||
@ -1,8 +1,10 @@
|
||||
import {ref,computed} from 'vue'
|
||||
import {createGlobalState,useStorage} from '@vueuse/core'
|
||||
import {competitionApply, competitionWorks, loginRegister, sendCode} from '@/api/auth/index.js'
|
||||
import {competitionApply, competitionWorks, loginRegister, sendCode, uploadFile} from '@/api/auth/index.js'
|
||||
import {message} from "@/utils/message.js"
|
||||
import { useRouter } from 'vue-router';
|
||||
import { showImagePreview } from 'vant';
|
||||
import useImgModalPopup from "@/components/imgModal/imgModal.js";
|
||||
export const useAuth=createGlobalState(()=>{
|
||||
|
||||
const router = useRouter();
|
||||
@ -35,6 +37,16 @@ export const useAuth=createGlobalState(()=>{
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
const openMask=(src)=>{
|
||||
showImagePreview({
|
||||
images:[src],
|
||||
closeable: true,
|
||||
})
|
||||
}
|
||||
const goBack=()=>{
|
||||
router.back()
|
||||
}
|
||||
const detailData=useStorage('detailData', {}, localStorage)
|
||||
const formData=useStorage('formData',{
|
||||
name:'',
|
||||
@ -61,6 +73,23 @@ export const useAuth=createGlobalState(()=>{
|
||||
const removeWorks=(index)=>{
|
||||
formData.value.works.splice(index,1)
|
||||
}
|
||||
const afterRead=async (file,item)=>{
|
||||
const formData1 = new FormData()
|
||||
formData1.append("file", file.file)
|
||||
formData1.append("type", 'image')
|
||||
const res=await uploadFile(formData1)
|
||||
if (res.status===0){
|
||||
item.picUrl=res.data
|
||||
}
|
||||
}
|
||||
const deleteImg=(item)=>{
|
||||
item.picUrl=''
|
||||
item.imgList=[]
|
||||
}
|
||||
const viewDetails=async ()=>{
|
||||
await getDetail()
|
||||
router.push('/details')
|
||||
}
|
||||
const clickApply=async ()=>{
|
||||
const isValid = validateFormData();
|
||||
if (!isValid){
|
||||
@ -73,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;
|
||||
@ -84,9 +114,16 @@ export const useAuth=createGlobalState(()=>{
|
||||
}
|
||||
const res=await competitionWorks({telNum:telNum.value})
|
||||
if (res.status===0){
|
||||
console.log(res.data,'getDetail')
|
||||
detailData.value=res.data
|
||||
}
|
||||
}
|
||||
const goConfirm=()=>{
|
||||
const isValid = validateFormData();
|
||||
if (!isValid){
|
||||
message.warning('作品信息不全，请补充')
|
||||
return
|
||||
}
|
||||
router.push('/confirm')
|
||||
}
|
||||
const clickLogin=async ()=>{
|
||||
const data={
|
||||
@ -95,13 +132,14 @@ export const useAuth=createGlobalState(()=>{
|
||||
}
|
||||
const res=await loginRegister(data)
|
||||
if(res.status===0){
|
||||
token.value=res.data.token
|
||||
if (res.data.status===1){
|
||||
message.warning('您已经报名')
|
||||
await getDetail()
|
||||
router.push('/details')
|
||||
}else {
|
||||
message.success('登录成功')
|
||||
token.value=res.data.token
|
||||
|
||||
router.push('/signup')
|
||||
}
|
||||
|
||||
@ -135,7 +173,22 @@ export const useAuth=createGlobalState(()=>{
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
const {showImgModal}= useImgModalPopup()
|
||||
const openMask1=(src)=>{
|
||||
showImgModal({url:src})
|
||||
/* showImagePreview({
|
||||
images:[src],
|
||||
closeable: true,
|
||||
})*/
|
||||
}
|
||||
return {
|
||||
viewDetails,
|
||||
goBack,
|
||||
openMask1,
|
||||
deleteImg,
|
||||
afterRead,
|
||||
openMask,
|
||||
goConfirm,
|
||||
detailData,
|
||||
removeWorks,
|
||||
clickAddWorks,
|
||||
|
||||
@ -1,16 +1,13 @@
|
||||
<script setup>
|
||||
import { useAdaptation } from "@/utils/self-adaption.js";
|
||||
import {ref} from "vue";
|
||||
const { maxWidth } = useAdaptation([
|
||||
{ maxWidth: '375px' },
|
||||
{ maxWidth: '768px' }
|
||||
])
|
||||
const showPicker=ref(false)
|
||||
const columns=ref([
|
||||
{text:'男',value:0},
|
||||
{text:'女',value:1}
|
||||
])
|
||||
function onConfirm(){
|
||||
import {useAuth} from "@/store/auth/index.js";
|
||||
|
||||
const {clickApply,formData} =useAuth()
|
||||
import { showImagePreview } from 'vant';
|
||||
const openMask=(src)=>{
|
||||
showImagePreview({
|
||||
images:[src],
|
||||
closeable: true,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -21,38 +18,38 @@ function onConfirm(){
|
||||
<div class="wrap1" style="margin-top: 0">
|
||||
<div class="wrap1_1">*姓名</div>
|
||||
<div class="wrap1_2">
|
||||
王小午
|
||||
{{formData.name}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrap1">
|
||||
<div class="wrap1_1">*年龄</div>
|
||||
<div class="wrap1_2">
|
||||
10 岁
|
||||
{{formData.age}} 岁
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrap1">
|
||||
<div class="wrap1_1">*性别</div>
|
||||
<div class="wrap1_2">
|
||||
女
|
||||
{{formData.gender}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="package1">
|
||||
<div class="package1_1">
|
||||
<div class="package1_1_1">*作品1</div>
|
||||
<div class="package1_1" v-for="(item,index) in formData.works">
|
||||
<div class="package1_1_1">*作品{{index+1}}</div>
|
||||
<div class="package1_1_2">
|
||||
<img class="package1_1_2_1" src="@/assets/image/zwbackground@2x.png" alt="">
|
||||
<img class="package1_1_2_1 object-contain" @click="openMask(item.picUrl)" :src="item.picUrl" alt="">
|
||||
<div class="package1_1_2_2">
|
||||
<div class="package1_1_2_2_1">作品名称</div>
|
||||
<div class="package1_1_2_2_2">盛夏光年</div>
|
||||
<div class="package1_1_2_2_2">{{item.workName}}</div>
|
||||
</div>
|
||||
<div class="package1_1_2_3">
|
||||
<div class="package1_1_2_3_1">
|
||||
<div class="package1_1_2_3_1_1">长度</div>
|
||||
<div class="package1_1_2_3_1_2">34 cm</div>
|
||||
<div class="package1_1_2_3_1_2">{{item.length}} cm</div>
|
||||
</div>
|
||||
<div class="package1_1_2_3_2">
|
||||
<div class="package1_1_2_3_2_1">宽度</div>
|
||||
<div class="package1_1_2_3_2_2">56 cm</div>
|
||||
<div class="package1_1_2_3_2_2">{{item.wide}} cm</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -60,7 +57,7 @@ function onConfirm(){
|
||||
</div>
|
||||
<div class="package2">
|
||||
<div class="package2_1">取消</div>
|
||||
<div class="package2_2">提交报名</div>
|
||||
<div class="package2_2" @click="clickApply">提交报名</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="content3">
|
||||
@ -69,13 +66,6 @@ function onConfirm(){
|
||||
<div class="content4">
|
||||
<img src="@/assets/image/zu733@2x.png" alt="">
|
||||
</div>
|
||||
<van-popup v-model:show="showPicker" round position="bottom">
|
||||
<van-picker
|
||||
:columns="columns"
|
||||
@cancel="showPicker = false"
|
||||
@confirm="onConfirm"
|
||||
/>
|
||||
</van-popup>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -1,41 +1,61 @@
|
||||
<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/zu3237.png')] flex items-center flex-col">
|
||||
<div class="mb-[90px]">
|
||||
<img class="w-[525px] h-[87px] mt-[303px]" src="@/assets/image/zu3314@2x.png" alt="">
|
||||
<div class="box-border relative w-[1920px] h-screen bg-no-repeat bg-cover bg-[url('@/assets/image/gdz53@2x.png')] flex items-center flex-col">
|
||||
<div class="mb-[90px] mt-[303px]">
|
||||
<img class="w-[525px] h-[87px]" src="@/assets/image/zu3314@2x.png" alt="">
|
||||
</div>
|
||||
<div class="absolute top-0 left-[70px]">
|
||||
<img class="w-[610px] h-[668px]" src="@/assets/image/gdz47@2x.png" alt="">
|
||||
</div>
|
||||
<div class="bg-[url('@/assets/image/z3327@2x1.png')] w-[1173px] h-[1489px] bg-no-repeat bg-cover pt-[98px] pr-[54px] pl-[54px]">
|
||||
<div class="bg-[url('@/assets/image/z3327@2x1.png')] w-[1173px] h-[1489px] bg-no-repeat bg-cover pt-[98px] pr-[54px] pl-[54px] pb-60px">
|
||||
<div class="flex">
|
||||
<div class="text-primary text-[35px] w-[200px] font-bold">姓名</div>
|
||||
<div class="text-primary text-[35px]">王小五</div>
|
||||
<div class="text-primary text-[35px] w-[200px] font-bold pl-15px">*姓名</div>
|
||||
<div class="text-primary text-[35px]">{{formData.name}}</div>
|
||||
</div>
|
||||
<div class="flex mt-[26.74px]">
|
||||
<div class="text-primary text-[35px] w-[200px] font-bold">*年龄</div>
|
||||
<div class="text-primary text-[35px]">10 岁</div>
|
||||
<div class="text-primary text-[35px] w-[200px] font-bold pl-15px">*年龄</div>
|
||||
<div class="text-primary text-[35px]">{{formData.age}} 岁</div>
|
||||
</div>
|
||||
<div class="flex mt-[26.74px]">
|
||||
<div class="text-primary text-[35px] w-[200px] font-bold">*性别</div>
|
||||
<div class="text-primary text-[35px]">女</div>
|
||||
<div class="text-primary text-[35px] w-[200px] font-bold pl-15px">*性别</div>
|
||||
<div class="text-primary text-[35px]">{{formData.gender}}</div>
|
||||
</div>
|
||||
<div class="w-[1065px] h-[980px] bg-#F5F5F5 mt-[8.26px] flex pt-[21.74px]">
|
||||
<div class="flex">
|
||||
<div class="text-primary font-bold shrink-0 w-[200px]">*作品1</div>
|
||||
<div class="w-[1065px] h-[980px] bg-#F5F5F5 mt-[8.26px] mb-33px flex pt-[21.74px]">
|
||||
<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 font-bold shrink-0 w-[200px] pl-15px">*作品{{index+1}}</div>
|
||||
<div>
|
||||
<img class="w-[738px] h-[353px]" src="@/assets/image/dfbackground@2.png" alt="">
|
||||
<div class="flex text-primary text-[30px] font-bold">
|
||||
<div>作品名称</div>
|
||||
<div>盛夏光年</div>
|
||||
<img class="w-[738px] h-[353px]" @click="openMask1(item.picUrl)" :src="item.picUrl" alt="">
|
||||
<div class="flex text-primary text-[30px] mt-20px w-50%">
|
||||
<div class="font-bold w-187px">作品名称</div>
|
||||
<div class="">{{item.workName}}</div>
|
||||
</div>
|
||||
<div class="flex text-primary text-[30px] mt-20px">
|
||||
<div class="flex w-50%">
|
||||
<div class="font-bold w-187px">长度</div>
|
||||
<div class="">{{item.length}} <span class="ml-30px">cm</span></div>
|
||||
</div>
|
||||
<div class="flex w-50% ml-a">
|
||||
<div class="w-187px">宽度</div>
|
||||
<div class="">{{item.wide}} <span class="ml-30px">cm</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="text-primary text-40px w-410px h-98px 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-600px h-98px bg-contain ml-a text-40px text-#fff flex-center" @click="clickApply">确定</div>
|
||||
</div>
|
||||
<div class="absolute bottom-0 right-0 ">
|
||||
<img class="w-1170px h-557px" src="@/assets/image/dfdf4@2x.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,9 +1,7 @@
|
||||
<script setup>
|
||||
import {useAuth} from "@/store/auth/index.js";
|
||||
const {detailData} =useAuth()
|
||||
import "vant/es/image-preview/style";
|
||||
import { showImagePreview } from 'vant';
|
||||
console.log(detailData,'detailData')
|
||||
const openMask=(src)=>{
|
||||
showImagePreview({
|
||||
images:[src],
|
||||
|
||||
@ -37,7 +37,7 @@ const openMask=(src)=>{
|
||||
<div v-for="(item, index) in detailData?.worksInfo" :key="index" class="mb-[45px] flex items-start w-full">
|
||||
<div class="text-[35px] w-[200px] font-bold text-[#2B69A1] pt-18px">作品{{ index + 1 }}</div>
|
||||
<div class="relative w-[1147px]">
|
||||
<img class="w-738px h-353px" @click="openMask(item.picUrl.replace('https', 'http'))" :src="item.picUrl.replace('https', 'http')" alt="" />
|
||||
<img class="w-738px h-353px object-contain" @click="openMask(item.picUrl.replace('https', 'http'))" :src="item.picUrl.replace('https', 'http')" alt="" />
|
||||
<!-- 未入围 -->
|
||||
<img v-if="item.status === 3" src="@/assets/image/zu3222@2x.png" class="w-[404px] h-[404px] absolute top-0 right-0" alt="" />
|
||||
<!-- 待定 -->
|
||||
|
||||
@ -1,40 +1,31 @@
|
||||
<script setup>
|
||||
import {useAuth} from "@/store/auth/index.js";
|
||||
|
||||
import {useAdaptation} from "@/utils/self-adaption.js";
|
||||
import {sizes} from "@/dict/index.js";
|
||||
import size375 from '@/views/login/size375/index.vue'
|
||||
import size768 from '@/views/login/size768/index.vue'
|
||||
import size1440 from '@/views/login/size1440/index.vue'
|
||||
import size1920 from '@/views/login/size1920/index.vue'
|
||||
import {computed} from "vue";
|
||||
import { computed } from 'vue';
|
||||
import { useWindowSize } from '@vueuse/core';
|
||||
const {clickSendCode}= useAuth()
|
||||
const { width, height } = useWindowSize()
|
||||
const isLandscape = computed(() => width.value > height.value)
|
||||
const {currentRange }= useAdaptation(sizes)
|
||||
import { useAuth } from '@/store/auth/index.js';
|
||||
import size375 from '@/views/login/size375/index.vue';
|
||||
import size768 from '@/views/login/size768/index.vue';
|
||||
import size1440 from '@/views/login/size1440/index.vue';
|
||||
import size1920 from '@/views/login/size1920/index.vue';
|
||||
const { clickSendCode } = useAuth();
|
||||
const { width } = useWindowSize();
|
||||
const viewComponent = computed(() => {
|
||||
switch (currentRange.value?.minWidth){
|
||||
case '0px':
|
||||
return size375
|
||||
case '768px':
|
||||
// 如果是ipad 横屏
|
||||
if (isLandscape.value){
|
||||
return size1440
|
||||
}
|
||||
return size768
|
||||
case '1440px':
|
||||
return size1440
|
||||
case '1920px':
|
||||
return size1920
|
||||
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"></component>
|
||||
<component @sendCode="clickSendCode" :is="viewComponent" />
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
</style>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
<script setup>
|
||||
import {useAuth} from "@/store/auth/index.js";
|
||||
const {clickSendCode,telNum,code}= useAuth()
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
<script setup>
|
||||
import {useAuth} from "@/store/auth/index.js";
|
||||
|
||||
const {clickSendCode,telNum,code,showTextCode ,clickLogin }= useAuth()
|
||||
|
||||
</script>
|
||||
|
||||
@ -12,17 +15,17 @@
|
||||
<div class="flex items-center">
|
||||
<div class="text-primary text-[35px] font-bold w-[166px]">手机号</div>
|
||||
<div>
|
||||
<input class="pl-[61px] 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-model="telNum" v-no-space class="pr-[30px] pl-[30px] w-[853px] h-[85px] focus:outline-none placeholder-text-primary placeholder-text-[35px] focus: bg-[#DCE5E9] text-35px border-none" placeholder="请输入手机号" type="text">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center mt-[45px]">
|
||||
<div class="text-primary text-[35px] font-bold w-[166px] shrink-0">验证码</div>
|
||||
<div class="flex items-center justify-between w-[853px] grow-1">
|
||||
<input class="pl-[61px] w-[528px] h-[85px] focus:outline-none placeholder:text-primary placeholder:text-[35px] focus: bg-[#DCE5E9] focus:text-[35px] border-none grow-0" placeholder="请输入验证码" type="text">
|
||||
<div class="w-[300px] h-[85px] bg-primary text-#fff flex items-center justify-center">获取验证码</div>
|
||||
<input v-model="code" v-no-space class="pr-[30px] pl-[30px] w-[528px] h-[85px] focus:outline-none placeholder-text-primary placeholder-text-[35px] focus: bg-[#DCE5E9] text-35px border-none " placeholder="请输入验证码" type="text">
|
||||
<div class="w-[300px] text-35px h-[85px] bg-primary text-#fff flex items-center justify-center">{{showTextCode}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-[url('@/assets/image/z3255@2x.png')] w-[600px] h-[98px] bg-center bg-no-repeat bg-contain flex items-center justify-center text-#fff text-[40px] mt-[183px]">登录/注册</div>
|
||||
<div class="bg-[url('@/assets/image/z3255@2x.png')] w-[600px] h-[98px] bg-center bg-no-repeat bg-contain flex items-center justify-center text-#fff text-[40px] mt-[183px]" @click="clickLogin">登录/注册</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute top-0 left-[70px] z-11">
|
||||
|
||||
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,4 @@
|
||||
<script setup>
|
||||
import {useAdaptation} from "@/utils/self-adaption.js";
|
||||
import {sizes} from "@/dict/index.js";
|
||||
import size375 from '@/views/signup/size375/index.vue'
|
||||
import size768 from '@/views/signup/size768/index.vue'
|
||||
import size1440 from '@/views/signup/size1440/index.vue'
|
||||
@ -8,22 +6,17 @@ import size1920 from '@/views/signup/size1920/index.vue'
|
||||
import {computed} from "vue";
|
||||
import {useWindowSize } from '@vueuse/core';
|
||||
const { width, height } = useWindowSize()
|
||||
const isLandscape = computed(() => width.value > height.value)
|
||||
const {currentRange }= useAdaptation(sizes)
|
||||
|
||||
const viewComponent = computed(() => {
|
||||
switch (currentRange.value?.minWidth){
|
||||
case '0px':
|
||||
return size375
|
||||
case '768px':
|
||||
// 如果是ipad 横屏
|
||||
if (isLandscape.value){
|
||||
return size1440
|
||||
}
|
||||
return size768
|
||||
case '1440px':
|
||||
return size1440
|
||||
case '1920px':
|
||||
return size1920
|
||||
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>
|
||||
@ -33,5 +26,7 @@ const viewComponent = computed(()=>{
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
:deep(.n-base-selection-input__content){
|
||||
color: #2B69A1;
|
||||
}
|
||||
</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,27 +32,36 @@ 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="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">
|
||||
<div class="flex items-end">
|
||||
<n-upload
|
||||
action="https://www.mocky.io/v2/5e4bafc63100007100d8b70f"
|
||||
:default-file-list="previewFileList"
|
||||
@ -65,32 +75,35 @@ const handlePreview=()=>{
|
||||
</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;
|
||||
|
||||
@ -1,26 +1,14 @@
|
||||
<script setup>
|
||||
import {ref} from "vue";
|
||||
import {useAuth} from "@/store/auth/index.js";
|
||||
import {uploadFile} from "@/api/auth/index.js";
|
||||
const {clickApply,formData,genderOptions,clickAddWorks,removeWorks} =useAuth()
|
||||
const {formData,genderOptions,clickAddWorks,removeWorks,goConfirm,deleteImg,afterRead} =useAuth()
|
||||
const showPicker=ref(false)
|
||||
function onConfirm(data){
|
||||
formData.value.gender=data.selectedValues?.[0]
|
||||
showPicker.value=false
|
||||
}
|
||||
const afterRead=async (file,item)=>{
|
||||
const formData1 = new FormData()
|
||||
formData1.append("file", file.file)
|
||||
formData1.append("type", 'image')
|
||||
const res=await uploadFile(formData1)
|
||||
if (res.status===0){
|
||||
item.picUrl=res.data
|
||||
}
|
||||
}
|
||||
const deleteImg=(item)=>{
|
||||
item.picUrl=''
|
||||
item.imgList=[]
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div class="box-border relative w-1920px h-screen bg-no-repeat bg-cover bg-[url('@/assets/image/zu3237.png')] flex items-center flex-col">
|
||||
@ -93,7 +81,7 @@ item.picUrl=''
|
||||
<div class="absolute w-6px h-88px bg-white"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div @click="clickApply" class="mt-60px w-866px h-200px bg-contain bg-no-repeat bg-[url('@/assets/image/zu3189@2x1.png')] flex justify-center items-center text-white text-82px">
|
||||
<div @click="goConfirm" class="mt-60px w-866px h-200px bg-contain bg-no-repeat bg-[url('@/assets/image/zu3189@2x1.png')] flex justify-center items-center text-white text-82px">
|
||||
确定
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,7 @@
|
||||
<script setup>
|
||||
import {useAuth} from "@/store/auth/index.js";
|
||||
import {NSelect} from "naive-ui";
|
||||
const {formData,genderOptions,clickAddWorks,removeWorks,goConfirm,deleteImg,afterRead} =useAuth()
|
||||
|
||||
</script>
|
||||
|
||||
@ -7,7 +10,7 @@
|
||||
<div class="absolute top-0 left-[70px]">
|
||||
<img src="@/assets/image/gdz47@2x.png" class="w-[610px] h-[668px]" alt="">
|
||||
</div>
|
||||
<div class="absolute bottom-[75px] left-[50%] transform translate-x-[-50%]">
|
||||
<div class="absolute bottom-[75px] left-[50%] translate-x-[-50%]">
|
||||
<img class="w-[620px] h-[71px]" src="@/assets/image/zu733@2x.png" alt="">
|
||||
</div>
|
||||
<div class="">
|
||||
@ -17,51 +20,71 @@
|
||||
<div class="flex items-center">
|
||||
<div class="text-primary text-[35px] w-[165px] font-bold">*姓名</div>
|
||||
<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 class="flex items-center mt-[45px]">
|
||||
<div class="text-primary text-[35px] w-[165px] font-bold">*年龄</div>
|
||||
<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="number">
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-#F5F5F5 mt-38px w-[1065px] flex items-center flex-col grow-1">
|
||||
<div class="flex">
|
||||
<div class="text-primary text-[35px] w-[165px] font-bold mt-38px">*作品1</div>
|
||||
<div class="flex items-center mt-18px">
|
||||
<div class="text-primary text-[35px] w-[165px] font-bold">*性别</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
|
||||
}
|
||||
})"
|
||||
/>
|
||||
</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 pl-20px">*作品{{index+1}}</div>
|
||||
<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">
|
||||
<img class="w-43px h-43px" src="@/assets/image/zu3264@2x.png" alt="">
|
||||
<div class="mt-20px text-[#2B69A1] text-35px">上传作品</div>
|
||||
</div>
|
||||
</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>
|
||||
<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 flex-col">
|
||||
<div class="text-30px text-[#2B69A1]">长度</div>
|
||||
<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-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 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-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>
|
||||
</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-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 justify-center items-center text-white text-40px">
|
||||
<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>
|
||||
@ -70,6 +93,34 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
:deep(.n-base-selection-input__content){
|
||||
color:#2B69A1 ;
|
||||
}
|
||||
: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>
|
||||
|
||||
@ -22,4 +22,7 @@ export default defineConfig({
|
||||
// 处理 placeholder 伪元素
|
||||
[/^placeholder:(.*)$/, ([, style]) => ({ '::placeholder': { ...parseStyle(style) } })],
|
||||
],
|
||||
shortcuts: {
|
||||
'flex-center': 'flex justify-center items-center',
|
||||
},
|
||||
})
|
||||
|
||||
Loading…
Reference in New Issue
Block a user