Merge branch 'master' of http://git.jiayuepowertech.com:9022/xiuwei/vpp

# Conflicts:
#	src/views/Articles/index.vue
#	src/views/Login/Login.vue

package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "core-js": "^3.8.3",
     "element-ui": "^2.15.14",
+    "js-base64": "^3.7.5",
     "less": "^4.2.0",
     "less-loader": "^7.3.0",
     "vue": "^2.6.14",

src/views/Login/Login.vue

@@ -1,73 +1,109 @@
-
 <template>
-  <div class="login">
-    <div class="tab">
-        <div style="width: 100%;text-align: center">
-          <div class="tab-wrapper">
-            <img alt="" style="display: inline-block;position: absolute;top:50px;" :class="flag1? 'active1':'active2'" src="img/img_2.png">
-            <div @click="handleChange" class="tab1" :class="flag1? 'active':''">账号登陆</div>
-            <img alt="" style="display: inline-block;position: absolute;top:-12px;" src="./img/split.png">
-            <div @click="handleChange" class="tab2" :class="flag2? 'active':''">人脸识别</div>
-          </div>
-          <div v-if="flag1">
-            <div class="input-div">
-              <img src="./img/phone.png" alt="" class="phone-img">
-              <el-input class="phone" v-model="input" placeholder="请输入手机号/邮箱"></el-input>
-            </div>
-            <div class="input-div">
-              <img src="./img/password.png" alt="" class="password-img">
-              <el-input v-model="password" class="password" placeholder="请输入登陆密码"></el-input>
-            </div>
-            <div style="text-align: left">
-            <el-checkbox v-model="checked">记住密码</el-checkbox>
+    <div class="login">
+        <div class="tab">
+            <div style="width: 100%;text-align: center">
+                <div class="tab-wrapper">
+                    <img :class="flag1? 'active1':'active2'" alt=""
+                         src="img/img_2.png" style="display: inline-block;position: absolute;top:50px;">
+                    <div :class="flag1? 'active':''" class="tab1" @click="handleChange">账号登陆</div>
+                    <img alt="" src="./img/split.png" style="display: inline-block;position: absolute;top:-12px;">
+                    <div :class="flag2? 'active':''" class="tab2" @click="handleChange">人脸识别</div>
+                </div>
+                <div v-if="flag1">
+                    <div class="input-div">
+                        <img alt="" class="phone-img" src="./img/phone.png">
+                        <el-input v-model="input" class="phone" placeholder="请输入手机号/邮箱"></el-input>
+                    </div>
+                    <div class="input-div">
+                        <img alt="" class="password-img" src="./img/password.png">
+                        <el-input v-model="password" class="password" placeholder="请输入登陆密码"></el-input>
+                    </div>
+                    <div style="text-align: left">
+                        <el-checkbox v-model="checked" class="rememberMe">记住密码</el-checkbox>
+                    </div>
+                </div>
+                <div v-if="flag2">
+                    <div class="code">
+                        人脸扫描
+                    </div>
+                </div>
             </div>
-          </div>
-          <div v-if="flag2">
-            <div class="code">
-              人脸扫描
+            <div v-if="activeName === 'first'" class="button-div">
+                <el-button type="primary" @click="loginSubmit">登陆</el-button>
+                <el-button @click="cancel">取消</el-button>
             </div>
-          </div>
+            <a class="left" href="">下载浏览器</a>
+            <a class="right" href="">立即注册</a>
         </div>
-      <div v-if="activeName === 'first'" class="button-div">
-        <el-button type="primary">登陆</el-button>
-        <el-button>取消</el-button>
-      </div>
-      <a href="" class="left">下载浏览器</a>
-      <a href="" class="right">立即注册</a>
-    </div>
 
-  </div>
+    </div>
 </template>
 
 <script>
+import {Base64} from "js-base64";
+
 export default {
-  name: 'Login-Page',
-  props: {
-    msg: String
-  },
-  data() {
-    return {
-      activeName: 'first',
-      input: '',
-      password: '',
-      checked: false,
-      flag1: true,
-      flag2: false
-    };
-  },
-  methods: {
-    handleClick(tab, event) {
-      console.log(tab, event);
+    name: 'HelloWorld',
+    props: {
+        msg: String
+    },
+
+    data() {
+        return {
+            activeName: 'first',
+            input: '',
+            password: '',
+            checked: false,
+            flag1: true,
+            flag2: false,
+            Base64: '',
+        };
+    },
+    mounted() {
+        let username = localStorage.getItem("input");
+        if (username) {
+            this.input = localStorage.getItem("input");
+            this.password = Base64.decode(localStorage.getItem("password"));// base64解密
+            this.checked = true;
+        }
     },
-    handleChange() {
-      this.flag1 = !this.flag1
-      this.flag2 = !this.flag2
+    methods: {
+        loginSubmit() {
+            if (this.input !== 'admin') {
+                this.$message.error("用户不存在")
+            } else {
+                if (this.password !== '123456') {
+                    this.$message.error("密码错误")
+                } else {
+                    if (this.checked) {
+                        let password = Base64.encode(this.password); // base64加密
+                        localStorage.setItem("input", this.input);
+                        localStorage.setItem("password", password);
+                    } else {
+                        localStorage.removeItem("input");
+                        localStorage.removeItem("password");
+                    }
+                    this.$message.success("登录成功")
+                    this.$router.push('/table1');
+                }
+            }
+        },
+        cancel() {
+            this.input = ''
+            this.password = ''
+        },
+        handleClick(tab, event) {
+            console.log(tab, event);
+        },
+        handleChange() {
+            this.flag1 = !this.flag1
+            this.flag2 = !this.flag2
+        }
     }
-  }
 }
 </script>
 
-<style scoped lang="less">
+<style lang="less" scoped>
 .login {
   position: fixed;
   left: 0;
@@ -79,8 +115,6 @@ export default {
 }
 
 
-
-
 /deep/ .el-tabs__nav {
   float: none;
 }
@@ -101,11 +135,12 @@ export default {
   .tab2 {
     margin-left: 33px;
   }
+
   .tab1 {
     margin-right: 33px;
   }
 
-  .tab1,.tab2 {
+  .tab1, .tab2 {
     width: 104px;
     font-size: 24px !important;
     font-weight: 1000;
@@ -122,17 +157,16 @@ export default {
   .active {
 
   }
-  .active1{
+
+  .active1 {
     left: 147px;
   }
 
-  .active2{
+  .active2 {
     left: 310px;
   }
 
 
-
-
   .line {
     width: 2px;
     height: 20px;
@@ -257,4 +291,19 @@ export default {
   background-image: url("./img/img.png")
 }
 
+/deep/ .el-checkbox__inner::after {
+  box-sizing: content-box;
+  content: "";
+  border: 1px solid #FFF;
+  border-left: 0;
+  border-top: 0;
+  height: 10px;
+  left: 10px;
+  position: absolute;
+  top: 5px;
+  transform: rotate(45deg) scaleY(0);
+  width: 4px;
+  transition: transform .15s ease-in .05s;
+  transform-origin: center;
+}
 </style>