collect page

nova-tourism/components/collect/index.js

@@ -20,6 +20,28 @@ Component({
         contentHeight: 0,
 
         active: 0,
+
+        taps: [{
+                url: 'https://file-cloud.fmode.cn/EbxZUK5lBI/20241126/511ua1025435972.png',
+                tex: '望仙礼遇',
+            },
+            {
+                url: 'https://file-cloud.fmode.cn/EbxZUK5lBI/20241126/opk1db025446786.png',
+                tex: '妆造旅拍',
+            },
+            {
+                url: 'https://file-cloud.fmode.cn/EbxZUK5lBI/20241126/f12978025423947.png',
+                tex: '望仙果蔬',
+            },
+            {
+                url: 'https://file-cloud.fmode.cn/EbxZUK5lBI/20241126/365p16025500910.png',
+                tex: '房务服务',
+            },
+        ],
+        imageUrls: ['https://file-cloud.fmode.cn//tmp/srFPqGFAzeT5958c828d985e451ed4c0b452e39ff57a.jpeg',
+            'https://file-cloud.fmode.cn//tmp/P7YTTX6XuEZC607368e1f9745abc429c7c25cbef4c5a.jpeg',
+            'https://file-cloud.fmode.cn/EbxZUK5lBI/20241121/jc17lo114657420.jpg'
+        ]
     },
     lifetimes: {
         detached: function () {},

nova-tourism/components/collect/index.less

@@ -2,10 +2,162 @@
 .all{
     width: 100vw;
     overflow-y: scroll;
-    .img{
+    padding-bottom: 30rpx;
+    .img2{
         width: 100%;
         height: 430rpx;
     }
+    //云上风物
+    .box{
+        width: 100%;
+        padding-left: 30rpx;
+        padding-right: 30rpx;
+        padding-top: 20rpx;
+        .taps{
+            width: 100%;
+            height: 220rpx;
+            display: flex;
+            justify-content: space-around;
+            border-bottom: solid 4rpx #99B6A0;
+            .tap{
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                flex-direction: column;
+                image{
+                    width: 100rpx;
+                    height: 100rpx;
+                    border-radius: 50%;
+                }
+                .tap-tex{
+                    font-size: 26rpx;
+                    margin-top: 20rpx;
+                    color: #969696 ;
+                }
+            }
+        }
+        .box-tex{
+            font-size: 32rpx;
+            color: #67806A;
+            margin-top: 10rpx;
+            margin-bottom: 20rpx;
+        }
+        .picturebox{
+            width: 100%;
+            height: 500rpx;
+            position: relative;
+            .img{
+                width: 100%;
+                height: 500rpx;
+                image{
+                    width: 100%;
+                    height: 100%;
+    
+                }
+            }
+            .numberbox{
+                position: absolute;
+                bottom: 40rpx;
+                right: 20rpx;
+                border-radius: 45%;
+                z-index: 10;
+                color: white;
+                width: 70rpx;
+                height: 45rpx;
+                font-size: 24rpx;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                background-color: rgba(12, 12, 12, 0.5);
+            }
+    
+        }
+        .wangbox{
+            width: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            margin-top: 40rpx;
+            margin-bottom: 20rpx;
+            .wang{
+                width: 200rpx;
+                height: 60rpx;
+                font-size: 32rpx;
+                color: #67806A;
+                background-image: url(https://file-cloud.fmode.cn/EbxZUK5lBI/20241126/dm1jj2032446503.png?imageView2/1/w/200/h/200);
+                background-position: center; /* 背景图片居中 */
+                // background-size: cover; /* 背景图片覆盖整个元素 */
+                background-repeat: no-repeat; /* 不重复背景图片 */
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
+            .wang2{
+                font-size: 28rpx;
+                color: #969696;
+            }
+        }
+        .wang-cardbox{
+            margin-top: 40rpx;
+            width: 100%;
+            background-color: white;
+            overflow-y: hidden;
+            padding-left: 3%;
+            padding-right: 3%;
+            padding-bottom: 40rpx;
+            column-count: 2; /* 设置列数 */
+            column-gap: 20rpx; /* 设置列间距 */
+            .wang-card{
+                break-inside: avoid; /* 防止卡片在列之间断裂 */
+                margin-bottom: 20rpx; /* 设置卡片底部间距 */
+                width: 100%; /* 确保卡片宽度为100% */
+                
+                image{
+                    width: 100%;
+                    height: 275rpx;
+                    border-radius: 15rpx;
+                }
+                .wang-catex{
+                    font-size: 28rpx;
+                }
+                .wang-numbox{
+                    width: 100%;
+                    height: 80rpx;
+                    display: flex;
+                    align-items: center;
+                    .wang-num{
+                        display: flex;
+                        justify-content: flex-end;
+                        align-items: flex-end;
+                        color: #C5262Ced;
+                        font-size: 30rpx;
+                        .wang-num1{
+                            font-size: 32rpx;
+                        }
+                        .wang-num2{
+                            font-size: 36rpx;
+                        }
+                    }
+                    .wang-submit{
+                        width: 100rpx;
+                        height: 50rpx;
+                        font-size: 30rpx;
+                        color: white;
+                        background-color: #F8DA7F;
+                        border-radius: 40rpx;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        margin-left: auto;
+                    }
+                }
+            }
+        }
+    }
+
+
+    //我的收藏
     .Legendary-Information{
         margin-top: 40rpx;
         width: 100%;

nova-tourism/components/collect/index.wxml

@@ -1,9 +1,59 @@
 <!--nova-tourism/components/collect/index.wxml-->
 <nav type="title" background-color="#ffffff" frontColor="#000000" title="望仙谷" />
 <view class="all" style="height: {{contentHeight}}rpx;">
-    <image class="img" src="https://file-cloud.fmode.cn/EbxZUK5lBI/20241121/jc17lo114657420.jpg"></image>
+    <image class="img2" src="https://file-cloud.fmode.cn/EbxZUK5lBI/20241121/jc17lo114657420.jpg"></image>
     <van-tabs active="{{ active }}" color='#B2CEB9' title-inactive-color='#969696' title-active-color='#B2CEB9'>
         <van-tab title="云上风物">
+            <view class="box">
+                <view class="taps">
+                    <block wx:for="{{taps}}">
+                        <view class="tap">
+                            <image src="{{item.url}}"></image>
+                            <view class="tap-tex">{{item.tex}}</view>
+                        </view>
+                    </block>
+                </view>
+                <view class="box-tex">热门推荐</view>
+                <view class="picturebox">
+                    <swiper autoplay="{{true}}" indicator-dots='{{true}}' indicator-color='#D9D9D9' indicator-active-color='#F8DA7F' 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>
+                            </swiper-item>
+                        </block>
+                    </swiper>
+                </view>
+                <!-- 望仙礼遇 -->
+                <view class="wangbox">
+                    <view class="wang">望仙礼遇</view>
+                    <view class="wang2">望日w望月w来望仙w</view>
+                </view>
+                <view class="picturebox">
+                    <swiper autoplay="{{true}}" indicator-dots='{{true}}' indicator-color='#D9D9D9' indicator-active-color='#F8DA7F' 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>
+                            </swiper-item>
+                        </block>
+                    </swiper>
+                </view>
+
+                <view class="wang-cardbox">
+                    <block wx:for="{{4}}">
+                        <view class="wang-card">
+                            <image src="https://file-cloud.fmode.cn//tmp/srFPqGFAzeT5958c828d985e451ed4c0b452e39ff57a.jpeg"></image>
+                            <view class="wang-catex">粉黛胖挑主人杯(无礼盒)·手做</view>
+                            <view class="wang-numbox">
+                                <view class="wang-num">
+                                    <view class="wang-num1">￥</view>
+                                    <view class="wang-num2">19900</view>
+                                </view>
+                                <view class="wang-submit">购买</view>
+                            </view>
+                        </view>
+                    </block>
+                </view>
+            </view>
 
         </van-tab>
         <!-- 我的收藏 -->