feat: 旅游卡页面功能入口改为SVG图标 + 图标资源优化
- 旅游卡页面(qrcode/index)功能入口:我要入园/我要预约/使用记录/景区权益 - 卡片详情页(detail)新增4宫格功能入口 - SVG图标(4.3MB)转为PNG(99KB)解决主包4MB限制 - tabBar图标从1024x1024缩至81x81修复模拟器启动失败 - 统一各页面区域间距为24rpx Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
+14
-83
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user