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

<template>
  <div class="exam">
    <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.title}}</a></div>
          <div class="look"><Icon type="ios-eye" size="16" />{{items.loocknum}}</div>
        </li>
      </ul>
    </div>
    <div class="clear"></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' },
              { "type": '英语', "title": '2018年成都市中考英语试卷.doc', "loocknum": '920' },
              { "type": '数学', "title": '2018年成都市中考数学试卷.doc', "loocknum": '1006' },
              { "type": '化学', "title": '2018年成都市中考化学试卷.doc', "loocknum": '450' },
            ]
          },
          {
            "id": 2, "title": '高考专区', "num": '1080', "img": require("../../assets/image/resource/exam_img_two.jpg"), data: [
              { "type": '语文', "title": '2018年成都市高考语文试卷.doc', "loocknum": '1750' },
              { "type": '英语', "title": '2018年成都市高考英语试卷.doc', "loocknum": '1220' },
              { "type": '数学', "title": '2018年成都市高考数学试卷.doc', "loocknum": '1606' },
              { "type": '历史', "title": '2018年成都市高考历史试卷.doc', "loocknum": '1450' },
            ]
          },
          {
            "id": 3, "title": '优课专区', "num": '900', "img": require("../../assets/image/resource/exam_img_three.jpg"), data: [
              { "type": '优课', "title": '等腰三角形的判定与反证法', "loocknum": '350' },
              { "type": '优课', "title": '一元二次方程的应用', "loocknum": '620' },
              { "type": '优课', "title": '万有引力定律的应用', "loocknum": '606' },
              { "type": '优课', "title": '化学平衡的特征', "loocknum": '535' },
            ]
          },
        ]
      }
    }
  }
</script>
<style scoped>
  .exam {
    width: 100%;
    padding: 0% 11% 0% 11%;
    float: left;
    background-color: #f3f3f3;
  }
  .exam_box {
    width: 25.3%;
    height: auto;
    margin: 1%;
    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_box:nth-child(2) {
      margin: 1% 1% 1% 6%;
    }
    .exam_box:nth-child(3) {
      margin: 1% 1% 1% 6%;
    }

  .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_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;
  }

  .look {
    float: right;
  }

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

  .clear {
    clear: both
  } 
</style>