141 lines
4.7 KiB
Vue
141 lines
4.7 KiB
Vue
<template>
|
|
<div class="app-center">
|
|
<div class="app-top">
|
|
<el-card :body-style="{ padding: '0px' }">
|
|
<div class="box">
|
|
<div class="nbox" :class="pointerClass" @click="updateRedio('会员分析')">
|
|
<div class="fount-box" :style="{ color: radio1 === '会员分析' ? '#FF770F' : '#999999' }">会员分析</div>
|
|
<div class="heng-box" v-if="radio1 == '会员分析'"></div>
|
|
<div class="heng-box" style="background-color: #FFFFFF" v-else></div>
|
|
|
|
</div>
|
|
<div class="nbox" :class="pointerClass" @click="updateRedio('油品分析')">
|
|
<div class="fount-box" :style="{ color: radio1 === '油品分析' ? '#FF770F' : '#999999' }">油品分析</div>
|
|
<div class="heng-box" v-if="radio1 == '油品分析'"></div>
|
|
<div class="heng-box" style="background-color: #FFFFFF" v-else></div>
|
|
</div>
|
|
<div class="nbox" :class="pointerClass" @click="updateRedio('便利店分析')">
|
|
<div class="fount-box" :style="{ color: radio1 === '便利店订单' ? '#FF770F' : '#999999' }">便利店分析</div>
|
|
<div class="heng-box" v-if="radio1 == '便利店分析'"></div>
|
|
<div class="heng-box" style="background-color: #FFFFFF" v-else></div>
|
|
|
|
</div>
|
|
<div class="nbox" :class="pointerClass" @click="updateRedio('积分商城分析')">
|
|
<div class="fount-box" :style="{ color: radio1 === '积分商城分析' ? '#FF770F' : '#999999' }">积分商城分析</div>
|
|
<div class="heng-box" v-if="radio1 == '积分商城分析'"></div>
|
|
<div class="heng-box" style="background-color: #FFFFFF" v-else></div>
|
|
</div>
|
|
<!-- <div class="nbox" :class="pointerClass" @click="updateRedio('支付方式分析')">-->
|
|
<!-- <div class="fount-box" :style="{ color: radio1 === '支付方式分析' ? '#FF770F' : '#999999' }">支付方式分析</div>-->
|
|
<!-- <div class="heng-box" v-if="radio1 == '支付方式分析'"></div>-->
|
|
<!-- <div class="heng-box" style="background-color: #FFFFFF" v-else></div>-->
|
|
|
|
<!-- </div>-->
|
|
<!-- <div class="nbox" :class="pointerClass" @click="updateRedio('支付通道分析')">-->
|
|
<!-- <div class="fount-box" :style="{ color: radio1 === '支付通道分析' ? '#FF770F' : '#999999' }">支付通道分析</div>-->
|
|
<!-- <div class="heng-box" v-if="radio1 == '支付通道分析'"></div>-->
|
|
<!-- <div class="heng-box" style="background-color: #FFFFFF" v-else></div>-->
|
|
<!-- </div>-->
|
|
</div>
|
|
</el-card>
|
|
|
|
|
|
</div>
|
|
<template >
|
|
<yunyingfenxi-vip v-if="radio1 === '会员分析'"></yunyingfenxi-vip>
|
|
<yunyingfenxi-oil v-if="radio1 === '油品分析'"></yunyingfenxi-oil>
|
|
<yunyingfenxi-store v-if="radio1 === '便利店分析'"></yunyingfenxi-store>
|
|
<yunyingfenxi-int v-if="radio1 === '积分商城分析'"></yunyingfenxi-int>
|
|
<dai_yunyingfenxi-pay-type v-if="radio1 === '支付方式分析'"></dai_yunyingfenxi-pay-type>
|
|
<dai_yunyingfenxi-paym v-if="radio1 === '支付通道分析'"></dai_yunyingfenxi-paym>
|
|
</template>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import yunyingfenxiVip from "@/views/financialStatement/yunyingfenxi/tab/vip.vue";
|
|
import yunyingfenxiInt from "@/views/financialStatement/yunyingfenxi/tab/int.vue";
|
|
import yunyingfenxiOil from "@/views/financialStatement/yunyingfenxi/tab/oil.vue";
|
|
import yunyingfenxiStore from "@/views/financialStatement/yunyingfenxi/tab/store.vue";
|
|
import Dai_yunyingfenxiPaym from "@/views/financialStatement/dai_yunyingfenxi/tab/paym.vue";
|
|
import Dai_yunyingfenxiPayType from "@/views/financialStatement/dai_yunyingfenxi/tab/paytype.vue";
|
|
|
|
export default {
|
|
name: "yunyingfenxi-list1",
|
|
data(){
|
|
return{
|
|
radio1:'会员分析',
|
|
pointerClass() {
|
|
return 'pointer-cursor';
|
|
}
|
|
}
|
|
},
|
|
components:{
|
|
Dai_yunyingfenxiPayType, Dai_yunyingfenxiPaym,
|
|
yunyingfenxiInt,
|
|
yunyingfenxiVip,
|
|
yunyingfenxiOil,
|
|
yunyingfenxiStore,
|
|
},
|
|
methods: {
|
|
handleClick(tab, event) {
|
|
console.log(tab, event);
|
|
},
|
|
updateRedio(data) {
|
|
console.log(this.radio1)
|
|
this.radio1 = data
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.app-center{
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
//padding: 10px;
|
|
}
|
|
.app-top{
|
|
width: 100%;
|
|
//margin-bottom: 20px;
|
|
//height: 60px;
|
|
box-sizing: border-box;
|
|
|
|
}
|
|
.el-card__body, .el-main {
|
|
padding: 0px;
|
|
}
|
|
.box{
|
|
cursor: pointer;
|
|
margin-top: 10px ;
|
|
margin-left: 50px;
|
|
//height: 40px;
|
|
display: flex;
|
|
background-color: #FFFFFF;
|
|
align-items: center;
|
|
//border: 1px solid #EBEEF5;
|
|
}
|
|
.nbox{
|
|
margin-right: 30px;
|
|
}
|
|
.fount-box{
|
|
font-size: 14px;
|
|
color: #999999
|
|
}
|
|
.fount-box2{
|
|
font-size: 14px;
|
|
color: #999999
|
|
}
|
|
.heng-box{
|
|
background-color: #FF770F;
|
|
width: 100%;
|
|
height: 2px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
</style>
|