From feaae0a77d9f7efb30981462c8cad7af6b092ea3 Mon Sep 17 00:00:00 2001
From: jacobxu666 <jacobxu666@gmail.com>
Date: Wed, 24 Jun 2026 19:51:44 +0800
Subject: [PATCH] ui: replace emoji icons with CSS icons, add tap feedback,
 improve touch targets
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 src/pages/index/index.vue  | 113 ++++++++++++++++++++++++++-------
 src/pages/qrcode/index.vue | 126 +++++++++++++++++++++++++++++++++----
 2 files changed, 205 insertions(+), 34 deletions(-)

diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index 971d9da..70e3640 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -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;
 }
 
diff --git a/src/pages/qrcode/index.vue b/src/pages/qrcode/index.vue
index 45e6170..6abd062 100644
--- a/src/pages/qrcode/index.vue
+++ b/src/pages/qrcode/index.vue
@@ -2,7 +2,10 @@
   <view class="page">
     <!-- 未持卡状态 -->
     <view class="empty-state" v-if="!hasCard">
-      <text class="empty-icon">🎫</text>
+      <view class="empty-icon-card">
+        <view class="empty-icon-stripe" />
+        <view class="empty-icon-stripe short" />
+      </view>
       <text class="empty-text">您还没有旅游卡</text>
       <text class="empty-desc">购买旅游卡后即可使用入园码</text>
       <view class="empty-btn" @click="goBuyCard">
@@ -56,9 +59,12 @@
       <!-- 持卡信息（可展开/收起） -->
       <view class="info-panel" @click="toggleInfo">
         <view class="info-panel-header">
-          <text class="info-panel-icon">📋</text>
+          <view class="info-panel-icon-wrap">
+            <view class="info-panel-icon-bar" />
+            <view class="info-panel-icon-bar short" />
+          </view>
           <text class="info-panel-title">持卡信息</text>
-          <text class="info-panel-arrow">{{ infoExpanded ? '▲' : '▼' }}</text>
+          <view class="info-panel-arrow" :class="{ expanded: infoExpanded }" />
         </view>
         <view class="info-panel-body" v-if="infoExpanded">
           <view class="info-row">
@@ -84,26 +90,29 @@
             <text class="qrcode-placeholder-sub">（二维码占位）</text>
           </view>
         </view>
-        <text class="qrcode-countdown">⏱ {{ countdown }}秒后自动刷新</text>
+        <view class="qrcode-countdown">
+          <view class="countdown-icon" />
+          <text>{{ countdown }}秒后自动刷新</text>
+        </view>
       </view>
 
       <!-- 功能入口 -->
       <view class="feature-grid">
         <view class="feature-item" @click="onFeature('reserve')">
           <view class="feature-icon-wrap feature-icon-reserve">
-            <text class="feature-icon">📅</text>
+            <view class="fi-calendar" />
           </view>
           <text class="feature-label">景区预约</text>
         </view>
         <view class="feature-item" @click="onFeature('history')">
           <view class="feature-icon-wrap feature-icon-history">
-            <text class="feature-icon">📋</text>
+            <view class="fi-list" />
           </view>
           <text class="feature-label">使用记录</text>
         </view>
         <view class="feature-item" @click="onFeature('spots')">
           <view class="feature-icon-wrap feature-icon-spots">
-            <text class="feature-icon">🏔️</text>
+            <view class="fi-mountain" />
           </view>
           <text class="feature-label">权益景区</text>
         </view>
@@ -219,13 +228,26 @@ onUnmounted(() => {
   display: flex; flex-direction: column; align-items: center;
   justify-content: center; min-height: 100vh; padding: 40rpx;
 }
-.empty-icon { font-size: 120rpx; margin-bottom: 24rpx; }
+.empty-icon-card {
+  width: 120rpx; height: 80rpx; border-radius: 12rpx;
+  background: linear-gradient(135deg, #4A90D9, #357ABD);
+  display: flex; flex-direction: column; justify-content: center;
+  padding: 16rpx; gap: 8rpx; margin-bottom: 32rpx;
+}
+.empty-icon-stripe {
+  height: 8rpx; background: rgba(255,255,255,0.6); border-radius: 4rpx;
+  width: 100%;
+}
+.empty-icon-stripe.short { width: 60%; }
 .empty-text { font-size: 32rpx; font-weight: bold; color: #333; margin-bottom: 12rpx; }
 .empty-desc { font-size: 26rpx; color: #999; margin-bottom: 40rpx; }
 .empty-btn {
   background: linear-gradient(135deg, #4A90D9, #357ABD);
   border-radius: 44rpx; padding: 20rpx 80rpx;
+  min-height: 88rpx; display: flex; align-items: center; justify-content: center;
+  transition: opacity 0.2s;
 }
+.empty-btn:active { opacity: 0.7; }
 .empty-btn-text { font-size: 30rpx; color: #fff; font-weight: bold; }
 
 /* === 卡面展示区域 === */
@@ -265,13 +287,31 @@ onUnmounted(() => {
 .info-panel {
   margin: 0 24rpx 20rpx; background: #fff;
   border-radius: 16rpx; overflow: hidden;
+  transition: opacity 0.2s;
 }
+.info-panel:active { opacity: 0.7; }
 .info-panel-header {
   display: flex; align-items: center; padding: 24rpx;
 }
-.info-panel-icon { font-size: 28rpx; margin-right: 8rpx; }
+.info-panel-icon-wrap {
+  width: 32rpx; height: 28rpx; margin-right: 12rpx;
+  display: flex; flex-direction: column; gap: 6rpx;
+}
+.info-panel-icon-bar {
+  height: 4rpx; background: #666; border-radius: 2rpx; width: 100%;
+}
+.info-panel-icon-bar.short { width: 60%; }
 .info-panel-title { flex: 1; font-size: 28rpx; color: #333; font-weight: 500; }
-.info-panel-arrow { font-size: 24rpx; color: #999; }
+.info-panel-arrow {
+  width: 14rpx; height: 14rpx;
+  border-right: 3rpx solid #999;
+  border-bottom: 3rpx solid #999;
+  transform: rotate(45deg);
+  transition: transform 0.3s ease;
+}
+.info-panel-arrow.expanded {
+  transform: rotate(-135deg);
+}
 .info-panel-body { padding: 0 24rpx 24rpx; }
 .info-row {
   display: flex; justify-content: space-between; align-items: center;
@@ -296,7 +336,21 @@ onUnmounted(() => {
 }
 .qrcode-placeholder-text { font-size: 32rpx; color: #333; font-weight: bold; }
 .qrcode-placeholder-sub { font-size: 24rpx; color: #999; margin-top: 8rpx; }
-.qrcode-countdown { font-size: 24rpx; color: #999; }
+.qrcode-countdown {
+  display: flex; align-items: center; gap: 8rpx;
+  font-size: 24rpx; color: #999;
+}
+.countdown-icon {
+  width: 20rpx; height: 20rpx;
+  border: 3rpx solid #999; border-radius: 50%;
+  position: relative;
+}
+.countdown-icon::before {
+  content: ''; position: absolute;
+  width: 3rpx; height: 8rpx; background: #999;
+  top: 3rpx; left: 50%; transform: translateX(-50%);
+  border-radius: 1rpx;
+}
 
 /* === 功能入口 === */
 .feature-grid {
@@ -305,7 +359,10 @@ onUnmounted(() => {
 }
 .feature-item {
   display: flex; flex-direction: column; align-items: center;
+  min-width: 120rpx;
+  transition: opacity 0.2s;
 }
+.feature-item:active { opacity: 0.6; }
 .feature-icon-wrap {
   width: 100rpx; height: 100rpx; border-radius: 50%;
   display: flex; align-items: center; justify-content: center;
@@ -314,6 +371,51 @@ onUnmounted(() => {
 .feature-icon-reserve { background: #E3F2FD; }
 .feature-icon-history { background: #FFF3E0; }
 .feature-icon-spots { background: #E8F5E9; }
-.feature-icon { font-size: 44rpx; }
 .feature-label { font-size: 24rpx; color: #666; }
+
+/* CSS 图标：日历 */
+.fi-calendar {
+  width: 28rpx; height: 28rpx;
+  border: 3rpx solid #1976D2; border-radius: 4rpx;
+  position: relative;
+}
+.fi-calendar::before {
+  content: ''; position: absolute;
+  top: 10rpx; left: 4rpx; right: 4rpx;
+  height: 3rpx; background: #1976D2;
+}
+.fi-calendar::after {
+  content: ''; position: absolute;
+  top: -6rpx; left: 6rpx;
+  width: 3rpx; height: 10rpx; background: #1976D2;
+  border-radius: 1rpx;
+  box-shadow: 10rpx 0 0 #1976D2;
+}
+
+/* CSS 图标：列表 */
+.fi-list {
+  width: 28rpx; display: flex; flex-direction: column; gap: 6rpx;
+}
+.fi-list::before, .fi-list::after {
+  content: ''; height: 3rpx; background: #E65100; border-radius: 1rpx;
+}
+.fi-list::before { width: 100%; }
+.fi-list::after { width: 70%; }
+
+/* CSS 图标：山峰 */
+.fi-mountain {
+  width: 0; height: 0;
+  border-left: 16rpx solid transparent;
+  border-right: 16rpx solid transparent;
+  border-bottom: 24rpx solid #2E7D32;
+  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 #43A047;
+}
 </style>