tuihuan page

nova-tourism/components/homestay/index.less

@@ -85,108 +85,124 @@
         padding-left: 3%;
         padding-right: 3%;
         padding-bottom: 40rpx;
-        column-count: 2; /* 设置列数 */
-        column-gap: 20rpx; /* 设置列间距 */
-        .picbox {
-            height: 280rpx;
-            background-image: url('https://file-cloud.fmode.cn/EbxZUK5lBI/20241121/01atf5032703958.png?imageView2/1/w/200/h/200');
-            margin-top: 20rpx;
-            margin-bottom: 20rpx;
-            break-inside: avoid;
-            .pic-2{
-                width: 100%;
-                height: 56rpx;
-            }
-            .pic-1{
-                width: 100%;
-                height: 66rpx;
-                padding-left: 126rpx;
-                margin-top: 4rpx;
-                .pic-1tex{
-                    font-size: 26rpx;
-                }
-                .pic-1tex2{
-                    font-size: 20rpx;
+        display: flex;
+        flex-wrap: wrap; /* 允许换行 */
+        gap: 20rpx; /* 设置间距 */
+
+        .container {
+            display: flex; /* 使用 Flexbox 布局 */
+            flex-direction: column; /* 垂直排列 */
+            width: calc(50% - 10rpx); /* 计算宽度，考虑间距 */
+            margin-bottom: 20rpx; /* 设置底部间距 */
+            .picbox {
+                height: 280rpx;
+                width: 100%; /* 根据需要调整宽度 */
+                background-image: url('https://file-cloud.fmode.cn/EbxZUK5lBI/20241121/01atf5032703958.png?imageView2/1/w/200/h/200');
+                margin-top: 20rpx;
+                margin-bottom: 20rpx;
+                break-inside: avoid;
+                float: left;
+                .pic-2{
+                    width: 100%;
+                    height: 56rpx;
                 }
-            }
-        }
-        .cardbox {
-            break-inside: avoid; /* 防止卡片在列之间断裂 */
-            margin-bottom: 20rpx; /* 设置卡片底部间距 */
-            width: 100%; /* 确保卡片宽度为100% */
-            height: auto;
-            background-color: #F9F9F9;
-            .pic{
-                width: 100%;
-                height: 275rpx;
-            }
-            .textobx{
-                width: 100%;
-                height: auto;
-                padding-top: 10rpx;
-                padding-left: 20rpx;
-                padding-right: 20rpx;
-                .title{
+                .pic-1{
                     width: 100%;
-                    height: 50rpx;
-                    display: flex;
-                    align-items: center;
-                    .til{
-                        font-size: 30rpx;
-                        font-weight: 600;
+                    height: 66rpx;
+                    padding-left: 126rpx;
+                    margin-top: 4rpx;
+                    .pic-1tex{
+                        font-size: 26rpx;
                     }
-                    .collect{
-                        width: 50rpx;
-                        height: 50rpx;
-                        margin-left: auto;
+                    .pic-1tex2{
+                        font-size: 20rpx;
                     }
                 }
-                .miaosu{
-                    width: 100%;
-                    height: 80rpx; /* 设置固定高度 */
-                    font-size: 28rpx;
-                    overflow: hidden; /* 隐藏超出部分 */
-                    display: -webkit-box; /* 使用弹性盒子布局 */
-                    -webkit-box-orient: vertical; /* 垂直排列 */
-                    -webkit-line-clamp: 2; /* 限制显示的行数，这里设置为3行 */
-                    text-overflow: ellipsis; /* 超出部分显示省略号 */
-                }
-                .miaosu2{
+            }
+            .cardbox {
+                width:100%; /* 计算宽度，考虑间距 */
+                margin-bottom: 20rpx; /* 设置卡片底部间距 */
+                background-color: #F9F9F9;
+                box-sizing: border-box; /* 确保内边距和边框包含在宽度内 */
+                margin-bottom: 20rpx; /* 设置卡片底部间距 */
+                // width: 49%; /* 确保卡片宽度为100% */
+                height: auto;
+                background-color: #F9F9F9;
+                // float: left;
+                .pic{
                     width: 100%;
-                    height: 80rpx;
+                    height: 275rpx;
                 }
-                .bottom{
+                .textobx{
                     width: 100%;
-                    height: 80rpx;
-                    display: flex;
-                    align-items: center;
-                    .qian{
-                        color: #C5262Ced;
+                    height: auto;
+                    padding-top: 10rpx;
+                    padding-left: 20rpx;
+                    padding-right: 20rpx;
+                    .title{
+                        width: 100%;
+                        height: 50rpx;
                         display: flex;
-                        .numbox{
-                            margin-left: 6rpx;
+                        align-items: center;
+                        .til{
+                            font-size: 30rpx;
+                            font-weight: 600;
+                        }
+                        .collect{
+                            width: 50rpx;
+                            height: 50rpx;
+                            margin-left: auto;
                         }
                     }
-                    .soucang{
-                        width: 104rpx;
-                        height: 48rpx;
-                        font-size: 26rpx;
-                        background-color: #343027;
-                        border-radius: 40rpx;
-                        color: white;
-                        margin-left: auto;
+                    .miaosu{
+                        width: 100%;
+                        height: 80rpx; /* 设置固定高度 */
+                        font-size: 28rpx;
+                        overflow: hidden; /* 隐藏超出部分 */
+                        display: -webkit-box; /* 使用弹性盒子布局 */
+                        -webkit-box-orient: vertical; /* 垂直排列 */
+                        -webkit-line-clamp: 2; /* 限制显示的行数，这里设置为3行 */
+                        text-overflow: ellipsis; /* 超出部分显示省略号 */
+                    }
+                    .miaosu2{
+                        width: 100%;
+                        height: 80rpx;
+                    }
+                    .bottom{
+                        width: 100%;
+                        height: 80rpx;
                         display: flex;
-                        justify-content: center;
                         align-items: center;
+                        .qian{
+                            color: #C5262Ced;
+                            display: flex;
+                            .numbox{
+                                margin-left: 6rpx;
+                            }
+                        }
+                        .soucang{
+                            width: 104rpx;
+                            height: 48rpx;
+                            font-size: 26rpx;
+                            background-color: #343027;
+                            border-radius: 40rpx;
+                            color: white;
+                            margin-left: auto;
+                            display: flex;
+                            justify-content: center;
+                            align-items: center;
+                        }
                     }
                 }
             }
         }
 
+
     }
     .bottom{
         width: 100%;
         font-size: 26rpx;
+        margin-bottom: 20rpx;
         display: flex;
         align-items: center;
         justify-content: center;

nova-tourism/components/homestay/index.wxml

@@ -7,7 +7,7 @@
         <!-- 日期 -->
         <view class="infobox">
             <view class="seach">
-                <van-search shape="round" model:value="{{ value }}" placeholder="请输入地点/门店名称/关键词" bind:search="search" bind:change="change"  />
+                <van-search shape="round" model:value="{{ value }}" placeholder="请输入地点/门店名称/关键词" bind:search="search" bind:change="change" />
             </view>
             <view class="datebox" bindtap="onDisplay">
                 <view class="start">{{date_start}}</view>
@@ -21,49 +21,78 @@
     </view>
     <!-- 卡片 -->
     <view class="Legendary-Information" wx:if="{{storeList.length!=0}}">
-        <block wx:for="{{storeList}}">
-            <view class="picbox" wx:if="{{index==1}}">
-                <view class="pic-2"></view>
-                <block wx:for="{{3}}">
-                    <view class="pic-1">
-                        <view class="pic-1tex">望仙乡</view>
-                        <view class="pic-1tex2">35%用户选择</view>
+        <block>
+            <view class="container">
+                <block wx:for="{{storeList}}" wx:if="{{index%2==0}}">
+
+                    <view class="cardbox">
+                        <image class="pic" src="{{item.cover}}" data-id="{{item.objectId}}" data-url="../../pages/homestay/homestay-detail/index" bindtap="gourl"></image>
+                        <view class="textobx">
+                            <view class="title" data-id="{{item.objectId}}" data-url="../../pages/homestay/homestay-detail/index" bindtap="gourl">
+                                <view class="til">{{item.storeName}}</view>
+                                <image class="collect" wx:if="{{!item.iscollect}}" src="https://file-cloud.fmode.cn/EbxZUK5lBI/20241121/2gcp1e030048570.png?imageView2/1/w/200/h/200"></image>
+                                <image class="collect" wx:if="{{item.iscollect}}" src="https://file-cloud.fmode.cn/EbxZUK5lBI/20241121/8mp9uj030058190.png?imageView2/1/w/200/h/200"></image>
+                            </view>
+
+                            <view class="miaosu" wx:if="{{item.desc}}" data-id="{{item.objectId}}" data-url="../../pages/homestay/homestay-detail/index" bindtap="gourl">
+                                {{item.desc}}
+                            </view>
+                            <view class="bottom">
+                                <view class="qian" data-id="{{item.objectId}}" data-url="../../pages/homestay/homestay-detail/index" bindtap="gourl">
+                                    ￥<view class="numbox">{{item.price}}</view>
+                                </view>
+                                <view class="soucang" wx:if="{{!item.iscollect}}" data-id="{{item.objectId}}" bindtap="submit">收藏</view>
+                                <view class="soucang" wx:if="{{item.iscollect}}" data-id="{{item.objectId}}" bindtap="cancle">取消</view>
+                            </view>
+                        </view>
                     </view>
                 </block>
 
             </view>
-            <view class="cardbox">
-                <image class="pic" src="{{item.cover}}" data-id="{{item.objectId}}" data-url="../../pages/homestay/homestay-detail/index" bindtap="gourl"></image>
-                <view class="textobx">
-                    <view class="title" data-id="{{item.objectId}}" data-url="../../pages/homestay/homestay-detail/index" bindtap="gourl">
-                        <view class="til">{{item.storeName}}</view>
-                        <image class="collect" wx:if="{{!item.iscollect}}" src="https://file-cloud.fmode.cn/EbxZUK5lBI/20241121/2gcp1e030048570.png?imageView2/1/w/200/h/200"></image>
-                        <image class="collect" wx:if="{{item.iscollect}}" src="https://file-cloud.fmode.cn/EbxZUK5lBI/20241121/8mp9uj030058190.png?imageView2/1/w/200/h/200"></image>
-                    </view>
+            <view class="container">
+                <block wx:for="{{storeList}}" wx:if="{{index%2==1}}">
+                    <block wx:if="{{index == 3}}">
+                        <view class="picbox">
+                            <view class="pic-2"></view>
+                            <block wx:for="{{3}}">
+                                <view class="pic-1">
+                                    <view class="pic-1tex">望仙乡</view>
+                                    <view class="pic-1tex2">35%用户选择</view>
+                                </view>
+                            </block>
+                        </view>
+                    </block>
+                    <view class="cardbox">
+                        <image class="pic" src="{{item.cover}}" data-id="{{item.objectId}}" data-url="../../pages/homestay/homestay-detail/index" bindtap="gourl"></image>
+                        <view class="textobx">
+                            <view class="title" data-id="{{item.objectId}}" data-url="../../pages/homestay/homestay-detail/index" bindtap="gourl">
+                                <view class="til">{{item.storeName}}</view>
+                                <image class="collect" wx:if="{{!item.iscollect}}" src="https://file-cloud.fmode.cn/EbxZUK5lBI/20241121/2gcp1e030048570.png?imageView2/1/w/200/h/200"></image>
+                                <image class="collect" wx:if="{{item.iscollect}}" src="https://file-cloud.fmode.cn/EbxZUK5lBI/20241121/8mp9uj030058190.png?imageView2/1/w/200/h/200"></image>
+                            </view>
 
-                    <view class="miaosu" wx:if="{{item.desc}}" data-id="{{item.objectId}}" data-url="../../pages/homestay/homestay-detail/index" bindtap="gourl">
-                        {{item.desc}}
-                    </view>
-                    <!-- <view class="miaosu2" wx:if="{{!item.desc}}"></view> -->
-                    <view class="bottom">
-                        <view class="qian" data-id="{{item.objectId}}" data-url="../../pages/homestay/homestay-detail/index" bindtap="gourl">
-                            ￥
-                            <view class="numbox">
-                                {{item.price}}
+                            <view class="miaosu" wx:if="{{item.desc}}" data-id="{{item.objectId}}" data-url="../../pages/homestay/homestay-detail/index" bindtap="gourl">
+                                {{item.desc}}
+                            </view>
+                            <view class="bottom">
+                                <view class="qian" data-id="{{item.objectId}}" data-url="../../pages/homestay/homestay-detail/index" bindtap="gourl">
+                                    ￥<view class="numbox">{{item.price}}</view>
+                                </view>
+                                <view class="soucang" wx:if="{{!item.iscollect}}" data-id="{{item.objectId}}" bindtap="submit">收藏</view>
+                                <view class="soucang" wx:if="{{item.iscollect}}" data-id="{{item.objectId}}" bindtap="cancle">取消</view>
                             </view>
                         </view>
-                        <view class="soucang" wx:if="{{!item.iscollect}}" data-id="{{item.objectId}}" bindtap="submit" >收藏</view>
-                        <view class="soucang" wx:if="{{item.iscollect}}" data-id="{{item.objectId}}" bindtap="cancle" >取消</view>
                     </view>
-                </view>
+                </block>
+
             </view>
         </block>
     </view>
     <view class="bottom" wx:if="{{noMoreItems}}">没有更多民宿了...</view>
     <!-- 无搜索内容 -->
     <view class="Legendary-Information2" wx:if="{{storeList.length==0}}">
-        <van-empty wx:if="{{storeList.length==0}}"  image="network" description="暂无该店铺" />
+        <van-empty wx:if="{{storeList.length==0}}" image="network" description="暂无该店铺" />
     </view>
-    
+
 
 </scroll-view>