commit

TEAMModelOS.SmartTeach/ClientApp/common/headers.vue

@@ -33,6 +33,7 @@
     padding: 0.5% 8% 0.5% 8%;
     width: 100%;
     height: 85px;
+    background-color:#fff;
   }
   .header_left {
     width: 70%;

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

@@ -0,0 +1,138 @@
+<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>
+    <div class="clear"></div>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        listdata: [
+          {
+            "id": 1, "title": '中考专区', "num": '980', "img": require("../../assets/image/resource/exam_img_one.jpg"), data: [
+              { "type": '物理', "title": '2018年成都市中考物理试卷.doc', "loocknum": '750' },
+              { "type": '英语', "title": '2018年成都市中考英语试卷.doc', "loocknum": '920' },
+              { "type": '数学', "title": '2018年成都市中考数学试卷.doc', "loocknum": '1006' },
+              { "type": '化学', "title": '2018年成都市中考化学试卷.doc', "loocknum": '450' },
+            ]
+          },
+          {
+            "id": 2, "title": '高考专区', "num": '1080', "img": require("../../assets/image/resource/exam_img_two.jpg"), data: [
+              { "type": '语文', "title": '2018年成都市高考语文试卷.doc', "loocknum": '1750' },
+              { "type": '英语', "title": '2018年成都市高考英语试卷.doc', "loocknum": '1220' },
+              { "type": '数学', "title": '2018年成都市高考数学试卷.doc', "loocknum": '1606' },
+              { "type": '历史', "title": '2018年成都市高考历史试卷.doc', "loocknum": '1450' },
+            ]
+          },
+          {
+            "id": 3, "title": '优课专区', "num": '900', "img": require("../../assets/image/resource/exam_img_three.jpg"), data: [
+              { "type": '优课', "title": '等腰三角形的判定与反证法', "loocknum": '350' },
+              { "type": '优课', "title": '一元二次方程的应用', "loocknum": '620' },
+              { "type": '优课', "title": '万有引力定律的应用', "loocknum": '606' },
+              { "type": '优课', "title": '化学平衡的特征', "loocknum": '535' },
+            ]
+          },
+        ]
+      }
+    }
+  }
+</script>
+<style scoped>
+  .exam {
+    width: 100%;
+    padding: 0% 11% 0% 11%;
+    float: left;
+    background-color: #f3f3f3;
+  }
+  .exam_box {
+    width: 25.3%;
+    height: auto;
+    margin: 1%;
+    text-align: center;
+    float: left;
+    border: #ececec solid 1px;
+    padding: 1%;
+    box-shadow: 2px 2px 10px rgba(15,4,9,0.05);
+    background-color: #fff;
+  }
+    .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%;
+    display: block;
+    float: left;
+  }
+
+  .exam_name {
+    font-size: 24px;
+    border-bottom: #288add solid 1px;
+    float: left;
+    margin-left: 20px;
+  }
+
+  .exam_title i {
+    float: left;
+    margin: 8px 0px 0px 8px;
+    height: 20px;
+    line-height: 20px;
+    border-radius: 10px;
+    background: #8ea9b9;
+    font-size: 14px;
+    padding: 0px 10px;
+    color: #fff;
+  }
+
+  .exam_img {
+    margin-top: 10px;
+    float: left;
+  }
+
+  .exam_list {
+    width: 100%;
+    height: auto;
+    padding: 1%;
+    list-style: none;
+    float: left;
+    text-align: left;
+  }
+
+  .exam_list_data {
+    width: 100%;
+    float: left;
+  }
+
+  .exam_list_title {
+    float: left;
+  }
+
+  .look {
+    float: right;
+  }
+
+  a {
+    text-decoration: none;
+    color: #333;
+  }
+
+  .clear {
+    clear: both
+  } 
+</style>

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

@@ -2,7 +2,7 @@
   <div class="list_box">
     <ul class="list_header">
       <li class="list_data"><Icon type="ios-menu-outline" size="30" style="color:#fff;margin-bottom:10px;" /><span class="list_header_title">学科资源</span></li>
-      <li class="moreover_data">
+      <li class="moreover_data_one">
         <div class="top_title"><div class="icon_img"></div><span class="moreover_title">小学</span><Icon type="ios-arrow-forward" size="28" style="color:#fff;margin-left:25px;" /></div>
         <div class="bottom_title">
           <a href="">教案</a>
@@ -10,8 +10,14 @@
           <a href="">动画</a>
           <a href="">课件</a>
         </div>
+        <ul class="conceal">
+          <li class="conceal_list" v-for="item in xiaoxue">
+            <p class="conceal_list_title">{{item.title}}</p>
+            <span class="conceal_list_subhead" v-for="items in item.data">{{items.title}}</span>
+          </li>
+        </ul>
       </li>
-      <li class="moreover_data">
+      <li class="moreover_data_two">
         <div class="top_title"><div class="icon_img_two"></div><span class="moreover_title">初中</span><Icon type="ios-arrow-forward" size="28" style="color:#fff;margin-left:25px;" /></div>
         <div class="bottom_title">
           <a href="">教案</a>
@@ -19,8 +25,14 @@
           <a href="">素材</a>
           <a href="">课件</a>
         </div>
+        <ul class="conceal">
+          <li class="conceal_list" v-for="itemc in chuzhong">
+            <p class="conceal_list_title">{{itemc.title}}</p>
+            <span class="conceal_list_subhead" v-for="itemy in itemc.data">{{itemy.title}}</span>
+          </li>
+        </ul>
       </li>
-      <li class="moreover_data">
+      <li class="moreover_data_three">
         <div class="top_title"><div class="icon_img_three"></div><span class="moreover_title">高中</span><Icon type="ios-arrow-forward" size="28" style="color:#fff;margin-left:25px;" /></div>
         <div class="bottom_title">
           <a href="">教案</a>
@@ -28,27 +40,14 @@
           <a href="">素材</a>
           <a href="">课件</a>
         </div>
+        <ul class="conceal">
+          <li class="conceal_list" v-for="itemy in gaozhong">
+            <p class="conceal_list_title">{{itemy.title}}</p>
+            <span class="conceal_list_subhead" v-for="itemf in itemy.data">{{itemf.title}}</span>
+          </li>
+        </ul>
       </li>
     </ul>
-    <ul class="conceal" v-show="xs">
-      <li class="conceal_list" v-for="item in xiaoxue">
-        <p class="conceal_list_title">{{item.title}}</p>
-        <span class="conceal_list_subhead" v-for="items in item.data">{{items.title}}</span>
-        <!--<p class="conceal_list_subhead"><span>同步资源</span><span>卷库</span></p>-->
-      </li>
-      <!--<li class="conceal_list">
-        <p class="conceal_list_title">语文</p>
-        <p class="conceal_list_subhead"><span>同步资源</span><span>卷库</span></p>
-      </li>
-      <li class="conceal_list">
-        <p class="conceal_list_title">语文</p>
-        <p class="conceal_list_subhead"><span>同步资源</span><span>卷库</span></p>
-      </li>
-      <li class="conceal_list">
-        <p class="conceal_list_title">语文</p>
-        <p class="conceal_list_subhead"><span>同步资源</span><span>卷库</span></p>
-      </li>-->
-    </ul>
   </div>
 </template>
 <script>
@@ -71,6 +70,40 @@
           { "id": 34, "title": '生活与科技', "data": [{ "id": 35, "pid": 34, "title": '同步资源' }, { "id": 36, "pid": 34, "title": '卷库' },] },
           { "id": 37, "title": '体育与健康', "data": [{ "id": 38, "pid": 37, "title": '同步资源' }, { "id": 39, "pid": 37, "title": '卷库' },] },
         ],
+        chuzhong: [
+          { "id": 1, "title": '语文', "data": [{ "id": 2, "pid": 1, "title": '同步资源' }, { "id": 3, "pid": 1, "title": '卷库' },] },
+          { "id": 4, "title": '数学', "data": [{ "id": 5, "pid": 4, "title": '同步资源' }, { "id": 6, "pid": 4, "title": '卷库' },] },
+          { "id": 7, "title": '英语', "data": [{ "id": 8, "pid": 7, "title": '同步资源' }, { "id": 9, "pid": 7, "title": '卷库' },] },
+          { "id": 10, "title": '体育', "data": [{ "id": 11, "pid": 10, "title": '同步资源' }, { "id": 12, "pid": 10, "title": '卷库' },] },
+          { "id": 13, "title": '地理', "data": [{ "id": 14, "pid": 13, "title": '同步资源' }, { "id": 15, "pid": 13, "title": '卷库' },] },
+          { "id": 16, "title": '历史', "data": [{ "id": 17, "pid": 16, "title": '同步资源' }, { "id": 18, "pid": 16, "title": '卷库' },] },
+          { "id": 19, "title": '生物', "data": [{ "id": 20, "pid": 19, "title": '同步资源' }, { "id": 21, "pid": 19, "title": '卷库' },] },
+          { "id": 22, "title": '化学', "data": [{ "id": 23, "pid": 22, "title": '同步资源' }, { "id": 24, "pid": 22, "title": '卷库' },] },
+          { "id": 25, "title": '物理', "data": [{ "id": 26, "pid": 25, "title": '同步资源' }, { "id": 27, "pid": 25, "title": '卷库' },] },
+          { "id": 28, "title": '汉语', "data": [{ "id": 29, "pid": 28, "title": '同步资源' }, { "id": 30, "pid": 28, "title": '卷库' },] },
+          { "id": 31, "title": '信息技术', "data": [{ "id": 32, "pid": 31, "title": '同步资源' }, { "id": 33, "pid": 31, "title": '卷库' },] },
+          { "id": 34, "title": '道德与法治', "data": [{ "id": 35, "pid": 34, "title": '同步资源' },] },
+          { "id": 37, "title": '思想品德', "data": [{ "id": 38, "pid": 37, "title": '同步资源' }, { "id": 39, "pid": 37, "title": '卷库' },] },
+        ],
+        gaozhong: [
+          { "id": 1, "title": '语文', "data": [{ "id": 2, "pid": 1, "title": '同步资源' }, { "id": 3, "pid": 1, "title": '卷库' },] },
+          { "id": 4, "title": '数学', "data": [{ "id": 5, "pid": 4, "title": '同步资源' }, { "id": 6, "pid": 4, "title": '卷库' },] },
+          { "id": 7, "title": '英语', "data": [{ "id": 8, "pid": 7, "title": '同步资源' }, { "id": 9, "pid": 7, "title": '卷库' },] },
+          { "id": 10, "title": '体育', "data": [{ "id": 11, "pid": 10, "title": '同步资源' }, { "id": 12, "pid": 10, "title": '卷库' },] },
+          { "id": 13, "title": '地理', "data": [{ "id": 14, "pid": 13, "title": '同步资源' }, { "id": 15, "pid": 13, "title": '卷库' },] },
+          { "id": 16, "title": '历史', "data": [{ "id": 17, "pid": 16, "title": '同步资源' }, { "id": 18, "pid": 16, "title": '卷库' },] },
+          { "id": 19, "title": '生物', "data": [{ "id": 20, "pid": 19, "title": '同步资源' }, { "id": 21, "pid": 19, "title": '卷库' },] },
+          { "id": 22, "title": '化学', "data": [{ "id": 23, "pid": 22, "title": '同步资源' }, { "id": 24, "pid": 22, "title": '卷库' },] },
+          { "id": 25, "title": '物理', "data": [{ "id": 26, "pid": 25, "title": '同步资源' }, { "id": 27, "pid": 25, "title": '卷库' },] },
+          { "id": 28, "title": '汉语', "data": [{ "id": 29, "pid": 28, "title": '同步资源' }, { "id": 30, "pid": 28, "title": '卷库' },] },
+          { "id": 31, "title": '信息技术', "data": [{ "id": 32, "pid": 31, "title": '同步资源' }, { "id": 33, "pid": 31, "title": '卷库' },] },
+          { "id": 34, "title": '道德与法治', "data": [{ "id": 35, "pid": 34, "title": '同步资源' },] },
+          { "id": 37, "title": '思想品德', "data": [{ "id": 38, "pid": 37, "title": '同步资源' }, { "id": 39, "pid": 37, "title": '卷库' },] },
+          { "id": 40, "title": '艺术', "data": [{ "id": 41, "pid": 40, "title": '同步资源' }, { "id": 42, "pid": 40, "title": '卷库' },] },
+          { "id": 43, "title": '研究性活动', "data": [{ "id": 44, "pid": 43, "title": '同步资源' }, { "id": 45, "pid": 43, "title": '卷库' },] },
+          { "id": 46, "title": '生命科学', "data": [{ "id": 47, "pid": 46, "title": '同步资源' },] },
+
+        ],
       }
     },
     methods: {
@@ -81,7 +114,7 @@
 <style>
   .list_box {
     width:100%;
-    background:url("../../assets/image/banner.png") no-repeat;
+    background:url("../../assets/image/resource/banner.png") no-repeat;
     background-size:100% 100%;
     height:396px;
     position:relative;
@@ -105,7 +138,7 @@
     color:#fff;
     margin-top:5px;
   }
-  .moreover_data {
+  .moreover_data_three, .moreover_data_one, .moreover_data_two {
     width: 100%;
     height: 108.5px;
     padding: 5%;
@@ -113,6 +146,7 @@
     background: #7abeee;
     border-top: #7abeee solid 1px;
     text-align: left;
+    position: relative;
   }
   .top_title {
     width:100%;
@@ -122,21 +156,21 @@
   .icon_img {
     width:35px;
     height:28px;
-    background:url(../../assets/image/list_icon.png) no-repeat 0px 0px ;
+    background:url(../../assets/image/resource/list_icon.png) no-repeat 0px 0px ;
     display:block;
     float:left;
   }
   .icon_img_two {
     width: 35px;
     height: 28px;
-    background: url(../../assets/image/list_icon.png) no-repeat 0px -70px;
+    background: url(../../assets/image/resource/list_icon.png) no-repeat 0px -70px;
     display: block;
     float: left;
   }
   .icon_img_three {
     width: 35px;
     height: 28px;
-    background: url(../../assets/image/list_icon.png) no-repeat 0px -141px;
+    background: url(../../assets/image/resource/list_icon.png) no-repeat 0px -141px;
     display: block;
     float: left;
   }
@@ -160,18 +194,24 @@
       color: #fff;
       margin: 0px 6px;
     }
-  .moreover_data:hover {
-    background:#056eaf;
-  
+  .moreover_data_one:hover {
+    background: #056eaf;
+  }
+  .moreover_data_two:hover {
+    background: #056eaf;
+  }
+  .moreover_data_three:hover {
+    background: #056eaf;
   }
   .conceal {
     width:580px;
     height:500px;
-    border:1px solid red;
+    /*border:1px solid red;*/
     position:absolute;
-    left:420px;
-    background:rgba(85,85,85,.9);
-    /*display:none;*/
+    left:211px;
+    top:0px;
+    background:rgba(85,85,85,.95);
+    display:none;
   }
   .conceal_list {
     float: left;
@@ -193,4 +233,16 @@
     color:#fff;
     margin-left:5px;
   }
+  .moreover_data_one:hover .conceal {
+    display: block;
+    top:-71px;
+  }
+  .moreover_data_two:hover .conceal {
+    display: block;
+    top:-180px;
+  }
+  .moreover_data_three:hover .conceal {
+    display: block;
+    top: -288px;
+  }
 </style>

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

@@ -0,0 +1,80 @@
+<template>
+  <div class="video">
+     <div class="video_box">
+       <div class="video_title"><div class="video_name">微课</div><i>2638</i></div>
+       <ul class="video_select">
+         <li class="select_name">语文</li>
+         <li class="select_name">数学</li>
+         <li class="select_name">英语</li>
+         <li class="select_name">物理</li>
+         <li class="select_name">化学</li>
+         <li class="select_name_more"><Icon type="ios-more" size="16"/></li>
+       </ul>
+     </div>
+    <div class="video_list">
+      <div class="video_left"></div>
+      <div class="video_right"></div>
+    </div>
+  </div>
+</template>
+<script>
+
+</script>
+<style scoped>
+  .video {
+    width: 100%;
+    padding: 0% 11% 0% 11%;
+    float: left;
+    background-color: #f3f3f3;
+  }
+  .video_box {
+    width:90%;
+    height:455px;
+    background-color:#fff;
+  }
+  .video_title {
+    width: 70%;
+    float: left;
+    padding-left: 30px;
+    border-bottom: #ececec solid 1px;
+  }
+  .video_name {
+    float: left;
+    line-height: 39px;
+    border-bottom: #288add solid 1px;
+    padding: 12px 5px 0px 5px;
+    font-size: 24px;
+    font-weight: normal;
+    color: #288add;
+  }
+  i {
+    float: left;
+    margin: 22px 0px 0px 8px;
+    height: 20px;
+    line-height: 20px;
+    border-radius: 10px;
+    background: #8ea9b9;
+    font-size: 14px;
+    padding: 0px 10px;
+    color: #fff;
+  }
+  .video_select {
+    width: 30%;
+    float: left;
+    list-style: none;
+    border-bottom: #ececec solid 1px;
+  }
+  .select_name {
+    float: left;
+    width: 15%;
+    line-height: 39px;
+    padding: 12px 5px 0px 5px;
+    font-size: 14px;
+    color: #6f8abb;
+  }
+  .select_name_more {
+    float: left;
+    width: 15%;
+    padding: 0px 5px 0px 5px;
+  }
+</style>

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

@@ -1,20 +1,26 @@
 <template>
   <div id="app">
-      <Header></Header>
+    <Header></Header>
     <Banner></Banner>
+    <Exam></Exam>
+    <Video></Video>
   </div>
 </template>
 <script>
   import Header from '@/common/headers.vue'
   import Banner from '@/components/resource/list.vue'
+  import Exam from '@/components/resource/exam.vue'
+  import Video from '@/components/resource/video.vue'
   export default {
     components: {
       Header,
-      Banner
+      Banner,
+      Exam,
+      Video
     },
     data() {
       return {
-
+       
       }
     },
       mounted() {
@@ -23,132 +29,9 @@
     }
 </script>
 <style scoped>
-  html, body, #app {
-    height: 100% !important;
-    /*-moz-user-select: none; /*火狐 firefox*/
-    /*-webkit-user-select: none;/ /*webkit浏览器*/
-    /*-ms-user-select: none;*/ /*IE10+*/
-    /*user-select: none;*/
-  }
-
-  .main-content {
-    position: relative;
+  #app {
     width: 100%;
-    min-width: 1200px;
-    min-height: 768px;
-    background: url("http://chq.dygl.pujiaoyun.cn/static/img/banner.071530a.jpg") center 100% no-repeat;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding-top: 50px;
-  }
-
-  .center {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .centerCol {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .overlay-wrap {
-    padding: 20px 10px;
-    background-color: rgba(218, 218, 218, 0.08);
-    margin-top: 50px;
-  }
-
-  .logo {
-    width: 200px;
-    height: 200px;
-    margin-bottom: 50px;
-  }
-
-  .btn-login {
-    width: 150px;
-    margin-top: 15px;
-    background-color: rgba(204,204,204,.37) !important;
-    border-color: #87888a !important;
-  }
-
-  .suc-text {
-    color: #fff;
-    font-size: 14px;
-    font-weight: 200;
-  }
-
-  .user-wrap {
-    position: absolute;
-    right: 50px;
-    top: 50px;
-    color: white;
-    font-size: 14px;
-    font-weight: 200;
-  }
-
-  .ivu-avatar {
-    background-color: #30a6e1 !important;
-    margin-right: 10px;
-  }
-
-  .btn-exit {
-    font-size: 12px;
-    cursor: pointer;
-    margin-left: 15px;
-  }
-
-  .select-role {
-    margin-top: 15px;
-  }
-
-    .select-role /deep/ .ivu-select {
-      color: #000 !important;
-      width: 150px !important;
-    }
-
-    .select-role .ivu-select-selection {
-      background-color: rgba(255,255,255,.18) !important;
-      border-color: #373737 !important;
-    }
-
-  .select-role-wrap {
-    background-color: rgba(218, 218, 218, 0.08);
-    padding: 5px;
-    justify-content: normal;
-    flex-wrap: wrap;
-    max-width: 930px;
-  }
-
-  .role-item {
-    width: 210px;
-    height: 210px;
-    background-color: rgba(179,179,179,.15);
-    margin: 10px;
-    color: #c5c5c5;
-    font-size: 14px;
-    font-weight: 200;
-    cursor: pointer;
-  }
-
-    .role-item:hover {
-      background: rgba(179,179,179,.42);
-      color: #fff;
-    }
-
-  .title {
-    font-size: 26px;
-    font-weight: 200;
-    color: #fff;
-    margin-bottom: 20px;
-  }
-
-  .role-name {
-    margin-top: 10px;
+    height: auto;
+    background-color:#f3f3f3;
   }
 </style>