123
This commit is contained in:
parent
486f2ea9bb
commit
bfa6690a4d
@ -12,6 +12,7 @@
|
|||||||
"@unocss/reset": "^0.61.9",
|
"@unocss/reset": "^0.61.9",
|
||||||
"cnjm-postcss-px-to-viewport": "^1.0.1",
|
"cnjm-postcss-px-to-viewport": "^1.0.1",
|
||||||
"jsdom": "^24.0.0",
|
"jsdom": "^24.0.0",
|
||||||
|
"lodash": "^4.17.21",
|
||||||
"path": "^0.12.7",
|
"path": "^0.12.7",
|
||||||
"postcss-preset-env": "^10.0.0",
|
"postcss-preset-env": "^10.0.0",
|
||||||
"postcss-px-to-viewport": "^1.1.1",
|
"postcss-px-to-viewport": "^1.1.1",
|
||||||
|
|||||||
@ -17,6 +17,9 @@ importers:
|
|||||||
jsdom:
|
jsdom:
|
||||||
specifier: ^24.0.0
|
specifier: ^24.0.0
|
||||||
version: 24.1.1
|
version: 24.1.1
|
||||||
|
lodash:
|
||||||
|
specifier: ^4.17.21
|
||||||
|
version: 4.17.21
|
||||||
path:
|
path:
|
||||||
specifier: ^0.12.7
|
specifier: ^0.12.7
|
||||||
version: 0.12.7
|
version: 0.12.7
|
||||||
|
|||||||
@ -1,3 +1,3 @@
|
|||||||
export const sizes = [
|
export const sizes = [
|
||||||
{maxWidth:'375px'}, {maxWidth:'768px'}, {maxWidth:'1440px'}, {maxWidth:'1920px'}
|
{minWidth:'375px',maxWidth:'768px'}, {minWidth:'768px',maxWidth:'1440px'}, {minWidth:'1440px',maxWidth: '1920px'}, {minWidth:'1920px'}
|
||||||
]
|
]
|
||||||
|
|||||||
@ -1,46 +1,60 @@
|
|||||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
import { ref, onMounted, onBeforeUnmount } from 'vue';
|
||||||
export function useAdaptation(sizes, handleChange) {
|
import debounce from 'lodash/debounce'
|
||||||
const mediaQueryLists = sizes.map(size => window.matchMedia(`(max-width: ${size.maxWidth})`));
|
|
||||||
const currentDevice = ref(getCurrentDevice())
|
export function useAdaptation(ranges, handleChange) {
|
||||||
function getCurrentDevice() {
|
// 创建 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;
|
||||||
|
return { minQuery, maxQuery };
|
||||||
|
});
|
||||||
|
|
||||||
|
// 定义当前匹配的区间
|
||||||
|
const currentRange = ref(getCurrentRange());
|
||||||
|
|
||||||
|
// 获取当前匹配的区间
|
||||||
|
function getCurrentRange() {
|
||||||
for (let i = 0; i < mediaQueryLists.length; i++) {
|
for (let i = 0; i < mediaQueryLists.length; i++) {
|
||||||
if (mediaQueryLists[i].matches) {
|
const { minQuery, maxQuery } = mediaQueryLists[i];
|
||||||
return sizes[i].maxWidth;
|
const minMatches = minQuery ? minQuery.matches : true;
|
||||||
|
const maxMatches = maxQuery ? maxQuery.matches : true;
|
||||||
|
if (minMatches && maxMatches) {
|
||||||
|
return ranges[i];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return sizes[sizes.length - 1].maxWidth
|
return ranges[ranges.length - 1];
|
||||||
}
|
}
|
||||||
|
|
||||||
const changeHandler = (newValue) => {
|
// 处理窗口大小变化（加上防抖）
|
||||||
if (typeof handleChange === 'function') {
|
const handleDeviceChange = debounce(() => {
|
||||||
handleChange(newValue);
|
const newRange = getCurrentRange();
|
||||||
|
if (currentRange.value !== newRange) {
|
||||||
|
currentRange.value = newRange;
|
||||||
|
if (typeof handleChange === 'function'&&newRange) {
|
||||||
|
handleChange(newRange);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
}, 200);
|
||||||
|
|
||||||
const mediaQueryChangeHandler = () => {
|
|
||||||
const newDevice = getCurrentDevice();
|
|
||||||
if (currentDevice.value !== newDevice) {
|
|
||||||
currentDevice.value = newDevice;
|
|
||||||
changeHandler(newDevice);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
let cleanupHandlers = [];
|
|
||||||
|
|
||||||
|
// 在组件挂载时添加事件监听器
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
mediaQueryLists.forEach(query => {
|
mediaQueryLists.forEach(({ minQuery, maxQuery }) => {
|
||||||
query.addEventListener('change', mediaQueryChangeHandler);
|
if (minQuery) minQuery.addEventListener('change', handleDeviceChange);
|
||||||
cleanupHandlers.push(() => query.removeEventListener('change', mediaQueryChangeHandler));
|
if (maxQuery) maxQuery.addEventListener('change', handleDeviceChange);
|
||||||
});
|
});
|
||||||
// Ensure the initial value is correct and trigger the changeHandler with the initial value
|
|
||||||
const initialDevice = getCurrentDevice();
|
// 初始调用以设置正确的区间
|
||||||
currentDevice.value = initialDevice;
|
handleDeviceChange();
|
||||||
changeHandler(initialDevice);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 在组件卸载时移除事件监听器
|
||||||
onBeforeUnmount(() => {
|
onBeforeUnmount(() => {
|
||||||
cleanupHandlers.forEach(cleanup => cleanup());
|
mediaQueryLists.forEach(({ minQuery, maxQuery }) => {
|
||||||
|
if (minQuery) minQuery.removeEventListener('change', handleDeviceChange);
|
||||||
|
if (maxQuery) maxQuery.removeEventListener('change', handleDeviceChange);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
return { maxWidth: currentDevice };
|
// 返回当前匹配的区间
|
||||||
|
return { currentRange };
|
||||||
}
|
}
|
||||||
|
|||||||
@ -4,13 +4,10 @@ import {sizes} from "@/dict/index.js";
|
|||||||
import size375 from '@/views/login/size375/index.vue'
|
import size375 from '@/views/login/size375/index.vue'
|
||||||
import size768 from '@/views/login/size768/index.vue'
|
import size768 from '@/views/login/size768/index.vue'
|
||||||
import {computed} from "vue";
|
import {computed} from "vue";
|
||||||
const {maxWidth}= useAdaptation(sizes,(maxWidth)=>{
|
const {currentRange }= useAdaptation([ {minWidth:'0px',maxWidth:'768px'}, {minWidth:'768px',maxWidth:'1440px'}, {minWidth:'1440px',maxWidth: '1920px'}, {minWidth:'1920px'}])
|
||||||
console.log('maxWidth',maxWidth.value)
|
|
||||||
})
|
|
||||||
|
|
||||||
const viewComponent = computed(()=>{
|
const viewComponent = computed(()=>{
|
||||||
switch (maxWidth.value){
|
switch (currentRange.value?.minWidth){
|
||||||
case '375px':
|
case '0px':
|
||||||
return size375
|
return size375
|
||||||
case '768px':
|
case '768px':
|
||||||
return size768
|
return size768
|
||||||
@ -19,7 +16,7 @@ switch (maxWidth.value){
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<component :is="viewComponent"></component>
|
<component :is="viewComponent"></component>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|||||||
@ -7,160 +7,137 @@ const { maxWidth } = useAdaptation([
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="container">
|
<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="content1"></div>
|
<div class="relative z-10 flex items-center flex-col"> <div class="content1 mb-[123px] shrink-0 "></div>
|
||||||
<div class="content2">
|
<div class="content2">
|
||||||
<div class="wrap1">
|
<div class="wrap1">
|
||||||
<div class="wrap1_1">手机号</div>
|
<div class="wrap1_1">手机号</div>
|
||||||
<div class="wrap1_2">
|
<div class="wrap1_2">
|
||||||
<input class="pl-[61px] w-[1174px] h-[174px] focus:outline-none placeholder:text-primary focus: bg-[#DCE5E9] border-none" placeholder="请输入手机号" type="text">
|
<input class="pl-[61px] w-[1174px] h-[174px] focus:outline-none placeholder:text-primary placeholder:text-[72px] focus: bg-[#DCE5E9] focus:text-[72px] border-none" placeholder="请输入手机号" type="text">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="wrap2">
|
||||||
|
<div class="wrap2_1">验证码</div>
|
||||||
|
<div class="wrap2_2">
|
||||||
|
<input class="wrap2_2_1" placeholder="请输入验证码" type="text">
|
||||||
|
</div>
|
||||||
|
<div class="wrap2_3 bg-primary">
|
||||||
|
获取验证码
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="wrap3">登录/注册</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="wrap2">
|
<div class="content3">
|
||||||
<div class="wrap2_1">验证码</div>
|
<img src="@/assets/image/gdz27.png" alt="">
|
||||||
<div class="wrap2_2">
|
</div></div>
|
||||||
<input class="wrap2_2_1" placeholder="请输入验证码" type="text">
|
|
||||||
</div>
|
<div class="content4 absolute bottom-[200px] left-[50%] transform translate-x-[-50%]">
|
||||||
<div class="wrap2_3 bg-primary">
|
<img class="w-[1270px] h-[145px]" src="@/assets/image/zu733@2x.png" alt="">
|
||||||
获取验证码
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="wrap3">登录/注册</div>
|
|
||||||
</div>
|
|
||||||
<div class="content3">
|
|
||||||
<img src="@/assets/image/gdz27.png" alt="">
|
|
||||||
</div>
|
|
||||||
<div class="content4">
|
|
||||||
<img src="@/assets/image/zu733@2x.png" alt="">
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.container {
|
|
||||||
box-sizing: border-box;
|
.content3 {
|
||||||
position: relative;
|
position: absolute;
|
||||||
width: 1920px;
|
top: 0;
|
||||||
height: 100vh;
|
left: 0;
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-image: url("@/assets/image/zu3237.png");
|
|
||||||
|
img {
|
||||||
|
width: 671px;
|
||||||
|
height: 728px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.content1 {
|
||||||
|
margin-top: 835px;
|
||||||
|
background-size: cover;
|
||||||
|
width: 1074px;
|
||||||
|
height: 178px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-image: url("@/assets/image/zu3310@2x.png");
|
||||||
|
}
|
||||||
|
.content2 {
|
||||||
|
background-size: cover;
|
||||||
|
width: 1654px;
|
||||||
|
height: 1285px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-image: url("@/assets/image/zu3270@2x.png");
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 241px;
|
||||||
|
|
||||||
.content4 {
|
.wrap3 {
|
||||||
position: absolute;
|
|
||||||
bottom: 200px;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 1270px;
|
|
||||||
height: 145px;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.content3 {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
|
|
||||||
img {
|
|
||||||
width: 671px;
|
|
||||||
height: 728px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.content1 {
|
|
||||||
margin-top: 835px;
|
|
||||||
background-size: cover;
|
|
||||||
width: 1074px;
|
|
||||||
height: 178px;
|
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-image: url("@/assets/image/zu3310@2x.png");
|
font-size: 82px;
|
||||||
}
|
color: #fff;
|
||||||
.content2 {
|
margin-top: 261px;
|
||||||
margin-top: 123px;
|
|
||||||
background-size: cover;
|
|
||||||
width: 1654px;
|
|
||||||
height: 1285px;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-image: url("@/assets/image/zu3270@2x.png");
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding-top: 241px;
|
width: 866px;
|
||||||
|
height: 200px;
|
||||||
|
|
||||||
.wrap3 {
|
background-image: url("@/assets/image/fbbb@4x.png");
|
||||||
background-size: cover;
|
}
|
||||||
background-repeat: no-repeat;
|
|
||||||
font-size: 82px;
|
.wrap1 {
|
||||||
color: #fff;
|
display: flex;
|
||||||
margin-top: 261px;
|
align-items: center;
|
||||||
|
|
||||||
|
.wrap1_2 {
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrap1_1 {
|
||||||
|
margin-right: 41px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #2B69A1;
|
||||||
|
font-size: 72px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrap2 {
|
||||||
|
margin-top: 118px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.wrap2_3 {
|
||||||
|
margin-left: 51px;
|
||||||
|
color: #FFFFFF;
|
||||||
|
font-size: 72px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 866px;
|
width: 460px;
|
||||||
height: 200px;
|
height: 174px;
|
||||||
|
|
||||||
background-image: url("@/assets/image/fbbb@4x.png");
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.wrap1 {
|
.wrap2_2 {
|
||||||
display: flex;
|
.wrap2_2_1 {
|
||||||
align-items: center;
|
padding-left: 61px;
|
||||||
|
width: 660px;
|
||||||
.wrap1_2 {
|
|
||||||
}
|
|
||||||
|
|
||||||
.wrap1_1 {
|
|
||||||
margin-right: 41px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #2B69A1;
|
|
||||||
font-size: 72px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.wrap2 {
|
|
||||||
margin-top: 118px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
.wrap2_3 {
|
|
||||||
margin-left: 51px;
|
|
||||||
color: #FFFFFF;
|
|
||||||
font-size: 72px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
width: 460px;
|
|
||||||
height: 174px;
|
height: 174px;
|
||||||
}
|
background-color: #DCE5E9;
|
||||||
|
border: none;
|
||||||
.wrap2_2 {
|
&:focus{
|
||||||
.wrap2_2_1 {
|
outline: none;
|
||||||
padding-left: 61px;
|
}
|
||||||
width: 660px;
|
&::placeholder {
|
||||||
height: 174px;
|
font-size: 72px;
|
||||||
background-color: #DCE5E9;
|
color: #2B69A1;
|
||||||
border: none;
|
|
||||||
&:focus{
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
&::placeholder {
|
|
||||||
font-size: 72px;
|
|
||||||
color: #2B69A1;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.wrap2_1 {
|
.wrap2_1 {
|
||||||
margin-right: 41px;
|
margin-right: 41px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #2B69A1;
|
color: #2B69A1;
|
||||||
font-size: 72px;
|
font-size: 72px;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -6,7 +6,6 @@ const parseStyle = (style) => {
|
|||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
presets: [
|
presets: [
|
||||||
presetWind(), // 使用默认的 UnoCSS 预设
|
presetWind(), // 使用默认的 UnoCSS 预设
|
||||||
presetAttributify(), // 支持属性模式
|
|
||||||
presetIcons()
|
presetIcons()
|
||||||
],
|
],
|
||||||
theme: {
|
theme: {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user