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 class="production_list">
          <li>
            <a class="imgShow" href="javascript:;"><em class="icon_tianyu_cup i01"></em><img src="https://css.huijiaoyun.com/tianyu_edu/area/edu4.0/images/tianyu_cup/class07.jpg"></a>
            <p class="f18 videoName">绿色植物的光合作用<i class="c01">生</i></p>
            <p class="f14"><a href="javascript:;" class="fr">鲁巷实验小学</a><a class="f14" href="javascript:;">孙云芳</a></p>
            <p><a href="javascript:;" class="videoTag style01">导学案</a><a href="javascript:;" class="videoTag style02">微课</a><a href="javascript:;" class="videoTag style03">教学设计</a><a href="javascript:;" class="videoTag style04">多媒体课件</a><a href="javascript:;" class="videoTag style05">课堂板书</a></p>
          </li>
          <li>
            <a class="imgShow" href="javascript:;"><em class="icon_tianyu_cup i01"></em><img src="https://css.huijiaoyun.com/tianyu_edu/area/edu4.0/images/tianyu_cup/class08.jpg"></a>
            <p class="f18 videoName">分液漏斗<i class="c02">化</i></p>
            <p class="f14"><a href="javascript:;" class="fr">武汉市育才第二小学</a><a class="f14" href="javascript:;">侯敏</a></p>
            <p><a href="javascript:;" class="videoTag style01">导学案</a><a href="javascript:;" class="videoTag style02">微课</a><a href="javascript:;" class="videoTag style03">教学设计</a><a href="javascript:;" class="videoTag style04">多媒体课件</a><a href="javascript:;" class="videoTag style05">课堂板书</a></p>
          </li>
          <li class="last">
            <a class="imgShow" href="javascript:;"><em class="icon_tianyu_cup i01"></em><img src="https://css.huijiaoyun.com/tianyu_edu/area/edu4.0/images/tianyu_cup/class09.jpg"></a>
            <p class="f18 videoName">记单词的方法<i class="c03">英</i></p>
            <p class="f14"><a href="javascript:;" class="fr">武汉小学</a><a class="f14" href="javascript:;">何炜</a></p>
            <p><a href="javascript:;" class="videoTag style01">导学案</a><a href="javascript:;" class="videoTag style02">微课</a><a href="javascript:;" class="videoTag style03">教学设计</a><a href="javascript:;" class="videoTag style04">多媒体课件</a><a href="javascript:;" class="videoTag style05">课堂板书</a></p>
          </li>
        </ul>
      </div>
      <div class="production_center_img"><img src="../../assets/image/resource/activity_centerimg.png" /></div>
      <div class="rowWrap py_white_bg pdtb30">
        <div class="w1200 clearfix">
          <div class="app-title py_app-title">
            <a href="/index.php?r=ams/activity/cup/master&amp;id=1" class="title-more">更多</a>
            <span class="title-text">活动达人</span>
          </div>
          <ul class="joiner clearfix">
            <li>
              <a target="_blank" href="">
                <img src="../../assets/image/resource/touxiang_01.jpeg">
                <p class="t_c f14 c222 mgt5">郭一凡老师</p>
                <p class="t_c f12 c888">语文</p>
                <p class="t_c f14" title="">成都树德中学</p>
              </a>
            </li>
            <li>
              <a target="_blank" href="">
                <img src="../../assets/image/resource/touxiang_02.jpeg">
                <p class="t_c f14 c222 mgt5">李汝墨老师</p>
                <p class="t_c f12 c888">英语</p>
                <p class="t_c f14" title="">成都四中</p>
              </a>
            </li>
            <li>
              <a target="_blank" href="">
                <img src="https://css.huijiaoyun.com/tianyu_edu/common/images/nophoto_mid.gif?">
                <p class="t_c f14 c222 mgt5">张天华老师</p>
                <p class="t_c f12 c888">数学</p>
                <p class="t_c f14" title="">成都四中</p>
              </a>
            </li>
            <li>
              <a target="_blank" href="">
                <img src="../../assets/image/resource/touxiang_03.jpg">
                <p class="t_c f14 c222 mgt5">王晓君老师</p>
                <p class="t_c f12 c888">语文</p>
                <p class="t_c f14" title="">成都石室中学</p>
              </a>
            </li>
            <li>
              <a target="_blank" href="">
                <img src="https://css.huijiaoyun.com/tianyu_edu/common/images/nophoto_mid.gif?">
                <p class="t_c f14 c222 mgt5">李庆梅老师</p>
                <p class="t_c f12 c888">数学</p>
                <p class="t_c f14" title="">成都外国语小学</p>
              </a>
            </li>
            <li>
              <a target="_blank" href="">
                <img src="../../assets/image/resource/touxiang_04.jpg">
                <p class="t_c f14 c222 mgt5">陈彬</p>
                <p class="t_c f12 c888">英语</p>
                <p class="t_c f14" title="">杭州经济技术...</p>
              </a>
            </li>
            <li>
              <a target="_blank" href="https://www.huijiaoyun.com/index.php?r=space/person/index&amp;sid=1f0dcd47dc2040a2895818f802f3b536">
                <img src="../../assets/image/resource/touxiang_05.jpg">
                <p class="t_c f14 c222 mgt5">王骅</p>
                <p class="t_c f12 c888">物理</p>
                <p class="t_c f14" title="">成都树德中学</p>
              </a>
            </li>
            <li>
              <a target="_blank" href="https://www.huijiaoyun.com/index.php?r=space/person/index&amp;sid=95d6886408a24fb594e7a71c9ad22702">
                <img src="../../assets/image/resource/touxiang_06.jpg">
                <p class="t_c f14 c222 mgt5">鞠光敏</p>
                <p class="t_c f12 c888">数学</p>
                <p class="t_c f14" title="">成都师范附小</p>
              </a>
            </li>
            <li>
              <a target="_blank" href="https://www.huijiaoyun.com/index.php?r=space/person/index&amp;sid=a87d3987bf7448d2b4af62aac432ab00">
                <img src="https://css.huijiaoyun.com/tianyu_edu/common/images/nophoto_mid.gif?">
                <p class="t_c f14 c222 mgt5">陈汝杰</p>
                <p class="t_c f12 c888">历史</p>
                <p class="t_c f14" title="">成都树德中学</p>
              </a>
            </li>
            <li>
              <a target="_blank" href="https://www.huijiaoyun.com/index.php?r=space/person/index&amp;sid=34a5edf1a1ad4dadad70144c6f9d4e1b">
                <img src="https://css.huijiaoyun.com/tianyu_edu/common/images/nophoto_mid.gif?">
                <p class="t_c f14 c222 mgt5">张小梅</p>
                <p class="t_c f12 c888">化学</p>
                <p class="t_c f14" title="">成都树德中学</p>
              </a>
            </li>
            <li>
              <a target="_blank" href="https://www.huijiaoyun.com/index.php?r=space/person/index&amp;sid=0755d883b20241b1b0e4f74f035fce25">
                <img src="https://css.huijiaoyun.com/tianyu_edu/common/images/nophoto_mid.gif?">
                <p class="t_c f14 c222 mgt5">陈琼</p>
                <p class="t_c f12 c888">数学</p>
                <p class="t_c f14" title="">广安市第一中学</p>
              </a>
            </li>
            <li>
              <a target="_blank" href="https://www.huijiaoyun.com/index.php?r=space/person/index&amp;sid=c4f9a1c09fea4e0185e523a4ec4891ff">
                <img src="../../assets/image/resource/touxiang_08.jpg">
                <p class="t_c f14 c222 mgt5">张亮</p>
                <p class="t_c f12 c888">英语</p>
                <p class="t_c f14" title="">成都盐道街中学</p>
              </a>
            </li>
          </ul>
        </div>
      </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% 1% 0% 1% ;
    border-bottom: 1px solid #e3e3e3;
  }
  .production_box_name {
    width:8.5%;
    font-size: 24px;
    color: #288add;
    border-bottom:1px solid #288add;
    margin-left:1%;
  }
  .production_list {
    width:100%;
    height:400px;
    padding: 20px 0;
  }
    .production_list li {
      width: 348px;
      float: left;
      margin-right: 75px;
      border: 1px solid transparent;
      list-style:none;
    }
      .production_list li:hover {
        border: 1px solid #e3e3e3;
        box-shadow: 2px 2px 6px #e3e3e3;
      }
  .production_list .imgShow {
    width: 100%;
    height: 200px;
    position: relative;
    display: block;
    overflow: hidden;
  }
      .production_list .imgShow .icon_tianyu_cup.i01 {
        display: block;
        position: absolute;
        background-position: 0 -496px;
        width: 68px;
        height: 68px;
        left: 50%;
        top: 50%;
        margin: -34px 0 0 -34px;
      }
  .icon_tianyu_cup {
    display: inline-block;
    vertical-align: middle;
    background: url(../../assets/image/resource/activity_icon.png) no-repeat;
  }
  .production_list p {
    margin: 10px;
  }
  .production_list .videoName i {
    display: inline-block;
    width: 18px;
    height: 18px;
    background: #50c78d;
    text-align: center;
    line-height: 18px;
    color: #fff;
    font-size: 12px;
    margin-left: 10px;
    border-radius: 50%;
    vertical-align: middle;
    font-style: normal;
  }
    .production_list .videoName i.c01 {
      background-color: #d4b36f;
    }
  .f14 {
    font-size: 14px;
  }
  .production_list p a {
    color: #6b8fb8;
  }
  .example a {
    cursor: default;
    text-decoration: none;
  }
  .production_list p a {
    color: #6b8fb8;
  }
  .production_list .videoTag {
    display: inline-block;
    padding: 0 6px;
    border: 1px solid #ec6941;
    color: #d66868;
    border-radius: 5px;
    margin-right: 4px;
  }
    .production_list .videoTag.style01 {
      border-color: #ec6941;
      color: #d66868;
    }
    .production_list .videoTag.style02 {
      border-color: #3ccb50;
      color: #53b861;
    }
    .production_list .videoTag.style03 {
      border-color: #e0ad32;
      color: #e0ad32;
    }
    .production_list .videoTag.style04 {
      border-color: #93c5db;
      color: #6aaae6;
    }
    .production_list .videoTag.style05 {
      border-color: #778bec;
      color: #fff;
      background: #778bec;
    }
    .last {
      margin-right:0px !important;
    }
  .production_center_img {
    width:1200px;
    float:left;
    padding-bottom:40px;
    margin:0 auto;
  }
  .rowWrap {
    width: 100%;
  }

  .pdtb30 {
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .w1200 {
    width: 1200px;
    margin: 0 auto;
    float:left;
  }
  .app-title.py_app-title {
    height: 41px;
    border-bottom: 1px solid #e3e3e3;
    padding-top: 0;
  }
  .app-title .title-more {
    float: right;
    height: 21px;
    overflow: hidden;
    text-indent: 1000px;
    margin-top: 20px;
    margin-right: 20px;
  }
  .app-title .title-text {
    display: inline-block;
    font-size: 24px;
    color: #288add;
    border-bottom: 1px solid #288add;
    margin-left: 20px;
    padding: 0 2px 4px;
  }
  .joiner li {
    float: left;
    margin: 15px 26px;
    list-style:none;
  }
    .joiner li a {
      width: 147px;
      height: 165px;
      border-radius: 10px;
      position: relative;
      display: block;
      overflow: hidden;
      border: 1px solid #f0f0f0;
      padding: 15px 20px;
      background: #f0f0f0;
      color: #6b8398;
    }
      .joiner li a img {
        width: 60%;
        height: auto;
        border-radius: 5px;
        overflow: hidden;
        margin-left:20%;
      }
  .mgt5 {
    margin-top: 5px;
  }

  .t_c {
    text-align: center;
  }

  .c222, a.c222 {
    color: #222;
  }

  .f14 {
    font-size: 14px;
  }
  .c888, a.c888 {
    color: #888;
  }
  .f12 {
    font-size: 12px;
  }
</style>