From adb11244a8b72d271f6b60db9d6b770d9187ed74 Mon Sep 17 00:00:00 2001
From: liushilong <2224574157@qq.com>
Date: Mon, 25 Mar 2024 15:35:10 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A6=96=E9=A1=B5=E7=99=BB=E5=BD=95?=
 =?UTF-8?q?=E7=9B=B8=E5=85=B3=E6=A8=A1=E5=9D=97=E8=87=AA=E9=80=82=E5=BA=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                           |  11 +-
 src/views/login/captcha.vue           |   2 +-
 src/views/login/components/Forget.vue |  45 +++----
 src/views/login/components/Login.vue  |  66 +++++-----
 src/views/login/index.vue             | 168 +++++++++++++-------------
 src/views/login/index1.vue            |  12 +-
 6 files changed, 150 insertions(+), 154 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 5bf5533..c6948a7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -45,16 +45,7 @@ const getThemeOverrides = computed(() => {
   };
 });
 
-// onMounted(() => {
-//   window.addEventListener("resize", () => {
-//     nextTick(() => {
-//       const designWidth = 1440;
-//       const rempPx = 16;
-//       const scale = window.innerWidth / designWidth;
-//       document.documentElement.style.fontSize = scale * rempPx + "px";
-//     });
-//   });
-// });
+
 </script>
 
 <template>
diff --git a/src/views/login/captcha.vue b/src/views/login/captcha.vue
index 5b742b1..19db6fd 100644
--- a/src/views/login/captcha.vue
+++ b/src/views/login/captcha.vue
@@ -39,7 +39,7 @@ onBeforeMount(() => {
   <div>
     <n-spin :show="spinning">
       <img
-        title="点击刷新" :src="base64" :style="{ width: '93px', height: '54px', cursor: 'pointer' }"
+        title="点击刷新" :src="base64" :style="{ width: '5.8125rem', height: '3.375rem', cursor: 'pointer' }"
         @click="fetchCaptcha"
       >
     </n-spin>
diff --git a/src/views/login/components/Forget.vue b/src/views/login/components/Forget.vue
index d0e8d42..42a4aca 100644
--- a/src/views/login/components/Forget.vue
+++ b/src/views/login/components/Forget.vue
@@ -332,7 +332,7 @@ function forget() {
 
 <style lang="less" scoped>
 .form-login {
-  width: 420px;
+  width: 26.25rem;
   box-sizing: border-box;
   background: linear-gradient(
     136deg,
@@ -344,19 +344,19 @@ function forget() {
   box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.04);
   backdrop-filter: blur(12px);
   position: relative;
-  padding: 48px 27px 42px;
+  padding: 3rem 1.6875rem 2.625rem;
 
   .img-close {
     position: absolute;
     right: 0;
     top: -44px;
-    width: 28px;
-    height: 28px;
+    width: 1.75rem;
+    height: 1.75rem;
     cursor: pointer;
   }
 
   .tab {
-    font-size: 24px;
+    font-size: 1.5rem;
     font-family: PingFang SC, PingFang SC-Medium;
     font-weight: Medium;
     text-align: left;
@@ -368,27 +368,27 @@ function forget() {
   }
 
   .form-1 {
-    margin-top: 29px;
+    margin-top: 1.8125rem;
 
     .form-item {
-      height: 60px;
+      height: 3.75rem;
     }
 
     .item-input {
-      width: 366px;
+      width: 22.875rem;
       // height: 44px;
       background: rgba(255, 255, 255, 0.5);
       border-radius: 4px;
     }
 
     .btn {
-      width: 366px;
-      height: 44px;
+      width: 22.875rem;
+      height: 2.75rem;
       background: linear-gradient(234deg, #96aaff 0%, #1c43ff 100%);
       border-radius: 3px;
-      margin-top: 10px;
-      margin-bottom: 14px;
-
+      margin-top: .625rem;
+      margin-bottom: .875rem;
+      font-size: 1rem;
       &-disabled {
         opacity: 0.5;
         background: linear-gradient(234deg, #96aaff 0%, #1c43ff 100%);
@@ -397,26 +397,26 @@ function forget() {
   }
 
   .img-phone {
-    width: 20px;
-    height: 20px;
+    width: 1.25rem;
+    height: 1.25rem;
   }
 
   .order-last {
-    font-size: 14px;
+    font-size: .875rem;
     font-family: PingFang SC, PingFang SC-Regular;
     font-weight: Regular;
     color: #507afd;
   }
 
   .code {
-    font-size: 15px;
+    font-size: .9375rem;
     font-family: PingFang SC, PingFang SC-Regular;
     font-weight: Regular;
     color: #507afd;
-    margin-left: 12px;
-
+    margin-left: .75rem;
+    cursor: pointer;
     &-count {
-      font-size: 14px;
+      font-size: .875rem;
       color: #999999;
     }
   }
@@ -425,11 +425,12 @@ function forget() {
   // color: #FF4E4F !important;
 }
 .back {
-  font-size: 15px;
+  font-size: .9375rem;
   font-family: PingFang SC, PingFang SC-Medium;
   font-weight: Medium;
   text-align: center;
   color: #666666;
-  line-height: 21px;
+  line-height: 1.3125rem;
+  cursor: pointer;
 }
 </style>
diff --git a/src/views/login/components/Login.vue b/src/views/login/components/Login.vue
index dc77039..ddc2dc7 100644
--- a/src/views/login/components/Login.vue
+++ b/src/views/login/components/Login.vue
@@ -472,8 +472,8 @@ function forget() {
 
 <style lang="less" scoped>
 .form-login {
-  width: 420px;
-  height: 417px;
+  width: 26.25rem;
+  height: 26.0625rem;
   box-sizing: border-box;
   background: linear-gradient(
     136deg,
@@ -485,40 +485,40 @@ function forget() {
   box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.04);
   backdrop-filter: blur(12px);
   position: relative;
-  padding: 48px 27px 0;
+  padding: 3rem 1.6875rem 0;
 
   .img-close {
     position: absolute;
     right: 0;
-    top: -44px;
-    width: 28px;
-    height: 28px;
+    top: -2.75rem;
+    width: 1.75rem;
+    height: 1.75rem;
     cursor: pointer;
   }
 
   .tab {
     display: flex;
     .tab-item {
-      width: 72px;
-      height: 25px;
-      font-size: 18px;
+      width: 4.5rem;
+      height: 1.5625rem;
+      font-size: 1.125rem;
       font-family: PingFang SC, PingFang SC-Medium;
       font-weight: 600;
       text-align: left;
       color: #666666;
-      line-height: 33px;
-      margin-right: 24px;
+      line-height: 2.0625rem;
+      margin-right: 1.5rem;
       cursor: pointer;
 
       &-active {
-        width: 96px;
-        height: 33px;
-        font-size: 24px;
+        width: 6rem;
+        height: 2.0625rem;
+        font-size: 1.5rem;
         font-family: PingFang SC, PingFang SC-Medium;
         font-weight: 600;
         text-align: left;
         color: #507afd;
-        line-height: 33px;
+        line-height: 2.0625rem;
 
         .line {
           background: linear-gradient(234deg, #96aaff 0%, #1c43ff 100%);
@@ -526,36 +526,36 @@ function forget() {
       }
 
       .line {
-        width: 32px;
-        height: 4px;
+        width: 2rem;
+        height: .25rem;
         border-radius: 2px;
         margin: 0 auto;
-        margin-top: 9px;
+        margin-top: .5625rem;
       }
     }
   }
 
   .form-1 {
-    margin-top: 29px;
+    margin-top: 1.8125rem;
 
     .form-item {
-      height: 60px;
+      height: 3.75rem;
     }
 
     .item-input {
-      width: 366px;
+      width: 22.875rem;
       // height: 44px;
       background: rgba(255, 255, 255, 0.5);
       border-radius: 4px;
     }
 
     .btn {
-      width: 366px;
-      height: 44px;
+      width: 22.875rem;
+      height: 2.75rem;
       background: linear-gradient(234deg, #96aaff 0%, #1c43ff 100%);
       border-radius: 3px;
-      margin-top: 10px;
-      margin-bottom: 14px;
+      margin-top: .625rem;
+      margin-bottom: .875rem;
 
       &-disabled {
         opacity: 0.5;
@@ -565,27 +565,27 @@ function forget() {
   }
 
   .img-phone {
-    width: 20px;
-    height: 20px;
+    width: 1.25rem;
+    height: 1.25rem;
   }
 
   .order-last {
-    font-size: 14px;
+    font-size: .875rem;
     font-family: PingFang SC, PingFang SC-Regular;
     font-weight: Regular;
     color: #507afd;
   }
 
   .code {
-    font-size: 15px;
+    font-size: .9375rem;
     font-family: PingFang SC, PingFang SC-Regular;
     font-weight: Regular;
     color: #507afd;
-    margin-left: 12px;
+    margin-left: .75rem;
     cursor: pointer;
 
     &-count {
-      font-size: 14px;
+      font-size: .875rem;
       color: #999999;
     }
   }
@@ -594,11 +594,11 @@ function forget() {
   // color: #FF4E4F !important;
 }
 .forgetSpan {
-  font-size: 15px;
+  font-size: .9375rem;
   font-family: PingFang SC, PingFang SC-Regular;
   font-weight: Regular;
   text-align: center;
   color: #999999;
-  line-height: 21px;
+  line-height: 1.3125rem;
 }
 </style>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index f351a77..bc6f938 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,10 +1,28 @@
 <script lang="ts" setup>
-import { ref } from "vue";
 import Login from "./components/Login.vue";
 import Forget from "./components/Forget.vue";
-
+import { onMounted, nextTick, ref, onDeactivated } from "vue";
+onMounted(() => {
+  nextTick(() => {
+    initRem();
+  });
+  window.addEventListener("resize", () => {
+    initRem();
+  });
+});
+onDeactivated(()=>{
+  window.removeEventListener('resize',()=>{
+    
+  })
+})
 const show = ref(false);
 const ifLogin = ref(true);
+const initRem = () => {
+  const designWidth = 1440;
+  const rempPx = 16;
+  const scale = window.innerWidth / designWidth;
+  document.documentElement.style.fontSize = scale * rempPx + "px";
+};
 
 function showLogin() {
   show.value = true;
@@ -86,7 +104,7 @@ function close() {
   background-image: url("../../assets/images/login/bg.png");
   background-repeat: no-repeat;
   background-size: cover;
-  height: 100vh;
+  height: 56.25rem;
 
   .f-c-c {
     display: flex;
@@ -111,77 +129,77 @@ function close() {
   }
 
   .img-logo {
-    width: 121px;
-    height: 35px;
+    width: 7.5625rem;
+    height: 2.1875rem;
   }
 
   .img-ai {
-    width: 97px;
-    height: 90px;
+    width: 6.0625rem;
+    height: 5.625rem;
   }
 
   .img-item {
-    width: 53px;
-    height: 52px;
-    margin-left: -10px;
+    width: 3.3125rem;
+    height: 3.25rem;
+    margin-left: -0.625rem;
   }
 
   .img-task {
-    width: 138px;
-    height: 54px;
-    border-radius: 6px;
+    width: 8.625rem;
+    height: 3.375rem;
+    border-radius: 0.375rem;
     background-image: url("../../assets/images/login/img-task.png");
     background-repeat: no-repeat;
     background-size: cover;
-    font-size: 14px;
+    font-size: 0.875rem;
     font-family: HarmonyOS Sans SC, HarmonyOS Sans SC-Regular;
     font-weight: Regular;
     text-align: left;
     color: #666666;
-    margin-left: -10px;
-    margin-top: -10px;
-    padding-top: 10px;
+    margin-left: -0.625rem;
+    margin-top: -1rem;
+    padding-top: 0.625rem;
     box-sizing: border-box;
     text-align: center;
   }
 
   .img-ip {
-    width: 80px;
-    height: 80px;
+    width: 5rem;
+    height: 5rem;
   }
 
   .img-text {
-    width: 600px;
-    height: 65px;
-    margin-top: 43px;
+    width: 37.5rem;
+    height: 4.0625rem;
+    margin-top: 2.6875rem;
   }
 
   .img-icon-1 {
-    width: 54px;
-    height: 54px;
+    width: 3.375rem;
+    height: 3.375rem;
   }
 
   .img-icon-2 {
-    width: 54px;
-    height: 54px;
-    margin-left: 830px;
+    width: 3.375rem;
+    height: 3.375rem;
+    margin-left: 51.875rem;
   }
 
   .content {
-    width: 1300px;
+    width: 81.25rem;
     margin: 0 auto;
-    padding-top: 27px;
+    padding-top: 1.6875rem;
   }
 
   .header {
-    margin-bottom: 44px;
+    margin-bottom: 2.75rem;
 
     .btn-login {
-      width: 76px;
-      height: 40px;
+      width: 4.75rem;
+      height: 2.5rem;
       border: 1px solid #666666;
-      border-radius: 8px;
-      font-size: 16px;
+      border-radius: 0.5rem;
+      font-size: 1rem;
       font-family: PingFang SC, PingFang SC-Regular;
       font-weight: Regular;
       color: #333333;
@@ -190,103 +208,89 @@ function close() {
   }
 
   .img-wrap {
-    padding-left: 174px;
+    padding-left: 10.875rem;
   }
 
   .center-text {
     margin: 0 auto;
-    width: 776px;
+    width: 48.5rem;
   }
 
   .text {
-    font-size: 20px;
+    font-size: 1.25rem;
     font-family: PingFang SC, PingFang SC-Regular;
     font-weight: Regular;
     text-align: center;
     color: #666666;
-    line-height: 28px;
-    margin-top: 32px;
+    line-height: 1.75rem;
+    margin-top: 2rem;
   }
 
   .btn-login-2 {
-    width: 138px;
-    height: 44px;
+    width: 8.625rem;
+    height: 2.75rem;
     background: linear-gradient(136deg, #3258e8, #786efc 100%);
-    border-radius: 8px;
+    border-radius: 0.5rem;
     box-shadow: 0px 2px 6px 0px rgba(116, 153, 253, 0.3);
-    font-size: 16px;
+    font-size: 1rem;
     font-family: PingFang SC, PingFang SC-Medium;
     font-weight: Medium;
     text-align: left;
     color: #ffffff;
-    line-height: 22px;
+    line-height: 1.375rem;
     margin: 0 auto;
     cursor: pointer;
   }
 
   .item-wrap {
-    margin-top: 78px;
+    width: 76.375rem;
+    margin: 4.875rem auto 0;
     .item {
-      width: 258px;
-      height: 132px;
+      // width: 16.125rem;
+      // height: 8.25rem;
+      width: 14.875rem;
+      height: 7rem;
       background-image: url("../../assets/images/login/item-bg.png");
       background-repeat: no-repeat;
       background-size: cover;
       position: relative;
-      padding-top: 50px;
-      padding-left: 28px;
+      padding-top: 3.125rem;
+      padding-left: 1.75rem;
       box-sizing: border-box;
     }
 
     .item-img {
-      width: 66px;
-      height: 76px;
+      width: 4.125rem;
+      height: 4.75rem;
       position: absolute;
-      top: -15px;
-      left: 20px;
+      top: -0.9375rem;
+      left: 1.25rem;
     }
 
     .title {
-      font-size: 16px;
+      font-size: 1rem;
       font-family: PingFang SC, PingFang SC-Medium;
       font-weight: Medium;
       color: #333333;
-      line-height: 22px;
-      margin-bottom: 8px;
+      line-height: 1.375rem;
+      margin-bottom: 0.5rem;
     }
 
     .subtitle {
-      font-size: 12px;
+      font-size: 0.75rem;
       font-family: PingFang SC, PingFang SC-Regular;
       font-weight: Regular;
       color: #666666;
-      line-height: 17px;
+      line-height: 1.0625rem;
     }
   }
-
-  @media screen and (min-width: 1440px) {
-    .item-footer {
-      max-width: 970px;
-      max-height: 119px;
-      width: 50%;
-      height: 10vh;
-      position: fixed;
-      left: 50%;
-      bottom: 0;
-      margin-left: -485px;
-    }
-  }
-  @media screen and (min-width:1440) {
-    .item-footer {
-      max-width: 970px;
-      max-height: 119px;
-      width: 50%;
-      height: 10vh;
-      position: fixed;
-      left: 60%;
-      bottom: 0;
-      margin-left: -485px;
-    }
+  .item-footer {
+    width: 60.625rem;
+    height: 7.4375rem;
+    position: fixed;
+    left: 44.5rem;
+    bottom: 0;
+    margin-left: -30.3125rem;
   }
 }
 </style>
diff --git a/src/views/login/index1.vue b/src/views/login/index1.vue
index 96b6a97..53fc99c 100644
--- a/src/views/login/index1.vue
+++ b/src/views/login/index1.vue
@@ -190,19 +190,19 @@ function handleSubmit(e) {
 
   &-container {
     flex: 1;
-    max-width: 384px;
-    min-width: 420px;
+    max-width: 24rem;
+    min-width: 26.25rem;
     margin: 0 auto;
-    padding-top: 230px;
+    padding-top: 14.375rem;
   }
 
   &-form {
     background: rgba(255, 255, 255, 0.20);
     border: 1px solid #ffffff;
-    border-radius: 6px;
+    border-radius: .375rem;
     box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.04);
     backdrop-filter: blur(9px);
-    padding: 50px 30px;
+    padding: 3.125rem 1.875rem;
   }
 
   &-other {
@@ -225,7 +225,7 @@ function handleSubmit(e) {
 }
 
 .page-account-container {
-  padding: 32px 0 24px 0;
+  padding: 2rem 0 1.5rem 0;
 }
 
 ::v-deep(.n-input .n-input__suffix) {