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

<template>
  <div class="recommend">
    <div class="recommend_box">
      <div class="recommend_header">
        <div class="recommend_title">精彩推荐</div>
        <ul class="recommend_select">
          <li class="recommend_select_box">
            <Dropdown trigger="click" style="margin-left: 20px">
              <a href="javascript:void(0)" style="color:#888;">
                学段
                <Icon type="ios-arrow-down"></Icon>
              </a>
              <DropdownMenu slot="list">
                <DropdownItem>不限</DropdownItem>
                <DropdownItem>小学</DropdownItem>
                <DropdownItem>初中</DropdownItem>
                <DropdownItem>高中</DropdownItem>
              </DropdownMenu>
            </Dropdown>
          </li>
          <li class="recommend_select_box">
            <Dropdown trigger="click" style="margin-left: 20px">
              <a href="javascript:void(0)" style="color:#888;">
                学科
                <Icon type="ios-arrow-down"></Icon>
              </a>
              <DropdownMenu slot="list">
                <DropdownItem>不限</DropdownItem>
                <DropdownItem>语文</DropdownItem>
                <DropdownItem>数学</DropdownItem>
                <DropdownItem>英语</DropdownItem>
                <DropdownItem>历史</DropdownItem>
                <DropdownItem>政治</DropdownItem>
                <DropdownItem>地理</DropdownItem>
                <DropdownItem>物理</DropdownItem>
                <DropdownItem>化学</DropdownItem>
                <DropdownItem>生物</DropdownItem>
                <DropdownItem>信息技术</DropdownItem>
                <DropdownItem>汉语</DropdownItem>

              </DropdownMenu>
            </Dropdown>
          </li>
          <li class="recommend_select_box">
            <Dropdown trigger="click" style="margin-left: 20px">
              <a href="javascript:void(0)" style="color:#888;">
                类型
                <Icon type="ios-arrow-down"></Icon>
              </a>
              <DropdownMenu slot="list">
                <DropdownItem>不限</DropdownItem>
                <DropdownItem>教案</DropdownItem>
                <DropdownItem>课件</DropdownItem>
                <DropdownItem>试卷</DropdownItem>
                <DropdownItem>习题</DropdownItem>
                <DropdownItem>素材</DropdownItem>
              </DropdownMenu>
            </Dropdown>
          </li>
        </ul>
      </div>
      <div class="left_box">
        <p class="left_title">最新资源</p>
        <ul class="recommend_left">
          <li class="recommend_list" v-for="items in news">
            <a :href="items.url" style="color:#555;">
              <div class="recommend_list_title"><Icon :type="items.icon" size="16" />{{items.title}}.{{items.type}}</div><div class="recommend_list_time">{{items.time}}</div>
            </a>
          </li>
        </ul>
      </div>
      <div class="left_box">
        <p class="left_title">最热资源</p>
        <ul class="recommend_left">
          <li class="recommend_list" v-for="item in hot">
            <a :href="item.url" style="color:#555;">
              <div class="recommend_list_title"><Icon :type="item.icon" size="16" :class="item.iconclass" />{{item.title}}</div><div class="recommend_list_time"><Icon type="ios-eye" size="18" />{{item.looknum}}</div>
            </a>
           </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        news: [
          { "id": 1, "title": '衣服上的水跑到哪去', "type": 'mp4', "icon":'ios-videocam',"time": '05-08',"url":'/videodetails' },
          { "id": 2, "title": '人教版-一元二次方程式', "type": 'doc', "icon": 'md-bookmarks', "time":'03-25',"url":'/details' },
          { "id": 3, "title": '秋天', "type": 'doc', "icon": 'md-copy', "time": '04-12', "url": '/details' },
          { "id": 4, "title": '鸽巢问题', "type": 'docx', "icon": 'md-copy', "time": '02-18', "url": '/details' },
          { "id": 5, "title": '美术设计', "type": 'mp4', "icon": 'ios-image', "time": '03-08', "url": '/videodetails' },
          { "id": 6, "title": '秋天', "type": 'doc', "icon": 'md-copy', "time": '04-12', "url": '/details' },
          { "id": 7, "title": '鸽巢问题', "type": 'docx', "icon": 'md-copy', "time": '02-18', "url": '/details'},
          { "id": 8, "title": '美术设计', "type": 'mp4', "icon": 'ios-image', "time": '03-08', "url": '/videodetails' },
          { "id": 9, "title": '衣服上的水跑到哪去', "type": 'mp4', "icon": 'ios-videocam', "time": '05-08', "url": '/videodetails' },
        ],
        hot: [
          { "id": 1, "title": '2018年高考文综北京卷.doc', "icon": 'md-trophy', "iconclass": "one", "looknum": '12652', "url": '/details'},
          { "id": 2, "title": '2018年高考理综四川卷.doc', "icon": 'md-trophy', "iconclass": "two", "looknum": '11012', "url": '/details' },
          { "id": 3, "title": '2018年高考文综四川卷.doc', "icon": 'md-trophy', "iconclass": "three", "looknum": '9152', "url": '/details'},
          { "id": 4, "title": '2018年高考理综新课标Ⅰ卷.doc', "icon": 'md-medal', "iconclass": "", "looknum": '8652', "url": '/details' },
          { "id": 5, "title": '湖北省武汉市2018年中考数学模拟题.doc', "icon": 'md-medal', "iconclass": "", "looknum": '6652', "url": '/details' },
          { "id": 6, "title": '湖北省武汉市2018年中考物理模拟题.doc', "icon": 'md-medal', "iconclass": "", "looknum": '6352', "url": '/details'},
          { "id": 7, "title": '2018高考真题语文全国卷Ⅱ解析.doc', "icon": 'md-medal', "iconclass": "", "looknum": '6152', "url": '/details' },
          { "id": 8, "title": '2018年高考文综全国卷Ⅰ.doc', "icon": 'md-medal', "iconclass": "", "looknum": '5652', "url": '/details'},
          { "id": 9, "title": '2016年高考文综北京卷.doc', "icon": 'md-medal', "iconclass": "", "looknum": '4352', "url": '/details' },
        ],
      }
    },
    methods:{
      skbtn() {
        
      }
    }
  }
</script>
<style scoped>
  .recommend {
    width: 100%;
    padding: 1% 11% 0% 11%;
    float: left;
    background-color: #f3f3f3;
 
  }
  .recommend_box {
    width: 1200px;
    height: auto;
    background-color: #fff;
    box-shadow: 2px 2px 10px rgba(15,4,9,0.05);
    margin:0 auto;
    overflow:hidden;
  }
  .recommend_header {
    width: 100%;
    height:50px;
    padding: 1.1%;
    border: #ececec solid 1px;
  }
  .recommend_title {
    float: left;
    line-height: 24px;
    border-bottom: #288add solid 1px;
    padding: 10px 3px 0px 3px;
    font-size: 24px;
    font-weight: normal;
    color: #288add;
  }
  .recommend_select {
    float: right;
    color: #555;
    font-size: 14px;
    list-style:none;
  }
  .recommend_select_box {
    float: left;
    padding: 0 20px 0 16px;
    border-right: 1px solid #e3e3e3;
  }
    .recommend_select_box:nth-child(3) {
      border-right: 0;
    }
  .ivu-dropdown-menu {
    max-height:200px;
    overflow:auto;
  }
  .ivu-dropdown-item {
    font-size:14px !important;
  }
  .left_box {
    float:left;
    width:50%;
    /*border:1px solid red;*/
    height:auto;
    padding:1%;
    /*border-right:1px solid #e3e3e3;*/
  }
  .recommend_left {
    width:100%;
    padding-top:15px;
  }
  .left_title {
    font-size:20px;
    color:#222;
  }
  .recommend_list {
    width: 100%;
    list-style: none;
    float: left;
    padding:8px 2px;
    border-bottom:1px dashed #ddd;
  }
  .recommend_list_title {
    font-size:14px;
    float:left
  }
  .recommend_list_time {
    float:right
  }
  .one {
    color:red;
  }
  .two {
    color: #FF9966;
  }
</style>