Преглед на файлове

fix(frontend): 统一文章/商品/活动页海报入口按钮为「生成海报」胶囊样式

Sisyphus преди 1 седмица
родител
ревизия
f832363b87

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

@@ -87,8 +87,8 @@
       </view>
       <view class="action-btns">
         <button class="share-btn" @click="generatePoster">
-          <text class="share-btn-icon">📤</text>
-          <text class="share-btn-text">分享</text>
+          <text class="share-btn-icon">🖼</text>
+          <text class="share-btn-text">生成海报</text>
         </button>
         <!-- 报名按钮(仅报名中/未报名时显示) -->
         <button
@@ -1241,10 +1241,10 @@ export default {
   border-radius: 40rpx; padding: 20rpx; font-size: 28rpx;
   text-align: center;
 }
-.share-btn { height: 64rpx; line-height: 64rpx; background: #f5f5f5; color: #666; font-size: 24rpx; border-radius: 32rpx; padding: 0 20rpx; display: flex; align-items: center; border: none; flex-shrink: 0; }
+.share-btn { height: 64rpx; line-height: 64rpx; background: #fff; border: 2rpx solid #F97316; color: #F97316; font-size: 24rpx; border-radius: 32rpx; padding: 0 24rpx; display: flex; align-items: center; flex-shrink: 0; }
 .share-btn::after { border: none; }
-.share-btn-icon { font-size: 28rpx; margin-right: 4rpx; }
-.share-btn-text { font-size: 24rpx; }
+.share-btn-icon { font-size: 28rpx; margin-right: 6rpx; }
+.share-btn-text { font-size: 24rpx; font-weight: 600; }
 
 /* 报名表单弹窗 */
 .reg-modal-overlay {

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

@@ -44,6 +44,7 @@
       <view class="detail-footer">
         <view class="share-btn" @click="generatePoster">
           <text class="share-btn-icon">🖼</text>
+          <text class="share-btn-text">生成海报</text>
         </view>
       </view>
     </template>
@@ -333,9 +334,10 @@ export default {
 .detail-body { padding: 0 30rpx; font-size: 28rpx; color: #444; line-height: 1.8; }
 
 .detail-footer { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; padding: 20rpx 30rpx; 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; width: 72rpx; background: #f5f5f5; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: none; }
+.share-btn { height: 72rpx; padding: 0 30rpx; background: linear-gradient(135deg, #F97316, #FB923C); border-radius: 36rpx; display: flex; align-items: center; justify-content: center; border: none; }
 .share-btn::after { border: none; }
-.share-btn-icon { font-size: 32rpx; }
+.share-btn-icon { font-size: 30rpx; margin-right: 8rpx; }
+.share-btn-text { font-size: 26rpx; color: #fff; font-weight: 600; }
 
 /* 答题弹窗 */
 .quiz-mask, .result-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 999; display: flex; align-items: center; justify-content: center; }

+ 11 - 6
cfc-frontend/pages/discover-detail/product-detail/product-detail.vue

@@ -130,7 +130,7 @@
     <view class="bottom-bar" v-if="!loading && product.id">
       <view class="action-left">
         <view class="action-extra">
-          <button class="btn-share" @click="onShareProduct">🖼</button>
+          <button class="btn-share" @click="onShareProduct"><text class="btn-share-icon">🖼</text><text class="btn-share-text">生成海报</text></button>
         </view>
       </view>
       <view class="action-right">
@@ -1033,16 +1033,21 @@ export default {
 }
 .btn-share {
   background: #fff;
-  border: 2rpx solid #ddd;
-  font-size: 30rpx;
-  padding: 0;
+  border: 2rpx solid #F97316;
+  font-size: 24rpx;
+  padding: 0 24rpx;
   height: 64rpx;
-  width: 64rpx;
   line-height: 64rpx;
-  border-radius: 50%;
+  border-radius: 32rpx;
   margin-right: 16rpx;
+  display: flex;
+  align-items: center;
+  color: #F97316;
+  font-weight: 600;
   text-align: center;
 }
+.btn-share-icon { font-size: 28rpx; margin-right: 6rpx; }
+.btn-share-text { font-size: 24rpx; }
 
 /* 配送信息 */
 .delivery-info-section {