<template>
  <div class="login-box">
    <div class="left"/>
    <div class="right">
      <div style="margin: 50px 0;font-size: 25px;font-weight: bolder;text-align: center">MCGS-SR-S1024-C4系统登录</div>
      <div style="margin: 20px 0;">
        <el-input v-model="loginParams.username" placeholder="请输入用户名">
          <template slot="prepend">
            <i class="el-icon-user" style="font-size: 25px"/>
          </template>
        </el-input>
      </div>
      <div style="margin: 20px 0;">
        <el-input v-model="loginParams.password" placeholder="请输入用户密码" show-password>
          <template slot="prepend">
            <i class="el-icon-key" style="font-size: 25px"/>
          </template>
        </el-input>
      </div>
      <div style="margin-top: 100px">
        <el-button style="width: 100%;" @click="handleLogin">登 录</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LoginBox',
  data () {
    return {
      loginParams: {
        username: '',
        password: '',
      },
    }
  },
  methods: {
    handleLogin() {
      console.log('login =>', this.loginParams)
      this.$emit('success', false)
    },
  },
}
</script>

<style lang="less" scoped>
  .login-box {
    margin-top: 100px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    background-color: #ebebeb;
    box-shadow: 0.1rem 0.1rem 0.1rem #AAA7A7, -0.1rem -0.1rem 0.1rem #FFFFFF;

    .left {
      width: 397px;
      height: 542px;
      background: url("~@/assets/login.png") center no-repeat;
      background-size: 397px 542px;
    }

    .right {
      display: flex;
      flex-direction: column;
      width: 400px;
      padding: 16px 32px;

      .el-input-group {
        display: flex;
      }

      /deep/ .el-input__inner {
        background-color: #ebebeb;
        box-shadow: inset 0.1rem 0.1rem 0.1rem #AAA7A7, inset -0.1rem -0.1rem 0.1rem #FFFFFF;
        border: none;
        font-size: 16px;
        color: #333333;
      }

      /deep/ .el-input-group__prepend {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border: none;
        background-color: #EBEBEB;
        box-shadow: 0.1rem 0.01rem 0.1rem #AAA7A7, -0.1rem -0.01rem 0.1rem #FFFFFF;
      }

      .el-button {
        border: none;
        text-align: center;
        margin: 0;
        font-weight: 500;
        padding: 12px 20px;
        font-size: 16px;
        border-radius: 4px;
        color: #FFFFFF;
        background: linear-gradient(#d52730, #a20d13);
        // box-shadow: inset 0.1rem 0.1rem 0.1rem #c8d0e7, inset -0.1rem -0.1rem 0.2rem #FFFFFF;
        box-shadow: 0.02rem 0.02rem 0.1rem #6e090c, -0.02rem -0.02rem 0.1rem #c71016;
      }

      .el-button:active {
        opacity: .8;
        --press: 5;
      }
    }
  }
</style>
