feat(share): 微信浏览器字号调整问题处理

pages/mine/share/index.vue

@@ -7,39 +7,52 @@
       <!-- 微信环境：只有在未生成分享图时才显示原始内容 -->
       <template v-if="!isWechat || (isWechat && !generatedImageUrl)">
         <!-- 背景图片，替代CSS background -->
-        <image
+        <img
           class="share-bg-image"
           src="/static/images/share-bg.jpg"
           mode="scaleToFill"
           crossorigin="anonymous"
           @load="onBackgroundImageLoad"
           @error="onBackgroundImageError"
-        ></image>
+        />
         <view class="share-wrapper">
           <view class="portal-frame" :class="{ 'is-loaded': isLoaded }">
             <view class="qr-code-outer">
-              <image
+              <img
                 class="qr-code"
                 :src="qrCodeImage"
                 mode="aspectFit"
                 v-if="qrCodeImage"
-              ></image>
+              />
               <view v-else class="qr-code-placeholder">
                 <view class="loader"></view>
               </view>
             </view>
-            <text
+
+            <div
               style="
-                font-size: 30rpx;
+                font-size: 26rpx;
                 color: #fff;
                 font-weight: bold;
-                margin-top: 20rpx;
+                margin-top: 10rpx;
+                text-align: center;
+                display: flex;
+                align-items: center;
+                justify-content: center;
               "
-              >{{ desensitization(userInfo.memberCode) }}</text
             >
-            <button class="share-button" @click="sharePage">
+              {{ desensitization(userInfo.memberCode) }}
-              {{ isWechat ? '长按保存图片' : '保存图片并分享' }}
+            </div>
-            </button>
+            <div v-if="!isWechat" class="share-button" @click="sharePage">
+              保存图片并分享
+            </div>
+            <img
+              v-if="isWechat"
+              class="share-btn"
+              style="margin-top: 50rpx"
+              src="/static/images/share-btn.svg"
+              mode="scaleToFill"
+            />
           </view>
           <!-- <image
             class="share-bg-logo"
@@ -357,7 +370,7 @@ export default {
 .share-wrapper {
   position: absolute;
   z-index: 2;
-  bottom: 260rpx;
+  bottom: 280rpx;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -378,6 +391,7 @@ export default {
   flex-direction: column;
   align-items: center;
   margin: 0 auto;
+  text-align: center;
 }
 
 .portal-frame.is-loaded {
@@ -444,43 +458,25 @@ export default {
   color: #888;
 }
 
-/* Unified style for both the real button and the fake one (which is a view) */
 .share-button {
-  margin-top: 28rpx; /* 从32rpx减小到28rpx */
+  margin-top: 58rpx; /* 从32rpx减小到28rpx */
-  width: 280rpx; /* 设置固定宽度 */
+  width: 380rpx; /* 设置固定宽度 */
-  height: 72rpx; /* 从88rpx减小到72rpx */
-  line-height: 72rpx;
   color: #fff;
   border-radius: 36rpx; /* 从44rpx减小到36rpx */
-  font-size: 26rpx; /* 从30rpx减小到26rpx */
+  font-size: 16rpx; /* 从30rpx减小到26rpx */
   font-weight: 500;
-  /* 更精细的渐变 */
+  padding: 12rpx 0;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  box-shadow: 0 5rpx 12rpx 0 rgba(102, 126, 234, 0.2);
+  // box-shadow: 0 5rpx 12rpx 0 rgba(102, 126, 234, 0.2);
   border: none;
-  padding: 0;
+  border-radius: 70rpx;
   text-align: center;
-  transition: all 0.3s ease;
   letter-spacing: 1rpx;
 }
 
-/* The real button needs to override some uni-app defaults */
-button.share-button {
-  padding: 0;
-  line-height: 72rpx; /* 更新行高到72rpx */
-  border: none;
-}
-
-.share-button:active {
-  transform: translateY(1rpx);
-  box-shadow: 0 4rpx 10rpx rgba(102, 126, 234, 0.4);
-  background: linear-gradient(
-    135deg,
-    #5a67d8 0%,
-    #6b46c1 100%
-  ); /* 按下时的渐变 */
-}
-
 /* 微信环境全屏覆盖样式 */
 .wechat-fullscreen-overlay {
   position: absolute;

static/images/share-btn.svg

@@ -0,0 +1,68 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="160" height="40" viewBox="0 0 160 40">
+  <defs>
+    <!-- 科技感渐变背景 -->
+    <linearGradient id="techGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#6B46C1;stop-opacity:1" />
+      <stop offset="30%" style="stop-color:#8B5CF6;stop-opacity:1" />
+      <stop offset="70%" style="stop-color:#7C3AED;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#5B21B6;stop-opacity:1" />
+    </linearGradient>
+
+    <!-- 科技感光效 -->
+    <radialGradient id="glowEffect" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" style="stop-color:#A78BFA;stop-opacity:0.4" />
+      <stop offset="50%" style="stop-color:#8B5CF6;stop-opacity:0.2" />
+      <stop offset="100%" style="stop-color:#4C1D95;stop-opacity:0" />
+    </radialGradient>
+
+    <!-- 边框光效 -->
+    <linearGradient id="borderGlow" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#A78BFA;stop-opacity:0.6" />
+      <stop offset="50%" style="stop-color:#DDD6FE;stop-opacity:0.9" />
+      <stop offset="100%" style="stop-color:#A78BFA;stop-opacity:0.6" />
+    </linearGradient>
+  </defs>
+
+  <!-- 主背景 - 圆角矩形 -->
+  <rect x="1" y="1" width="158" height="38" rx="8" ry="8" fill="url(#techGradient)" stroke="url(#borderGlow)" stroke-width="1"/>
+
+  <!-- 科技感光效层 -->
+  <rect x="1" y="1" width="158" height="38" rx="8" ry="8" fill="url(#glowEffect)"/>
+
+  <!-- 科技感装饰线条 -->
+  <g opacity="0.4">
+    <!-- 左上角装饰 -->
+    <path d="M8 8 L18 8 L18 13" stroke="#C4B5FD" stroke-width="0.8" fill="none"/>
+    <circle cx="8" cy="8" r="1.5" fill="#A78BFA"/>
+
+    <!-- 右下角装饰 -->
+    <path d="M152 32 L142 32 L142 27" stroke="#C4B5FD" stroke-width="0.8" fill="none"/>
+    <circle cx="152" cy="32" r="1.5" fill="#A78BFA"/>
+
+    <!-- 中间装饰点 -->
+    <circle cx="30" cy="28" r="0.8" fill="#DDD6FE" opacity="0.7"/>
+    <circle cx="130" cy="12" r="0.8" fill="#C4B5FD" opacity="0.6"/>
+    <circle cx="140" cy="18" r="0.8" fill="#A78BFA" opacity="0.8"/>
+
+    <!-- 额外科技感元素 -->
+    <path d="M25 15 L35 15" stroke="#E4E4FF" stroke-width="0.5" opacity="0.5"/>
+    <path d="M125 25 L135 25" stroke="#E4E4FF" stroke-width="0.5" opacity="0.5"/>
+    <circle cx="45" cy="12" r="0.5" fill="#F3F0FF" opacity="0.4"/>
+    <circle cx="115" cy="28" r="0.5" fill="#F3F0FF" opacity="0.4"/>
+  </g>
+
+  <!-- 主文字 -->
+  <text x="80" y="20" text-anchor="middle" dominant-baseline="middle"
+        font-family="'PingFang SC', 'Microsoft YaHei', Arial, sans-serif"
+        font-size="14" font-weight="500" fill="white">
+    长按保存图片
+  </text>
+
+  <!-- 文字光效 -->
+  <text x="80" y="20" text-anchor="middle" dominant-baseline="middle"
+        font-family="'PingFang SC', 'Microsoft YaHei', Arial, sans-serif"
+        font-size="14" font-weight="500" fill="white" opacity="0.3"
+        style="filter: blur(1px);">
+    长按保存图片
+  </text>
+</svg>