TEAMModelOS/TEAMModelOS.SmartTeach/ClientApp/view/resource/activity_rank.vue

<template>
  <div class="activity_container">
    <Header></Header>
    <Activitycommon></Activitycommon>
    <div class="activityrank">
      <div class="activityrank_box">
        <div class="rowWrap py_white_bg pdt30">
          <div class="w1200 clearfix ni_g_txt_center">
            <a href="" class="ni_g_cup ni_a01 active"></a>
            <a href="" class="ni_g_cup ni_a02 "></a>
            <a href="" class="ni_g_cup ni_a03"></a>
          </div>
        </div>
        <div class="rowWrap py_white_bg pdtb30">
          <div class="w1200 ni_g_cup_list">
            <!--选项卡切换 S-->
            <div class="ni_table_class clearfix">
              <a class="ni_a active" href="javascript:">达人</a>
              <!--     <a class="ni_a" href="javascript:">初中</a>
            <a class="ni_a" href="javascript:">高中</a> -->
            </div>
            <!--选项卡切换 E-->
            <!--一二三名 只需要在对应tr标签上添加num01-->
            <div class="top100">
              <div style="text-align:center;font-size:18px;margin:30px;">
                暂无数据
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import Header from '@/common/headers.vue'
  import Footer from '@/common/footer.vue'
  import Activitycommon from '@/components/resource/activitycommon.vue'
  export default {
    components: {
      Header,
      Footer,
      Activitycommon,
    },
    data() {
      return {

      }
    }
  }
</script>
<style scoped>
  .activityrank {
    width:100%;
    height:auto;
  }
  .activityrank_box {
    width:1200px;
    height:auto;
    margin:0 auto;
  }
  .rowWrap {
    width: 100%;
    background: white;
  }
  .ni_g_txt_center {
    text-align: center;
  }
  .ni_g_cup {
    height: 143px;
    width: 190px;
    background: url(../../assets/image/resource/rank_ico.png) no-repeat;
    display: inline-block;
    margin: 0 50px;
  }
    .ni_g_cup.ni_a01 {
      background-position: -7px -9px;
    }
    .ni_g_cup.ni_a01.active {
      background-position: -7px -208px;
    }
    .ni_g_cup.ni_a02 {
      background-position: -307px -9px;
    }
    .ni_g_cup.ni_a03 {
      background-position: -607px -9px;
    }
    .ni_g_cup.ni_a02:hover {
      background-position: -307px -208px;
    }
    .ni_g_cup.ni_a03:hover {
      background-position: -607px -208px;
    }
  .pdtb30 {
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .rowWrap {
    width: 100%;
    background: white;
  }
  .ni_g_cup_list .ni_table_class {
    width: 1100px;
    padding-right: 100px;
    position: relative;
    height: 42px;
    overflow: hidden;
    display: block;
  }
     .ni_g_cup_list .ni_table_class a.active {
      background: #91caff;
      color: #fff;
      text-decoration: none;
    }
    .ni_g_cup_list .ni_table_class a {
      float: left;
      height: 42px;
      font-size: 18px;
      color: #888;
      line-height: 42px;
      text-align: center;
      border-top-right-radius: 5px;
      border-top-left-radius: 5px;
      padding: 0 20px;
      margin-right: 10px;
    }
</style>