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

<template>
  <div class="index_box">
    <div class="index_top">
      <div class="index_top_left">
        <Carousel autoplay v-model="value2" loop>
          <CarouselItem>
            <div class="demo-carousel"><img src="../../assets/image/resource/activity_banner_01.jpg" /></div>
          </CarouselItem>
          <CarouselItem>
            <div class="demo-carousel"><img src="../../assets/image/resource/activity_banner_02.png" /></div>
          </CarouselItem>
        </Carousel>
        <span class="tit">
          <em class="bg"></em>
          <p>2018年创新杯首届全国信息化教学创新大赛正式启动</p>
        </span>
      </div>
      <div class="index_top_right">
        <div class="index_top_title"><div class="right_title">活动报道</div></div>
        <ul class="index_top_list">
          <li class="index_top_data" v-for="item in listdata"><a href="" style="color:#555"><div class="index_top_data_title"><Icon type="ios-ribbon" size="24" />{{item.title}}</div><div class="index_top_data_time">{{item.time}}</div></a></li>
        </ul>
      </div>
      <div class="activity_img"><img src="../../assets/image/resource/flow_img.png" /></div>
      <div class="production_box">
        <div class="production_box_title"><div class="production_box_name">作品样例</div></div>
        <ul>
          <li></li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        value2: 0,
        listdata: [
          { "id": 1, "title": '成都市小学数学“高效课堂”教学研讨活动', "time": '2018-09-16' },
          { "id": 2, "title": '在看、说、读、演中感悟“博爱”', "time": '2018-09-02' },
          { "id": 3, "title": '幸福课堂，让学生真正享受语文学习的快乐', "time": '2018-08-20' },
          { "id": 4, "title": '成都市小学语文阅读教学中信息技术运用研讨', "time": '2018-05-12' },
          { "id": 5, "title": 'IPAD进课堂，华科附小美术课堂新体验', "time": '2018-02-19' },
          { "id": 6, "title": '在看、说、读、演中感悟“博爱”', "time": '2018-01-02' },
          { "id": 7, "title": '幸福课堂，让学生真正享受语文学习的快乐', "time": '2018-01-07' },
          { "id": 8, "title": '成都市小学语文阅读教学中信息技术运用研讨', "time": '2017-12-25' },
        ],
      }
    }
  }
</script>
<style>
  .index_box {
    width:100%;
    height:auto;
  }
  .index_top {
    width:1200px;
    height:350px;
    margin:0 auto;
    padding-top:20px;
  }
  .index_top_left {
    width:405px;
    height:288px;
    float:left;
    position:relative
  }
  .index_top_right{
    width: 750px;
    height: 290px;
    float: left;
    margin-left:30px;
  }
  .tit {
    position: absolute;
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 15px;
    color: #fff;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
  }
  .bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .1;
    filter: alpha(opacity=10);
    z-index: 0;
  }
  .index_top_title {
    width: 100%;
    height: 37px;
    border-bottom: 1px solid #e3e3e3;
  }
  .right_title {
    width:13%;
    font-size: 24px;
    color: #288add;
    border-bottom: 1px solid #288add;
  }
  .index_top_list {
    width:100%;
    height:250px;
    list-style:none;
  }
  .index_top_data {
    width:100%;
    padding:1%  3% 3% 0%;
  }
  .index_top_data_title {
    width: 70%;
    float: left;
    font-size: 14px;
  }
  .index_top_data_time {
    width:20%;
    float:right;
    font-size:12px;
  }
  .activity_img {
    width:1200px;
    margin-top:7%;
    float:left;
  }
  .production_box {
    width: 1200px;
    float: left;
    margin: 0 auto;
    margin-top: 5%;
  }
  .production_box_title {
    width: 100%;
    padding:1%;
  }
  .production_box_name {
    width:8.5%;
    font-size: 24px;
    color: #288add;
    border-bottom:1px solid #288add;
    margin-left:1%;
  }
</style>