minsu-detail page

nova-tourism/pages/homestay/homestay-detail/index.js

@@ -30,11 +30,22 @@ Page({
         const bottomNavHeight = systemInfo.screenHeight - systemInfo.safeArea.bottom || 0;
 
         const contentHeight = (screenHeight - bottomNavHeight  - statusBarHeight - customHeight) * 750 / systemInfo.windowWidth;
+        if(bottomNavHeight){
+            const padding_bottom = bottomNavHeight * 750 / systemInfo.windowWidth
+            this.setData({
+                bottomNavHeight:padding_bottom
+            })
+            console.log(this.data.bottomNavHeight);
+        }else{
+            this.setData({
+                bottomNavHeight:40
+            })
+        }
+        
         this.setData({
             statusBarHeight,
             screenHeight,
             customHeight,
-            bottomNavHeight,
             contentHeight
         });
     },

nova-tourism/pages/homestay/homestay-detail/index.json

@@ -1,3 +1,6 @@
 {
-  "usingComponents": {}
+  "usingComponents": {
+    "van-sticky": "@vant/weapp/sticky/index",
+    "van-icon": "@vant/weapp/icon/index"
+  }
 }

nova-tourism/pages/homestay/homestay-detail/index.less

@@ -2,7 +2,7 @@
 .all{
     width: 100vw;
     height: 100vh;
-    background-color: #f7f7f7;
+    background-color: #ECECEC;
     position: relative;
     .picturebox{
         width: 100%;
@@ -32,137 +32,209 @@
             align-items: center;
             background-color: rgba(12, 12, 12, 0.5);
         }
+
     }
-    .Legendary-Information{
+    .card{
         width: 100%;
-        background-color: white;
-        border-top-left-radius: 20px; /* 左上角圆角 */
-        border-top-right-radius: 20px; /* 右上角圆角 */
+        height: auto;
         position: absolute;
-        top: 455rpx;
-        padding-top: 20rpx;
-        padding-left: 25rpx;
-        padding-right: 20rpx;
-        z-index: 10;
-        overflow-y: hidden;
-        padding-bottom: 20rpx;
-        .text{
+        top: 450rpx;
+        padding-bottom: 40rpx;
+        .Legendary-Information{
             width: 100%;
-            height: 100rpx;
-            display: flex;
-            
-            margin-top: 10rpx;
-            .namebox{
-                width: 75%;
-                height: 100rpx;
-                .name{
-                    font-size: 35rpx;
-                    font-weight: 500;
-                }
-                .adress{
+            height: auto;
+            background-color: white;
+            border-radius: 20px; /* 左上角圆角 */
+            padding-top: 20rpx;
+            padding-left: 35rpx;
+            padding-right: 35rpx;
+            padding-bottom: 20rpx;
+            .info-name{
+                width: 100%;
+                height: 60rpx;
+                display: flex;
+                align-items: center;
+                .name-tex{
                     font-size: 30rpx;
-                    white-space: nowrap; /* 不换行 */
-                    overflow: hidden; /* 隐藏超出部分 */
-                    text-overflow: ellipsis; /* 超出部分显示省略号 */
+                    font-weight: 600;
+                }
+                .name-pic{
+                    height: 55rpx;
+                    width: 55rpx;
+                    margin-left: auto;
                 }
             }
-            .markerbox{
-                width: 25%;
-                height: 100%;
+            .info-intr{
+                font-size: 28rpx;
+                width: 100%;
+                height: auto;
+                margin-left: 10rpx;
+            }
+            .info-map{
+                width: 100%;
+                height: 250rpx;
                 display: flex;
-                justify-content: center;
                 align-items: center;
+                .map{
+                    width: 480rpx;
+                    height: 188rpx;
+                    background-color: aqua;
+                }
+                .info-call{
+                    width: 156rpx;
+                    height: 250rpx;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    flex-direction: column;
+                    margin-left: 40rpx;
+                    image{
+                        width: 60rpx;
+                        height: 60rpx;
+                    }
+                    .call-tex{
+                        font-size: 26rpx;
+                        margin-top: 10rpx;
+                    }
+                }
             }
-
         }
-        .datebox{
+    }
+    .roomcard{
+        width: 100%;
+        height: auto;
+        padding-bottom: 40rpx;
+        border-top-left-radius: 20rpx;
+        border-top-right-radius: 20rpx;
+        margin-top: 20rpx;
+        padding-left: 10rpx;
+        padding-right: 10rpx;
+        background-color: white;
+        .timebox{
             width: 100%;
-            height: 90rpx;
-            background-color: #f7f7f7;
+            background-color: white;
             display: flex;
-            padding-left: 20rpx;
-            padding-right: 20rpx;
-            align-items: center;
-            color: orange;
-            font-size: 32rpx;
-            .start{
-                display: flex;
-                justify-content: flex-end;
-            }
-            .day{
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                margin-left: auto;
-                width: 90rpx;
-                height: 42rpx;
-                border-radius: 40rpx;
-                border: gray solid 1px;
-                font-size: 25rpx;
-                color: black;
+            align-items: flex-end;
+            position: relative;
+            padding-left: 10rpx;
+            margin-bottom: 20rpx;
+            padding-bottom: 20rpx;
+            padding-top: 20rpx;
+            .time{
+                width: 150rpx;
+                margin-left: 10rpx;
+                .time-tex{
+                    font-size: 28rpx;
+                    color: gray;
+
+                }
+                .time-time{
+                    font-size: 30rpx;
+                    font-weight: 600;
+                }
             }
-            .end{
-                margin-left: auto;
+            .time_tex2{
+                font-size: 24rpx;
+                margin-left: 20rpx;
+                margin-bottom: 2rpx;
             }
         }
-        .cardbox{
-            .card{
+        .room-card{
+            width: 100%;
+            height: auto;
+            padding-left: 40rpx;
+            padding-right: 40rpx;
+            border: solid #e5e5e5 2rpx;
+            box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.2);
+            padding-top: 40rpx;
+            border-radius: 30rpx;
+            margin-bottom: 20rpx;
+            padding-bottom: 20rpx;
+            .room-card1{
                 width: 100%;
-                height: 620rpx;
-                background-color: white;
-                margin-top: 15rpx;
-                .img{
-                    width: 100%;
-                    height: 480rpx;
-                }
-                .name{
-                    font-size: 30rpx;
-                }
-                .intruduce{
-                    font-size: 28rpx;
+                height: auto;
+                display: flex;
+                image{
+                    width: 200rpx;
+                    height: 270rpx;
+                    margin-right: 20rpx;
+                    border-radius: 15rpx;
                 }
-                .buttombox{
-                    width: 100%;
-                    height: 60rpx;
-                    color: red;
-                    display: flex;
-                    align-items: center;
-
-                    .salary{
-                        width: 50%;
-                        height: 100%;
+                .room-card-textbox{
+                    width: 400rpx;
+                    height: auto;
+                    .room-card-textbox-titlebox{
                         display: flex;
-                        
-                        .symbol{
-                            height: 100%;
-                            font-size: 28rpx;
-                            display: flex;
-                            align-items: flex-end;
-                        }
-                        .number{
-                            height: 100%;
-                            display: flex;
-                            align-items: flex-end;
-                            font-size: 35rpx;
+                        .room-card-textbox-title{
+                            font-size: 34rpx;
+                            font-weight: 600;
                         }
                     }
-                    .buttom{
-                        width: 130rpx;
-                        height: 50rpx;
-                        font-size: 30rpx;
-                        color: white;
-                        background-color: red;
-                        border-radius: 48rpx;
+                    .room-card-textbox-info{
+                        font-size: 26rpx;
+                        width: 400rpx;
+                        height: auto;
+                        margin-top: 10rpx;
+                        margin-bottom: 20rpx;
+                    }
+                    .room-card-textbox-label{
+                        width: 400rpx;
+                        height: auto;
                         display: flex;
-                        justify-content: center;
-                        align-items: center;
-                        margin-left: auto;
+                        flex-wrap: wrap;
+                        .room-card-textbox-label2{
+                            width: auto;
+                            font-size: 24rpx;
+                            margin-right: 20rpx;
+                            padding-left: 4rpx;
+                            padding-right: 4rpx;
+                            display: flex;
+                            justify-content: center;
+                            align-items: center;
+                            border: solid #e5e5e5 2rpx;
+                            white-space: normal;
+                            margin-top: 10rpx;
+                            color: #6384AF;
+                        }
                     }
-
+                }
+            }
+            .room-card2{
+                width: 100%;
+                height: 100rpx;
+                display: flex;
+                justify-content: flex-end;
+                margin-top: 20rpx;
+                .no{
+                    width: 200rpx;
+                    height: 80rpx;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    font-size: 36rpx;
+                    background-color:#1A1A1A ;
+                    color: white;
+                    margin-left: 20rpx;
+                    border-radius: 10rpx;
+                }
+                .price{
+                    font-size: 36rpx;
+                    color: #C5262C;
+                    display: flex;
+                    align-items: center;
+                }
+                .submit{
+                    width: 80rpx;
+                    height: 80rpx;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    font-size: 36rpx;
+                    background-color:#1A1A1A ;
+                    color: white;
+                    margin-left: 20rpx;
                 }
             }
         }
-
     }
-
 }

nova-tourism/pages/homestay/homestay-detail/index.wxml

@@ -1,9 +1,9 @@
 <!--nova-tourism/pages/homestay/homestay-detail/index.wxml-->
 <nav type="back" background-color="#ffffff" frontColor="#000000" title="剑仙居民宿" />
-<scroll-view class="all" scroll-y="true" bindscroll="onScroll" style="height: {{contentHeight}}rpx;">
+<view class="all" scroll-y="true" bindscroll="onScroll" style="height: {{contentHeight}}rpx;padding-bottom: {{bottomNavHeight}}rpx;">
     <!-- 轮播图 -->
     <view class="picturebox">
-        <swiper autoplay="{{true}}"  interval="{{3000}}" circular duration="{{500}}" class="img" bindchange="onSwiperChange">
+        <swiper autoplay="{{true}}" interval="{{3000}}" circular duration="{{500}}" class="img" bindchange="onSwiperChange">
             <block wx:for="{{imageUrls}}" wx:key="index" wx:for-item="img">
                 <swiper-item class="img">
                     <image src="{{img}}" mode="aspectFill"></image>
@@ -12,8 +12,99 @@
         </swiper>
         <view class="numberbox">{{index}}/{{imageUrls.length}}</view>
     </view>
-    <!-- 民宿信息 -->
-    <view class="Legendary-Information">
 
+    <view class="card">
+        <view class="Legendary-Information">
+            <view class="info-name">
+                <view class="name-tex">剑仙居民宿</view>
+                <image class="name-pic" src="https://file-cloud.fmode.cn/EbxZUK5lBI/20241121/2gcp1e030048570.png"></image>
+            </view>
+            <view class="info-intr">剑仙居民宿描述剑仙居民宿描述剑仙居民宿描述剑仙居民宿描述剑仙居民宿描述剑仙居民宿描述剑仙居民宿描述剑仙居民宿描述剑仙居民宿描述剑仙居民宿描述</view>
+            <view class="info-map">
+                <view class="map"></view>
+                <view class="info-call">
+                    <image src="https://file-cloud.fmode.cn/EbxZUK5lBI/20241122/n7me1o092906284.png"></image>
+                    <view class="call-tex">联系望仙管家</view>
+                </view>
+            </view>
+        </view>
+        <view class="roomcard">
+            <van-sticky z-index='999' offset-top="{{statusBarHeight+customHeight-5}}">
+                <view class="timebox">
+                    <view class="time">
+                        <view class="time-tex">今天</view>
+                        <view class="time-time">11月11日</view>
+                    </view>
+                    <van-icon name="minus" size='30rpx' custom-style='font-weight: 600;margin-bottom: 4rpx;margin-right: 6rpx;' />
+                    <view class="time">
+                        <view class="time-tex">明天</view>
+                        <view class="time-time">11月12日</view>
+                    </view>
+                    <view class="time_tex2">共1晚</view>
+                </view>
+            </van-sticky>
+            <block wx:for="{{4}}">
+                <view class="room-card">
+                    <view class="room-card1">
+                        <image src="https://file-cloud.fmode.cn/EbxZUK5lBI/20241122/v5nu1u104043606.png"></image>
+                        <view class="room-card-textbox">
+                            <view class="room-card-textbox-titlebox">
+                                <view class="room-card-textbox-title">豪华标准房</view>
+                                <van-icon name="arrow" custom-style='margin-top: 8rpx;' />
+                            </view>
+                            <view class="room-card-textbox-info">
+                                2张1.2米床 2人入住 33㎡ 可吸烟 含早餐 不可取消
+                            </view>
+                            <view class="room-card-textbox-label">
+                                <block wx:for="{{3}}">
+                                    <view class="room-card-textbox-label2">
+                                        首单优惠￥100
+                                    </view>
+                                    <view class="room-card-textbox-label2">
+                                        望仙谷福袋
+                                    </view>
+                                </block>
+
+                            </view>
+                        </view>
+                    </view>
+                    <view class="room-card2">
+                        <view class="price">￥199900</view>
+                        <view class="submit">订</view>
+                    </view>
+                </view>
+                <!-- 无房 -->
+                <view class="room-card" style="opacity: 0.5;">
+                    <view class="room-card1">
+                        <image src="https://file-cloud.fmode.cn/EbxZUK5lBI/20241122/v5nu1u104043606.png"></image>
+                        <view class="room-card-textbox">
+                            <view class="room-card-textbox-titlebox">
+                                <view class="room-card-textbox-title">豪华标准房</view>
+                                <van-icon name="arrow" custom-style='margin-top: 8rpx;' />
+                            </view>
+                            <view class="room-card-textbox-info">
+                                2张1.2米床 2人入住 33㎡ 可吸烟 含早餐 不可取消
+                            </view>
+                            <view class="room-card-textbox-label">
+                                <block wx:for="{{3}}">
+                                    <view class="room-card-textbox-label2">
+                                        首单优惠￥100
+                                    </view>
+                                    <view class="room-card-textbox-label2">
+                                        望仙谷福袋
+                                    </view>
+                                </block>
+
+                            </view>
+                        </view>
+                    </view>
+                    <view class="room-card2">
+                        <view class="no">时段无房</view>
+                    </view>
+                </view>
+            </block>
+
+        </view>
     </view>
-</scroll-view>
+
+</view>