更新 login.vue

src/assets/js/mixin.js

@@ -16,7 +16,7 @@ export const userMixin = {
         principal: null,
         credential: null,
         captchaCode: null,
-        loginType: 1,
+        loginType: 2,
         plat: 2
       },
       loginDialog: false,
@@ -153,11 +153,10 @@ export const userMixin = {
         this.$message.error(error)
       }).finally(() => {
         this.userLogin = {
-          accountType: 1,
-          loginType: 1,
           principal: null,
           credential: null,
           captchaCode: null,
+          loginType: 2,
           plat: 1
         }
       })

src/components/layout/NavBar.vue

@@ -269,10 +269,18 @@ export default {
       }
     },
     // ****************************************************************************************************************
-    login() {
+    login1() {
       this.fetchPubkey()
       this.dialogVisible = true
     },
+    login() {
+      const path = '/login'
+      if (this.$route.path === path) {
+        this.$router.go(0)
+        return
+      }
+      this.$router.push(path)
+    },
     register() {
       window.open('//account.reghao.cn/login', '_blank')
     },

src/views/login.vue

@@ -1,17 +1,95 @@
 <template>
-  <div style="text-align: center;">
-    <h1>Login Page</h1>
-    <p>
-      <a href="/">Go home?</a>
-    </p>
-  </div>
+  <el-row class="movie-list">
+    <el-col :md="8" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+    </el-col>
+    <el-col :md="8" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+    </el-col>
+    <el-col :md="8" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
+      <el-row style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px; text-align: center">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>用户登录</span>
+          </div>
+          <div class="text item">
+            <el-form ref="form" :model="userLogin" label-width="80px">
+              <el-form-item label="帐号">
+                <el-input
+                  v-model="userLogin.principal"
+                  placeholder="请输入手机号或邮箱"
+                  style="padding-right: 1px"
+                  clearable
+                />
+              </el-form-item>
+              <el-form-item label="密码">
+                <el-input
+                  v-model="userLogin.credential"
+                  type="password"
+                  placeholder="请输入密码"
+                  style="padding-right: 1px"
+                />
+              </el-form-item>
+              <el-form-item label="图形验证码" label-width="90px">
+                <el-image :src="captchaCode" @click="getCaptcha" />
+                <el-input
+                  v-model="userLogin.captchaCode"
+                  placeholder="请输入图形验证码"
+                  style="width: 50%; padding-right: 1px"
+                />
+              </el-form-item>
+              <el-form-item>
+                <el-button
+                  type="primary"
+                  :loading="isLoading"
+                  @click.native="loginBtn"
+                >登 录</el-button>
+                <el-button type="plain" @click="register">注册/忘记密码?</el-button>
+              </el-form-item>
+            </el-form>
+          </div>
+        </el-card>
+      </el-row>
+    </el-col>
+  </el-row>
 </template>
 
 <script>
+import { userMixin } from 'assets/js/mixin'
+
 export default {
-  name: 'Login'
+  name: 'Login',
+  mixins: [userMixin],
+  data() {
+    return {
+    }
+  },
+  created() {
+    this.fetchPubkey()
+  },
+  methods: {
+    login() {
+      this.fetchPubkey()
+      this.dialogVisible = true
+    },
+    register() {
+      window.open('//account.reghao.cn/login', '_blank')
+    }
+  }
 }
 </script>
 
 <style>
+/*处于手机屏幕时*/
+@media screen and (max-width: 768px){
+  .movie-list {
+    padding-top: 8px;
+    padding-left: 0.5%;
+    padding-right: 0.5%;
+  }
+}
+
+.movie-list {
+  padding-top: 15px;
+  padding-left: 6%;
+  padding-right: 6%;
+}
 </style>