公共footer 以及资源页面

TEAMModelOS.SmartTeach/ClientApp/common/headers.vue

@@ -30,18 +30,18 @@
 </script>
 <style>
   .header_box {
-    padding: 0.5% 8% 0.5% 8%;
-    width: 100%;
+    width: 1200px;
     height: 85px;
     background-color:#fff;
+    margin:0 auto;
   }
   .header_left {
-    width: 70%;
+    width: 800px;
     float: left;
     height: 75px;
   }
   .header_right {
-    width: 30%;
+    width: 400px;;
     float: left;
     height: 75px;
   }
@@ -71,6 +71,7 @@
     width:30%;
     display:block;
     float:left;
+    margin-left:40%;
   }
     .login_btn button {
       width: 85px;
@@ -85,7 +86,7 @@
       font-size:18px;
     }
   .helper {
-    width: 45%;
+    width: 30%;
     display: block;
     float: left;
     padding-top:22px;

TEAMModelOS.SmartTeach/ClientApp/components/resource/exam.vue

@@ -1,16 +1,18 @@
 <template>
   <div class="exam">
-    <div class="exam_box" v-for="item in listdata">
-      <div class="exam_title"><div class="exam_name">{{item.title}}</div><i>{{item.num}}</i></div>
-      <div class="exam_img"><img :src="item.img" /></div>
-      <ul class="exam_list">
-        <li class="exam_list_data" v-for="items in item.data">
-          <div class="exam_list_title"><a href="">{{items.title}}</a></div>
-          <div class="look"><Icon type="ios-eye" size="16" />{{items.loocknum}}</div>
-        </li>
-      </ul>
+    <div class="exam_list_box_width">
+      <div class="exam_box" v-for="item in listdata">
+        <div class="exam_title"><div class="exam_name">{{item.title}}</div><i>{{item.num}}</i></div>
+        <div class="exam_img"><img :src="item.img" /></div>
+        <ul class="exam_list">
+          <li class="exam_list_data" v-for="items in item.data">
+            <div class="exam_list_title"><a href="">{{items.title}}</a></div>
+            <div class="look"><Icon type="ios-eye" size="16" />{{items.loocknum}}</div>
+          </li>
+        </ul>
+      </div>
+      <div class="clear"></div>
     </div>
-    <div class="clear"></div>
   </div>
 </template>
 <script>
@@ -53,11 +55,16 @@
     padding: 0% 11% 0% 11%;
     float: left;
     background-color: #f3f3f3;
+    margin:0 auto;
+  }
+  .exam_list_box_width {
+    width: 1200px;
+    margin:0 auto;
   }
   .exam_box {
-    width: 25.3%;
+    width: 30%;
     height: auto;
-    margin: 1%;
+    margin: 1% 1% 1% 3.5%;
     text-align: center;
     float: left;
     border: #ececec solid 1px;
@@ -68,12 +75,6 @@
     .exam_box:nth-child(1) {
       margin: 1% 1% 1% 0%;
     }
-    .exam_box:nth-child(2) {
-      margin: 1% 1% 1% 6%;
-    }
-    .exam_box:nth-child(3) {
-      margin: 1% 1% 1% 6%;
-    }
 
   .exam_title {
     width: 100%;
@@ -104,15 +105,17 @@
     margin-top: 10px;
     float: left;
   }
-
-  .exam_list {
-    width: 100%;
-    height: auto;
-    padding: 1%;
-    list-style: none;
-    float: left;
-    text-align: left;
-  }
+    .exam_img img {
+      width:90%;
+    }
+    .exam_list {
+      width: 100%;
+      height: auto;
+      padding: 1%;
+      list-style: none;
+      float: left;
+      text-align: left;
+    }
 
   .exam_list_data {
     width: 100%;
@@ -121,6 +124,7 @@
 
   .exam_list_title {
     float: left;
+    font-size:15px;
   }
 
   .look {
@@ -134,5 +138,6 @@
 
   .clear {
     clear: both
-  } 
+  }
+
 </style>

TEAMModelOS.SmartTeach/ClientApp/components/resource/list.vue

@@ -122,7 +122,7 @@
   .list_header {
     width:11%;
     position:absolute;
-    left:210px;
+    left:352px;
     height:400px;
     text-align:center;
   }

TEAMModelOS.SmartTeach/ClientApp/components/resource/recommend.vue

@@ -0,0 +1,226 @@
+<template>
+  <div class="recommend">
+    <div class="recommend_box">
+      <div class="recommend_header">
+        <div class="recommend_title">精彩推荐</div>
+        <ul class="recommend_select">
+          <li class="recommend_select_box">
+            <Dropdown trigger="click" style="margin-left: 20px">
+              <a href="javascript:void(0)" style="color:#888;">
+                学段
+                <Icon type="ios-arrow-down"></Icon>
+              </a>
+              <DropdownMenu slot="list">
+                <DropdownItem>不限</DropdownItem>
+                <DropdownItem>小学</DropdownItem>
+                <DropdownItem>初中</DropdownItem>
+                <DropdownItem>高中</DropdownItem>
+              </DropdownMenu>
+            </Dropdown>
+          </li>
+          <li class="recommend_select_box">
+            <Dropdown trigger="click" style="margin-left: 20px">
+              <a href="javascript:void(0)" style="color:#888;">
+                学科
+                <Icon type="ios-arrow-down"></Icon>
+              </a>
+              <DropdownMenu slot="list">
+                <DropdownItem>不限</DropdownItem>
+                <DropdownItem>语文</DropdownItem>
+                <DropdownItem>数学</DropdownItem>
+                <DropdownItem>英语</DropdownItem>
+                <DropdownItem>历史</DropdownItem>
+                <DropdownItem>政治</DropdownItem>
+                <DropdownItem>地理</DropdownItem>
+                <DropdownItem>物理</DropdownItem>
+                <DropdownItem>化学</DropdownItem>
+                <DropdownItem>生物</DropdownItem>
+                <DropdownItem>信息技术</DropdownItem>
+                <DropdownItem>汉语</DropdownItem>
+
+              </DropdownMenu>
+            </Dropdown>
+          </li>
+          <li class="recommend_select_box">
+            <Dropdown trigger="click" style="margin-left: 20px">
+              <a href="javascript:void(0)" style="color:#888;">
+                类型
+                <Icon type="ios-arrow-down"></Icon>
+              </a>
+              <DropdownMenu slot="list">
+                <DropdownItem>不限</DropdownItem>
+                <DropdownItem>教案</DropdownItem>
+                <DropdownItem>课件</DropdownItem>
+                <DropdownItem>试卷</DropdownItem>
+                <DropdownItem>习题</DropdownItem>
+                <DropdownItem>素材</DropdownItem>
+              </DropdownMenu>
+            </Dropdown>
+          </li>
+        </ul>
+      </div>
+      <div class="left_box">
+        <p class="left_title">最新资源</p>
+        <ul class="recommend_left">
+          <li class="recommend_list" v-for="items in news">
+            <a href="" style="color:#555;">
+              <div class="recommend_list_title"><Icon :type="items.icon" size="16" />{{items.title}}.{{items.type}}</div><div class="recommend_list_time">{{items.time}}</div>
+            </a>
+          </li>
+        </ul>
+      </div>
+      <div class="left_box">
+        <p class="left_title">最热资源</p>
+        <ul class="recommend_left">
+          <li class="recommend_list" v-for="item in hot">
+            <a href="" style="color:#555;">
+              <div class="recommend_list_title"><Icon :type="item.icon" size="16" :class="item.iconclass" />{{item.title}}</div><div class="recommend_list_time"><Icon type="ios-eye" size="18" />{{item.looknum}}</div>
+            </a>
+           </li>
+        </ul>
+      </div>
+    </div>
+    <div class="resource_img">
+    <img src="../../assets/image/resource/resource_img.jpg" class="banner_big" />
+    <img src="../../assets//image/resource/sk.png"  class="sk" @click="skbtn"/> 
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        news: [
+          { "id": 1, "title": '衣服上的水跑到哪去', "type": 'mp4', "icon":'ios-videocam',"time": '05-08' },
+          { "id": 2, "title": '人教版-一元二次方程式.', "type": 'ppt', "icon": 'md-bookmarks', "time":'03-25' },
+          { "id": 3, "title": '秋天', "type": 'doc', "icon":'md-copy',"time": '04-12' },
+          { "id": 4, "title": '鸽巢问题', "type": 'docx', "icon": 'md-copy', "time": '02-18' },
+          { "id": 5, "title": '美术设计', "type": 'png', "icon": 'ios-image', "time": '03-08' },
+          { "id": 6, "title": '秋天', "type": 'doc', "icon": 'md-copy', "time": '04-12' },
+          { "id": 7, "title": '鸽巢问题', "type": 'docx', "icon": 'md-copy', "time": '02-18' },
+          { "id": 8, "title": '美术设计', "type": 'png', "icon": 'ios-image', "time": '03-08' },
+          { "id": 9, "title": '衣服上的水跑到哪去', "type": 'mp4', "icon": 'ios-videocam', "time": '05-08' },
+        ],
+        hot: [
+          { "id": 1, "title": '2018年高考文综北京卷.doc', "icon": 'md-trophy', "iconclass": "one", "looknum": '12652', },
+          { "id": 2, "title": '2018年高考理综四川卷.doc', "icon": 'md-trophy', "iconclass": "two", "looknum": '11012', },
+          { "id": 3, "title": '2018年高考文综四川卷.doc', "icon": 'md-trophy', "iconclass": "three", "looknum": '9152', },
+          { "id": 4, "title": '2018年高考理综新课标Ⅰ卷.doc', "icon": 'md-medal', "iconclass": "", "looknum": '8652', },
+          { "id": 5, "title": '湖北省武汉市2018年中考数学模拟题.doc', "icon": 'md-medal', "iconclass": "", "looknum": '6652', },
+          { "id": 6, "title": '湖北省武汉市2018年中考物理模拟题.doc', "icon": 'md-medal', "iconclass": "", "looknum": '6352', },
+          { "id": 7, "title": '2018高考真题语文全国卷Ⅱ解析.doc', "icon": 'md-medal', "iconclass": "", "looknum": '6152', },
+          { "id": 8, "title": '2018年高考文综全国卷Ⅰ.doc', "icon": 'md-medal', "iconclass": "", "looknum": '5652', },
+          { "id": 9, "title": '2016年高考文综北京卷.doc', "icon": 'md-medal', "iconclass": "", "looknum": '4352', },
+        ],
+      }
+    },
+    methods:{
+      skbtn() {
+        
+      }
+    }
+  }
+</script>
+<style scoped>
+  .recommend {
+    width: 100%;
+    padding: 1% 11% 0% 11%;
+    float: left;
+    background-color: #f3f3f3;
+ 
+  }
+  .recommend_box {
+    width: 1200px;
+    height: 370px;
+    background-color: #fff;
+    box-shadow: 2px 2px 10px rgba(15,4,9,0.05);
+    margin:0 auto;
+  }
+  .recommend_header {
+    width: 100%;
+    height:50px;
+    padding: 1.1%;
+    border: #ececec solid 1px;
+  }
+  .recommend_title {
+    float: left;
+    line-height: 19px;
+    border-bottom: #288add solid 1px;
+    padding: 10px 3px 0px 3px;
+    font-size: 24px;
+    font-weight: normal;
+    color: #288add;
+  }
+  .recommend_select {
+    float: right;
+    color: #555;
+    font-size: 14px;
+    list-style:none;
+  }
+  .recommend_select_box {
+    float: left;
+    padding: 0 20px 0 16px;
+    border-right: 1px solid #e3e3e3;
+  }
+    .recommend_select_box:nth-child(3) {
+      border-right: 0;
+    }
+  .ivu-dropdown-menu {
+    max-height:200px;
+    overflow:auto;
+  }
+  .ivu-dropdown-item {
+    font-size:14px !important;
+  }
+  .left_box {
+    float:left;
+    width:50%;
+    /*border:1px solid red;*/
+    height:auto;
+    padding:1%;
+  }
+  .recommend_left {
+    width:100%;
+    padding-top:15px;
+  }
+  .left_title {
+    font-size:20px;
+    color:#222;
+  }
+  .recommend_list {
+    width: 100%;
+    list-style: none;
+    float: left;
+    padding:0.5%;
+  }
+  .recommend_list_title {
+    font-size:14px;
+    float:left
+  }
+  .recommend_list_time {
+    float:right
+  }
+  .one {
+    color:red;
+  }
+  .two {
+    color: #FF9966;
+  }
+  .resource_img {
+    width: 1200px;
+    padding-top: 30px;
+    padding-bottom:30px;
+    position: relative;
+    margin:0 auto;
+
+  }
+  .banner_big {
+    width: 100%;
+  
+  }
+  .sk {
+    position:absolute;
+    bottom:20%;
+    left:40%;
+  }
+</style>

TEAMModelOS.SmartTeach/ClientApp/components/resource/video.vue

@@ -53,9 +53,10 @@
     background-color: #f3f3f3;
   }
   .video_box {
-    width:90%;
+    width:1200px;
     height:455px;
     background-color:#fff;
+    margin:0 auto;
   }
   .video_title {
     width: 70%;
@@ -113,8 +114,11 @@
     float:left;
     position:relative;
   }
+    .video_left img {
+      width:100%;
+    }
     .video_left:hover .playbtn1 {
-      display:block;
+      display: block;
     }
     .playbtn1 {
       position: absolute;
@@ -131,7 +135,7 @@
     position: absolute;
     bottom: 5px;
     left: 0px;
-    width: 91.7%;
+    width: 100%;
     font-weight: normal;
     line-height: 45px;
     font-size: 16px;
@@ -142,7 +146,7 @@
     position: absolute;
     bottom: 0px;
     left: 0px;
-    width: 91.7%;
+    width: 100%;
     font-weight: normal;
     line-height: 35px;
     font-size: 14px;
@@ -150,19 +154,21 @@
     color: #fff;
   }
   .video_right {
-    width: 50%;
+    width: 48%;
     float: left;
     list-style: none;
+    margin-left:2%;
   }
   .video_more_list {
-    width:50%;
+    width:48%;
     float:left;
     position:relative;
     height:170px;
     margin-top:12px;
+    margin:0.5% 1%;
   }
     .video_more_list img {
-      width:91.5%;
+      width:100%;
       height:170px;
     }
 </style>

TEAMModelOS.SmartTeach/ClientApp/view/resource/index.vue

@@ -4,6 +4,8 @@
     <Banner></Banner>
     <Exam></Exam>
     <Video></Video>
+    <Recommend></Recommend>
+    <Footer></Footer>
   </div>
 </template>
 <script>
@@ -11,12 +13,16 @@
   import Banner from '@/components/resource/list.vue'
   import Exam from '@/components/resource/exam.vue'
   import Video from '@/components/resource/video.vue'
+  import Recommend from '@/components/resource/recommend.vue'
+  import Footer from '@/common/footer.vue'
   export default {
     components: {
       Header,
       Banner,
       Exam,
-      Video
+      Video,
+      Recommend,
+      Footer
     },
     data() {
       return {
@@ -32,6 +38,7 @@
   #app {
     width: 100%;
     height: auto;
-    background-color:#f3f3f3;
+    background-color:#fff;
+    margin:0 auto;
   }
 </style>