首页

src/views/Home/Index.vue

@@ -483,25 +483,25 @@ onBeforeUnmount(() => {
             </section>
 
             <section class="panel board-panel kb-stage-card kb-stage-card--4">
-              <div class="panel-title panel-title--center">
+              <div class="panel-title panel-title--center panel-title--with-actions">
                 <span class="icon-decorator"><span></span><span></span></span>
-                预算费用
-              </div>
-              <div class="qhse-metric-tabs qhse-metric-tabs--compact">
-                <button
-                  type="button"
-                  class="qhse-metric-tab"
-                  :class="{ 'is-active': period === 'month' }"
-                  @click="period = 'month'"
-                  >近一周</button
-                >
-                <button
-                  type="button"
-                  class="qhse-metric-tab"
-                  :class="{ 'is-active': period === 'quarter' }"
-                  @click="period = 'quarter'"
-                  >近六个月</button
-                >
+                <span class="panel-title__text">预算费用</span>
+                <div class="qhse-metric-tabs qhse-metric-tabs--compact">
+                  <button
+                    type="button"
+                    class="qhse-metric-tab"
+                    :class="{ 'is-active': period === 'month' }"
+                    @click="period = 'month'"
+                    >近一周</button
+                  >
+                  <button
+                    type="button"
+                    class="qhse-metric-tab"
+                    :class="{ 'is-active': period === 'quarter' }"
+                    @click="period = 'quarter'"
+                    >近六个月</button
+                  >
+                </div>
               </div>
               <div
                 ref="lineRef"
@@ -699,15 +699,49 @@ onBeforeUnmount(() => {
   height: 208px;
 }
 
+.panel-title--with-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.panel-title__text {
+  flex: 1;
+  text-align: left;
+}
+
 .qhse-metric-tabs--compact {
-  padding-left: 24px;
-  margin-top: -4px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px;
+  border: 1px solid rgb(121 169 242 / 40%);
+  border-radius: 999px;
+  background: linear-gradient(180deg, rgb(246 250 255 / 96%) 0%, rgb(232 241 255 / 92%) 100%);
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 90%);
 }
 
 .qhse-metric-tabs--compact .qhse-metric-tab {
-  min-height: 22px;
-  padding: 4px 10px;
+  min-height: 24px;
+  padding: 0 10px;
   font-size: 12px;
+  font-weight: 600;
+  color: #5c7393;
+  background: transparent;
+  border: 0;
+  border-radius: 999px;
+  cursor: pointer;
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+.qhse-metric-tabs--compact .qhse-metric-tab.is-active {
+  color: #fff;
+  background: linear-gradient(135deg, #5aa8ff 0%, #2d78ea 100%);
+  box-shadow: 0 4px 10px rgb(45 120 234 / 20%);
 }
 
 .progress-panel {