fix: 登录页比例修改

src/views/system/login2/login.vue

@@ -13,7 +13,9 @@
         <div class="login-left-box">
           <img class="logo" :src="logo" alt="">
           <div class="slogan">合作共赢 · 品质第一 </div>
-          <div class="type">研发设计/生产制造/工程管理/投资运营</div>
+          <div class="type">
+              研发设计/生产制造/工程管理/投资运营
+          </div>
         </div>
       </div>
       <div class="login-right">
@@ -41,8 +43,7 @@
                       <a-input-group compact>
                         <a-input style="width: calc(100% - 110px)" v-model:value="loginForm.emailCode" autocomplete="on"
                           placeholder="请输入邮箱验证码" />
-                        <a-button @click="sendSmsCode" type="primary"
-                          :disabled="emailCodeButtonDisabled">
+                        <a-button @click="sendSmsCode" type="primary" :disabled="emailCodeButtonDisabled">
                           {{ emailCodeTips }}
                         </a-button>
                       </a-input-group>
@@ -85,7 +86,7 @@
                 </div>
               </a-tab-pane>
               <a-tab-pane key="1" tab="扫码登录" force-render>
-                <div class="qrcode-login" v-if="activeKey ==='1'" :class="ratio > 0.985 ? 'margin-top' : 'flex-center'">
+                <div class="qrcode-login" v-if="activeKey === '1'" :class="ratio > 0.985 ? 'margin-top' : 'flex-center'">
                   <img class="img" :src="tip" alt="" v-if="ratio > 0.985">
                   <div class="code" :class="{ 'absolute-right': ratio > 0.985 }">
                     <ddLogin />
@@ -333,6 +334,7 @@ onUnmounted(() => {
 
     :deep(.dots) {
       width: 65%;
+      align-items: center;
     }
 
     :deep(.dots li) {
@@ -346,7 +348,8 @@ onUnmounted(() => {
     }
 
     :deep(.dots .slick-active) {
-      width: 4%;
+      width: calc(var(--fitWidthRatio) * 52px);
+      height: calc(var(--fitWidthRatio) * 16px);
     }
 
     :deep(.slick-active button) {
@@ -378,7 +381,7 @@ onUnmounted(() => {
       padding: calc(var(--fitWidthRatio) * 30px);
 
       .login-left-box {
-        width: 46%;
+        // width: 46%;
         height: 100%;
         display: flex;
         flex-direction: column;
@@ -390,18 +393,19 @@ onUnmounted(() => {
         }
 
         .slogan {
-          font-size: calc(var(--fitWidthRatio) * 40px);
+          font-size: calc(var(--fitWidthRatio) * 32px);
           font-weight: 600;
           font-family: 'PingFang SC';
           color: #1C449B;
         }
 
         .type {
+          width: 31.5%;
           background-color: #1c449b;
           padding: calc(var(--fitWidthRatio) * 8px) calc(var(--fitWidthRatio) * 16px);
           border-radius: calc(var(--fitWidthRatio) * 16px);
           color: #FFFFFF;
-          font-size: calc(var(--fitWidthRatio) * 24px);
+          font-size: calc(var(--fitWidthRatio) * 16px);
           font-weight: 600;
           font-family: 'PingFang SC';
         }
@@ -429,21 +433,21 @@ onUnmounted(() => {
         top: 12%;
 
         .login-right-title {
-          font-size: calc(var(--fitWidthRatio) * 30px);
+          font-size: calc(var(--fitWidthRatio) * 24px);
           font-weight: 600;
           width: 100%;
           color: rgba(0, 0, 0, 1);
           font-family: 'PingFang SC';
 
           .welcome {
-            font-size: calc(var(--fitWidthRatio) * 48px);
+            font-size: calc(var(--fitWidthRatio) * 32px);
           }
         }
 
         .login-right-form {
           width: 30vw;
           height: 65vh;
-          min-height: 396px;
+          min-height: 386px;
           background-color: #ffffff;
           box-shadow: 0px calc(var(--fitWidthRatio) * 6px) calc(var(--fitWidthRatio) * 4px) 0px rgba(149, 149, 149, 0.25);
           border-radius: calc(var(--fitWidthRatio) * 8px);
@@ -455,13 +459,16 @@ onUnmounted(() => {
             height: 90%;
             width: 100%;
             padding: calc(var(--fitWidthRatio) * 32px) calc(var(--fitWidthRatio) * 32px) 0 calc(var(--fitWidthRatio) * 32px);
-            :deep(.ant-tabs-nav){
+
+            :deep(.ant-tabs-nav) {
               margin: 0;
               padding: 0 calc(var(--fitWidthRatio) * 24px);
             }
-            :deep(.ant-tabs-tab){
-              padding:calc(var(--fitWidthRatio) * 4px)  0;
+
+            :deep(.ant-tabs-tab) {
+              padding: calc(var(--fitWidthRatio) * 4px) 0;
             }
+
             :deep(.ant-tabs-tab-active .ant-tabs-tab-btn) {
               color: #000;
             }
@@ -475,16 +482,18 @@ onUnmounted(() => {
             }
 
             :deep(.ant-tabs-tab-btn) {
-              font-size: calc(var(--fitWidthRatio) * 30px);
+              font-size: calc(var(--fitWidthRatio) * 24px);
             }
 
             :deep(.ant-tabs-content) {
               height: 100%;
             }
-            .margin-top{
+
+            .margin-top {
               margin-top: calc(var(--fitWidthRatio) * 50px);
             }
-            .flex-center{
+
+            .flex-center {
               margin: 0;
               display: flex;
               justify-content: center;
@@ -492,6 +501,7 @@ onUnmounted(() => {
               height: 100%;
               width: 100%;
             }
+
             .qrcode-login {
 
               .img {
@@ -503,7 +513,7 @@ onUnmounted(() => {
               }
 
               .code {
-                left: calc(var(--fitWidthRatio) * -10px);
+                left: 0;
                 top: calc(var(--fitWidthRatio) * 16px);
               }
 
@@ -521,7 +531,7 @@ onUnmounted(() => {
               padding: 0 calc(var(--fitWidthRatio) * 32px) 0 calc(var(--fitWidthRatio) * 16px);
 
               .label {
-                font-size: calc(var(--fitWidthRatio) * 20px);
+                font-size: calc(var(--fitWidthRatio) * 16px);
                 font-family: 'PingFang SC';
                 font-weight: 500;
                 margin-top: calc(var(--fitWidthRatio) * 16px);
@@ -529,9 +539,9 @@ onUnmounted(() => {
               }
 
               .input {
-                height: calc(var(--fitWidthRatio) * 50px);
+                height: calc(var(--fitWidthRatio) * 44px);
                 width: 100%;
-                font-size: calc(var(--fitWidthRatio) * 20px);
+                font-size: calc(var(--fitWidthRatio) * 16px);
                 border: 1px solid rgba(238, 238, 238, 1);
                 box-shadow: 0px calc(var(--fitWidthRatio) * 4px) calc(var(--fitWidthRatio) * 4px) 0px rgba(214, 214, 214, 0.25);
               }
@@ -540,21 +550,23 @@ onUnmounted(() => {
                 margin: 0;
 
                 .form-btn {
-                  width: 80%;
+                  width: 100%;
                   height: calc(var(--fitWidthRatio) * 50px);
-                  margin: calc(var(--fitWidthRatio) * 24px) auto;
-
+                  margin-top: calc(var(--fitWidthRatio) * 24px);
+                  display: flex;
+                  justify-content: center;
                   .btn {
                     height: 100%;
-                    width: 100%;
-                    font-size: calc(var(--fitWidthRatio) * 20px);
+                    width:calc(var(--fitWidthRatio) * 410px) ;
+                    font-size: calc(var(--fitWidthRatio) * 16px);
 
                   }
                 }
-                .img{
+
+                .img {
                   width: calc(var(--fitWidthRatio) * 124px);
-                  height:calc(var(--fitWidthRatio) * 42px);
-                  border-radius:calc(var(--fitWidthRatio) * 8px);
+                  height: calc(var(--fitWidthRatio) * 34px);
+                  border-radius: calc(var(--fitWidthRatio) * 8px);
                 }
               }
 
@@ -564,7 +576,7 @@ onUnmounted(() => {
                 height: 100%;
                 display: flex;
                 flex-direction: column;
-                justify-content: space-between;
+                justify-content: center;
               }
 
               :deep(.ant-form-item) {