<style>
  .loginDiv {
    width: 100%;
    height: 100%;
    background-image: url("../assets/img/loginBack.jpg");
    position: relative;
    background-size: cover;
    background-size: 100% 100%;
    background-position: center;
  }

  .loginDiv .loginOpacity {
    background-color: rgba(0, 0, 0, 0.15);
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
  }

  .loginDiv .box-card {
    position: relative;
    border-radius: 15px;
    z-index: 99;
    border: 0;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .5);
    width: 825px;
    height: 480px;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: 100% 100%;
    background-image: url("../assets/img/loginBack.jpg");
  }

  [flex] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
  }

  [flex~="main:center"] {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center
  }

  [flex~="cross:center"] {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .loginDiv .logo {
    position: absolute;
    left: 40px;
    top: 40px;
    height: 50px;
  }

  .loginDiv .login-form {
    padding: 50px 45px 30px;
    height: 480px;
    width: 335px;
    float: right;
    background-color: #fff;
  }

  .loginDiv .form-title {
    font-size: 26px;
    color: #1F4881;
    margin-bottom: 40px;
  }

  .loginDiv .el-form-item--mini.el-form-item,
  .loginDiv .el-form-item--small.el-form-item {
    margin-bottom: 18px;
  }

  .loginDiv .el-input .el-input__inner {
    height: 36px;
    border-radius: 18px;
    background-color: #f7f5fb;
    border-color: #f7f5fb;
  }

  .loginDiv .el-input__inner {
    -webkit-appearance: none;
    background-color: #FFF;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
    width: 100%;
  }

  .loginDiv .register_box {
    position: absolute;
    right: 15%;
    bottom: 35px;
    width: 150px;
    font-size: 14px;
  }

  .loginDiv .register {
    display: inline-block;
    width: 48%;
    height: 15px;
    line-height: 15px;
    text-align: center;
    cursor: pointer;
    color: #4291ff;
  }

  .loginDiv .login-btn {
    width: 100%;
    border-radius: 20px;
    height: 38px;
    font-size: 16px;
    background: linear-gradient(to right, #2E9FFF, #3E79FF);
    box-shadow: 0 4px 10px rgba(0, 123, 255, .5);
  }

  .loginDiv .el-card__body {
    padding: 0;
  }

  .loginDiv .foot {
    position: absolute;
    bottom: 40px;
    left: 0;
    right: 0;
    width: auto;
    color: #fff;
    text-align: center;
    font-size: 16px;
  }

  .loginDiv .foot a,
  .loginDiv .foot a:visited {
    color: #f3f3f3;
  }

</style>
<template>
  <div class="loginDiv">
    <div class="loginOpacity" flex="cross:center main:center">
      <div class="el-card box-card is-always-shadow">
        <div class="el-card__body">
          <img alt class="logo" src="../assets/img/logo.png" />
          <el-form class="el-form login-form" :model="msg" :rules="rules" ref="msg" label-width="0">
            <div class="form-title">管理员登录</div>
            <el-form-item label="" prop="Account">
              <el-input v-model="msg.Account" placeholder="请输入用户名" maxlength="25" />
            </el-form-item>
            <el-form-item label="" prop="Password">
              <el-input type="password" v-model="msg.Password" placeholder="请输入密码" maxlength="25" />
            </el-form-item>
            <el-form-item label="" prop="ValidataCode" style="display:none;">
              <el-input v-model="msg.ValidataCode" style="width:140px;" placeholder="验证码" maxlength="25" />
              <img class="pic-captcha" src="/web/index.php?r=site%2Fpic-captcha&amp;v=5e9e7ef6a93ac6.36592545" />
            </el-form-item>
            <div class="el-form-item el-form-item--small">
              <div class="el-form-item__content" style="margin-left: 0px;">
                <label class="el-checkbox">
                  <span class="el-checkbox__input">
                    <span class="el-checkbox__inner"></span>
                    <input type="checkbox" aria-hidden="false" class="el-checkbox__original" value />
                  </span>
                  <span class="el-checkbox__label">
                    记住我，以后自动登录
                  </span>
                </label>
              </div>
            </div>
            <div class="el-form-item el-form-item--small">
              <div class="el-form-item__content" style="margin-left: 0px;">
                <button type="button" @click="submitForm('msg')"
                  class="el-button login-btn el-button--primary el-button--small is-round">
                  <span>登录</span>
                </button>
              </div>
            </div>
          </el-form>
          <img alt class="logo" />
          <div class="register_box">
            <span class="register" @click="CommonJump('Forgetpassword',{blank:'y'})">忘记密码?</span>
            <span class="register" @click="CommonJump('Register',{blank:'y'})" style="border-left: 1px solid rgb(169, 169, 169);">注册账号</span>
          </div>
        </div>
      </div>
      <div class="foot">
        <a target="_blank" href="javascript:void(0)" style="text-decoration: none;">
          由成都微途科技有限公司提供技术支持</a></div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        msg: {
          Account: '', //账号
          Password: '', //密码
          ValidataCode: '', //验证码
        },
        rules: {
          Account: [{
            required: true,
            message: "请输入用户名",
            trigger: "blur"
          }],
          Password: [{
            required: true,
            message: "请输入密码",
            trigger: "blur"
          }],
          ValidataCode: [{
            required: true,
            message: "请输入右侧图片上的文字",
            trigger: "blur"
          }]
        },
      };
    },
    created() {

    },
    methods: {
      //登录
      login() {
        if (this.msg.Account == "") {
          this.Info("请输入用户名!")
        }
        if (this.msg.Password == "") {
          this.Info("请输入密码!")
        }
        if (this.msg.ValidataCode == "") {
          this.Info("请输入验证码!")
        }
        this.apipost("/api/Tenant/Login", this.msg, res => {
          if (res.data.resultCode == 1) {
            var userData = res.data.data;
            var userJson = JSON.stringify(userData);
            localStorage.mall_userInfo = userJson;
            this.$router.push({
              path: "/index"
            });
          }
          else
          {
            this.Info(res.data.message);
          }
        })
      },
      submitForm(msg) {
        //提交创建、修改表单
        this.$refs[msg].validate(valid => {
          if (valid) {
            this.login();
          } else {
            return false;
          }
        });
      },
    },
    mounted() {
      if (!this.isOnline()) {
        this.msg.Account = "13551126755";
        this.msg.Password = "123456";
        this.msg.ValidataCode = "1234";
      }
    }
  };

</script>
