123

package.json

@@ -12,6 +12,7 @@
     "@unocss/reset": "^0.61.9",
     "cnjm-postcss-px-to-viewport": "^1.0.1",
     "jsdom": "^24.0.0",
+    "lodash": "^4.17.21",
     "path": "^0.12.7",
     "postcss-preset-env": "^10.0.0",
     "postcss-px-to-viewport": "^1.1.1",

pnpm-lock.yaml

@@ -17,6 +17,9 @@ importers:
       jsdom:
         specifier: ^24.0.0
         version: 24.1.1
+      lodash:
+        specifier: ^4.17.21
+        version: 4.17.21
       path:
         specifier: ^0.12.7
         version: 0.12.7

src/dict/index.js

@@ -1,3 +1,3 @@
 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'}
 ]

src/utils/self-adaption.js

@@ -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++) {
-            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);
             }
-    };
-
-    const mediaQueryChangeHandler = () => {
-        const newDevice = getCurrentDevice();
-        if (currentDevice.value !== newDevice) {
-            currentDevice.value = newDevice;
-            changeHandler(newDevice);
         }
-    };
+    }, 200);
-
-    let cleanupHandlers = [];
 
+    // 在组件挂载时添加事件监听器
     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;
-        changeHandler(initialDevice);
         });
 
+        // 初始调用以设置正确的区间
+        handleDeviceChange();
+    });
+
+    // 在组件卸载时移除事件监听器
     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 };
 }

src/views/login/index.vue

@@ -4,13 +4,10 @@ import {sizes} from "@/dict/index.js";
 import size375 from '@/views/login/size375/index.vue'
 import size768 from '@/views/login/size768/index.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(()=>{
-switch (maxWidth.value){
+switch (currentRange.value?.minWidth){
-  case '375px':
+  case '0px':
     return size375
   case '768px':
     return size768

src/views/login/size375/index.vue

@@ -7,13 +7,13 @@ const { maxWidth } = useAdaptation([
 </script>
 
 <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="wrap1">
           <div class="wrap1_1">手机号</div>
           <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 class="wrap2">
@@ -29,36 +29,15 @@ const { maxWidth } = useAdaptation([
       </div>
       <div class="content3">
         <img src="@/assets/image/gdz27.png" alt="">
-    </div>
+      </div></div>
-    <div class="content4">
+
-      <img src="@/assets/image/zu733@2x.png" alt="">
+    <div class="content4 absolute bottom-[200px] left-[50%] transform translate-x-[-50%]">
+      <img class="w-[1270px] h-[145px]" src="@/assets/image/zu733@2x.png" alt="">
     </div>
   </div>
 </template>
 
 <style scoped lang="scss">
-.container {
-  box-sizing: border-box;
-  position: relative;
-  width: 1920px;
-  height: 100vh;
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-image: url("@/assets/image/zu3237.png");
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-
-  .content4 {
-    position: absolute;
-    bottom: 200px;
-
-    img {
-      width: 1270px;
-      height: 145px;
-
-    }
-  }
 
 .content3 {
   position: absolute;
@@ -81,7 +60,6 @@ const { maxWidth } = useAdaptation([
   background-image: url("@/assets/image/zu3310@2x.png");
 }
 .content2 {
-    margin-top: 123px;
   background-size: cover;
   width: 1654px;
   height: 1285px;
@@ -163,6 +141,5 @@ const { maxWidth } = useAdaptation([
     }
   }
 }
-}
 
 </style>

uno.config.js

@@ -6,7 +6,6 @@ const parseStyle = (style) => {
 export default defineConfig({
     presets: [
         presetWind(), // 使用默认的 UnoCSS 预设
-        presetAttributify(), // 支持属性模式
         presetIcons()
     ],
     theme: {