From 94477fb27177c63feebe37e9dcdd99f2eb4b6eca Mon Sep 17 00:00:00 2001 From: jacobxu666 Date: Thu, 25 Jun 2026 13:35:56 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A6=96=E9=A1=B5=E6=96=B0=E5=A2=9E4?= =?UTF-8?q?=E5=AE=AB=E6=A0=BC=E9=87=91=E5=88=9A=E5=8C=BA=EF=BC=88=E7=BB=91?= =?UTF-8?q?=E5=8D=A1/=E9=A2=84=E7=BA=A6/=E5=85=A5=E5=9B=AD/=E5=B8=B8?= =?UTF-8?q?=E8=A7=81=E9=97=AE=E9=A2=98=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 金刚区位于公告栏下方，4等分flex布局 - SVG图标直接展示，无背景色 - 点击弹出开发中toast - 统一各区域间距为24rpx Co-Authored-By: Claude --- src/pages/index/index.vue | 64 ++++++++++++++++++++++++++++++++++++- src/static/icon/card.svg | 9 ++++++ src/static/icon/check.svg | 9 ++++++ src/static/icon/faq.svg | 9 ++++++ src/static/icon/reserve.svg | 9 ++++++ src/static/icon/scenic.svg | 9 ++++++ 6 files changed, 108 insertions(+), 1 deletion(-) create mode 100644 src/static/icon/card.svg create mode 100644 src/static/icon/check.svg create mode 100644 src/static/icon/faq.svg create mode 100644 src/static/icon/reserve.svg create mode 100644 src/static/icon/scenic.svg diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue index 8c5bc51..34834d0 100644 --- a/src/pages/index/index.vue +++ b/src/pages/index/index.vue @@ -44,6 +44,19 @@ + + + + + {{ item.label }} + + + @@ -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 { diff --git a/src/static/icon/card.svg b/src/static/icon/card.svg new file mode 100644 index 0000000..26fe501 --- /dev/null +++ b/src/static/icon/card.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/static/icon/check.svg b/src/static/icon/check.svg new file mode 100644 index 0000000..bb47347 --- /dev/null +++ b/src/static/icon/check.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/static/icon/faq.svg b/src/static/icon/faq.svg new file mode 100644 index 0000000..bc93d14 --- /dev/null +++ b/src/static/icon/faq.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/static/icon/reserve.svg b/src/static/icon/reserve.svg new file mode 100644 index 0000000..dc89929 --- /dev/null +++ b/src/static/icon/reserve.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/static/icon/scenic.svg b/src/static/icon/scenic.svg new file mode 100644 index 0000000..6a0f437 --- /dev/null +++ b/src/static/icon/scenic.svg @@ -0,0 +1,9 @@ + + + + + + + + +