style: 实现delivery date组件样式

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

@@ -228,7 +228,14 @@ const isTwoDate = (date: any) => {
 </style>
 
 <style lang="scss">
-.delivery-date-range-picker {
+div.delivery-date-range-picker {
+  .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):not(
+      .ant-picker-cell-range-hover-end
+    ) {
+    background-color: transparent !important;
+  }
+
   .ant-picker-panel,
   .ant-picker-date-panel {
     width: 500px !important;
@@ -245,7 +252,8 @@ const isTwoDate = (date: any) => {
         color: var(--color-neutral-5);
       }
     }
-    &:hover {
+
+    &:not(.ant-picker-cell-range-end):hover {
       background-color: var(--border-hover-color);
       border-radius: 12px;
     }
@@ -275,31 +283,34 @@ const isTwoDate = (date: any) => {
   .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;
+        }
+      }
       .status-text {
-        background: transparent !important;
+        color: #e0a100 !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;
         }
       }
-      .approved {
-        background-color: #e8fbe4 !important;
-        .count {
-          background-color: #5bb462 !important;
-          span {
-            background-color: transparent !important;
-            color: #e8fbe4 !important;
-          }
-        }
+      .status-text {
+        color: #5bb462 !important;
       }
     }
   }
@@ -331,6 +342,7 @@ const isTwoDate = (date: any) => {
       .ant-picker-cell-range-end-single
     )::before {
     background-color: transparent !important;
+    display: none !important;
   }
 
   &:where(.css-dev-only-do-not-override-1p3hq3p).ant-picker-dropdown
@@ -338,6 +350,16 @@ const isTwoDate = (date: any) => {
     background-color: transparent !important;
   }
 
+  &:where(.css-dev-only-do-not-override-1p3hq3p).ant-picker-dropdown
+    .ant-picker-cell-disabled::before {
+    height: 64px;
+  }
+  &.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):not(
+      .ant-picker-cell-range-hover-end
+    ) {
+    background-color: transparent !important;
+  }
   .date-cell {
     position: relative;
     height: 100%;
@@ -388,58 +410,58 @@ const isTwoDate = (date: any) => {
       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;
+  .ant-picker-cell-in-view {
+    &.ant-picker-cell-range-start,
+    &.ant-picker-cell-range-end,
+    &.ant-picker-cell-selected {
+      .date-text {
+        color: #fff !important;
       }
-      &:hover {
-        background-color: #e0a100 !important;
+      .pending {
+        background-color: #fff !important;
         .status-text {
-          color: #fff;
+          color: #e0a100;
         }
         .count {
-          background-color: #fff;
-          span {
-            color: #e0a100;
+          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;
+      .approved {
+        background-color: #fff !important;
         .status-text {
-          color: #fff;
+          color: #5bb462;
         }
         .count {
-          background-color: #fff;
-          span {
-            color: #5bb462;
+          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;

src/views/Layout/src/components/Menu/MenuView.vue

@@ -3,7 +3,6 @@ import { useRoute, useRouter } from 'vue-router'
 import { useUserStore } from '@/stores/modules/user'
 import { CaretRight } from '@element-plus/icons-vue'
 import emitter from '@/utils/bus'
-import { pa } from 'element-plus/es/locale/index.mjs'
 
 const route = useRoute()
 const router = useRouter()