xuchao/pingxiangcard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui: replace emoji icons with CSS icons, add tap feedback, improve touch targets

Browse Source 
- Replace all emoji icons (🔍📢✦📅📋🏔️⏱🎫) with pure CSS elements
- Add :active tap feedback on promo cards, spot cards, buttons
- Increase CTA button min-height to 88rpx (44px) for touch targets
- Replace text arrows (→ > ▼ ▲) with CSS chevrons
- Add pulse animation on announcement indicator
- CSS icons: search magnifier, calendar, list, mountain, clock

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
jacobxu666
2026-06-24 19:51:44 +08:00
co-authored by Claude
parent 98bc999e5f
commit feaae0a77d
2 changed files with 205 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/index/index.vue
+91 -22
View File
@@ -7,7 +7,9 @@
<text class="hero-title">爱上萍乡</text>
<text class="hero-subtitle">赣湘之间 · 发现旅途美好</text>
<view class="search-bar" @click="goSearch">
<text class="search-icon">🔍</text>
<view class="search-icon-wrap">
<view class="search-icon-circle" />
</view>
<text class="search-placeholder">搜索景区、活动...</text>
</view>
</view>
@@ -17,7 +19,7 @@
<!-- 公告栏 -->
<view class="notice-bar" v-if="announcements.length">
<view class="notice-label">
<text class="notice-icon">📢</text>
<view class="notice-dot" />
<text class="notice-text">公告</text>
</view>
<swiper class="notice-swiper" vertical autoplay circular :interval="3000" :duration="500">
@@ -38,12 +40,13 @@
<text class="promo-card-unit">/套卡(2张)</text>
</view>
<view class="promo-card-features">
<text class="promo-card-feature">✦ 22家景区免门票</text>
<text class="promo-card-feature">✦ 武功山·方特·君澜温泉</text>
<text class="promo-card-feature">✦ 覆盖萍乡/长沙/株洲/湘潭</text>
<view class="promo-card-feature"><view class="feature-dot" /><text>22家景区免门票</text></view>
<view class="promo-card-feature"><view class="feature-dot" /><text>武功山·方特·君澜温泉</text></view>
<view class="promo-card-feature"><view class="feature-dot" /><text>覆盖萍乡/长沙/株洲/湘潭</text></view>
</view>
<view class="promo-card-btn">
<text class="promo-card-btn-text">立即抢购 →</text>
<text class="promo-card-btn-text">立即抢购</text>
<view class="btn-arrow" />
</view>
</view>
@@ -55,12 +58,13 @@
<text class="promo-card-price">198</text>
</view>
<view class="promo-card-features">
<text class="promo-card-feature">✦ 40家景区免门票</text>
<text class="promo-card-feature">✦ 武功山·方特·韶山·滴水洞</text>
<text class="promo-card-feature">✦ 含外骨骼登山·青年旅社等</text>
<view class="promo-card-feature"><view class="feature-dot" /><text>40家景区免门票</text></view>
<view class="promo-card-feature"><view class="feature-dot" /><text>武功山·方特·韶山·滴水洞</text></view>
<view class="promo-card-feature"><view class="feature-dot" /><text>含外骨骼登山·青年旅社等</text></view>
</view>
<view class="promo-card-btn">
<text class="promo-card-btn-text">立即抢购 →</text>
<text class="promo-card-btn-text">立即抢购</text>
<view class="btn-arrow" />
</view>
</view>
</view>
@@ -69,7 +73,10 @@
<view class="spots-section">
<view class="spots-header">
<text class="spots-title">热门景点</text>
<text class="spots-more">查看全部 ></text>
<view class="spots-more" @click="goMore">
<text>查看全部</text>
<view class="chevron-right" />
</view>
</view>
<view class="spot-card" v-for="spot in scenicSpots" :key="spot.id" @click="goSpot(spot)">
<view class="spot-image" :style="{ background: getGradient(spot.region) }">
@@ -126,6 +133,11 @@ function goCardDetail(type: 'gx' | 'super') {
function goSpot(spot: ScenicSpotItem) {
uni.showToast({ title: `${spot.name} 详情开发中`, icon: 'none' })
}
/** 查看全部景点 */
function goMore() {
uni.showToast({ title: '景点列表开发中', icon: 'none' })
}
</script>
<style scoped>
@@ -149,12 +161,32 @@ function goSpot(spot: ScenicSpotItem) {
}
.hero-title { font-size: 42rpx; font-weight: bold; color: #fff; margin-bottom: 8rpx; }
.hero-subtitle { font-size: 24rpx; color: rgba(255,255,255,0.8); margin-bottom: 24rpx; }
/* 搜索栏 */
.search-bar {
display: flex; align-items: center;
background: rgba(255,255,255,0.95); border-radius: 40rpx;
padding: 18rpx 24rpx;
min-height: 88rpx;
transition: opacity 0.2s;
}
.search-bar:active { opacity: 0.7; }
.search-icon-wrap {
width: 36rpx; height: 36rpx; margin-right: 12rpx;
display: flex; align-items: center; justify-content: center;
}
.search-icon-circle {
width: 24rpx; height: 24rpx;
border: 3rpx solid #999; border-radius: 50%;
position: relative;
}
.search-icon-circle::after {
content: ''; position: absolute;
width: 3rpx; height: 10rpx;
background: #999; border-radius: 2rpx;
bottom: -10rpx; right: -4rpx;
transform: rotate(-45deg);
}
.search-icon { font-size: 28rpx; margin-right: 12rpx; }
.search-placeholder { font-size: 26rpx; color: #999; }
/* === 公告栏 === */
@@ -164,7 +196,15 @@ function goSpot(spot: ScenicSpotItem) {
border-bottom: 1rpx solid #f0f0f0;
}
.notice-label { display: flex; align-items: center; margin-right: 16rpx; flex-shrink: 0; }
.notice-icon { font-size: 28rpx; margin-right: 6rpx; }
.notice-dot {
width: 14rpx; height: 14rpx; border-radius: 50%;
background: #E74C3C; margin-right: 8rpx;
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.notice-text { font-size: 24rpx; color: #E74C3C; font-weight: 500; }
.notice-swiper { flex: 1; height: 40rpx; }
.notice-content { font-size: 24rpx; color: #666; line-height: 40rpx; }
@@ -175,7 +215,9 @@ function goSpot(spot: ScenicSpotItem) {
.promo-card {
position: relative; border-radius: 24rpx; padding: 40rpx 32rpx;
overflow: hidden;
transition: transform 0.15s ease;
}
.promo-card:active { transform: scale(0.98); }
.promo-card-gx {
background: linear-gradient(135deg, #1a237e 0%, #283593 40%, #ffd54f 100%);
}
@@ -193,14 +235,30 @@ function goSpot(spot: ScenicSpotItem) {
.promo-card-currency { font-size: 32rpx; color: #fff; font-weight: bold; }
.promo-card-price { font-size: 64rpx; color: #fff; font-weight: bold; line-height: 1; }
.promo-card-unit { font-size: 24rpx; color: rgba(255,255,255,0.8); margin-left: 8rpx; }
.promo-card-features { display: flex; flex-direction: column; gap: 8rpx; margin-bottom: 24rpx; }
.promo-card-feature { font-size: 24rpx; color: rgba(255,255,255,0.9); }
.promo-card-btn {
display: flex; align-items: center; justify-content: center;
background: #fff; border-radius: 40rpx;
padding: 16rpx 0;
.promo-card-features { display: flex; flex-direction: column; gap: 10rpx; margin-bottom: 24rpx; }
.promo-card-feature {
display: flex; align-items: center; gap: 10rpx;
font-size: 24rpx; color: rgba(255,255,255,0.9);
}
.feature-dot {
width: 8rpx; height: 8rpx; border-radius: 50%;
background: rgba(255,255,255,0.7); flex-shrink: 0;
}
.promo-card-btn {
display: flex; align-items: center; justify-content: center; gap: 8rpx;
background: #fff; border-radius: 44rpx;
padding: 22rpx 0;
min-height: 88rpx;
transition: opacity 0.2s;
}
.promo-card-btn:active { opacity: 0.8; }
.promo-card-btn-text { font-size: 28rpx; font-weight: bold; color: #333; }
.btn-arrow {
width: 12rpx; height: 12rpx;
border-top: 3rpx solid #333;
border-right: 3rpx solid #333;
transform: rotate(45deg);
}
/* === 热门景点列表 === */
.spots-section { padding: 24rpx; }
@@ -209,19 +267,30 @@ function goSpot(spot: ScenicSpotItem) {
margin-bottom: 20rpx;
}
.spots-title { font-size: 34rpx; font-weight: bold; color: #333; }
.spots-more { font-size: 24rpx; color: #999; }
.spots-more {
display: flex; align-items: center; gap: 4rpx;
font-size: 24rpx; color: #999;
}
.chevron-right {
width: 10rpx; height: 10rpx;
border-top: 2rpx solid #999;
border-right: 2rpx solid #999;
transform: rotate(45deg);
}
.spot-card {
background: #fff; border-radius: 20rpx; overflow: hidden;
margin-bottom: 20rpx;
transition: transform 0.15s ease;
}
.spot-card:active { transform: scale(0.98); }
.spot-image {
width: 100%; height: 320rpx; position: relative;
}
.spot-region-tag {
position: absolute; top: 16rpx; left: 16rpx;
background: rgba(0,0,0,0.5); border-radius: 16rpx;
padding: 4rpx 16rpx;
padding: 6rpx 16rpx;
font-size: 22rpx; color: #fff;
}
.spot-info { padding: 20rpx 24rpx; }
@@ -230,7 +299,7 @@ function goSpot(spot: ScenicSpotItem) {
.spot-price { font-size: 32rpx; color: #E74C3C; font-weight: bold; }
.spot-free-tag {
background: #E8F5E9; border-radius: 16rpx;
padding: 4rpx 16rpx;
padding: 6rpx 16rpx;
font-size: 22rpx; color: #2E7D32; font-weight: 500;
}