首页轮播，裁剪标题，按钮间距

pages/index/components/PlatformFeatures.vue

@@ -3,8 +3,15 @@
   <view class="feature-section">
     <text class="section-title">用强大的功能，开启盈利快车道</text>
 
-    <!-- 功能卡片横向滚动 -->
-    <scroll-view scroll-x class="feat-scroll" show-scrollbar="false">
+    <!-- 功能卡片横向滚动
+         :scroll-left 绑定 featScrollLeft，activeFeat 变化时尽量把选中项滚到左侧 -->
+    <scroll-view
+      scroll-x
+      class="feat-scroll"
+      show-scrollbar="false"
+      :scroll-left="featScrollLeft"
+      :scroll-with-animation="true"
+    >
       <view class="feat-list">
         <view
           class="feat-card"
@@ -22,11 +29,12 @@
       </view>
     </scroll-view>
 
-    <!-- 集成平台大图 - 370x257 8px圆角 -->
+    <!-- 集成平台大图 - 370x257 8px圆角
+         图片来源：features[activeFeat].img（4张卡片分别对应一张大图；占位时 4 张同图，设计师供图后换 mock.js 即可） -->
     <view class="integration-wrap">
       <image
         class="integration-img"
-        src="/static/images/home/Rectangle_64_1484_1735.png"
+        :src="integrationImg"
         mode="widthFix"
       ></image>
     </view>
@@ -34,6 +42,15 @@
 </template>
 
 <script>
+// 功能卡片尺寸（与 CSS 保持一致，用于计算「选中卡片滚到左边」的 scrollLeft）
+// CSS: .feat-card { width:332rpx }, .feat-list gap:16rpx
+// 1rpx = 0.5px，所以 1 张卡片+gap = (332 + 16) * 0.5 = 174px
+const CARD_WIDTH_PX = 332 * 0.5   // 166
+const CARD_GAP_PX = 16 * 0.5      // 8
+const CARD_STEP_PX = CARD_WIDTH_PX + CARD_GAP_PX  // 174
+
+const AUTO_PLAY_INTERVAL = 3000  // 3 秒自动轮播一次
+
 export default {
   name: 'PlatformFeatures',
   props: {
@@ -44,13 +61,75 @@ export default {
   },
   data() {
     return {
-      activeFeat: 3
+      activeFeat: 0,          // 默认从第一张开始轮播
+      featScrollLeft: 0,      // scroll-view 的 scroll-left（px）
+      _timer: null
     }
   },
+  computed: {
+    integrationImg() {
+      const f = this.features[this.activeFeat]
+      return (f && f.img) || ''
+    }
+  },
+  watch: {
+    activeFeat(idx) {
+      // 选中项变化时：把选中卡片「尽量滚到左边」
+      // index * step = 选中卡片起始 x
+      this.scrollToCard(idx)
+    }
+  },
+  mounted() {
+    this.startAutoPlay()
+  },
+  beforeDestroy() {
+    this.stopAutoPlay()
+  },
   methods: {
     onFeatTap(index) {
+      // 用户手动点击：切换 + 先停轮播，再隔 3 秒重启（避免刚点完又被立即切走）
+      this.stopAutoPlay()
       this.activeFeat = index
       this.$emit('change', index)
+      this.startAutoPlay()
+    },
+
+    /**
+     * 让横滚容器把第 idx 张卡片「尽量」滚到左边贴边。
+     * scroll-view 的 scroll-left 有最大上限（内容总长 - 视口宽度），
+     * 当 idx 是最后几张时，scroll-left 超过最大值，scroll-view 会自动截断到可滚的最大值，
+     * 因此卡片虽无法真的贴左，但已经是「滚到最接近左侧」的位置了。
+     */
+    scrollToCard(idx) {
+      const target = Math.max(0, idx) * CARD_STEP_PX
+      // 先赋值一个不同的值，保证 uni-app scroll-view 每次都能识别到属性变化
+      // （否则从 0 → 0 这种无变化赋值不触发滚动）
+      if (this.featScrollLeft === target) {
+        this.featScrollLeft = target + 0.001
+        this.$nextTick(() => {
+          this.featScrollLeft = target
+        })
+      } else {
+        this.featScrollLeft = target
+      }
+    },
+
+    startAutoPlay() {
+      this.stopAutoPlay()
+      if (!this.features || this.features.length <= 1) return
+      this._timer = setInterval(() => {
+        const total = this.features.length
+        const next = (this.activeFeat + 1) % total
+        this.activeFeat = next
+        this.$emit('change', next)
+      }, AUTO_PLAY_INTERVAL)
+    },
+
+    stopAutoPlay() {
+      if (this._timer) {
+        clearInterval(this._timer)
+        this._timer = null
+      }
     }
   }
 }
@@ -86,7 +165,7 @@ export default {
   display: inline-flex;
   gap: 16rpx;
 }
-/* 卡片 - 166x80 圆角6px */
+/* 卡片 - 166x80 圆角6px (332rpx × 160rpx) */
 .feat-card {
   flex-shrink: 0;
   width: 332rpx;