登录背景

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

@@ -10,7 +10,7 @@
         <li :class="this.$route.path ==  '/main/LiveBroadcast' || activeIndex == 4? 'li-active':''" @click="handleMenuClick(4,'LiveBroadcast')">天天直播</li>
         <li :class="this.$route.path ==  '/main/Lessons' || activeIndex == 5? 'li-active':''" @click="handleMenuClick(5,'Lessons')">优课汇聚</li>
       </ul>
-      <span class="btn-login"  @click="handleMenuClick(6,'login')">登录</span>
+      <span class="btn-login"  @click="handleMenuClick(6,'/login')">登录</span>
     </div>
   </div>
 </template>

TEAMModelOS.SmartClass/ClientApp/router/routes.js

@@ -4,6 +4,10 @@ export const routes = [
     path: '/',
     redirect: '/login'
   },
+  {
+    path: '/main',
+    redirect: '/main/index'
+  },
   {
     name: 'login',
     path: '/login',
@@ -11,67 +15,67 @@ export const routes = [
   },
   {
     name: 'main',
-    path: '',
+    path: '/main',
     component: resolve => require(['@/view/smart-class/MainPage'], resolve), //路由懒加载
     children: [
       {
         name: 'index',
-        path: '/index',
+        path: 'index',
         component: resolve => require(['@/view/smart-class/index'], resolve), //路由懒加载
       },
       {
         name: 'notice',
-        path: '/notice',
+        path: 'notice',
         component: resolve => require(['@/view/smart-class/notice'], resolve), //路由懒加载
       },
       {
         name: 'reviewActivity',
-        path: '/reviewActivity',
+        path: 'reviewActivity',
         component: resolve => require(['@/view/smart-class/ReviewActivity'], resolve), //路由懒加载
       },
       {
         name: 'PastReview',
-        path: '/PastReview',
+        path: 'PastReview',
         component: resolve => require(['@/view/smart-class/PastReview'], resolve), //路由懒加载
       },
       {
         name: 'LiveBroadcast',
-        path: '/LiveBroadcast',
+        path: 'LiveBroadcast',
         component: resolve => require(['@/view/smart-class/LiveBroadcast'], resolve), //路由懒加载
       },
       {
         name: 'Lessons',
-        path: '/Lessons',
+        path: 'Lessons',
         component: resolve => require(['@/view/smart-class/Lessons'], resolve), //路由懒加载
       },
       {
         name: 'activityDetails',
-        path: '/activityDetails',
+        path: 'activityDetails',
         component: resolve => require(['@/view/smart-class/ActivityDetails'], resolve), //路由懒加载
       },
       {
         name: 'noticeDetails',
-        path: '/noticeDetails',
+        path: 'noticeDetails',
         component: resolve => require(['@/view/smart-class/NoticeDetails'], resolve), //路由懒加载
       },
       {
         name: 'rewardDetails',
-        path: '/rewardDetails',
+        path: 'rewardDetails',
         component: resolve => require(['@/view/smart-class/RewardDetails'], resolve), //路由懒加载
       },
       {
         name: 'lessons',
-        path: '/lessons',
+        path: 'lessons',
         component: resolve => require(['@/view/smart-class/Lessons'], resolve), //路由懒加载
       },
       {
         name: 'lessonList',
-        path: '/lessonList',
+        path: 'lessonList',
         component: resolve => require(['@/view/smart-class/LessonList'], resolve), //路由懒加载
       },
       {
         name: 'lessonDetails',
-        path: '/lessonDetails',
+        path: 'lessonDetails',
         component: resolve => require(['@/view/smart-class/LessonDetails'], resolve), //路由懒加载
       }
     ]

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

@@ -1,15 +1,135 @@
 <template>
-  <div>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">
+          <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>
+    </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 {
-
+        form: {
+          userName: 'super_admin',
+          password: ''
+        }
+      }
+    },
+    computed: {
+      rules() {
+        return {
+          userName: this.userNameRules,
+          password: this.passwordRules
+        }
+      }
+    },
+    methods: {
+      handleSubmit() {
+        this.$refs.loginForm.validate((valid) => {
+          if (valid) {
+            if (this.password == 'habook') {
+              this.$router.push({ path: '/main' });
+            } else {
+              this.$router.push({ path: '/main' });
+            }
+          }
+        })
       }
     }
   }
 </script>
-<style>
+<style scoped>
+  .login {
+    background-image: url('../../assets/image/login_bg.jpg');
+    width: 100%;
+    height: 100%;
+    background-size: cover;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+  }
+
+    .login:after {
+      content: "";
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      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;
+  }
+
+  .login-tip {
+    color: white;
+  }
+
+  .drag > > > .ivu-card-head p span {
+    color: white;
+    font-size: 18px;
+  }
 
+  .login-card {
+    background: none;
+    color: white;
+    width: 100%;
+  }
 </style>