oil-station/fuintAdmin/src/views/financialStatement/runningWater/list.vue

<template>

  <div class="container">
    <div class="tab-box">
      <div class="f-box" v-for="(item,index) in tablist" :key="index" @click="activeindex=index" :class="{ 'active' :activeindex==index}">{{item.name}}</div>
    </div>
    <RunningWaterOilDepot v-if="activeindex == '0'"></RunningWaterOilDepot>
    <RunningWaterDay v-if="activeindex == '1'"></RunningWaterDay>
  </div>


</template>

<script>


import BuyOil from "@/views/financialStatement/buy/tab/oil.vue";
import BuyEm from "@/views/financialStatement/buy/tab/em.vue";
import BuyGun from "@/views/financialStatement/buy/tab/gun.vue";
import BuyGoods from "@/views/financialStatement/buy/tab/goods.vue";
import BuyInter from "@/views/financialStatement/buy/tab/inter.vue";
import RunningWaterOilDepot from "@/views/financialStatement/runningWater/tab/oilDepot.vue";
import RunningWaterDay from "@/views/financialStatement/runningWater/tab/day.vue";

export default {
  name: "buy-list",
  data() {
    return {
      radio1: '油品销售统计',
      activeindex: 0,
      tablist: [
        {
          name: '订单流水分析',
        },
        {
          name: '日交易流水分析',
        },

      ]
    }
  },
  components: {
    RunningWaterDay,
    RunningWaterOilDepot,
    BuyInter,
    BuyGoods,
    BuyGun,
    BuyEm,
    BuyOil,
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }

}
</script>

<style scoped lang="scss">
.app-center {
  width: 100%;

  box-sizing: border-box;
  padding: 10px;
}

.app-top {
  width: 100%;
  margin-bottom: 20px;
  height: 60px;
  box-sizing: border-box;
}

.tab-box {
  width: 100%;
  background: #fff;
  display: flex;
  box-sizing: border-box;
  padding: 0px 50px;
  border-top: 1px solid #eceff1;
}

.f-box {
  height: 40px;
  color: #999999;
  margin-right: 50px;
  display: flex;
  align-items: center;
  cursor: pointer;

}

.active {
  color: #FF9655 !important;
  border-bottom: 2px solid #FF9655 !important;
}

.container {
  background: #F4F5F9;
  box-sizing: border-box;
  //padding: 20px;
}

.tabder-box {
  width: 85%;
}
</style>