优化前端样式
This commit is contained in:
@@ -185,6 +185,13 @@ onUnmounted(() => {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 暗色主题:卡片数字用纯白(默认 --el-text-color-primary 在暗色下是偏蓝灰的 #E5EAF3)
|
||||||
|
html.dark & {
|
||||||
|
.data-overview .data-card .card-content .text-box .value {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 深度修改 Element Plus 卡片头部样式
|
// 深度修改 Element Plus 卡片头部样式
|
||||||
|
|||||||
@@ -46,12 +46,12 @@
|
|||||||
<div class="stat-title">{{ item.label }}</div>
|
<div class="stat-title">{{ item.label }}</div>
|
||||||
<div class="stat-amount">
|
<div class="stat-amount">
|
||||||
<span class="currency">¥</span>
|
<span class="currency">¥</span>
|
||||||
<span class="number">{{ money(item.data.total) }}</span>
|
<span class="number">{{ money(item.data.paid) }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-meta">
|
<div class="stat-meta">
|
||||||
<span>{{ item.data.count }} 单</span>
|
<span>{{ item.data.count }} 单</span>
|
||||||
<span>已报销 ¥ {{ money(item.data.paid) }}</span>
|
|
||||||
<span>未报销 ¥ {{ money(item.data.unpaid) }}</span>
|
<span>未报销 ¥ {{ money(item.data.unpaid) }}</span>
|
||||||
|
<span>报销总额 ¥ {{ money(item.data.total) }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
@@ -1286,7 +1286,7 @@ html.dark & {
|
|||||||
.stat-amount {
|
.stat-amount {
|
||||||
.currency,
|
.currency,
|
||||||
.number {
|
.number {
|
||||||
color: var(--el-text-color-primary);
|
color: #fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1304,6 +1304,11 @@ html.dark & {
|
|||||||
color: var(--el-text-color-secondary);
|
color: var(--el-text-color-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 待办数字 0/5/10 在 base 写死了 #303133,暗色下漏写导致看不清
|
||||||
|
.todo-stat-value {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
.todo-stat-sub {
|
.todo-stat-sub {
|
||||||
color: var(--el-text-color-placeholder);
|
color: var(--el-text-color-placeholder);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -366,6 +366,8 @@ onMounted(() => {
|
|||||||
.home-container {
|
.home-container {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
.home-top {
|
.home-top {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
@@ -472,6 +474,8 @@ onMounted(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.home-wrapper {
|
.home-wrapper {
|
||||||
|
flex: 1 0 auto;
|
||||||
|
width: 100%;
|
||||||
max-width: 1400px;
|
max-width: 1400px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 40px 24px;
|
padding: 40px 24px;
|
||||||
@@ -672,10 +676,14 @@ onMounted(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.home-footer {
|
.home-footer {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
margin-top: auto;
|
||||||
|
width: 100%;
|
||||||
border-top: 1px solid #ebeef5;
|
border-top: 1px solid #ebeef5;
|
||||||
padding: 18px 24px 28px;
|
padding: 18px 24px 28px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #909399;
|
color: #909399;
|
||||||
|
background: transparent;
|
||||||
|
|
||||||
.copyright {
|
.copyright {
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
|
|||||||
@@ -1211,16 +1211,19 @@ func (c *BackendReimburseController) Dashboard() {
|
|||||||
|
|
||||||
for i := range rows {
|
for i := range rows {
|
||||||
row := &rows[i]
|
row := &rows[i]
|
||||||
if inRange(row.ApplyDate, weekStart, tomorrow) {
|
// 按报销单「创建日期」归期(周/月/年 + 趋势)。
|
||||||
|
// 申请日期 apply_date 允许回填为历史日期,用它会导致本月/本周漏统计。
|
||||||
|
created := row.CreateTime
|
||||||
|
if inRange(created, weekStart, tomorrow) {
|
||||||
addTo(weekStat, row)
|
addTo(weekStat, row)
|
||||||
}
|
}
|
||||||
if inRange(row.ApplyDate, monthStart, tomorrow) {
|
if inRange(created, monthStart, tomorrow) {
|
||||||
addTo(monthStat, row)
|
addTo(monthStat, row)
|
||||||
}
|
}
|
||||||
if !row.ApplyDate.Before(yearStart) {
|
if inRange(created, yearStart, tomorrow) {
|
||||||
addTo(yearStat, row)
|
addTo(yearStat, row)
|
||||||
}
|
}
|
||||||
if st, ok := monthStats[row.ApplyDate.Format("2006-01")]; ok {
|
if st, ok := monthStats[created.Format("2006-01")]; ok {
|
||||||
addTo(st, row)
|
addTo(st, row)
|
||||||
}
|
}
|
||||||
sk := strconv.Itoa(int(row.Status))
|
sk := strconv.Itoa(int(row.Status))
|
||||||
|
|||||||
@@ -284,11 +284,13 @@ onMounted(() => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 用 Element Plus 变量,亮色下 #f5f7fa、暗色下 #0a0a0a,自动随主题切换
|
||||||
.search-form {
|
.search-form {
|
||||||
background: #f9f9f9;
|
background: var(--el-bg-color-page, #f5f7fa);
|
||||||
padding: 20px 20px 0 20px;
|
padding: 20px 20px 0 20px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
|
transition: background-color 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-icons {
|
.action-icons {
|
||||||
@@ -296,4 +298,48 @@ onMounted(() => {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ===== 暗色主题适配 =====
|
||||||
|
// 嵌套在根元素 .container-box 内,& 才有真实父选择器
|
||||||
|
.container-box {
|
||||||
|
html.dark & {
|
||||||
|
.header-bar h2 {
|
||||||
|
color: var(--el-text-color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 暗色主题里 -light-3/-light-5 反而更暗,必须用 -dark-2(更亮的蓝)
|
||||||
|
.name-link {
|
||||||
|
color: var(--el-color-primary-dark-2);
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #a5c8ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-divider) {
|
||||||
|
border-color: var(--el-border-color-light);
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-table) {
|
||||||
|
--el-table-border-color: var(--el-border-color-lighter);
|
||||||
|
--el-table-header-text-color: var(--el-text-color-secondary);
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-table__inner-wrapper),
|
||||||
|
:deep(.el-table tr),
|
||||||
|
:deep(.el-table td.el-table__cell) {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-form-item__label) {
|
||||||
|
color: var(--el-text-color-regular);
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-pagination) {
|
||||||
|
--el-pagination-text-color: var(--el-text-color-regular);
|
||||||
|
--el-pagination-button-bg-color: transparent;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -405,6 +405,13 @@ onUnmounted(() => {
|
|||||||
height: 340px;
|
height: 340px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 暗色主题:卡片数字用纯白(默认 --el-text-color-primary 在暗色下是偏蓝灰的 #E5EAF3)
|
||||||
|
html.dark & {
|
||||||
|
.data-overview .data-card .card-content .text-box .value {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
|
|||||||
Reference in New Issue
Block a user