refactor: 重构登录页UI

src/assets/images/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 448 512" data-v-fba6e5d0=""><path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-92.2 312.9c-63.4 0-85.4-28.6-97.1-64.1c-16.3-51-21.5-84.3-63-84.3c-22.4 0-45.1 16.1-45.1 61.2c0 35.2 18 57.2 43.3 57.2c28.6 0 47.6-21.3 47.6-21.3l11.7 31.9s-19.8 19.4-61.2 19.4c-51.3 0-79.9-30.1-79.9-85.8c0-57.9 28.6-92 82.5-92c73.5 0 80.8 41.4 100.8 101.9c8.8 26.8 24.2 46.2 61.2 46.2c24.9 0 38.1-5.5 38.1-19.1c0-19.9-21.8-22-49.9-28.6c-30.4-7.3-42.5-23.1-42.5-48c0-40 32.3-52.4 65.2-52.4c37.4 0 60.1 13.6 63 46.6l-36.7 4.4c-1.5-15.8-11-22.4-28.6-22.4c-16.1 0-26 7.3-26 19.8c0 11 4.8 17.6 20.9 21.3c32.7 7.1 71.8 12 71.8 57.5c.1 36.7-30.7 50.6-76.1 50.6z" fill="#316c72"></path></svg>

src/views/login/index.vue

@@ -1,6 +1,40 @@
 <template>
   <div class="login-page">
-    <div class="form-wrapper">
+    <div class="wrapper">
+      <div class="left">
+        <img src="@/assets/images/login_banner.png" height="380" alt="login_banner" />
+      </div>
+
+      <div class="form-wrapper">
+        <h5 class="brand">
+          <img src="@/assets/images/logo.svg" width="45" mr-15 alt="logo" />
+          {{ title }}
+        </h5>
+        <div class="form-item" mt-35>
+          <input
+            v-model="loginInfo.name"
+            autofocus
+            type="text"
+            class="input"
+            placeholder="username"
+            @keydown.enter="handleLogin"
+          />
+        </div>
+        <div class="form-item" mt-35>
+          <input
+            v-model="loginInfo.password"
+            type="password"
+            class="input"
+            placeholder="password"
+            @keydown.enter="handleLogin"
+          />
+        </div>
+        <div class="form-item" mt-35>
+          <button class="submit-btn" @click="handleLogin">登录</button>
+        </div>
+      </div>
+    </div>
+    <!-- <div class="form-wrapper">
       <h2 class="title">{{ title }}</h2>
       <div class="form-item" mt-20>
         <input
@@ -24,7 +58,7 @@
       <div class="form-item" mt-20>
         <button class="submit-btn" @click="handleLogin">登录</button>
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -84,119 +118,74 @@ async function handleLogin() {
 </script>
 
 <style lang="scss" scoped>
-@property --perA {
-  syntax: '<percentage>';
-  inherits: false;
-  initial-value: 75%;
-}
-
-@property --perB {
-  syntax: '<percentage>';
-  inherits: false;
-  initial-value: 99%;
-}
-
-@property --perC {
-  syntax: '<percentage>';
-  inherits: false;
-  initial-value: 15%;
-}
-
-@property --perD {
-  syntax: '<percentage>';
-  inherits: false;
-  initial-value: 16%;
-}
-
-@property --perE {
-  syntax: '<percentage>';
-  inherits: false;
-  initial-value: 86%;
-}
-
-@property --angle {
-  syntax: '<angle>';
-  inherits: false;
-  initial-value: 0deg;
-}
 .login-page {
   height: 100%;
-  background-color: #e1e8ee;
+  background-image: url(@/assets/images/login_bg.jpg);
+  background-size: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
-  background-image: radial-gradient(
-      circle at var(--perE) 7%,
-      rgba(40, 40, 40, 0.04) 0%,
-      rgba(40, 40, 40, 0.04) 50%,
-      rgba(200, 200, 200, 0.04) 50%,
-      rgba(200, 200, 200, 0.04) 100%
-    ),
-    radial-gradient(
-      circle at var(--perC) var(--perD),
-      rgba(99, 99, 99, 0.04) 0%,
-      rgba(99, 99, 99, 0.04) 50%,
-      rgba(45, 45, 45, 0.04) 50%,
-      rgba(45, 45, 45, 0.04) 100%
-    ),
-    radial-gradient(
-      circle at var(--perA) var(--perB),
-      rgba(243, 243, 243, 0.04) 0%,
-      rgba(243, 243, 243, 0.04) 50%,
-      rgba(37, 37, 37, 0.04) 50%,
-      rgba(37, 37, 37, 0.04) 100%
-    ),
-    linear-gradient(var(--angle), #22deed, #8759d7);
-  animation: move 30s infinite alternate linear;
+}
 
-  @keyframes move {
-    100% {
-      --perA: 85%;
-      --perB: 49%;
-      --perC: 45%;
-      --perD: 39%;
-      --perE: 70%;
-      --angle: 360deg;
-    }
+.wrapper {
+  width: 100%;
+  max-width: 1020px;
+  box-shadow: 1.5px 3.99px 27px 0px rgb(0 0 0 / 10%);
+  background-color: rgba(255, 255, 255, 0.3);
+
+  display: flex;
+  .left {
+    padding: 40px;
+    border-right: 1px solid #cccccc5e;
   }
 }
 
 .form-wrapper {
-  text-align: center;
-  padding: 40px 50px;
-  border-radius: 15px;
-  background-color: rgba(#fff, 0.2);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  .brand {
+    width: 100%;
+    padding: 15px;
+    color: #6a6a6a;
+    font-size: 24px;
+    font-weight: normal;
+    text-align: center;
 
-  .title {
-    font-size: 22px;
-    color: #f3f3f3;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
-
   .form-item {
-    width: 240px;
+    width: 100%;
+    max-width: 360px;
+    height: 50px;
     input {
       width: 100%;
-      height: 40px;
-      padding: 0 15px;
+      height: 100%;
+      padding: 0 20px;
+      border: 1px solid #6a6a6a;
       border-radius: 5px;
-
-      font-size: 14px;
-      color: #333;
-      transition: 0.3s;
+      color: $primaryColor;
+      font-size: 16px;
+      transition: 0.5s;
       &:focus {
-        box-shadow: 0 0 5px #8759d7;
+        border-color: $primaryColor;
+        box-shadow: 0 0 5px $primaryColor;
       }
     }
     button {
       width: 100%;
-      height: 40px;
+      height: 100%;
 
       color: #fff;
-      font-size: 14px;
+      font-size: 16px;
       font-weight: bold;
       border: none;
       border-radius: 5px;
-      background-color: #6683d2;
+      background-color: $primaryColor;
 
       cursor: pointer;
       transition: all 0.3s;