修改登录界面

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

@@ -1,10 +1,10 @@
 <template>
-  <div style="width:100%;height:100%;">
-    <div class="login-header">
+  <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>-->
+    <!--<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">
@@ -34,6 +34,37 @@
           </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>
   
@@ -78,7 +109,12 @@
     },
     methods: {
       loginSuccess() {
-        this.$router.push({ path: '/main' });
+        if (this.form.userName == "admin" && this.form.password == "habook") {
+          this.$router.push({ path: '/main' });
+        } else {
+          this.$Message.error('账号或者密码错误！');
+        }
+        
       },
       handleSubmit() {
         this.$refs.loginForm.validate((valid) => {
@@ -89,7 +125,7 @@
             setTimeout(() => {
               this.loading = false;
               this.loginSuccess();
-            }, 1500);
+            }, 1200);
           }
         })
       }
@@ -97,15 +133,69 @@
   }
 </script>
 <style scoped>
+  .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_bg1.png');
+    background-image: url('../../assets/image/login_bg3.png');
     width: 100%;
     height: 100%;
     background-size: cover;
-    display: flex;
+    padding-top:180px;
+    /*display: flex;
     flex-direction: row;
     align-items: center;
-    justify-content: 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;