Hooke / meihua-island-book

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
3e92b293 1 parent b34ac52d

fix 日历样式调整

Inline Side-by-side
Showing 3 changed files with 79 additions and 22 deletions
1 <!-- 1 <!--
2 * @Date: 2023-12-14 10:04:23 2 * @Date: 2023-12-14 10:04:23
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-12-28 15:09:15 4 + * @LastEditTime: 2024-01-04 15:10:44
5 * @FilePath: /meihuaApp/src/components/calendarSelect.vue 5 * @FilePath: /meihuaApp/src/components/calendarSelect.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
8 <template> 8 <template>
9 <view class="calendar-select-page" @tap="openCalendar"> 9 <view class="calendar-select-page" @tap="openCalendar">
10 - <nut-row gutter="10"> 10 + <view style="display: flex;">
11 - <nut-col span="9"> 11 + <view style="flex: 2;">
12 <view style="color: #7D7C7C; font-size: 0.8rem;">入住日期</view> 12 <view style="color: #7D7C7C; font-size: 0.8rem;">入住日期</view>
13 - <view v-if="state.checkinDate" style="color: #6A4925; font-size: 3.5vw; font-weight: bold; margin-top: 0.1rem;">{{ state.checkinDate }} {{ getDayOfWeek(state.checkinDate) }}</view> 13 + <view v-if="state.checkinDate" style="color: #6A4925; font-size: 3.75vw; font-weight: bold; margin-top: 0.1rem;">
14 - <view v-else style="color: #6A4925; font-size: 3.5vw; font-weight: bold; margin-top: 0.1rem;">请选择入住日期</view> 14 + <view>{{ state.checkinDate }}</view>
15 - </nut-col> 15 + <view>{{ getDayOfWeek(state.checkinDate) }}</view>
16 - <nut-col span="5">
17 - <view v-if="state.checkinDate && state.checkoutDate" style="color: #6A4925; margin-top: 15%; font-size: 0.8rem; text-align: center; background-color: #fff; padding: 0.25rem 0; border-radius: 0.5rem;">
18 - 共{{ state.betweenDate }}晚
19 - </view>
20 - <view v-else style="color: #6A4925; margin-top: 15%; font-size: 0.8rem; text-align: center; background-color: #fff; padding: 0.25rem 0; border-radius: 0.5rem;">
21 - 共0晚
22 </view> 16 </view>
23 - </nut-col> 17 + <view v-else style="color: #6A4925; font-size: 3.5vw; font-weight: bold; margin-top: 0.1rem;">请选择入住日期</view>
24 - <nut-col span="9" style="text-align: right;"> 18 + </view>
19 + <view style="flex: 1;" class="select-book-days">
20 + <view class="book-days-text">
21 + <text v-if="state.checkinDate && state.checkoutDate">共{{ state.betweenDate }}晚</text>
22 + <text v-else>共0晚</text>
23 + </view>
24 + </view>
25 + <view style="flex: 2; text-align: right;">
25 <view style="color: #7D7C7C; font-size: 0.8rem;">退房日期</view> 26 <view style="color: #7D7C7C; font-size: 0.8rem;">退房日期</view>
26 - <view v-if="state.checkoutDate" style="color: #6A4925; font-size: 3.5vw; font-weight: bold; margin-top: 0.1rem;">{{ state.checkoutDate }} {{ getDayOfWeek(state.checkoutDate) }}</view> 27 + <view v-if="state.checkoutDate" style="color: #6A4925; font-size: 3.75vw; font-weight: bold; margin-top: 0.1rem;">
28 + <view>{{ state.checkoutDate }}</view>
29 + <view>{{ getDayOfWeek(state.checkoutDate) }}</view>
30 + </view>
27 <view v-else style="color: #6A4925; font-size: 3.5vw; font-weight: bold; margin-top: 0.1rem;">请选择退房日期</view> 31 <view v-else style="color: #6A4925; font-size: 3.5vw; font-weight: bold; margin-top: 0.1rem;">请选择退房日期</view>
28 - </nut-col> 32 + </view>
29 - </nut-row> 33 + </view>
30 </view> 34 </view>
31 <nut-config-provider :theme-vars="themeVars"> 35 <nut-config-provider :theme-vars="themeVars">
32 <nut-calendar 36 <nut-calendar
...@@ -251,7 +255,23 @@ const onConfirm = (event) => { ...@@ -251,7 +255,23 @@ const onConfirm = (event) => {
251 .calendar-select-page { 255 .calendar-select-page {
252 background-color: #F6ECE1; 256 background-color: #F6ECE1;
253 border-radius: 0.5rem; 257 border-radius: 0.5rem;
254 - padding: 1rem 0; 258 + padding: 1rem 0.5rem;
255 - padding-left: 0.5rem; 259 +
260 + .select-book-days {
261 + padding: 0 10rpx;
262 + display: flex;
263 + align-items: center;
264 + justify-content: center;
265 + .book-days-text {
266 + color: #6A4925;
267 + font-size: 0.9rem;
268 + text-align: center;
269 + background-color: #fff;
270 + border-radius: 50%;
271 + height: 3rem;
272 + width: 3rem;
273 + line-height: 3rem;
274 + }
275 + }
256 } 276 }
257 </style> 277 </style>
......
...@@ -35,6 +35,22 @@ ...@@ -35,6 +35,22 @@
35 border-radius: 0.5rem; 35 border-radius: 0.5rem;
36 } 36 }
37 } 37 }
38 + .select-book-days {
39 + padding: 0 10rpx;
40 + display: flex;
41 + align-items: center;
42 + justify-content: center;
43 + .book-days-text {
44 + color: #6A4925;
45 + font-size: 0.9rem;
46 + text-align: center;
47 + background-color: #fff;
48 + border-radius: 50%;
49 + height: 3rem;
50 + width: 3rem;
51 + line-height: 3rem;
52 + }
53 + }
38 } 54 }
39 .calendar-select-info { 55 .calendar-select-info {
40 padding: 0 1rem 1rem; 56 padding: 0 1rem 1rem;
......
1 <!-- 1 <!--
2 * @Date: 2022-09-19 14:11:06 2 * @Date: 2022-09-19 14:11:06
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2023-12-28 14:31:23 4 + * @LastEditTime: 2024-01-04 15:09:24
5 * @FilePath: /meihuaApp/src/pages/confirm/index.vue 5 * @FilePath: /meihuaApp/src/pages/confirm/index.vue
6 * @Description: 确认订单页面 6 * @Description: 确认订单页面
7 --> 7 -->
...@@ -29,7 +29,7 @@ ...@@ -29,7 +29,7 @@
29 </nut-row> 29 </nut-row>
30 </view> 30 </view>
31 <view class="calendar-select-desc"> 31 <view class="calendar-select-desc">
32 - <nut-row gutter="15"> 32 + <!-- <nut-row gutter="15">
33 <nut-col span="9" class="calendar-select-left"> 33 <nut-col span="9" class="calendar-select-left">
34 <view class="text">入住日期</view> 34 <view class="text">入住日期</view>
35 <view class="date"> 35 <view class="date">
...@@ -45,7 +45,28 @@ ...@@ -45,7 +45,28 @@
45 {{ booking_info.check_out.year }}.{{ booking_info.check_out.month }}.{{ booking_info.check_out.day }} {{ booking_info.check_out.day_of_week }} 45 {{ booking_info.check_out.year }}.{{ booking_info.check_out.month }}.{{ booking_info.check_out.day }} {{ booking_info.check_out.day_of_week }}
46 </view> 46 </view>
47 </nut-col> 47 </nut-col>
48 - </nut-row> 48 + </nut-row> -->
49 + <view style="display: flex;">
50 + <view style="flex: 2;" class="calendar-select-left">
51 + <view class="text">入住日期</view>
52 + <view class="date">
53 + <view>{{ booking_info.check_in.year }}.{{ booking_info.check_in.month }}.{{ booking_info.check_in.day }}</view>
54 + <view>{{ booking_info.check_in.day_of_week }}</view>
55 + </view>
56 + </view>
57 + <view style="flex: 1;" class="select-book-days">
58 + <view class="book-days-text">
59 + 共{{ booking_info.days }}晚
60 + </view>
61 + </view>
62 + <view style="flex: 2; text-align: right;" class="calendar-select-right">
63 + <view class="text">退房日期</view>
64 + <view class="date">
65 + <view>{{ booking_info.check_out.year }}.{{ booking_info.check_out.month }}.{{ booking_info.check_out.day }}</view>
66 + <view>{{ booking_info.check_out.day_of_week }}</view>
67 + </view>
68 + </view>
69 + </view>
49 </view> 70 </view>
50 <view class="calendar-select-info"> 71 <view class="calendar-select-info">
51 <nut-row> 72 <nut-row>
......