将界面主题切换为政务蓝行政台风格，并优化筛选区间距与按钮对齐

Co-authored-by: Cursor <cursoragent@cursor.com>

.gitignore

@@ -18,6 +18,7 @@ _prototype_analysis/
 .vscode/
 松江区农民土地退养补助金发放管理平台-原型/
 原系统流程页面/
+界面UI风格/
 
 # Editor directories and files
 .idea

src/components.d.ts

@@ -1,8 +1,11 @@
 /* eslint-disable */
 // @ts-nocheck
+// biome-ignore lint: disable
+// oxlint-disable
+// ------
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
-// biome-ignore lint: disable
+
 export {}
 
 /* prettier-ignore */

src/components/common/StatCards.vue

@@ -34,22 +34,23 @@ defineProps<{
   }
 
   &__item {
-    background: @block-bg;
-    border: 1px solid @border-light;
-    border-top: 3px solid @primary-color;
-    padding: 12px 14px;
+    background: @primary-color;
+    border: none;
+    border-radius: @radius-card;
+    box-shadow: 0 2px 8px rgba(43, 115, 248, 0.22);
+    padding: 14px 16px;
   }
 
   &__label {
     font-size: 13px;
-    color: @text-secondary;
+    color: rgba(255, 255, 255, 0.88);
     margin-bottom: 8px;
   }
 
   &__value {
     font-size: 22px;
     font-weight: 700;
-    color: @text-primary;
+    color: @text-white;
     line-height: 1.2;
   }
 
@@ -57,7 +58,7 @@ defineProps<{
     margin-left: 4px;
     font-size: 12px;
     font-weight: 400;
-    color: @text-secondary;
+    color: rgba(255, 255, 255, 0.8);
   }
 }
 </style>

src/layouts/MainLayout.vue

@@ -280,13 +280,9 @@ onMounted(async () => {
       min-height: @header-height;
       padding: 10px 12px;
       box-sizing: border-box;
-      background: linear-gradient(
-        135deg,
-        @brand-gold-deep 0%,
-        @primary-color 55%,
-        @brand-gold 100%
-      );
-      color: @text-white;
+      background: @header-bg;
+      color: @text-primary;
+      border-bottom: 1px solid @border-color;
 
       &.is-collapse {
         justify-content: center;
@@ -296,8 +292,8 @@ onMounted(async () => {
       &__mark {
         width: 32px;
         height: 32px;
-        border-radius: @radius-sm;
-        background: rgba(255, 255, 255, 0.22);
+        border-radius: 50%;
+        background: @primary-color;
         color: @text-white;
         font-size: 16px;
         font-weight: 700;
@@ -312,6 +308,7 @@ onMounted(async () => {
         font-weight: 700;
         line-height: 1.35;
         letter-spacing: 0.5px;
+        color: @primary-dark;
         word-break: break-all;
       }
     }
@@ -325,22 +322,25 @@ onMounted(async () => {
   &__menu {
     border-right: none !important;
     background: @aside-bg;
+    padding: 8px 10px;
 
     :deep(.el-menu-item) {
       height: 42px;
       line-height: 42px;
+      margin-bottom: 4px;
       color: @text-regular;
       font-size: 13px;
+      border-radius: @radius-md;
 
       &:hover {
         background-color: @el-primary-light-9 !important;
-        color: @primary-dark;
+        color: @primary-color;
       }
 
       &.is-active {
-        color: @primary-dark !important;
-        background-color: @el-primary-light-9 !important;
-        border-right: 3px solid @primary-color;
+        color: @text-white !important;
+        background-color: @primary-color !important;
+        border-right: none !important;
       }
     }
   }

src/styles/index.less

@@ -5,7 +5,7 @@
 }
 
 :root {
-  /* 暖金政务主题 — 全局 CSS 变量 */
+  /* 松江政务浅蓝行政台 — 全局 CSS 变量 */
   --color-primary: @primary-color;
   --color-primary-hover: @primary-hover;
   --color-primary-active: @primary-active;
@@ -23,8 +23,10 @@
   --color-border: @border-color;
   --radius-sm: @radius-sm;
   --radius-md: @radius-md;
+  --radius-card: @radius-card;
+  --ui-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
 
-  /* Element Plus 主题覆盖（替代默认蓝 #409EFF） */
+  /* Element Plus 主题覆盖（政务蓝） */
   --el-color-primary: @primary-color;
   --el-color-primary-light-3: @el-primary-light-3;
   --el-color-primary-light-5: @el-primary-light-5;
@@ -89,7 +91,7 @@ a {
   }
 }
 
-/* ========== 区块标题：左金竖条 + 底部分割线 ========== */
+/* ========== 区块标题：左蓝竖条 + 底部分割线 ========== */
 .block-title {
   display: flex;
   align-items: center;
@@ -100,7 +102,7 @@ a {
   font-weight: 600;
   color: @text-primary;
   line-height: 1.4;
-  border-bottom: 1px solid @divider-gold;
+  border-bottom: 1px solid @border-light;
 
   &::before {
     content: '';
@@ -112,15 +114,16 @@ a {
   }
 }
 
-/* ========== 折叠区块头（金色标题条） ========== */
+/* ========== 折叠区块头 ========== */
 .collapse-panel-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 8px 12px;
-  background: linear-gradient(90deg, #f5efe4 0%, #faf7f1 100%);
+  background: linear-gradient(90deg, #eef4ff 0%, #f7f9fc 100%);
   border: 1px solid @border-light;
   border-left: 3px solid @primary-color;
+  border-radius: 0 @radius-sm @radius-sm 0;
   font-size: 13px;
   font-weight: 600;
   color: @text-primary;
@@ -141,23 +144,58 @@ a {
 .query-panel {
   background: @block-bg;
   border: 1px solid @border-light;
-  padding: 8px 10px 0;
+  border-radius: @radius-card;
+  box-shadow: 0 1px 4px rgba(43, 115, 248, 0.04);
+  padding: 12px 12px 4px;
   margin-bottom: 8px;
 
+  > .block-title {
+    margin-bottom: 16px;
+  }
+
   .el-form-item {
-    margin-bottom: 8px;
+    margin-bottom: 12px;
   }
 
   .el-form-item__label {
     color: @text-regular;
     font-weight: 400;
   }
+
+  /* 查询/重置：与同列控件内容区左对齐（保留 label 占位） */
+  .query-form-actions {
+    .el-form-item__content {
+      flex-wrap: nowrap;
+      gap: 8px;
+    }
+  }
+}
+
+/* 行内筛选：控件与按钮垂直居中对齐 */
+.el-form--inline {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  column-gap: 4px;
+  row-gap: 0;
+
+  .el-form-item {
+    margin-right: 12px;
+    margin-bottom: 8px;
+    vertical-align: middle;
+
+    .el-form-item__content {
+      align-items: center;
+    }
+  }
 }
 
 /* ========== 内容面板 ========== */
 .content-panel {
   background: @block-bg;
   border: 1px solid @border-light;
+  border-radius: @radius-card;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
   padding: 12px;
   margin-bottom: 12px;
 }
@@ -194,6 +232,14 @@ a {
     flex-shrink: 0;
   }
 
+  > .content-panel > .el-alert.page-alert {
+    margin-bottom: 16px;
+  }
+
+  > .content-panel > .el-alert + .el-form {
+    margin-top: 0;
+  }
+
   .page-panel__title,
   .block-title {
     flex-shrink: 0;
@@ -215,10 +261,10 @@ a {
   .query-panel {
     flex-shrink: 0;
     margin-bottom: 8px;
-    padding: 8px 10px 0;
+    padding: 12px 12px 4px;
 
     .el-form-item {
-      margin-bottom: 8px;
+      margin-bottom: 12px;
     }
   }
 }
@@ -273,7 +319,7 @@ a {
 
 .page-alert {
   flex-shrink: 0;
-  margin-bottom: 8px;
+  margin-bottom: 16px;
 
   .el-alert__title {
     font-size: 12px;
@@ -289,6 +335,12 @@ a {
   }
 }
 
+/* 提示条与下方筛选表单之间强制留白（避免 margin 折叠） */
+.page-alert + .el-form,
+.page-alert + .query-panel {
+  margin-top: 4px;
+}
+
 /* ========== 页面底部居中主操作 ========== */
 .page-actions {
   display: flex;
@@ -320,7 +372,7 @@ a {
   background-color: @input-editable-bg !important;
 }
 
-/* ========== 主按钮：暖金实心 / 轻微渐变 ========== */
+/* ========== 主按钮：政务蓝实心 ========== */
 .el-button--primary {
   --el-button-bg-color: @primary-color;
   --el-button-border-color: @primary-color;
@@ -328,16 +380,16 @@ a {
   --el-button-hover-border-color: @primary-hover;
   --el-button-active-bg-color: @primary-active;
   --el-button-active-border-color: @primary-active;
-  background: linear-gradient(180deg, @primary-hover 0%, @primary-color 100%);
-  border-color: @primary-active;
+  background: @primary-color;
+  border-color: @primary-color;
   color: @text-white;
   border-radius: @radius-sm;
   font-weight: 500;
 
   &:hover,
   &:focus {
-    background: linear-gradient(180deg, lighten(@primary-hover, 4%) 0%, @primary-hover 100%);
-    border-color: @primary-color;
+    background: @primary-hover;
+    border-color: @primary-hover;
     color: @text-white;
   }
 
@@ -396,21 +448,27 @@ a {
   margin-top: 10px;
   justify-content: flex-end;
   font-size: 13px;
+
+  .el-pager li.is-active {
+    background-color: @primary-color !important;
+    color: @text-white !important;
+  }
 }
 
-/* ========== Menu 侧栏激活态 ========== */
+/* ========== Menu 侧栏激活态（实心蓝圆角 + 白字） ========== */
 .el-menu {
   border-right: none !important;
 }
 
 .el-menu-item.is-active {
-  color: @primary-dark !important;
-  background-color: @el-primary-light-9 !important;
-  border-right: 3px solid @primary-color;
+  color: @text-white !important;
+  background-color: @primary-color !important;
+  border-right: none !important;
+  border-radius: @radius-md;
 }
 
 .el-sub-menu.is-active > .el-sub-menu__title {
-  color: @primary-dark !important;
+  color: @primary-color !important;
 }
 
 /* ========== 面包屑 ========== */
@@ -431,9 +489,10 @@ a {
     height: 40px;
     line-height: 40px;
     padding: 0 12px;
-    background: linear-gradient(90deg, #f5efe4 0%, #faf7f1 100%);
+    background: linear-gradient(90deg, #eef4ff 0%, #f7f9fc 100%);
     border: 1px solid @border-light;
     border-left: 3px solid @primary-color;
+    border-radius: 0 @radius-sm @radius-sm 0;
     font-weight: 600;
     color: @text-primary;
     margin-bottom: 0;

src/styles/variables.less

@@ -1,18 +1,19 @@
-// ========== 暖金政务主题 ==========
-// 主色 / 品牌色（暖金～浅棕）
-@primary-color: #c9a66e;
-@primary-hover: #d4b07a;
-@primary-active: #b8955a;
-@primary-dark: #a8824a;
-@brand-gold: #c9b38b;
-@brand-gold-deep: #d4a66e;
+// ========== 松江政务浅蓝行政台主题 ==========
+// 对齐 界面UI风格/UI风格分析与Prompt.md（主色 #2B73F8 / #1890FF）
+@primary-color: #2b73f8;
+@primary-hover: #4a8aff;
+@primary-active: #1f5fd1;
+@primary-dark: #1a56c4;
+// 兼容旧变量名（历史 brand-gold 引用统一落到主色系，避免残留金色）
+@brand-gold: #5b8ff9;
+@brand-gold-deep: #1890ff;
 
-// 功能色（克制，避免科技蓝主调）
-@success-color: #67a05a;
-@warning-color: #d4a017;
-@danger-color: #c75050;
-@info-color: #8a8a8a;
-@link-color: #1677ff;
+// 功能色
+@success-color: #27c98e;
+@warning-color: #fa8c16;
+@danger-color: #f5222d;
+@info-color: #8a9099;
+@link-color: #2b73f8;
 
 // 布局尺寸
 @header-height: 48px;
@@ -21,61 +22,62 @@
 @content-padding: 12px;
 
 // 背景
-@page-bg: #f7f7f7;
-@page-bg-alt: #fafafa;
-@aside-bg: #ffffff;
-@aside-logo-bg: #c9a66e;
+@page-bg: #eef3f9;
+@page-bg-alt: #f5f7fa;
+@aside-bg: #f5f7fa;
+@aside-logo-bg: #2b73f8;
 @header-bg: #ffffff;
 @block-bg: #ffffff;
 
 // 文字
-@text-primary: #333333;
+@text-primary: #1f2329;
 @text-regular: #595959;
-@text-secondary: #8c8c8c;
+@text-secondary: #8a9099;
 @text-white: #ffffff;
 
 // 边框 / 分割
-@border-color: #e8e8e8;
-@border-light: #f0f0f0;
-@divider-gold: #c9b38b;
+@border-color: #e5e8ef;
+@border-light: #eef1f6;
+@divider-gold: #d6e4ff; // 历史名：区块分割线，现为浅蓝
 
 // 表格
-@table-header-bg: #f5f5f5;
-@table-stripe-bg: #fafafa;
-@table-row-hover: #f5f5f5;
-@table-row-selected: #e6f7ff;
+@table-header-bg: #f5f7fa;
+@table-stripe-bg: #fafbfc;
+@table-row-hover: #f5f7fa;
+@table-row-selected: #e8f1ff;
 
-// 可编辑输入浅黄底
-@input-editable-bg: #fffbe6;
+// 可编辑输入浅蓝底（原浅黄，随主色调整）
+@input-editable-bg: #f0f7ff;
 
-// 圆角（小圆角、扁平）
-@radius-sm: 2px;
-@radius-md: 4px;
+// 圆角（卡片略柔和，控件略收）
+@radius-sm: 4px;
+@radius-md: 6px;
+@radius-card: 8px;
 
-// Element Plus 主色衍生（供 CSS 变量使用）
-@el-primary-light-3: #d9be93;
-@el-primary-light-5: #e4d0ae;
-@el-primary-light-7: #efe2c9;
-@el-primary-light-8: #f4ebda;
-@el-primary-light-9: #f9f5ed;
-@el-primary-dark-2: #a18558;
+// Element Plus 主色衍生
+@el-primary-light-3: #6b9cfa;
+@el-primary-light-5: #95b8fc;
+@el-primary-light-7: #bfd4fd;
+@el-primary-light-8: #d4e3fe;
+@el-primary-light-9: #e8f1ff;
+@el-primary-dark-2: #2260d0;
 
 // 功能色浅色阶（Message / Tag 背景依赖）
-@el-success-light-3: #95c08c;
-@el-success-light-5: #b3d3ac;
-@el-success-light-7: #d1e5cd;
-@el-success-light-8: #e0eee0;
-@el-success-light-9: #eff6ef;
-@el-warning-light-3: #e2bc5b;
-@el-warning-light-5: #ebcf8b;
-@el-warning-light-7: #f3e2bb;
-@el-warning-light-8: #f7ebd0;
-@el-warning-light-9: #fbf5e8;
-@el-danger-light-3: #d88484;
-@el-danger-light-5: #e5a8a8;
-@el-danger-light-7: #f1cbcb;
-@el-danger-light-8: #f6dddd;
-@el-danger-light-9: #faeeee;
+@el-success-light-3: #6ed9ae;
+@el-success-light-5: #95e4c4;
+@el-success-light-7: #bcefd9;
+@el-success-light-8: #d0f5e5;
+@el-success-light-9: #e8faf2;
+@el-warning-light-3: #fcb35b;
+@el-warning-light-5: #fdc98b;
+@el-warning-light-7: #fedebb;
+@el-warning-light-8: #fee8d0;
+@el-warning-light-9: #fff4e8;
+@el-danger-light-3: #f86a71;
+@el-danger-light-5: #fa979c;
+@el-danger-light-7: #fcc4c7;
+@el-danger-light-8: #fdd8da;
+@el-danger-light-9: #feecee;
 @el-info-light-3: #adadad;
 @el-info-light-5: #c4c4c4;
 @el-info-light-7: #dbdbdb;

src/views/base/BaseInfoView.vue

@@ -63,7 +63,7 @@
             <el-option v-for="v in villageOptions" :key="v" :label="v" :value="v" />
           </el-select>
         </el-form-item>
-        <el-form-item>
+        <el-form-item label="　">
           <el-button type="primary" @click="onAdminScopeChange">查询</el-button>
           <el-button @click="resetAdminScope">重置</el-button>
         </el-form-item>
@@ -129,7 +129,7 @@
             <el-option v-for="s in rosterSourceOptions" :key="s" :label="s" :value="s" />
           </el-select>
         </el-form-item>
-        <el-form-item>
+        <el-form-item label="　">
           <el-button type="primary" @click="applyRosterFilter">查询</el-button>
           <el-button @click="resetRosterFilter">重置</el-button>
         </el-form-item>
@@ -1159,13 +1159,31 @@ watch(
 
 <style scoped lang="less">
 .base-info-view {
+  :deep(.page-alert) {
+    margin-bottom: 16px;
+  }
+
   &__admin-filter,
   &__roster-filter {
     flex-shrink: 0;
-    margin-bottom: 4px;
+    margin-top: 4px;
+    margin-bottom: 8px;
 
     :deep(.el-form-item) {
       margin-bottom: 8px;
+      margin-right: 12px;
+      vertical-align: middle;
+    }
+
+    :deep(.el-form-item__label) {
+      line-height: 32px;
+    }
+
+    :deep(.el-form-item__content) {
+      display: inline-flex;
+      align-items: center;
+      flex-wrap: nowrap;
+      gap: 8px;
     }
   }
 

src/views/dashboard/DashboardView.vue

@@ -496,10 +496,10 @@ let refreshTimer: ReturnType<typeof setInterval> | null = null
 /** 指标/告警自动刷新间隔（可研：实时刷新） */
 const DASHBOARD_REFRESH_MS = 30_000
 
-/** 图表主色：暖金政务 */
-const CHART_COLOR = '#c9a66e'
-const CHART_COLORS = ['#c9a66e', '#8b9d7a', '#d4a06a', '#b08a6a', '#9a8b7a']
-const CHART_COLOR_GREEN = '#8b9d7a'
+/** 图表主色：政务蓝行政台 */
+const CHART_COLOR = '#2B73F8'
+const CHART_COLORS = ['#2B73F8', '#27C98E', '#FA8C16', '#722ED1', '#1890FF']
+const CHART_COLOR_GREEN = '#27C98E'
 
 const userStore = useUserStore()
 /** shallowRef：整包替换工作台数据，避免深层响应拖慢图表重算 */
@@ -837,8 +837,8 @@ function buildBarOption(
   yName: string,
   valueFormatter?: (v: unknown) => string,
   barColorStops = [
-    { offset: 0, color: '#d4b07a' },
-    { offset: 1, color: '#c9a66e' },
+    { offset: 0, color: '#4A8AFF' },
+    { offset: 1, color: '#2B73F8' },
   ],
 ): EChartsCoreOption {
   return {
@@ -846,7 +846,7 @@ function buildBarOption(
     tooltip: {
       trigger: 'axis',
       backgroundColor: 'rgba(255,255,255,0.96)',
-      borderColor: '#e8e0d0',
+      borderColor: '#d6e4ff',
       textStyle: { color: '#333', fontSize: 12 },
       valueFormatter,
     },
@@ -945,11 +945,11 @@ const roleBarOption = computed(() =>
 const batchCompareOption = computed<EChartsCoreOption>(() => {
   const list = data.value?.batchCompareChart ?? []
   return {
-    color: [CHART_COLOR, '#8b7355'],
+    color: [CHART_COLOR, '#1A56C4'],
     tooltip: {
       trigger: 'axis',
       backgroundColor: 'rgba(255,255,255,0.96)',
-      borderColor: '#e8e0d0',
+      borderColor: '#d6e4ff',
       textStyle: { color: '#333', fontSize: 12 },
     },
     legend: {
@@ -1000,8 +1000,8 @@ const batchCompareOption = computed<EChartsCoreOption>(() => {
             x2: 0,
             y2: 1,
             colorStops: [
-              { offset: 0, color: '#d4b07a' },
-              { offset: 1, color: '#c9a66e' },
+              { offset: 0, color: '#4A8AFF' },
+              { offset: 1, color: '#2B73F8' },
             ],
           },
         },
@@ -1014,8 +1014,8 @@ const batchCompareOption = computed<EChartsCoreOption>(() => {
         smooth: true,
         symbol: 'circle',
         symbolSize: 7,
-        lineStyle: { width: 2, color: '#8b7355' },
-        itemStyle: { color: '#8b7355', borderWidth: 2, borderColor: '#fff' },
+        lineStyle: { width: 2, color: '#1A56C4' },
+        itemStyle: { color: '#1A56C4', borderWidth: 2, borderColor: '#fff' },
         data: list.map((i) => i.count ?? 0),
       },
     ],
@@ -1032,7 +1032,7 @@ function buildPieOption(
       trigger: 'item',
       formatter: '{b}: {c} ({d}%)',
       backgroundColor: 'rgba(255,255,255,0.96)',
-      borderColor: '#e8e0d0',
+      borderColor: '#d6e4ff',
       textStyle: { color: '#333', fontSize: 12 },
     },
     legend: {
@@ -1060,7 +1060,7 @@ function buildPieOption(
         itemStyle: { borderColor: '#fff', borderWidth: 2 },
         emphasis: {
           scaleSize: 4,
-          itemStyle: { shadowBlur: 8, shadowColor: 'rgba(201,166,110,0.35)' },
+          itemStyle: { shadowBlur: 8, shadowColor: 'rgba(43,115,248,0.35)' },
         },
       },
     ],
@@ -1116,8 +1116,8 @@ const districtWithoutLandOption = computed(() =>
     '人数(人)',
     (v) => `${Number(v).toLocaleString('zh-CN')} 人`,
     [
-      { offset: 0, color: '#d4b07a' },
-      { offset: 1, color: '#c9a66e' },
+      { offset: 0, color: '#4A8AFF' },
+      { offset: 1, color: '#2B73F8' },
     ],
   ),
 )
@@ -1251,7 +1251,7 @@ watch(
   padding: 6px 10px;
   background: #fff8ef;
   border: 1px solid @border-light;
-  border-left: 3px solid #c9a66e;
+  border-left: 3px solid #2B73F8;
 
   &__label {
     display: inline-flex;
@@ -1521,7 +1521,7 @@ watch(
     font-weight: 700;
     color: #fff;
     background: linear-gradient(145deg, @brand-gold-deep 0%, @primary-color 100%);
-    box-shadow: 0 1px 3px rgba(139, 115, 85, 0.28);
+    box-shadow: 0 1px 3px rgba(43, 115, 248, 0.28);
   }
 
   &__line {
@@ -1529,7 +1529,7 @@ watch(
     width: 2px;
     margin: 4px 0 2px;
     min-height: 12px;
-    background: linear-gradient(180deg, rgba(201, 166, 110, 0.55), rgba(201, 166, 110, 0.12));
+    background: linear-gradient(180deg, rgba(43, 115, 248, 0.55), rgba(43, 115, 248, 0.12));
     border-radius: 1px;
   }
 
@@ -1541,15 +1541,15 @@ watch(
     gap: 4px;
     padding: 12px 14px;
     margin-bottom: 10px;
-    background: linear-gradient(135deg, #fbf8f2 0%, #f7f1e6 100%);
-    border: 1px solid #efe6d6;
+    background: linear-gradient(135deg, #f5f9ff 0%, #eef4ff 100%);
+    border: 1px solid #d6e4ff;
     border-left: 3px solid @primary-color;
     border-radius: 0 @radius-sm @radius-sm 0;
     transition: border-color 0.15s, background 0.15s;
 
     &:hover {
-      background: linear-gradient(135deg, #fff 0%, #f7f1e6 100%);
-      border-color: rgba(201, 166, 110, 0.65);
+      background: linear-gradient(135deg, #fff 0%, #eef4ff 100%);
+      border-color: rgba(43, 115, 248, 0.65);
     }
   }
 
@@ -1584,8 +1584,8 @@ watch(
     justify-content: space-between;
     gap: 12px;
     padding: 12px 16px;
-    background: linear-gradient(90deg, #f7f1e6 0%, #faf8f3 55%, #fff 100%);
-    border-bottom: 1px solid #efe6d6;
+    background: linear-gradient(90deg, #eef4ff 0%, #f7f9fc 55%, #fff 100%);
+    border-bottom: 1px solid #d6e4ff;
   }
 
   &__title {
@@ -1633,8 +1633,8 @@ watch(
     padding: 2px 6px 2px 10px;
     font-size: 12px;
     color: @primary-dark;
-    background: rgba(201, 166, 110, 0.12);
-    border: 1px solid rgba(201, 166, 110, 0.35);
+    background: rgba(43, 115, 248, 0.12);
+    border: 1px solid rgba(43, 115, 248, 0.35);
     border-radius: @radius-sm;
   }
 
@@ -1649,7 +1649,7 @@ watch(
     :deep(.el-input__wrapper) {
       background: #fff;
       box-shadow: none;
-      border: 1px solid rgba(201, 166, 110, 0.45);
+      border: 1px solid rgba(43, 115, 248, 0.45);
     }
 
     :deep(.el-input__inner) {
@@ -1740,7 +1740,7 @@ watch(
   }
 
   &.tone-gold .metric-item__icon {
-    background: #f5efe4;
+    background: #e8f1ff;
     color: @primary-dark;
   }
 

src/views/reports/ReportsView.vue

@@ -212,7 +212,7 @@
             </el-form-item>
           </el-col>
           <el-col :xs="24" :sm="12" :md="8" :lg="6">
-            <el-form-item label-width="0">
+            <el-form-item label="　" class="query-form-actions">
               <el-button type="primary" @click="applySharedFilter">查询</el-button>
               <el-button @click="resetSharedQuery">重置</el-button>
             </el-form-item>
@@ -276,7 +276,7 @@
               </el-form-item>
             </el-col>
             <el-col :xs="24" :sm="12" :md="8" :lg="6">
-              <el-form-item label-width="0">
+              <el-form-item label="　" class="query-form-actions">
                 <el-button type="primary" @click="applyBatchFilter">查询</el-button>
                 <el-button @click="resetBatchQuery">重置</el-button>
                 <el-button @click="saveBatchQueryPreset">保存条件</el-button>
@@ -411,7 +411,7 @@
               </el-form-item>
             </el-col>
             <el-col :xs="24" :sm="12" :md="8" :lg="6">
-              <el-form-item label-width="0">
+              <el-form-item label="　" class="query-form-actions">
                 <el-button type="primary" @click="applyPeopleFilter">查询</el-button>
                 <el-button @click="resetPeopleQuery">重置</el-button>
                 <el-button @click="savePeopleQueryPreset">保存条件</el-button>
@@ -582,7 +582,7 @@
               </el-form-item>
             </el-col>
             <el-col :xs="24" :sm="12" :md="8" :lg="6">
-              <el-form-item label-width="0">
+              <el-form-item label="　" class="query-form-actions">
                 <el-button type="primary" @click="applyPeopleFilter">查询</el-button>
                 <el-button @click="resetPeopleQuery">重置</el-button>
                 <el-button @click="savePeopleQueryPreset">保存条件</el-button>
@@ -1452,12 +1452,16 @@ watch(
 .reports-view__yoy-meta {
   margin: 8px 0 0;
   font-size: 12px;
-  color: #8a7a66;
+  color: @text-secondary;
 }
 
 .reports-view__inner-query {
   margin-bottom: 12px;
-  padding: 10px 12px 2px;
+  padding: 12px 12px 4px;
+
+  :deep(.block-title) {
+    margin-bottom: 16px;
+  }
 }
 
 .muted {