html 根据条件执行css

<!-- 中心统计侧边组件 -->
<template>
    <div class="stat-side">
        <div :class="iscenter?'stat-side-item':'stat-side-item1'">
           <slot name="stat-first"></slot>      
        </div>
        <div :class="iscenter?'stat-side-item':'stat-side-item1'">
            <slot name="stat-second"></slot>
        </div>
        <div :class="iscenter?'stat-side-item':'stat-side-item1'">
            <slot name="stat-third"></slot>
        </div>
    </div>
</template>

<script>
    import { useRouter, useRoute } from 'vue-router'
    import { reactive, toRefs } from '@vue/reactivity';
export default {
    name:'StatSide',
    setup(props, context) {
        
       
        const router = useRouter();
        const route = useRoute();
        const data = reactive({
            //判断是否是中心，中心stat-side-item高度300px，车间为270px
            iscenter: route.name=="CenterHome"?true:false,
            
        });

     

        return {
            ...toRefs(data),
           router,route
        }
    }
}
</script>

<style scoped>

.stat-side .stat-side-item{
    width: 380px;
    height: 270px;
    padding: 10px;
}
.stat-side .stat-side-item1{
    width: 380px;
    height: 270px;
    padding: 10px;
}
</style>