提交代码

TEAMModelOS.SmartTeach/ClientApp/common/headers.vue

@@ -4,7 +4,7 @@
       <img src="https://css.huijiaoyun.com/tianyu_edu/area/888888/images/logo/logo.png?v=0818"  class="logo_img"/>
       <div class="header_list">
         <ul>
-          <li v-for="items in navlist" class="nav_name">{{items.name}}</li>
+          <a href=""><li v-for="items in navlist" class="nav_name">{{items.name}}</li></a>
         </ul>
       </div>
     </div>
@@ -37,12 +37,12 @@
   .header_left {
     width: 70%;
     float: left;
-    height: 85px;
+    height: 75px;
   }
   .header_right {
     width: 30%;
     float: left;
-    height: 85px;
+    height: 75px;
   }
   .logo_img {
     float: left;

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

@@ -0,0 +1,190 @@
+<template>
+  <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">
+        <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>
+          <a href="">素材</a>
+          <a href="">动画</a>
+          <a href="">课件</a>
+        </div>
+      </li>
+      <li class="moreover_data">
+        <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>
+          <a href="">试卷</a>
+          <a href="">素材</a>
+          <a href="">课件</a>
+        </div>
+      </li>
+      <li class="moreover_data">
+        <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>
+          <a href="">真题</a>
+          <a href="">素材</a>
+          <a href="">课件</a>
+        </div>
+      </li>
+    </ul>
+    <ul class="conceal">
+      <li class="conceal_list" v-for="item in xiaoxue">
+        <p class="conceal_list_title">{{item.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>
+      <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>
+  export default {
+    data() {
+      return {
+        xiaoxue: [
+          { "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": 36, "pid": 34, "title": '卷库' },] },
+          { "id": 37, "title": '体育与健康', "data": [{ "id": 38, "pid": 37, "title": '同步资源' }, { "id": 39, "pid": 37, "title": '卷库' },] },
+
+        ],
+      }
+    }
+  }
+</script>
+<style>
+  .list_box {
+    width:100%;
+    background:url("../../assets/image/banner.png") no-repeat;
+    background-size:100% 100%;
+    height:396px;
+    position:relative;
+  }
+  .list_header {
+    width:11%;
+    position:absolute;
+    left:210px;
+    height:400px;
+    text-align:center;
+  }
+  .list_data {
+    width: 100%;
+    height: 70px;
+    list-style: none;
+    background: #7abeee;
+    line-height: 70px;
+  }
+  .list_header_title {
+    font-size: 24px;
+    color:#fff;
+    margin-top:5px;
+  }
+  .moreover_data {
+    width: 100%;
+    height: 108.5px;
+    padding: 5%;
+    list-style: none;
+    background: #7abeee;
+    border-top: #7abeee solid 1px;
+    text-align: left;
+  }
+  .top_title {
+    width:100%;
+    height:40px;
+    display:block;
+  }
+  .icon_img {
+    width:35px;
+    height:28px;
+    background:url(../../assets/image/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;
+    display: block;
+    float: left;
+  }
+  .icon_img_three {
+    width: 35px;
+    height: 28px;
+    background: url(../../assets/image/list_icon.png) no-repeat 0px -141px;
+    display: block;
+    float: left;
+  }
+  .moreover_title {
+    font-size: 20px;
+    color: #fff;
+    margin-left: 40px;
+    float: left;
+  }
+  .jt {
+    color:#fff;
+    font-size:30px;
+  }
+  .bottom_title {
+    width:100%;
+    height:40px;
+    padding-top:15px;
+  }
+    .bottom_title a {
+      font-size: 14px;
+      color: #fff;
+      margin: 0px 6px;
+    }
+  .moreover_data:hover {
+    background:#056eaf;
+  }
+  .conceal {
+    width:580px;
+    height:500px;
+    border:1px solid red;
+    position:absolute;
+    left:420px;
+    background:rgba(85,85,85,.9);
+  }
+  .conceal_list {
+    float: left;
+    width: 175px;
+    padding-left: 19px;
+    padding-top:20px;
+    overflow: hidden;
+    zoom: 1;
+    margin-right: 15px;
+    height: 76px;
+    list-style:none;
+  }
+  .conceal_list_title{
+    font-size: 18px;
+    color: #5e90b1;
+  }
+  .conceal_list_subhead span {
+    font-size:14px;
+    color:#fff;
+    margin-left:5px;
+  }
+</style>

TEAMModelOS.SmartTeach/ClientApp/router/routes.js

@@ -1,7 +1,7 @@
 //import Login from '@/view/login'
 //import ServerSideLogin from '@/view/serverside/login'
 // import HTTP404 from '@/view/404'
-import Index from '@/view/index'
+import Index from '@/view/resource/index'
 import { resolve } from 'url';
 
 export const routes = [  

TEAMModelOS.SmartTeach/ClientApp/view/index.vue

@@ -1,13 +1,17 @@
 <template>
   <div id="app">
       <Header></Header>
+      <div>
+        <Banner></Banner>
+      </div>
   </div>
 </template>
 <script>
-  import Header from '@/common/headers.vue'
+  import Header from '@/common/headers.vue';
   export default {
     components: {
-      Header
+      Header,
+      Banner
     },
     data() {
       return {
@@ -20,132 +24,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;
-    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;
+  #app {
+    width:100%;
+    height:auto;
+    padding:0;
   }
 </style>

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

@@ -0,0 +1,154 @@
+<template>
+  <div id="app">
+      <Header></Header>
+    <Banner></Banner>
+  </div>
+</template>
+<script>
+  import Header from '@/common/headers.vue'
+  import Banner from '@/components/resource/list.vue'
+  export default {
+    components: {
+      Header,
+      Banner
+    },
+    data() {
+      return {
+
+      }
+    },
+      mounted() {
+        
+      }
+    }
+</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;
+    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;
+  }
+</style>