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
<!--
* @Date: 2023-12-14 10:04:23
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-28 15:09:15
* @LastEditTime: 2024-01-04 15:10:44
* @FilePath: /meihuaApp/src/components/calendarSelect.vue
* @Description: 文件描述
-->
<template>
<view class="calendar-select-page" @tap="openCalendar">
<nut-row gutter="10">
<nut-col span="9">
<view style="display: flex;">
<view style="flex: 2;">
<view style="color: #7D7C7C; font-size: 0.8rem;">入住日期</view>
<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>
<view v-else style="color: #6A4925; font-size: 3.5vw; font-weight: bold; margin-top: 0.1rem;">请选择入住日期</view>
</nut-col>
<nut-col span="5">
<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;">
共{{ state.betweenDate }}晚
</view>
<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;">
共0晚
<view v-if="state.checkinDate" style="color: #6A4925; font-size: 3.75vw; font-weight: bold; margin-top: 0.1rem;">
<view>{{ state.checkinDate }}</view>
<view>{{ getDayOfWeek(state.checkinDate) }}</view>
</view>
</nut-col>
<nut-col span="9" style="text-align: right;">
<view v-else style="color: #6A4925; font-size: 3.5vw; font-weight: bold; margin-top: 0.1rem;">请选择入住日期</view>
</view>
<view style="flex: 1;" class="select-book-days">
<view class="book-days-text">
<text v-if="state.checkinDate && state.checkoutDate">共{{ state.betweenDate }}晚</text>
<text v-else>共0晚</text>
</view>
</view>
<view style="flex: 2; text-align: right;">
<view style="color: #7D7C7C; font-size: 0.8rem;">退房日期</view>
<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>
<view v-if="state.checkoutDate" style="color: #6A4925; font-size: 3.75vw; font-weight: bold; margin-top: 0.1rem;">
<view>{{ state.checkoutDate }}</view>
<view>{{ getDayOfWeek(state.checkoutDate) }}</view>
</view>
<view v-else style="color: #6A4925; font-size: 3.5vw; font-weight: bold; margin-top: 0.1rem;">请选择退房日期</view>
</nut-col>
</nut-row>
</view>
</view>
</view>
<nut-config-provider :theme-vars="themeVars">
<nut-calendar
......@@ -251,7 +255,23 @@ const onConfirm = (event) => {
.calendar-select-page {
background-color: #F6ECE1;
border-radius: 0.5rem;
padding: 1rem 0;
padding-left: 0.5rem;
padding: 1rem 0.5rem;
.select-book-days {
padding: 0 10rpx;
display: flex;
align-items: center;
justify-content: center;
.book-days-text {
color: #6A4925;
font-size: 0.9rem;
text-align: center;
background-color: #fff;
border-radius: 50%;
height: 3rem;
width: 3rem;
line-height: 3rem;
}
}
}
</style>
......
......@@ -35,6 +35,22 @@
border-radius: 0.5rem;
}
}
.select-book-days {
padding: 0 10rpx;
display: flex;
align-items: center;
justify-content: center;
.book-days-text {
color: #6A4925;
font-size: 0.9rem;
text-align: center;
background-color: #fff;
border-radius: 50%;
height: 3rem;
width: 3rem;
line-height: 3rem;
}
}
}
.calendar-select-info {
padding: 0 1rem 1rem;
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-28 14:31:23
* @LastEditTime: 2024-01-04 15:09:24
* @FilePath: /meihuaApp/src/pages/confirm/index.vue
* @Description: 确认订单页面
-->
......@@ -29,7 +29,7 @@
</nut-row>
</view>
<view class="calendar-select-desc">
<nut-row gutter="15">
<!-- <nut-row gutter="15">
<nut-col span="9" class="calendar-select-left">
<view class="text">入住日期</view>
<view class="date">
......@@ -45,7 +45,28 @@
{{ booking_info.check_out.year }}.{{ booking_info.check_out.month }}.{{ booking_info.check_out.day }} {{ booking_info.check_out.day_of_week }}
</view>
</nut-col>
</nut-row>
</nut-row> -->
<view style="display: flex;">
<view style="flex: 2;" class="calendar-select-left">
<view class="text">入住日期</view>
<view class="date">
<view>{{ booking_info.check_in.year }}.{{ booking_info.check_in.month }}.{{ booking_info.check_in.day }}</view>
<view>{{ booking_info.check_in.day_of_week }}</view>
</view>
</view>
<view style="flex: 1;" class="select-book-days">
<view class="book-days-text">
共{{ booking_info.days }}晚
</view>
</view>
<view style="flex: 2; text-align: right;" class="calendar-select-right">
<view class="text">退房日期</view>
<view class="date">
<view>{{ booking_info.check_out.year }}.{{ booking_info.check_out.month }}.{{ booking_info.check_out.day }}</view>
<view>{{ booking_info.check_out.day_of_week }}</view>
</view>
</view>
</view>
</view>
<view class="calendar-select-info">
<nut-row>
......