优化系统登录界面

.env.development

@@ -1,5 +1,5 @@
 # 租户码
-VUE_APP_TENANT=default
+VUE_APP_TENANT=8b9ec443
 
 ## websocket地址
 #VUE_APP_WEBSOCKET_URL=ws://192.168.0.252:8899/ws
@@ -11,7 +11,7 @@ VUE_APP_TENANT=default
 #VUE_APP_ParentPath=dashoo.labsop.lims_latest_opms_parent
 
 # websocket地址
-VUE_APP_WEBSOCKET_URL=ws://127.0.0.1:8899/ws
+VUE_APP_WEBSOCKET_URL=ws://39.105.105.147:9188/ws
 # GateWay地址
 VUE_APP_MicroSrvProxy_API=http://127.0.0.1:9981/
 # 登录验证微服务名称

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "author": "chuzhixin",
   "scripts": {
-    "serve": "nvm use v14.21.3 && vue-cli-service serve --mode development",
+    "serve": "vue-cli-service serve --mode development",
     "build:dev": "vue-cli-service build --mode development",
     "build": "vue-cli-service build -mode production",
     "build:test": "vue-cli-service build --mode test",

src/views/login/index.vue

@@ -1,69 +1,57 @@
 <template>
   <div class="login-container">
-    <header>
-      <div class="container">
+    <div class="login-card">
+      <div class="login-logo">
         <img alt="" :src="require('@/assets/login_images/login_top.png')" />
       </div>
-    </header>
-    <div class="content">
-      <div class="container">
-        <div class="login">
-          <div class="left"></div>
-          <el-form ref="form" class="login-form" label-position="left" :model="form" :rules="rules">
-            <div class="title">{{ translateTitle('登录') }}</div>
-            <!-- <div class="title-tips">{{ translateTitle('欢迎来到') }}{{ title }}！</div> -->
-            <el-form-item prop="username" style="margin-top: 40px">
-              <el-input
-                v-model.trim="form.username"
-                v-focus
-                :placeholder="translateTitle('请输入用户名')"
-                tabindex="1"
-                type="text">
-                <template #prefix>
-                  <vab-icon icon="user-line" />
-                </template>
-              </el-input>
-            </el-form-item>
-            <el-form-item prop="password">
-              <el-input
-                :key="passwordType"
-                ref="password"
-                v-model.trim="form.password"
-                :placeholder="translateTitle('请输入密码')"
-                tabindex="2"
-                :type="passwordType"
-                @keyup.enter.native="handleLogin">
-                <template #prefix>
-                  <vab-icon icon="lock-line" />
-                </template>
-                <template v-if="passwordType === 'password'" #suffix>
-                  <vab-icon class="show-password" icon="eye-off-line" @click="handlePassword" />
-                </template>
-                <template v-else #suffix>
-                  <vab-icon class="show-password" icon="eye-line" @click="handlePassword" />
-                </template>
-              </el-input>
-            </el-form-item>
-            <div style="float: right">
-              <el-checkbox v-model="rememenber" />
-              记住密码
-            </div>
-            <el-button class="login-btn" :loading="loading" type="primary" @click="handleLogin">
-              {{ translateTitle('登录') }}
-            </el-button>
-          </el-form>
+      <el-form ref="form" class="login-form" label-position="left" :model="form" :rules="rules">
+        <el-form-item prop="username">
+          <el-input
+            v-model.trim="form.username"
+            v-focus
+            :placeholder="translateTitle('请输入用户名')"
+            tabindex="1"
+            type="text">
+            <template #prefix>
+              <vab-icon icon="user-line" />
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item prop="password">
+          <el-input
+            :key="passwordType"
+            ref="password"
+            v-model.trim="form.password"
+            :placeholder="translateTitle('请输入密码')"
+            tabindex="2"
+            :type="passwordType"
+            @keyup.enter.native="handleLogin">
+            <template #prefix>
+              <vab-icon icon="lock-line" />
+            </template>
+            <template v-if="passwordType === 'password'" #suffix>
+              <vab-icon class="show-password" icon="eye-off-line" @click="handlePassword" />
+            </template>
+            <template v-else #suffix>
+              <vab-icon class="show-password" icon="eye-line" @click="handlePassword" />
+            </template>
+          </el-input>
+        </el-form-item>
+        <div class="login-options">
+          <el-checkbox v-model="rememenber" class="white-checkbox">
+            {{ translateTitle('保持登录') }}
+          </el-checkbox>
+          <!-- <a class="forget-link" @click.prevent>{{ translateTitle('忘记密码？') }}</a> -->
         </div>
-      </div>
+        <el-button class="login-btn" :loading="loading" type="primary" @click="handleLogin">
+          {{ translateTitle('登录') }}
+        </el-button>
+      </el-form>
     </div>
-    <footer>
-      <div class="container">
-        <img alt="" :src="require('@/assets/login_images/login_bottom.png')" />
-        <div class="links">
-          <a class="pd" href="http://www.dashoo.cn" target="_blank">关于大数华创</a>
-          <router-link class="pd" target="_blank" :to="{ path: '/disclaimer' }">免责声明</router-link>
-          <router-link class="pd" target="_blank" :to="{ path: '/policy' }">隐私政策</router-link>
-        </div>
-      </div>
+    <footer class="login-footer">
+      <a class="pd" href="http://www.dashoo.cn" target="_blank">关于大数华创</a>
+      <router-link class="pd" target="_blank" :to="{ path: '/disclaimer' }">免责声明</router-link>
+      <router-link class="pd" target="_blank" :to="{ path: '/policy' }">隐私政策</router-link>
     </footer>
   </div>
 </template>
@@ -186,154 +174,138 @@
 
 <style lang="scss" scoped>
   .login-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100vw;
     height: 100vh;
+    min-width: 300px;
+    min-height: 700px;
+    overflow: hidden;
+    background: linear-gradient(110deg, rgba(74, 85, 104, 0.28) 0.26%, rgba(58, 66, 79, 0.35) 97.78%),
+      url('~@/assets/login_images/background.jpg') center center no-repeat;
     background-size: cover;
 
-    .container {
-      width: 1160px;
-      height: 100%;
-      margin: 0 auto;
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      z-index: 0;
+      pointer-events: none;
+      background: radial-gradient(
+        circle at center,
+        rgba(13, 24, 43, 0.2) 0%,
+        rgba(13, 24, 43, 0.08) 36%,
+        rgba(13, 24, 43, 0) 68%
+      );
     }
 
-    header {
-      height: 100px;
-      background: #fff;
-
-      .container {
-        display: flex;
-        align-items: center;
-      }
+    .login-card {
+      position: relative;
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      width: 440px;
+      padding: 40px 40px 48px;
+      border-radius: 32px;
+      border: 1px solid rgba(255, 255, 255, 0.55);
+      background: rgba(255, 255, 255, 0.22);
+      box-shadow: 0 22px 60px rgba(17, 29, 49, 0.24);
+      backdrop-filter: blur(24px);
+      -webkit-backdrop-filter: blur(24px);
     }
 
-    footer {
-      height: 130px;
-      background: #fff;
-
-      .container {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-
-        .links a {
-          color: #6e717c;
-          font-size: 18px;
-          letter-spacing: 1px;
-          padding-left: 10px;
-
-          & + a {
-            margin-left: 10px;
-            border-left: 1px solid #6e717c;
-          }
-        }
+    .login-logo {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 32px;
+
+      img {
+        height: 62px;
+        max-width: 100%;
+        object-fit: contain;
       }
     }
 
-    .content {
+    .login-footer {
+      z-index: 1;
+      position: absolute;
+      bottom: 24px;
+      left: 0;
+      width: 100%;
       display: flex;
-      height: calc(100% - 230px);
-      background: url('~@/assets/login_images/login_bgd.png') center center fixed no-repeat;
-      background-size: cover;
-
-      .container {
-        display: flex;
-        align-items: center;
-      }
-
-      .login {
-        width: 100%;
-        height: 580px;
-        display: flex;
-        border-radius: 32px;
-        overflow: hidden;
-        background: #fff;
-        box-shadow: 0px 3px 20px 1px rgba(0, 0, 0, 0.16);
-      }
+      align-items: center;
+      justify-content: center;
+      gap: 10px;
+
+      .pd {
+        color: rgba(255, 255, 255, 0.7);
+        font-size: 14px;
+        text-decoration: none;
+        cursor: pointer;
+        padding: 0 10px;
+
+        & + .pd {
+          border-left: 1px solid rgba(255, 255, 255, 0.4);
+        }
 
-      .left {
-        width: 60%;
-        height: 100%;
-        background: url('~@/assets/login_images/login.png') center center no-repeat;
-        background-size: 90%;
+        &:hover {
+          color: rgba(255, 255, 255, 0.9);
+        }
       }
     }
   }
 
   .login-form {
-    width: 40%;
-    padding: 60px;
-    background: #ecf0f6;
-
-    .title {
-      font-size: 32px;
-      font-weight: bold;
-      color: $base-color-black;
-      text-align: center;
-      margin-bottom: 80px;
-    }
+    width: 100%;
 
-    .title-tips {
-      margin-top: 29px;
-      font-size: 26px;
-      font-weight: 400;
-      color: $base-color-black;
-    }
-
-    .login-btn {
-      display: inherit;
+    .login-options {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
       width: 100%;
-      height: 50px;
-      margin-top: 50px;
-      border: 0;
-      border-radius: 99px;
-
-      &:hover {
-        opacity: 0.9;
-      }
+      margin-top: 4px;
+      margin-bottom: 6px;
+    }
 
-      .forget-passwordword {
-        width: 100%;
-        margin-top: 40px;
-        text-align: left;
-
-        .forget-password {
-          width: 129px;
-          height: 19px;
-          font-size: 20px;
-          font-weight: 400;
-          color: rgba(92, 102, 240, 1);
-        }
-      }
+    .white-checkbox {
+      color: #fff;
     }
 
-    .tips {
-      margin-bottom: 10px;
-      font-size: $base-font-size-default;
-      color: $base-color-white;
+    .forget-link {
+      color: rgba(255, 255, 255, 0.8);
+      font-size: 16px;
+      line-height: 22px;
+      cursor: pointer;
+      text-decoration: none;
 
-      span {
-        &:first-of-type {
-          margin-right: 16px;
-        }
+      &:hover {
+        color: #fff;
       }
     }
 
-    .title-container {
-      position: relative;
+    .login-btn {
+      display: block;
+      width: 100%;
+      height: 48px;
+      margin-top: 40px;
+      font-size: 18px;
+      font-weight: 600;
+      color: #fff;
+      background: #2173df;
+      border: 0;
+      border-radius: 10px;
 
-      .title {
-        margin: 0 auto 40px auto;
-        font-size: 34px;
-        font-weight: bold;
-        color: $base-color-blue;
-        text-align: center;
+      &:hover {
+        opacity: 0.9;
       }
     }
 
     i {
-      position: absolute;
-      top: 8px;
-      left: 5px;
-      z-index: $base-z-index;
       font-size: 16px;
       color: #d7dee3;
       cursor: pointer;
@@ -341,9 +313,6 @@
     }
 
     .show-password {
-      position: absolute;
-      right: 25px;
-      left: -35px;
       font-size: 16px;
       color: #d7dee3;
       cursor: pointer;
@@ -353,24 +322,25 @@
     ::v-deep {
       .el-form-item {
         padding-right: 0;
-        margin: 20px 0;
-        color: #454545;
+        margin: 10px 0;
+        margin-bottom: 18px;
+        color: #fff;
         background: transparent;
         border: 1px solid transparent;
-        border-radius: 2px;
+        border-radius: 10px;
 
         &__content {
-          min-height: $base-input-height;
-          line-height: $base-input-height;
+          min-height: 48px;
+          line-height: 48px;
         }
 
         &__error {
           position: absolute;
           top: 100%;
-          left: 18px;
-          font-size: $base-font-size-small;
+          left: 0;
+          font-size: 12px;
           line-height: 18px;
-          color: $base-color-red;
+          color: #f56c6c;
         }
       }
 
@@ -380,9 +350,43 @@
         input {
           height: 48px;
           padding-left: 35px;
-          font-size: $base-font-size-default;
-          line-height: 58px;
-          border: 0;
+          font-size: 16px;
+          line-height: 48px;
+          color: #202327;
+          background: #fff;
+          border: none;
+          border-radius: 10px;
+
+          &::placeholder {
+            color: #a8abb2;
+          }
+        }
+
+        .el-input__prefix {
+          color: #a8abb2;
+        }
+      }
+
+      .el-checkbox {
+        color: #fff;
+
+        .el-checkbox__label {
+          color: #fff;
+          font-size: 16px;
+        }
+
+        .el-checkbox__inner {
+          background: transparent;
+          border-color: rgba(255, 255, 255, 0.6);
+        }
+
+        &.is-checked .el-checkbox__inner {
+          background: #2173df;
+          border-color: #2173df;
+        }
+
+        &.is-checked .el-checkbox__label {
+          color: #fff;
         }
       }
     }