Răsfoiți Sursa

fix(frontend): 生成海报按钮 emoji 乱码改为图片图标(U+1F5BC 字库缺失致 tofu)

- 4 处 '🖼'(U+1F5BC, Unicode 7.0) 在部分安卓/旧版微信基础库无字形,渲染为豆腐块
- 替换为线性图片图标:product-detail/article-detail/activity-detail 用 poster.png(品牌橙)
  article-detail 橙色渐变底用 poster-white.png;guide/packages/share.vue 用 poster.png
- 图标由 font-size 改为 width/height + flex-shrink:0,保留 calc(*var(--font-scale)) 跟随字体缩放
Agnes Agent 1 săptămână în urmă
părinte
comite
816aedbd2f

+ 2 - 2
cfc-frontend/pages/activity/activity-detail/activity-detail.vue

@@ -133,7 +133,7 @@
       </view>
       </view>
       <view class="action-btns">
       <view class="action-btns">
         <button class="share-btn" @click="generatePoster">
         <button class="share-btn" @click="generatePoster">
-          <text class="share-btn-icon">🖼</text>
+          <image class="share-btn-icon" src="/static/icons/poster.png" mode="aspectFit" />
           <text class="share-btn-text">生成海报</text>
           <text class="share-btn-text">生成海报</text>
         </button>
         </button>
         <!-- 报名按钮(仅报名中/未报名时显示) -->
         <!-- 报名按钮(仅报名中/未报名时显示) -->
@@ -1557,7 +1557,7 @@ export default {
 }
 }
 .share-btn { height: 64rpx; line-height: 64rpx; background: $app-surface; border: 2rpx solid $brand-primary; color: $brand-primary; font-size: calc(24rpx * var(--font-scale, 1)); border-radius: 24rpx; padding: 0 24rpx; display: flex; align-items: center; flex-shrink: 0; }
 .share-btn { height: 64rpx; line-height: 64rpx; background: $app-surface; border: 2rpx solid $brand-primary; color: $brand-primary; font-size: calc(24rpx * var(--font-scale, 1)); border-radius: 24rpx; padding: 0 24rpx; display: flex; align-items: center; flex-shrink: 0; }
 .share-btn::after { border: none; }
 .share-btn::after { border: none; }
-.share-btn-icon { font-size: calc(28rpx * var(--font-scale, 1)); margin-right: 6rpx; }
+.share-btn-icon { width: calc(32rpx * var(--font-scale, 1)); height: calc(32rpx * var(--font-scale, 1)); margin-right: 6rpx; flex-shrink: 0; }
 .share-btn-text { font-size: calc(24rpx * var(--font-scale, 1)); font-weight: 600; }
 .share-btn-text { font-size: calc(24rpx * var(--font-scale, 1)); font-weight: 600; }
 
 
 /* 报名表单弹窗 */
 /* 报名表单弹窗 */

+ 2 - 2
cfc-frontend/pages/article-center/article-detail.vue

@@ -51,7 +51,7 @@
       <!-- 底部(听文章在右下角、生成海报在左下角) -->
       <!-- 底部(听文章在右下角、生成海报在左下角) -->
       <view class="detail-footer">
       <view class="detail-footer">
         <view class="share-btn" @click="generatePoster">
         <view class="share-btn" @click="generatePoster">
-          <text class="share-btn-icon">🖼</text>
+          <image class="share-btn-icon" src="/static/icons/poster-white.png" mode="aspectFit" />
           <text class="share-btn-text">生成海报</text>
           <text class="share-btn-text">生成海报</text>
         </view>
         </view>
         <view v-if="isLogin" class="listen-btn" :class="{ playing: audioPlaying }" @click="toggleArticleAudio">
         <view v-if="isLogin" class="listen-btn" :class="{ playing: audioPlaying }" @click="toggleArticleAudio">
@@ -479,7 +479,7 @@ export default {
 .detail-footer { position: fixed; bottom: 0; left: 0; right: 0; background: $app-surface; padding: 20rpx $uni-space-page; display: flex; align-items: center; gap: 16rpx; box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.06); z-index: 10; }
 .detail-footer { position: fixed; bottom: 0; left: 0; right: 0; background: $app-surface; padding: 20rpx $uni-space-page; display: flex; align-items: center; gap: 16rpx; box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.06); z-index: 10; }
 .share-btn { height: 72rpx; padding: 0 $uni-space-page; background: linear-gradient(135deg, $brand-primary, $brand-primary-light); border-radius: 24rpx; display: flex; align-items: center; justify-content: center; border: none; }
 .share-btn { height: 72rpx; padding: 0 $uni-space-page; background: linear-gradient(135deg, $brand-primary, $brand-primary-light); border-radius: 24rpx; display: flex; align-items: center; justify-content: center; border: none; }
 .share-btn::after { border: none; }
 .share-btn::after { border: none; }
-.share-btn-icon { font-size: calc(30rpx * var(--font-scale, 1)); margin-right: 8rpx; }
+.share-btn-icon { width: calc(34rpx * var(--font-scale, 1)); height: calc(34rpx * var(--font-scale, 1)); margin-right: 8rpx; flex-shrink: 0; }
 .share-btn-text { font-size: calc(26rpx * var(--font-scale, 1)); color: $app-surface; font-weight: 600; }
 .share-btn-text { font-size: calc(26rpx * var(--font-scale, 1)); color: $app-surface; font-weight: 600; }
 
 
 .listen-btn { height: 72rpx; padding: 0 $uni-space-page; background: rgba(14, 165, 233, 0.1); border: 2rpx solid $uni-info; border-radius: 24rpx; display: flex; align-items: center; justify-content: center; }
 .listen-btn { height: 72rpx; padding: 0 $uni-space-page; background: rgba(14, 165, 233, 0.1); border: 2rpx solid $uni-info; border-radius: 24rpx; display: flex; align-items: center; justify-content: center; }

+ 2 - 2
cfc-frontend/pages/discover-detail/product-detail/product-detail.vue

@@ -159,7 +159,7 @@
     <view class="bottom-bar" v-if="!loading && product.id">
     <view class="bottom-bar" v-if="!loading && product.id">
       <view class="action-left">
       <view class="action-left">
         <view class="action-extra">
         <view class="action-extra">
-          <button class="btn-share" @click="onShareProduct"><text class="btn-share-icon">🖼</text><text class="btn-share-text">生成海报</text></button>
+          <button class="btn-share" @click="onShareProduct"><image class="btn-share-icon" src="/static/icons/poster.png" mode="aspectFit" /><text class="btn-share-text">生成海报</text></button>
         </view>
         </view>
       </view>
       </view>
       <view class="action-right">
       <view class="action-right">
@@ -1259,7 +1259,7 @@ export default {
   font-weight: 600;
   font-weight: 600;
   text-align: center;
   text-align: center;
 }
 }
-.btn-share-icon { font-size: calc(28rpx * var(--font-scale, 1)); margin-right: 6rpx; }
+.btn-share-icon { width: calc(32rpx * var(--font-scale, 1)); height: calc(32rpx * var(--font-scale, 1)); margin-right: 6rpx; flex-shrink: 0; }
 .btn-share-text { font-size: calc(24rpx * var(--font-scale, 1)); }
 .btn-share-text { font-size: calc(24rpx * var(--font-scale, 1)); }
 
 
 /* 配送信息 */
 /* 配送信息 */

+ 2 - 2
cfc-frontend/pages/guide/packages/share.vue

@@ -23,7 +23,7 @@
       </view>
       </view>
       
       
       <view class="option-item" @click="generatePoster">
       <view class="option-item" @click="generatePoster">
-        <text class="option-icon">🖼️</text>
+        <image class="option-icon" src="/static/icons/poster.png" mode="aspectFit" />
         <text class="option-text">生成分享海报</text>
         <text class="option-text">生成分享海报</text>
       </view>
       </view>
       
       
@@ -190,7 +190,7 @@ export default {
 
 
 .option-item { display: flex; align-items: center; padding: $uni-space-lg 0; border-bottom: 1rpx solid $facade-fill; }
 .option-item { display: flex; align-items: center; padding: $uni-space-lg 0; border-bottom: 1rpx solid $facade-fill; }
 .option-item:last-child { border-bottom: none; }
 .option-item:last-child { border-bottom: none; }
-.option-icon { font-size: calc(40rpx * var(--font-scale, 1)); margin-right: 20rpx; }
+.option-icon { width: calc(44rpx * var(--font-scale, 1)); height: calc(44rpx * var(--font-scale, 1)); margin-right: 20rpx; flex-shrink: 0; }
 .option-text { font-size: calc(28rpx * var(--font-scale, 1)); color: $facade-text-strong; }
 .option-text { font-size: calc(28rpx * var(--font-scale, 1)); color: $facade-text-strong; }
 
 
 .poster-popup { background: $app-surface; border-radius: 16rpx; padding: $uni-space-page; width: 600rpx; }
 .poster-popup { background: $app-surface; border-radius: 16rpx; padding: $uni-space-page; width: 600rpx; }

BIN
cfc-frontend/static/icons/poster-white.png


BIN
cfc-frontend/static/icons/poster.png