测试

HBuilderProjects/shareAiConsult.html

@@ -48,7 +48,7 @@
       overflow-x: hidden;
       overflow-y: auto;
       -webkit-overflow-scrolling: touch;
-      padding-bottom: calc(92px + var(--safe-bottom));
+      padding-bottom: calc(100px + var(--safe-bottom));
     }
 
     .hero {
@@ -180,62 +180,59 @@
       font-size: 14px;
     }
 
-    .footer {
+    .fab-wrap {
       position: fixed;
       left: 0;
       right: 0;
       bottom: 0;
-      z-index: 20;
-      padding: 10px 15px calc(10px + var(--safe-bottom));
-      background: linear-gradient(180deg, rgba(244, 246, 251, 0) 0%, #f4f6fb 36%);
+      z-index: 200;
+      padding: 12px 24px calc(12px + var(--safe-bottom));
+      background: linear-gradient(to top, rgba(255, 255, 255, 0.98) 70%, transparent);
       pointer-events: none;
     }
 
-    .footer__dock {
-      display: flex;
-      justify-content: center;
+    .fab-dock__slot {
       width: 100%;
+      max-width: 198px;
+      height: 48px;
+      margin: 0 auto;
       pointer-events: auto;
     }
 
-    .footer__btn-slot {
-      width: 100%;
-      max-width: 280px;
-      height: 48px;
-      margin: 0 auto;
+    #openApp.fab {
+      padding: 0 10px;
+      -webkit-font-smoothing: antialiased;
+      text-rendering: optimizeLegibility;
     }
 
-    .continue-btn {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      height: 48px;
-      margin: 0;
-      padding: 0;
-      border: none;
-      border-radius: 999px;
-      background: linear-gradient(90deg, #ffb84c 0%, #ff6b3e 100%);
-      box-shadow: 0 4px 16px rgba(255, 107, 62, 0.32);
-      touch-action: manipulation;
-      -webkit-tap-highlight-color: transparent;
+    .fab__brand-clip {
+      display: block;
+      flex-shrink: 0;
+      line-height: 0;
     }
 
-    .continue-btn__label {
+    .fab__brand-img {
       display: block;
-      height: 20px;
+      height: 26px;
       width: auto;
-      max-width: 90%;
+      max-width: none;
       pointer-events: none;
       -webkit-user-drag: none;
     }
 
+    .fab__label {
+      font-size: 15px;
+      line-height: 1;
+      letter-spacing: 0.04em;
+      white-space: nowrap;
+    }
+
     #launch-btn {
       display: none;
       width: 100%;
       height: 48px;
       min-height: 48px;
-      border-radius: 999px;
+      border-radius: 24px;
       overflow: hidden;
       opacity: 1;
     }
@@ -244,10 +241,46 @@
       display: block;
     }
 
-    body.is-wechat.wx-jssdk-ready #btnContinue {
+    body.is-wechat.wx-jssdk-ready #openApp {
       display: none !important;
     }
 
+    .fab-wrap .fab {
+      pointer-events: auto;
+    }
+
+    #openApp {
+      touch-action: manipulation;
+    }
+
+    .fab {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 4px;
+      width: 100%;
+      max-width: 198px;
+      margin: 0 auto;
+      height: 48px;
+      border: none;
+      border-radius: 24px;
+      background: #F47D1F;
+      color: #fff;
+      font-size: 16px;
+      font-weight: 600;
+      box-shadow: 0 4px 16px rgba(245, 130, 32, 0.45);
+      cursor: pointer;
+    }
+
+    .home-indicator {
+      height: 5px;
+      background: #000;
+      border-radius: 3px;
+      width: 134px;
+      margin: 8px auto 4px;
+      opacity: 0.2;
+    }
+
     #openAppToast {
       display: none;
       position: fixed;
@@ -274,47 +307,67 @@
 
   <div id="openAppToast" role="status" aria-live="polite"></div>
 
-  <footer class="footer">
-    <div class="footer__dock">
-      <div class="footer__btn-slot">
-        <button type="button" class="continue-btn" id="btnContinue" aria-label="和U宝继续聊">
-          <img class="continue-btn__label" src="images/uCharts.png" alt="和U宝继续聊" decoding="async">
-        </button>
-        <wx-open-launch-app id="launch-btn" appid="wxf5f1efe3a9f5012e" extinfo="">
-          <script type="text/wxtag-template">
-            <style>
-              .wx-open-app-btn {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                width: 100%;
-                height: 48px;
-                margin: 0;
-                padding: 0;
-                border: none;
-                border-radius: 999px;
-                background: linear-gradient(90deg, #ffb84c 0%, #ff6b3e 100%);
-                box-shadow: 0 4px 16px rgba(255, 107, 62, 0.32);
-                cursor: pointer;
-                -webkit-tap-highlight-color: transparent;
-                box-sizing: border-box;
-              }
-              .wx-open-app-btn__label {
-                display: block;
-                height: 20px;
-                width: auto;
-                max-width: 90%;
-                pointer-events: none;
-              }
-            </style>
-            <button class="wx-open-app-btn" aria-label="和U宝继续聊">
-              <img class="wx-open-app-btn__label" src="https://prod.ailien.shop/h5/HBuilderProjects/images/uCharts.png" alt="和U宝继续聊" decoding="async">
-            </button>
-          </script>
-        </wx-open-launch-app>
-      </div>
+  <div class="fab-wrap">
+    <div class="fab-dock__slot">
+      <button type="button" class="fab" id="openApp" aria-label="APP内打开">
+        <span class="fab__brand-clip" aria-hidden="true">
+          <img class="fab__brand-img" src="images/uCharts.png" alt="" decoding="async">
+        </span>
+      </button>
+      <wx-open-launch-app id="launch-btn" appid="wxf5f1efe3a9f5012e" extinfo="">
+        <script type="text/wxtag-template">
+          <style>
+            .wx-open-app-btn {
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              gap: 4px;
+              width: 100%;
+              height: 48px;
+              margin: 0;
+              padding: 0 10px;
+              border: none;
+              border-radius: 24px;
+              background: #F47D1F;
+              box-shadow: 0 4px 16px rgba(245, 130, 32, 0.45);
+              color: #fff;
+              font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif;
+              -webkit-font-smoothing: antialiased;
+              cursor: pointer;
+              overflow: hidden;
+              -webkit-tap-highlight-color: transparent;
+              box-sizing: border-box;
+            }
+            .wx-open-app-btn .fab__brand-clip {
+              display: block;
+              flex-shrink: 0;
+              line-height: 0;
+            }
+            .wx-open-app-btn .fab__brand-img {
+              display: block;
+              height: 26px;
+              width: auto;
+              max-width: none;
+              pointer-events: none;
+              -webkit-user-drag: none;
+            }
+            .wx-open-app-btn .fab__label {
+              font-size: 15px;
+              line-height: 1;
+              letter-spacing: 0.04em;
+              white-space: nowrap;
+            }
+          </style>
+          <button class="wx-open-app-btn" aria-label="APP内打开">
+            <span class="fab__brand-clip" aria-hidden="true">
+              <img class="fab__brand-img" src="https://prod.ailien.shop/h5/HBuilderProjects/images/uCharts.png" alt="" decoding="async">
+            </span>
+          </button>
+        </script>
+      </wx-open-launch-app>
     </div>
-  </footer>
+    <div class="home-indicator" aria-hidden="true"></div>
+  </div>
 
   <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
   <script>
@@ -1223,10 +1276,10 @@
           console.warn("[WeixinOpenTagsError]", e && e.detail);
         });
 
-        var btnContinue = document.getElementById("btnContinue");
-        if (btnContinue) {
+        var openBtnWx = document.getElementById("openApp");
+        if (openBtnWx) {
           if (isWeChatInAppBrowser()) {
-            btnContinue.addEventListener("click", function () {
+            openBtnWx.addEventListener("click", function () {
               if (!weChatJssdkConfigured) {
                 showFabToast(
                   wxInitLastError || "微信 SDK 初始化中，请稍候再点底部按钮"
@@ -1235,7 +1288,7 @@
               }
             });
           } else {
-            btnContinue.addEventListener("click", tryOpenApp);
+            openBtnWx.addEventListener("click", tryOpenApp);
           }
         }