TEAMModelOS/TEAMModelOS.SmartClass/ClientApp/view/smart-class/LoginPage.vue

<template>
  <div class="login">
    <!--<div class="login-header">
      <img src="../../assets/image/e_logo5.png" class="logo" />
      <span class="welcome-login">欢迎登录</span>
    </div>-->
    <!--<div class="login">
      <div class="drag">
        <div style="background:rgba(255,255,255,0.1); border-radius:5px;">
          <Card icon="log-in" title="智慧课堂管理平台" :bordered="false" class="login-card">
            <div class="form-con">
              <Form ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit">
                <FormItem prop="userName">
                  <Input v-model="form.userName" placeholder="请输入用户名">
                  <span slot="prepend">
                    <Icon :size="16" type="ios-person"></Icon>
                  </span>
                  </Input>
                </FormItem>
                <FormItem prop="password">
                  <Input type="password" v-model="form.password" placeholder="请输入密码">
                  <span slot="prepend">
                    <Icon :size="14" type="md-lock"></Icon>
                  </span>
                  </Input>
                </FormItem>
                <FormItem>
                  <Button @click="handleSubmit" type="primary" :loading="loading" long>登&emsp;录</Button>
                </FormItem>
              </Form>
              <span style="float:left;color:#999999;cursor:pointer;">忘记密码？</span>
              <span style="float:right;color:#999999;cursor:pointer;">立刻注册>>></span>
            </div>
          </Card>
        </div>
      </div>
    </div>-->
    <div class="login-wrap">
      <div class="login-left">
        <img class="login-logo" src="../../assets/image/e_logo6.png"/>
        <img class="login-img" src="../../assets/image/login_img1.png" />
      </div>
      <div class="login-right">
        <div class="form-con">
          <Form ref="loginForm" :model="form" :rules="rules" @keydown.enter.native="handleSubmit">
            <FormItem prop="userName">
              <Input v-model="form.userName" placeholder="请输入用户名">
              <span slot="prepend">
                <Icon :size="30" type="ios-person"></Icon>
              </span>
              </Input>
            </FormItem>
            <FormItem prop="password">
              <Input type="password" v-model="form.password" placeholder="请输入密码">
              <span slot="prepend">
                <Icon :size="30" type="md-lock"></Icon>
              </span>
              </Input>
            </FormItem>
            <FormItem>
              <Button @click="handleSubmit" type="primary" :loading="loading" long style="padding:5px 0px; border-radius:25px;width:90%;margin-left:5%;font-size:18px;margin-top:15px;">登&emsp;录</Button>
            </FormItem>
          </Form>
          <!--<span style="float:left;color:#999999;cursor:pointer;">忘记密码？</span>
          <span style="float:right;color:#999999;cursor:pointer;">立刻注册>>></span>-->
        </div>
      </div>
    </div>
  </div>
  
</template>
<script>
  export default {
    name: 'LoginForm',
    props: {
      userNameRules: {
        type: Array,
        default: () => {
          return [
            { required: true, message: '账号不能为空', trigger: 'blur' }
          ]
        }
      },
      passwordRules: {
        type: Array,
        default: () => {
          return [
            { required: true, message: '密码不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    data() {
      return {
        loading:false,
        form: {
          userName: '',
          password: ''
        }
      }
    },
    computed: {
      rules() {
        return {
          userName: this.userNameRules,
          password: this.passwordRules
        }
      }
    },
    methods: {
      loginSuccess() {
        if (this.form.userName == "admin" && this.form.password == "habook") {
          this.$router.push({ path: '/main' });
        } else {
          this.$Message.error('账号或者密码错误！');
        }
        
      },
      handleSubmit() {
        this.$refs.loginForm.validate((valid) => {
          if (valid) {
            localStorage.setItem("userName", this.form.userName);
            localStorage.setItem("isLogin", 1);
            this.loading = true;
            setTimeout(() => {
              this.loading = false;
              this.loginSuccess();
            }, 1200);
          }
        })
      }
    }
  }
</script>
<style>
  .form-con {
    width:60%;
    margin-top:220px;
    margin:auto;
  }
    .form-con /deep/ .ivu-input {
      border: none;
      background-color: white !important;
      font-size:16px;
    }
    .form-con /deep/ .ivu-input-group-prepend {
      border:none;
      background-color:white;
      color:#5095FD;
      font-size:18px;
    }
    .form-con /deep/ .ivu-input-wrapper {
      border:none;
      border-bottom:1px solid #EFEFEF;
      margin-top:10px;
    }

  .login-right {
    width:49%;
    padding-top:100px;
    float:right;
  }
  .login-logo {
    width:300px;
  }
  .login-img {
    width:90%;
    margin-top:50px;
  }
  .login-left {
    width:50%;
    float:left;
    padding:0px 0px 0px 30px;
    border-right: 2px solid transparent;
		border-image: linear-gradient( top, #ffffff, #567dfd, #ffffff) 33 33;
		border-image: -webkit-linear-gradient( top, #ffffff, #567dfd,#ffffff) 33 33;
		border-image: -moz-linear-gradient( top, #ffffff, #567dfd, #ffffff) 33 33;
		border-image: -o-linear-gradient( top,#ffffff, #567dfd, #ffffff) 33 33;
  }
  .login {
    background-image: url('../../assets/image/login_bg3.png');
    width: 100%;
    height: 100%;
    background-size: cover;
    padding-top:180px;
    /*display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;*/
  }
  .login-wrap {
    width: 900px;
    height:500px;
    padding:25px 0px;
    background:white;
    margin:auto;
    border-radius:30px;
    box-sizing:border-box;
  }
  .welcome-login {
    float: right;
    line-height: 80px;
    margin-right: 120px;
    font-size: 22px;
    font-weight: 800;
    color: #1196D2;
  }
  .login-header {
    width:100%;
    height:80px;
    background-color:#fff;
    position:absolute;
    z-index:10;
    /*box-shadow: 0 -5px 10px 6px #41b6ba inset;*/
  }
  .logo {
    height: 60px;
    margin-top:10px;
    margin-left:100px;
  }
    .login:after {
      content: "";
      width: 100%;
      height: 100%;
      position: relative;
      left: 0;
      top: 0;
      background: inherit;
      filter: blur(4px);
      z-index: 1;
    }

  .drag {
    position: absolute;
    text-align: center;
    z-index: 11;
    border-radius: 5px;
    box-shadow: 0 0 10px 6px rgba(0,0,0,.5);
    width: 90%;
    max-width: 350px;
    background:white;
  }

  .login-tip {
    color: white;
  }

  .drag >>> .ivu-card-head p span {
    color: #555555;
    /*padding-top:10px;*/
    display:inline-block;
    font-size: 18px;
  }

  .login-card {
    background: none;
    padding-bottom:20px;
    color: black;
    width: 100%;
  }

  .login-wrap .ivu-input:focus{
      border: none !important;
      outline: none !important;
      box-shadow: none !important;
  }
</style>