duanshuwen/nianxx-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(UseDateRange): replace external scss with inline tailwind styles

Browse Source 
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.
This commit is contained in:
DEV_DSW
2026-05-29 11:41:24 +08:00
parent 64c378c5fd
commit b4a927df87
2 changed files with 17 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/UseDateRange/index.vue
View File

@@ -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>

63
src/components/UseDateRange/styles/index.scss
View File

@@ -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;
}