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
<!--
* @Date: 2024-01-15 13:35:51
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-01-24 18:45:17
* @LastEditTime: 2024-01-25 09:32:41
* @FilePath: /xysBooking/src/views/booking.vue
* @Description: 预约页面
-->
......@@ -16,21 +16,23 @@
<div class="days-of-week">
<div v-for="day in daysOfWeek" :key="day" class="item">{{ day }}</div>
</div>
<div v-for="(week, index) in weeks" :key="week" class="weeks">
<div v-for="date in week" :key="date"
@click="chooseDay(date)"
:class="[ 'item',
checked_day === findDatesInfo(date).date ? 'checked' : '',
findDatesInfo(date).reserve_full === ReserveStatus.FULL || findDatesInfo(date).reserve_full === ReserveStatus.OVERDUE ? 'disabled' : ''
]"
>
<div v-if="findDatesInfo(date).date">
<p class="day-lunar">{{ findDatesInfo(date).lunar_date.IDayCn }}</p>
<p class="day-text">{{ findDatesInfo(date).text }}</p>
<p v-if="findDatesInfo(date).reserve_full === ReserveStatus.AVAILABLE" class="day-price">¥{{ findDatesInfo(date).price }}</p>
<p v-else-if="findDatesInfo(date).reserve_full === ReserveStatus.INFINITY || findDatesInfo(date).reserve_full === ReserveStatus.OVERDUE" class="day-price"></p>
<p v-else-if="findDatesInfo(date).reserve_full === ReserveStatus.FULL" class="day-no-booking">约满</p>
<!-- <p v-else class="day-no-booking">¥{{ findDatesInfo(date).price }}</p> -->
<div class="weeks-wrapper">
<div v-for="(week, index) in weeks" :key="week" class="weeks">
<div v-for="date in week" :key="date"
@click="chooseDay(date)"
:class="[ 'item',
checked_day === findDatesInfo(date).date ? 'checked' : '',
findDatesInfo(date).reserve_full === ReserveStatus.FULL || findDatesInfo(date).reserve_full === ReserveStatus.OVERDUE ? 'disabled' : ''
]"
>
<div v-if="findDatesInfo(date).date">
<p class="day-lunar">{{ findDatesInfo(date).lunar_date.IDayCn }}</p>
<p class="day-text">{{ findDatesInfo(date).text }}</p>
<p v-if="findDatesInfo(date).reserve_full === ReserveStatus.AVAILABLE" class="day-price">¥{{ findDatesInfo(date).price }}</p>
<p v-else-if="findDatesInfo(date).reserve_full === ReserveStatus.INFINITY || findDatesInfo(date).reserve_full === ReserveStatus.OVERDUE" class="day-price"></p>
<p v-else-if="findDatesInfo(date).reserve_full === ReserveStatus.FULL" class="day-no-booking">约满</p>
<!-- <p v-else class="day-no-booking">¥{{ findDatesInfo(date).price }}</p> -->
</div>
</div>
</div>
</div>
......@@ -300,6 +302,8 @@ const nextBtn = () => {
.choose-date {
border-radius: 5px;
background-color: #FFFFFF;
.title {
padding: 0.5rem 0.75rem;
display: flex;
......@@ -330,9 +334,12 @@ const nextBtn = () => {
text-align: center;
}
}
.weeks-wrapper {
padding: 0.5rem 0;
}
.weeks {
display: flex;
padding: 0.5em 1%;
padding: 0 1%;
.item {
width: 11.5%;
text-align: center;
......
<!--
* @Date: 2024-01-15 11:43:01
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-01-24 14:49:00
* @LastEditTime: 2024-01-25 09:15:53
* @FilePath: /xysBooking/src/views/notice.vue
* @Description: 文件描述
-->
......@@ -33,10 +33,10 @@
v-model="checked"
shape="square"
checked-color="#A67939"
style="margin-left: 1.25rem"
style="margin: 0 0 0.5rem 1.25rem;"
>
<van-checkbox name="1" icon-size="0.8rem"
><span style="color: #a67939; font-size: 0.85rem"
<van-checkbox name="1" icon-size="1rem"
><span style="color: #a67939; font-size: 1rem"
>我已阅读并同意以上内容</span
></van-checkbox
>
......