diff --git a/postcss.config.js b/postcss.config.js index a80fe93..5762702 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -39,8 +39,8 @@ export default { unitPrecision: 5, // 保留的小数位数 selectorBlackList: [/^\.van/], // 以 .van 开头的类名不转换 minPixelValue: 1, // 小于或等于 1px 不转换 - viewportUnit: "vmin", // 转换后的单位 - fontViewportUnit: "vmin", // 字体单位 + viewportUnit: "vw", // 转换后的单位 + fontViewportUnit: "vw", // 字体单位 unitToConvert: "px" // 需要转换的单位 }), ], diff --git a/src/assets/image/za3343@2x.png b/src/assets/image/za3343@2x.png new file mode 100644 index 0000000..9e5c288 Binary files /dev/null and b/src/assets/image/za3343@2x.png differ diff --git a/src/utils/self-adaption.js b/src/utils/self-adaption.js index f5aa000..275d427 100644 --- a/src/utils/self-adaption.js +++ b/src/utils/self-adaption.js @@ -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]; } @@ -30,7 +31,7 @@ export function useAdaptation(ranges, handleChange) { const newRange = getCurrentRange(); if (currentRange.value !== newRange) { currentRange.value = newRange; - if (typeof handleChange === 'function'&&newRange) { + if (typeof handleChange === 'function' && newRange) { handleChange(newRange); } } @@ -55,6 +56,6 @@ export function useAdaptation(ranges, handleChange) { }); }); - // 返回当前匹配的区间 + // 返回当前匹配的区间，包括 min，但不包括 max return { currentRange }; } diff --git a/src/views/login/index.vue b/src/views/login/index.vue index 0f19d67..0036823 100644 --- a/src/views/login/index.vue +++ b/src/views/login/index.vue @@ -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 } }) diff --git a/src/views/login/size1440/index.vue b/src/views/login/size1440/index.vue new file mode 100644 index 0000000..f6bd9a7 --- /dev/null +++ b/src/views/login/size1440/index.vue @@ -0,0 +1,37 @@ + + + + + diff --git a/src/views/login/size1920/index.vue b/src/views/login/size1920/index.vue new file mode 100644 index 0000000..53729b5 --- /dev/null +++ b/src/views/login/size1920/index.vue @@ -0,0 +1,37 @@ + + + + + diff --git a/src/views/login/size375/index.vue b/src/views/login/size375/index.vue index 129a914..39dbfa0 100644 --- a/src/views/login/size375/index.vue +++ b/src/views/login/size375/index.vue @@ -2,7 +2,7 @@