给蒙牛查看改logo版

src/views/login/index.vue

@@ -1,298 +1,298 @@
-<template>
-  <div v-if="isdisplay == 1"></div>
-  <div class="login-container" v-else>
-    <div class="content">
-      <div class="content-l"></div>
-      <div class="login">
-        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left" >
-          <div class="title-container">
-            <h3 class="title">万象设备管理系统</h3>
-            <b>WanXiang Equipment Management System</b>
-            <hr>
-          </div>
-          <el-form-item prop="username">
-            <span class="svg-container">
-              <svg-icon icon-class="user" />
-            </span>
-            <el-input ref="username" v-model="loginForm.username" placeholder="Username" name="username" type="text" tabindex="1" auto-complete="on" />
-          </el-form-item>
-
-          <el-form-item prop="password">
-            <span class="svg-container">
-              <svg-icon icon-class="password" />
-            </span>
-            <el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType" placeholder="Password" name="password" tabindex="2" auto-complete="on" @keyup.enter.native="handleLogin" />
-            <span class="show-pwd" @click="showPwd">
-              <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
-            </span>
-          </el-form-item>
-          <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;background:#50b5ff;" @click.native.prevent="handleLogin" >登录</el-button>
-        </el-form>
-      </div>
-    </div>
-  </div>
-  
-</template>
-
-<script>
-import { validUsername } from '@/utils/validate'
-import { getJson } from '@/api/common'
-import Cookies from 'js-cookie'
-import axios from 'axios';
-import { setToken } from '@/utils/auth' // get token from cookie
-export default {
-  name: 'Login',
-  data() {
-    const validateUsername = (rule, value, callback) => {
-      if (!validUsername(value)) {
-        callback(new Error('请输入正确的用户名'))
-      } else {
-        callback()
-      }
-    }
-    const validatePassword = (rule, value, callback) => {
-      const re = new RegExp(`^(?=.*[a-z])(?=.*\\d)(?=.*\\W)[^]{8,32}$`)
-      if (value === '') {
-        callback(new Error('请输入密码'))
-      } else if (!re.test(value)) {
-        callback(new Error('密码由8位以上数字，大小写字母，特殊字符组成'))
-      } else {
-        callback()
-      }
-    }
-    return {
-      loginForm: {
-        username: '',
-        password: ''
-      },
-      loginRules: {
-        username: [
-          { required: true, trigger: 'blur', validator: validateUsername }
-        ],
-        password: [
-          { required: true, trigger: 'blur', validator: validatePassword }
-        ]
-      },
-      loading: false,
-      passwordType: 'password',
-      redirect: undefined,
-      isdisplay:Cookies.get('sso')
-    }
-  },
-  watch: {
-    $route: {
-      handler: function(route) {
-        this.redirect = route.query && route.query.redirect
-      },
-      immediate: true
-    }
-  },
-  created() {
-    // var that = this
-    // document.onkeydown = function(e) {
-    //   e = window.event || e
-    //   // eslint-disable-next-line eqeqeq
-    //   if (that.$route.path == '/login' && (e.code == 'Enter' || e.code == 'Num Enter')) { // 验证在登录界面和按得键是回车键enter
-    //     that.handleLogin('ruleForm2') // 登录函数 （handleSubmit2('ruleForm2')-登录按钮的点击事件）
-    //   }
-    // }
-    // 单点登录
-    if(Cookies.get('sso') == 1){
-     this.getcodeList()
-    }
-  },
-  methods: {
-    showPwd() {
-      if (this.passwordType === 'password') {
-        this.passwordType = ''
-      } else {
-        this.passwordType = 'password'
-      }
-      this.$nextTick(() => {
-        this.$refs.password.focus()
-      })
-    },
-    handleLogin() {
-      this.$refs.loginForm.validate(valid => {
-        if (valid) {
-          this.$store.dispatch('user/login', this.loginForm) .then(() => {
-            // const re = new RegExp(`^(?=.*[a-z])(?=.*\\d)(?=.*\\W)[^]{8,32}$`)
-            // if (!re.test(this.loginForm.password)) {
-            //   this.$router.push('/console/Changpwd')
-            //   console.log('密码不符合要求')
-            // }
-            this.$router.push({ path: this.redirect || '/' })
-            this.loading = false
-          }).catch(() => {
-            this.loading = false
-          })
-        } else {
-          console.log('error submit!!')
-          return false
-        }
-      })
-    },
-    getcodeList(){
-      this.$store.dispatch('user/login', this.loginForm) .then(() => {
-      }).catch(() => {
-        this.loading = false
-      })
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-/* 修复input 背景不协调 和光标变色 */
-/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
-
-// $bg: #283443;
-// $light_gray: #fff;
-// $cursor: #fff;
-// 更改
-$bg: #ccc;
-$light_gray: #ccc;
-$cursor: #000;
-@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
-  .login-container .el-input input {
-    color: $cursor;
-  }
-}
-
-/* reset element-ui css */
-.login-container {
-  .el-input {
-    display: inline-block;
-    height: 38px;
-    width: 85%;
-
-    input {
-      background: transparent;
-      border: 0px;
-      -webkit-appearance: none;
-      border-radius: 0px;
-      padding: 5px 5px 5px 15px;
-      color: #000;
-      height: 38px;
-      caret-color: $cursor;
-
-      &:-webkit-autofill {
-        box-shadow: 0 0 0px 1000px $bg inset !important;
-        -webkit-text-fill-color: $cursor !important;
-      }
-    }
-  }
-
-  .el-form-item {
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    background: rgba(0, 0, 0, 0.2);
-    border-radius: 5px;
-    color: #454545;
-    .el-form-item__content {
-      line-height: 30px;
-    }
-  }
-}
-</style>
-
-<style lang="scss" scoped>
-$bg: #2d3a4b;
-$dark_gray: #889aa4;
-$light_gray: #000;
-
-.login-container {
-  min-height: 100%;
-  width: 100%;
-  position: relative;
-  background: url("../../assets/images/login.png") no-repeat;
-  background-size:cover;
-  overflow: hidden;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  .logo{
-    padding: 5px;
-  }
-  .bujian{
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 200px;
-    margin: auto;
-  }
-  .login {
-    padding: 30px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: auto;
-    bottom: 0;
-    .tips {
-      font-size: 14px; color: #fff; margin-bottom: 10px;
-      span { &:first-of-type { margin-right: 16px; } }
-    }
-
-    .svg-container { padding: 6px 5px 6px 15px; color: $dark_gray; vertical-align: middle; width: 30px; display: inline-block; }
-
-    .title-container {
-      position: relative;
-      .title { font-size: 28px; color: $light_gray; margin: 0px auto 0 auto; text-align: center; font-weight: bold; }
-      b { text-align: center; font: 14px/2 ""; display: block; }
-    }
-
-    .show-pwd { position: absolute; right: 10px; top: 7px; font-size: 16px; color: $dark_gray; cursor: pointer; user-select: none; }
-    hr { color: #ccc; margin: 20px 0; }
-  }
-}
-.content{
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  margin: 0 auto;
-}
-@media (min-width: 770px) {
-   .content{
-      width: 770px;
-      height: 420px;
-    }
-   .content-l{
-    float: left;
-    width: 420px;
-    height: 420px;
-    background: url("../../assets/images/login-l.jpg") no-repeat;
-    background-size:cover;
-  }
-  .login{
-    float: left;
-    width: 350px;
-    height: 420px;
-    background: url("../../assets/images/login-r.jpg") no-repeat;
-    background-size:cover;
-  }
-  .login-form { position: relative; width: 224px; max-width: 100%; overflow: hidden; }
-}
- @media (min-width: 1100px) {
-   .content{
-      width: 1100px;
-      height: 600px;
-    }
-   .content-l{
-    float: left;
-    width: 593px;
-    height: 593px;
-    background: url("../../assets/images/login-l.jpg") no-repeat;
-    background-size:cover;
-  }
-  .login{
-    float: left;
-    width: 495px;
-    height: 593px;
-    background: url("../../assets/images/login-r.jpg") no-repeat;
-    background-size:cover;
-  }
-  .login-form { position: relative; width: 330px; max-width: 100%; overflow: hidden; }
-}
-
-</style>
+<template>
+  <div v-if="isdisplay == 1"></div>
+  <div class="login-container" v-else>
+    <div class="content">
+      <div class="content-l"></div>
+      <div class="login">
+        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left" >
+          <div class="title-container">
+            <h3 class="title">科湃腾设备管理系统</h3>
+            <b>KePaiTeng Equipment Management System</b>
+            <hr>
+          </div>
+          <el-form-item prop="username">
+            <span class="svg-container">
+              <svg-icon icon-class="user" />
+            </span>
+            <el-input ref="username" v-model="loginForm.username" placeholder="Username" name="username" type="text" tabindex="1" auto-complete="on" />
+          </el-form-item>
+
+          <el-form-item prop="password">
+            <span class="svg-container">
+              <svg-icon icon-class="password" />
+            </span>
+            <el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType" placeholder="Password" name="password" tabindex="2" auto-complete="on" @keyup.enter.native="handleLogin" />
+            <span class="show-pwd" @click="showPwd">
+              <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
+            </span>
+          </el-form-item>
+          <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;background:#50b5ff;" @click.native.prevent="handleLogin" >登录</el-button>
+        </el-form>
+      </div>
+    </div>
+  </div>
+  
+</template>
+
+<script>
+import { validUsername } from '@/utils/validate'
+import { getJson } from '@/api/common'
+import Cookies from 'js-cookie'
+import axios from 'axios';
+import { setToken } from '@/utils/auth' // get token from cookie
+export default {
+  name: 'Login',
+  data() {
+    const validateUsername = (rule, value, callback) => {
+      if (!validUsername(value)) {
+        callback(new Error('请输入正确的用户名'))
+      } else {
+        callback()
+      }
+    }
+    const validatePassword = (rule, value, callback) => {
+      const re = new RegExp(`^(?=.*[a-z])(?=.*\\d)(?=.*\\W)[^]{8,32}$`)
+      if (value === '') {
+        callback(new Error('请输入密码'))
+      } else if (!re.test(value)) {
+        callback(new Error('密码由8位以上数字，大小写字母，特殊字符组成'))
+      } else {
+        callback()
+      }
+    }
+    return {
+      loginForm: {
+        username: '',
+        password: ''
+      },
+      loginRules: {
+        username: [
+          { required: true, trigger: 'blur', validator: validateUsername }
+        ],
+        password: [
+          { required: true, trigger: 'blur', validator: validatePassword }
+        ]
+      },
+      loading: false,
+      passwordType: 'password',
+      redirect: undefined,
+      isdisplay:Cookies.get('sso')
+    }
+  },
+  watch: {
+    $route: {
+      handler: function(route) {
+        this.redirect = route.query && route.query.redirect
+      },
+      immediate: true
+    }
+  },
+  created() {
+    // var that = this
+    // document.onkeydown = function(e) {
+    //   e = window.event || e
+    //   // eslint-disable-next-line eqeqeq
+    //   if (that.$route.path == '/login' && (e.code == 'Enter' || e.code == 'Num Enter')) { // 验证在登录界面和按得键是回车键enter
+    //     that.handleLogin('ruleForm2') // 登录函数 （handleSubmit2('ruleForm2')-登录按钮的点击事件）
+    //   }
+    // }
+    // 单点登录
+    if(Cookies.get('sso') == 1){
+     this.getcodeList()
+    }
+  },
+  methods: {
+    showPwd() {
+      if (this.passwordType === 'password') {
+        this.passwordType = ''
+      } else {
+        this.passwordType = 'password'
+      }
+      this.$nextTick(() => {
+        this.$refs.password.focus()
+      })
+    },
+    handleLogin() {
+      this.$refs.loginForm.validate(valid => {
+        if (valid) {
+          this.$store.dispatch('user/login', this.loginForm) .then(() => {
+            // const re = new RegExp(`^(?=.*[a-z])(?=.*\\d)(?=.*\\W)[^]{8,32}$`)
+            // if (!re.test(this.loginForm.password)) {
+            //   this.$router.push('/console/Changpwd')
+            //   console.log('密码不符合要求')
+            // }
+            this.$router.push({ path: this.redirect || '/' })
+            this.loading = false
+          }).catch(() => {
+            this.loading = false
+          })
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    getcodeList(){
+      this.$store.dispatch('user/login', this.loginForm) .then(() => {
+      }).catch(() => {
+        this.loading = false
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+/* 修复input 背景不协调 和光标变色 */
+/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
+
+// $bg: #283443;
+// $light_gray: #fff;
+// $cursor: #fff;
+// 更改
+$bg: #ccc;
+$light_gray: #ccc;
+$cursor: #000;
+@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
+  .login-container .el-input input {
+    color: $cursor;
+  }
+}
+
+/* reset element-ui css */
+.login-container {
+  .el-input {
+    display: inline-block;
+    height: 38px;
+    width: 85%;
+
+    input {
+      background: transparent;
+      border: 0px;
+      -webkit-appearance: none;
+      border-radius: 0px;
+      padding: 5px 5px 5px 15px;
+      color: #000;
+      height: 38px;
+      caret-color: $cursor;
+
+      &:-webkit-autofill {
+        box-shadow: 0 0 0px 1000px $bg inset !important;
+        -webkit-text-fill-color: $cursor !important;
+      }
+    }
+  }
+
+  .el-form-item {
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 5px;
+    color: #454545;
+    .el-form-item__content {
+      line-height: 30px;
+    }
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+$bg: #2d3a4b;
+$dark_gray: #889aa4;
+$light_gray: #000;
+
+.login-container {
+  min-height: 100%;
+  width: 100%;
+  position: relative;
+  background: url("../../assets/images/login.png") no-repeat;
+  background-size:cover;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  .logo{
+    padding: 5px;
+  }
+  .bujian{
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 200px;
+    margin: auto;
+  }
+  .login {
+    padding: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: auto;
+    bottom: 0;
+    .tips {
+      font-size: 14px; color: #fff; margin-bottom: 10px;
+      span { &:first-of-type { margin-right: 16px; } }
+    }
+
+    .svg-container { padding: 6px 5px 6px 15px; color: $dark_gray; vertical-align: middle; width: 30px; display: inline-block; }
+
+    .title-container {
+      position: relative;
+      .title { font-size: 28px; color: $light_gray; margin: 0px auto 0 auto; text-align: center; font-weight: bold; }
+      b { text-align: center; font: 14px/2 ""; display: block; }
+    }
+
+    .show-pwd { position: absolute; right: 10px; top: 7px; font-size: 16px; color: $dark_gray; cursor: pointer; user-select: none; }
+    hr { color: #ccc; margin: 20px 0; }
+  }
+}
+.content{
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  margin: 0 auto;
+}
+@media (min-width: 770px) {
+   .content{
+      width: 770px;
+      height: 420px;
+    }
+   .content-l{
+    float: left;
+    width: 420px;
+    height: 420px;
+    background: url("../../assets/images/login-l.jpg") no-repeat;
+    background-size:cover;
+  }
+  .login{
+    float: left;
+    width: 350px;
+    height: 420px;
+    background: url("../../assets/images/login-r.jpg") no-repeat;
+    background-size:cover;
+  }
+  .login-form { position: relative; width: 224px; max-width: 100%; overflow: hidden; }
+}
+ @media (min-width: 1100px) {
+   .content{
+      width: 1100px;
+      height: 600px;
+    }
+   .content-l{
+    float: left;
+    width: 593px;
+    height: 593px;
+    background: url("../../assets/images/login-l.jpg") no-repeat;
+    background-size:cover;
+  }
+  .login{
+    float: left;
+    width: 495px;
+    height: 593px;
+    background: url("../../assets/images/login-r.jpg") no-repeat;
+    background-size:cover;
+  }
+  .login-form { position: relative; width: 330px; max-width: 100%; overflow: hidden; }
+}
+
+</style>