123
parent
5a9dc16b7d
commit
eb1f168c10
Binary file not shown.
|
After Width: | Height: | Size: 12 MiB |
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue