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

<template>
  <div class="activity_container">
    <Header></Header>
    <Activitycommon></Activitycommon>
    <div class="activityshow">
      <div class="activityshow_box">
        <div class="ni_g_mainLeft01">
          <div class="ni_g_lnav_tit ni_g_h56">
            <span class="ni_span01">教材选择</span>
          </div>
          <div class="ni_g_lnav_sclass">
            <div class="ni_sclass clearfix pdtb25 ni_bg_img01 period">
              <a class="ni_g_text_align_right">学段 :</a>
              <a href="javascript:" class="active" data-id="">全部</a>
              <a href="javascript:" data-id="xx">小学</a>
              <a href="javascript:" data-id="cz">初中</a>
              <a href="javascript:" data-id="pg">高中</a>
            </div>
            <div class="ni_sclass_list">
              <div class="ni_div clearfix subject">
                <div class="ni_left ni_g_text_align_right">学科 :</div>
                <div class="ni_right">
                  <!--下拉插件 S-->
                  <Select v-model="model1" style="width:150px;">
                    <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                  </Select>
                  <!--下拉插件 E-->
                </div>
              </div>
              <div class="ni_div clearfix mgt20 edition">
                <div class="ni_left ni_g_text_align_right">版本 :</div>
                <div class="ni_right">
                  <!--下拉插件 S-->
                  <Select v-model="model1" style="width:150px;">
                    <Option v-for="itemc in cityList1" :value="itemc.value" :key="itemc.value">{{ itemc.label }}</Option>
                  </Select>
                  <!--下拉插件 E-->
                </div>
              </div>
              <div class="ni_div clearfix mgt20 volume">
                <div class="ni_left ni_g_text_align_right">册别 :</div>
                <div class="ni_right">
                  <!--下拉插件 S-->
                  <Select v-model="model1" style="width:150px;">
                    <Option v-for="itemy in cityList2" :value="itemy.value" :key="itemy.value">{{ itemy.label }}</Option>
                  </Select>
                  <!--下拉插件 E-->
                </div>
              </div>

            </div>
          </div>
          <div class="ni_tree_tools0816">
            <div class="zTreeDemoBackground2 left">
              <ul id="treeDemo2" class="ztree2"></ul>
            </div>
          </div>
        </div>
        <div class="ni_g_mainRight01">
          <!--排序和搜索 S-->
          <div class="ni_g_order_search clearfix">
            <!--排序 S-->
            <div class="ni_g_order">
              <a class="ni_a01 noactive">排序：</a>
              <a class="ni_a02 active" href="javascript:;" data-value="viewCount"><i class="ni_g_bg_ico01"></i>浏览最多</a>
              <a class="ni_a03" href="javascript:;" data-value="laudCount"><i class="ni_g_bg_ico01"></i>票数最高</a>
              <a class="ni_a04" href="javascript:;" data-value="commentCount"><i class="ni_g_bg_ico01"></i>点评最多</a>
              <a class="ni_a05" href="javascript:;" data-value="addTime"><i class="ni_g_bg_ico01"></i>最新上传</a>
              <a class="ni_a06 noactive">共<big class="totalnum">0</big>个文档</a>
            </div>
            <!--排序 E-->
            <!--搜索 S-->
            <div class="ni_g_search fr">
              <input type="text" placeholder="请输入作者或作品名称进行搜索" class="inp ni_g_w230 key">
              <a class="ni_button" href="javascript:;" onclick="loadList()"></a>
            </div>
            <!--搜索 E-->
          </div>
          <!--排序和搜索 E-->
          <!--作品展示列表 S-->
          <div class="ni_g_work listresource">
            <img style="display: block;margin: 60px auto;" src="https://css.huijiaoyun.com/tianyu_edu/area/edu4.0/images/tianyu_cup/ni_search_no_a.png">
          </div>
          <!--作品展示列表 E-->
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import Header from '@/common/headers.vue'
  import Footer from '@/common/footer.vue'
  import Activitycommon from '@/components/resource/activitycommon.vue'
  export default {
    components: {
      Header,
      Footer,
      Activitycommon,
    },
    data() {
      return {
        cityList: [
          {
            value: '语文',
            label: '语文'
          },
          {
            value: '数学',
            label: '数学'
          },
          {
            value: '英语',
            label: '英语'
          },
          {
            value: '体育',
            label: '体育'
          },
        ],
        cityList1: [
          {
            value: '人教版',
            label: '人教版'
          },
        ],
        cityList2: [
          {
            value: '2017-2018上册',
            label: '2017-2018上册'
          },
          {
            value: '2017-2018下册',
            label: '2017-2018下册'
          },
        ],
      }
    }
  }
</script>
<style scoped>
  .activityshow {
    width: 100%;
    height: 500px;
    background: #f8f8f8;
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .activityshow_box {
    width:1200px;
    height:auto;
    margin:0 auto;
  }
  .ni_g_mainLeft01 {
    float: left;
    width: 208px;
    border: 1px solid #e4e4e4;
  }
  .ni_g_h56 {
    height: 56px;
    line-height: 56px;
  }

  .ni_g_lnav_tit {
    background: #65b9ff;
    color: #fff;
    font-size: 20px;
    text-align: center;
  }
  .ni_g_lnav_sclass {
    background: #fff;
    padding:5px 0px 25px 0px;
  }
  .pdtb25 {
    padding-top: 25px;
    padding-bottom: 40px;
  }
  .clearfix {
    display: block;
  }
  .ni_g_lnav_sclass .ni_sclass a, .ni_g_lnav_sclass .ni_sclass_list .ni_div .ni_left {
    width: 20%;
    padding: 4px 0;
    float: left;
    text-align: center;
    display: inline-block;
    color: #555;
    font-size: 12px;
    border-radius: 3px;
  }
    .ni_g_lnav_sclass .ni_sclass a.active {
      background: #9d9d9d;
      color: #fff;
    }
  .mgt20 {
    margin-top: 20px;
  }
  .subject {
    margin-top:20px;
  }
  .ni_g_mainRight01 {
    float: right;
    width: 954px;
  }
  .ni_g_order_search {
    border-bottom: 1px solid #d0d0d0;
    height: 47px;
  }
  .ni_g_order {
    float: left;
    font-size: 14px;
    height: 36px;
    line-height: 36px;
  }
  .fr {
    float: right;
  }
  .ni_g_order a {
    color: #555;
    display: block;
    float: left;
    margin-left: 21px;
    height: 47px;
    border-bottom: 1px solid #d0d0d0;
    padding: 0 4px;
  }
    .ni_g_order a.noactive {
      border-bottom-color: transparent;
      color: #555;
    }
    .ni_g_order a.active {
      border-bottom-color: #288add;
      text-decoration: none;
      color: #288add;
    }
    .ni_g_order a .ni_g_bg_ico01 {
      width: 22px;
      height: 22px;
      display: block;
      float: left;
      margin: 5px 3px 0 0;
      background: url(../../assets/image/resource/ni_bg_ico01.png) no-repeat;
    }
    .ni_g_order a.ni_a02.active .ni_g_bg_ico01 {
      background-position: -28px -60px;
    }
    .ni_g_order a.ni_a03 .ni_g_bg_ico01 {
      background-position: 0 -96px;
    }
    .ni_g_order a.ni_a04 .ni_g_bg_ico01 {
      background-position: 0 -125px;
    }
    .ni_g_order a.ni_a05 .ni_g_bg_ico01 {
      background-position: 0 -158px;
    }
  .ni_g_search .inp {
    padding-top: 9px;
    padding-bottom: 8px;
  }
  .ni_g_w230 {
    width: 230px;
  }
  .inp {
    padding: 5px;
    border: 1px solid #d5d5d5;
    color: #888;
    outline: none;
    vertical-align: middle;
  }
  .ni_g_search .ni_button {
    height: 37px;
    width: 38px;
    border: 1px solid #44a9f1;
    display: block;
    float: right;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    background: url(../../assets/image/resource/ni_search_ico.png) no-repeat center center #56b8fd;
  }
</style>