UI

sooka-ui/src/views/login.vue

@@ -1,241 +1,245 @@
-<template>
+<template>
   <div class="login view-box">
 	  <div class="login-header">
 	  	<img class="login-header-img" src="../assets/images/logo-sj.png">
 	  	<span class="login-h-text">首佳科技SSO平台</span>
-	  </div>
-    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-box">
-     <div class="zz-box">
-      <el-form-item prop="username">
-        <el-input
-          v-model="loginForm.username"
-          auto-complete="off"
-          placeholder="账号"
-          type="text"
-        >
-          <svg-icon slot="prefix" class="el-input__icon input-icon" icon-class="user"/>
-        </el-input>
-      </el-form-item>
-      <el-form-item prop="password">
-        <el-input
-          v-model="loginForm.password"
-          auto-complete="off"
-          placeholder="密码"
-          type="password"
-          @keyup.enter.native="handleLogin"
-        >
-          <svg-icon slot="prefix" class="el-input__icon input-icon" icon-class="password"/>
-        </el-input>
-      </el-form-item>
-      <el-form-item v-if="captchaEnabled" prop="code">
-        <el-input
-          v-model="loginForm.code"
-          auto-complete="off"
-          placeholder="验证码"
-          style="width: 63%"
-          @keyup.enter.native="handleLogin"
-        >
-          <svg-icon slot="prefix" class="el-input__icon input-icon" icon-class="validCode"/>
-        </el-input>
-        <div class="login-code">
-          <img :src="codeUrl" class="login-code-img" @click="getCode"/>
-        </div>
-      </el-form-item>
-      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
-      <el-form-item style="width:100%;">
-        <el-button
-          :loading="loading"
-          size="medium"
-          style="width:100%;"
-          type="primary"
-          @click.native.prevent="handleLogin"
-        >
-          <span v-if="!loading">登 录</span>
-          <span v-else>登 录 中...</span>
-        </el-button>
-        <div v-if="register" style="float: right;">
-          <router-link :to="'/register'" class="link-type">立即注册</router-link>
-        </div>
+	  </div>
+    <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-box">
+     <div class="from-box">
+      <div class="login-tit">请登录</div>
+      <el-form-item prop="username">
+        <el-input
+          v-model="loginForm.username"
+          auto-complete="off"
+          placeholder="账号"
+          type="text"
+          class="sj-input-style"
+        >
+        </el-input>
       </el-form-item>
-	  </div>
-    </el-form>
-  </div>
-</template>
-
-<script>
-import {getCodeImg, getSecretKey} from "@/api/login";
-import Cookies from "js-cookie";
-import {decrypt, encrypt} from '@/utils/jsencrypt'
-import {encryptedData} from "@/api/tool/encrypt";
-
-export default {
-  name: "Login",
-  data() {
-    return {
-      codeUrl: "",
-      loginForm: {
-        username: "admin",
-        password: "admin123",
-        rememberMe: false,
-        code: "",
-        uuid: ""
-      },
-      loginRules: {
-        username: [
-          {required: true, trigger: "blur", message: "请输入您的账号"}
-        ],
-        password: [
-          {required: true, trigger: "blur", message: "请输入您的密码"}
-        ],
-        code: [{required: true, trigger: "change", message: "请输入验证码"}]
-      },
-      loading: false,
-      // 验证码开关
-      captchaEnabled: true,
-      // 注册开关
-      register: false,
-      redirect: undefined
-    };
-  },
-  watch: {
-    $route: {
-      handler: function (route) {
-        this.redirect = route.query && route.query.redirect;
-      },
-      immediate: true
-    }
-  },
-  created() {
-    this.getCode();
-    this.getCookie();
-  },
-  methods: {
-    getCode() {
-      getCodeImg().then(res => {
-        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
-        if (this.captchaEnabled) {
-          this.codeUrl = "data:image/gif;base64," + res.img;
-          this.loginForm.uuid = res.uuid;
-        }
-      });
-    },
-    getCookie() {
-      const username = Cookies.get("username");
-      const password = Cookies.get("password");
-      const rememberMe = Cookies.get('rememberMe')
-      this.loginForm = {
-        username: username === undefined ? this.loginForm.username : username,
-        password: password === undefined ? this.loginForm.password : decrypt(password),
-        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
-      };
-    },
-    handleLogin() {
-      this.$refs.loginForm.validate(valid => {
-        if (valid) {
-          this.loading = true;
-          if (this.loginForm.rememberMe) {
-            Cookies.set("username", this.loginForm.username, {expires: 30});
-            Cookies.set("password", encrypt(this.loginForm.password), {expires: 30});
-            Cookies.set('rememberMe', this.loginForm.rememberMe, {expires: 30});
-          } else {
-            Cookies.remove("username");
-            Cookies.remove("password");
-            Cookies.remove('rememberMe');
-          }
-          //登录前先获取密码加密传输的公钥，对密码进行加密
-          getSecretKey().then((res) => {
-            const encryptedPassword = encryptedData(
-              res.data,
-              this.loginForm.password
-            );
-            this.loginForm.password = encryptedPassword;
-
-            this.$store.dispatch("Login", this.loginForm).then(() => {
-              this.$router.push({path: "/"}).catch(() => {
-              });
-            }).catch(() => {
-              this.loading = false;
-              if (this.captchaEnabled) {
-                this.getCode();
-              }
-            });
-          });
-        }
-      });
-    }
-  }
-};
-</script>
-
-<style lang="scss" rel="stylesheet/scss">
-.login {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  background-image: url("../assets/images/login-background.jpg");
-  background-size: cover;
-}
-
-.title {
-  margin: 0px auto 30px auto;
-  text-align: center;
-  color: #707070;
-}
-
-.login-form {
-  border-radius: 6px;
-  background: #ffffff;
-  width: 400px;
-  padding: 25px 25px 5px 25px;
-
-  .el-input {
-    height: 38px;
-
-    input {
-      height: 38px;
-    }
-  }
-
-  .input-icon {
-    height: 39px;
-    width: 14px;
-    margin-left: 2px;
-  }
-}
-
-.login-tip {
-  font-size: 13px;
-  text-align: center;
-  color: #bfbfbf;
-}
-
-.login-code {
-  width: 33%;
-  height: 38px;
-  float: right;
-
-  img {
-    cursor: pointer;
-    vertical-align: middle;
-  }
-}
-
-.el-login-footer {
-  height: 40px;
-  line-height: 40px;
-  position: fixed;
-  bottom: 0;
-  width: 100%;
-  text-align: center;
-  color: #fff;
-  font-family: Arial;
-  font-size: 12px;
-  letter-spacing: 1px;
-}
-
-.login-code-img {
-  height: 38px;
+      <el-form-item prop="password">
+        <el-input
+          v-model="loginForm.password"
+          auto-complete="off"
+          placeholder="密码"
+          type="password"
+          @keyup.enter.native="handleLogin"
+          class="sj-input-style"
+        >
+        </el-input>
+      </el-form-item>
+      <el-form-item v-if="captchaEnabled" prop="code" class="flex-r">
+        <el-input
+          v-model="loginForm.code"
+          auto-complete="off"
+          placeholder="验证码"
+          style="width: 63%"
+          @keyup.enter.native="handleLogin"
+          class="sj-input-style"
+        >
+          
+        </el-input>
+        <div class="login-code">
+          <img :src="codeUrl" class="login-code-img" @click="getCode"/>
+        </div>
+      </el-form-item>
+      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;text-decoration: none;
+      color: #50aeff; float: left;" >记住密码</el-checkbox>
+      <el-form-item style="width:100%;">
+        <el-button
+          :loading="loading"
+          size="medium"
+          style="width:100%;"
+          type="primary"
+          @click.native.prevent="handleLogin"
+          class="s-input s-btn login-btn"
+        >
+          <span v-if="!loading">登 录</span>
+          <span v-else>登 录 中...</span>
+        </el-button>
+        <div v-if="register" style="float: right;">
+          <router-link :to="'/register'" class="link-type">立即注册</router-link>
+        </div>
+      </el-form-item>
+	  </div>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import {getCodeImg, getSecretKey} from "@/api/login";
+import Cookies from "js-cookie";
+import {decrypt, encrypt} from '@/utils/jsencrypt'
+import {encryptedData} from "@/api/tool/encrypt";
+
+export default {
+  name: "Login",
+  data() {
+    return {
+      codeUrl: "",
+      loginForm: {
+        username: "admin",
+        password: "admin123",
+        rememberMe: false,
+        code: "",
+        uuid: ""
+      },
+      loginRules: {
+        username: [
+          {required: true, trigger: "blur", message: "请输入您的账号"}
+        ],
+        password: [
+          {required: true, trigger: "blur", message: "请输入您的密码"}
+        ],
+        code: [{required: true, trigger: "change", message: "请输入验证码"}]
+      },
+      loading: false,
+      // 验证码开关
+      captchaEnabled: true,
+      // 注册开关
+      register: false,
+      redirect: undefined
+    };
+  },
+  watch: {
+    $route: {
+      handler: function (route) {
+        this.redirect = route.query && route.query.redirect;
+      },
+      immediate: true
+    }
+  },
+  created() {
+    this.getCode();
+    this.getCookie();
+  },
+  methods: {
+    getCode() {
+      getCodeImg().then(res => {
+        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
+        if (this.captchaEnabled) {
+          this.codeUrl = "data:image/gif;base64," + res.img;
+          this.loginForm.uuid = res.uuid;
+        }
+      });
+    },
+    getCookie() {
+      const username = Cookies.get("username");
+      const password = Cookies.get("password");
+      const rememberMe = Cookies.get('rememberMe')
+      this.loginForm = {
+        username: username === undefined ? this.loginForm.username : username,
+        password: password === undefined ? this.loginForm.password : decrypt(password),
+        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
+      };
+    },
+    handleLogin() {
+      this.$refs.loginForm.validate(valid => {
+        if (valid) {
+          this.loading = true;
+          if (this.loginForm.rememberMe) {
+            Cookies.set("username", this.loginForm.username, {expires: 30});
+            Cookies.set("password", encrypt(this.loginForm.password), {expires: 30});
+            Cookies.set('rememberMe', this.loginForm.rememberMe, {expires: 30});
+          } else {
+            Cookies.remove("username");
+            Cookies.remove("password");
+            Cookies.remove('rememberMe');
+          }
+          //登录前先获取密码加密传输的公钥，对密码进行加密
+          getSecretKey().then((res) => {
+            const encryptedPassword = encryptedData(
+              res.data,
+              this.loginForm.password
+            );
+            this.loginForm.password = encryptedPassword;
+
+            this.$store.dispatch("Login", this.loginForm).then(() => {
+              this.$router.push({path: "/"}).catch(() => {
+              });
+            }).catch(() => {
+              this.loading = false;
+              if (this.captchaEnabled) {
+                this.getCode();
+              }
+            });
+          });
+        }
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" rel="stylesheet/scss">
+.login {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  background-image: url("../assets/images/login-background.jpg");
+  background-size: cover;
+}
+
+.title {
+  margin: 0px auto 30px auto;
+  text-align: center;
+  color: #707070;
+}
+
+.login-form {
+  border-radius: 6px;
+  background: #ffffff;
+  width: 400px;
+  padding: 25px 25px 5px 25px;
+
+  .el-input {
+    height: 38px;
+
+    input {
+      height: 38px;
+    }
+  }
+
+  .input-icon {
+    height: 39px;
+    width: 14px;
+    margin-left: 2px;
+  }
+}
+
+.login-tip {
+  font-size: 13px;
+  text-align: center;
+  color: #bfbfbf;
+}
+
+.login-code {
+  width: 33%;
+  height: 38px;
+  float: right;
+
+  img {
+    cursor: pointer;
+    vertical-align: middle;
+  }
+}
+
+.el-login-footer {
+  height: 40px;
+  line-height: 40px;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  color: #fff;
+  font-family: Arial;
+  font-size: 12px;
+  letter-spacing: 1px;
+}
+
+.login-code-img {
+  height: 38px;
 }
 
 ::-webkit-input-placeholder {
@@ -311,14 +315,19 @@ export default {
   font-weight: bolder;
   color: #90c8ff;
   float: left;
+  margin-bottom: 50px;
 }
 /* 表单 */
 .from-box {
+  /* width: 100%; */
   height: 597px;
   background: url("../assets/images/login-box-bg.png") no-repeat;
   border-radius: 0px;
   transition: all 0.2s;
   background-size: cover;
+  position: relative;
+  top: 50%;
+  transform: translateY(-50%);
 }
 .from-box > * {
   padding: 0px 80px;
@@ -424,6 +433,9 @@ export default {
     background:linear-gradient(0deg,#23d6ee,#52a9ff );
     font-size: 23px;
     font-weight: bolder;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 .login-btn:hover{
     background: linear-gradient(0deg,#63e7f8,#6fb6fd );
@@ -467,5 +479,28 @@ export default {
   background-size: 20px 20px;
   top: 12px;
 }
-
-</style>
+
+.sj-input-style{
+  .el-input__inner{
+    width: 100%;
+  line-height: 50px;
+  color: #90c8ff;
+  height: 50px;
+  text-indent: 1em;
+  outline: 0;
+  border: 1px #4982c8 solid;
+  border-radius: 0px;
+  transition: all 0.2s;
+  background: rgba(26, 61, 102, 0.8);
+  font-size: 18px;
+  padding-left: 0;
+  }
+}
+.flex-r{
+  .el-form-item__content{
+ display: flex;
+  }
+ 
+}
+
+</style>