登录界面样式修改

src/App.vue

@@ -63,4 +63,8 @@
   #nprogress .bar {
     background: var(--el-color-primary);
   }
+  @font-face {
+    font-family: 'YouSheBiaoTiHei';
+    src: url('@/assets/font/YouSheBiaoTiHei-2.ttf');
+  }
 </style>

src/views/login/LoginForm2.vue

@@ -86,14 +86,15 @@
       <div class="flex-initial">
         <el-checkbox v-model:checked="autoLogin">自动登录</el-checkbox>
       </div>
-      <!-- <div class="flex-initial order-last">
-        <a href="javascript:">忘记密码</a>
-      </div> -->
     </div>
+    <!-- <div class="forget">
+      <a href="javascript:">忘记密码</a>
+    </div> -->
 
-    <el-form-item :show-label="false">
+    <el-form-item class="login-btn" :show-label="false">
       <el-button
         class="w-full"
+        style="background-color: rgb(51, 51, 51); border: none"
         type="primary"
         @click="handleSubmit"
         size="large"
@@ -277,12 +278,16 @@
 
 <style lang="scss" scoped>
   .forget {
-    margin-bottom: 16px;
-    margin-top: -10px;
+    margin: 0px 10px 20px 10px;
   }
   .login-form {
     :deep(.el-input) {
       --el-input-border-radius: 20px !important;
     }
   }
+  .login-btn {
+    :hover {
+      color: rgb(24, 144, 255);
+    }
+  }
 </style>

src/views/login/newLogin2.vue

@@ -1,27 +1,18 @@
 <template>
   <div class="account">
     <div class="account-container">
+      <div class="account-wrap-logo">
+        <img src="@/assets/images/login/comnova-EYES2.png" alt="" />
+      </div>
       <div class="account-wrap-login">
         <div class="login-pic">
           <div>
-            <img src="~@/assets/images/login-pic.png" />
+            <img src="~@/assets/images/login/login-pic.png" />
           </div>
         </div>
         <div class="login-form">
           <div class="login-form-container">
-            <div class="account-top">
-              <div class="account-top-logo">
-                <img src="~@/assets/images/logo.png" alt="" />
-                <span class="project-title">Cloud Admin</span>
-              </div>
-              <div class="account-top-desc">用户管理平台</div>
-            </div>
-            <!-- <div class="login-form-title">
-            <el-space>
-              <el-button round>登录</el-button>
-              <el-button type="primary" round>注册</el-button>
-            </el-space>
-          </div> -->
+            <div class="account-top"> 欢迎您进入<br />安全管控开放平台 </div>
             <LoginForm v-if="tab === 'login'" ref="LoginFormRef" @go-register="changeGoRegister" />
             <RegisterForm v-else ref="RegisterFormRef" @back-login="changeBackLogin" />
           </div>
@@ -58,20 +49,25 @@
       display: flex;
       flex-wrap: wrap;
       justify-content: center;
-      align-items: center;
       padding: 15px;
-      background: #9053c7;
-      background: -webkit-linear-gradient(-135deg, #c850c0, #4158d0);
-      background: -o-linear-gradient(-135deg, #c850c0, #4158d0);
-      background: -moz-linear-gradient(-135deg, #c850c0, #4158d0);
-      background: linear-gradient(-135deg, #c850c0, #4158d0);
+      background: #fff;
+      // background: -webkit-linear-gradient(-135deg, #c850c0, #4158d0);
+      // background: -o-linear-gradient(-135deg, #c850c0, #4158d0);
+      // background: -moz-linear-gradient(-135deg, #c850c0, #4158d0);
+      // background: linear-gradient(-135deg, #c850c0, #4158d0);
     }
 
+    &-wrap-logo {
+      width: 1271px;
+      @media (max-width: 1271px) {
+        width: 100%;
+      }
+    }
     &-wrap-login {
-      width: 960px;
+      width: 1271px;
       height: 554px;
       background: #fff;
-      border-radius: 10px;
+      // border-radius: 10px;
       overflow: hidden;
       display: flex;
       flex-wrap: wrap;
@@ -79,10 +75,9 @@
       padding: 30px 95px 33px 95px;
       .login-pic {
         display: flex;
-        align-items: center;
-        flex-direction: column;
-        justify-content: center;
-
+        // align-items: center;
+        // flex-direction: column;
+        // justify-content: center;
         img {
           max-width: 100%;
         }
@@ -102,19 +97,32 @@
         }
       }
 
-      @media (max-width: 991px) {
+      @media (max-width: 1271px) {
+        padding: 30px 0px 33px 0px;
+        justify-content: center;
+      }
+      @media (max-width: 1010px) {
         .login-pic {
           display: none;
         }
 
         .login-form {
-          width: 100%;
+          width: min(100%, 350px);
           margin: auto;
         }
       }
 
       .account-top {
         text-align: center;
+        font-size: 46px;
+        font-family: YouSheBiaoTiHei;
+        color: #1890ff;
+        line-height: 60px;
+        margin-bottom: 60px;
+
+        @media (max-width: 400px) {
+          font-size: 40px;
+        }
 
         &-logo {
           text-align: center;
@@ -144,12 +152,12 @@
       }
     }
 
-    @media (max-width: 640px) {
-      &-wrap-login {
-        width: 100%;
-        padding: 30px;
-        height: auto;
-      }
-    }
+    // @media (max-width: 640px) {
+    //   &-wrap-login {
+    //     width: 100%;
+    //     padding: 30px;
+    //     height: auto;
+    //   }
+    // }
   }
 </style>