83 lines
4.5 KiB
Vue
83 lines
4.5 KiB
Vue
<script setup>
|
|
|
|
</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="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>
|
|
<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="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>
|
|
</div>
|
|
<div class="flex items-center mt-24px">
|
|
<div class="text-primary text-[19px] w-[68px] 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>
|
|
</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="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>
|
|
</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 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>
|
|
</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>
|
|
</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>
|
|
</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>
|
|
</div>
|
|
<div class="absolute bottom-0 right-0">
|
|
<img class="w-1170px h-557px" src="@/assets/image/dfdf4@2x.png" alt="">
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
</style>
|