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-07 10:22:17 +08:00
parent 3c091ba235
commit 2734fb85d3
3 changed files with 26 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 25 KiB

8
src/views/login/size375/index.vue
View File

@ -1,13 +1,8 @@
<script setup>
import { useAdaptation } from "@/utils/self-adaption.js";
const { maxWidth } = useAdaptation([
{ maxWidth: '375px' },
{ maxWidth: '768px' }
])
</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')]">
<div class="box-border relative w-screen h-[3707px] bg-center bg-no-repeat bg-cover bg-[url('@/assets/image/gdz53@2x.png')]" style="">
<div class="relative z-10 flex items-center flex-col"> <div class="content1 mb-[123px] shrink-0 "></div>
<div class="content2">
<div class="wrap1">
@ -38,7 +33,6 @@ const { maxWidth } = useAdaptation([
</template>
<style scoped lang="scss">
.content3 {
position: absolute;
top: 0;

32
src/views/login/size768/index.vue
View File

@ -3,18 +3,36 @@
</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="absolute top-0 left-[70px]">
<div class="box-border relative w-[1920px] h-[2300px] bg-center bg-no-repeat bg-contain bg-[url('@/assets/image/gdz53@2x.png')] flex items-center flex-col">
<div class="flex items-center flex-col relative z-10">
<div class="">
<img class="w-[525px] h-[87px] mt-[303px] mb-[100px]" src="@/assets/image/zu3310@2x.png" alt="">
</div>
<div class="bg-[url('@/assets/image/z3321@2x.png')] flex flex-col items-center w-[1173px] h-[1364px] bg-center bg-no-repeat bg-cover pt-[153px] pr-[78px] pl-[78px]">
<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">
</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>
</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>
</div>
<div class="absolute top-0 left-[70px] z-11">
<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%]">
<img class="w-[620px] h-[71px]" src="@/assets/image/zu733@2x.png" alt="">
</div>
<div class="">
<img class="w-[525px] h-[87px] mt-[303px] mb-[100px]" src="@/assets/image/zu3310@2x.png" alt="">
</div>
<div class="bg-[url('@/assets/image/z3321@2x.png')] w-[1173px] h-[1489px] bg-center bg-no-repeat bg-cover"></div>
<div class=""></div>
</div>
</template>