feat: 完成首页UI展示初版开发

2026-03-31 10:59:25 +08:00
parent 1b45ba7d11
commit b18dbcb0d1
17 changed files with 258 additions and 10 deletions
@@ -0,0 +1,5 @@
+{
+    "component": true,
+    "styleIsolation": "apply-shared",
+    "usingComponents": {}
+}
@@ -0,0 +1,36 @@
+.category-tabs {
+    background: #fff;
+    width: 100%;
+}
+
+.category-tabs__scroll {
+    width: 100%;
+    white-space: nowrap;
+}
+
+.category-tabs__inner {
+    display: inline-flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 16rpx;
+    padding: 0 24rpx;
+    box-sizing: border-box;
+}
+
+.category-tabs__pill {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 12rpx 32rpx;
+    border-radius: 32rpx;
+    background: #f5f5f5;
+    font-size: 28rpx;
+    color: rgba(0, 0, 0, 0.65);
+    flex-shrink: 0;
+}
+
+.category-tabs__pill--active {
+    background: #f7ee47;
+    font-weight: 600;
+    color: rgba(0, 0, 0, 0.88);
+}
@@ -0,0 +1,22 @@
+Component({
+    options: {
+        styleIsolation: 'apply-shared',
+    },
+    properties: {
+        tabs: {
+            type: Array,
+            value: [],
+        },
+        activeTab: {
+            type: String,
+            value: '',
+        },
+    },
+    methods: {
+        onTabTap(e: WechatMiniprogram.TouchEvent) {
+            const id = (e.currentTarget.dataset.id as string) || '';
+            if (!id) return;
+            this.triggerEvent('change', { id });
+        },
+    },
+});
@@ -0,0 +1,15 @@
+<view class="category-tabs">
+    <scroll-view class="category-tabs__scroll" scroll-x>
+        <view class="category-tabs__inner">
+            <view
+                wx:for="{{tabs}}"
+                wx:key="id"
+                class="category-tabs__pill {{activeTab === item.id ? 'category-tabs__pill--active' : ''}}"
+                data-id="{{item.id}}"
+                bindtap="onTabTap"
+            >
+                {{item.name}}
+            </view>
+        </view>
+    </scroll-view>
+</view>