style: 实现delivery date组件样式

src/styles/theme.scss

@@ -326,6 +326,8 @@
   --color-steps-current-icon-bg: #fff4d1;
   --color-booking-info-linear-bg: linear-gradient(90deg, #c4c9ee 0%, #e8e8ff 49.52%, #bfe1ff 100%);
   --color-process-data-value-bg: #e8ebef;
+
+  --color-delivery-date-cell-hover-bg: #fff1e6;
 }
 
 :root.dark {
@@ -529,4 +531,6 @@
   --color-steps-current-icon-bg: #534b30;
   --color-booking-info-linear-bg: linear-gradient(90deg, #636db7 0%, #515195 49.52%, #7b9bc9 100%);
   --color-process-data-value-bg: #4f5760;
+
+  --color-delivery-date-cell-hover-bg: rgba(255, 117, 0, 0.2);
 }

src/views/DestinationDelivery/src/components/DeliveryDate.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import dayjs, { Dayjs } from 'dayjs'
+import dayjs from 'dayjs'
 import { ref, watch } from 'vue'
 import { useUserStore } from '@/stores/modules/user'
 
@@ -37,6 +37,20 @@ watch(
   { immediate: true, deep: true }
 )
 
+const testDate = {
+  '2025-06-01': {
+    pending: 3,
+    approved: 3
+  },
+  '2025-05-20': {
+    pending: 2,
+    approved: 1
+  }
+}
+const isShowStatus = (date: string) => {
+  return testDate[date] ? true : false
+}
+
 const emit = defineEmits(['DateRangeChange', 'DateChange'])
 const open = ref(false)
 const Disabled = ref([false, false])
@@ -132,6 +146,25 @@ const isTwoDate = (date: any) => {
       @panelChange="handlePanelChange"
       v-model:value="ETDDate"
     >
+      <template #dateRender="{ current }">
+        <div class="date-cell">
+          <span class="date-text">{{ dayjs(current).date() }}</span>
+          <div class="status-list" v-if="isShowStatus(current.format('YYYY-MM-DD'))">
+            <div class="status-item pending">
+              <span class="status-text">Pending</span>
+              <div class="count">
+                <span>3</span>
+              </div>
+            </div>
+            <div class="status-item approved">
+              <span class="status-text">Approved</span>
+              <div class="count">
+                <span>3</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </template>
       <template #suffixIcon>
         <span class="iconfont_icon">
           <svg class="iconfont icon_suffix" aria-hidden="true">
@@ -193,9 +226,7 @@ const isTwoDate = (date: any) => {
   fill: var(--color-neutral-1);
 }
 </style>
-ant-picker-cell ant-picker-cell-in-view ant-picker-cell-range-start
-ant-picker-cell-range-start-single ant-picker-cell-selected ant-picker-cell ant-picker-cell-in-view
-ant-picker-cell-range-end
+
 <style lang="scss">
 .delivery-date-range-picker {
   .ant-picker-panel,
@@ -205,12 +236,12 @@ ant-picker-cell-range-end
   .ant-picker-content {
     width: 476px !important;
   }
-  .ant-picker-cell {
+  td.ant-picker-cell {
     width: 64px;
     height: 64px;
+    overflow: hidden;
     &:not(.ant-picker-cell-in-view) {
-      div {
-        font-size: 12px;
+      .date-text {
         color: var(--color-neutral-5);
       }
     }
@@ -218,17 +249,216 @@ ant-picker-cell-range-end
       background-color: var(--border-hover-color);
       border-radius: 12px;
     }
-    &.ant-picker-cell-selected {
-      background: var(--color-theme);
+    &.ant-picker-cell-selected.ant-picker-cell-in-view,
+    &.ant-picker-cell-range-end.ant-picker-cell-in-view,
+    &.ant-picker-cell-range-start.ant-picker-cell-in-view {
+      background: var(--color-theme) !important;
       border-radius: 12px;
     }
-    &.ant-picker-cell-range-end {
-      background: var(--color-theme);
+    &.ant-picker-cell-range-start.ant-picker-cell-in-view {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+    &.ant-picker-cell-range-end.ant-picker-cell-in-view {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+    &.ant-picker-cell-range-start.ant-picker-cell-range-end {
       border-radius: 12px;
     }
   }
-  :where(.css-dev-only-do-not-override-1p3hq3p).ant-picker-dropdown .ant-picker-cell::before {
-    height: 64px !important;
+  .ant-picker-cell-in-view.ant-picker-cell-in-range {
+    background-color: var(--color-orange-6);
+    border-radius: 0 !important;
+  }
+
+  .ant-picker-cell:hover:not(.ant-picker-cell-in-view).ant-picker-cell-inner,
+  .ant-picker-cell:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start)
+    :not(.ant-picker-cell-range-end):not(.ant-picker-cell-range-hover-start) {
+    // background-color: transparent !important;
+    color: var(--color-theme);
+    .status-list {
+      .status-text {
+        background: transparent !important;
+      }
+      .pending {
+        background-color: #fff4d1 !important;
+        .count {
+          background: #e0a100 !important;
+          span {
+            color: #fff4d1 !important;
+            background-color: transparent !important;
+          }
+        }
+      }
+      .approved {
+        background-color: #e8fbe4 !important;
+        .count {
+          background-color: #5bb462 !important;
+          span {
+            background-color: transparent !important;
+            color: #e8fbe4 !important;
+          }
+        }
+      }
+    }
+  }
+
+  &:where(.css-dev-only-do-not-override-1p3hq3p).ant-picker-dropdown
+    .ant-picker-cell
+    .ant-picker-cell-inner {
+    transition: none;
+  }
+  // 截止日期半圆的背景
+  // &:where(.css-dev-only-do-not-override-1p3hq3p).ant-picker-dropdown
+  //   .ant-picker-cell-in-view.ant-picker-cell-range-end:not(
+  //     .ant-picker-cell-range-end-single
+  //   )::before,
+  // &:where(.css-dev-only-do-not-override-1p3hq3p).ant-picker-dropdown
+  //   .ant-picker-cell-in-view.ant-picker-cell-range-start:not(
+  //     .ant-picker-cell-range-start-single
+  //   )::before {
+  //   height: 64px;
+  //   background: var(--color-orange-6);
+  // }
+  // 截止日期半圆的背景透明
+  &:where(.css-dev-only-do-not-override-1p3hq3p).ant-picker-dropdown
+    .ant-picker-cell-in-view.ant-picker-cell-range-start:not(
+      .ant-picker-cell-range-start-single
+    )::before,
+  &:where(.css-dev-only-do-not-override-1p3hq3p).ant-picker-dropdown
+    .ant-picker-cell-in-view.ant-picker-cell-range-end:not(
+      .ant-picker-cell-range-end-single
+    )::before {
+    background-color: transparent !important;
+  }
+
+  &:where(.css-dev-only-do-not-override-1p3hq3p).ant-picker-dropdown
+    .ant-picker-cell-in-view.ant-picker-cell-in-range::before {
+    background-color: transparent !important;
+  }
+
+  .date-cell {
+    position: relative;
+    height: 100%;
+    padding-top: 26px;
+    padding: 22px 6px 0;
+    .date-text {
+      position: absolute;
+      top: 3px;
+      left: 8px;
+      font-size: 12px;
+    }
+    .status-list {
+      .status-item {
+        display: flex;
+        justify-content: space-between;
+        height: 16px;
+        padding: 3px 4px 4px;
+        border-radius: 3px;
+        .status-text {
+          font-size: 8px;
+        }
+        .status-number {
+          font-size: 6px;
+        }
+      }
+      .pending {
+        margin-bottom: 2px;
+        background-color: #fff4d1;
+      }
+      .approved {
+        background-color: #e8fbe4;
+      }
+    }
+  }
+  .pending {
+    .status-text {
+      color: #e0a100;
+    }
+    .count {
+      background: #e0a100;
+    }
+  }
+  .approved {
+    .status-text {
+      color: #5bb462;
+    }
+    .count {
+      background-color: #5bb462;
+    }
+  }
+  .ant-picker-cell-range-start,
+  .ant-picker-cell-range-end,
+  .ant-picker-cell-selected {
+    .date-text {
+      color: #fff !important;
+    }
+    .pending {
+      background-color: #fff !important;
+      .status-text {
+        color: #e0a100;
+      }
+      .count {
+        background: #e0a100;
+      }
+      &:hover {
+        background-color: #e0a100 !important;
+        .status-text {
+          color: #fff;
+        }
+        .count {
+          background-color: #fff;
+          span {
+            color: #e0a100;
+          }
+        }
+      }
+    }
+    .approved {
+      background-color: #fff !important;
+      .status-text {
+        color: #5bb462;
+      }
+      .count {
+        background-color: #5bb462;
+      }
+      &:hover {
+        background-color: #5bb462 !important;
+        .status-text {
+          color: #fff;
+        }
+        .count {
+          background-color: #fff;
+          span {
+            color: #5bb462;
+          }
+        }
+      }
+    }
+  }
+  &:where(.css-dev-only-do-not-override-1p3hq3p).ant-picker-dropdown .ant-picker-cell::before {
+    // display: none;
+  }
+  .count {
+    display: flex;
+    justify-content: center;
+    height: 10px;
+    min-width: 10px;
+    background-color: var(--color-theme);
+    border-radius: 9px;
+    span {
+      font-size: 8px;
+      color: var(--color-white);
+    }
+  }
+  .ant-picker-cell:not(.ant-picker-cell-in-view) {
+    .status-list {
+      display: none !important;
+    }
   }
 }
 </style>
+ant-picker-cell ant-picker-cell-in-view ant-picker-cell-range-end ant-picker-cell-range-end-single
+ant-picker-cell-selected
+<style lang="scss"></style>