瀏覽代碼

fix #813 【前端】 锁屏页面样式展示优化

冷冷 5 年之前
父節點
當前提交
8ba3d90bcd
共有 2 個文件被更改,包括 126 次插入137 次删除
  1. 55 60
      src/page/index/top/top-lock.vue
  2. 71 77
      src/page/lock/index.vue

+ 55 - 60
src/page/index/top/top-lock.vue

@@ -1,76 +1,71 @@
 <template>
   <span>
-    <i
-      class="icon-bofangqi-suoping"
-      @click="handleLock"/>
-    <el-dialog
-      :visible.sync="box"
-      title="设置锁屏密码"
-      width="30%"
-      append-to-body>
-      <el-form
-        ref="form"
-        :model="form"
-        label-width="80px">
-        <el-form-item
-          :rules="[{ required: true, message: '锁屏密码不能为空'}]"
-          label="锁屏密码"
-          prop="passwd">
-          <el-input
-            v-model="form.passwd"
-            placeholder="请输入锁屏密码"/>
+    <i  class="icon-bofangqi-suoping"
+       @click="handleLock"></i>
+    <el-dialog title="设置锁屏密码"
+               :visible.sync="box"
+               width="30%"
+               append-to-body>
+      <el-form :model="form"
+               ref="form"
+               label-width="80px">
+        <el-form-item label="锁屏密码"
+                      prop="passwd"
+                      :rules="[{ required: true, message: '锁屏密码不能为空'}]">
+          <el-input v-model="form.passwd"
+                    placeholder="请输入锁屏密码"></el-input>
         </el-form-item>
       </el-form>
-      <span
-        slot="footer"
-        class="dialog-footer">
-        <el-button
-          type="primary"
-          @click="handleSetLock">确 定</el-button>
+      <span slot="footer"
+            class="dialog-footer">
+        <el-button type="primary"
+                   @click="handleSetLock">确 定</el-button>
       </span>
     </el-dialog>
   </span>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-export default {
-  name: 'TopLock',
-  data() {
-    return {
-      box: false,
-      form: {
-        passwd: ''
-      }
-    }
-  },
-  created() {},
-  mounted() {},
-  computed: {
-    ...mapGetters(['lockPasswd'])
-  },
-  methods: {
-    handleSetLock() {
-      this.$refs['form'].validate(valid => {
-        if (valid) {
-          this.$store.commit('SET_LOCK_PASSWD', this.form.passwd)
-          this.handleLock()
+  import { validatenull } from "@/util/validate";
+  import { mapGetters } from "vuex";
+  export default {
+    name: "top-lock",
+    data() {
+      return {
+        box: false,
+        form: {
+          passwd: ""
         }
-      })
+      };
+    },
+    created() {},
+    mounted() {},
+    computed: {
+      ...mapGetters(["lockPasswd"])
     },
-    handleLock() {
-      if (this.validatenull(this.lockPasswd)) {
-        this.box = true
-        return
+    props: [],
+    methods: {
+      handleSetLock() {
+        this.$refs["form"].validate(valid => {
+          if (valid) {
+            this.$store.commit("SET_LOCK_PASSWD", this.form.passwd);
+            this.handleLock();
+          }
+        });
+      },
+      handleLock() {
+        if (validatenull(this.lockPasswd)) {
+          this.box = true;
+          return;
+        }
+        this.$store.commit("SET_LOCK");
+        setTimeout(() => {
+          this.$router.push({ path: "/lock" });
+        }, 100);
       }
-      this.$store.commit('SET_LOCK')
-      setTimeout(() => {
-        this.$router.push({ path: '/lock' })
-      }, 100)
-    }
-  },
-  components: {}
-}
+    },
+    components: {}
+  };
 </script>
 
 <style lang="scss" scoped>

+ 71 - 77
src/page/lock/index.vue

@@ -1,24 +1,20 @@
 <template>
-  <div class="lock-container pull-height">
+  <div class="lock-container">
     <div class="lock-form animated bounceInDown">
-      <div
-        :class="{'shake':passwdError,'bounceOut':pass}"
-        class="animated">
-        <h3 class="title">{{ userInfo.username }}</h3>
-        <el-input
-          v-model="passwd"
-          placeholder="请输入登录密码"
-          type="password"
-          class="input-with-select animated"
-          @keyup.enter.native="handleLogin">
-          <el-button
-            slot="append"
-            icon="icon-bofangqi-suoping"
-            @click="handleLogin"/>
-          <el-button
-            slot="append"
-            icon="icon-tuichu"
-            @click="handleLogout"/>
+      <div class="animated"
+           :class="{'shake':passwdError,'bounceOut':pass}">
+        <h3 class="title">{{userInfo.username}}</h3>
+        <el-input placeholder="请输入登录密码"
+                  type="password"
+                  class="input-with-select animated"
+                  v-model="passwd"
+                  @keyup.enter.native="handleLogin">
+          <el-button slot="append"
+                     icon="icon-bofangqi-suoping"
+                     @click="handleLogin"></el-button>
+          <el-button slot="append"
+                     icon="icon-tuichu"
+                     @click="handleLogout"></el-button>
         </el-input>
       </div>
 
@@ -26,88 +22,86 @@
   </div>
 </template>
 <script>
-import { mapGetters, mapState } from 'vuex'
-
-export default {
-  name: 'Lock',
-  data() {
-    return {
-      passwd: '',
-      passwdError: false,
-      pass: false
-    }
-  },
-  created() {
-  },
-  mounted() {
-  },
-  computed: {
-    ...mapState({
-      userInfo: state => state.user.userInfo
-    }),
-    ...mapGetters(['tag', 'lockPasswd'])
-  },
-  methods: {
-    handleLogout() {
-      this.$confirm('是否退出系统, 是否继续?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      }).then(() => {
-        this.$store.dispatch('LogOut').then(() => {
-          this.$router.push({ path: '/login' })
-        })
-      })
+  import { mapGetters, mapState } from "vuex";
+  export default {
+    name: "lock",
+    data() {
+      return {
+        passwd: "",
+        passwdError: false,
+        pass: false
+      };
+    },
+    created() {},
+    mounted() {},
+    computed: {
+      ...mapState({
+        userInfo: state => state.user.userInfo
+      }),
+      ...mapGetters(["tag", "lockPasswd"])
     },
-    handleLogin() {
-      if (this.passwd != this.lockPasswd) {
-        this.passwd = ''
-        this.$message({
-          message: '解锁密码错误,请重新输入',
-          type: 'error'
-        })
-        this.passwdError = true
+    props: [],
+    methods: {
+      handleLogout() {
+        this.$confirm("是否退出系统, 是否继续?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        }).then(() => {
+          this.$store.dispatch("LogOut").then(() => {
+            this.$router.push({ path: "/login" });
+          });
+        });
+      },
+      handleLogin() {
+        if (this.passwd != this.lockPasswd) {
+          this.passwd = "";
+          this.$message({
+            message: "解锁密码错误,请重新输入",
+            type: "error"
+          });
+          this.passwdError = true;
+          setTimeout(() => {
+            this.passwdError = false;
+          }, 1000);
+          return;
+        }
+        this.pass = true;
         setTimeout(() => {
-          this.passwdError = false
-        }, 1000)
-        return
+          this.$store.commit("CLEAR_LOCK");
+          this.$router.push({
+            path: this.$router.$avueRouter.getPath({ src: this.tag.value })
+          });
+        }, 1000);
       }
-      this.pass = true
-      setTimeout(() => {
-        this.$store.commit('CLEAR_LOCK')
-        this.$router.push({ path: this.$router.$avueRouter.getPath({ src: this.tag.value }) })
-      }, 1000)
-    }
-  },
-  components: {}
-}
+    },
+    components: {}
+  };
 </script>
 
 <style lang="scss">
   .lock-container {
+    height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
-
     .title {
+      text-align: center;
       margin-bottom: 8px;
-      color: #333;
     }
   }
-
   .lock-container::before {
     z-index: -999;
-    content: '';
+    content: "";
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
-    background-image: url('/img/login.png');
+    background-image: url("/img/bg/login.png");
     background-size: cover;
   }
-
   .lock-form {
     width: 300px;
   }