feat 首页

src/views/cases/cpns/CasesFilter.vue

@@ -241,15 +241,17 @@ function clearChips(): void {
         >
           {{ shortcut.label }}
         </button>
-        <ElDatePicker
-          v-model="dateRange"
-          class="case-filter__date"
-          type="daterange"
-          range-separator="—"
-          start-placeholder="开始时间"
-          end-placeholder="结束时间"
-          value-format="YYYY-MM-DD"
-        />
+        <div class="case-filter__date-wrap">
+          <ElDatePicker
+            v-model="dateRange"
+            class="case-filter__date"
+            type="daterange"
+            range-separator="—"
+            start-placeholder="开始时间"
+            end-placeholder="结束时间"
+            value-format="YYYY-MM-DD"
+          />
+        </div>
       </div>
     </section>
 
@@ -433,16 +435,37 @@ function clearChips(): void {
     }
   }
 
-  &__date {
+  // ElDatePicker 有两层元素：外层 div.case-filter__date 与内部 .el-range-editor，
+  // 真正控制盒子尺寸的是内层。所以尺寸/背景/圆角都要用 :deep() 打到内层，
+  // 且不能写在 &__date 上——那样只命中外层，视觉上看不到变化。
+  &__date-wrap {
     grid-column: 1 / -1;
-    display: flex;
-    justify-content: center;
     width: 100%;
+
+    :deep(.case-filter__date),
+    :deep(.case-filter__date .el-range-editor) {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      min-width: 0;
+      height: 53px;
+      padding: 0 @spacing-sm;
+      border-radius: @radius-base;
+      background: @input-bg;
+      box-sizing: border-box;
+      box-shadow: none;
+      justify-content: center;
+    }
+  }
+
+  &__date {
+    justify-content: center;
     min-width: 0;
     height: 53px;
     padding: 0 @spacing-sm;
     border-radius: @radius-base;
     background: @input-bg;
+    box-sizing: border-box;
     box-shadow: none;
 
     &:hover,
@@ -469,6 +492,8 @@ function clearChips(): void {
     }
 
     :deep(.el-range-separator) {
+      flex: 0 0 auto;
+      margin: 0 @spacing-xs;
       color: @cases-text;
       font-size: 20px;
       line-height: 53px;

src/views/cases/cpns/CasesGrid.vue

@@ -17,10 +17,6 @@ const emit = defineEmits<{
 
 <template>
   <div class="cases-grid">
-    <p class="cases-grid__total">
-      {{ total }}
-    </p>
-
     <div v-if="cases.length > 0" class="cases-grid__list">
       <CaseCard
         v-for="item in cases"
@@ -39,17 +35,10 @@ const emit = defineEmits<{
 
 <style lang="less" scoped>
 .cases-grid {
-  &__total {
-    font-size: 20px;
-    font-weight: 700;
-    color: @heading-color;
-  }
-
   &__list {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 23px 28px;
-    margin-top: 12px;
   }
 
   &__empty {

src/views/cases/cpns/CasesSearchBar.vue

@@ -60,14 +60,18 @@ const keyword = computed<string>({
 .case-search {
   .flex(row, flex-start, center);
   gap: 24px;
+  width: 100%;
   height: 128px;
   box-sizing: border-box;
-  padding: 0 36px;
+  // 设计稿 #31：输入框 x=653（栏左 606 + 47），重置 1305，搜索 1429
+  padding: 0 47px;
   border-radius: @radius-base;
   background: @white;
 
   &__field {
     position: relative;
+    // 输入框右边界 1245 → 重置按钮 1305，设计稿间距 60
+    margin-right: 36px;
     flex: 0 0 592px;
   }