From 6701172b6dcc402f4c65c366c2ad1904254b0b19 Mon Sep 17 00:00:00 2001 From: duanshuwen Date: Sat, 13 Sep 2025 22:04:04 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E5=88=86=E7=A6=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/module/booking/QuickBookingCalender.vue | 60 +------- .../module/booking/QuickBookingComponent.vue | 10 +- .../booking/QuickBookingContentList.vue | 144 +----------------- .../booking/styles/QuickBookingCalender.scss | 57 +++++++ .../booking/styles/QuickBookingComponent.scss | 9 ++ .../styles/QuickBookingContentList.scss | 137 +++++++++++++++++ 6 files changed, 211 insertions(+), 206 deletions(-) create mode 100644 pages/module/booking/styles/QuickBookingCalender.scss create mode 100644 pages/module/booking/styles/QuickBookingComponent.scss create mode 100644 pages/module/booking/styles/QuickBookingContentList.scss diff --git a/pages/module/booking/QuickBookingCalender.vue b/pages/module/booking/QuickBookingCalender.vue index 4bc4fe3..181852f 100644 --- a/pages/module/booking/QuickBookingCalender.vue +++ b/pages/module/booking/QuickBookingCalender.vue @@ -70,62 +70,6 @@ onMounted(() => { }); - diff --git a/pages/module/booking/QuickBookingComponent.vue b/pages/module/booking/QuickBookingComponent.vue index d5df1b4..4aa6780 100644 --- a/pages/module/booking/QuickBookingComponent.vue +++ b/pages/module/booking/QuickBookingComponent.vue @@ -62,13 +62,5 @@ onMounted(() => { diff --git a/pages/module/booking/QuickBookingContentList.vue b/pages/module/booking/QuickBookingContentList.vue index 4b9cc85..01cc926 100644 --- a/pages/module/booking/QuickBookingContentList.vue +++ b/pages/module/booking/QuickBookingContentList.vue @@ -6,7 +6,7 @@ v-for="(item, index) in commodityDTO.commodityList" :key="`${item.commodityId}-${index}`" > - + @@ -38,7 +38,7 @@ 下单 - + @@ -47,6 +47,8 @@ diff --git a/pages/module/booking/styles/QuickBookingCalender.scss b/pages/module/booking/styles/QuickBookingCalender.scss new file mode 100644 index 0000000..0418511 --- /dev/null +++ b/pages/module/booking/styles/QuickBookingCalender.scss @@ -0,0 +1,57 @@ +.date-picker { + background: rgba(140, 236, 255, 0.24); + padding: 8rpx 0; + border-radius: 16rpx; + margin: 12px 0 6px; + min-width: 325px; + box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1); /* 阴影 */ +} + +.date-list { + display: flex; +} + +.date-item, +.calendar-btn { + flex: 1; /* 等宽 */ + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 12rpx 0; + border-radius: 16rpx; +} + +.label { + font-size: 24rpx; + color: #999; +} +.date { + font-size: 28rpx; + font-weight: bold; + color: #555; +} + +.date-item.active { + background-color: #00a6ff; +} +.date-item.active .label, +.date-item.active .date { + color: #fff; +} + +/* 日历按钮 */ +.calendar-btn { + background: #fff; + border-radius: 0 16rpx 16rpx 0; + margin: -8rpx 0; +} +.calendar-img { + width: 16px; + height: 16px; +} +.calendar-text { + font-size: 22rpx; + color: #666; + margin-top: 4rpx; +} \ No newline at end of file diff --git a/pages/module/booking/styles/QuickBookingComponent.scss b/pages/module/booking/styles/QuickBookingComponent.scss new file mode 100644 index 0000000..34a5eee --- /dev/null +++ b/pages/module/booking/styles/QuickBookingComponent.scss @@ -0,0 +1,9 @@ +.container { + width: 100%; + flex: 1; + margin-bottom: 12px; + + .calendar { + width: 100%; + } +} diff --git a/pages/module/booking/styles/QuickBookingContentList.scss b/pages/module/booking/styles/QuickBookingContentList.scss new file mode 100644 index 0000000..959d981 --- /dev/null +++ b/pages/module/booking/styles/QuickBookingContentList.scss @@ -0,0 +1,137 @@ +.container { + .container-scroll { + display: flex; + flex-direction: row; + overflow-x: auto; + overflow-y: hidden; + margin: 4px 0; + + .mk-card-item { + position: relative; + + display: flex; + flex-direction: column; + align-items: start; + width: 188px; + // height: 244px; + background-color: #ffffff; + border-radius: 10px; + margin-right: 8px; + padding-bottom: 12px; + + .card-badge { + position: absolute; + top: 8px; + left: 8px; + background: #ffe7b2; + color: #b97a00; + font-size: 12px; + padding: 2px 8px; + border-radius: 4px; + z-index: 2; + } + + .card-img { + width: 188px; + height: 114px; + border-radius: 10px; + object-fit: cover; /* 确保图片不变形，保持比例裁剪 */ + flex-shrink: 0; /* 防止图片被压缩 */ + } + + .card-content { + box-sizing: border-box; + padding: 10px 12px 0 12px; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: start; + width: 100%; + flex: 1; /* 让内容区域占据剩余空间 */ + overflow: hidden; /* 防止内容溢出 */ + } + + .card-title-column { + display: flex; + align-items: start; + flex-direction: column; + width: 100%; + } + + .card-title { + font-size: 16px; + font-weight: bold; + color: #222; + width: 100%; + /* 限制标题最多显示两行 */ + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + overflow: hidden; + text-overflow: ellipsis; + line-height: 1.4; + max-height: 2.8em; /* 2行的高度 */ + } + + .card-tags { + display: flex; + flex-direction: row; + align-items: start; + padding: 6px 0; + } + + .card-tag { + color: #ff6600; + font-size: 10px; + border-radius: 4px; + padding: 0 6px; + margin-left: 2px; + border: 1px solid #ff6600; + } + + .card-desc { + font-size: 13px; + color: #888; + margin-top: 2px; + } + + .card-bottom-row { + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 8px; + width: 100%; + } + + .card-price-row { + .card-price-fu { + color: #ff6600; + font-size: 11px; + font-weight: normal; + } + + .card-price { + color: #ff6600; + font-size: 16px; + font-weight: bold; + } + .card-unit { + font-size: 11px; + color: #888; + font-weight: normal; + margin-left: 2px; + } + } + + .card-btn { + background: #ff6600; + color: #fff; + font-size: 15px; + border-radius: 20px; + padding: 0 18px; + height: 32px; + line-height: 32px; + } + } + } +}