feat: 旅游卡页面功能入口改为SVG图标 + 图标资源优化

- 旅游卡页面(qrcode/index)功能入口：我要入园/我要预约/使用记录/景区权益
- 卡片详情页(detail)新增4宫格功能入口
- SVG图标(4.3MB)转为PNG(99KB)解决主包4MB限制
- tabBar图标从1024x1024缩至81x81修复模拟器启动失败
- 统一各页面区域间距为24rpx

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

src/pages/index/index.vue

@@ -140,10 +140,10 @@ 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' },
+  { label: '我要绑卡', icon: '/static/icon/card.png' },
+  { label: '我要预约', icon: '/static/icon/reserve.png' },
+  { label: '我要入园', icon: '/static/icon/check.png' },
+  { label: '常见问题', icon: '/static/icon/faq.png' },
 ]
 
 function onQuickAction(item: { label: string }) {

src/pages/qrcode/index.vue

@@ -51,29 +51,9 @@
       <!-- 功能入口 -->
       <view class="feature-panel">
         <view class="feature-grid">
-          <view class="feature-item" @click="goBindCard">
-            <view class="feature-icon-wrap">
-              <view class="fi-link" />
-            </view>
-            <text class="feature-label">绑定旅游卡</text>
-          </view>
-          <view class="feature-item" @click="onFeature('reserve')">
-            <view class="feature-icon-wrap">
-              <view class="fi-calendar" />
-            </view>
-            <text class="feature-label">景区预约</text>
-          </view>
-          <view class="feature-item" @click="onFeature('history')">
-            <view class="feature-icon-wrap">
-              <view class="fi-list" />
-            </view>
-            <text class="feature-label">使用记录</text>
-          </view>
-          <view class="feature-item" @click="onFeature('spots')">
-            <view class="feature-icon-wrap">
-              <view class="fi-mountain" />
-            </view>
-            <text class="feature-label">权益景区</text>
+          <view class="feature-item" v-for="item in featureActions" :key="item.label" @click="onFeatureClick(item)">
+            <image class="feature-icon-img" :src="item.icon" mode="aspectFit" />
+            <text class="feature-label">{{ item.label }}</text>
           </view>
         </view>
       </view>
@@ -234,8 +214,15 @@ function goBindCard() {
   uni.navigateTo({ url: '/packages/user/pages/card/bind' })
 }
 
-function onFeature(type: string) {
-  uni.showToast({ title: '功能开发中', icon: 'none' })
+const featureActions = [
+  { label: '我要入园', icon: '/static/icon/check.png' },
+  { label: '我要预约', icon: '/static/icon/reserve.png' },
+  { label: '使用记录', icon: '/static/icon/record.png' },
+  { label: '景区权益', icon: '/static/icon/scenic.png' },
+]
+
+function onFeatureClick(item: { label: string }) {
+  uni.showToast({ title: `${item.label}功能开发中`, icon: 'none' })
 }
 
 onMounted(() => { startTimer() })
@@ -388,65 +375,9 @@ onUnmounted(() => { if (timer) clearInterval(timer) })
   min-width: 110rpx; transition: opacity 150ms;
 }
 .feature-item:active { opacity: 0.6; }
-.feature-icon-wrap {
-  width: 88rpx; height: 88rpx; border-radius: 20rpx;
-  background: #F1F5F9;
-  display: flex; align-items: center; justify-content: center;
+.feature-icon-img {
+  width: 88rpx; height: 88rpx;
   margin-bottom: 10rpx;
-  transition: background 150ms;
 }
-.feature-item:active .feature-icon-wrap { background: #E2E8F0; }
 .feature-label { font-size: 24rpx; color: #475569; }
-
-/* CSS 图标 — 统一使用页面主色 #0052FF */
-.fi-link {
-  width: 24rpx; height: 24rpx;
-  border: 3rpx solid #0052FF; border-radius: 50%;
-  position: relative;
-}
-.fi-link::before {
-  content: ''; position: absolute;
-  top: 50%; left: 50%;
-  width: 10rpx; height: 10rpx;
-  background: #0052FF; border-radius: 50%;
-  transform: translate(-50%, -50%);
-}
-.fi-calendar {
-  width: 28rpx; height: 28rpx;
-  border: 3rpx solid #0052FF; border-radius: 4rpx;
-  position: relative;
-}
-.fi-calendar::before {
-  content: ''; position: absolute;
-  top: 10rpx; left: 4rpx; right: 4rpx;
-  height: 3rpx; background: #0052FF;
-}
-.fi-calendar::after {
-  content: ''; position: absolute;
-  top: -6rpx; left: 6rpx;
-  width: 3rpx; height: 10rpx; background: #0052FF;
-  border-radius: 1rpx;
-  box-shadow: 10rpx 0 0 #0052FF;
-}
-.fi-list { width: 28rpx; display: flex; flex-direction: column; gap: 6rpx; }
-.fi-list::before, .fi-list::after {
-  content: ''; height: 3rpx; background: #0052FF; border-radius: 1rpx;
-}
-.fi-list::before { width: 100%; }
-.fi-list::after { width: 70%; }
-.fi-mountain {
-  width: 0; height: 0;
-  border-left: 16rpx solid transparent;
-  border-right: 16rpx solid transparent;
-  border-bottom: 24rpx solid #0052FF;
-  position: relative;
-}
-.fi-mountain::after {
-  content: ''; position: absolute;
-  top: 12rpx; left: -6rpx;
-  width: 0; height: 0;
-  border-left: 10rpx solid transparent;
-  border-right: 10rpx solid transparent;
-  border-bottom: 16rpx solid #4D7CFF;
-}
 </style>