72 lines
1.3 KiB
Vue
72 lines
1.3 KiB
Vue
<script >
|
|
|
|
|
|
|
|
import OilPrice from "@/views/oilConfig/oilPrice/index.vue";
|
|
import Oilqiang from "@/views/oilConfig/oilGun/list.vue";
|
|
import OilTank from "@/views/oilConfig/oilTank/list.vue";
|
|
|
|
export default {
|
|
components: {OilTank, Oilqiang, OilPrice},
|
|
data(){
|
|
return{
|
|
activeindex:0,
|
|
tablist:[
|
|
{
|
|
name:'油价配置',
|
|
},
|
|
{
|
|
name:'油罐参数',
|
|
},
|
|
{
|
|
name:'油枪管理',
|
|
},
|
|
]
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<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>
|
|
<oil-price v-if="activeindex == 0"></oil-price>
|
|
<oilqiang v-if="activeindex == 2"></oilqiang>
|
|
<oil-tank v-if="activeindex == 1"></oil-tank>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.tab-box{
|
|
width: 100%;
|
|
background: #fff;
|
|
display: flex;
|
|
box-sizing: border-box;
|
|
padding: 0px 50px;
|
|
}
|
|
|
|
.f-box{
|
|
cursor: pointer;
|
|
height: 40px;
|
|
color: #999999;
|
|
margin-right: 50px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
}
|
|
.active{
|
|
color: #FF9655 !important;
|
|
border-bottom: 2px solid #FF9655 !important;
|
|
}
|
|
.container{
|
|
background: #F4F5F9;
|
|
box-sizing: border-box;
|
|
//padding: 20px;
|
|
}
|
|
.tabder-box{
|
|
width: 85%;
|
|
}
|
|
</style>
|