loginpage

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

@@ -0,0 +1,267 @@
+<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>