提交 3dfe7d6d authored 作者: lidongxu's avatar lidongxu

style(all): 新增 fontSize.sass 字体样式

在 html 上根据切换字体布局来控制项目里字体大小
上级 873c0c46
...@@ -100,3 +100,15 @@ ...@@ -100,3 +100,15 @@
flex: 1; flex: 1;
} }
/* 全局覆盖Element Plus加载遮罩的背景色 */
.el-loading-mask {
z-index: 2 !important;
// background-color: red !important;
}
.el-pagination{
font-size: var(--xl-fontsize) !important;
.number{
font-size: var(--xl-fontsize) !important;
}
}
\ No newline at end of file
// 较大 16px, 默认 14px, 较小 12px
html.large {
font-size: 16px !important;
--xl-fontsize: 16px;
}
html.default {
font-size: 14px !important;
--xl-fontsize: 14px;
}
html.small {
font-size: 12px !important;
--xl-fontsize: 12px;
}
\ No newline at end of file
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
@import './sidebar.scss'; @import './sidebar.scss';
@import './btn.scss'; @import './btn.scss';
@import './ruoyi.scss'; @import './ruoyi.scss';
@import './fontSize.scss';
body { body {
height: 100%; height: 100%;
......
...@@ -213,6 +213,10 @@ const getPageList = () => { ...@@ -213,6 +213,10 @@ const getPageList = () => {
} }
} }
.el-tree{
font-size: var(--xl-fontsize);
}
::v-deep(.custom-tree-node) { ::v-deep(.custom-tree-node) {
width: 100%; width: 100%;
......
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
<!-- 工具抽屉 --> <!-- 工具抽屉 -->
<el-drawer title="工具箱" <el-drawer title="工具箱"
v-model="drawer" v-model="drawer"
append-to-body
size="300px"> size="300px">
<slot></slot> <slot></slot>
</el-drawer> </el-drawer>
...@@ -141,7 +142,7 @@ const handleClick = () => { ...@@ -141,7 +142,7 @@ const handleClick = () => {
.wrap { .wrap {
width: 30px; width: 30px;
height: 30px; height: 30px;
font-size: 12px; font-size: 16px;
} }
} }
</style> </style>
...@@ -84,6 +84,8 @@ app.use(ElementPlus, { ...@@ -84,6 +84,8 @@ app.use(ElementPlus, {
locale: locale, locale: locale,
size: Cookies.get('size') || 'default' size: Cookies.get('size') || 'default'
}) })
// 给 html 设置类名,用于影响自己的字体样式
document.documentElement.classList.add(Cookies.get('size') || 'default')
// 全局指令 // 全局指令
directive(app) directive(app)
......
...@@ -246,8 +246,7 @@ ...@@ -246,8 +246,7 @@
</el-form> </el-form>
</div> </div>
<!-- 折线图(动态 class:默认上来加载时给一个比较大的高度 --> <!-- 折线图(动态 class:默认上来加载时给一个比较大的高度 -->
<div v-loading="item.loading" <div class="chat_wrap"
class="chat_wrap"
:class="{ 'chat_height': item.loading }"> :class="{ 'chat_height': item.loading }">
<line-chart v-if="item.chartData?.saleCount.length" <line-chart v-if="item.chartData?.saleCount.length"
:chartData="item.chartData" :chartData="item.chartData"
...@@ -647,7 +646,7 @@ init() ...@@ -647,7 +646,7 @@ init()
.more_excel_echarts { .more_excel_echarts {
padding: 10px 15px; padding: 10px 15px;
text-align: center; text-align: center;
font-size: 16px; font-size: calc(var(--xl-fontsize));
background-color: var(--el-gray-3); background-color: var(--el-gray-3);
margin-top: 10px; margin-top: 10px;
cursor: context-menu; cursor: context-menu;
......
...@@ -178,12 +178,12 @@ const handleSetLineChartData = (type) => { ...@@ -178,12 +178,12 @@ const handleSetLineChartData = (type) => {
.card-panel-text { .card-panel-text {
line-height: 18px; line-height: 18px;
color: var(--el-gray-1); color: var(--el-gray-1);
font-size: 16px; font-size: var(--xl-fontsize);
margin-bottom: 12px; margin-bottom: 12px;
} }
.card-panel-num { .card-panel-num {
font-size: 20px; font-size: calc(var(--xl-fontsize) + 6px);
} }
} }
} }
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论