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

<template>
  <div class="exam">
    <div class="exam_list_box_width">
      <div class="exam_box" v-for="item in listdata">
        <div class="exam_title"><div class="exam_name">{{item.title}}</div><i>{{item.num}}</i></div>
        <div class="exam_img"><img :src="item.img" /></div>
        <ul class="exam_list">
          <li class="exam_list_data" v-for="items in item.data">
            <div class="exam_list_title"><a :href="items.url" target="_blank">{{items.title}}</a></div>
            <div class="look"><Icon type="ios-eye" size="16" />{{items.loocknum}}</div>
          </li>
        </ul>
      </div>
      <div class="clear"></div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        listdata: [
          {
            "id": 1, "title": '中考专区', "num": '980', "img": require("../../assets/image/resource/exam_img_one.jpg"), data: [
              { "type": '物理', "title": '2018年成都市中考物理试卷.doc', "loocknum": '750',"url":'/details' },
              { "type": '英语', "title": '2018年成都市中考英语试卷.doc', "loocknum": '920', "url": '/details'},
              { "type": '数学', "title": '2018年成都市中考数学试卷.doc', "loocknum": '1006', "url": '/details'},
              { "type": '化学', "title": '2018年成都市中考化学试卷.doc', "loocknum": '450', "url": '/details'},
            ]
          },
          {
            "id": 2, "title": '高考专区', "num": '1080', "img": require("../../assets/image/resource/exam_img_two.jpg"), data: [
              { "type": '语文', "title": '2018年成都市高考语文试卷.doc', "loocknum": '1750', "url": '/details' },
              { "type": '英语', "title": '2018年成都市高考英语试卷.doc', "loocknum": '1220', "url": '/details' },
              { "type": '数学', "title": '2018年成都市高考数学试卷.doc', "loocknum": '1606', "url": '/details' },
              { "type": '历史', "title": '2018年成都市高考历史试卷.doc', "loocknum": '1450', "url": '/details' },
            ]
          },
          {
            "id": 3, "title": '优课专区', "num": '900', "img": require("../../assets/image/resource/exam_img_three.jpg"), data: [
              { "type": '优课', "title": '古诗二首', "loocknum": '350', "url":'http://1s1k.eduyun.cn/portal/redesign/index/index.jsp?sdResIdCaseId=8aee808f62fbe7ab016300a9e6a22e65&t=2&sessionKey=3xCsBKvbaWPKVmk1Yk9Y' },
              { "type": '优课', "title": '我的影子', "loocknum": '620', "url":'http://1s1k.eduyun.cn/portal/redesign/index/index.jsp?sdResIdCaseId=8aee80a562bc9be10162be0f7167109d&t=2&sessionKey=ey65FtcgEGMh4uHprmSE' },
              { "type": '优课', "title": '路程、时间与速度', "loocknum": '606', "url":'http://1s1k.eduyun.cn/portal/redesign/index/index.jsp?sdResIdCaseId=ff8080815d07057f015d07443709007a&t=2&sessionKey=wj0ZhZK7YbjgxhIBJiGw' },
              { "type": '优课', "title": '振兴中华，我们的责任', "loocknum": '535', "url":'http://1s1k.eduyun.cn/portal/redesign/index/index.jsp?sdResIdCaseId=ff8080815cb052d2015cbebe8a1b23fa&t=2&sessionKey=EvC9kFlYWNaWFm1tKsG0' },
            ]
          },
        ]
      }
    }
  }
</script>
<style scoped>
  .exam {
    width: 100%;
    padding: 0% 11% 0% 11%;
    float: left;
    background-color: #f3f3f3;
    margin:0 auto;
  }
  .exam_list_box_width {
    width: 1200px;
    margin:0 auto;
  }
  .exam_box {
    width: 30%;
    height: auto;
    margin: 1% 0% 1% 4.5%;
    text-align: center;
    float: left;
    border: #ececec solid 1px;
    padding: 1%;
    box-shadow: 2px 2px 10px rgba(15,4,9,0.05);
    background-color: #fff;
  }
    .exam_box:nth-child(1) {
      margin: 1% 1% 1% 0%;
    }

  .exam_title {
    width: 100%;
    display: block;
    float: left;
  }

  .exam_name {
    font-size: 24px;
    border-bottom: #288add solid 1px;
    float: left;
    margin-left: 20px;
  }

  .exam_title i {
    float: left;
    margin: 8px 0px 0px 8px;
    height: 20px;
    line-height: 20px;
    border-radius: 10px;
    background: #8ea9b9;
    font-size: 14px;
    padding: 0px 10px;
    color: #fff;
  }

  .exam_img {
    margin-top: 10px;
    float: left;
  }
    .exam_img img {
      width:90%;
    }
    .exam_list {
      width: 100%;
      height: auto;
      padding: 1%;
      list-style: none;
      float: left;
      text-align: left;
    }

  .exam_list_data {
    width: 100%;
    float: left;
  }

  .exam_list_title {
    float: left;
    font-size:15px;
  }

  .look {
    float: right;
  }

  a {
    text-decoration: none;
    color: #333;
  }

  .clear {
    clear: both
  }

</style>