123
This commit is contained in:
parent
2ec513307a
commit
5a9dc16b7d
BIN
src/assets/image/dfa45@2x.png
Normal file
BIN
src/assets/image/dfa45@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.1 MiB |
BIN
src/assets/image/dfdf4@2x.png
Normal file
BIN
src/assets/image/dfdf4@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 367 KiB |
BIN
src/assets/image/zue3250@2x.png
Normal file
BIN
src/assets/image/zue3250@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 562 KiB |
@ -2,16 +2,23 @@
|
|||||||
import {useAdaptation} from "@/utils/self-adaption.js";
|
import {useAdaptation} from "@/utils/self-adaption.js";
|
||||||
import {sizes} from "@/dict/index.js";
|
import {sizes} from "@/dict/index.js";
|
||||||
import size375 from '@/views/signup/size375/index.vue'
|
import size375 from '@/views/signup/size375/index.vue'
|
||||||
|
import size768 from '@/views/signup/size768/index.vue'
|
||||||
|
import size1440 from '@/views/signup/size1440/index.vue'
|
||||||
|
import size1920 from '@/views/signup/size1920/index.vue'
|
||||||
import {computed} from "vue";
|
import {computed} from "vue";
|
||||||
import size768 from "@/views/signup/size768/index.vue";
|
import {useWindowSize } from '@vueuse/core';
|
||||||
import size1440 from "@/views/login/size1440/index.vue";
|
const { width, height } = useWindowSize()
|
||||||
import size1920 from "@/views/login/size1920/index.vue";
|
const isLandscape = computed(() => width.value > height.value)
|
||||||
const {currentRange }= useAdaptation(sizes)
|
const {currentRange }= useAdaptation(sizes)
|
||||||
const viewComponent = computed(()=>{
|
const viewComponent = computed(()=>{
|
||||||
switch (currentRange.value?.minWidth){
|
switch (currentRange.value?.minWidth){
|
||||||
case '0px':
|
case '0px':
|
||||||
return size375
|
return size375
|
||||||
case '768px':
|
case '768px':
|
||||||
|
// 如果是ipad 横屏
|
||||||
|
if (isLandscape.value){
|
||||||
|
return size1440
|
||||||
|
}
|
||||||
return size768
|
return size768
|
||||||
case '1440px':
|
case '1440px':
|
||||||
return size1440
|
return size1440
|
||||||
|
|||||||
82
src/views/signup/size1440/index.vue
Normal file
82
src/views/signup/size1440/index.vue
Normal file
@ -0,0 +1,82 @@
|
|||||||
|
<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>
|
||||||
13
src/views/signup/size1920/index.vue
Normal file
13
src/views/signup/size1920/index.vue
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<script setup>
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
signup 1920
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -65,6 +65,9 @@
|
|||||||
确定
|
确定
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</template>
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user