<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/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/medicUniversity-3_1/user.png" alt="">
          <p>
            <span>+86</span>
            <span>丨</span>
          </p>
          <input type="text" v-model="loginForm.username" placeholder="请输入手机号"
                 onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"
                 maxlength="11" @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/medicUniversity-3_1/code.png" alt="">
            <input type="text" v-model="loginForm.code" placeholder="请输入验证码"
                   onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"
                   maxlength="6" @keyup.enter="handleLogin">
          </div>
          <div class="login-code" @click="getCode">
            获取验证码
            <!--<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,initPage } from "@/api/login";
    export default {
      name: "login",
      data() {
        return {
          loading:false,
          loginForm:{},
          rectangleLogo:localStorage.getItem('rectangleLogo'),
        }
      },
      created(){

      },
      mounted(){
        this.getLogoInfo();
        this.initPage();
      },
      methods: {
        getCode(){

        },
        handleLogin(){

        },
        //获取首页配置
        initPage(){
          initPage().then(response => {
            if(response.data){
              localStorage.setItem('initPage',true);
            }else{
              localStorage.setItem('initPage',false);
            }
          });
        },
        //获取公共配置数据
        getLogoInfo(){
          getLogoInfo().then(response => {
            this.rectangleLogo = response.data.rectangleLogo;
            localStorage.setItem('circularLogo',response.data.circularLogo)
            localStorage.setItem('rectangleLogo',response.data.rectangleLogo)
            localStorage.setItem('videoCover',response.data.videoCover)
          });
        },
      }
    }
</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:20px;
        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:70px;
        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:25px 30px 25px 20px;
        }
        p{
          color: #999999;
          line-height:70px;
          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:70px;
        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:70px;
          border: 1px solid #00FFFC;
          border-radius: 10px;
          background: rgba(0, 13, 41, 0.2);
          display: flex;
          overflow: hidden;
          img{
            height:20px;
            width:20px;
            margin:25px 30px 25px 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:160px;
          height:70px;
          line-height:70px;
          cursor: pointer;
          margin-left:20px;
          background: #0045AF;
          border-radius:10px;
          font-size:14px;
          color:#fff;
          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>
