|
|
@@ -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 {
|
