1

src/pages/assistingAgriculture/searchPage/searchPage.vue

@@ -20,22 +20,21 @@
         />
       </view>
     </view>
+  </view>
   <wd-tabs v-model="tab">
-      <block>
-        <wd-tab title="商品">
-          <view class="content">内容1</view>
-        </wd-tab>
-        <wd-tab title="店铺">
-          <view class="content">内容2</view>
+    <block v-for="(item, index) in tabs" :key="index">
+      <wd-tab :title="item">
+        <view class="content" v-show="tab === 0">内容1</view>
+        <view class="content" v-show="tab === 1">内容2</view>
       </wd-tab>
     </block>
   </wd-tabs>
-  </view>
 </template>
 
 <script setup>
 function toSearch(keyword) {}
 const tab = ref(0);
+const tabs = ref(['商品', '店铺']);
 </script>
 
 <style lang="scss" scoped>
@@ -43,23 +42,6 @@ page {
   background: #f6f6f6;
 }
 .search-page {
-  display: flex;
-  width: 750rpx;
-  flex-direction: column;
-  align-items: center;
-
-  .wd-tabs {
-    background-color: #fff;
-  }
-
-  &:deep(.wd-tabs__nav) {
-    background-color: #fff;
-  }
-
-  &:deep(.wd-tabs__line) {
-    background-color: #e9231b;
-    bottom: 2px;
-  }
   .search {
     width: 100%;
     height: 124rpx;
@@ -103,4 +85,13 @@ page {
     gap: 20rpx;
   }
 }
+:deep(.wd-tabs__line) {
+  background-color: #e9231b;
+  bottom: 2px;
+}
+.content {
+  line-height: 120px;
+  text-align: center;
+  background: #f6f6f6;
+}
 </style>