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

<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>