login

src/rem.js

@@ -4,7 +4,7 @@ const baseSize = 16
 // 设置 rem 函数
 function setRem() {
   // 当前页面屏幕分辨率相对于 1440宽的缩放比例，可根据自己需要修改
-  const scale = document.documentElement.clientWidth / 1440
+  const scale = document.documentElement.clientWidth / 1920
   // 设置页面根节点字体大小（“Math.min(scale, 3)” 指最高放大比例为3，可根据实际业务需求调整）
   document.documentElement.style.fontSize = `${baseSize * Math.min(scale, 3)}px`
 }

src/views/login.vue

@@ -229,66 +229,73 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
-  // height: 100%;
-  width: 1440px;
-  height: 810px;
+  height: 100%;
+  width: 1920px;
+  // height: 1080px;
   position: relative;
   background-size: cover;
 }
 .title {
-  width: 245px;
-  height: 30px;
-  font-size: 23px;
+  width: 327px;
+  height: 40px;
+  font-size: 30px;
   font-family: Microsoft YaHei-Regular, Microsoft YaHei;
   font-weight: 400;
   color: #1e2864;
   line-height: 0px;
-  margin-top: 78px;
-  margin-left: 65px;
+  margin-top: 104px;
+  margin-left: 87px;
   // letter-spacing: 63px;
   -webkit-background-clip: text;
   // -webkit-text-fill-color: transparent;
 }
 
 .login-form {
-  width: 375px;
-  height: 450px;
+  width: 500px;
+  height: 600px;
   background: #ffffff;
-  box-shadow: 0px 0px 10px 1px rgba(83, 83, 83, 0.16);
-  border-radius: 6px 6px 6px 6px;
+  box-shadow: 0px 0px 16px 1px rgba(83, 83, 83, 0.16);
+  border-radius: 10px 10px 10px 10px;
   opacity: 1;
   position: absolute;
-  left: 808px;
-  top: 180px;
+  left: 1078px;
+  top: 240px;
   .el-form-item {
-    width: 315px !important;
-    height: 38px;
+    width: 420px !important;
+    height: 50px;
     background: #ffffff;
-    border-radius: 5px 5px 5px 5px;
+    border-radius: 7px 7px 7px 7px;
     opacity: 1;
-    margin-left: 30px;
+    margin-left: 40px;
     .el-form-item__content{
+      height: 100%;
       .el-input{
-        input{
-          height: 38px;
-        }
+      height: 100%;
+      input{
+        height: 100%;
       }
     }
+    }
   }
   .input-icon {
-    width: 14px;
+    width: 20px;
+    height: 100%;
     margin-left: 2px;
-    line-height: 32px;
+    line-height: 50px;
+    use{
+      width: 20px;
+      height: 23.45px;
+    }
   }
   .el-button {
-    width: 315px !important;
-    height: 39px;
+    width: 420px !important;
+    height: 52px;
     background: #1e2864;
-    border-radius: 4px 4px 4px 4px;
+    border-radius: 5px 5px 5px 5px;
     margin-top:22px;
-    margin-bottom: 78px;
+    margin-bottom: 104px;
     color: #ffffff;
-    font-size: 15px;
+    font-size: 20px;
     border:none;
     opacity: 1;
   }
@@ -299,16 +306,14 @@ export default {
   color: #bfbfbf;
 }
 .login-code {
-  width: 83px;
-  height: 27px;
+  width: 133px;
+  height: 43px;
   display: inline-block;
-  height: 38px;
   float: right;
   img {
     width: 100%;
     height: 100% !important;
     cursor: pointer;
-    // vertical-align: middle;
   }
 }
 </style>