diff --git a/src/components/other/index.vue b/src/components/other/index.vue
index 1247d63..69d3116 100644
--- a/src/components/other/index.vue
+++ b/src/components/other/index.vue
@@ -196,10 +196,10 @@
-
+
+
@@ -1978,78 +1980,85 @@ defineExpose({
background: #09b8c2;
}
- // 优化后的图表标题行样式
+ // 全新设计的图表标题行布局
.chart-header-row {
display: flex;
align-items: center;
- justify-content: space-between;
width: 100%;
- padding: 0 5px;
- gap: 6px;
+ height: 40px;
+ padding: 0 12px;
+ box-sizing: border-box;
}
- .chart-title {
- flex: 0 0 auto;
- min-width: 55px;
- .title-text {
- font-size: 28px;
+ // 左侧区域:标题
+ .left-section {
+ flex-shrink: 0;
+ width: 70px;
+
+ .chart-title-text {
+ font-size: 30px;
font-weight: 600;
color: #222;
white-space: nowrap;
+ display: inline-block;
}
}
- .day-selector {
- flex: 1 1 auto;
+ // 中间区域:按钮组
+ .center-section {
+ flex: 1;
display: flex;
- align-items: center;
justify-content: center;
- gap: 0;
- border-radius: 6px;
- overflow: hidden;
- border: 1px solid #e5e5e5;
- max-width: 220px;
+ padding: 0 10px;
- .day-btn {
- flex: 1;
- padding: 0 10px;
- height: 34px;
- line-height: 34px;
- font-size: 22px;
- color: #666;
- background: #fff;
- border-right: 1px solid #e5e5e5;
- text-align: center;
- white-space: nowrap;
- cursor: pointer;
- transition: all 0.2s ease;
+ .day-selector {
+ display: inline-flex;
+ align-items: center;
+ border-radius: 6px;
+ overflow: hidden;
+ border: 1px solid #e5e5e5;
- &:last-child {
- border-right: none;
- }
-
- &.active {
- color: #fff;
- background: linear-gradient(135deg, #09b8c2 0%, #07a5ae 100%);
- font-weight: 500;
- }
-
- &:not(.active):active {
- background: #f8f8f8;
+ .day-btn {
+ padding: 0 16px;
+ height: 34px;
+ line-height: 34px;
+ font-size: 24px;
+ color: #666;
+ background: #fff;
+ border-right: 1px solid #e5e5e5;
+ text-align: center;
+ white-space: nowrap;
+ cursor: pointer;
+ transition: all 0.2s ease;
+
+ &:last-child {
+ border-right: none;
+ }
+
+ &.active {
+ color: #fff;
+ background: linear-gradient(135deg, #09b8c2 0%, #07a5ae 100%);
+ font-weight: 500;
+ }
+
+ &:not(.active):active {
+ background: #f8f8f8;
+ }
}
}
}
- .chart-actions {
- flex: 0 0 auto;
+ // 右侧区域:放大隐藏
+ .right-section {
+ flex-shrink: 0;
+ width: 105px;
display: flex;
align-items: center;
- gap: 4px;
- min-width: 85px;
- justify-content: flex-end;
+ justify-content: flex-start;
+ gap: 6px;
.action-link {
- font-size: 24px;
+ font-size: 26px;
color: #1589E9;
white-space: nowrap;
cursor: pointer;
@@ -2061,7 +2070,7 @@ defineExpose({
}
.divider-dot {
- font-size: 16px;
+ font-size: 18px;
color: #ccc;
margin: 0;
}
@@ -2150,7 +2159,7 @@ defineExpose({
// 功能按钮区域样式
.action-buttons {
- margin-top: 20rpx;
+ margin-top: 10rpx;
padding: 0;
width: 100%;