样式调整

src/Components/index/ShopCard.vue

@@ -159,6 +159,7 @@ const topFoodDetails = (id) => {
           margin-top: 10rpx;
           display: flex;
           align-items: center;
+          flex-wrap: wrap;
           view {
             margin-right: 8rpx;
             display: inline-block;
@@ -168,6 +169,8 @@ const topFoodDetails = (id) => {
             font-size: 18rpx;
             color: #767676;
             background: linear-gradient(90deg, #fcdbdb 0%, rgba(255, 255, 255, 0) 98%);
+            margin-bottom: 5rpx;
+            flex-shrink: 0;
           }
         }
       }

src/pages/index/listFood.vue

@@ -7,7 +7,7 @@
       :title="title"
       :showTitle="true"
     ></search>
-    <view class="head">
+    <!-- <view class="head"> -->
     <view class="top" :style="{ backgroundImage: topBg }"></view>
     <view class="bootom" :style="{ top }">
       <view class="bootom-top">
@@ -64,7 +64,7 @@
       <!-- 排序筛选 -->
       <Sort v-show="rotate3" @sortParams="sortParams" />
     </view>
-    </view>
+    <!-- </view> -->
     <FoodDetails :cardData="cardData" />
     <wd-status-tip image="content" tip="暂无内容" v-if="cardData.length === 0" />
     <view
@@ -282,11 +282,11 @@ onPullDownRefresh(() => {
 page {
   background: #f3f3f3;
 }
-.head {
-  width: 100%;
-  margin-bottom: 10rpx;
-  // height: 480rpx;
-  .top {
+// .head {
+//   width: 100%;
+//   margin-bottom: 10rpx;
+// height: 480rpx;
+.top {
   height: 356rpx;
   // background: url('../../static/index/taste.png');
   background-size: 100% 100%;
@@ -296,8 +296,8 @@ page {
     margin-left: 40rpx;
     color: white;
   }
-  }
-  .bootom {
+}
+.bootom {
   // height: 124rpx;
   height: 80rpx;
   display: flex;
@@ -306,6 +306,9 @@ page {
   border-radius: 6rpx;
   background: #ffffff;
   position: sticky;
+  margin-bottom: 10rpx;
+  z-index: 9999;
+  // top: 100px;
   .bootom-top {
     display: flex;
     align-items: center;
@@ -351,6 +354,6 @@ page {
       background: #ffdcbb;
     }
   }
-  }
 }
+// }
 </style>