往届回顾

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

@@ -6,9 +6,9 @@
         <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>
+        <li :class="activeIndex == 3 ? 'li-active':''" @click="handleMenuClick(3,'PastReview')">往届回顾</li>
+        <li :class="activeIndex == 4 ? 'li-active':''" @click="handleMenuClick(4,'LiveBroadcast')">天天直播</li>
+        <li :class="activeIndex == 5 ? 'li-active':''" @click="handleMenuClick(5,'Lessons')">优课汇聚</li>
       </ul>
       <span class="btn-login">登录</span>
     </div>

TEAMModelOS.SmartClass/ClientApp/router/routes.js

@@ -18,6 +18,21 @@ export const routes = [
         name: 'notice',
         path: '/notice',
         component: resolve => require(['@/view/smart-class/Notice'], resolve), //路由懒加载
+      },
+      {
+        name: 'PastReview',
+        path: '/PastReview',
+        component: resolve => require(['@/view/smart-class/PastReview'], resolve), //路由懒加载
+      },
+      {
+        name: 'LiveBroadcast',
+        path: '/LiveBroadcast',
+        component: resolve => require(['@/view/smart-class/LiveBroadcast'], resolve), //路由懒加载
+      },
+      {
+        name: 'Lessons',
+        path: '/Lessons',
+        component: resolve => require(['@/view/smart-class/Lessons'], resolve), //路由懒加载
       }
     ]
   }

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

@@ -0,0 +1,58 @@
+<template>
+  <div class="container">
+    <h1>往届回顾</h1>
+      <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>

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

@@ -0,0 +1,62 @@
+<template>
+  <div class="container">
+    <div class="review-main">
+      <h1>往届回顾1231</h1>
+    </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;
+  }
+  .review-main {
+    background:#fff;
+    width:100%;
+    height:600px;
+  }
+    .container .left-box {
+      width:25%;
+      height:600px;
+      background:#fff;
+    }
+
+    .container .right-box {
+      width:73%;
+      height:600px;
+      background:#fff;
+    }
+
+  .center-col {
+
+  }
+
+</style>

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

@@ -1,7 +1,50 @@
 <template>
   <div class="container">
-      <div class="left-box"></div>
-      <div class="right-box"></div>
+    <div class="review-page">
+      <div class="reviews-header">
+        <p class="title">
+          往届回顾
+          <span class="sub">
+            <span>18</span>
+            个活动已结束
+          </span>
+        </p>
+        <div class="selections">
+          <span class="name">年份：</span>
+          <ul>
+            <li class="active"><span class="item">不限</span></li>
+            <li class=""><span class="item">2015</span></li>
+            <li class=""><span class="item">2016</span></li>
+            <li class=""><span class="item">2017</span></li>
+            <li class=""><span class="item">2018</span></li>
+            <li class=""><span class="item">2019</span></li>
+          </ul>
+        </div>
+        <div class="selections">
+          <span class="name">排序：</span>
+          <ul>
+            <li class="active"><span class="item">最新</span></li>
+            <li class=""><span class="item">最热</span></li>
+          </ul>
+        </div>
+        <div style="clear:both;"></div>
+        <div class="activities">
+          <div class="activity" v-for="(item,index) in activities">
+            <div>
+              <div class="img-box"><span class="state" style="background: rgb(19, 206, 102); visibility: visible; display:none;">{{item.status}}</span> <img :src="item.img" alt=""></div> <div class="infos">
+                <p class="actName">{{item.name}}</p>
+                <p class="actOrganizer">
+                  <span class="organizer">
+                    {{item.time}}
+                  </span>
+                  <span style="display:none;">主办</span>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script>
@@ -10,6 +53,64 @@
     },
     data() {
       return {
+        activities: [
+          {
+            status: "筹备阶段",
+            img: "http://ttkt.sxedu.org:70/upload/activity/cover/40/40.jpg?_=1557199674221",
+            name: "2019年柯桥区天天智慧课堂 5月份 优课评比",
+            organizer: "柯桥区教师发展中心",
+            time:"2019.03.01-04.06"
+          },{
+            status: "筹备阶段",
+            img: "http://ttkt.sxedu.org:70/upload/activity/cover/40/40.jpg?_=1557199674221",
+            name: "2019年柯桥区天天智慧课堂 5月份 优课评比",
+            organizer: "柯桥区教师发展中心",
+            time:"2019.03.01-04.06"
+          },{
+            status: "筹备阶段",
+            img: "http://ttkt.sxedu.org:70/upload/activity/cover/40/40.jpg?_=1557199674221",
+            name: "2019年柯桥区天天智慧课堂 5月份 优课评比",
+            organizer: "柯桥区教师发展中心",
+            time:"2019.03.01-04.06"
+          },{
+            status: "筹备阶段",
+            img: "http://ttkt.sxedu.org:70/upload/activity/cover/40/40.jpg?_=1557199674221",
+            name: "2019年柯桥区天天智慧课堂 5月份 优课评比",
+            organizer: "柯桥区教师发展中心",
+            time:"2019.03.01-04.06"
+          },{
+            status: "筹备阶段",
+            img: "http://ttkt.sxedu.org:70/upload/activity/cover/40/40.jpg?_=1557199674221",
+            name: "2019年柯桥区天天智慧课堂 5月份 优课评比",
+            organizer: "柯桥区教师发展中心",
+            time:"2019.03.01-04.06"
+          },{
+            status: "筹备阶段",
+            img: "http://ttkt.sxedu.org:70/upload/activity/cover/40/40.jpg?_=1557199674221",
+            name: "2019年柯桥区天天智慧课堂 5月份 优课评比",
+            organizer: "柯桥区教师发展中心",
+            time:"2019.03.01-04.06"
+          },
+          {
+            status: "筹备阶段",
+            img: "http://ttkt.sxedu.org:70/upload/activity/cover/40/40.jpg?_=1557199674221",
+            name: "2019年柯桥区天天智慧课堂 5月份 优课评比",
+            organizer: "柯桥区教师发展中心",
+            time:"2019.03.01-04.06"
+          },{
+            status: "筹备阶段",
+            img: "http://ttkt.sxedu.org:70/upload/activity/cover/40/40.jpg?_=1557199674221",
+            name: "2019年柯桥区天天智慧课堂 5月份 优课评比",
+            organizer: "柯桥区教师发展中心",
+            time:"2019.03.01-04.06"
+          },{
+            status: "筹备阶段",
+            img: "http://ttkt.sxedu.org:70/upload/activity/cover/40/40.jpg?_=1557199674221",
+            name: "2019年柯桥区天天智慧课堂 5月份 优课评比",
+            organizer: "柯桥区教师发展中心",
+            time:"2019.03.01-04.06"
+          }
+        ]
       }
     },
     methods: {
@@ -28,30 +129,141 @@
   }
 
   .main-content {
-    background:rgb(248,248,248) !important;
+    background: rgb(248,248,248) !important;
   }
+
   .container {
     width: 1200px;
     margin: 100px auto;
-    display:flex;
-    flex-direction:row;
-    justify-content:space-between;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  .review-page {
+    background-color: #fff;
+    width: 1120px;
+    padding: 30px;
+    margin: 0 auto;
+    margin-bottom: 30px;
+  }
+
+  .reviews-header .title {
+    height: 20px;
+    line-height: 20px;
+    color: #444;
+    font-size: 16px;
+    padding-left: 10px;
+    border-left: 3px solid #20a1f8;
+    margin-bottom: 30px;
+  }
+  .sub {
+    color: #cbb;
+    font-size: 16px;
+    margin-left: 10px;
+  }
+
+  .selections .name {
+    color: #999;
+    font-size: 14px;
+    float: left;
+    clear: left;
+  }
+
+  .selections ul li {
+    float: left;
+    font-size: 14px;
+    cursor: pointer;
+    list-style: none;
+    padding: 0 0 0 40px;
   }
 
-    .container .left-box {
-      width:25%;
-      height:600px;
-      background:#fff;
+    .selections ul li.active {
+      color: #33aeff;
     }
+  .activities {
+    min-height: 300px;
+    overflow: hidden;
+    margin-top: 30px;
+  }
 
-    .container .right-box {
-      width:73%;
-      height:600px;
-      background:#fff;
+    .activities .activity {
+      margin-right: 25px;
+      margin-bottom: 40px;
+      width: 335px;
+      height:292px;
+      float: left;
+      cursor: pointer;
+      border: 1px solid #ddd;
+      box-sizing: border-box
     }
 
-  .center-col {
+ .activities .activity:hover {
+    box-shadow: 0 26px 40px -24px rgba(0,36,100,.3);
+    transform: translateY(-6px);
+    transition: all .3s ease 0s
+}
 
-  }
+.activities .activity:nth-child(3n) {
+    margin-right: 0
+}
+
+.img-box {
+    width: 335px;
+}
+
+.img-box .state {
+    padding: 5px 8px;
+    line-height: 20px;
+    position: relative;
+    left: 0;
+    top: 3px;
+    z-index: 1;
+    background-color: #13ce66;
+    color: #fff
+}
+
+.img-box img {
+    width: 333px;
+    height: 210px;
+    position: relative;
+    left: 0;
+    top:-21px;
+    padding-top: 1px
+}
+
+.infos {
+  position:relative;
+  top:-21px;
+    background-color: #fff
+}
+
+.infos .actName {
+    color: #444;
+    font-size: 16px;
+    padding: 20px 10px 10px 20px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 280px
+}
+
+.infos .actOrganizer {
+    color: #999;
+    font-size: 14px;
+    padding-left: 20px;
+    padding-bottom: 20px
+}
+
+.infos .actTime {
+    color: #aaa;
+    font-size: 14px;
+    padding-left: 20px;
+    padding-bottom: 10px
+}
 
+.view-more {
+    text-decoration: none;
+    float: right
+}
 </style>