123

2024-08-06 20:43:08 +08:00 · 2024-08-06 20:43:08 +08:00 · bfa6690a4d
commit bfa6690a4d
parent 486f2ea9bb
7 changed files with 160 additions and 169 deletions
--- a/package.json
+++ b/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",
--- a/pnpm-lock.yaml
+++ b/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
--- a/src/dict/index.js
+++ b/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'}
 ]
--- a/src/utils/self-adaption.js
+++ b/src/utils/self-adaption.js
@ -1,46 +1,60 @@
-import { ref, onMounted, onBeforeUnmount } from 'vue'
-export function useAdaptation(sizes, handleChange) {
-    const mediaQueryLists = sizes.map(size => window.matchMedia(`(max-width: ${size.maxWidth})`));
-    const currentDevice = ref(getCurrentDevice())
-    function getCurrentDevice() {
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+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;
+        return { minQuery, maxQuery };
+    });
+
+    // 定义当前匹配的区间
+    const currentRange = ref(getCurrentRange());
+
+    // 获取当前匹配的区间
+    function getCurrentRange() {
        for (let i = 0; i < mediaQueryLists.length; i++) {
-            if (mediaQueryLists[i].matches) {
-                return sizes[i].maxWidth;
+            const { minQuery, maxQuery } = mediaQueryLists[i];
+            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') {
-            handleChange(newValue);
+    // 处理窗口大小变化（加上防抖）
+    const handleDeviceChange = debounce(() => {
+        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);
-        }
-    };
-
-    let cleanupHandlers = [];
+    }, 200);

+    // 在组件挂载时添加事件监听器
    onMounted(() => {
-        mediaQueryLists.forEach(query => {
-            query.addEventListener('change', mediaQueryChangeHandler);
-            cleanupHandlers.push(() => query.removeEventListener('change', mediaQueryChangeHandler));
+        mediaQueryLists.forEach(({ minQuery, maxQuery }) => {
+            if (minQuery) minQuery.addEventListener('change', handleDeviceChange);
+            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 };
 }
--- a/src/views/login/index.vue
+++ b/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)=>{
-  console.log('maxWidth',maxWidth.value)
-})
-
+const {currentRange }= useAdaptation([ {minWidth:'0px',maxWidth:'768px'},    {minWidth:'768px',maxWidth:'1440px'},    {minWidth:'1440px',maxWidth: '1920px'},    {minWidth:'1920px'}])
 const viewComponent = computed(()=>{
-switch (maxWidth.value){
-  case '375px':
+switch (currentRange.value?.minWidth){
+  case '0px':
    return size375
  case '768px':
    return size768
@ -19,7 +16,7 @@ switch (maxWidth.value){
 </script>

 <template>
-  <component :is="viewComponent"></component>
+<component :is="viewComponent"></component>
 </template>

 <style scoped lang="scss">
--- a/src/views/login/size375/index.vue
+++ b/src/views/login/size375/index.vue
@ -7,160 +7,137 @@ const { maxWidth } = useAdaptation([
 </script>

 <template>
-  <div class="container">
-    <div class="content1"></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">
+  <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="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 placeholder:text-[72px] focus: bg-[#DCE5E9] focus:text-[72px]  border-none" placeholder="请输入手机号" type="text">
+          </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 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 class="content3">
-      <img src="@/assets/image/gdz27.png" alt="">
-    </div>
-    <div class="content4">
-      <img src="@/assets/image/zu733@2x.png" alt="">
+      <div class="content3">
+        <img src="@/assets/image/gdz27.png" alt="">
+      </div></div>
+
+    <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;
+
+.content3 {
+  position: absolute;
+  top: 0;
+  left: 0;
  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;
-  align-items: center;
  flex-direction: column;
+  align-items: center;
+  padding-top: 241px;

-  .content4 {
-    position: absolute;
-    bottom: 200px;
-
-    img {
-      width: 1270px;
-      height: 145px;
-
-    }
-  }
-
-  .content3 {
-    position: absolute;
-    top: 0;
-    left: 0;
+  .wrap3 {
    background-size: cover;
-
-    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 {
-    margin-top: 123px;
-    background-size: cover;
-    width: 1654px;
-    height: 1285px;
-    background-repeat: no-repeat;
-    background-image: url("@/assets/image/zu3270@2x.png");
+    font-size: 82px;
+    color: #fff;
+    margin-top: 261px;
    display: flex;
-    flex-direction: column;
+    justify-content: center;
    align-items: center;
-    padding-top: 241px;
+    width: 866px;
+    height: 200px;

-    .wrap3 {
-      background-size: cover;
-      background-repeat: no-repeat;
-      font-size: 82px;
-      color: #fff;
-      margin-top: 261px;
+    background-image: url("@/assets/image/fbbb@4x.png");
+  }
+
+  .wrap1 {
+    display: flex;
+    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;
      justify-content: center;
      align-items: center;
-      width: 866px;
-      height: 200px;
-
-      background-image: url("@/assets/image/fbbb@4x.png");
+      width: 460px;
+      height: 174px;
    }

-    .wrap1 {
-      display: flex;
-      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;
-        justify-content: center;
-        align-items: center;
-        width: 460px;
+    .wrap2_2 {
+      .wrap2_2_1 {
+        padding-left: 61px;
+        width: 660px;
        height: 174px;
-      }
-
-      .wrap2_2 {
-        .wrap2_2_1 {
-          padding-left: 61px;
-          width: 660px;
-          height: 174px;
-          background-color: #DCE5E9;
-          border: none;
-          &:focus{
-            outline: none;
-          }
-          &::placeholder {
-            font-size: 72px;
-            color: #2B69A1;
-          }
+        background-color: #DCE5E9;
+        border: none;
+        &:focus{
+          outline: none;
+        }
+        &::placeholder {
+          font-size: 72px;
+          color: #2B69A1;
        }
      }
+    }

-      .wrap2_1 {
-        margin-right: 41px;
-        font-weight: bold;
-        color: #2B69A1;
-        font-size: 72px;
-      }
+    .wrap2_1 {
+      margin-right: 41px;
+      font-weight: bold;
+      color: #2B69A1;
+      font-size: 72px;
    }
  }
 }
--- a/uno.config.js
+++ b/uno.config.js
@ -6,7 +6,6 @@ const parseStyle = (style) => {
 export default defineConfig({
    presets: [
        presetWind(), // 使用默认的 UnoCSS 预设
-        presetAttributify(), // 支持属性模式
        presetIcons()
    ],
    theme: {