登录页修改

src/views/loginTest.vue

@@ -16,10 +16,10 @@
                   <img
                     src="../assets/imgs/user.png"
                     style="
-                      width: 26px;
-                      height: 26px;
+                      width: 24px;
+                      height: 24px;
                       vertical-align: middle;
-                      margin-bottom: 4px;
+                      margin: 18px 18px 18px 20px;
                     "
                   />
                 </i>
@@ -36,8 +36,10 @@
                   <img
                     src="../assets/imgs/locked.png"
                     style="
-                      width: 26px;
-                      height: 26px;
+                      width: 24px;
+                      height: 24px;
+                      margin-top: 18px;
+                      padding-left: 20px;
                       vertical-align: middle;
                       margin-bottom: 4px;
                     "
@@ -51,9 +53,10 @@
                 label="记住我"
                 name="remember"
                 v-model="loginForm.remember"
+                size="small"
               ></el-checkbox>
             </el-form-item>
-            <el-button type="primary" style="width: 100%" @click="loginBtn"
+            <el-button type="primary" class="register" @click="loginBtn"
               >登录</el-button
             >
           </el-form>
@@ -109,74 +112,118 @@ export default {
   height: 100%;
 }
 .longLineCharacter {
-  color: white;
-  font-size: 31px;
+  color: #237AEE;
+  font-size: 60px;
+  line-height: 90px;
+  font-weight: 500;
+  text-shadow: 2px 2px 4px rgba(21, 68, 195, 0.21);
   position: absolute;
-  width: 40%;
-  top: 21.9%;
-  left: 13%;
+  width: 924px;
+  height: 90px;
+  left: 553px;
+  top: 123px;
   letter-spacing: 10px;
 }
 .outerForm {
-  background: rgba(255, 255, 255, 0.2);
   border: 8px solid rgba(255, 255, 255, 0.3);
-  width: 24.2%;
-  top: 23%;
-  left: 60%;
-  right: 30%;
+  width: 550px;
+  height: 587px;
+  left: 1165px;
+  top: 302px;
+  background: #FFFFFF;
+  box-shadow: 4px 4px 31px rgba(40, 99, 156, 0.15);
   position: absolute;
   font-size: 16px;
 }
 .innerForm {
   background: white;
-  padding: 2em;
-  padding-bottom: 3.2em;
 }
 .titleText {
-  color: #1969e6;
-  font-weight: normal;
-  font-size: 24px;
-  padding: 18px;
-  padding-left: 0px;
-  padding-bottom: 10px;
+  color: #237AEE;
+  font-family: 'Source Han Sans CN';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 32px;
+  line-height: 48px;
+  padding: 60px 220px 12px 85px;
 }
 .line {
-  width: 100%;
+  width: 380px;
   height: 0.5px;
-  text-align: center;
-  border-top: solid #d8d7df;
-  padding-bottom: 39px;
+  border-top: solid #E5E5F0;
+  padding-bottom: 77px;
+  margin: auto;
 }
-.userName {
-  margin-bottom: 43px;
+
+::v-deep .el-input__inner{
+  height: 60px;
+  background-color: #F3F3FB;
 }
+
 ::v-deep .el-checkbox__label {
   color: #000;
   font-size: 16px;
 }
 ::v-deep .el-button--primary {
-  background-color: #237aee;
+  background-color: #0189FF;
   padding: 15px 20px;
+  height: 60px;
+  margin-left: 85px;
 }
 ::v-deep .el-button--primary span {
   color: #000;
 }
-::v-deep .el-input__prefix {
-  border-top-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-  left: 1px;
-  top: 1.49px;
-  height: 38px;
-  width: 39.5px;
-  background: #d4d4d4;
+::v-deep .el-checkbox__inner{
+  zoom: 120%;
+}
+::v-deep .el-input {
+  width: 380px;
 }
 ::v-deep .el-input--prefix .el-input__inner {
-  padding-left: 49px;
+  padding-left: 62px;
 }
 ::v-deep .remember > .el-form-item__content {
   line-height: 0px;
 }
+::v-deep .el-form-item {
+  text-align: center;
+  margin-bottom: 0;
+}
+::v-deep .el-input__suffix {/*眼睛位置*/
+  top: 4px;
+}
 ::v-deep .remember {
-  margin-bottom: 40px;
+  margin: 23px 150px 41px 382px;
+}
+::v-deep .el-checkbox__label {
+  font-family: 'Source Han Sans CN';
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+  color: #A3A3A3;
+}
+.checkboxs {
+  width: 100%;
+  text-align: right;
+}
+.userName {
+  margin-bottom: 38px;
+}
+.register {
+  width: 380px;
+  height: 60px;
+  background-color: #0189FF;
+}
+::v-deep .el-button--primary span {
+  font-family: 'Source Han Sans CN';
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 30px;
+  color: #fff;
+}
+::v-deep .el-form-item__error {
+  margin-top: 2px;
+  margin-left: 85px;
+  font-size: 12px;
 }
 </style>