fix(diy-recommend-code): H5 立即分享按钮居中问题修复

之前 H5 平台下 view fallback 的样式: display:flex; justify-content:center; align-items:center; width:100%; height:80rpx; ... 在某些情况下未生效(可能与 box-shadow / border-radius / box-sizing 互动有关)，导致按钮在 H5 中贴左显示。修复方案:改用经典的双层结构: - 外层 view: text-align:center; (行内元素自动居中) - 内层 view: display:inline-block; width 按 padding 自适应这种结构 uniapp H5 / 小程序 / APP 各端都稳定支持。修改点: - gradient 预设(L119): 黄橙渐变胶囊 - minimal 预设(L187): 红橙渐变胶囊 - card 预设(L238): 白底红边胶囊 - horizontal 预设(L295): 不变(靠右浮动按钮,已有 flex-end 对齐) - gradient 复制按钮父级(L106): 同步改 text-align:center + inline-flex (修复 H5 下 fit-content + flex 在某些机型失效导致按钮偏左) 影响:仅修改 H5 平台的 view fallback 样式(实际渲染层),小程序/APP 端 button 路径未改动。
2026-08-08 09:19:23 +08:00
parent ee050f5df9
commit ab727eef1d
2 changed files with 16 additions and 10 deletions
--- a/components-diy/diy-recommend-code.vue
+++ b/components-diy/diy-recommend-code.vue
@@ -103,10 +103,10 @@
          <text :style="{ fontSize: px2rpx(Math.max(16, Math.min(48, (Number(value.codeFontSize) || 28) * 0.93))) + 'rpx', fontWeight: '900', color: value.codeColor || '#DC143C', letterSpacing: '2rpx', fontFamily: 'Courier New, monospace' }">{{ code || value.placeholderCode || 'ABCD1234' }}</text>
        </view>
        <!-- 复制推荐码按钮：白色小按钮，红边框，在推荐码下方居中 -->
-        <view v-if="value.showCopyButton !== false" style="margin-top:16rpx;display:flex;justify-content:center;">
-          <view @tap="copyRecommendCode" :style="{ width: 'fit-content', height: '60rpx', display: 'flex', justifyContent: 'center', alignItems: 'center', background: '#FFFFFF', border: '2rpx solid ' + (value.codeColor || '#DC143C'), borderRadius: '30rpx', padding: '0 32rpx', gap: '8rpx' }">
+        <view v-if="value.showCopyButton !== false" style="margin-top:16rpx;text-align:center;">
+          <view @tap="copyRecommendCode" style="display:inline-flex;align-items:center;background:#FFFFFF;border:2rpx solid #DC143C;border-radius:30rpx;padding:0 32rpx;height:60rpx;gap:8rpx;">
            <text style="font-size:22rpx;">📋</text>
-            <text :style="{ fontSize: '24rpx', color: value.codeColor || '#DC143C', fontWeight: '600' }">{{ nc.copyButtonText || '复制推荐码' }}</text>
+            <text style="font-size:24rpx;color:#DC143C;font-weight:600;">{{ nc.copyButtonText || '复制推荐码' }}</text>
          </view>
        </view>
      </view>
@@ -116,8 +116,10 @@
      <button v-if="value.showShareButton !== false && !isH5Platform" open-type="share" @tap="onShareClick" :style="{ marginTop: '16rpx', height: '80rpx', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', background: 'linear-gradient(90deg,#FFC107 0%,#FF8F00 100%)', borderRadius: '40rpx', boxShadow: '0 4rpx 12rpx rgba(255,143,0,0.3)', position: 'relative', zIndex: '1', border: 'none', lineHeight: '1' }">
        <text :style="{ fontSize: '28rpx', fontWeight: '700', color: '#FFFFFF' }">📤 {{ value.buttonText || '立即分享' }}</text>
      </button>
-      <view v-else-if="value.showShareButton !== false" @tap="onShareClick" :style="{ marginTop: '16rpx', height: '80rpx', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', background: 'linear-gradient(90deg,#FFC107 0%,#FF8F00 100%)', borderRadius: '40rpx', boxShadow: '0 4rpx 12rpx rgba(255,143,0,0.3)', position: 'relative', zIndex: '1', lineHeight: '1', boxSizing: 'border-box' }">
-        <text :style="{ fontSize: '28rpx', fontWeight: '700', color: '#FFFFFF' }">📤 {{ nc.buttonText || '立即分享' }}</text>
+      <view v-else-if="value.showShareButton !== false" @tap="onShareClick" style="margin-top:16rpx;text-align:center;">
+        <view style="display:inline-block;height:80rpx;line-height:80rpx;padding:0 40rpx;background:linear-gradient(90deg,#FFC107 0%,#FF8F00 100%);border-radius:40rpx;box-shadow:0 4rpx 12rpx rgba(255,143,0,0.3);box-sizing:border-box;">
+          <text style="font-size:28rpx;font-weight:700;color:#FFFFFF;">📤 {{ nc.buttonText || '立即分享' }}</text>
+        </view>
      </view>
      <!-- showLink -->
      <view v-if="isFeatureOn(value.showLink)" style="margin-top:20rpx;text-align:center;position:relative;z-index:1;">
@@ -182,8 +184,10 @@
      <button v-if="value.showShareButton !== false && !isH5Platform" open-type="share" @tap="onShareClick" :style="{ marginTop: '16rpx', height: '76rpx', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', background: 'linear-gradient(90deg,#FF6B6B 0%,#FF4444 100%)', borderRadius: '38rpx', boxShadow: '0 4rpx 12rpx rgba(255,68,68,0.3)', position: 'relative', zIndex: '1', border: 'none', lineHeight: '1' }">
        <text :style="{ fontSize: '27rpx', fontWeight: '700', color: '#FFFFFF' }">📤 {{ value.buttonText || '立即分享' }}</text>
      </button>
-      <view v-else-if="value.showShareButton !== false" @tap="onShareClick" :style="{ marginTop: '16rpx', height: '76rpx', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', background: 'linear-gradient(90deg,#FF6B6B 0%,#FF4444 100%)', borderRadius: '38rpx', boxShadow: '0 4rpx 12rpx rgba(255,68,68,0.3)', position: 'relative', zIndex: '1', lineHeight: '1', boxSizing: 'border-box' }">
-        <text :style="{ fontSize: '27rpx', fontWeight: '700', color: '#FFFFFF' }">📤 {{ nc.buttonText || '立即分享' }}</text>
+      <view v-else-if="value.showShareButton !== false" @tap="onShareClick" style="margin-top:16rpx;text-align:center;">
+        <view style="display:inline-block;height:76rpx;line-height:76rpx;padding:0 40rpx;background:linear-gradient(90deg,#FF6B6B 0%,#FF4444 100%);border-radius:38rpx;box-shadow:0 4rpx 12rpx rgba(255,68,68,0.3);box-sizing:border-box;">
+          <text style="font-size:27rpx;font-weight:700;color:#FFFFFF;">📤 {{ nc.buttonText || '立即分享' }}</text>
+        </view>
      </view>
      <!-- showLink -->
      <view v-if="isFeatureOn(value.showLink)" style="margin-top:16rpx;text-align:center;position:relative;z-index:1;">
@@ -233,8 +237,10 @@
      <button v-if="value.showShareButton !== false && !isH5Platform" open-type="share" @tap="onShareClick" :style="{ marginTop: '16rpx', height: '76rpx', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', background: '#FFFFFF', border: '2rpx solid ' + (value.codeColor || '#FF6B6B'), borderRadius: '38rpx', position: 'relative', zIndex: '1', lineHeight: '1' }">
        <text :style="{ fontSize: '27rpx', fontWeight: '600', color: value.codeColor || '#FF6B6B' }">📤 {{ value.buttonText || '立即分享' }}</text>
      </button>
-      <view v-else-if="value.showShareButton !== false" @tap="onShareClick" :style="{ marginTop: '16rpx', height: '76rpx', width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', background: '#FFFFFF', border: '2rpx solid ' + (nc.codeColor || '#FF6B6B'), borderRadius: '38rpx', position: 'relative', zIndex: '1', lineHeight: '1', boxSizing: 'border-box' }">
-        <text :style="{ fontSize: '27rpx', fontWeight: '600', color: nc.codeColor || '#FF6B6B' }">📤 {{ nc.buttonText || '立即分享' }}</text>
+      <view v-else-if="value.showShareButton !== false" @tap="onShareClick" style="margin-top:16rpx;text-align:center;">
+        <view style="display:inline-block;height:76rpx;line-height:76rpx;padding:0 40rpx;background:#FFFFFF;border:2rpx solid #FF6B6B;border-radius:38rpx;box-sizing:border-box;">
+          <text style="font-size:27rpx;font-weight:600;color:#FF6B6B;">📤 {{ nc.buttonText || '立即分享' }}</text>
+        </view>
      </view>
      <!-- showLink -->
      <view v-if="isFeatureOn(value.showLink)" style="margin-top:16rpx;text-align:center;position:relative;z-index:1;">
--- a/pages.json
+++ b/pages.json
@@ -2154,7 +2154,7 @@
 					"style": {
 						// APP 端原本就是 custom；微信小程序 / 华为快应用 / 鸿蒙元服务
 						// 的原生 navbar 不支持自定义左侧 Home 按钮，需要切到 custom 自绘
-						// #ifdef APP-PLUS || MP-WEIXIN || QUICKAPP-WEBVIEW || HARMONY
+						// #ifdef APP-PLUS || MP
 						"navigationStyle": "custom",
 						// #endif
 						"navigationBarTitleText": "",