4dkankan_official/src/page/manage/temp/consumption.vue

<template>
  <div class="consump-layout">
    <div class="c-header">
      <ul class="tab-list">
        <li :class="{active:i===0}" v-for="(item,i) in tabList" :key="i">
          {{item.name}}
        </li>
      </ul>
      <div class="tab-select">
        全部
        <ul>
          <li>全部</li>
          <li>子选项</li>
        </ul>
      </div>
    </div>
    <tableList :header='capacity' :data='data' class="table-list" >
      <div slot-scope="{data}" slot="header">
        {{data.name}}
      </div>
      <div slot-scope="{data}" slot="item">
        {{data}}
      </div>
    </tableList>
    <div class="paging" v-if="total">
      <vcenter>
          <Paging @clickHandle="pageChange" :current="currentPage" :total="total" :equable="pageSize" />
      </vcenter>
    </div>
  </div>
</template>

<script>
import tableList from '@/components/table'
import {capacity} from './iconsumption'
import Paging from '@/components/Paging'
import vcenter from '@/components/vcenter'

export default {
  components: {
    tableList,
    Paging,
    vcenter
  },
  data () {
    let tabList = [
      {
        name: '扩容记录'
      }, {
        name: '充值记录'
      }, {
        name: '增值发票'
      }
    ]
    let data = [{
      orderSn: 'KR180928ac',
      channel: '官方预售活动赠送',
      size: '100G',
      paytype: '支付宝',
      bill: '9800元',
      validity: '终生有效',
      status: '使用中',
      date: '2018-09-28 16:14:23'
    }, {
      orderSn: 'KR180928ac',
      channel: '官方预售活动赠送',
      size: '100G',
      paytype: '支付宝',
      bill: '9800元',
      validity: '终生有效',
      status: '使用中',
      date: '2018-09-28 16:14:23'
    }, {
      orderSn: 'KR180928ac',
      channel: '官方预售活动赠送',
      size: '100G',
      paytype: '支付宝',
      bill: '9800元',
      validity: '终生有效',
      status: '使用中',
      date: '2018-09-28 16:14:23'
    }, {
      orderSn: 'KR180928ac',
      channel: '官方预售活动赠送',
      size: '100G',
      paytype: '支付宝',
      bill: '9800元',
      validity: '终生有效',
      status: '使用中',
      date: '2018-09-28 16:14:23'
    }, {
      orderSn: 'KR180928ac',
      channel: '官方预售活动赠送',
      size: '100G',
      paytype: '支付宝',
      bill: '9800元',
      validity: '终生有效',
      status: '使用中',
      date: '2018-09-28 16:14:23'
    }, {
      orderSn: 'KR180928ac',
      channel: '官方预售活动赠送',
      size: '100G',
      paytype: '支付宝',
      bill: '9800元',
      validity: '终生有效',
      status: '使用中',
      date: '2018-09-28 16:14:23'
    }, {
      orderSn: 'KR180928ac',
      channel: '官方预售活动赠送',
      size: '100G',
      paytype: '支付宝',
      bill: '9800元',
      validity: '终生有效',
      status: '使用中',
      date: '2018-09-28 16:14:23'
    } ]

    return {
      data,
      tabList,
      capacity,
      total: 10,
      pageSize: 10,
      currentPage: 1
    }
  },
  methods: {
    pageChange (data) {
      this.currentPage = data
    }
  }
}
</script>

<style lang="scss" scoped>
$theme-color: #1fe4dc;
.consump-layout{
  margin: 30px 0 30px 40px;
  width: 90%;
  .c-header{
    .tab-list{
      display: inline-block;
      li{
        display: inline-block;
        margin-right: 40px;
        cursor: pointer;
      }
      .active{
        color: $theme-color;
        border-bottom: 2px solid $theme-color;
        font-weight: bold;
      }
    }
    .tab-select{
      float: right;
      position: relative;
      width: 200px;
      padding-left: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      ul{
        position: absolute;
        // max-height: 0;
        left: 0;
        top: 24px;
        padding-left: 10px;
        background: #fff;
        overflow: hidden;
        width: 100%;
        box-shadow: 0 0 10px rgba($color: #000000, $alpha: 0.5);
      }
    }
  }
  .table-list{
    margin-top: 40px;
  }
  .paging {
  // border-left: #e5e5e5 1px solid;
    height: 100%;
    margin-bottom: 40px;
    & /deep/ .layout {
      text-align: center;
      margin-top: 10px;
    }
    & /deep/ .layout a:not(:last-child) {
      margin: 10px 8px;
      font-size: 16px;
      display: inline-block;
      font-weight: 500;
      cursor: pointer;
      user-select: none;
      color: #999;
      position: relative;
      transition: color 0.3s;
    }
    & /deep/ .layout a:last-child {
      position: relative;
      top: -5px;
      display: -ms-inline-flexbox;
      display: inline-flex;
      -ms-flex-align: center;
      align-items: center;
      height: 22px;
      padding: 0 9.6px;
      padding: 0 0.6rem;
    }
    & /deep/ .layout a:last-child::before,
    & /deep/ .layout a:last-child::after {
      content: "";
      display: inline-block;
      will-change: transform;
      transition: transform 0.3s;
    }

    & /deep/ .layout a:not(:last-child).active::after,
    & /deep/ .layout a:not(:last-child).active,
    & /deep/ .layout a:not(:last-child):hover,
    & /deep/ .layout a:not(:last-child):hover::after {
      color: #111111;
      transform: scaleX(1);
    }

    & /deep/ .layout a:not(:last-child)::after {
      content: "";
      height: 3px;
      width: 140%;
      background-color: #111;
      display: block;
      margin-left: -20%;
      margin-top: 3px;
      transform-origin: 50% 50%;
      transform: scaleX(0);
      will-change: transform;
      transition: transform 0.3s;
    }
  }
}

</style>