feat: 登录页

src/router/index.js

@@ -1,8 +1,17 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 
+import { message } from 'element-ui'
+
 Vue.use(Router)
 
+// 解决ElementUi导航栏中的vue-router在3.0版本以上重复点菜单报错问题
+const originalPush = Router.prototype.push
+
+Router.prototype.push = function push(location) {
+  return originalPush.call(this, location).catch(err => err)
+}
+
 const router = new Router({
   routes: [
     {
@@ -37,8 +46,43 @@ const router = new Router({
           component: () => import('../components/shopInfo.vue')
         }
       ]
+    },
+    {
+      path: '/login',
+      name: 'login',
+      component: () => import('../views/login.vue'),
+      title: '登录',
+      authority: false
+    },
+    {
+      path: '/resetPassword',
+      name: 'resetPassword',
+      component: () => import('../views/resetPassword.vue'),
+      title: '重置密码',
+      authority: false
     }
   ]
 })
 
+router.beforeEach((to, from, next) => {
+  console.log(to)
+  if ( to.path === '/login' ) {
+    next()
+  }else {
+    const token = localStorage.getItem('token') || null;
+    if ( token ) {
+      next()
+    }else if ( to.path !== '/resetPassword' ){
+      message({
+        message: '请先登录',
+        type: 'error',
+        duration: 1.5 * 1000
+      })
+      router.push('/login')
+    }else {
+      next()
+    }
+  }
+})
+
 export default router

src/views/login.vue

@@ -0,0 +1,201 @@
+<template>
+  <div class="login">
+    <div class="login-bg" data-title="登录"></div>
+    <img src="../../static/image/login-logo.png" class="login-logo" />
+    <div class="login-box">
+      <div class="login-content">
+        <div class="top-icon">
+          <img src="../../static/image/login-icon.png" />
+        </div>
+        <div class="pass-code">
+          <div class="item" :class="activeIndex == 1 ? 'active' : ''">密码登录</div>
+          <div class="item" :class="activeIndex == 2 ? 'active' : ''">验证码登录</div>
+        </div>
+        <div>
+          <!-- 密码登录 -->
+          <div class="login-password" v-if="activeIndex == 1">
+            <div class="pass-item">
+              <img src="../../static/image/phone-icon.png" class="phone-icon" />
+              <el-input placeholder="请输入手机号" class="input-phone" :maxlength="11" />
+            </div>
+            <div class="pass-item">
+              <img src="../../static/image/lock-icon.png" class="lock-icon" />
+              <el-input placeholder="用户密码" class="input-phone" type="password" />
+            </div>
+          </div>
+          <!-- 验证码登录 -->
+          <div class="login-password" v-else>
+            <div class="pass-item">
+              <img src="../../static/image/phone-icon.png" class="phone-icon" />
+              <el-input placeholder="请输入手机号" class="input-phone" :maxlength="11" />
+            </div>
+            <div class="pass-item">
+              <img src="../../static/image/code-icon.png" class="phone-icon" />
+              <el-input placeholder="验证码" class="input-phone" type="password" />
+              <div class="get-code">获取短信验证码</div>
+            </div>
+          </div>
+        </div>
+        <div class="forgot-pass">
+          <span>忘记密码？</span>
+        </div>
+        <div class="login-btn">登录</div>
+        <div class="xie-yi">
+          登录注册即同意<a target="_blank" href="http://h5.liebaoai.cn/service.html">《用户协议》</a>与<a target="_blank" href="http://h5.liebaoai.cn/privacy.html">《隐私政策》</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        activeIndex: 1
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  /deep/ .el-input__inner {
+    border: none !important;
+  }
+  .login {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    .login-bg {
+      position: fixed;
+      height: 100%;
+      width: 100%;
+      background-size: cover;
+      background-attachment: fixed;
+      background: url("/static/image/login-bg.png") no-repeat #010836;
+    }
+    .login-logo {
+      width: 158px;
+      height: 24px;
+      position: absolute;
+      top: 32px;
+      left: 32px;
+    }
+    .login-box {
+      position: relative;
+      z-index: 200;
+      height: 100vh;
+      display: flex;
+      display: -webkit-flex;
+      align-items:center;
+      justify-content:center;
+      .login-content {
+        background-color: #fff;
+        border-radius: 14px;
+        width: 360px;
+        box-sizing: border-box;
+        align-self: center;
+        padding: 30px;
+        .top-icon {
+          width: 100%;
+          text-align: center;
+          font-size: 0;
+          padding-top: 14px;
+          img {
+            width: 194px;
+            height: 52px;
+          }
+        }
+        .pass-code {
+          display: flex;
+          padding-top: 44px;
+          .item {
+            font-size: 16px;
+            font-family: PingFang SC;
+            font-weight: 400;
+            color: #565656;
+            cursor: pointer;
+            &:nth-child(1) {
+              margin-right: 30px;
+            }
+            &.active {
+              font-weight: bold;
+              color: #111111;
+              padding-bottom: 10px;
+              border-bottom: 3px solid #FC7200;
+            }
+          }
+        }
+        .login-password {
+          padding-top: 30px;
+          .pass-item {
+            display: flex;
+            align-items: center;
+            padding-bottom: 2px;
+            border-bottom: 1px solid #eee;
+            .phone-icon {
+              width: 14px;
+              height: 17px;
+              margin-right: 16px;
+            }
+            .lock-icon {
+              width: 16px;
+              height: 18px;
+              margin-right: 14px;
+            }
+            .input-phone {
+              flex: 1;
+            }
+            .get-code {
+              min-width: 120px;
+              box-sizing: border-box;
+              text-align: center;
+              padding: 0 6px;
+              font-size: 14px;
+              font-family: PingFang SC;
+              font-weight: 400;
+              color: #175199;
+              cursor: pointer;
+            }
+          }
+        }
+        .forgot-pass {
+          text-align: right;
+          font-size: 14px;
+          font-family: PingFang SC;
+          font-weight: 400;
+          color: #8590A6;
+          padding-top: 10px;
+          span {
+            cursor: pointer;
+          }
+        }
+        .login-btn {
+          height: 36px;
+          line-height: 36px;
+          text-align: center;
+          background: #FC7200;
+          border-radius: 3px;
+          font-size: 14px;
+          font-family: PingFang SC;
+          font-weight: 500;
+          color: #FFFFFF;
+          margin-top: 20px;
+          cursor: pointer;
+        }
+        .xie-yi {
+          font-size: 12px;
+          font-family: PingFang SC;
+          font-weight: 400;
+          color: #808080;
+          text-align: center;
+          margin-top: 20px;
+          a {
+            text-decoration: none;
+            color: #175199;
+          }
+        }
+      }
+    }
+  }
+</style>

src/views/resetPassword.vue

@@ -0,0 +1,200 @@
+<template>
+  <div class="login">
+    <div class="position-box">
+      <div class="inner-box">
+        <img src="../../static/image/logo.png" class="inner-logo" />
+        <div class="inner-line"></div>
+        <span>重置密码</span>
+      </div>
+    </div>
+    <div class="login-box">
+      <div class="login-content">
+        <div class="top-icon">
+          重置密码
+        </div>
+        <div>
+          <!-- 密码登录 -->
+          <div class="login-password">
+            <div class="pass-item">
+              <img src="../../static/image/phone-icon.png" class="phone-icon" />
+              <el-input placeholder="请输入手机号" class="input-phone" :maxlength="11" />
+            </div>
+            <div class="pass-item">
+              <img src="../../static/image/code-icon.png" class="phone-icon" />
+              <el-input placeholder="验证码" class="input-phone" type="password" />
+              <div class="get-code">获取短信验证码</div>
+            </div>
+            <div class="pass-item">
+              <img src="../../static/image/lock-icon.png" class="lock-icon" />
+              <el-input placeholder="新密码" class="input-phone" type="password" />
+            </div>
+            <div class="pass-item">
+              <img src="../../static/image/lock-icon.png" class="lock-icon" />
+              <el-input placeholder="确认新密码" class="input-phone" type="password" />
+            </div>
+          </div>
+        </div>
+        <div class="login-btn">确认</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        activeIndex: 1
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  /deep/ .el-input__inner {
+    border: none !important;
+  }
+  .login {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    .position-box {
+      position: absolute;
+      top: 18px;
+      left: 33px;
+      .inner-box {
+        display: flex;
+        align-items: center;
+        .inner-logo {
+          width: 204px;
+          height: 44px;
+        }
+        .inner-line {
+          width: 1px;
+          height: 24px;
+          background-color: #eee;
+          margin: 0 40px;
+        }
+        span {
+          font-size: 18px;
+          font-family: PingFang SC;
+          font-weight: 400;
+          color: #333333;
+        }
+      }
+    }
+    .login-box {
+      position: relative;
+      z-index: 200;
+      height: 100vh;
+      display: flex;
+      display: -webkit-flex;
+      align-items:center;
+      justify-content:center;
+      .login-content {
+        background-color: #fff;
+        border-radius: 14px;
+        width: 360px;
+        box-sizing: border-box;
+        align-self: center;
+        padding: 30px;
+        .top-icon {
+          font-size: 24px;
+          font-family: PingFang SC;
+          font-weight: bold;
+          color: #333333;
+          text-align: center;
+        }
+        .pass-code {
+          display: flex;
+          padding-top: 44px;
+          .item {
+            font-size: 16px;
+            font-family: PingFang SC;
+            font-weight: 400;
+            color: #565656;
+            cursor: pointer;
+            &:nth-child(1) {
+              margin-right: 30px;
+            }
+            &.active {
+              font-weight: bold;
+              color: #111111;
+              padding-bottom: 10px;
+              border-bottom: 3px solid #FC7200;
+            }
+          }
+        }
+        .login-password {
+          padding-top: 30px;
+          .pass-item {
+            display: flex;
+            align-items: center;
+            padding-bottom: 2px;
+            border-bottom: 1px solid #eee;
+            .phone-icon {
+              width: 14px;
+              height: 17px;
+              margin-right: 16px;
+            }
+            .lock-icon {
+              width: 16px;
+              height: 18px;
+              margin-right: 14px;
+            }
+            .input-phone {
+              flex: 1;
+            }
+            .get-code {
+              min-width: 120px;
+              box-sizing: border-box;
+              text-align: center;
+              padding: 0 6px;
+              font-size: 14px;
+              font-family: PingFang SC;
+              font-weight: 400;
+              color: #175199;
+              cursor: pointer;
+            }
+          }
+        }
+        .forgot-pass {
+          text-align: right;
+          font-size: 14px;
+          font-family: PingFang SC;
+          font-weight: 400;
+          color: #8590A6;
+          padding-top: 10px;
+          span {
+            cursor: pointer;
+          }
+        }
+        .login-btn {
+          height: 36px;
+          line-height: 36px;
+          text-align: center;
+          background: #FC7200;
+          border-radius: 3px;
+          font-size: 14px;
+          font-family: PingFang SC;
+          font-weight: 500;
+          color: #FFFFFF;
+          margin-top: 40px;
+          cursor: pointer;
+        }
+        .xie-yi {
+          font-size: 12px;
+          font-family: PingFang SC;
+          font-weight: 400;
+          color: #808080;
+          text-align: center;
+          margin-top: 20px;
+          a {
+            text-decoration: none;
+            color: #175199;
+          }
+        }
+      }
+    }
+  }
+</style>