v3-lab-web/src/views/basicsModules/login.vue

<template>
  <div class="login-page scrollbar-box">
    <img class="logo-img" :src="rectangleLogo">
    <div class="title-img-box">
      <div>
        <img class="title-img" src="@/assets/ZDimages/basicsModules/title_icon.png">
      </div>
    </div>
    <div v-if="loginBoxType == 1" 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" :class="userTypeCode == 1||userTypeCode == 4?'username-input-box-code':''">
          <img src="@/assets/ZDimages/basicsModules/icon_dl_zh.png" alt="">
          <input type="text" v-model="loginForm.username" placeholder="请输入账号" maxlength="20" @keyup.enter="handleLogin(1)">
        </div>
        <div class="password-input-box" :class="userTypeCode == 2||userTypeCode == 4?'username-input-box-code':''">
          <img src="@/assets/ZDimages/basicsModules/icon_dl_mm.png" alt="">
          <input type="password" v-model="loginForm.password" placeholder="请输入密码" maxlength="20" @keyup.enter="handleLogin(1)">
        </div>
        <p class="text-p">{{text}}</p>
        <div class="code-input-box">
          <div class="code-input-left-box" :class="userTypeCode == 3||userTypeCode == 5?'username-input-box-code':''">
            <img src="@/assets/ZDimages/basicsModules/icon_dl_yzm.png" alt="">
            <input type="text" v-model="loginForm.code" placeholder="请输入验证码" maxlength="4" @keyup.enter="handleLogin(1)">
          </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(1)"
          >
            <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>-->
          <div class="forgotPasswordBox">
            <p class="forgotPasswordNull"></p>
            <p class="forgotPassword">忘记密码</p>
            <p class="forgotPasswordNull"></p>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div v-if="loginBoxType == 2" class="form-box-one">
      <div class="form-title-box">
        <p class="form-title-null"></p>
        <p class="form-title-p" :class="loginType==1?'form-title-p-color':''" @click="loginTypeClick(1)">密码登录</p>
        <p class="form-title-p" :class="loginType==2?'form-title-p-color':''" @click="loginTypeClick(2)">短信登录</p>
        <p class="form-title-null"></p>
      </div>
      <el-form ref="loginForm"v-show="loginType == 1"
               :model="loginForm" :rules="loginRules" class="login-form-one">
        <div class="username-input-box" :class="userTypeCode == 1||userTypeCode == 4?'username-input-box-code':''">
          <img src="@/assets/ZDimages/basicsModules/icon_dl_zh.png" alt="">
          <input type="text" v-model="loginForm.username" placeholder="请输入账号" maxlength="20" @keyup.enter="handleLogin(1)">
        </div>
        <div class="password-input-box" :class="userTypeCode == 2||userTypeCode == 4?'username-input-box-code':''">
          <img src="@/assets/ZDimages/basicsModules/icon_dl_mm.png" alt="">
          <input type="password" v-model="loginForm.password" placeholder="请输入密码" maxlength="20" autocomplete="new-password" @keyup.enter="handleLogin(1)">
        </div>
        <p class="text-p">{{text}}</p>
        <div class="code-input-box">
          <div class="code-input-left-box" :class="userTypeCode == 3||userTypeCode == 5?'username-input-box-code':''">
            <img src="@/assets/ZDimages/basicsModules/icon_dl_yzm.png" alt="">
            <input type="text" v-model="loginForm.code" placeholder="请输入验证码" maxlength="4" @keyup.enter="handleLogin(1)">
          </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(1)"
          >
            <span v-if="!loading">登 录</span>
            <span v-else>登 录 中...</span>
          </el-button>
          <div class="forgotPasswordBox">
            <p class="forgotPasswordNull"></p>
            <p class="forgotPassword">忘记密码</p>
            <p class="forgotPasswordNull"></p>
          </div>
          <!--<div style="float: right;" v-if="register">-->
            <!--<router-link class="link-type" :to="'/register'">立即注册</router-link>-->
          <!--</div>-->
        </el-form-item>
      </el-form>
      <el-form ref="loginFormTwo" v-show="loginType == 2"
               :model="loginFormTwo" :rules="loginRulesTwo" class="login-form-two">
        <div class="username-input-box">
          <img src="@/assets/ZDimages/basicsModules/user.png" alt="">
          <p>
            <span>+86</span>
            <span>丨</span>
          </p>
          <input type="text" v-model="loginFormTwo.username" placeholder="请输入联系方式"
                 onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"
                 maxlength="11">
        </div>
        <p class="text-p">{{textTwo}}</p>
        <div class="code-input-box">
          <div class="code-input-left-box">
            <img src="@/assets/ZDimages/basicsModules/code.png" alt="">
            <input type="text" v-model="loginFormTwo.password" placeholder="请输入验证码"
                   onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"
                   maxlength="6">
          </div>
          <div class="login-code" :class="codeNum>0?'login-code-one':'login-code-two'" @click="getCodeOne">
            获取验证码 {{codeNum>0?'('+codeNum+')':''}}
            <!--<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(2)"
          >
            <span v-if="!loading">登 录</span>
            <span v-else>登 录 中...</span>
          </el-button>
          <div class="forgotPasswordBox">
            <p class="forgotPasswordNull"></p>
            <p class="forgotPassword">忘记密码</p>
            <p class="forgotPasswordNull"></p>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <p class="introduction-p">技术支持：江苏忠江智能科技有限公司</p>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import { encrypt, decrypt } from '@/utils/jsencrypt'
import store from '@/store'
import { authInfo,getCodeImg,initPage,sendCode,getRouters} from "@/api/basicsModules/index";
import { Encrypt,Decrypt} from '@/utils/secret'
import { getConfigByType } from "@/api/commonality/permission";
import { configInfo } from "@/api/commonality/noPermission";

export default {
  name: "Login",
  data() {
    return {
      loginBoxType:0,
      codeUrl: "",
      cookiePassword: "",
      type:1,
      loginForm: {
        username: "superadmin",
        password: "zd123456",
        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,
      // 验证码开关
      captchaOnOff: true,
      // 注册开关
      register: false,
      redirect: undefined,
      text:"",
      userTypeCode:"",
      rectangleLogo:localStorage.getItem('rectangleLogo'),
      //手机登录
      loginType:1,
      loginFormTwo:{
        username:"",
        password:"",
      },
      loginRulesTwo:{
        username: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          { required: true, message: "请输入手机号码", validator: this.spaceJudgment, trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入验证码", trigger: "blur" },
          { required: true, message: "请输入验证码", validator: this.spaceJudgment, trigger: "blur" }
        ],
      },
      textTwo:"",
      codeNum:"",
      timer:null,
      codeButtonType:true,
    };
  },
  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();
  },
  mounted(){
    this.authInfo();
    this.configInfo();
  },
  methods: {
    //获取登录配置
    authInfo(){
      authInfo().then(response => {
        let idType = false;
        let phoneType = false;
        for(let i=0;i<response.data.length;i++){
          if(response.data[i].id == 0){
            idType = response.data[i].enable;
          }
          if(response.data[i].id == 1){
            phoneType = response.data[i].enable;
          }
        }
        if( idType && phoneType ){
          this.$set(this,'loginBoxType',2);
        }else{
          this.$set(this,'loginBoxType',1);
        }
      });
    },
    //获取公共配置数据
    configInfo(){
      let self = this;
      configInfo({ type: '1,2,3' }).then(response => {
        let list = JSON.parse(response.data)
        let newData = {};
        list.forEach((item) => {
          let obj = JSON.parse(item.configValue)
          newData = {...newData,...obj}
        })
        setTimeout(function(){
          self.$set(self,'rectangleLogo',newData.rectangleLogo);
          localStorage.setItem('schoolName',newData.schoolName)
          localStorage.setItem('circularLogo',newData.circularLogo)
          localStorage.setItem('rectangleLogo',newData.rectangleLogo)
          localStorage.setItem('videoCover',newData.videoCover)
          store.dispatch('settings/setSmartAlarmType', newData.smartLock)
          localStorage.setItem('setSmartAlarmType',newData.smartLock)
        },200);
      });
    },
    //获取开发配置
    getExploitConfig(){
      getConfigByType({ category: 2, configType: 5 }).then(response => {
        let obj = JSON.parse(response.data.configValue)
        //判定http或者https
        let urlText = window.location.href.split('://')[0]+'://';
        let outerNet = window.location.href.indexOf(obj.ipIdentify) == -1//true外网 false 内网
        if(outerNet){//外网
          //文件预览地址
          localStorage.setItem('filePreviewUrl',urlText+obj.fileExtranetUrl)
          //摄像头代理访问地址
          localStorage.setItem('cameraExtranetAgent',urlText+obj.cameraExtranetAgent)
          //摄像头地址ip段
          localStorage.setItem('ipIdentify',obj.ipIdentify)
          //摄像头访问地址
          localStorage.setItem('cameraUrl','wss://'+obj.cameraExtranetUrl)
          //MQTT地址
          localStorage.setItem('mqttUrl','wss://'+Decrypt(obj.mqttExtranetUrl))
          //MQTT账号
          localStorage.setItem('mqttUser',Decrypt(obj.mqttExtranetUser))
          //MQTT密码
          localStorage.setItem('mqttPassword',Decrypt(obj.mqttExtranetPassword))
          //可视化大屏访问地址
          localStorage.setItem('screenUrl',urlText+obj.screenExtranetUrl)
          //小程序二维码规则
          localStorage.setItem('codeOnlineAdd',obj.codeOnlineAdd)
        }else{
          //文件预览地址
          localStorage.setItem('filePreviewUrl',urlText+obj.fileIntranetUrl)
          //摄像头代理访问地址
          localStorage.setItem('cameraExtranetAgent',urlText+obj.cameraIntranetAgent)
          //摄像头地址ip段
          localStorage.setItem('ipIdentify',obj.ipIdentify)
          //摄像头访问地址
          localStorage.setItem('cameraUrl','wss://'+obj.cameraIntranetUrl)
          //MQTT地址
          localStorage.setItem('mqttUrl','ws://'+Decrypt(obj.mqttIntranetUrl))
          //MQTT账号
          localStorage.setItem('mqttUser',Decrypt(obj.mqttIntranetUser))
          //MQTT密码
          localStorage.setItem('mqttPassword',Decrypt(obj.mqttIntranetPassword))
          //可视化大屏访问地址
          localStorage.setItem('screenUrl',urlText+obj.screenIntranetUrl)
          //小程序二维码规则
          localStorage.setItem('codeOnlineAdd',obj.codeOnlineAdd)
        }
      });
    },
    //获取首页配置
    getHomeConfig(){
      getConfigByType({ category: 2, configType: 6 }).then(response => {
        localStorage.setItem('homeConfig',response.data.configValue);
        let obj = JSON.parse(response.data.configValue)
        localStorage.setItem('initPage',obj.skipHomePage);
      });
    },
    getCode() {
      getCodeImg().then(res => {
        this.captchaOnOff = res.captchaOnOff === undefined ? true : res.captchaOnOff;
        if (this.captchaOnOff) {
          this.codeUrl = "data:image/gif;base64," + res.data.image;
          this.loginForm.uuid = res.data.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(type) {
      let self = this;
      if(type == 1){
        //账号登录
        if(this.loginForm.username.length<1){
          this.text = "*请输入账号";
          this.userTypeCode = "1";
          return
        }else if(this.loginForm.password.length<1){
          this.text = "*请输入密码";
          this.userTypeCode = "2";
          return
        }else if(!this.loginForm.code||this.loginForm.code.length<1){
          this.text = "*请输入验证码";
          this.userTypeCode = "3";
          return
        }
        this.text = "";
        this.userTypeCode = "";
        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');
            }
            this.$store.dispatch("Login", this.loginForm).then((res) => {
              if(res.code != 200){
                this.text = "*"+res.message;
                if(res.code == 530){
                  this.userTypeCode = "4";
                }else if(res.code == 503){
                  this.userTypeCode = "5";
                }
                this.loading = false;
                this.getCode();
                return
              }
              this.getExploitConfig();
              this.getHomeConfig();
              // localStorage.setItem('initPage',res.data.skipHomePage);
              if(res.data.reset_password){
                this.$confirm('账号当前登录密码为默认密码,是否现在修改?', "提示", {
                  confirmButtonText: "确定",
                  cancelButtonText: "取消",
                  type: "warning"
                }).then(function() {
                  let routeData = JSON.parse(localStorage.getItem("routeData"))
                  for(let i=0;i<routeData.length;i++){
                    if(!routeData[i].hidden&&routeData[i].name != 'Https://www.sxitdlc.com'){
                      store.dispatch('settings/setPageName', routeData[i].meta.title)
                      self.$store.commit("SET_SIDEBAR_ROUTERS", routeData[i].children);
                      self.$router.push({ path: '/comprehensive/system/mine' });
                      break
                    }
                  }
                }).then(() => {
                }).catch(() => {
                });
              }
              //身份字段规则转义 原定11老师 22学生  新版本后0系统1老师2学生,这里身份字段转义为旧版本规则
              localStorage.setItem('userType',res.data.userType==0||res.data.userType==1?'11':'22')
              localStorage.setItem('userId',res.data.userId)
              // if(res.data.userType){
                //临时注销了
                // localStorage.setItem('identity',res.data.screen_token);
                // localStorage.setItem('identityType',res.data.screen_type);
              // }
              this.fullScreen();
              this.$router.push({ path: this.redirect || "/home" }).catch(()=>{});
            }).catch(() => {
              this.loading = false;
              if (this.captchaOnOff) {
                this.getCode();
              }
            });
          }
        });
      }else if(type == 2){
        //手机号码登录
        if(this.checkPhone(this.loginFormTwo.username)){
          if(!this.loginFormTwo.password){
            this.textTwo = '*请输入正确的验证码';
            return
          }
          this.textTwo = "";
          this.$refs.loginFormTwo.validate(valid => {
            if (valid) {
              this.loading = true;
              this.loginFormTwo.authType = 'mobile'
              this.$store.dispatch("LoginPhone", this.loginFormTwo).then((res) => {
                if(res.code != 200){
                  this.textTwo = "*"+res.message;
                  if(res.code == 530){
                    this.textTwo = "*"+res.message;
                  }else if(res.code == 503){
                    this.textTwo = "*"+res.message;
                  }
                  this.loading = false;
                  return
                }
                this.getExploitConfig();
                this.getHomeConfig();
                // localStorage.setItem('initPage',res.data.skipHomePage);
                if(res.data.reset_password){
                  this.$confirm('账号当前登录密码为默认密码,是否现在修改?', "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                  }).then(function() {
                    let routeData = JSON.parse(localStorage.getItem("routeData"))
                    for(let i=0;i<routeData.length;i++){
                      if(!routeData[i].hidden&&routeData[i].name != 'Https://www.sxitdlc.com'){
                        store.dispatch('settings/setPageName', routeData[i].meta.title)
                        self.$store.commit("SET_SIDEBAR_ROUTERS", routeData[i].children);
                        self.$router.push({ path: '/comprehensive/system/mine' });
                        break
                      }
                    }
                  }).then(() => {
                  }).catch(() => {
                  });
                }
                localStorage.setItem('userType',res.data.userType==0||res.data.userType==1?'11':'22')
                localStorage.setItem('userId',res.data.userId)
                // if(res.data.userType){
                  //身份字段规则转义 原定11老师 22学生  新版本后0系统1老师2学生,这里身份字段转义为旧版本规则
                  //临时注销了
                  // localStorage.setItem('identity',res.data.screen_token);
                  // localStorage.setItem('identityType',res.data.screen_type);
                // }
                this.fullScreen();
                this.$router.push({ path: this.redirect || "/home" }).catch(()=>{});
              }).catch(() => {
                this.loading = false;
              });
            }
          });
        }
      }
    },
    //全屏
    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();
      }
    },
    /*******************手机登录*******************/
    loginTypeClick(type){
      if(type!=this.loginType){
        this.loginType = type;
      }
    },
    getCodeOne() {
      if(this.checkPhone(this.loginFormTwo.username)){
        if(this.codeButtonType){
          sendCode(this.loginFormTwo.username).then(response => {
            if(response.code != 200){
              this.textTwo = "*"+response.message;
              if(response.code == 530){
                this.textTwo = "*"+response.message;
              }
            }else {
              this.textTwo = "";
              // this.msgSuccess('发送成功');
              this.codeButtonType = false;
              this.time();
            }
          });
        }
      }
    },
    //定时器
    time(){
      let self = this;
      let time = 30;
      self.codeNum = parseInt(time);
      this.timer = window.setInterval(refreshCount, 1000);
      function refreshCount() {
        if(time<=0){
          self.codeNum = parseInt(time);
          self.codeButtonType = true;
          window.clearInterval(self.timer);
        }else{
          time--;
          self.codeNum = parseInt(time);
        }
      }
    },
    //手机号验证
    checkPhone(value) {
      if (!value) {
        this.textTwo = '*手机号不能为空哦~';
        return false
      } else {
        const reg = /^1[3|4|5|7|8|9][0-9]\d{8}$/;
        if (reg.test(value)) {
          this.textTwo = '';
          return true
        } else {
          this.textTwo = '*请输入正确的手机号码';
          return false
        }
      }
    },
  },
  beforeDestroy() {
    //清除定时器
    clearInterval(this.timer);
    console.log("beforeDestroy-timer");
  },
  destroyed() {
    //清除定时器
    clearInterval(this.timer);
    console.log("destroyed-timer");
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
  .login-page{
    height: 100%;
    width:100%;
    background-image: url("../../assets/ZDimages/basicsModules/icon_dl_bbg.png");
    background-repeat:no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    position: relative;
    *{
      margin:0;
    }
    .forgotPasswordBox{
      margin-top:5px;
      display: flex;
      .forgotPasswordNull{
        flex:1;
      }
      .forgotPassword{
        text-align: center;
        color:#ffffff;
        font-size:14px;
        cursor: pointer;
      }
      .forgotPassword:hover{
        color:#00ffff;
      }
    }
    .logo-img{
      position: absolute;
      top:29px;
      left:52px;
      width:250px;
      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/basicsModules/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-code:hover{
        box-shadow: 0 0 4px 1px rgba(255,39,39,1)!important;
      }
      .username-input-box-code{
        border: 1px solid #FF6A6A!important;
      }
      .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 {
          -webkit-box-shadow : 0 0 0 1000px rgba(1,25,67,1) inset !important;
          -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 {
          -webkit-box-shadow : 0 0 0 1000px rgba(1,25,67,1) inset !important;
          -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;
      }
    }
    .form-box-one{
      width:680px;
      height:520px;
      background-image: url("../../assets/ZDimages/basicsModules/img_dlk_bg_one.png");
      position: absolute;
      top:290px;
      left:50%;
      margin-left:-340px;
      .form-title-box{
        height:52px;
        display: flex;
        .form-title-null{
          flex:1;
        }
        .form-title-p{
          padding:0 30px;
          line-height:52px;
          font-size:20px;
          text-align: center;
          color:#fff;
          font-weight:700;
          cursor: pointer;
        }
        .form-title-p-color{
          color:#00ffff;
        }
      }
      .login-form-one {
        .form-title-p{
          line-height:52px;
          font-size:24px;
          text-align: center;
          color:#fff;
          font-weight:700;
        }
        .username-input-box-code:hover{
          box-shadow: 0 0 4px 1px rgba(255,39,39,1)!important;
        }
        .username-input-box-code{
          border: 1px solid #FF6A6A!important;
        }
        .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;
        }
      }
      .login-form-two{
        .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: 70px auto 0;
          display: flex;
          overflow: hidden;
          img{
            height:20px;
            width:20px;
            margin:19px 30px 19px 20px;
          }
          p{
            color: #999999;
            line-height:60px;
            span:nth-child(1){

            }
            span:nth-child(2){
              margin:0 10px;
            }
          }
          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:300px;
            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:19px 30px 19px 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-one{
            background: #999;
            color:#fff;
          }
          .login-code-two{
            background: #0045AF;
            color:#fff;
          }
          .login-code{
            width:160px;
            height:60px;
            line-height:60px;
            cursor: pointer;
            margin-left:20px;
            border-radius:10px;
            font-size:14px;
            text-align: center;
          }
        }
        .form-button-p{
          font-size:16px;
          display: block;
          width:480px;
          height: 60px;
          background: #0045AF;
          color:#fff;
          border:none;
          border-radius: 10px;
          margin:50px auto 0;
        }
      }
    }
    .introduction-p{
      width:100%;
      text-align: center;
      color:#fff;
      font-size:16px;
      line-height:44px;
      position: absolute;
      left:0;
      bottom:0;
    }
  }
</style>