FE-V2-PC/src/views/bigDataLogin.vue

<template>
  <div class="login-page scrollbar-box">
    <img class="logo-img" src="@/assets/ZDimages/login/logo.png">
    <div class="title-img-box">
      <div>
        <img class="title-img" src="@/assets/ZDimages/login/title_icon.png">
        <!--<p>v 2.0</p>-->
      </div>
    </div>
    <div class="form-box">
      <p class="form-title-p">登录</p>
      <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
        <div class="username-input-box">
          <img src="@/assets/ZDimages/login/icon_dl_zh.png" alt="">
          <input type="text" v-model="loginForm.username" placeholder="请输入账号" maxlength="20" @keyup.enter="handleLogin">
        </div>
        <div class="password-input-box">
          <img src="@/assets/ZDimages/login/icon_dl_mm.png" alt="">
          <input type="password" v-model="loginForm.password" placeholder="请输入密码" maxlength="20" @keyup.enter="handleLogin">
        </div>
        <p class="text-p">{{text}}</p>
        <div class="code-input-box">
          <div class="code-input-left-box">
            <img src="@/assets/ZDimages/login/icon_dl_yzm.png" alt="">
            <input type="text" v-model="loginForm.code" placeholder="请输入验证码" maxlength="4" @keyup.enter="handleLogin">
          </div>
          <div class="login-code">
            <img :src="codeUrl" @click="getCode" class="login-code-img"/>
          </div>
        </div>
        <el-form-item>
          <el-button
            class="form-button-p"
            :loading="loading"
            size="medium"
            height="50"
            @click.native.prevent="handleLogin"
          >
            <span v-if="!loading">登 录</span>
            <span v-else>登 录 中...</span>
          </el-button>
          <div style="float: right;" v-if="register">
            <router-link class="link-type" :to="'/register'">立即注册</router-link>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <p class="introduction-p">技术支持：江苏忠江智能科技有限公司</p>
  </div>
</template>

<script>
  import { getCodeImg } from "@/api/login";
  import Cookies from "js-cookie";
  import { encrypt, decrypt } from '@/utils/jsencrypt'

  export default {
    name: "bigDataLogin",
    data() {
      return {
        codeUrl: "",
        cookiePassword: "",
        type:1,
        loginForm: {
          // username: "admin",
          // password: "admin123",
          username: "",
          password: "",
          rememberMe: false,
          code: "",
          uuid: "",
          // userType:""
        },
        loginRules: {
          // username: [
          //   { required: true, trigger: "blur", message: "请输入您的账号" }
          // ],
          // password: [
          //   { required: true, trigger: "blur", message: "请输入您的密码" }
          // ],
          // code: [{ required: true, trigger: "change", message: "请输入验证码" }]
        },
        loading: false,
        // 验证码开关
        captchaOnOff: true,
        // 注册开关
        register: false,
        redirect: undefined,
        text:"",
      };
    },
    watch: {
      $route: {
        handler: function(route) {
          this.redirect = route.query && route.query.redirect;
        },
        immediate: true
      }
    },
    created() {
      localStorage.setItem('windowHref',window.location.href)
      this.getCode();
      this.getCookie();
      this.exitFullscreen();
    },
    methods: {
      getCode() {
        getCodeImg().then(res => {
          this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff;
          if (this.captchaOnOff) {
            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() {
        if(this.loginForm.username.length<1){
          this.text = "*请输入账号";
          return
        }else if(this.loginForm.password.length<1){
          this.text = "*请输入密码";
          return
        }else if(!this.loginForm.code||this.loginForm.code.length<1){
          this.text = "*请输入验证码";
          return
        }
        this.text = "";
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            this.loading = true;
            this.$store.dispatch("Login", this.loginForm).then((res) => {
              if(res.data.type){
                window.location.href = localStorage.getItem('screenUrl') + '?identity=' + res.data.screen_token;

                this.fullScreen();
              }
            }).catch(() => {
              this.loading = false;
              if (this.captchaOnOff) {
                this.getCode();
              }
            });
          }
        });
      },
      //全屏
      fullScreen() {
        var element = document.documentElement;
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) {
          element.webkitRequestFullscreen();
        }
      },
      //退出全屏
      exitFullscreen() {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        }
      },
    }
  };
</script>

<style rel="stylesheet/scss" lang="scss">
  .login-page{
    height: 100%;
    width:100%;
    background-image: url("../assets/ZDimages/login/icon_dl_bbg.png");
    background-repeat:no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    position: relative;
    *{
      margin:0;
    }
    .logo-img{
      position: absolute;
      top:29px;
      left:52px;
      width:220px;
      height:55px;
    }
    .title-img-box{
      position: absolute;
      top:74px;
      left:50%;
      margin-left:-580px;
      width:1180px;
      height:230px;
      div{
        position: relative;
        img{
          width:1180px;
          height:230px;
        }
        p{
          position: absolute;
          top:72px;
          right:300px;
          width:50px;
          height:26px;
          line-height:26px;
          text-align: center;
          background: #0045AF;
          color:#fff;
          font-size:14px;
          border-radius:70px;
        }
      }
    }
    .form-box{
      width:680px;
      height:520px;
      background-image: url("../assets/ZDimages/login/img_dlk_bg.png");
      position: absolute;
      top:290px;
      left:50%;
      margin-left:-340px;
      .form-title-p{
        line-height:52px;
        font-size:24px;
        text-align: center;
        color:#fff;
        font-weight:700;
      }
      .username-input-box:hover{
        box-shadow: 0 0 4px 1px rgba(0, 255, 252, 1);
      }
      .username-input-box{
        width:480px;
        height:60px;
        border: 1px solid #00FFFC;
        border-radius: 10px;
        background: rgba(0, 13, 41, 0.2);
        margin: 40px auto 32px;
        display: flex;
        overflow: hidden;
        img{
          height:20px;
          width:20px;
          margin:20px;
        }
        input:-webkit-autofill {
          //input 背景色     #0C2034根据自己需要替换
          -webkit-box-shadow : 0 0 0px 1000px rgba(1,25,67,1) inset !important;
          //input字体颜色 颜色根据自己要求替换
          -webkit-text-fill-color: #FFFFFF !important;
        }
        input{
          flex:1;
          border:none;
          outline:none;
          background-color: transparent !important;
          color: #dedede;
          font-size:16px;
        }
        ::placeholder{
          color:#999999 ;
          font-size:16px;
        }
      }
      .password-input-box:hover{
        box-shadow: 0 0 4px 1px rgba(0, 255, 252, 1);
      }
      .password-input-box{
        width:480px;
        height:60px;
        border: 1px solid #00FFFC;
        border-radius: 10px;
        background: rgba(0, 13, 41, 0.2);
        margin: 0 auto;
        display: flex;
        overflow: hidden;
        img{
          height:20px;
          width:20px;
          margin:20px;
        }
        input:-webkit-autofill {
          //input 背景色     #0C2034根据自己需要替换
          -webkit-box-shadow : 0 0 0px 1000px rgba(1,25,67,1) inset !important;
          //input字体颜色 颜色根据自己要求替换
          -webkit-text-fill-color: #FFFFFF !important;
        }
        input{
          flex:1;
          border:none;
          outline:none;
          background-color: transparent !important;
          color: #dedede;
          font-size:16px;
        }
        ::placeholder{
          color:#999999 ;
          font-size:16px;
        }
      }
      .text-p{
        width:480px;
        height:59px;
        line-height: 59px;
        margin: 0 auto;
        font-size: 14px;
        font-family: Microsoft YaHei;
        color: #DC1616;
      }
      .code-input-box{
        width:480px;
        height:60px;
        display: flex;
        margin: 0 auto;
        .code-input-left-box:hover{
          box-shadow: 0 0 4px 1px rgba(0, 255, 252, 1);
        }
        .code-input-left-box{
          width:330px;
          height:60px;
          border: 1px solid #00FFFC;
          border-radius: 10px;
          background: rgba(0, 13, 41, 0.2);
          display: flex;
          overflow: hidden;
          img{
            height:20px;
            width:20px;
            margin:20px;
          }
          input:-webkit-autofill {
            -webkit-box-shadow: 0 0 0 1000px white inset !important;
          }
          input{
            flex:1;
            border:none;
            outline:none;
            background-color: transparent !important;
            color: #dedede;
            font-size:16px;
          }
          ::placeholder{
            color:#999999 ;
            font-size:16px;
          }
        }
        .login-code{
          width:124px;
          height:50px;
          margin:6px 0 0 25px;
          img {
            width:124px;
            height:50px;
            cursor: pointer;
            vertical-align: middle;
          }
        }
      }
      .form-button-p{
        font-size:16px;
        display: block;
        width:480px;
        height: 60px;
        background: #0045AF;
        color:#fff;
        border:none;
        border-radius: 10px;
        margin:34px auto 0;
      }
    }
    .introduction-p{
      width:100%;
      text-align: center;
      color:#fff;
      font-size:16px;
      line-height:44px;
      position: absolute;
      left:0;
      bottom:0;
    }
  }
  .login {
    /*display: flex;*/
    /*justify-content: right;*/
    /*padding-right:220px;*/
    /*align-items: center;*/
    height: 100%;
    width:100%;
    background-image: url("../assets/ZDimages/img_dl_bg.png");
    background-size: 100%;
    position: relative;
    .login-max-box{
      position: absolute;
      height:800px;
      width:1600px;
      background: #FFFFFF;
      border-radius: 30px;
      top:50%;
      left:50%;
      margin-top:-400px;
      margin-left:-800px;
      display: flex;
      .left-box{
        width:591px;
        height:500px;
        background-image: url("../assets/ZDimages/img_dl_sy.png");
        background-size: 100%;
        margin:172px 0 178px 140px;
      }
      .right-box{
        flex:1;
        .title {
          margin:91px 0 40px 0;
          text-align: center;
          padding:0;
          font-size: 50px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #0045AF;
          /*
          position: absolute;
          margin:0;
          top: -100px;
          right:-120px;
          font-size:60px;
          width:770px;
          text-align: center;
          font-weight:700;
          */
          -webkit-touch-callout: none; /* iOS Safari */
          -webkit-user-select: none; /* Chrome/Safari/Opera */
          -khtml-user-select: none; /* Konqueror */
          -moz-user-select: none; /* Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
          user-select: none; /* Non-prefixed version, currently not supported by any browser */
        }
        .login-form {
          border-radius: 6px;
          background: #ffffff;
          width: 500px;
          margin:0 auto;
          padding: 25px 25px 5px 25px;
          .el-input {
            height: 38px;
            input {
              height: 38px;
            }
          }
          .input-icon {
            height: 39px;
            width: 14px;
            margin-left: 2px;
          }
          .username-input-box{
            width:448px;
            height:48px;
            background: #f8f8f8;
            border: 1px solid #E0E0E0;
            border-radius:10px;
            display: flex;
            margin-bottom:30px;
            img{
              width:20px;
              height:20px;
              margin:14px 16px 0 16px;
            }
            input{
              height:46px;
              flex:1;
              background: #f8f8f8;
              outline: none;
              border:none;
              margin-right:20px;
              color:#333;
            }
            input::placeholder{
              color:#ccc;
            }
          }
          .password-input-box{
            width:448px;
            height:48px;
            background: #f8f8f8;
            border: 1px solid #E0E0E0;
            border-radius:10px;
            display: flex;
            img{
              width:20px;
              height:20px;
              margin:14px 16px 0 16px;
            }
            input{
              height:46px;
              flex:1;
              background: #f8f8f8;
              outline: none;
              border:none;
              margin-right:20px;
              color:#333;
            }
            input::placeholder{
              color:#ccc;
            }
          }
          .code-input-box{
            width:450px;
            height:50px;
            display: flex;
            margin-bottom:60px;
            .code-input-left-box{
              width:274px;
              height:48px;
              background: #f8f8f8;
              border: 1px solid #E0E0E0;
              border-radius:10px;
              img{
                width:20px;
                height:20px;
                margin:14px 16px 0 16px;
              }
              input{
                height:46px;
                flex:1;
                background: #f8f8f8;
                outline: none;
                border:none;
                margin-right:20px;
                color:#333;
              }
              input::placeholder{
                color:#ccc;
              }
              display: flex;
            }
            .login-code {
              margin-left:24px;
              width: 150px;
              height: 48px;
              img {
                width: 150px;
                height: 48px;
                cursor: pointer;
                vertical-align: middle;
              }
            }
          }
        }
        .login-tip {
          font-size: 13px;
          text-align: center;
          color: #bfbfbf;
        }
        .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;
        }
        .type-max-box{
          display: flex;
          margin-bottom:58px;
          width:450px;
          /*border-bottom:1px solid #e0e0e0;*/
          p{
            font-size:18px;
            text-align: center;
            line-height:56px;
            margin:0;
            color:#666666;
            cursor:pointer;
          }
          p:nth-child(1){
            width:90px;
            margin-right:30px;
          }
          p:nth-child(2){
            width:126px;
          }
          .typeColorA{
            color:#0045af;
            border-bottom:2px solid #0045af;
          }
        }
        .text-p{
          margin:0;
          width: 172px;
          height: 50px;
          font-size: 14px;
          font-family: Microsoft YaHei;
          color: #DC1616;
          line-height: 50px;
        }
      }
      .logo-img{
        position: absolute;
        left:20px;
        top:20px;
        width:267px;
        height:66px;
      }
    }
    .position-p{
      position: absolute;
      right:0;
      bottom:20px;
      width: 638px;
      height: 15px;
      font-size: 14px;
      color: #AAE1FF;
      line-height: 15px;
      padding:0;
      margin:0;
    }
  }
</style>