Files
tms-erp-web/src/components/basic-container/main.vue
赵忠林 4383e9956e style(top-bar): 给顶部状态栏标题区添加背景条以区分视觉层次
- 顶部状态栏 `.top-bar__title` 增加品牌色淡底背景和左侧主色竖条
- 文字颜色调整为深色,保持搜索框可读性
- 调整主题相关样式,处理 light 主题和 dark 主题下背景条效果差异
- 优化多个主题下 Logo 背景和文字颜色,提升整体视觉一致性
- 修改欢迎页背景颜色及相关元素颜色,增强视觉层次感
- 调整部分组件和布局的内边距与边框颜色,提升界面细节表现
- 隐藏顶部主题切换项,调整 hover 背景颜色以适应新视觉风格
2026-07-31 20:50:18 +08:00

63 lines
948 B
Vue

<template>
<div class="basic-container" :style="styleName" :class="{ 'basic-container--block': block }">
<el-card class="basic-container__card">
<slot></slot>
</el-card>
</div>
</template>
<script>
export default {
name: 'basicContainer',
props: {
radius: {
type: [String, Number],
default: 10,
},
background: {
type: String,
},
block: {
type: Boolean,
default: false,
},
},
computed: {
styleName() {
return {
borderRadius: `${this.radius}px`,
background: this.background,
};
},
},
};
</script>
<style lang="scss">
.basic-container {
padding: 0 6px;
box-sizing: border-box;
&--block {
height: 100%;
.basic-container__card {
height: 100%;
}
}
&__card {
width: 100%;
background: none;
> .el-card__body {
padding: 0;
}
}
&:first-child {
padding-top: 0;
}
}
</style>