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

<template>
  <div style="width:100%;height:100%;">
    <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>
  
</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() {
        this.$router.push({ path: '/main' });
      },
      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();
            }, 1500);
          }
        })
      }
    }
  }
</script>
<style scoped>
  .login {
    background-image: url('../../assets/image/login_bg1.png');
    width: 100%;
    height: 100%;
    background-size: cover;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .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%;
  }
</style>