109 lines
2.1 KiB
Vue
109 lines
2.1 KiB
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>
|