✨优化登录页显示效果

Author: chuzhixin

package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "ant-design-vue": "^2.0.0-beta.10",
     "axios": "^0.20.0",
+    "clipboard": "^2.0.6",
     "core-js": "^3.6.5",
     "dayjs": "^1.9.1",
     "js-cookie": "^3.0.0-rc.1",
@@ -34,13 +35,13 @@
     "body-parser": "^1.19.0",
     "chalk": "^4.1.0",
     "chokidar": "^3.4.2",
-    "compression-webpack-plugin": "^6.0.2",
-    "eslint": "^7.10.0",
+    "compression-webpack-plugin": "^6.0.3",
+    "eslint": "^7.11.0",
     "eslint-plugin-prettier": "^3.1.4",
     "eslint-plugin-vue": "^7.0.1",
     "filemanager-webpack-plugin": "^3.0.0-alpha.1",
     "less": "^3.13.1-alpha.1",
-    "less-loader": "^7.0.1",
+    "less-loader": "^7.0.2",
     "lint-staged": "^10.4.0",
     "prettier": "^2.1.2",
     "stylelint": "^13.7.2",

src/views/login/index.vue

@@ -4,9 +4,8 @@
       <a-col :xs="24" :md="11" :sm="24" :lg="14" :xl="14"></a-col>
       <a-col :xs="24" :sm="24" :md="12" :lg="9" :xl="6">
         <div class="login-container-form">
-          <div class="login-container-title">
-            {{ title }}
-          </div>
+          <div class="login-container-hello">hello!</div>
+          <div class="login-container-title">欢迎来到 {{ title }}</div>
           <a-form :model="form" @submit="handleSubmit" @submit.prevent>
             <a-form-item>
               <a-input v-model:value="form.username" placeholder="Username">
@@ -34,17 +33,17 @@
               >
                 登录
               </a-button>
-              <div class="login-container-tips">
-                基于vue{{ dependencies['vue'] }}
-                + ant-design-vue
-                {{ dependencies['ant-design-vue'] }}开发
-              </div>
             </a-form-item>
           </a-form>
         </div>
       </a-col>
       <a-col :xs="24" :md="11" :sm="24" :lg="14" :xl="14"></a-col>
     </a-row>
+    <div class="login-container-tips">
+      基于vue{{ dependencies['vue'] }}
+      + ant-design-vue
+      {{ dependencies['ant-design-vue'] }}开发
+    </div>
   </div>
 </template>
 <script>
@@ -123,15 +122,20 @@
       border-radius: 10px;
       box-shadow: 0 2px 8px 0 rgba(7, 17, 27, 0.06);
     }
+    &-hello {
+      font-size: 32px;
+      color: #fff;
+    }
     &-title {
       margin-bottom: 30px;
-      font-size: 28px;
-      font-weight: bold;
+      font-size: 20px;
       color: #fff;
-      text-align: center;
     }
     &-tips {
-      margin-top: 10px;
+      position: fixed;
+      bottom: @vab-margin;
+      width: 100%;
+      height: 40px;
       color: rgba(255, 255, 255, 0.856);
       text-align: center;
     }