登录更新

layout/register/login.vue

@@ -0,0 +1,95 @@
+<template>
+  <div id="login">
+    <el-row>
+      <el-col :span="24" class="style" :style="'background: url(' + loginBei + ')no-repeat center center;'">
+        <el-col :span="24" class="login">
+          <el-tabs v-model="activeName" @tab-click="handleClick">
+            <el-tab-pane label="账号登录" name="first">
+              <el-form ref="form" :model="form" label-width="80px">
+                <el-form-item label="用户名">
+                  <el-input v-model="form.name" placeholder="请输入用户名称"></el-input>
+                </el-form-item>
+                <el-form-item label="密码">
+                  <el-input v-model="form.password" show-password placeholder="请输入用户密码"></el-input>
+                </el-form-item>
+                <el-form-item>
+                  <el-button type="primary" @click="onSubmit">登录</el-button>
+                </el-form-item>
+              </el-form>
+            </el-tab-pane>
+            <el-tab-pane label="扫码登录" name="second">
+              扫码登录
+            </el-tab-pane>
+          </el-tabs>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'login',
+  props: {
+    form: null,
+  },
+  components: {},
+  data: () => ({
+    loginBei: require('../../assets/bg.jpg'),
+    activeName: 'first',
+  }),
+  created() {},
+  computed: {},
+  methods: {
+    handleClick(tab, event) {
+      console.log(tab, event);
+    },
+    onSubmit() {
+      this.$emit('onSubmit', { data: this.form });
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.style {
+  width: 100%;
+  height: 100vh;
+  background: #5dac81;
+  background-size: cover;
+  text-align: center;
+}
+.login {
+  width: 400px;
+  height: 300px;
+  border: 1px solid #3f7dff;
+  position: absolute;
+  top: 20%;
+  left: 35%;
+  border-radius: 10px;
+  background-color: #fff;
+}
+.el-form {
+  padding: 0 15px;
+  margin: 30px 0 0 0;
+}
+/deep/.el-tabs__header {
+  margin: 0;
+}
+/deep/.el-tabs__nav-wrap::after {
+  background-color: transparent;
+}
+/deep/.el-tabs--top .el-tabs__item.is-top:nth-child(2) {
+  padding-left: 70px;
+}
+/deep/.el-tabs--top .el-tabs__item.is-top:last-child {
+  padding-right: 70px;
+}
+/deep/.el-tabs__item {
+  padding: 0 70px;
+}
+/deep/.el-tabs__active-bar {
+  width: 200px !important;
+  left: -70px;
+}
+</style>

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "core-js": "^3.4.4",
     "element": "^0.1.4",
+    "jsonwebtoken": "^8.5.1",
     "lodash": "^4.17.15",
     "vue": "^2.6.10",
     "vue-router": "^3.1.3",

vue.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  lintOnSave: false
+  lintOnSave: false,
 };