collect-detail page

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

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

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

@@ -3,6 +3,7 @@
     width: 100vw;
     overflow-y: scroll;
     position: relative;
+    background-color: #EEEEEE;
     .picturebox{
         width: 100%;
         height: 500rpx;
@@ -33,56 +34,127 @@
         }
 
     }
-    .infobox{
+    .box{
         width: 100%;
         height: auto;
+        background-color: #EEEEEE;
         position: absolute;
-        top: 498rpx;
+        top: 490rpx;
         left: 0;
-        padding: 40rpx;
-        border-top-left-radius: 20rpx;
-        border-top-right-radius: 20rpx;
-        background-color: white;
-        .title{
+        .infobox{
             width: 100%;
-            height: 90rpx;
-            font-size: 30rpx;
-
-        }
-        .lebalbox{
-            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;
+                }
+            }
+            .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;
+                }
+            }
+            .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;
+                }
             }
         }
-        .carbox{
+        .tipbox{
             width: 100%;
-            height: 60rpx;
-            display: flex;
-            margin-top: 10rpx;
-            display:flex ;
-            align-items: center;
-            image{
-                width: 48rpx;
-                height: 40rpx;
-            }
-            .car-tex{
+            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;
-                color: #F8BB7F;
-                margin-left: 10rpx;
+                .dinggou-tex{
+                    margin-left: 20rpx;
+                    margin-top: 10rpx;
+                }
             }
         }
     }
+
 }

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

@@ -11,16 +11,43 @@
             </block>
         </swiper>
     </view>
-    <view class="infobox">
-        <view class="title">粉黛胖挑主人杯(无礼盒)·手做 粉黛胖挑主人杯(无礼盒)·手做</view>
-        <view class="lebalbox">
-            <block wx:for="{{2}}">
-                <view class="lebal">热销好物</view>
-            </block>
+    <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="carbox">
-            <image src="https://file-cloud.fmode.cn/EbxZUK5lBI/20241127/3i680f113841258.png"></image>
-            <view class="car-tex">48小时内发货</view>
+        <view class="tipbox">
+            <view class="dinggou">
+                <view class="dinggou-title">订购须知</view>
+                <view class="dinggou-tex">1.订购须知订购须知订购须知订购须知订购须知订购须知订购须知订购须知订购须知订购须知订购须知</view>
+            </view>
         </view>
+
     </view>
+
 </view>