<!-- 派驻发现问题 -->
<template>
<div>
<div class="btnTitle">
<div class="btn-bg" :class="{bg:time == 3}" @click="changeBg(3)">15天</div>
<div class="btn-bg" :class="{bg:time == 4}" @click="changeBg(4)">30天</div>
</div>
<div class="btnTitle">
<div class="btn-bg" :class="{bg:increase == 5}" @click="changeBg(5)">增量</div>
<div class="btn-bg" :class="{bg:increase == 6}" @click="changeBg(6)">总量</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
time: 3,
increase: 5,
};
},
methods: {
changeBg(index) {
if (index === 3 || index === 4) {
this.time = index
} else if (index === 5 || index === 6) {
this.increase = index
} else {
this.sort = index
}
}
}
}
</script>
<style scoped>
.bg {
background-color: rgb(12, 197, 89);
color: #fff;
}
.btnTitle {
display: flex;
width: 400px;
border: 1px solid #ccc;
background-color: #fff;
margin-left: 10px;
border-radius: 5px;
}
.btnTitle>.btn-bg {
width: 50%;
height: 40px;
text-align: center;
line-height: 40px;
border-radius: 5px;
}
</style>
