update /login

src/components/layout/LoginBar.vue

@@ -0,0 +1,81 @@
+<template>
+  <el-row class="el-menu-demo">
+    <el-col :md="2">
+      <ul role="menubar" class="el-menu--horizontal el-menu">
+        <li role="menuitem" class="el-menu-item">
+          <a href="/" style="color: #007bff;text-decoration-line: none">
+            <img src="@/assets/img/icon/logo.png" class="logo" alt="img">
+            tnb
+          </a>
+        </li>
+      </ul>
+    </el-col>
+    <el-col :md="8">
+      <el-menu
+        mode="horizontal"
+      >
+        <el-menu-item index="1">
+          <a href="/video" style="text-decoration-line: none">
+            <span style="color: #007bff">视频</span>
+          </a>
+        </el-menu-item>
+        <el-menu-item index="2">
+          <a href="/shortvideo" style="text-decoration-line: none">
+            <span style="color: #007bff">短视频</span>
+          </a>
+        </el-menu-item>
+        <el-menu-item index="3">
+          <a href="/image" style="text-decoration-line: none">
+            <span style="color: #007bff">相册</span>
+          </a>
+        </el-menu-item>
+        <el-menu-item index="4">
+          <a href="/article" style="text-decoration-line: none">
+            <span style="color: #007bff">文章</span>
+          </a>
+        </el-menu-item>
+        <el-menu-item index="5">
+          <a href="/discover" style="text-decoration-line: none">
+            <span style="color: #007bff">发现</span>
+          </a>
+        </el-menu-item>
+      </el-menu>
+    </el-col>
+    <el-col :md="8">
+      <ul class="el-menu--horizontal el-menu">
+        <li class="el-menu-item">
+        </li>
+      </ul>
+    </el-col>
+    <el-col :md="6">
+      <ul class="el-menu--horizontal el-menu">
+        <li class="el-menu-item">
+        </li>
+      </ul>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+export default {
+  name: 'LoginBar',
+  data() {
+    return {
+    }
+  },
+  created() {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+@media screen and (max-width: 768px) {
+}
+
+.logo {
+  width: 30px;
+  position: relative;
+}
+</style>

src/router/index.js

@@ -516,12 +516,6 @@ const routes = [
         name: 'Vip',
         component: Vip,
         meta: { needAuth: false }
-      },
-      {
-        path: '*',
-        name: '404',
-        component: () => import('@/views/404.vue'),
-        meta: { needAuth: false }
       }
     ]
   },
@@ -530,6 +524,12 @@ const routes = [
     name: 'Login',
     component: () => import('@/views/login.vue'),
     meta: { needAuth: false }
+  },
+  {
+    path: '*',
+    name: '404',
+    component: () => import('@/views/404.vue'),
+    meta: { needAuth: false }
   }
 ]
 

src/views/login.vue

@@ -1,66 +1,77 @@
 <template>
-  <el-row class="movie-list">
-    <el-col :md="8" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px" />
-    <el-col :md="8" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px" />
-    <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-container>
+    <el-main>
+      <login-bar />
+      <router-view />
+      <el-row class="movie-list">
+        <el-col :md="8" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px" />
+        <el-col :md="8" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px" />
+        <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>
-    </el-col>
-  </el-row>
+    </el-main>
+  </el-container>
 </template>
 
 <script>
 import { userMixin } from 'assets/js/mixin'
+import LoginBar from 'components/layout/LoginBar'
 
 export default {
   name: 'Login',
+  components: {
+    LoginBar
+  },
   mixins: [userMixin],
   data() {
     return {
     }
   },
   created() {
+    document.title = '用户登录'
     this.fetchPubkey()
   },
   methods: {