@@ -101,10 +90,10 @@ \ No newline at end of file + diff --git a/src/components/ComprehensiveSalesStats.vue b/src/components/ComprehensiveSalesStats.vue index 68e8bf7..67e2b92 100644 --- a/src/components/ComprehensiveSalesStats.vue +++ b/src/components/ComprehensiveSalesStats.vue @@ -1,25 +1,35 @@ @@ -27,195 +37,120 @@ @@ -224,42 +159,47 @@ onUnmounted(() => { display: flex; flex-direction: column; height: 100%; + min-height: 0; } .tab-container { display: flex; - margin-bottom: 12px; - background: rgba(26, 31, 46, 0.5); - border-radius: 6px; - padding: 2px; + gap: 8px; + margin-bottom: 8px; + flex-shrink: 0; } .tab-item { flex: 1; - text-align: center; - padding: 6px 8px; + height: 32px; + padding: 0 6px; + border: 1px solid rgba(45, 189, 255, 0.35); + background: rgba(8, 36, 72, 0.75); + color: #d8ecff; + font-family: 'Microsoft YaHei', sans-serif; font-size: 13px; - color: #a0a8b8; + font-weight: 400; cursor: pointer; - border-radius: 4px; - transition: all 0.3s ease; - user-select: none; + transition: all 0.25s ease; } .tab-item:hover { - color: #409EFF; - background: rgba(64, 158, 255, 0.1); + border-color: rgba(255, 200, 100, 0.55); + color: #fff0c8; } .tab-item.active { - color: #ffffff; - background: #409EFF; - box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3); + border-color: rgba(255, 190, 80, 0.85); + background: linear-gradient(180deg, rgba(120, 72, 18, 0.95) 0%, rgba(78, 46, 10, 0.95) 100%); + color: #fff0c8; + font-weight: 700; + box-shadow: 0 0 12px rgba(255, 170, 60, 0.25); } .chart-container { + position: relative; flex: 1; - min-height: 140px; + min-height: 200px; } .chart { @@ -267,5 +207,42 @@ onUnmounted(() => { height: 100%; } +.legend-panel { + display: flex; + flex-wrap: wrap; + gap: 8px 18px; + justify-content: center; + padding: 6px 4px 2px; + flex-shrink: 0; +} - \ No newline at end of file +.legend-item { + display: flex; + align-items: center; + gap: 5px; + font-family: 'Microsoft YaHei', sans-serif; + font-size: 14px; + color: #d8ecff; + white-space: nowrap; +} + +.legend-dot { + width: 12px; + height: 12px; + border-radius: 2px; + flex-shrink: 0; +} + +.legend-name { + color: #ffffff; +} + +.legend-percent { + color: #8ecfff; + font-weight: 700; +} + +.legend-value { + color: #ffffff; +} + diff --git a/src/components/DateIndicatorTabs.vue b/src/components/DateIndicatorTabs.vue new file mode 100644 index 0000000..3d3981c --- /dev/null +++ b/src/components/DateIndicatorTabs.vue @@ -0,0 +1,89 @@ + + + + + diff --git a/src/components/ExchangeMonitor.vue b/src/components/ExchangeMonitor.vue index 2a92c1e..508ede8 100644 --- a/src/components/ExchangeMonitor.vue +++ b/src/components/ExchangeMonitor.vue @@ -1,11 +1,22 @@