修改登录页效果，提升electron版本

张恒
README.md
package-lock.json
package.json
src/main/index.js
src/renderer/views/login/index.vue
--- a/README.md
查看文件 @ddcfb78
+++ b/README.md
查看文件 @ddcfb78
@@ -37,7 +37,7 @@ npm config edit
 ---
-这个项目使用了 [electron-vue](https://github.com/SimulatedGREG/electron-vue)@[8fae476](https://github.com/SimulatedGREG/electron-vue/tree/8fae4763e9d225d3691b627e83b9e09b56f6c935) using [vue-cli](https://github.com/vuejs/vue-cli). 文档你们可以在这里看到: [here](https://simulatedgreg.gitbooks.io/electron-vue/content/index.html).
+这个项目使用了 [electron-vue](https://github.com/SimulatedGREG/electron-vue)@[8fae476](https://github.com/SimulatedGREG/electron-vue/tree/8fae4763e9d225d3691b627e83b9e09b56f6c935) using [vue-cli](https://github.com/vuejs/vue-cli). 文档你们可以在这里看到: [这里](https://simulatedgreg.gitbooks.io/electron-vue/content/index.html).
 这是花裤衩大大原本的[地址](https://github.com/PanJiaChen/electron-vue-admin)
 # 更新日志
--- a/package-lock.json
查看文件 @ddcfb78
+++ b/package-lock.json
查看文件 @ddcfb78
--- a/package.json
查看文件 @ddcfb78
+++ b/package.json
查看文件 @ddcfb78
@@ -90,7 +90,7 @@
     "css-loader": "^3.1.0",
     "del": "^5.0.0",
     "devtron": "^1.4.0",
-    "electron": "^5.0.10",
+    "electron": "^5.0.11",
     "electron-builder": "^21.1.1",
     "electron-debug": "^3.0.1",
     "electron-devtools-installer": "^2.2.4",
@@ -124,13 +124,13 @@
     "spectron": "^3.8.0",
     "style-loader": "^0.21.0",
     "svg-sprite-loader": "^4.1.6",
-    "terser-webpack-plugin": "^2.1.0",
+    "terser-webpack-plugin": "^2.1.2",
     "url-loader": "^2.1.0",
     "vue-html-loader": "^1.2.4",
     "vue-loader": "^15.7.1",
     "vue-style-loader": "^4.1.2",
     "vue-template-compiler": "^2.6.10",
-    "webpack": "^4.40.2",
+    "webpack": "^4.41.0",
     "webpack-cli": "^3.3.9",
     "webpack-dev-server": "^3.8.1",
     "webpack-hot-middleware": "^2.25.0",
--- a/src/main/index.js
查看文件 @ddcfb78
+++ b/src/main/index.js
查看文件 @ddcfb78
@@ -32,7 +32,9 @@ function createWindow () {
     backgroundColor: '#fffff',
     titleBarStyle: 'hidden',
     webPreferences: {
-      nodeIntegration: true
+      nodeIntegration: true,
+      webSecurity: false,
+      experimentalFeatures: true
     }
     // 隐藏边框
     // frame: false,
--- a/src/renderer/views/login/index.vue
查看文件 @ddcfb78
+++ b/src/renderer/views/login/index.vue
查看文件 @ddcfb78
 <template>
   <div class="login-container">
-    <el-form class="login-form" autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left">
+    <div class="login-from-box">
+      <el-form
+        class="login-form"
+        autocomplete="on"
+        :model="loginForm"
+        :rules="loginRules"
+        ref="loginForm"
+        label-position="left"
+      >
         <h3 class="title">后台管理框架</h3>
         <el-form-item prop="username">
           <span class="svg-container svg-container_login">
             <svg-icon icon-class="user" />
           </span>
-        <el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="用户名" />
+          <el-input
+            name="username"
+            type="text"
+            v-model="loginForm.username"
+            autocomplete="on"
+            placeholder="用户名"
+          />
         </el-form-item>
         <el-form-item prop="password">
           <span class="svg-container">
             <svg-icon icon-class="password"></svg-icon>
           </span>
-        <el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
+          <el-input
-          placeholder="密码"></el-input>
+            name="password"
-          <span class="show-pwd" @click="showPwd"><svg-icon icon-class="eye" /></span>
+            :type="pwdType"
+            @keyup.enter.native="handleLogin"
+            v-model="loginForm.password"
+            autocomplete="on"
+            placeholder="密码"
+          ></el-input>
+          <span class="show-pwd" @click="showPwd">
+            <svg-icon icon-class="eye" />
+          </span>
         </el-form-item>
         <el-form-item>
-        <el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
+          <el-button
-          登录
+            type="primary"
-        </el-button>
+            style="width:100%;"
+            :loading="loading"
+            @click.native.prevent="handleLogin"
+          >登录</el-button>
         </el-form-item>
         <div class="tips">
           <span style="margin-right:20px;">用户名: admin</span>
-        <span> 密码：随便什么都行</span>
+          <span>密码：随便什么都行</span>
         </div>
       </el-form>
     </div>
+  </div>
 </template>
 <script>
-import { isvalidUsername } from '@/utils/validate'
+import { isvalidUsername } from "@/utils/validate";
 export default {
-  name: 'login',
+  name: "login",
   data() {
     const validateUsername = (rule, value, callback) => {
       if (!isvalidUsername(value)) {
-        callback(new Error('请输入正确的用户名'))
+        callback(new Error("请输入正确的用户名"));
       } else {
-        callback()
+        callback();
-      }
       }
+    };
     const validatePass = (rule, value, callback) => {
       if (value.length < 5) {
-        callback(new Error('密码不能小于5位'))
+        callback(new Error("密码不能小于5位"));
       } else {
-        callback()
+        callback();
-      }
       }
+    };
     return {
       loginForm: {
-        username: 'admin',
+        username: "admin",
-        password: 'admin'
+        password: "admin"
       },
       loginRules: {
-        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
+        username: [
-        password: [{ required: true, trigger: 'blur', validator: validatePass }]
+          { required: true, trigger: "blur", validator: validateUsername }
+        ],
+        password: [{ required: true, trigger: "blur", validator: validatePass }]
       },
       loading: false,
-      pwdType: 'password'
+      pwdType: "password"
-    }
+    };
   },
   methods: {
     showPwd() {
-      if (this.pwdType === 'password') {
+      if (this.pwdType === "password") {
-        this.pwdType = ''
+        this.pwdType = "";
       } else {
-        this.pwdType = 'password'
+        this.pwdType = "password";
       }
     },
     handleLogin() {
-      console.log(11111)
+      console.log(11111);
       this.$refs.loginForm.validate(valid => {
-        console.log(valid)
+        console.log(valid);
         if (valid) {
-          this.loading = true
+          this.loading = true;
-          this.$store.dispatch('Login', this.loginForm).then(() => {
+          this.$store
-            this.loading = false
+            .dispatch("Login", this.loginForm)
-            this.$router.push({ path: '/' })
+            .then(() => {
-          }).catch(() => {
+              this.loading = false;
-            this.loading = false
+              this.$router.push({ path: "/" });
             })
+            .catch(() => {
+              this.loading = false;
+            });
         } else {
-          console.log('error submit!!')
+          console.log("error submit!!");
-          return false
+          return false;
         }
-      })
+      });
     }
   }
-}
+};
 </script>
-<style rel="stylesheet/scss" lang="scss">
+<style rel="stylesheet/scss" lang="scss" scoped>
-$bg:#2d3a4b;
+$bg: #2d3a4b;
-$light_gray:#eee;
+$light_gray: #eee;
+$dark_gray: #889aa4;
+$light_gray: #eee;
 /* reset element-ui css */
 .login-container {
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  top: 0;
   left: 0;
-  .el-input {
+  background-image: url("https://cn.bing.com/th?id=OHR.ClavijoLandscape_ZH-CN1525245124_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp");
+  /deep/ .el-input {
     display: inline-block;
     height: 47px;
     width: 85%;
@@ -117,25 +155,16 @@ $light_gray:#eee;
       }
     }
   }
-  .el-form-item {
+  /deep/ .el-form-item {
     border: 1px solid rgba(255, 255, 255, 0.1);
     background: rgba(0, 0, 0, 0.1);
     border-radius: 5px;
     color: #454545;
   }
-}
+  .login-from-box {
+    position: relative;
+    backdrop-filter: saturate(180%) blur(20px);
-</style>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-$bg:#2d3a4b;
-$dark_gray:#889aa4;
-$light_gray:#eee;
-.login-container {
-  position: fixed;
-  height: 100%;
-  width: 100%;
-  background-color: $bg;
     .login-form {
       position: absolute;
       left: 0;
@@ -181,5 +210,6 @@ $light_gray:#eee;
       cursor: pointer;
       user-select: none;
     }
+  }
 }
 </style>