登录延时操作

TEAMModelOS.SmartClass/ClientApp/components/smart-class/headers.vue

@@ -1,17 +1,19 @@
 <template>
   <div class="headerContainer">
     <div class="header center-row">
-      <img src="../../assets/image/e_logo3.png" style="width:150px" />
+      <img src="../../assets/image/e_logo4.png" style="width:230px" />
       <ul>
         <li :class="this.$route.path ==  '/main/index' || activeIndex == 0 ? 'li-active':''" @click="handleMenuClick(0,'index')">首页</li>
         <li :class="this.$route.path ==  '/main/notice' || activeIndex == 1? 'li-active':''" @click="handleMenuClick(1,'notice')">通知公告</li>
-        <li :class="this.$route.path ==  '/main/LiveBroadcast' || activeIndex == 4? 'li-active':''" @click="handleMenuClick(4,'LiveBroadcast')">天天直播</li>
-        <li :class="this.$route.path ==  '/main/reviewActivity' || activeIndex == 2? 'li-active':''" @click="handleMenuClick(2,'reviewActivity')">评审活动</li>
+        <li :class="this.$route.path ==  '/main/LiveBroadcast' || activeIndex == 4? 'li-active':''" @click="handleMenuClick(4,'LiveBroadcast')">课例直播</li>
+        <li :class="this.$route.path ==  '/main/reviewActivity' || activeIndex == 2? 'li-active':''" @click="handleMenuClick(2,'reviewActivity')">活动列表</li>
         <li :class="this.$route.path ==  '/main/PastReview' || activeIndex == 3? 'li-active':''" @click="handleMenuClick(3,'PastReview')">往届回顾</li>
-        <li :class="this.$route.path ==  '/main/Lessons' || activeIndex == 5? 'li-active':''" @click="handleMenuClick(5,'Lessons')">优课汇聚</li>
+        <li :class="this.$route.path ==  '/main/Lessons' || activeIndex == 5? 'li-active':''" @click="handleMenuClick(5,'Lessons')">经典课例</li>
       </ul>
-      <span class="btn-login" v-if="isLogin == 1" >欢迎&nbsp;{{userName}} !</span>
-      <Icon type="md-power" v-if="isLogin == 1" @click="loginOut" style="margin-left:30px;cursor:pointer" size="20" title="退出登录" color="white" />
+      <div  v-if="isLogin == 1">
+        <span class="btn-login">欢迎&nbsp;{{userName}} !</span>
+        <Icon type="md-power"  @click="loginOut" style="margin-left:10px;cursor:pointer;margin-top:-4px;" size="20" title="退出登录" color="white" />
+      </div>      
       <span class="btn-login" v-else @click="handleMenuClick(6,'/login')">登录</span>
     </div>
   </div>
@@ -21,7 +23,7 @@
   export default {
     name: "headers",
     data() {
-      return {
+      return { 
         userName: '',
         isLogin:'',
         activeIndex: sessionStorage.getItem('_activeIndex') || 0

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

@@ -1,36 +1,42 @@
 <template>
-  <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" long>登录</Button>
-              </FormItem>
-            </Form>
-            <!--<p class="login-tip">输入任意用户名和密码即可</p>-->
-          </div>
-        </Card>
+  <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 {
@@ -55,6 +61,7 @@
     },
     data() {
       return {
+        loading:false,
         form: {
           userName: '',
           password: ''
@@ -70,16 +77,19 @@
       }
     },
     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);
-            if (this.password == 'habook') {
-              this.$router.push({ path: '/main' });
-            } else {
-              this.$router.push({ path: '/main' });
-            }
+            this.loading = true;
+            setTimeout(() => {
+              this.loading = false;
+              this.loginSuccess();
+            }, 1500);
           }
         })
       }
@@ -88,7 +98,7 @@
 </script>
 <style scoped>
   .login {
-    background-image: url('../../assets/image/login_bg.jpg');
+    background-image: url('../../assets/image/login_bg1.png');
     width: 100%;
     height: 100%;
     background-size: cover;
@@ -97,12 +107,32 @@
     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: absolute;
+      position: relative;
       left: 0;
       top: 0;
       background: inherit;
@@ -118,6 +148,7 @@
     box-shadow: 0 0 10px 6px rgba(0,0,0,.5);
     width: 90%;
     max-width: 350px;
+    background:white;
   }
 
   .login-tip {
@@ -125,13 +156,16 @@
   }
 
   .drag >>> .ivu-card-head p span {
-    color: white;
+    color: #555555;
+    /*padding-top:10px;*/
+    display:inline-block;
     font-size: 18px;
   }
 
   .login-card {
     background: none;
-    color: white;
+    padding-bottom:20px;
+    color: black;
     width: 100%;
   }
 </style>