<!-- 中心统计侧边组件 -->
<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>
html 根据条件执行css
最新推荐文章于 2024-06-19 16:00:24 发布