feat: 列表页头部fixed样式修改

src/components/dropdown/dropdown.vue

@@ -164,8 +164,7 @@ export default {
   },
   computed: {
     popupBox() {
-      return `top : ${this.top + "rpx"};
-				border-radius: 0 0  ${this.radius} ${this.radius};`;
+      return `border-radius: 0 0  ${this.radius} ${this.radius};`;
     },
     scrollPopup() {
       return `opacity: ${this.isShow ? 1 : 0};`;
@@ -305,10 +304,10 @@ export default {
 .popup-box {
   width: 100%;
   height: auto;
-  position: fixed;
+  position: relative;
   overflow: hidden;
   background-color: #ffffff;
-  z-index: 99999 !important;
+  z-index: 5001;
 
   .scroll-popup {
     width: 100%;
@@ -385,7 +384,7 @@ export default {
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.8);
-  z-index: 99998 !important;
+  z-index: 5000 !important;
   overflow: hidden;
 }
 </style>

src/pages/entryPark/index.vue

 <!-- 走进园区 -->
 <template>
   <view class="container">
-    <view class="tab_bar">
-      <view
-        class="tab_item"
-        :class="{ active: activeBar === index }"
-        @click="changeTab(index)"
-        v-for="(tab, index) in tabBarList"
-        :key="index"
-      >
-        <p>{{ tab }}</p>
-        <span class="line" v-if="activeBar === index"></span>
+    <div class="top-cell">
+      <view class="tab_bar relative z-5001">
+        <view
+          class="tab_item"
+          :class="{ active: activeBar === index }"
+          @click="changeTab(index)"
+          v-for="(tab, index) in tabBarList"
+          :key="index"
+        >
+          <p>{{ tab }}</p>
+          <span class="line" v-if="activeBar === index"></span>
+        </view>
       </view>
-    </view>
-    <div
-        class="flex align-center justify-between"
-        style="padding: 25rpx 23rpx;background: #fff;position: fixed;top: 60rpx;width: 100vw "
+      <div
+        class="flex align-center justify-between relative z-5001"
+        style="padding: 25rpx 23rpx;background: #fff;width: 100vw "
       >
         <div class="flex align-center">
           <div class="search-input">
@@ -48,16 +49,16 @@
           </div>
         </div>
       </div>
-    <dropdown-vue
-      ref="dropDown"
-      :menuList="$u.deepClone(menuList[activeBar])"
-      :dataObj="$u.deepClone(filterList[activeBar])"
-      @change="change"
-      themeColor="#4374EF"
-      :top="166"
-    ></dropdown-vue>
-    <div style="height: 246rpx"></div>
-    <div v-if="mode === 'list'">
+      <dropdown-vue
+        ref="dropDown"
+        :menuList="$u.deepClone(menuList[activeBar])"
+        :dataObj="$u.deepClone(filterList[activeBar])"
+        @change="change"
+        themeColor="#4374EF"
+        :top="166"
+      ></dropdown-vue>
+    </div>
+    <template v-if="mode === 'list'">
       <view class="tab-contant">
         <view
           class="media-card"
@@ -92,8 +93,8 @@
         marginTop="120"
       >
       </u-empty>
-    </div>
-    <div v-else>
+    </template>
+    <div v-else class="">
       <map id="mapId" @markertap="handleMarkerClick" @callouttap="handleMarkerClick" :scale='10' style="width: 100%;height: calc(100vh - 246rpx)" latitude="31.464086" longitude="116.944909" class="map" :markers="markers">
       </map>
       <div v-if="activeInfo.id" :key="activeInfo.id" @click="toDetail(activeInfo)" style="position: fixed;padding: 0 30rpx;bottom: 30rpx;width: 100vw;z-index: 999;box-sizing: border-box;">
@@ -390,8 +391,8 @@ export default {
   padding: 0 10rpx;
   padding-top: 15rpx;
   background-color: #fff;
-  position: fixed;
-  top: 0;
+  // position: fixed;
+  // top: 0;
   width: 100vw;
   box-sizing: border-box;
 }
@@ -418,6 +419,7 @@ export default {
 }
 .tab-contant {
   padding: 20rpx 30rpx;
+  padding-top: 250rpx + 20rpx;
 }
 .media-card {
   margin-bottom: 15rpx;
@@ -457,4 +459,17 @@ export default {
     margin-right: 16rpx;
   }
 }
+.top-cell {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;;
+  background-color: white;
+}
+.z-5001 {
+  z-index: 5001;
+}
+.relative {
+  position: relative;
+}
 </style>