落丝记录页面文字统一为黑色加粗

- 页面根元素与编辑对话框设置 color:#000、font-weight:700,
  并覆盖 Element Plus 的文本色变量(表格、输入框、表单标签)
- 按钮等自带底色的控件沿用各自颜色变量,不会被黑字压暗
- 对话框会挂到 body 下,单独加了类名以保证样式生效
This commit is contained in:
yanpeng200212
2026-10-12 15:13:37 +08:00
parent c11f7f8730
commit 6391e40e3f
+17 -2
View File
@@ -135,7 +135,7 @@ onMounted(() => { load(); loadDepts(); loadZhuangkou(); loadGuige(); });
</script> </script>
<template> <template>
<el-card shadow="never"> <el-card shadow="never" class="lsjl-page">
<template #header> <template #header>
<div class="card-header"> <div class="card-header">
<span>落丝记录</span> <span>落丝记录</span>
@@ -182,7 +182,7 @@ onMounted(() => { load(); loadDepts(); loadZhuangkou(); loadGuige(); });
<!-- 对话框适当加宽、标签宽度收紧:车台那一行是三列布局, <!-- 对话框适当加宽、标签宽度收紧:车台那一行是三列布局,
原尺寸下数字输入框太窄,框内数字与加减按钮会挤在一起 --> 原尺寸下数字输入框太窄,框内数字与加减按钮会挤在一起 -->
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="720px"> <el-dialog v-model="dialogVisible" :title="dialogTitle" width="720px" class="lsjl-dialog">
<el-form :model="form" label-width="82px"> <el-form :model="form" label-width="82px">
<el-row :gutter="10"> <el-row :gutter="10">
<el-col :span="12"> <el-col :span="12">
@@ -287,4 +287,19 @@ onMounted(() => { load(); loadDepts(); loadZhuangkou(); loadGuige(); });
.card-header { display: flex; justify-content: space-between; align-items: center; } .card-header { display: flex; justify-content: space-between; align-items: center; }
.search-bar { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .search-bar { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.pagination { margin-top: 16px; justify-content: flex-end; } .pagination { margin-top: 16px; justify-content: flex-end; }
/* 需求:本页文字统一为黑色加粗。
做法是在容器上设置颜色与字重,由页面内的文字继承;
按钮等自带底色的控件使用各自的颜色变量,不会被黑字压暗。
Element Plus 的表格、输入框、标签各自读取独立的文本色变量,一并覆盖。 */
.lsjl-page,
.lsjl-dialog {
color: #000;
font-weight: 700;
--el-text-color-primary: #000;
--el-text-color-regular: #000;
--el-input-text-color: #000;
--el-table-text-color: #000;
--el-table-header-text-color: #000;
}
</style> </style>