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="">
                <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="">
                <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="">
                <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="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="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_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 class="activityrank">
        <div class="activityrangk_header"><div class="activity_title">学段排行</div><div class="activity_more"><a href="">更多</a></div></div>
        <div class="ranklist_box">
          <div class="ranklist_data">
            <div class="rankheader"><div class="rank_icon"></div><i class="header_name">小学</i><div class="fwtp"><span>访问量</span><span>投票数</span></div></div>
            <ul class="rankdata">
              <li>
                <em class="rank r01">1</em><span class="name">孙琴娥</span>
                <span class="area">成都外国语小学</span>
                <span class="info load">6,858</span>
                <span class="info">5,720</span>
              </li>
              <li>
                <em class="rank r02">2</em><span class="name">朱磊</span>
                <span class="area">成都高新区芳草小学</span>
                <span class="info load">4,858</span>
                <span class="info">5,938</span>
              </li>
              <li>
                <em class="rank r03">3</em><span class="name">倪惠妮</span>
                <span class="area">成都盐道街小学</span>
                <span class="info load">4,765</span>
                <span class="info">5,638</span>
              </li>
              <li>
                <em class="rank">4</em><span class="name">赵雪琴</span>
                <span class="area">成都师范银都紫藤小学</span>
                <span class="info load">4,650</span>
                <span class="info">5,360</span>
              </li>
              <li>
                <em class="rank">5</em><span class="name">孟雪芹</span>
                <span class="area">成都师范银都紫藤小学</span>
                <span class="info load">4,556</span>
                <span class="info">5,330</span>
              </li>
            </ul>
          </div>
          <div class="ranklist_data">
            <div class="rankheader"><div class="rank_icon_02"></div><i class="header_name">初中</i><div class="fwtp"><span>访问量</span><span>投票数</span></div></div>
            <ul class="rankdata">
              <li>
                <em class="rank r01">1</em><span class="name">孙琴娥</span>
                <span class="area">成都树德中学</span>
                <span class="info load">6,858</span>
                <span class="info">5,720</span>
              </li>
              <li>
                <em class="rank r02">2</em><span class="name">朱磊</span>
                <span class="area">成都盐道街中学</span>
                <span class="info load">4,858</span>
                <span class="info">5,938</span>
              </li>
              <li>
                <em class="rank r03">3</em><span class="name">倪惠妮</span>
                <span class="area">成都第七中学</span>
                <span class="info load">4,765</span>
                <span class="info">5,638</span>
              </li>
              <li>
                <em class="rank">4</em><span class="name">赵雪琴</span>
                <span class="area">成都外国语中学</span>
                <span class="info load">4,650</span>
                <span class="info">5,360</span>
              </li>
              <li>
                <em class="rank">5</em><span class="name">孟雪芹</span>
                <span class="area">成都第七中学</span>
                <span class="info load">4,556</span>
                <span class="info">5,330</span>
              </li>
            </ul>
          </div>
          <div class="ranklist_data">
            <div class="rankheader"><div class="rank_icon_03"></div><i class="header_name">高中</i><div class="fwtp"><span>访问量</span><span>投票数</span></div></div>
            <ul class="rankdata">
              <li>
                <em class="rank r01">1</em><span class="name">孙琴娥</span>
                <span class="area">成都树德中学</span>
                <span class="info load">6,858</span>
                <span class="info">5,720</span>
              </li>
              <li>
                <em class="rank r02">2</em><span class="name">朱磊</span>
                <span class="area">成都盐道街中学</span>
                <span class="info load">4,858</span>
                <span class="info">5,938</span>
              </li>
              <li>
                <em class="rank r03">3</em><span class="name">倪惠妮</span>
                <span class="area">成都第七中学</span>
                <span class="info load">4,765</span>
                <span class="info">5,638</span>
              </li>
              <li>
                <em class="rank">4</em><span class="name">赵雪琴</span>
                <span class="area">成都外国语中学</span>
                <span class="info load">4,650</span>
                <span class="info">5,360</span>
              </li>
              <li>
                <em class="rank">5</em><span class="name">孟雪芹</span>
                <span class="area">成都第七中学</span>
                <span class="info load">4,556</span>
                <span class="info">5,330</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="activityrank">
        <div class="activityrangk_header"><div class="activity_title">学科排行</div><div class="activity_more"><a href="">更多</a></div></div>
        <div class="activity_select">
          <Tabs value="name1">
            <TabPane label="语文" name="name1">
              <div class="ranklist_box">
                <div class="ranklist_data">
                  <div class="rankheader"><div class="rank_icon"></div><i class="header_name">小学</i><div class="fwtp"><span>访问量</span><span>投票数</span></div></div>
                  <ul class="rankdata">
                    <li>
                      <em class="rank r01">1</em><span class="name">孙琴娥</span>
                      <span class="area">成都外国语小学</span>
                      <span class="info load">6,858</span>
                      <span class="info">5,720</span>
                    </li>
                    <li>
                      <em class="rank r02">2</em><span class="name">朱磊</span>
                      <span class="area">成都高新区芳草小学</span>
                      <span class="info load">4,858</span>
                      <span class="info">5,938</span>
                    </li>
                    <li>
                      <em class="rank r03">3</em><span class="name">倪惠妮</span>
                      <span class="area">成都盐道街小学</span>
                      <span class="info load">4,765</span>
                      <span class="info">5,638</span>
                    </li>
                    <li>
                      <em class="rank">4</em><span class="name">赵雪琴</span>
                      <span class="area">成都师范银都紫藤小学</span>
                      <span class="info load">4,650</span>
                      <span class="info">5,360</span>
                    </li>
                    <li>
                      <em class="rank">5</em><span class="name">孟雪芹</span>
                      <span class="area">成都师范银都紫藤小学</span>
                      <span class="info load">4,556</span>
                      <span class="info">5,330</span>
                    </li>
                  </ul>
                </div>
                <div class="ranklist_data">
                  <div class="rankheader"><div class="rank_icon_02"></div><i class="header_name">初中</i><div class="fwtp"><span>访问量</span><span>投票数</span></div></div>
                  <ul class="rankdata">
                    <li>
                      <em class="rank r01">1</em><span class="name">孙琴娥</span>
                      <span class="area">成都树德中学</span>
                      <span class="info load">6,858</span>
                      <span class="info">5,720</span>
                    </li>
                    <li>
                      <em class="rank r02">2</em><span class="name">朱磊</span>
                      <span class="area">成都盐道街中学</span>
                      <span class="info load">4,858</span>
                      <span class="info">5,938</span>
                    </li>
                    <li>
                      <em class="rank r03">3</em><span class="name">倪惠妮</span>
                      <span class="area">成都第七中学</span>
                      <span class="info load">4,765</span>
                      <span class="info">5,638</span>
                    </li>
                    <li>
                      <em class="rank">4</em><span class="name">赵雪琴</span>
                      <span class="area">成都外国语中学</span>
                      <span class="info load">4,650</span>
                      <span class="info">5,360</span>
                    </li>
                    <li>
                      <em class="rank">5</em><span class="name">孟雪芹</span>
                      <span class="area">成都第七中学</span>
                      <span class="info load">4,556</span>
                      <span class="info">5,330</span>
                    </li>
                  </ul>
                </div>
                <div class="ranklist_data">
                  <div class="rankheader"><div class="rank_icon_03"></div><i class="header_name">高中</i><div class="fwtp"><span>访问量</span><span>投票数</span></div></div>
                  <ul class="rankdata">
                    <li>
                      <em class="rank r01">1</em><span class="name">孙琴娥</span>
                      <span class="area">成都树德中学</span>
                      <span class="info load">6,858</span>
                      <span class="info">5,720</span>
                    </li>
                    <li>
                      <em class="rank r02">2</em><span class="name">朱磊</span>
                      <span class="area">成都盐道街中学</span>
                      <span class="info load">4,858</span>
                      <span class="info">5,938</span>
                    </li>
                    <li>
                      <em class="rank r03">3</em><span class="name">倪惠妮</span>
                      <span class="area">成都第七中学</span>
                      <span class="info load">4,765</span>
                      <span class="info">5,638</span>
                    </li>
                    <li>
                      <em class="rank">4</em><span class="name">赵雪琴</span>
                      <span class="area">成都外国语中学</span>
                      <span class="info load">4,650</span>
                      <span class="info">5,360</span>
                    </li>
                    <li>
                      <em class="rank">5</em><span class="name">孟雪芹</span>
                      <span class="area">成都第七中学</span>
                      <span class="info load">4,556</span>
                      <span class="info">5,330</span>
                    </li>
                  </ul>
                </div>
              </div>
            </TabPane>
            <TabPane label="数学" name="name2">
              <div class="ranklist_box">
                <div class="ranklist_data">
                  <div class="rankheader"><div class="rank_icon"></div><i class="header_name">小学</i><div class="fwtp"><span>访问量</span><span>投票数</span></div></div>
                  <ul class="rankdata">
                    <li>
                      <em class="rank r01">1</em><span class="name">孙琴娥</span>
                      <span class="area">成都外国语小学</span>
                      <span class="info load">6,858</span>
                      <span class="info">5,720</span>
                    </li>
                    <li>
                      <em class="rank r02">2</em><span class="name">朱磊</span>
                      <span class="area">成都高新区芳草小学</span>
                      <span class="info load">4,858</span>
                      <span class="info">5,938</span>
                    </li>
                    <li>
                      <em class="rank r03">3</em><span class="name">倪惠妮</span>
                      <span class="area">成都盐道街小学</span>
                      <span class="info load">4,765</span>
                      <span class="info">5,638</span>
                    </li>
                    <li>
                      <em class="rank">4</em><span class="name">赵雪琴</span>
                      <span class="area">成都师范银都紫藤小学</span>
                      <span class="info load">4,650</span>
                      <span class="info">5,360</span>
                    </li>
                    <li>
                      <em class="rank">5</em><span class="name">孟雪芹</span>
                      <span class="area">成都师范银都紫藤小学</span>
                      <span class="info load">4,556</span>
                      <span class="info">5,330</span>
                    </li>
                  </ul>
                </div>
                <div class="ranklist_data">
                  <div class="rankheader"><div class="rank_icon_02"></div><i class="header_name">初中</i><div class="fwtp"><span>访问量</span><span>投票数</span></div></div>
                  <ul class="rankdata">
                    <li>
                      <em class="rank r01">1</em><span class="name">孙琴娥</span>
                      <span class="area">成都树德中学</span>
                      <span class="info load">6,858</span>
                      <span class="info">5,720</span>
                    </li>
                    <li>
                      <em class="rank r02">2</em><span class="name">朱磊</span>
                      <span class="area">成都盐道街中学</span>
                      <span class="info load">4,858</span>
                      <span class="info">5,938</span>
                    </li>
                    <li>
                      <em class="rank r03">3</em><span class="name">倪惠妮</span>
                      <span class="area">成都第七中学</span>
                      <span class="info load">4,765</span>
                      <span class="info">5,638</span>
                    </li>
                    <li>
                      <em class="rank">4</em><span class="name">赵雪琴</span>
                      <span class="area">成都外国语中学</span>
                      <span class="info load">4,650</span>
                      <span class="info">5,360</span>
                    </li>
                    <li>
                      <em class="rank">5</em><span class="name">孟雪芹</span>
                      <span class="area">成都第七中学</span>
                      <span class="info load">4,556</span>
                      <span class="info">5,330</span>
                    </li>
                  </ul>
                </div>
                <div class="ranklist_data">
                  <div class="rankheader"><div class="rank_icon_03"></div><i class="header_name">高中</i><div class="fwtp"><span>访问量</span><span>投票数</span></div></div>
                  <ul class="rankdata">
                    <li>
                      <em class="rank r01">1</em><span class="name">孙琴娥</span>
                      <span class="area">成都树德中学</span>
                      <span class="info load">6,858</span>
                      <span class="info">5,720</span>
                    </li>
                    <li>
                      <em class="rank r02">2</em><span class="name">朱磊</span>
                      <span class="area">成都盐道街中学</span>
                      <span class="info load">4,858</span>
                      <span class="info">5,938</span>
                    </li>
                    <li>
                      <em class="rank r03">3</em><span class="name">倪惠妮</span>
                      <span class="area">成都第七中学</span>
                      <span class="info load">4,765</span>
                      <span class="info">5,638</span>
                    </li>
                    <li>
                      <em class="rank">4</em><span class="name">赵雪琴</span>
                      <span class="area">成都外国语中学</span>
                      <span class="info load">4,650</span>
                      <span class="info">5,360</span>
                    </li>
                    <li>
                      <em class="rank">5</em><span class="name">孟雪芹</span>
                      <span class="area">成都第七中学</span>
                      <span class="info load">4,556</span>
                      <span class="info">5,330</span>
                    </li>
                  </ul>
                </div>
              </div>
            </TabPane>
          </Tabs>
        </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 scoped>
  .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;
  }
  .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;
    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;
  }
  .activityrank {
    width:1200px;
    padding:15px 0px;
    margin:0 auto;
    float:left;
  }
  .activityrangk_header {
    width: 100%;
    height: 41px;
    border-bottom: 1px solid #e3e3e3;
  }
  .activity_title {
    float: left;
    font-size: 24px;
    color: #288add;
    border-bottom: 1px solid #288add;
    margin-left: 20px;
    padding: 0 2px 4px;
  }
  .activity_more {
    float: right;
    height: 21px;
    overflow: hidden;
    text-indent: 1000px;
    margin-top: 20px;
    margin-right: 20px;
  }
  .ranklist_box {
    width:100%;
  }
  .ranklist_data {
    float:left;
    width:31%;
    margin-top:20px;
  }
    .ranklist_data:nth-child(2) {
      margin-left:35px;
    }
    .ranklist_data:nth-child(3) {
      margin-left: 35px;
    }
    .rankheader {
      font-size: 18px;
      color: #474a4d;
      margin-bottom: 6px;
      padding-right: 7px;
    }
  .rank_icon {
    width: 28px;
    height: 28px;
    margin-right: 5px;
    background: url(../../assets/image/resource/activity_icon.png) no-repeat;
    background-position: 0 -638px;
    vertical-align: middle;
    float: left;
  }
  .header_name {
    font-size: 18px;
    vertical-align: middle;
    font-style: normal;
    color: #474a4d;
  }
  .rank_icon_02 {
    width: 28px;
    height: 28px;
    margin-right: 5px;
    background: url(../../assets/image/resource/activity_icon.png) no-repeat;
    background-position: 0 -673px;
    vertical-align: middle;
    float: left;
  }
  .rank_icon_03 {
    width: 28px;
    height: 28px;
    margin-right: 5px;
    background: url(../../assets/image/resource/activity_icon.png) no-repeat;
    background-position: 0 -709px;
    vertical-align: middle;
    float: left;
  }
  .fwtp {
    float: right;
  }
    .fwtp span {
      font-size: 14px;
      display: inline-block;
      width: 50px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      vertical-align: middle;
      padding-top: 8px;
      color: #888;
      margin-right: 10px;
    }
  .rankdata {
    background: #fff;
    border-radius: 5px;
    border: 1px solid #ececec;
  }
    .rankdata li {
      background: #fff;
      width: 100%;
      border-radius: 8px;
      height: 40px;
      line-height: 40px;
      color: #6b8398;
      margin: 5px 0;
      font-size: 0;
      vertical-align: middle;
    }
  .rank.r01 {
    background-color: #f9e43f;
  }
  .rank.r02 {
    background-color: #86ea9b;
  }
  .rank.r03 {
    background-color: #ebb38d;
  }
  .rank {
    display: inline-block;
    width: 37px;
    height: 24px;
    border-radius: 0 10px 10px 0;
    background: #cacaca;
    color: #fff;
    text-align: center;
    line-height: 24px;
    font-size: 14px;
    margin-right: 20px;
    vertical-align: middle;
  }
  .name {
    display: inline-block;
    font-size: 14px;
    width: 60px;
    margin-right: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
  }
  .area {
    display: inline-block;
    font-size: 14px;
    width: 100px;
    margin-right: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
  }
  .info {
    font-size: 14px;
    display: inline-block;
    width: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    margin-right: 10px;
  }
</style>