xingyy/kidArtExpo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

123

Browse Source
This commit is contained in:
xingyy 2024-08-08 15:14:52 +08:00
parent 5a9dc16b7d
commit eb1f168c10
3 changed files with 168 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/image/zu3346@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 MiB

95
src/views/signup/size1440/index.vue
View File

@ -1,5 +1,19 @@
<script setup>
import {ref} from 'vue'
import {NUpload,NModal} from 'naive-ui'
const previewFileList=ref([
{
id: "react",
name: "我是react.png",
status: "finished",
url: "https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
}
])
const showModal=ref(false)
const previewImageUrl=ref('')
const handlePreview=()=>{
}
</script>
<template>
@ -13,70 +27,89 @@
<div class="">
<img class="w-[280px] h-[46px] mt-[176px] mb-[33px]" src="@/assets/image/zu3311@2x.png" alt="">
</div>
<div class="bg-[url('@/assets/image/zue3250@2x.png')] pb-60px w-[1221px] h-794px bg-center bg-no-repeat bg-cover pt-43px pr-137px pl-137px flex items-center flex-col">
<div class="bg-[url('@/assets/image/zue3250@2x.png')] pb-20px pb-12px w-[1211px] h-794px bg-center bg-no-repeat bg-cover pt-35px pr-137px pl-137px flex items-center flex-col">
<div class="flex items-center">
<div class="text-primary text-[19px] w-[68px] font-bold">*姓名</div>
<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">
</div>
</div>
<div class="flex items-center mt-24px">
<div class="text-primary text-[19px] w-[68px] font-bold">*年龄</div>
<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">
</div>
<div class="text-primary text-19px ml-16px">岁</div>
</div>
<div class="flex items-center">
<div class="text-primary text-[19px] 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">
<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>
</div>
<div class="bg-#F5F5F5 mt-38px w-[1065px] flex items-center flex-col grow-1">
<div class="bg-#F5F5F5 pb-12px mt-21px w-[936px] flex flex-col grow-1">
<div class="flex">
<div class="text-primary text-[35px] w-[165px] font-bold mt-38px">*作品1</div>
<div class="mt-20px">
<van-uploader>
<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 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>
</van-uploader>
<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">
<div class="flex justify-between mt-20px">
</div>
</n-upload>
<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">
<div class="flex justify-between mt-11px mb-5px">
<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">
<div class="ml-25px text-[#2B69A1] text-35px">cm</div>
<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">
<div class="ml-13px text-[#2B69A1] text-19px mr-21px">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">
<div class="ml-25px text-[#2B69A1] text-35px">cm</div>
<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">
<div class="ml-13px text-[#2B69A1] text-19px">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="absolute w-43px h-6px bg-white"></div>
<div class="absolute w-6px h-43px bg-white"></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="absolute w-23px h-3px bg-white"></div>
<div class="absolute w-3px h-23px 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-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>
</div>
<div class="absolute bottom-0 right-0">
<img class="w-1170px h-557px" src="@/assets/image/dfdf4@2x.png" alt="">
<img class="w-876px h-385px" src="@/assets/image/dfdf4@2x.png" alt="">
</div>
</div>
</template>
<style scoped lang="scss">
:deep(.n-upload-file.n-upload-file--success-status.n-upload-file--image-card-type){
border:none;
width: 393px;
height: 188px;
}
:deep(.n-upload-trigger.n-upload-trigger--image-card){
border:none;
width: 393px;
height: 188px;
}
</style>

107
src/views/signup/size1920/index.vue
View File

@ -1,13 +1,114 @@
<script setup>
import {ref} from 'vue'
import {NUpload,NModal} from 'naive-ui'
const previewFileList=ref([
{
id: "react",
name: "我是react.png",
status: "finished",
url: "https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
}
])
const showModal=ref(false)
const previewImageUrl=ref('')
const handlePreview=()=>{
}
</script>
<template>
<div>
signup 1920
</div>
<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="absolute top-0 left-[385px]">
<img src="@/assets/image/gdz47@2x.png" class="w-[243px] h-[293px]" alt="">
</div>
<div class="absolute bottom-[30px] left-[50%] translate-x-[-50%]">
<img class="w-[248px] h-[28px]" src="@/assets/image/zu733@2x.png" alt="">
</div>
<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="flex items-center">
<div class="text-primary text-[14px] pl-5px w-[68px] font-bold">*姓名</div>
<div class="text-primary">
<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">
</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 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">
</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">
<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 pb-9px mt-16px w-[710px] flex flex-col">
<div class="flex">
<div class="text-primary text-[14px] pl-5px w-[68px] font-bold shrink-0 mt-15px">*作品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-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 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 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>
</div>
<div class="flex flex-col">
<div class="text-12px text-[#2B69A1]">宽度</div>
<div class="flex items-center">
<input 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>
</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>
<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>
</div>
<div class="absolute bottom-0 right-0">
<img class="w-876px h-385px" src="@/assets/image/dfdf4@2x.png" alt="">
</div>
</div>
</template>
<style scoped lang="scss">
: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>