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

123

Browse Source
master
xingyy 2 months ago
parent 2734fb85d3
commit cbe56a5fd8
8 changed files with 89 additions and 8 deletions
Show Stats Download Patch File Download Diff File

4
postcss.config.js
Unescape Escape View File

@ -39,8 +39,8 @@ export default {
unitPrecision: 5, // 保留的小数位数
selectorBlackList: [/^\.van/], // 以 .van 开头的类名不转换
minPixelValue: 1, // 小于或等于 1px 不转换
viewportUnit: "vmin", // 转换后的单位
fontViewportUnit: "vmin", // 字体单位
viewportUnit: "vw", // 转换后的单位
fontViewportUnit: "vw", // 字体单位
unitToConvert: "px" // 需要转换的单位
}),
],

BIN
src/assets/image/za3343@2x.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.1 MiB

7
src/utils/self-adaption.js
Unescape Escape View File

@ -1,11 +1,11 @@
import { ref, onMounted, onBeforeUnmount } from 'vue';
import debounce from 'lodash/debounce'
import debounce from 'lodash/debounce';
export function useAdaptation(ranges, handleChange) {
// 创建 media query 对象列表
const mediaQueryLists = ranges.map(range => {
const minQuery = range.minWidth ? window.matchMedia(`(min-width: ${range.minWidth})`) : null;
const maxQuery = range.maxWidth ? window.matchMedia(`(max-width: ${range.maxWidth})`) : null;
const maxQuery = range.maxWidth ? window.matchMedia(`(max-width: ${parseInt(range.maxWidth) - 0.1}px)`) : null; // 修改 maxWidth，确保不包括 max
return { minQuery, maxQuery };
});
@ -22,6 +22,7 @@ export function useAdaptation(ranges, handleChange) {
return ranges[i];
}
}
// 如果没有匹配的区间，返回最后一个区间
return ranges[ranges.length - 1];
}
@ -55,6 +56,6 @@ export function useAdaptation(ranges, handleChange) {
});
});
// 返回当前匹配的区间
// 返回当前匹配的区间，包括 min，但不包括 max
return { currentRange };
}

6
src/views/login/index.vue
Unescape Escape View File

@ -3,6 +3,8 @@ import {useAdaptation} from "@/utils/self-adaption.js";
import {sizes} from "@/dict/index.js";
import size375 from '@/views/login/size375/index.vue'
import size768 from '@/views/login/size768/index.vue'
import size1440 from '@/views/login/size1440/index.vue'
import size1920 from '@/views/login/size1920/index.vue'
import {computed} from "vue";
const {currentRange }= useAdaptation([ {minWidth:'0px',maxWidth:'768px'}, {minWidth:'768px',maxWidth:'1440px'}, {minWidth:'1440px',maxWidth: '1920px'}, {minWidth:'1920px'}])
const viewComponent = computed(()=>{
@ -11,6 +13,10 @@ switch (currentRange.value?.minWidth){
return size375
case '768px':
return size768
case '1440px':
return size1440
case '1920px':
return size1920
}
})
</script>

37
src/views/login/size1440/index.vue
Unescape Escape View File

@ -0,0 +1,37 @@
<script setup>
</script>
<template>
<div class="box-border relative w-screen h-screen bg-center bg-no-repeat bg-cover bg-[url('@/assets/image/za3343@2x.png')] flex items-center flex-col">
<div class="flex items-center flex-col absolute top-0 right-[164px]">
<div class="">
<img class="w-[280px] h-[46px] mt-[161px] mb-[60px]" src="@/assets/image/zu3310@2x.png" alt="">
</div>
<div class="bg-[url('@/assets/image/z3321@2x.png')] flex flex-col items-center w-[625px] h-[727px] bg-center bg-no-repeat bg-cover pt-[81px] pr-[78px] pl-[78px]">
<div class="flex items-center">
<div class="text-primary text-[19px] font-bold w-[88px]">手机号</div>
<div>
<input class="pl-[16px] w-[455px] h-[45px] focus:outline-none placeholder:text-primary placeholder:text-[19px] 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-[19px] font-bold w-[88px]">验证码</div>
<div class="flex items-center justify-between w-[454px] grow-1">
<input class="pl-[16px] w-[281px] h-[45px] focus:outline-none placeholder:text-primary placeholder:text-[19px] focus: bg-[#DCE5E9] focus:text-[35px] border-none" placeholder="请输入验证码" type="text">
<div class="w-[160px] h-[45px] bg-primary text-#fff flex items-center justify-center shrink-0">获取验证码</div>
</div>
</div>
<div class="bg-[url('@/assets/image/z3255@2x.png')] w-[320px] h-[52px] bg-center bg-no-repeat bg-contain flex items-center justify-center text-#fff text-[21px] mt-[97px]">登录/注册</div>
</div>
<div class="mt-[155px]">
<img class="w-[331px] h-[38px]" src="@/assets/image/zu733@2x.png" alt="">
</div>
</div>
</div>
</template>
<style scoped lang="scss">
</style>

37
src/views/login/size1920/index.vue
Unescape Escape View File

@ -0,0 +1,37 @@
<script setup>
</script>
<template>
<div class="box-border relative w-screen h-screen bg-center bg-no-repeat bg-cover bg-[url('@/assets/image/za3343@2x.png')] flex items-center flex-col">
<div class="flex items-center flex-col absolute top-0 right-[164px]">
<div class="">
<img class="w-[210px] h-[35px] mt-[121px] mb-[45px]" src="@/assets/image/zu3310@2x.png" alt="">
</div>
<div class="bg-[url('@/assets/image/z3321@2x.png')] flex flex-col items-center w-[469px] h-[545px] bg-center bg-no-repeat bg-cover pt-[61px] pr-[78px] pl-[78px]">
<div class="flex items-center">
<div class="text-primary text-[14px] font-bold w-[66px]">手机号</div>
<div>
<input class="pl-[16px] w-[341px] h-[34px] focus:outline-none placeholder:text-primary placeholder:text-[14px] focus: bg-[#DCE5E9] focus:text-[14px] border-none" placeholder="请输入手机号" type="text">
</div>
</div>
<div class="flex items-center mt-[18px]">
<div class="text-primary text-[14px] font-bold w-[66px]">验证码</div>
<div class="flex items-center justify-between w-[341px] grow-1">
<input class="pl-[16px] w-[211px] h-[34px] focus:outline-none placeholder:text-primary placeholder:text-[14px] focus: bg-[#DCE5E9] focus:text-[14px] border-none" placeholder="请输入验证码" type="text">
<div class="w-[120px] h-[34px] bg-primary text-#fff flex items-center text-[14px] justify-center shrink-0">获取验证码</div>
</div>
</div>
<div class="bg-[url('@/assets/image/z3255@2x.png')] w-[240px] h-[39px] bg-center bg-no-repeat bg-contain flex items-center justify-center text-#fff text-[21px] mt-[73px]">登录/注册</div>
</div>
<div class="mt-[116px]">
<img class="w-[248px] h-[28px]" src="@/assets/image/zu733@2x.png" alt="">
</div>
</div>
</div>
</template>
<style scoped lang="scss">
</style>

2
src/views/login/size375/index.vue
Unescape Escape View File

@ -2,7 +2,7 @@
</script>
<template>
<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="box-border relative w-screen h-screen 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">

2
src/views/login/size768/index.vue
Unescape Escape View File

@ -3,7 +3,7 @@
</script>
<template>
<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="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="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="">

Write Preview
Loading…
Cancel
Save