From b4a927df87279333b57e58cc605391ce2aa0ab0c Mon Sep 17 00:00:00 2001
From: DEV_DSW <562304744@qq.com>
Date: Fri, 29 May 2026 11:41:24 +0800
Subject: [PATCH] refactor(UseDateRange): replace external scss with inline
 tailwind styles

Remove the standalone styles SCSS file, migrate all component styles to inline Tailwind utility classes, and replace the custom scroll-div component with a native overflow-x-auto div for horizontal scrolling.
---
 src/components/UseDateRange/index.vue         | 32 +++++-----
 src/components/UseDateRange/styles/index.scss | 63 -------------------
 2 files changed, 17 insertions(+), 78 deletions(-)
 delete mode 100644 src/components/UseDateRange/styles/index.scss

diff --git a/src/components/UseDateRange/index.vue b/src/components/UseDateRange/index.vue
index 78b1fe3..b89b13b 100644
--- a/src/components/UseDateRange/index.vue
+++ b/src/components/UseDateRange/index.vue
@@ -3,24 +3,30 @@
     <div class=" text-[16px] font-medium text-black leading-[24px] p-[12px]">
       使用日期
     </div>
-    <div class="flex items-center ">
-      <scroll-div class="date-scroll" scroll-x>
-        <div class="date-list">
-          <block v-for="item in openDateRangeList" :key="item.date">
-            <div class="date-item" :class="{ selected: isSameDate(selectedDate, item.date) }"
+    <div class="flex items-center">
+      <div class="w-full" overflow-x-auto>
+        <div class="flex pt-2 px-3 pb-3">
+          <div v-for="item in openDateRangeList" :key="item.date">
+            <div
+              class="relative flex flex-col items-center justify-center w-[76px] min-w-[76px] h-[86px] bg-white rounded-[10px] [box-shadow:0_0_0_1px_rgba(0,0,0,0.04)] mr-3 px-[10px] py-2 overflow-hidden"
+              :class="{ 'border border-[#0ccd58] bg-[#f0f8f3]': isSameDate(selectedDate, item.date) }"
               @click="onDateClick(item)">
-              <div class="label text-[12px]">{{ item.weekDesc }}</div>
-              <div class="md text-[16px] font-semibold">
+              <div
+                :class="['mb-[6px] text-[12px]', isSameDate(selectedDate, item.date) ? 'text-[#0ccd58]' : 'text-[#999]']">
+                {{ item.weekDesc }}</div>
+              <div
+                :class="['mb-[6px] text-[16px] font-semibold', isSameDate(selectedDate, item.date) ? 'text-[#0ccd58]' : 'text-black']">
                 {{ formatMD(item.date) }}
               </div>
-              <div class="status text-[12px]">{{ item.canOrder }}</div>
-              <div v-if="isSameDate(selectedDate, item.date)" class="check">
+              <div class="text-[#999] text-[12px]">{{ item.canOrder }}</div>
+              <div v-if="isSameDate(selectedDate, item.date)"
+                class="absolute right-0 bottom-0 text-[11px] text-white w-[18px] h-[18px] rounded-tl-[10px] rounded-br-[8px] flex items-center justify-center">
                 ✔
               </div>
             </div>
-          </block>
+          </div>
         </div>
-      </scroll-div>
+      </div>
     </div>
   </div>
 </template>
@@ -67,7 +73,3 @@ const onDateClick = (item) => {
   emit("update:selectedDate", selectedDate.value);
 };
 </script>
-
-<style scoped lang="scss">
-@import "./styles/index.scss";
-</style>
diff --git a/src/components/UseDateRange/styles/index.scss b/src/components/UseDateRange/styles/index.scss
deleted file mode 100644
index 70242a7..0000000
--- a/src/components/UseDateRange/styles/index.scss
+++ /dev/null
@@ -1,63 +0,0 @@
-.date-scroll {
-  width: 100%;
-}
-.date-list {
-  display: flex;
-  padding: 8px 12px 12px;
-}
-.date-item {
-  width: 76px;
-  min-width: 76px;
-  height: 86px;
-  background: #fff;
-  border-radius: 10px;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
-  margin-right: 12px;
-  padding: 8px 10px;
-  box-sizing: border-box;
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  overflow: hidden;
-}
-.date-item .label {
-  margin-bottom: 6px;
-  color: #999;
-}
-.date-item .md {
-  margin-bottom: 6px;
-  color: #000;
-}
-.date-item .status {
-  font-size: 12px;
-  color: #999;
-}
-.date-item.selected {
-  border: 1px solid #0ccd58;
-  background: #f0f8f3;
-}
-.date-item.selected .label,
-.date-item.selected .md,
-.date-item.selected .status {
-  color: #0ccd58;
-}
-.date-item.disabled {
-  opacity: 0.45;
-}
-.date-item .check {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  background: #0ccd58;
-  color: #fff;
-  width: 18px;
-  height: 18px;
-  border-top-left-radius: 10px;
-  border-bottom-right-radius: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 11px;
-}