feat: 首页新增4宫格金刚区（绑卡/预约/入园/常见问题）

- 金刚区位于公告栏下方，4等分flex布局
- SVG图标直接展示，无背景色
- 点击弹出开发中toast
- 统一各区域间距为24rpx

Co-Authored-By: Claude <noreply@anthropic.com>

src/pages/index/index.vue

@@ -44,6 +44,19 @@
         </view>
       </view>
 
+      <!-- 金刚区 -->
+      <view class="quick-grid animate-fade-in-up stagger-2">
+        <view
+          v-for="item in quickActions"
+          :key="item.label"
+          class="quick-item"
+          @click="onQuickAction(item)"
+        >
+          <image class="quick-icon-img" :src="item.icon" mode="aspectFit" />
+          <text class="quick-label">{{ item.label }}</text>
+        </view>
+      </view>
+
       <!-- 旅游卡 — 大字报风格 -->
       <view class="promo-wrap animate-fade-in-up stagger-2">
         <view class="promo" @click="goCardDetail()">
@@ -125,6 +138,18 @@ import { ref, computed } from 'vue'
 import { scenicSpots } from '../../data/scenic-spots'
 import type { ScenicSpotItem } from '../../data/scenic-spots'
 
+/** 金刚区 */
+const quickActions = [
+  { label: '我要绑卡', icon: '/static/icon/card.svg' },
+  { label: '我要预约', icon: '/static/icon/reserve.svg' },
+  { label: '我要入园', icon: '/static/icon/check.svg' },
+  { label: '常见问题', icon: '/static/icon/faq.svg' },
+]
+
+function onQuickAction(item: { label: string }) {
+  uni.showToast({ title: `${item.label}功能开发中`, icon: 'none' })
+}
+
 /** 公告数据（mock，后续接 API） */
 const announcements = ref([
   { id: 1, type: 'important', typeLabel: '重要', content: '赣湘全域旅游年卡限时优惠，工会会员专享¥300/套卡！' },
@@ -320,11 +345,48 @@ function goMore() {
   color: $color-muted-foreground;
 }
 
+/* ============================================
+   Quick actions — 金刚区
+   ============================================ */
+.quick-grid {
+  display: flex;
+  justify-content: space-between;
+  margin: $spacing-3;
+  padding: $spacing-3 0;
+  background: $color-card;
+  border-radius: 16rpx;
+  box-shadow: $shadow-sm;
+}
+
+.quick-item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12rpx;
+  transition: transform $transition-fast;
+
+  &:active {
+    transform: scale(0.92);
+  }
+}
+
+.quick-icon-img {
+  width: 88rpx;
+  height: 88rpx;
+}
+
+.quick-label {
+  font-size: 24rpx;
+  color: $color-foreground;
+  font-weight: $font-weight-medium;
+}
+
 /* ============================================
    Promo card — landscape photo hero card
    ============================================ */
 .promo-wrap {
-  padding: $spacing-3;
+  padding: 0 $spacing-3 $spacing-3;
 }
 
 .promo {