vue-样式-button

HTML代码：

<div class="bottom_box">
    <div class="btn_box">
        <button
            @click="changeColor(index)" 
            :class="{ 'btn_item': true, 'active': index === activeIndex }" 
            v-for="( item, index ) in btnList" :key="index">
            {{ item.val }}
        </button>
    </div>
</div>

 JS代码：

data(){
    activeIndex: null,
    btnList: [
                {
                    val: '环境监测'
                },
                {
                    val: '安防监测'
                },
                {
                    val: '动力监测'
                },
                {
                    val: '视频监测'
                },
    ],

},

methods:{
    changeColor(index) {
            this.activeIndex = index
    },  
}

CSS代码：

.btn_box {
    margin-top: 8%;
    position: absolute;
    height: 100px;
    width: 800px;

    .btn_item {
        position: relative;
        display: inline-block;
        width: 130px;
        height: 40px;
        border-radius: 10px;
        margin: 30px 0 0 15px;
        box-shadow: inset 0 0 30px rgba(1, 103, 255, 0.5);
        border: 1px solid rgba(1, 103, 255, 0.5);
        background-color: transparent;
        color: #ffffff;
        opacity: 1;
    }

    .btn_item.active {
        box-shadow: inset 0 0 30px rgba(250, 89, 2, 0.5);
        border: 1px solid rgba(250, 89, 2, 0.5);
    }
}



.bottom_box {
    width: 100%;
    height: 50%;
    position: relative;
    margin-bottom: 20%;
    z-index: 6;
}

 效果图