修改登录页效果，提升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">
-      <h3 class="title">后台管理框架</h3>
+      <el-form
-      <el-form-item prop="username">
+        class="login-form"
-        <span class="svg-container svg-container_login">
+        autocomplete="on"
-          <svg-icon icon-class="user" />
+        :model="loginForm"
-        </span>
+        :rules="loginRules"
-        <el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="用户名" />
+        ref="loginForm"
-      </el-form-item>
+        label-position="left"
-      <el-form-item prop="password">
+      >
-        <span class="svg-container">
+        <h3 class="title">后台管理框架</h3>
-          <svg-icon icon-class="password"></svg-icon>
+        <el-form-item prop="username">
-        </span>
+          <span class="svg-container svg-container_login">
-        <el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
+            <svg-icon icon-class="user" />
-          placeholder="密码"></el-input>
+          </span>
-          <span class="show-pwd" @click="showPwd"><svg-icon icon-class="eye" /></span>
+          <el-input
-      </el-form-item>
+            name="username"
-      <el-form-item>
+            type="text"
-        <el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
+            v-model="loginForm.username"
-          登录
+            autocomplete="on"
-        </el-button>
+            placeholder="用户名"
-      </el-form-item>
+          />
-      <div class="tips">
+        </el-form-item>
-        <span style="margin-right:20px;">用户名: admin</span>
+        <el-form-item prop="password">
-        <span> 密码：随便什么都行</span>
+          <span class="svg-container">
-      </div>
+            <svg-icon icon-class="password"></svg-icon>
-    </el-form>
+          </span>
+          <el-input
+            name="password"
+            :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>
+        </el-form-item>
+        <div class="tips">
+          <span style="margin-right:20px;">用户名: admin</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,69 +155,61 @@ $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;
-</style>
+    backdrop-filter: saturate(180%) blur(20px);
-<style rel="stylesheet/scss" lang="scss" scoped>
+    .login-form {
-$bg:#2d3a4b;
+      position: absolute;
-$dark_gray:#889aa4;
+      left: 0;
-$light_gray:#eee;
+      right: 0;
-.login-container {
+      width: 520px;
-  position: fixed;
+      padding: 35px 35px 15px 35px;
-  height: 100%;
+      margin: 120px auto;
-  width: 100%;
+    }
-  background-color: $bg;
+    .tips {
-  .login-form {
+      font-size: 14px;
-    position: absolute;
+      color: #fff;
-    left: 0;
+      margin-bottom: 10px;
-    right: 0;
+      span {
-    width: 520px;
+        &:first-of-type {
-    padding: 35px 35px 15px 35px;
+          margin-right: 16px;
-    margin: 120px auto;
+        }
-  }
-  .tips {
-    font-size: 14px;
-    color: #fff;
-    margin-bottom: 10px;
-    span {
-      &:first-of-type {
-        margin-right: 16px;
       }
     }
-  }
+    .svg-container {
-  .svg-container {
+      padding: 6px 5px 6px 15px;
-    padding: 6px 5px 6px 15px;
+      color: $dark_gray;
-    color: $dark_gray;
+      vertical-align: middle;
-    vertical-align: middle;
+      width: 30px;
-    width: 30px;
+      display: inline-block;
-    display: inline-block;
+      &_login {
-    &_login {
+        font-size: 20px;
-      font-size: 20px;
+      }
+    }
+    .title {
+      font-size: 26px;
+      font-weight: 400;
+      color: $light_gray;
+      margin: 0px auto 40px auto;
+      text-align: center;
+      font-weight: bold;
+    }
+    .show-pwd {
+      position: absolute;
+      right: 10px;
+      top: 7px;
+      font-size: 16px;
+      color: $dark_gray;
+      cursor: pointer;
+      user-select: none;
     }
-  }
-  .title {
-    font-size: 26px;
-    font-weight: 400;
-    color: $light_gray;
-    margin: 0px auto 40px auto;
-    text-align: center;
-    font-weight: bold;
-  }
-  .show-pwd {
-    position: absolute;
-    right: 10px;
-    top: 7px;
-    font-size: 16px;
-    color: $dark_gray;
-    cursor: pointer;
-    user-select: none;
   }
 }
 </style>