diff --git a/src/components/Calender/images/日期-价格弹窗.png b/src/components/Calender/images/日期-价格弹窗.png deleted file mode 100644 index 543d484..0000000 Binary files a/src/components/Calender/images/日期-价格弹窗.png and /dev/null differ diff --git a/src/components/Calender/index.vue b/src/components/Calender/index.vue index 544c855..b19f200 100644 --- a/src/components/Calender/index.vue +++ b/src/components/Calender/index.vue @@ -22,22 +22,26 @@ -
+
- {{ monthData.title }} + {{ + monthData.title }}
-
+
@@ -323,23 +327,54 @@ const getDateLabel = (dateStr) => { // 获取日期格子样式类 const getDateCellClass = (dateInfo) => { - if (!dateInfo) return "bg-transparent cursor-default"; + if (!dateInfo) return "w-[40px] h-[40px] bg-transparent cursor-default"; - const classes = ["date-cell-content"]; + const base = + "relative w-[40px] h-[40px] flex flex-col items-center justify-between p-[2px] rounded-[6px] transition-all duration-200 ease-in-out cursor-pointer bg-white border border-transparent hover:bg-[#f5f5f5] active:scale-[0.95]"; - if (dateInfo.disabled) classes.push("date-cell-disabled"); - if (dateInfo.selected) classes.push("date-cell-selected"); - if (dateInfo.inRange) classes.push("date-cell-in-range"); - // 标注无价格但可选的日期（用于视觉区分） - if ( - dateInfo.price === null || - dateInfo.price === undefined || - dateInfo.price === "-" - ) { - classes.push("date-cell-no-price"); + if (dateInfo.disabled) { + return `${base} bg-[#f5f5f5] text-[#bfbfbf] cursor-not-allowed hover:bg-[#f5f5f5] active:scale-100`; } - return classes.join(" "); + if (dateInfo.selected) { + return `${base} bg-[#1890ff] border-[#1890ff] hover:bg-[#1890ff]`; + } + + if (dateInfo.inRange) { + return `${base} bg-[#e6f7ff] border-[#e6f7ff]`; + } + + return base; +}; + +const formatPrice = (price) => { + if (price === null || price === undefined || price === "-") return ""; + return `¥${price}`; +}; + +const getDateNumberClass = (dateInfo) => { + if (dateInfo.disabled) return "text-[#bfbfbf]"; + if (dateInfo.selected) return "text-white"; + if (dateInfo.inRange) return "text-[#1890ff]"; + + const noPrice = dateInfo.price === null || dateInfo.price === undefined || dateInfo.price === "-"; + if (noPrice) return "text-[#262626] opacity-90"; + + return "text-[#262626]"; +}; + +const getDatePriceClass = (dateInfo) => { + const noPrice = dateInfo.price === null || dateInfo.price === undefined || dateInfo.price === "-"; + if (dateInfo.disabled) return "text-[#bfbfbf]"; + if (dateInfo.selected) return "text-white"; + if (dateInfo.inRange) return "text-[#1890ff]"; + if (noPrice) return "text-[#bfbfbf] italic"; + return "text-[#8c8c8c]"; +}; + +const getDateLabelClass = (dateInfo) => { + if (dateInfo.selected) return "text-white"; + return "text-[#1890ff]"; }; // 处理日期点击 @@ -574,8 +609,3 @@ onBeforeUnmount(() => { } }); - - diff --git a/src/components/Calender/styles/index.scss b/src/components/Calender/styles/index.scss deleted file mode 100644 index a63a8ba..0000000 --- a/src/components/Calender/styles/index.scss +++ /dev/null @@ -1,186 +0,0 @@ -// 颜色系统 -$primary-color: #1890ff; -$primary-light: #e6f7ff; -$primary-dark: #1890ff; - -// 中性色 -$text-primary: #262626; -$text-secondary: #8c8c8c; -$text-disabled: #bfbfbf; -$background-white: #ffffff; -$background-gray: #f5f5f5; -$border-color: #d9d9d9; - -// 状态色 -$success-color: #52c41a; -$warning-color: #faad14; -$error-color: #ff4d4f; - -// 尺寸规范 -$modal-max-height: 80vh; -$modal-border-radius: 12px; -$modal-padding: 12px; - -// 日期格子尺寸 -$date-cell-size: 40px; -$date-cell-gap: 4px; -$date-cell-border-radius: 6px; - -// 字体大小 -$font-size-title: 18px; -$font-size-subtitle: 14px; -$font-size-date: 16px; -$font-size-price: 12px; -$font-size-label: 10px; - - -// 日历主体区域 -.calendar-body { - padding: 8px $modal-padding $modal-padding; - max-height: calc(#{$modal-max-height} - 140px); - overflow-y: auto; - -webkit-overflow-scrolling: touch; - - &::-webkit-scrollbar { - display: none; - } -} - -.month-title { - font-size: $font-size-title; - font-weight: 600; - color: $text-primary; - text-align: center; - margin-bottom: 16px; - margin-top: 8px; - line-height: 1.4; -} - -// 日期格子基础样式 -.date-cell { - position: relative; - width: $date-cell-size; - height: $date-cell-size; - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-between; - padding: 2px; - border-radius: $date-cell-border-radius; - transition: all 0.2s ease; - cursor: pointer; -} - -// 有内容的格子 -.date-cell-content { - background-color: $background-white; - border: 1px solid transparent; - - &:hover { - background-color: $background-gray; - } - - &:active { - transform: scale(0.95); - } -} - -// 禁用状态 -.date-cell-disabled { - background-color: $background-gray !important; - color: $text-disabled !important; - cursor: not-allowed !important; - - .date-number, - .date-price { - color: $text-disabled !important; - } - - &:hover { - background-color: $background-gray !important; - transform: none !important; - } -} - -// 选中状态 -.date-cell-selected { - background-color: $primary-color !important; - border-color: $primary-color !important; - - .date-number, - .date-price, - .date-label { - color: $background-white !important; - } - - &:hover { - background-color: $primary-dark !important; - } -} - -// 范围内状态 -.date-cell-in-range { - background-color: $primary-light !important; - border-color: $primary-light !important; - - .date-number { - color: $primary-color !important; - } - - .date-price { - color: $primary-dark !important; - } -} - -// 日期数字 -.date-number { - font-size: $font-size-date; - font-weight: 500; - color: $text-primary; - line-height: 1; - flex: 1; - display: flex; - align-items: center; - justify-content: center; -} - -// 价格文字 -.date-price { - font-size: $font-size-price; - color: $text-secondary; - line-height: 1; - font-weight: 400; - text-align: center; - min-height: 14px; -} - -// 无价格占位样式 -.date-cell-no-price { - .date-number { - color: $text-primary; - opacity: 0.9; - } - - .date-price { - color: $text-disabled; - font-style: italic; - } - - .date-price--empty { - color: $text-disabled; - font-style: normal; - } -} - -// 自定义标签 -.date-label { - font-size: $font-size-label; - color: $primary-color; - padding: 1px 4px; - border-radius: 2px; - line-height: 1; - white-space: nowrap; - font-weight: 500; - text-align: center; - min-height: 12px; -} \ No newline at end of file