|
@@ -0,0 +1,248 @@
|
|
|
+<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_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>
|
|
|
+ <a href="">素材</a>
|
|
|
+ <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_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>
|
|
|
+ <a href="">试卷</a>
|
|
|
+ <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_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>
|
|
|
+ <a href="">真题</a>
|
|
|
+ <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>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ xs:false,
|
|
|
+ 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": '卷库' },] },
|
|
|
+ ],
|
|
|
+ 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: {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style>
|
|
|
+ .list_box {
|
|
|
+ width:100%;
|
|
|
+ background:url("../../assets/image/resource/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_three, .moreover_data_one, .moreover_data_two {
|
|
|
+ width: 100%;
|
|
|
+ height: 108.5px;
|
|
|
+ padding: 5%;
|
|
|
+ list-style: none;
|
|
|
+ background: #7abeee;
|
|
|
+ border-top: #7abeee solid 1px;
|
|
|
+ text-align: left;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .top_title {
|
|
|
+ width:100%;
|
|
|
+ height:40px;
|
|
|
+ display:block;
|
|
|
+ }
|
|
|
+ .icon_img {
|
|
|
+ width:35px;
|
|
|
+ height:28px;
|
|
|
+ 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/resource/list_icon.png) no-repeat 0px -70px;
|
|
|
+ display: block;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .icon_img_three {
|
|
|
+ width: 35px;
|
|
|
+ height: 28px;
|
|
|
+ background: url(../../assets/image/resource/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_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;*/
|
|
|
+ position:absolute;
|
|
|
+ left:211px;
|
|
|
+ top:0px;
|
|
|
+ background:rgba(85,85,85,.95);
|
|
|
+ display:none;
|
|
|
+ }
|
|
|
+ .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{
|
|
|
+ font-size:14px;
|
|
|
+ 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>
|