class没生效？有与没有这个:class="{ 'btna':count === index }"运行结果都一样

有人说在style加scoped，加了也是一样

<template>
<view class="home">
<view class="courseIntroduce_box">
<view class="courseIntroduce_des">
<view class="courseIntroduce_info">{{ introduce }}</view>
</view>
<courseIntroduceData :msg="introduceList"/>
<view class="question_line"></view>
<view class="courseIntroduce_tab_box">
<view class="courseIntroduce_tab_nav">
<view v-for="(item,index) in items" :class="{ 'btna':count === index }" @tap="change(index)" :key="index">{{ item }}</view>
</view>
<view class="courseIntroduce_tab_con">
<view class="discount_info" :class="{dis:count === 0}">
内容1
</view>
<view class="discount_info" :class="{dis:count === 1}">
内容2
</view>
</view>
</view>
</view>
</view>
</template>

<script>
import courseIntroduceData from "../../../components/courseIntroduce-data/courseIntroduce-data.vue"
export default {
data() {
return {
introduce:"",
introduceList:[],
items:["课程章节","课程介绍"],
count:0
}
},
components:{
courseIntroduceData
},
onLoad(options) {

        uni.request({  
            url:"https://www.itbaizhan.cn/api/course/detail",  
            data:{  
                id:options.id,  
                course:options.course  
            },  
            success: (res) => {  
                this.introduce = res.data.data.introduce  
                this.introduceList = res.data.data.introduceList  
            }  
        })  
    },  
    methods: {  
        change(index){  
            this.count = index;  
        }  
    }  
}  

</script>

<style lang="scss">
.courseIntroduce_box {
display: flex;
box-sizing: box;
flex-direction: column;
margin-bottom: 90px;

    .courseIntroduce_des {  
        display: flex;  
        box-sizing: border-box;  
        flex-direction: column;  
        justify-content: center;  
        align-items: center;  
        width: 100%;  
        background-color: #0c9c8f;  
        padding: 0 10px 15px;  
        overflow: hidden;  

        .courseIntroduce_info {  
            display: flex;  
            box-sizing: box;  
            width: 100%;  
            color: #fff;  
            font-size: 16px;  
            line-height: 24px;  
        }  
    }  

    .courseIntroduce_tab_box {  
        display: flex;  
        box-sizing: border-box;  
        flex-direction: column;  

        .courseIntroduce_tab_nav {  
            display: flex;  
            box-sizing: border-box;  
            flex-direction: row;  
            background-color: #fff;  
            border-bottom: 1px solid #e4e4e4;  
            margin-bottom: 20px;  

            view {  
                height: 50px;  
                line-height: 50px;  
                font-size: 16px;  
                flex-grow: 1;  
                text-align: center;  
                background-color: #fff;  
            }  
        }  

.discount_info {  
    display: nome;  
}  

.btna {  
    display: flex;  
    box-sizing: border-box;  
    justify-content: center;  
    color: $zhu-color;  
    position: relative;  
}  

.btna::after {  
    content: '';  
    width: 40px;  
    height: 3px;  
    background-color: $zhu-color;  
    position: absolute;  
    bottom: 0;  
    left: 50%;  
    margin-left: -20px;  
}  

.dis {  
    display: block;  
    }  
  }  
}  

</style>

这个编程无法实现如下图显示的，点课程章节或课程介绍会出现绿色字体效果，不知哪个地方出错了