首页布局

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

@@ -3,12 +3,12 @@
     <div class="header center-row">
       <img src="http://ttkt.sxedu.org:70/upload/setting/0/0.png?_=1557194799800" />
       <ul>
-        <li>首页</li>
-        <li>通知公告</li>
-        <li>评审活动</li>
-        <li>往届回顾</li>
-        <li>天天直播</li>
-        <li>优客汇聚</li>
+        <li :class="activeIndex == 0 ? 'li-active':''" @click="handleMenuClick(0,'index')">首页</li>
+        <li :class="activeIndex == 1 ? 'li-active':''" @click="handleMenuClick(1,'notice')">通知公告</li>
+        <li :class="activeIndex == 2 ? 'li-active':''" @click="handleMenuClick(2,'index')">评审活动</li> 
+        <li :class="activeIndex == 3 ? 'li-active':''" @click="handleMenuClick(3,'index')">往届回顾</li>
+        <li :class="activeIndex == 4 ? 'li-active':''" @click="handleMenuClick(4,'index')">天天直播</li>
+        <li :class="activeIndex == 5 ? 'li-active':''" @click="handleMenuClick(5,'index')">优客汇聚</li>
       </ul>
       <span class="btn-login">登录</span>
     </div>
@@ -21,14 +21,17 @@
     props: ['parentToChild', 'identityselect'],
     data() {
       return {
-
+        activeIndex:0
       }
     },
     created() {
 
     },
     methods: {
-
+      handleMenuClick(index, route) {
+        this.activeIndex = index;
+        this.$router.push(route);
+      }
     },
   }
 </script>
@@ -66,9 +69,13 @@
         cursor:pointer;
       }
         .header ul li:hover {
-          background:rgba(255,255,255,.4);
+          background:rgba(160,160,160,.24);
           color:#cbcdcf;
         }
+
+      .header ul .li-active {
+        color:#33aafe;
+      }
     .header .btn-login {
       color: #fff;
       font-size: 14px;

TEAMModelOS.SmartClass/ClientApp/router/routes.js

@@ -7,8 +7,13 @@ export const routes = [
     children: [
       {
         name: 'index',
-        path: '',
+        path: '/index',
         component: resolve => require(['@/view/smart-class/index'], resolve), //路由懒加载
+      },
+      {
+        name: 'notice',
+        path: '/notice',
+        component: resolve => require(['@/view/smart-class/notice'], resolve), //路由懒加载
       }
     ]
   }

TEAMModelOS.SmartClass/ClientApp/view/app.vue

@@ -45,10 +45,10 @@
     display: flex;
     flex-direction: column;
     align-items: center;
+    background:rgb(248,248,248);
   }
   .content {
     width:100%;
-    margin-top:80px;
   }
   .logo {
     width: 200px;

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

@@ -67,6 +67,23 @@
                </div>
             </div>
           </div>
+        <div class="activity">
+            <div>
+              <div class="img-box">
+                  <span class="state" style="background: rgb(19, 206, 102); visibility: visible;">筹备阶段</span>
+                  <img src="http://ttkt.sxedu.org:70/upload/activity/cover/39/39.jpg?_=1557199674222" alt="">
+              </div>
+               <div class="infos">
+                  <p></p>
+                  <p class="actName">2019年柯桥区天天智慧课堂 4月份 优课评比</p>
+                  <p></p>
+                  <p class="actOrganizer">
+                    <span class="organizer">柯桥区教师发展中心</span>
+                    <span>主办</span>
+                  </p>
+               </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -77,9 +94,11 @@
           <h3>往届回顾</h3> <span>REVIEW</span> <div class="more">
             <a href="./activity.html" class="view-more">查看更多</a>
           <span class="count">
+              <b style="color: rgb(83, 199, 102);">18</b>个活动
             </span>
           </div>
-        </div> <div class="activities">
+        </div>
+        <div class="activities">
           <div class="activity">
             <div>
               <div class="img-box"><span class="state" style="background: rgb(19, 206, 102); visibility: visible;">筹备阶段</span> <img src="http://ttkt.sxedu.org:70/upload/activity/cover/40/40.jpg?_=1557199674221" alt=""></div> <div class="infos">
@@ -109,6 +128,24 @@
                </div>
             </div>
           </div>
+
+          <div class="activity">
+            <div>
+              <div class="img-box">
+                  <span class="state" style="background: rgb(19, 206, 102); visibility: visible;">筹备阶段</span>
+                  <img src="http://ttkt.sxedu.org:70/upload/activity/cover/39/39.jpg?_=1557199674222" alt="">
+              </div>
+               <div class="infos">
+                  <p></p>
+                  <p class="actName">2019年柯桥区天天智慧课堂 4月份 优课评比</p>
+                  <p></p>
+                  <p class="actOrganizer">
+                    <span class="organizer">柯桥区教师发展中心</span>
+                    <span>主办</span>
+                  </p>
+               </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>

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

@@ -0,0 +1,57 @@
+<template>
+  <div class="container">
+      <div class="left-box"></div>
+      <div class="right-box"></div>
+  </div>
+</template>
+<script>
+  export default {
+    components: {
+    },
+    data() {
+      return {
+      }
+    },
+    methods: {
+
+
+
+    },
+    mounted() {
+    }
+  }
+</script>
+<style scoped>
+  html, body, #app {
+    height: 100% !important;
+    user-select: none;
+  }
+
+  .main-content {
+    background:rgb(248,248,248) !important;
+  }
+  .container {
+    width: 1200px;
+    margin: 100px auto;
+    display:flex;
+    flex-direction:row;
+    justify-content:space-between;
+  }
+
+    .container .left-box {
+      width:25%;
+      height:600px;
+      background:#fff;
+    }
+
+    .container .right-box {
+      width:73%;
+      height:600px;
+      background:#fff;
+    }
+
+  .center-col {
+
+  }
+
+</style>