collect-detail page

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

@@ -1,161 +1,244 @@
 /* nova-tourism/pages/collect/collect-detail/index.wxss */
-.all{
-    width: 100vw;
-    overflow-y: scroll;
+.bax{
+    width: 100%;
     position: relative;
-    background-color: #EEEEEE;
-    .picturebox{
-        width: 100%;
-        height: 500rpx;
+    .all{
+        width: 100vw;
+        overflow-y: scroll;
         position: relative;
-        .img{
+        background-color: #EEEEEE;
+        .picturebox{
             width: 100%;
             height: 500rpx;
-            image{
+            position: relative;
+            .img{
                 width: 100%;
-                height: 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);
+            }
+    
         }
-        .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);
-        }
-
-    }
-    .box{
-        width: 100%;
-        height: auto;
-        background-color: #EEEEEE;
-        position: absolute;
-        top: 490rpx;
-        left: 0;
-        border-radius: 20rpx;
-        .infobox{
+        .box{
             width: 100%;
             height: auto;
-            padding: 40rpx;
+            background-color: #EEEEEE;
+            position: absolute;
+            top: 490rpx;
+            left: 0;
             border-radius: 20rpx;
-            background-color: white;
-            .title{
-                width: 100%;
-                height: 90rpx;
-                font-size: 30rpx;
-    
-            }
-            .lebalbox{
+            .infobox{
                 width: 100%;
-                height: 60rpx;
-                display: flex;
-                margin-top: 10rpx;
-                .lebal{
+                height: auto;
+                padding: 40rpx;
+                border-radius: 20rpx;
+                background-color: white;
+                .title{
+                    width: 100%;
+                    height: 90rpx;
                     font-size: 30rpx;
-                    border-radius: 15rpx;
-                    padding-left: 20rpx;
-                    padding-right: 20rpx;
-                    background-color: #FBF5E1;
-                    color: #F8BB7F;
-                    margin-right: 20rpx;
+        
+                }
+                .lebalbox{
+                    width: 100%;
+                    height: 60rpx;
                     display: flex;
-                    justify-content: center;
+                    margin-top: 10rpx;
+                    .lebal{
+                        font-size: 30rpx;
+                        border-radius: 15rpx;
+                        padding-left: 20rpx;
+                        padding-right: 20rpx;
+                        background-color: #FBF5E1;
+                        color: #F8BB7F;
+                        margin-right: 20rpx;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                    }
+                }
+                .carbox{
+                    width: 100%;
+                    height: 60rpx;
+                    margin-top: 20rpx;
+                    display:flex ;
                     align-items: center;
+                    image{
+                        width: 48rpx;
+                        height: 40rpx;
+                    }
+                    .car-tex{
+                        font-size: 28rpx;
+                        color: #F8BB7F;
+                        margin-left: 10rpx;
+                    }
                 }
-            }
-            .carbox{
-                width: 100%;
-                height: 60rpx;
-                margin-top: 20rpx;
-                display:flex ;
-                align-items: center;
-                image{
-                    width: 48rpx;
-                    height: 40rpx;
+                .carbox2{
+                    width: 100%;
+                    margin-top: 20rpx;
+                    display:flex ;
+                    align-items: center;
+                    border-bottom: solid 2rpx #EEEEEE;
+                    padding-bottom: 20rpx;
+                    image{
+                        width: 45rpx;
+                        height: 45rpx;
+                    }
+                    .car-tex{
+                        font-size: 28rpx;
+                        // color: #F8BB7F;
+                        margin-left: 10rpx;
+                    }
                 }
-                .car-tex{
-                    font-size: 28rpx;
-                    color: #F8BB7F;
-                    margin-left: 10rpx;
+                .carbox3{
+                    width: 100%;
+                    margin-top: 20rpx;
+                    display:flex ;
+                    
+                    image{
+                        width: 45rpx;
+                        height: 45rpx;
+                    }
+                    .carbox3-tex{
+                        font-size:28rpx ;
+                        margin-left: 10rpx;
+                        .carbox3-tex2{
+                            margin-top: 10rpx;
+                        }
+                    }
+                }
+                .carbox4{
+                    width: 100%;
+                    margin-top: 20rpx;
+                    display:flex ;
+                    align-items: center;
+                    image{
+                        width: 45rpx;
+                        height: 45rpx;
+                    }
+                    .car-tex{
+                        font-size: 28rpx;
+                        // color: #F8BB7F;
+                        margin-left: 10rpx;
+                    }
                 }
             }
-            .carbox2{
+            .tipbox{
                 width: 100%;
+                height: auto;
                 margin-top: 20rpx;
-                display:flex ;
-                align-items: center;
-                border-bottom: solid 2rpx #EEEEEE;
-                padding-bottom: 20rpx;
-                image{
-                    width: 45rpx;
-                    height: 45rpx;
-                }
-                .car-tex{
+                padding-top: 20rpx;
+                padding-left: 30rpx;
+                padding-right: 30rpx;
+                background-color: white;
+                border-radius: 20rpx;
+                font-size: 28rpx;
+                .dinggou{
+                    width: 100%;
                     font-size: 28rpx;
-                    // color: #F8BB7F;
-                    margin-left: 10rpx;
+                    .dinggou-tex{
+                        margin-left: 20rpx;
+                        margin-top: 10rpx;
+                    }
+                }
+                .picbox{
+                    width: 100%;
+                    margin-top: 20rpx;
+                    margin-bottom: 60rpx;
+                    image{
+                        width: 100%;
+                        height: 500rpx;
+                    }
                 }
             }
-            .carbox3{
+            .tipbox2{
                 width: 100%;
+                height: auto;
                 margin-top: 20rpx;
-                display:flex ;
-                
-                image{
-                    width: 45rpx;
-                    height: 45rpx;
-                }
-                .carbox3-tex{
-                    font-size:28rpx ;
-                    margin-left: 10rpx;
-                    .carbox3-tex2{
+                padding-top: 20rpx;
+                padding-left: 30rpx;
+                padding-right: 30rpx;
+                background-color: white;
+                border-radius: 20rpx;
+                font-size: 28rpx;
+                padding-bottom: 110rpx;
+                .dinggou{
+                    width: 100%;
+                    font-size: 28rpx;
+                    .dinggou-tex{
+                        margin-left: 20rpx;
                         margin-top: 10rpx;
                     }
                 }
-            }
-            .carbox4{
-                width: 100%;
-                margin-top: 20rpx;
-                display:flex ;
-                align-items: center;
                 image{
-                    width: 45rpx;
-                    height: 45rpx;
+                    width: 100%;
+                    height: 400rpx;
+                    margin-top: 20rpx;
+                    margin-bottom: 20rpx;
                 }
-                .car-tex{
-                    font-size: 28rpx;
-                    // color: #F8BB7F;
-                    margin-left: 10rpx;
+                .tip2-tex{
+                    display: flex;
+                    justify-content: flex-end;
                 }
             }
+    
+        }
+
+    }
+    .paybox{
+        width: 100%;
+        height: 90rpx;
+        padding-left: 40rpx;
+        display: flex;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        background-color: white;
+        .pay1{
+            width: 30%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            image{
+                width: 50rpx;
+                height: 50rpx;
+            }
+            .pay1-tex{
+                font-size: 30rpx;
+                margin-left: 30rpx;
+            }
         }
-        .tipbox{
-            width: 100%;
-            height: auto;
-            margin-top: 20rpx;
-            padding-top: 20rpx;
-            padding-left: 30rpx;
-            padding-right: 30rpx;
-            background-color: white;
-            border-radius: 20rpx;
-            .dinggou{
-                width: 100%;
-                font-size: 28rpx;
-                .dinggou-tex{
-                    margin-left: 20rpx;
-                    margin-top: 10rpx;
-                }
+        .pay2{
+            width: 70%;
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-size: 30rpx;
+            color: white;
+            background-color: #F89B7F;
+            .pay2-tex2{
+                margin-left: 10rpx;
             }
         }
     }
 
-}
+}

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

@@ -1,53 +1,84 @@
 <!--nova-tourism/pages/collect/collect-detail/index.wxml-->
 <nav type="back" background-color="#ffffff" frontColor="#000000" title="商品详细" />
-<view class="all" style="height: {{contentHeight}}rpx;">
-    <!-- 轮播图 -->
-    <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="box">
-        <view class="infobox">
-            <view class="title">粉黛胖挑主人杯(无礼盒)·手做 粉黛胖挑主人杯(无礼盒)·手做</view>
-            <view class="lebalbox">
-                <block wx:for="{{2}}">
-                    <view class="lebal">热销好物</view>
+<view class="bax" style="height: {{contentHeight}}rpx;" >
+    <view class="all" style="height: {{contentHeight}}rpx;">
+        <!-- 轮播图 -->
+        <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>
-            </view>
-            <view class="carbox">
-                <image src="https://file-cloud.fmode.cn/EbxZUK5lBI/20241127/3i680f113841258.png"></image>
-                <view class="car-tex">48小时内发货</view>
-            </view>
-            <view class="carbox2">
-                <image src="https://file-cloud.fmode.cn/EbxZUK5lBI/20241127/r801qv113859250.png"></image>
-                <view class="car-tex">紫色经典款</view>
-                <van-icon name="arrow" size='15' style="margin-left: auto;" />
-            </view>
-            <view class="carbox3">
-                <image src="https://file-cloud.fmode.cn/EbxZUK5lBI/20241127/asia61113937543.png"></image>
-                <view class="carbox3-tex">
-                    <view class="carbox3-tex1">陶瓷工艺</view>
-                    <view class="carbox3-tex2">直径5cm高7cm</view>
+            </swiper>
+        </view>
+        <view class="box">
+            <view class="infobox">
+                <view class="title">粉黛胖挑主人杯(无礼盒)·手做 粉黛胖挑主人杯(无礼盒)·手做</view>
+                <view class="lebalbox">
+                    <block wx:for="{{2}}">
+                        <view class="lebal">热销好物</view>
+                    </block>
+                </view>
+                <view class="carbox">
+                    <image src="https://file-cloud.fmode.cn/EbxZUK5lBI/20241127/3i680f113841258.png"></image>
+                    <view class="car-tex">48小时内发货</view>
+                </view>
+                <view class="carbox2">
+                    <image src="https://file-cloud.fmode.cn/EbxZUK5lBI/20241127/r801qv113859250.png"></image>
+                    <view class="car-tex">紫色经典款</view>
+                    <van-icon name="arrow" size='15' style="margin-left: auto;" />
+                </view>
+                <view class="carbox3">
+                    <image src="https://file-cloud.fmode.cn/EbxZUK5lBI/20241127/asia61113937543.png"></image>
+                    <view class="carbox3-tex">
+                        <view class="carbox3-tex1">陶瓷工艺</view>
+                        <view class="carbox3-tex2">直径5cm高7cm</view>
+                    </view>
+                </view>
+                <view class="carbox4">
+                    <image src="https://file-cloud.fmode.cn/EbxZUK5lBI/20241127/r801qv113859250.png"></image>
+                    <view class="car-tex">确认收货地址</view>
+                    <van-icon name="arrow" size='15' style="margin-left: auto;" />
                 </view>
             </view>
-            <view class="carbox4">
-                <image src="https://file-cloud.fmode.cn/EbxZUK5lBI/20241127/r801qv113859250.png"></image>
-                <view class="car-tex">确认收货地址</view>
-                <van-icon name="arrow" size='15' style="margin-left: auto;" />
+            <view class="tipbox">
+                <view class="dinggou">
+                    <view class="dinggou-title">订购须知</view>
+                    <view class="dinggou-tex">1.订购须知订购须知订购须知订购须知订购须知订购须知订购须知订购须知订购须知订购须知订购须知</view>
+                </view>
+                <view class="picbox">
+                    <block wx:for="{{4}}">
+                        <image src="https://file-cloud.fmode.cn/EbxZUK5lBI/20241121/jc17lo114657420.jpg"></image>
+                    </block>
+                </view>
+                <view class="dinggou">
+                    <view class="dinggou-title">售后须知</view>
+                    <view class="dinggou-tex">1.售后须知售后须知售后须知售后须知售后须知售后须知售后须知售后须知</view>
+                </view>
             </view>
-        </view>
-        <view class="tipbox">
-            <view class="dinggou">
-                <view class="dinggou-title">订购须知</view>
-                <view class="dinggou-tex">1.订购须知订购须知订购须知订购须知订购须知订购须知订购须知订购须知订购须知订购须知订购须知</view>
+            <view class="tipbox2">
+                <view class="dinggou">
+                    <view class="dinggou-title">关于云上望仙</view>
+                    <view class="dinggou-tex">1.关于云上望仙关于云上望仙关于云上望仙关于云上望仙关于云上望仙关于云上望仙关于云上望仙</view>
+                </view>
+                <image src="https://file-cloud.fmode.cn/EbxZUK5lBI/20241121/jc17lo114657420.jpg"></image>
+                <view>log</view>
+                <view class="tip2-tex">公众号 抖音号 小红书</view>
             </view>
         </view>
+    </view>
 
+    <!-- 按钮 -->
+    <view class="paybox">
+        <view class="pay1">
+            <image src="https://file-cloud.fmode.cn/EbxZUK5lBI/20241121/m1rt69104425214.png?imageView2/1/w/200/h/200"></image>
+            <view class="pay1-tex">首页</view>
+        </view>
+        <view class="pay2">
+            <view class="pay2-tex">优惠100</view>
+            <view class="pay2-tex2">实付款￥19899.00</view>
+        </view>
     </view>
 
 </view>