<!-- 派駐發(fā)現(xiàn)問題 -->
<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>
