Hooke / xysBooking

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
429d9187 1 parent 2161bcfb

fix 样式调整优化

Inline Side-by-side
Showing 2 changed files with 28 additions and 21 deletions
1 <!-- 1 <!--
2 * @Date: 2024-01-15 13:35:51 2 * @Date: 2024-01-15 13:35:51
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-01-24 18:45:17 4 + * @LastEditTime: 2024-01-25 09:32:41
5 * @FilePath: /xysBooking/src/views/booking.vue 5 * @FilePath: /xysBooking/src/views/booking.vue
6 * @Description: 预约页面 6 * @Description: 预约页面
7 --> 7 -->
...@@ -16,21 +16,23 @@ ...@@ -16,21 +16,23 @@
16 <div class="days-of-week"> 16 <div class="days-of-week">
17 <div v-for="day in daysOfWeek" :key="day" class="item">{{ day }}</div> 17 <div v-for="day in daysOfWeek" :key="day" class="item">{{ day }}</div>
18 </div> 18 </div>
19 - <div v-for="(week, index) in weeks" :key="week" class="weeks"> 19 + <div class="weeks-wrapper">
20 - <div v-for="date in week" :key="date" 20 + <div v-for="(week, index) in weeks" :key="week" class="weeks">
21 - @click="chooseDay(date)" 21 + <div v-for="date in week" :key="date"
22 - :class="[ 'item', 22 + @click="chooseDay(date)"
23 - checked_day === findDatesInfo(date).date ? 'checked' : '', 23 + :class="[ 'item',
24 - findDatesInfo(date).reserve_full === ReserveStatus.FULL || findDatesInfo(date).reserve_full === ReserveStatus.OVERDUE ? 'disabled' : '' 24 + checked_day === findDatesInfo(date).date ? 'checked' : '',
25 - ]" 25 + findDatesInfo(date).reserve_full === ReserveStatus.FULL || findDatesInfo(date).reserve_full === ReserveStatus.OVERDUE ? 'disabled' : ''
26 - > 26 + ]"
27 - <div v-if="findDatesInfo(date).date"> 27 + >
28 - <p class="day-lunar">{{ findDatesInfo(date).lunar_date.IDayCn }}</p> 28 + <div v-if="findDatesInfo(date).date">
29 - <p class="day-text">{{ findDatesInfo(date).text }}</p> 29 + <p class="day-lunar">{{ findDatesInfo(date).lunar_date.IDayCn }}</p>
30 - <p v-if="findDatesInfo(date).reserve_full === ReserveStatus.AVAILABLE" class="day-price">¥{{ findDatesInfo(date).price }}</p> 30 + <p class="day-text">{{ findDatesInfo(date).text }}</p>
31 - <p v-else-if="findDatesInfo(date).reserve_full === ReserveStatus.INFINITY || findDatesInfo(date).reserve_full === ReserveStatus.OVERDUE" class="day-price"></p> 31 + <p v-if="findDatesInfo(date).reserve_full === ReserveStatus.AVAILABLE" class="day-price">¥{{ findDatesInfo(date).price }}</p>
32 - <p v-else-if="findDatesInfo(date).reserve_full === ReserveStatus.FULL" class="day-no-booking">约满</p> 32 + <p v-else-if="findDatesInfo(date).reserve_full === ReserveStatus.INFINITY || findDatesInfo(date).reserve_full === ReserveStatus.OVERDUE" class="day-price"></p>
33 - <!-- <p v-else class="day-no-booking">¥{{ findDatesInfo(date).price }}</p> --> 33 + <p v-else-if="findDatesInfo(date).reserve_full === ReserveStatus.FULL" class="day-no-booking">约满</p>
34 + <!-- <p v-else class="day-no-booking">¥{{ findDatesInfo(date).price }}</p> -->
35 + </div>
34 </div> 36 </div>
35 </div> 37 </div>
36 </div> 38 </div>
...@@ -300,6 +302,8 @@ const nextBtn = () => { ...@@ -300,6 +302,8 @@ const nextBtn = () => {
300 .choose-date { 302 .choose-date {
301 border-radius: 5px; 303 border-radius: 5px;
302 background-color: #FFFFFF; 304 background-color: #FFFFFF;
305 +
306 +
303 .title { 307 .title {
304 padding: 0.5rem 0.75rem; 308 padding: 0.5rem 0.75rem;
305 display: flex; 309 display: flex;
...@@ -330,9 +334,12 @@ const nextBtn = () => { ...@@ -330,9 +334,12 @@ const nextBtn = () => {
330 text-align: center; 334 text-align: center;
331 } 335 }
332 } 336 }
337 + .weeks-wrapper {
338 + padding: 0.5rem 0;
339 + }
333 .weeks { 340 .weeks {
334 display: flex; 341 display: flex;
335 - padding: 0.5em 1%; 342 + padding: 0 1%;
336 .item { 343 .item {
337 width: 11.5%; 344 width: 11.5%;
338 text-align: center; 345 text-align: center;
......
1 <!-- 1 <!--
2 * @Date: 2024-01-15 11:43:01 2 * @Date: 2024-01-15 11:43:01
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2024-01-24 14:49:00 4 + * @LastEditTime: 2024-01-25 09:15:53
5 * @FilePath: /xysBooking/src/views/notice.vue 5 * @FilePath: /xysBooking/src/views/notice.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
...@@ -33,10 +33,10 @@ ...@@ -33,10 +33,10 @@
33 v-model="checked" 33 v-model="checked"
34 shape="square" 34 shape="square"
35 checked-color="#A67939" 35 checked-color="#A67939"
36 - style="margin-left: 1.25rem" 36 + style="margin: 0 0 0.5rem 1.25rem;"
37 > 37 >
38 - <van-checkbox name="1" icon-size="0.8rem" 38 + <van-checkbox name="1" icon-size="1rem"
39 - ><span style="color: #a67939; font-size: 0.85rem" 39 + ><span style="color: #a67939; font-size: 1rem"
40 >我已阅读并同意以上内容</span 40 >我已阅读并同意以上内容</span
41 ></van-checkbox 41 ></van-checkbox
42 > 42 >
......