feat(pages) feat 层级样式

pages/groupmeallist/goodDetails/goodDetails.wxml

@@ -1,24 +1,22 @@
 <view class="page_background">
     <topbar slot="head" title="" back-color="" title-color="" />
     <view>
-        
-        <image src="https://dy.shpr.top/welfareGo/groupmeallist/goodDetailbackgroundImg.png" class="imgDiv"></image>
-        <view class="goodTitle">{{comBoObject.productName}}</view>
-    </view>
 
+        <image src="https://dy.shpr.top/welfareGo/groupmeallist/goodDetailbackgroundImg.png" class="imgDiv" mode="widthFix"></image>
 
+    </view>
 
-    <view class="flex-column">
 
 
-        <swiper class='swiper' style="height:1400rpx;" duration="300" bindchange="bindchange">
+    <view class="center flex-column">
+        <view class="goodTitle">{{comBoObject.productName}}</view>
+        <swiper class='swiper' style="min-height:1400rpx;" duration="300" bindchange="bindchange">
             <block wx:for="{{comBoObject.productComboSetsList}}" wx:for-item="item" wx:key="index">
                 <swiper-item class="swiper_item">
                     <!-- 商品提示 是否可重复 -->
-                    <view style="box-shadow: 0px -8px 10px 0px rgba(0,0,0,0.16); width: 98%;margin: 0px auto;height: 1000rpx;">
+                    <view style="box-shadow: 0px -8px 10px 0px rgba(0,0,0,0.16); width: 98%;margin: 0px auto;height: min-1000rpx;margin-left: 12rpx;">
                         <view class="page_center flex-row">
                             <view class="page_center_text">请选择{{item.setsName}} {{item.optionNum}}份
-
                                 <span wx:if="{{item.repeatSelect==0}}">(不可重复)</span>
                                 <span wx:if="{{item.repeatSelect==1}}">(可重复)</span>
 
@@ -31,10 +29,10 @@
                                 </view>
                                 <view class="forGoodDiv_right flex-column">
                                     <view class="forGoodDiv_right_title">{{productList.productName}}</view>
-                                    
+
                                     <view class="flex-row-between-end" style="width: 100%;">
                                         <view style="font-size:32rpx;font-weight:700;"></view>
-                                        <view   wx:if="{{productList.openSpec == 1}}" class="good_spec"  data-idx="{{index}}" data-productlist="{{productList}}" data-childrenindex="{{childrenindex}}" data-setsId=" {{item}}" catchtap="popSpecPannel">选规格</view>
+                                        <view wx:if="{{productList.openSpec == 1}}" class="good_spec" data-idx="{{index}}" data-productlist="{{productList}}" data-childrenindex="{{childrenindex}}" data-setsId=" {{item}}" catchtap="popSpecPannel">选规格</view>
 
                                         <view style="display: flex; flex-flow: row;">
                                             <image wx:if="{{productList.num >0}}" data-idx="{{index}}" data-productlist="{{productList}}" data-childrenindex="{{childrenindex}}" data-setsId=" {{item}}" catchtap="comBoFoodsListReduce" class="shop-cart-price-wrap_add" style="margin-right: 0rpx;" src="/images/groupmeallist/reduce.png"></image>
@@ -79,11 +77,10 @@
             </view> -->
 
         </view>
-        <view class="addCar {{currSpecGoodsSpec.specNameList.length == currSpecGoodsSpec.productSpecList.length?'yes':'no'}}"
-         catchtap="{{currSpecGoodsSpec.specNameList.length == currSpecGoodsSpec.productSpecList.length?'submitCat':''}}">
-           
-        
-        加入购物车</view>
+        <view class="addCar {{currSpecGoodsSpec.specNameList.length == currSpecGoodsSpec.productSpecList.length?'yes':'no'}}" catchtap="{{currSpecGoodsSpec.specNameList.length == currSpecGoodsSpec.productSpecList.length?'submitCat':''}}">
+
+
+            加入购物车</view>
     </view>
 
     <!--选规格弹出框  -->
@@ -107,18 +104,18 @@
                 </view>
                 <!-- 规格循环 -->
                 <view>
-                <block wx:for="{{currSpecGoodsSpec.productSpecList}}" wx:for-item="spec" wx:key="idx">
-                    <view style="margin-top: 39rpx;height: 37px;font-size: 28rpx;font-weight: 400;color: #000000;margin-left: 40rpx;line-height: 37rpx;">
-                        {{spec.specName}}
-                    </view>
-                    <!-- 规格值循环 -->
-                    <view class="flex-row">
-                    <view wx:for="{{spec.specValueList}}" wx:for-item="item" wx:key="specIdx" class=" flex-row  {{item.active? 'active': ''}}" data-speckey="{{spec.specId}}" data-specid="{{item.specId}}" catchtap="comBoselectSpecNode" style="  margin-left: 40rpx;">
-                        <view class="sepc_value {{item.active? 'active': ''}}"> {{item.specValue}}</view>
-                        <!-- <view class="sepc_value">中杯</view> -->
-                    </view>
-                </view>
-                </block>
+                    <block wx:for="{{currSpecGoodsSpec.productSpecList}}" wx:for-item="spec" wx:key="idx">
+                        <view style="margin-top: 39rpx;height: 37px;font-size: 28rpx;font-weight: 400;color: #000000;margin-left: 40rpx;line-height: 37rpx;">
+                            {{spec.specName}}
+                        </view>
+                        <!-- 规格值循环 -->
+                        <view class="flex-row">
+                            <view wx:for="{{spec.specValueList}}" wx:for-item="item" wx:key="specIdx" class=" flex-row  {{item.active? 'active': ''}}" data-speckey="{{spec.specId}}" data-specid="{{item.specId}}" catchtap="comBoselectSpecNode" style="  margin-left: 40rpx;">
+                                <view class="sepc_value {{item.active? 'active': ''}}"> {{item.specValue}}</view>
+                                <!-- <view class="sepc_value">中杯</view> -->
+                            </view>
+                        </view>
+                    </block>
                 </view>
             </view>
         </view>

pages/groupmeallist/goodDetails/goodDetails.wxss

@@ -8,10 +8,14 @@
 }
 .imgDiv{
     width: 750rpx;
-    height: 596rpx;
+    /* height: 596rpx; */
     background: rgba(0,0,0,0.00);
 }
 
+.center{
+  position: relative;
+  top: -22px;
+}
 .swiper {
 
   /* width: 100%; */
@@ -22,16 +26,12 @@
     width: 100%;
     height: 64rpx;
     background: #afd250;
-    box-shadow: 0px -8px 10px 0px rgba(0,0,0,0.16);
+    box-shadow: 0px -8px 10px 0px rgba(0,0,0,0.46);
     border-radius: 15rpx 15rpx 0rpx 0rpx;
     justify-content: center;
     align-items: center;
-    margin-bottom: 45rpx;
-    margin-top: -40rpx;
-
-   
-
-
+    /* margin-bottom: 45rpx;
+    margin-top: -40rpx; */
 }
 .page_center_text{
     /* width: 253px;
@@ -40,7 +40,7 @@
     font-weight: 400;
     text-align: center;
     color: #ffffff;
-    margin-top: 50rpx;
+    /* margin-top: 50rpx; */
 }
 .goodTitle{
     /* width: 216px; */
@@ -50,9 +50,10 @@
     font-weight: 700;
     text-align: center;
     color: white;
-    position: fixed;
+    position: absolute;
     left: 16rpx;
-    margin-top: -110rpx;
+    top: -70rpx;
+    /* margin-top: -110rpx; */
     z-index: 100;
 }
 .forGoodDiv{
@@ -60,6 +61,7 @@
     /* border: 1px black solid; */
   
     height: 160rpx;
+    margin-top: 45rpx;
 }
 .forGoodDiv_img{
         width: 160rpx;