update 登录页

Web/src/assets/style/login.less

@@ -0,0 +1,71 @@
+@import (reference) './app.less';
+.yo-login {
+  position: fixed;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 100%;
+
+  background: url('~@/assets/image/login-bg.jpg') no-repeat center;
+  &::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 100%;
+
+    content: '';
+
+    background: fade(@black, 30%) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABZJREFUeNpiMLJ0+w8EDIwgAgQAAgwAUdAHrAFSJ6cAAAAASUVORK5CYII=);
+  }
+  &--placeholder {
+    position: absolute;
+    top: 50%;
+    left: 0;
+
+    width: 100%;
+    height: 0;
+    .container-sm {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+
+      height: 0;
+    }
+  }
+  .ant-form {
+    width: 300px;
+    padding: @padding-lg;
+
+    border-radius: @border-radius-base + 2px;
+    background: linear-gradient(45deg, @white, fade(@white, 80%));
+  }
+  .ant-form-item {
+    margin-bottom: 0;
+  }
+  /deep/.ant-form-item-label {
+    transition: @animation-duration-base;
+    transform: translate(0);
+    >label {
+      color: fade(@black, 40%);
+    }
+  }
+  &--label {
+    /deep/.ant-form-item-label {
+      transform: translate(11px, 28px);
+    }
+  }
+  /deep/.ant-input {
+    border-width: 0 0 @border-width-base 0 !important;
+    border-color: fade(@black, 10%);
+    background-color: transparent;
+  }
+  /deep/.ant-input:hover,
+  /deep/.ant-input:focus {
+    border-width: 0 0 @border-width-base 0 !important;
+    border-color: @primary-color;
+    box-shadow: none;
+  }
+}

Web/src/views/login/index.vue

@@ -1,25 +1,51 @@
 <template>
-  <a-form-model :model="form" @submit="handleSubmit" @submit.native.prevent layout="inline">
-    <a-form-model-item>
-      <a-input placeholder="Username" v-model="form.user">
-        <a-icon slot="prefix" style="color:rgba(0,0,0,.25)" type="user" />
-      </a-input>
-    </a-form-model-item>
-    <a-form-model-item>
-      <a-input placeholder="Password" type="password" v-model="form.password">
-        <a-icon slot="prefix" style="color:rgba(0,0,0,.25)" type="lock" />
-      </a-input>
-    </a-form-model-item>
-    <a-form-model-item>
-      <a-button
-        :disabled="form.user === '' || form.password === ''"
-        :loading="loading"
-        html-type="submit"
-        type="primary"
-      >Log in</a-button>
-    </a-form-model-item>
-  </a-form-model>
+  <div class="yo-login">
+    <div class="yo-login--placeholder">
+      <container mode="container-sm">
+        <a-form-model :model="form" @submit="handleSubmit" @submit.native.prevent>
+          <a-form-model-item
+            :class="{ 'yo-login--label': !focus.user && !form.user }"
+            :colon="false"
+            label="用户名"
+          >
+            <a-input
+              @blur="focus.user = false"
+              @focus="focus.user = true"
+              size="large"
+              v-model="form.user"
+            />
+          </a-form-model-item>
+          <a-form-model-item
+            :class="{ 'yo-login--label': !focus.password && !form.password }"
+            :colon="false"
+            label="密码"
+          >
+            <a-input-password
+              @blur="focus.password = false"
+              @focus="focus.password = true"
+              size="large"
+              v-model="form.password"
+            />
+          </a-form-model-item>
+          <a-form-model-item class="mt-lg">
+            <a-button
+              :disabled="form.user === '' || form.password === ''"
+              :loading="loading"
+              block
+              html-type="submit"
+              size="large"
+              type="primary"
+            >登录</a-button>
+          </a-form-model-item>
+        </a-form-model>
+      </container>
+    </div>
+  </div>
 </template>
+<style lang="less" scoped>
+@import '~@/assets/style/login';
+
+</style>
 <script>
 import { doLogin } from '@/common/login';
 
@@ -31,6 +57,10 @@ export default {
         user: '',
         password: '',
       },
+      focus: {
+        user: false,
+        password: false,
+      },
     };
   },
   methods: {
@@ -39,7 +69,7 @@ export default {
       doLogin({
         account: this.form.user,
         password: this.form.password,
-      }).finally(() => {
+      }).catch(() => {
         this.loading = false;
       });
     },