Hooke / meihua-island-book

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
f7374d4f 1 parent 31e866ca

房间详情页面处理

Inline Side-by-side
Showing 3 changed files with 62 additions and 4 deletions
...@@ -16,6 +16,8 @@ declare module '@vue/runtime-core' { ...@@ -16,6 +16,8 @@ declare module '@vue/runtime-core' {
16 NutCol: typeof import('@nutui/nutui-taro')['Col'] 16 NutCol: typeof import('@nutui/nutui-taro')['Col']
17 NutConfigProvider: typeof import('@nutui/nutui-taro')['ConfigProvider'] 17 NutConfigProvider: typeof import('@nutui/nutui-taro')['ConfigProvider']
18 NutRow: typeof import('@nutui/nutui-taro')['Row'] 18 NutRow: typeof import('@nutui/nutui-taro')['Row']
19 + NutSwiper: typeof import('@nutui/nutui-taro')['Swiper']
20 + NutSwiperItem: typeof import('@nutui/nutui-taro')['SwiperItem']
19 NutTabbar: typeof import('@nutui/nutui-taro')['Tabbar'] 21 NutTabbar: typeof import('@nutui/nutui-taro')['Tabbar']
20 NutTabbarItem: typeof import('@nutui/nutui-taro')['TabbarItem'] 22 NutTabbarItem: typeof import('@nutui/nutui-taro')['TabbarItem']
21 NutTabPane: typeof import('@nutui/nutui-taro')['TabPane'] 23 NutTabPane: typeof import('@nutui/nutui-taro')['TabPane']
......
1 -.red { 1 +.nut-swiper-item {
2 - color: red; 2 + // line-height: 250px;
3 +}
4 +.nut-swiper-item img {
5 + width: 100%;
6 + height: 100%;
7 +}
8 +
9 +.calendar-select-page {
10 + margin: 0 1rem;
11 + background-color: #F6ECE1;
12 + border-radius: 0.5rem;
13 + padding: 1rem 0;
14 + padding-left: 0.5rem;
3 } 15 }
......
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-15 13:58:15 4 + * @LastEditTime: 2023-12-15 14:44:29
5 * @FilePath: /meihuaApp/src/pages/detail/index.vue 5 * @FilePath: /meihuaApp/src/pages/detail/index.vue
6 * @Description: 文件描述 6 * @Description: 文件描述
7 --> 7 -->
8 <template> 8 <template>
9 - <view></view> 9 + <view style="position: relative; height: 100vh;">
10 + <nut-swiper :init-page="page" :pagination-visible="true" pagination-color="#426543" auto-play="5000">
11 + <nut-swiper-item v-for="(item, index) in 3" :key="index">
12 + <image style="width: 100%; height: 150px;" mode="aspectFill" src="https://img.yzcdn.cn/vant/cat.jpeg" />
13 + </nut-swiper-item>
14 + </nut-swiper>
15 + <view style="padding: 1rem;">
16 + <view style="color: #0B0B0B; font-size: 1rem; font-weight: bold;">非凡魅力豪华总统套房</view>
17 + <view style="color: #7D7C7C; font-size: 0.8rem;">两室 宜住3人</view>
18 + </view>
19 + <view class="calendar-select-page">
20 + <nut-row gutter="10">
21 + <nut-col span="9">
22 + <view style="color: #7D7C7C; font-size: 0.8rem;">入住日期</view>
23 + <view style="color: #6A4925; font-size: 0.85rem; font-weight: bold;">2023.12.07 星期四</view>
24 + </nut-col>
25 + <nut-col span="5">
26 + <view style="color: #6A4925; margin-top: 15%; font-size: 0.8rem; text-align: center; background-color: #fff; padding: 0.25rem 0; border-radius: 0.5rem;">
27 + 共1晚
28 + </view>
29 + </nut-col>
30 + <nut-col span="9">
31 + <view style="color: #7D7C7C; font-size: 0.8rem;">退房日期</view>
32 + <view style="color: #6A4925; font-size: 0.85rem; font-weight: bold;">2023.12.08 星期五</view>
33 + </nut-col>
34 + </nut-row>
35 + </view>
36 + <view style="padding: 1rem; text-align: center; font-weight: bold;">房间介绍</view>
37 + <view style="padding: 0 1rem;">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem quibusdam nostrum numquam quaerat corporis totam similique expedita, omnis ratione aut magnam nihil. Modi repudiandae at minus enim beatae fugit. Modi.</view>
38 + <view style="position: absolute; bottom: 0; left: 0; right: 0; background-color: #fff; height: 4rem; padding: 0 0.5rem;">
39 + <nut-row>
40 + <nut-col :span="18">
41 + <view style="height: 2rem; margin-left: 0.5rem; display: flex; align-items: center;">
42 + <text style="color: #EB2E2E; font-size: 1.3rem; font-weight: bold;">￥980</text>
43 + <text style="color: #7D7C7C; text-decoration: line-through; font-size: 0.85rem; margin-left: 5px;">￥1280</text>
44 + </view>
45 + </nut-col>
46 + <nut-col :span="6">
47 + <view style="background-color: #6A4925; border-radius: 1.25rem; padding: 0.25rem 0.5rem; color: #fff; text-align: center; height: 2rem; line-height: 2rem;">预定</view>
48 + </nut-col>
49 + </nut-row>
50 + </view>
51 + </view>
10 </template> 52 </template>
11 53
12 <script setup> 54 <script setup>
13 import Taro from '@tarojs/taro' 55 import Taro from '@tarojs/taro'
14 import { ref } from "vue"; 56 import { ref } from "vue";
57 +
58 +const page = ref(2);
15 </script> 59 </script>
16 60
17 <script> 61 <script>
......