登录页面修改

src/views/login/index.vue

@@ -3,11 +3,11 @@
     <div class="view-account-header"></div>
     <div class="view-account-container">
       <div class="view-account-top">
-        <div class="text-2xl">
+        <div>
           <!-- <img :src="websiteConfig.loginImage" alt="" /> -->
-          Admin Template
+          易数通数据平台
         </div>
-        <div class="view-account-top-desc">中后台解决方案</div>
+        <!-- <div class="view-account-top-desc">中后台解决方案</div> -->
       </div>
       <div class="view-account-form">
         <el-form ref="formRef" :model="formInline" :rules="rules" size="large">
@@ -40,17 +40,7 @@
             </el-input>
           </el-form-item>
           <el-form-item>
-            <div class="w-full flex justify-between">
-              <div class="flex-initial">
-                <el-checkbox v-model="formInline.autoLogin">自动登录</el-checkbox>
-              </div>
-              <div class="flex-initial order-last">
-                <a href="javascript:">忘记密码</a>
-              </div>
-            </div>
-          </el-form-item>
-          <el-form-item>
-            <el-button class="w-full" type="primary" @click="handleLogin" :loading="loginLoading"
+            <el-button class="login-button" type="primary" @click="handleLogin" :loading="loginLoading"
               >登录</el-button
             >
           </el-form-item>
@@ -173,18 +163,24 @@
     flex-direction: column;
     height: 100vh;
     overflow: auto;
+    background: #e8e8e8;
 
     &-container {
-      flex: 1;
-      padding: 32px 12px;
-      max-width: 384px;
-      min-width: 320px;
-      margin: 0 auto;
+      max-width: 450px;
+      background: #F8F9FD;
+      background: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgb(244, 247, 251) 100%);
+      border-radius: 40px;
+      padding: 25px 55px;
+      border: 5px solid rgb(255, 255, 255);
+      box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 30px 30px -20px;
+      margin: auto;
     }
 
     &-top {
-      padding: 32px 0;
       text-align: center;
+      font-weight: 900;
+      font-size: 30px;
+      color: rgb(16, 137, 211);
 
       &-desc {
         font-size: 14px;
@@ -204,6 +200,51 @@
       }
     }
   }
+  .view-account-form {
+    margin-top: 20px;
+    :deep(.el-input__wrapper) {
+      width: 410px;
+      background: white;
+      border: none;
+      padding: 15px 20px;
+      border-radius: 20px;
+      margin-top: 15px;
+      box-shadow: #cff0ff 0px 10px 10px -5px;
+      border-inline: 2px solid transparent;
+      // &::-moz-placeholder {
+      //   color: rgb(170, 170, 170);
+      // }
+      // &::placeholder {
+      //   color: rgb(170, 170, 170);
+      // }
+      // &:focus {
+      //   outline: none;
+      //   border-inline: 2px solid #12B1D1;
+      // }
+    }
+  }
+  .login-button {
+    display: block;
+    width: 100%;
+    font-weight: bold;
+    background: linear-gradient(45deg, rgb(16, 137, 211) 0%, rgb(18, 177, 209) 100%);
+    color: white;
+    padding-block: 15px;
+    height: 50px !important;
+    margin: 20px auto;
+    border-radius: 20px;
+    box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 20px 10px -15px;
+    border: none;
+    transition: all 0.2s ease-in-out;
+    &:hover {
+      transform: scale(1.03);
+      box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 23px 10px -20px;
+    }
+    &:active {
+      transform: scale(0.95);
+      box-shadow: rgba(133, 189, 215, 0.8784313725) 0px 15px 10px -10px;
+    }
+  }
   @media (min-width: 768px) {
     .view-account {
       background-image: url('../../assets/images/login.svg');
@@ -216,4 +257,5 @@
       padding: 32px 0 24px 0;
     }
   }
+  
 </style>