123

postcss.config.js

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

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 };
 }

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
 }
 })
 </script>

src/views/login/size1440/index.vue

@@ -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>

src/views/login/size1920/index.vue

@@ -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>

src/views/login/size375/index.vue

@@ -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">

src/views/login/size768/index.vue

@@ -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="">