需要修复商城顶部筛选左右滑动问题

pages/discover/discover.vue

@@ -0,0 +1,75 @@
+<script setup>
+  import { navigateTo } from '@/utils/router'
+
+  const btnList = [
+    { name: '等级排行榜', icon: 'grade' },
+    { name: '签到', icon: 'sign' },
+    { name: '公司介绍', icon: 'company' },
+    { name: '朋友圈', icon: 'circle' },
+    { name: '线上商城', icon: 'mall' },
+    { name: '我的拼团', icon: 'team' },
+    { name: '项目入口', icon: 'project' }
+  ]
+
+  const onGo = item => {
+    if (item === 'mall') {
+      navigateTo('/pages/mall/list')
+    }
+  }
+</script>
+
+<template>
+  <view class="discover-box">
+    <view
+      v-for="(item, index) in btnList"
+      :key="index"
+      class="card-box"
+      @click="onGo(item.icon)"
+    >
+      <view class="left-box">
+        <image
+          :src="`/static/images/discover/${item.icon}.png`"
+          mode="heightFix"
+          class="icon"
+        ></image>
+        <text>{{ item.name }}</text>
+      </view>
+      <image
+        src="/static/images/public/right-arrow.png"
+        mode="heightFix"
+        class="right-box"
+      ></image>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+  .discover-box {
+    padding: 32rpx 24rpx;
+    .card-box {
+      padding: 20rpx 32rpx;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .left-box {
+        display: flex;
+        align-items: center;
+        .icon {
+          height: 80rpx;
+          margin-right: 16rpx;
+        }
+        text {
+          font-family: PingFang SC, PingFang SC;
+          font-weight: 500;
+          font-size: 32rpx;
+          color: #333333;
+          font-style: normal;
+          text-transform: none;
+        }
+      }
+      .right-box {
+        height: 32rpx;
+      }
+    }
+  }
+</style>