diff --git a/build.sh b/build.sh
index e4990ac..f7531c5 100755
--- a/build.sh
+++ b/build.sh
@@ -1,5 +1,9 @@
 
 set -e
+# webpack 4 在 Node 17+ 下需要旧版 OpenSSL 算法，Node 16 及以下不支持该参数
+if [ "$(node -p 'process.versions.node.split(".")[0]')" -ge 17 ]; then
+  export NODE_OPTIONS="--openssl-legacy-provider"
+fi
 pnpm run build
 zip -q -r dist.zip dist
 #黄果落地页地址 ：https://hgmj.com
diff --git a/public/index.html b/public/index.html
index 2261800..c923c21 100644
--- a/public/index.html
+++ b/public/index.html
@@ -10,20 +10,20 @@
   <meta name="screen-orientation" content="portrait" />
   <meta name="x5-orientation" content="portrait" />
   <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
-  <title>黄果漫剧 APP下载 ｜ 百万大神短剧原创 海量资源免费</title>
-  <meta name="description" content="黄果漫剧 成人短剧 AI短剧 国产情侣 国产原创 真实自拍  反差婊 性奴母狗 极品学妹 童颜巨乳 宿舍自慰 偷情少妇 学生泄密 探花精选" />
-  <meta name="keywords" content="黄果漫剧 成人短剧 AI短剧 国产情侣 国产原创 真实自拍  反差婊 性奴母狗 极品学妹 童颜巨乳 宿舍自慰 偷情少妇 学生泄密 探花精选" />
+  <title>黄果漫剧 APP下载 ｜ AI漫剧原创平台 海量好剧免费看</title>
+  <meta name="description" content="黄果漫剧，AI漫剧原创平台。AI漫剧、AI短剧、AI换脸、AI魔改，不同主题不同惊喜，热门好剧天天上新。" />
+  <meta name="keywords" content="黄果漫剧 AI漫剧 成人漫剧 漫剧 动漫短剧 AI短剧 AI换脸 AI魔改 国漫 古风 穿越 逆袭" />
 <!--  <meta name="rating" content="RTA-5042-1996-1400-1577-RTA" />-->
 <!--  <meta name="rating" content="adult" />-->
 <!--  <meta name="robots" content="index, follow" />-->
 
-  <meta property="og:title" content="黄果漫剧 APP下载 ｜ 百万大神短剧原创 海量资源免费" />
+  <meta property="og:title" content="黄果漫剧 APP下载 ｜ AI漫剧原创平台 海量好剧免费看" />
   <meta property="og:site_name" content="黄果漫剧" />
   <meta property="og:type" content="article" />
-  <meta property="og:description" content="黄果漫剧 成人短剧 AI短剧 国产情侣 国产原创 真实自拍  反差婊 性奴母狗 极品学妹 童颜巨乳 宿舍自慰 偷情少妇 学生泄密 探花精选" />
+  <meta property="og:description" content="黄果漫剧，AI漫剧原创平台。AI漫剧、AI短剧、AI换脸、AI魔改，不同主题不同惊喜，热门好剧天天上新。" />
 
-  <meta name="twitter:title" content="黄果漫剧 APP下载 ｜ 百万大神短剧原创 海量资源免费" />
-  <meta name="twitter:description" content="黄果漫剧 成人短剧 AI短剧 国产情侣 国产原创 真实自拍  反差婊 性奴母狗 极品学妹 童颜巨乳 宿舍自慰 偷情少妇 学生泄密 探花精选" />
+  <meta name="twitter:title" content="黄果漫剧 APP下载 ｜ AI漫剧原创平台 海量好剧免费看" />
+  <meta name="twitter:description" content="黄果漫剧，AI漫剧原创平台。AI漫剧、AI短剧、AI换脸、AI魔改，不同主题不同惊喜，热门好剧天天上新。" />
   <meta name="twitter:card" content="summary" />
   <meta name="twitter:site" content="黄果漫剧" />
 </head>
diff --git a/src/api/btn.js b/src/api/btn.js
index db48811..cd9084f 100644
--- a/src/api/btn.js
+++ b/src/api/btn.js
@@ -3,7 +3,7 @@ import request from "@/utils/request";
 // 下载相关接口对齐 huangguo_landpage，域名写死（接口已开 CORS: *）
 const STAT_API = "https://blsp01.com/api/stat/version";
 
-// 黄果短剧 App 在下载接口的 appId
+// 黄果漫剧 App 在下载接口的 appId
 export const APP_ID = 5;
 
 // 按钮开关：iosDown / iosStore / iosTF / iosH5 / androidButton，不含下载地址
diff --git a/src/assets/images/land/h5/about.webp b/src/assets/images/land/h5/about.webp
new file mode 100644
index 0000000..c8d962d
Binary files /dev/null and b/src/assets/images/land/h5/about.webp differ
diff --git a/src/assets/images/land/h5/creator.webp b/src/assets/images/land/h5/creator.webp
new file mode 100644
index 0000000..8f377b5
Binary files /dev/null and b/src/assets/images/land/h5/creator.webp differ
diff --git a/src/assets/images/land/h5/hero.webp b/src/assets/images/land/h5/hero.webp
new file mode 100644
index 0000000..ba1556d
Binary files /dev/null and b/src/assets/images/land/h5/hero.webp differ
diff --git a/src/assets/images/land/h5/highlights.webp b/src/assets/images/land/h5/highlights.webp
new file mode 100644
index 0000000..9d12b03
Binary files /dev/null and b/src/assets/images/land/h5/highlights.webp differ
diff --git a/src/assets/images/land/h5/immerse.webp b/src/assets/images/land/h5/immerse.webp
new file mode 100644
index 0000000..fb87030
Binary files /dev/null and b/src/assets/images/land/h5/immerse.webp differ
diff --git a/src/assets/images/land/h5/tutorial.webp b/src/assets/images/land/h5/tutorial.webp
new file mode 100644
index 0000000..0c041d9
Binary files /dev/null and b/src/assets/images/land/h5/tutorial.webp differ
diff --git a/src/assets/images/land/h5/types.webp b/src/assets/images/land/h5/types.webp
new file mode 100644
index 0000000..10404f7
Binary files /dev/null and b/src/assets/images/land/h5/types.webp differ
diff --git a/src/assets/images/land/h5/wish.webp b/src/assets/images/land/h5/wish.webp
new file mode 100644
index 0000000..fc39d6e
Binary files /dev/null and b/src/assets/images/land/h5/wish.webp differ
diff --git a/src/assets/images/land/icon/fast.svg b/src/assets/images/land/icon/fast.svg
new file mode 100644
index 0000000..a17d006
--- /dev/null
+++ b/src/assets/images/land/icon/fast.svg
@@ -0,0 +1,15 @@
+<svg width="95" height="95" viewBox="0 0 95 95" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="47.5" cy="47.5" r="47.5" fill="#050505"/>
+<path d="M48 61.5L25 40H38V20.5H57V40H71L48 61.5Z" fill="url(#paint0_linear_29367_193606)"/>
+<rect x="25" y="68.5" width="45" height="6" fill="url(#paint1_linear_29367_193606)"/>
+<defs>
+<linearGradient id="paint0_linear_29367_193606" x1="48" y1="20.5" x2="48" y2="61.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CCAF6B"/>
+<stop offset="1" stop-color="#ECB859"/>
+</linearGradient>
+<linearGradient id="paint1_linear_29367_193606" x1="47.5" y1="68.5" x2="47.5" y2="74.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#CCAF6B"/>
+<stop offset="1" stop-color="#ECB859"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/assets/images/land/icon/ios.svg b/src/assets/images/land/icon/ios.svg
new file mode 100644
index 0000000..ca54f17
--- /dev/null
+++ b/src/assets/images/land/icon/ios.svg
@@ -0,0 +1,10 @@
+<svg width="95" height="95" viewBox="0 0 95 95" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="47.5" cy="47.5" r="47.5" fill="url(#paint0_linear_29367_193615)"/>
+<path d="M69 43.5359C71.6667 45.0755 71.6667 48.9245 69 50.4641L39.75 67.3516C37.0833 68.8912 33.75 66.9667 33.75 63.8875L33.75 30.1125C33.75 27.0333 37.0833 25.1088 39.75 26.6484L69 43.5359Z" fill="#050505"/>
+<defs>
+<linearGradient id="paint0_linear_29367_193615" x1="47.5" y1="0" x2="47.5" y2="95" gradientUnits="userSpaceOnUse">
+<stop stop-color="#EFB955"/>
+<stop offset="1" stop-color="#CE8330"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/assets/images/land/pc/about.webp b/src/assets/images/land/pc/about.webp
new file mode 100644
index 0000000..cdcad0e
Binary files /dev/null and b/src/assets/images/land/pc/about.webp differ
diff --git a/src/assets/images/land/pc/creator.webp b/src/assets/images/land/pc/creator.webp
new file mode 100644
index 0000000..738a4c3
Binary files /dev/null and b/src/assets/images/land/pc/creator.webp differ
diff --git a/src/assets/images/land/pc/hero.webp b/src/assets/images/land/pc/hero.webp
new file mode 100644
index 0000000..aa7373e
Binary files /dev/null and b/src/assets/images/land/pc/hero.webp differ
diff --git a/src/assets/images/land/pc/highlights.webp b/src/assets/images/land/pc/highlights.webp
new file mode 100644
index 0000000..c121b73
Binary files /dev/null and b/src/assets/images/land/pc/highlights.webp differ
diff --git a/src/assets/images/land/pc/strip.webp b/src/assets/images/land/pc/strip.webp
new file mode 100644
index 0000000..a820559
Binary files /dev/null and b/src/assets/images/land/pc/strip.webp differ
diff --git a/src/assets/images/land/pc/types.webp b/src/assets/images/land/pc/types.webp
new file mode 100644
index 0000000..854638c
Binary files /dev/null and b/src/assets/images/land/pc/types.webp differ
diff --git a/src/assets/images/land/pc/wish.webp b/src/assets/images/land/pc/wish.webp
new file mode 100644
index 0000000..cd0ab8f
Binary files /dev/null and b/src/assets/images/land/pc/wish.webp differ
diff --git a/src/views/land/components/mobile1.vue b/src/views/land/components/mobile1.vue
index c8dbb0d..3c16684 100644
--- a/src/views/land/components/mobile1.vue
+++ b/src/views/land/components/mobile1.vue
@@ -1,79 +1,82 @@
 <template>
-  <div class="mobilePage">
-    <div class="headerBox" :class="{ isIos: isIos }">
-      <div class="navBrand">
-        <img class="logoBox" :src="logoHeader" alt="黄果漫剧" />
-        <div class="brandCopy">
-          <p class="brandTitle">黄果漫剧 原创基地</p>
-          <p class="brandDesc">沉浸体验 极速观影</p>
+  <div class="mobilePage" ref="page" @scroll="onScroll">
+    <header class="topBar">
+      <img class="topLogo" :src="logo" alt="黄果漫剧" />
+      <span class="topBrand goldText">黄果漫剧</span>
+    </header>
+
+    <div class="track">
+      <img
+        v-for="item in sections"
+        :key="item.id"
+        :id="item.id"
+        class="section"
+        :src="item.src"
+        alt=""
+        @click.stop="getApkInfo(primaryFlag)"
+      />
+
+      <footer class="footer">
+        <div class="footerBrand">
+          <img class="footerLogo" :src="logo" alt="黄果漫剧" />
+          <span class="footerName goldText">黄果漫剧</span>
+          <span class="footerSlogan">随时随地，开启漫剧世界</span>
+        </div>
+        <p class="copyright">
+          Copyright © 2026 黄果漫剧. All Rights Reserved.
+        </p>
+      </footer>
+      <div class="dockSpacer"></div>
+    </div>
+
+    <div class="floatBar">
+      <img
+        class="tutorialBtn"
+        :src="tutorialImg"
+        alt="安装教程"
+        @click.stop="showInstallTutorial(isIos ? 'ios' : 'android')"
+      />
+      <div class="backTopBox">
+        <div
+          class="backTop"
+          :class="{ show: showBackTop }"
+          @click.stop="backToTop"
+        >
+          <svg viewBox="0 0 24 24" fill="none">
+            <path
+              d="M5 3.5h14"
+              stroke="#050505"
+              stroke-width="2.6"
+              stroke-linecap="round"
+            />
+            <path
+              d="M12 21V8.5M6.5 13.5 12 8l5.5 5.5"
+              stroke="#050505"
+              stroke-width="2.6"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
         </div>
       </div>
-      <div
-        class="iosBanner"
-        @click.stop="getApkInfo(hasShopIos ? 'shopIos' : true, $event)"
-      ></div>
-      <div
-        v-if="isIos"
-        class="iosLiteBar"
-        @click.stop="getApkInfo(true, $event)"
-      ></div>
     </div>
 
-    <div class="pageBody" :class="{ isIos: isIos, hasShop: hasShopIos }">
-      <div class="contentPanel">
-        <van-tabs
-          v-model="tabActive"
-          title-active-color="#ffffff"
-          title-inactive-color="#ffffff"
-          :ellipsis="false"
-          animated
-          :lazy-render="false"
-          :before-change="onTabBeforeChange"
-          class="vantTabs"
+    <div class="dock">
+      <div class="dockBtns">
+        <div class="dockBtn fast" @click.stop="getApkInfo(primaryBtn.flag)">
+          <img class="dockIcon" :src="fastIcon" alt="" />
+          <span>{{ primaryBtn.text }}</span>
+        </div>
+        <div
+          v-if="secondaryBtn"
+          class="dockBtn backup"
+          @click.stop="getApkInfo(secondaryBtn.flag)"
         >
-          <van-tab
-            :title="item.label"
-            :name="item.value"
-            v-for="item in tabs"
-            :key="item.value"
-          >
-            <div
-              class="main"
-              @click.stop="getApkInfo(hasShopIos ? 'shopIos' : true, $event)"
-            >
-              <div
-                class="contentGrid"
-                :class="{ portrait: item.value === 'ai' }"
-              >
-                <div
-                  class="gridItem"
-                  v-for="card in tabContents[item.value]"
-                  :key="card.id"
-                >
-                  <img class="gridThumb" :src="card.thumb" alt="" />
-                  <p class="gridText">{{ card.title }}</p>
-                </div>
-              </div>
-            </div>
-          </van-tab>
-        </van-tabs>
+          <img class="dockIcon" :src="iosIcon" alt="" />
+          <span class="goldText">{{ secondaryBtn.text }}</span>
+        </div>
       </div>
-    </div>
-
-    <div
-      class="downloadIosAppStore"
-      @click.stop="getApkInfo('shopIos', $event)"
-      v-if="hasShopIos && showIosTip"
-    >
-      <div class="close-btn" @click.stop="showIosTip = false"></div>
-    </div>
-
-    <div class="bottomBar" :class="{ isIos: isIos, hasShop: hasShopIos }">
-      <div
-        class="bottomBox"
-        :class="{ ios: isIos }"
-        @click.stop="getApkInfo(hasShopIos ? 'shopIos' : true, $event)"
-      ></div>
+      <p class="dockTip">{{ dockTip }}</p>
     </div>
 
     <van-overlay :show="androidPromptShow" z-index="999" class="androidOverlay">
@@ -100,7 +103,9 @@
 </template>
 
 <script>
-import tabContents from "./mobile1Contents";
+function landImg(name) {
+  return require("@/assets/images/land/h5/" + name + ".webp");
+}
 
 export default {
   props: {
@@ -116,19 +121,21 @@ export default {
       androidPromptShow: false,
       iosPromptShow: false,
       showTip: false,
+      showBackTop: false,
       currUrl: window.location.href,
-      tabActive: "ai",
-      tabTimer: null,
-      tabs: [
-        { label: "AI短剧", value: "ai" },
-        { label: "推荐", value: "hot" },
-        { label: "国产", value: "country" },
-        { label: "乱伦", value: "incest" },
-        { label: "刚满18", value: "adult" }
-      ],
-      tabContents,
-      showIosTip: true,
-      logoHeader: require("@/assets/images/common/hgmj_logo.png")
+      sections: [
+        "hero",
+        "highlights",
+        "types",
+        "immerse",
+        "wish",
+        "creator",
+        "about"
+      ].map(id => ({ id, src: landImg(id) })),
+      logo: require("@/assets/images/common/hgmj_logo.png"),
+      tutorialImg: landImg("tutorial"),
+      fastIcon: require("@/assets/images/land/icon/fast.svg"),
+      iosIcon: require("@/assets/images/land/icon/ios.svg")
     };
   },
   computed: {
@@ -137,6 +144,24 @@ export default {
     },
     hasShopIos() {
       return !!(this.isIos && this.switchData && this.switchData.iosStore);
+    },
+    // 页面切图点击走的下载方式：有商店包优先商店包
+    primaryFlag() {
+      return this.hasShopIos ? "shopIos" : true;
+    },
+    primaryBtn() {
+      if (this.hasShopIos) return { text: "商店下载", flag: "shopIos" };
+      return { text: this.isIos ? "苹果下载" : "极速下载", flag: true };
+    },
+    secondaryBtn() {
+      if (this.hasShopIos) return { text: "极速下载", flag: true };
+      if (!this.isIos) return { text: "备用下载", flag: "androidSpare" };
+      return null;
+    },
+    dockTip() {
+      return this.isIos
+        ? "请使用自带Safari浏览器打开"
+        : "下载完成后请先断开网络再安装";
     }
   },
   mounted() {
@@ -148,15 +173,13 @@ export default {
     if (!isSafari && this.os.isPhone) {
       this.showTip = true;
     }
-    this.startTabAutoPlay();
-  },
-  beforeDestroy() {
-    this.clearTabAutoPlay();
   },
   methods: {
-    getTabName() {
-      const tab = this.tabs.find(item => item.value === this.tabActive);
-      return tab ? tab.label : "推荐";
+    onScroll() {
+      this.showBackTop = this.$refs.page.scrollTop > 400;
+    },
+    backToTop() {
+      this.$refs.page.scrollTo({ top: 0, behavior: "smooth" });
     },
     doCopy() {
       this.$copyText(this.currUrl).then(
@@ -168,25 +191,6 @@ export default {
         }
       );
     },
-    startTabAutoPlay() {
-      this.clearTabAutoPlay();
-      this.tabTimer = setInterval(() => {
-        const i = this.tabs.findIndex(tab => tab.value === this.tabActive);
-        const next = this.tabs[(i + 1) % this.tabs.length];
-        this.tabActive = next.value;
-      }, 5000);
-    },
-    clearTabAutoPlay() {
-      if (this.tabTimer) {
-        clearInterval(this.tabTimer);
-        this.tabTimer = null;
-      }
-    },
-    onTabBeforeChange() {
-      this.getApkInfo(this.hasShopIos ? "shopIos" : true);
-      this.startTabAutoPlay();
-      return false;
-    },
     async showInstallTutorial(type) {
       if (type === "ios") {
         this.iosPromptShow = true;
@@ -203,7 +207,7 @@ export default {
         type = "androidSpare";
       }
       if (flag && flag !== "shopIos") {
-        await this.showInstallTutorial(type);
+        await this.showInstallTutorial(type === "ios" ? "ios" : "android");
       }
       setTimeout(() => {
         this.$emit("getApkInfo", type);
@@ -214,360 +218,265 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+$bg: #0b0b0b;
+
+.goldText {
+  display: inline-block;
+  background: linear-gradient(180deg, #f3bc58, #cc8a33);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
 .mobilePage {
   height: 100%;
   width: 100%;
-  background: linear-gradient(180deg, #0c0c0d 10.63%, #320606 100%);
-  overflow: hidden;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+  background: $bg;
+  color: #fff;
+  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
+}
 
-  .headerBox {
-    position: fixed;
-    z-index: 100;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 217px;
-    background: transparent;
-    box-sizing: border-box;
+/* 顶部栏（同原站 layout4-h5-header） */
+.topBar {
+  position: fixed;
+  z-index: 30;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: 55px;
+  padding: 0 19px 0 15px;
+  display: flex;
+  align-items: center;
+  background: $bg;
 
-    &::before {
-      content: "";
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 100%;
-      height: 67px;
-      background: linear-gradient(187deg, #230d16 10.4%, #f3561f 201.71%);
-      opacity: 0.9;
-      z-index: 0;
-    }
-
-    &.isIos {
-      height: 258px;
-    }
-
-    .iosBanner {
-      position: absolute;
-      left: 0;
-      top: 67px;
-      width: 375px;
-      height: 150px;
-      z-index: 1;
-      background: url("./../../../assets/images/mobile1/banner-ios.webp")
-        no-repeat center center;
-      background-size: 100% 100%;
-    }
-
-    .iosLiteBar {
-      position: absolute;
-      left: 0;
-      top: 217px;
-      width: 375px;
-      height: 41px;
-      z-index: 1;
-      background: url("./../../../assets/images/mobile1/btn-ios.webp") no-repeat
-        center center;
-      background-size: 100% 100%;
-    }
-
-    .navBrand {
-      position: absolute;
-      left: 17px;
-      top: 13px;
-      z-index: 2;
-      display: flex;
-      align-items: center;
-      gap: 7px;
-
-      .logoBox {
-        display: block;
-        width: 46px;
-        height: 46px;
-        border-radius: 12px;
-        object-fit: cover;
-      }
-
-      .brandCopy {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-
-        .brandTitle {
-          margin: 0;
-          color: #f9df1b;
-          font-size: 15px;
-          font-weight: 800;
-          line-height: 1.4;
-          white-space: nowrap;
-        }
-
-        .brandDesc {
-          margin: 0;
-          color: #fff;
-          font-size: 14px;
-          font-weight: 800;
-          line-height: 1.4;
-          white-space: nowrap;
-        }
-      }
-    }
+  .topLogo {
+    width: 34px;
+    height: 34px;
+    border-radius: 9px;
+    object-fit: cover;
   }
 
-  .pageBody {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 227px;
-    bottom: calc(74px + env(safe-area-inset-bottom));
-    padding: 0 15px;
-    width: 100%;
-    box-sizing: border-box;
-    overflow: hidden;
+  .topBrand {
+    margin-left: 6px;
+    font-size: 20px;
+    font-weight: 800;
+    font-style: italic;
+    padding-right: 0.15em;
+    letter-spacing: 1px;
+  }
+}
+
+/* 分区切图 */
+.track .section {
+  display: block;
+  width: 100%;
+}
+
+.footer {
+  height: 114px;
+  /* 右侧留出浮动按钮（安装教程、回到顶部）的位置，避免遮挡 */
+  padding: 22px 72px 0 12px;
+  box-sizing: border-box;
+  background: $bg;
+  text-align: center;
+
+  .footerBrand {
     display: flex;
-    flex-direction: column;
-
-    &.isIos {
-      top: 268px;
-    }
-
-    &.isIos.hasShop {
-      bottom: calc(110px + env(safe-area-inset-bottom));
-    }
+    align-items: center;
+    justify-content: center;
+    white-space: nowrap;
   }
 
-  .contentPanel {
-    flex: 1;
-    min-height: 0;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    background: #22030f;
-    border: 1px solid #8f450c;
-    border-radius: 21px;
-    padding: 9px 6px 16px;
-    box-sizing: border-box;
+  .footerLogo {
+    width: 26px;
+    height: 26px;
+    border-radius: 7px;
+    object-fit: cover;
   }
 
-  .vantTabs {
+  .footerName {
+    margin-left: 5px;
+    font-size: 16px;
+    font-weight: 800;
+    font-style: italic;
+    padding-right: 0.15em;
+  }
+
+  .footerSlogan {
+    margin-left: 14px;
+    font-size: 12px;
+    font-weight: 500;
+    color: #6e6e6e;
+  }
+
+  .copyright {
+    margin-top: 16px;
+    font-size: 10px;
+    color: #4d4d4d;
+    white-space: nowrap;
+  }
+}
+
+.dockSpacer {
+  height: calc(125px + env(safe-area-inset-bottom));
+}
+
+/* 右侧浮标：安装教程 + 返回顶部 */
+.floatBar {
+  position: fixed;
+  z-index: 20;
+  right: 10px;
+  bottom: calc(137px + env(safe-area-inset-bottom));
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+
+  .tutorialBtn {
+    display: block;
+    width: 52px;
+    height: 59px;
+    object-fit: contain;
+  }
+
+  .backTopBox {
+    width: 44px;
+    height: 44px;
+  }
+
+  .backTop {
     width: 100%;
-    flex: 1;
-    min-height: 0;
     height: 100%;
+    border-radius: 50%;
+    background: linear-gradient(180deg, #f7d48d, #e3a64f);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
     display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    background-color: transparent;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transform: translateY(8px);
+    pointer-events: none;
+    transition: opacity 0.25s ease, transform 0.25s ease;
 
-    ::v-deep .van-tabs__wrap {
-      flex-shrink: 0;
-      height: auto;
-      width: 100%;
-      position: relative;
-      z-index: 2;
-      padding: 0 0 8px;
-      box-sizing: border-box;
-      background: #22030f;
-
-      .van-tabs__nav {
-        height: 36px;
-        padding: 4px;
-        background: #5a170d;
-        border-radius: 969px;
-        box-sizing: border-box;
-      }
-
-      .van-tab {
-        flex: 1;
-        min-width: 0;
-        height: 28px;
-        line-height: 28px;
-        padding: 0;
-        margin: 0;
-        font-size: 12px;
-        color: #fff;
-        border-radius: 904px;
-        background: transparent;
-      }
-
-      .van-tab--active {
-        background: linear-gradient(180deg, #f1801f 0%, #f53d1f 100%);
-        color: #fff;
-        font-weight: 500;
-      }
-
-      .van-tab__text {
-        font-size: 12px;
-        line-height: 28px;
-      }
-
-      .van-tabs__line {
-        display: none;
-      }
+    &.show {
+      opacity: 1;
+      transform: translateY(0);
+      pointer-events: auto;
     }
 
-    ::v-deep .van-tabs__content {
-      flex: 1;
-      min-height: 0;
-      overflow: hidden;
-      padding-top: 0;
-    }
-
-    ::v-deep .van-tabs__track,
-    ::v-deep .van-tab__pane-wrapper,
-    ::v-deep .van-tab__pane {
-      height: 100%;
-    }
-
-    .main {
-      height: 100%;
-      overflow-x: hidden;
-      overflow-y: auto;
-      -webkit-overflow-scrolling: touch;
-
-      .contentGrid {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-        gap: 12px 0;
-        padding: 0 3px;
-
-        .gridItem {
-          width: 157px;
-
-          .gridThumb {
-            width: 157px;
-            height: 90px;
-            display: block;
-            border-radius: 8px;
-            object-fit: cover;
-          }
-
-          .gridText {
-            margin-top: 9px;
-            color: #fff;
-            font-size: 10px;
-            line-height: 17px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          }
-        }
-
-        &.portrait {
-          .gridItem {
-            width: 157px;
-
-            .gridThumb {
-              width: 157px;
-              height: 228px;
-              border-radius: 7.5px;
-            }
-          }
-        }
-      }
+    svg {
+      width: 55%;
+      height: 55%;
     }
   }
+}
 
-  .bottomBar {
-    position: fixed;
-    left: 0;
-    bottom: 0;
-    width: 100%;
-    z-index: 99;
-    padding-bottom: env(safe-area-inset-bottom);
+/* 底部下载栏（同原站 l8-dock） */
+.dock {
+  position: fixed;
+  z-index: 30;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 12px 0 calc(10px + env(safe-area-inset-bottom));
+  border-top: 1px solid rgba(232, 172, 79, 0.35);
+  border-radius: 16px 16px 0 0;
+  background: linear-gradient(180deg, rgba(11, 11, 11, 0.92), $bg 55%);
+
+  .dockBtns {
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+  }
+
+  .dockBtn {
+    width: 172.5px;
+    height: 49px;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     box-sizing: border-box;
-    background: transparent;
 
-    &.isIos {
-      padding-bottom: env(safe-area-inset-bottom);
+    span {
+      font-size: 17px;
+      font-weight: 540;
+      line-height: 1;
+      letter-spacing: 0.85px;
+    }
+
+    &.fast {
+      background: linear-gradient(180deg, #f3bc58, #cc8a33);
+
+      span {
+        color: #050505;
+      }
+    }
+
+    &.backup {
+      border: 1px solid #e8ac4f;
+      background: linear-gradient(180deg, #352c1d 39%, rgba(1, 1, 1, 0.32) 95%);
+    }
+
+    .dockIcon {
+      width: 26px;
+      height: 26px;
+      margin-right: 4px;
     }
   }
 
-  .bottomBox {
-    height: 64px;
-    width: 375px;
+  .dockTip {
+    margin-top: 10px;
+    text-align: center;
+    font-size: 10px;
+    font-weight: 340;
+    line-height: 12px;
+    color: #e9af4e;
+  }
+}
+
+/* 安装教程弹窗 */
+.androidOverlay,
+.iosOverlay {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .overlayContent {
+    width: 297px;
+    height: 441px;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    box-sizing: border-box;
+  }
+}
+
+.androidOverlay .overlayContent {
+  background-image: url("./../../../assets/images/mobile1/android_tip.webp");
+  border-radius: 12px;
+  padding-top: 380px;
+
+  .confirmBtnBox {
+    height: 36px;
+    width: 140px;
+    border-radius: 40px;
     margin: 0 auto;
-    background: url("./../../../assets/images/mobile1/bottomBg.webp") no-repeat
-      center center;
-    background-size: 100% 100%;
   }
+}
 
-  .shopIos {
-    display: none;
-  }
+.iosOverlay .overlayContent {
+  background-image: url("./../../../assets/images/mobile1/iosTip.webp");
+  border-radius: 14px;
+  padding-top: 382px;
 
-  .downloadIosAppStore {
-    height: 32px;
-    width: 298px;
-    background: url("./../../../assets/images/mobile1/shopIos.webp") no-repeat
-      center center;
-    background-size: 100% 100%;
-    position: fixed;
-    left: 0;
-    bottom: calc(64px + 14px + env(safe-area-inset-bottom));
-    z-index: 998;
-    border: 0.6px solid #1f1e1c;
-    border-radius: 0 16px 16px 0;
-    box-sizing: border-box;
-    overflow: visible;
-
-    .close-btn {
-      height: 17px;
-      width: 17px;
-      background: url("./../../../assets/images/mobile1/shopClose.svg")
-        no-repeat center center;
-      background-size: 100% 100%;
-      position: absolute;
-      right: -2px;
-      top: -7px;
-    }
-  }
-
-  .androidOverlay {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .overlayContent {
-      width: 297px;
-      height: 441px;
-      background: url("./../../../assets/images/mobile1/android_tip.webp")
-        no-repeat;
-      background-size: 100% 100%;
-      border-radius: 12px;
-      padding-top: 380px;
-      box-sizing: border-box;
-
-      .confirmBtnBox {
-        height: 36px;
-        width: 140px;
-        border-radius: 40px;
-        margin: 0 auto;
-      }
-    }
-  }
-
-  .iosOverlay {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .overlayContent {
-      width: 297px;
-      height: 441px;
-      background: url("./../../../assets/images/mobile1/iosTip.webp") no-repeat;
-      background-size: 100% 100%;
-      border-radius: 14px;
-      padding-top: 382px;
-      box-sizing: border-box;
-
-      .confirmBtnBox {
-        height: 33px;
-        width: 129px;
-        border-radius: 16.5px;
-        margin: 0 auto;
-      }
-    }
+  .confirmBtnBox {
+    height: 33px;
+    width: 129px;
+    border-radius: 16.5px;
+    margin: 0 auto;
   }
 }
 
@@ -577,10 +486,14 @@ export default {
   padding: 18px;
   box-sizing: border-box;
   text-align: center;
+  background: #1a1510;
+  color: #fff;
+  border: 1px solid rgba(232, 172, 79, 0.35);
 
   .downTipTitle {
     font-size: 18px;
     margin-bottom: 34px;
+    color: #e9af4e;
   }
 
   .downTipContent {
@@ -593,16 +506,17 @@ export default {
     margin-top: 16px;
     text-align: left;
     word-break: break-all;
+    color: #c9c2b5;
   }
 
   .downTipConfirm {
     font-size: 15px;
     width: 160px;
-    height: 30px;
+    height: 34px;
     border-radius: 40px;
     margin: 32px auto 0;
-    color: #fff;
-    background: #f53d1f;
+    color: #050505;
+    background: linear-gradient(180deg, #f3bc58, #cc8a33);
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/src/views/land/components/pc.vue b/src/views/land/components/pc.vue
index a3dda90..a280dbe 100644
--- a/src/views/land/components/pc.vue
+++ b/src/views/land/components/pc.vue
@@ -1,71 +1,179 @@
 <template>
-  <div class="pcm-wrapper" id="pcm-wrapper">
-    <div class="page-bg"></div>
-
-    <div class="pcm-brand">
-      <img class="pcm-logo" :src="logoImg" alt="黄果漫剧" />
-      <div class="pcm-brand-copy">
-        <div class="pcm-brand-title">黄果漫剧 原创基地</div>
-        <div class="pcm-brand-desc">沉浸体验 极速观影</div>
+  <div class="pcm-page" ref="page" @scroll="onScroll">
+    <header class="pcm-header">
+      <div class="pcm-header-inner">
+        <div class="pcm-brand" @click="scrollTo('home')">
+          <img class="pcm-logo" :src="logo" alt="黄果漫剧" />
+          <span class="pcm-brand-name pcm-gold">黄果漫剧</span>
+        </div>
+        <nav class="pcm-nav">
+          <button
+            v-for="item in navs"
+            :key="item.id"
+            type="button"
+            class="pcm-nav-item"
+            :class="{ active: active === item.id }"
+            @click="scrollTo(item.id)"
+          >
+            <span class="pcm-nav-text">{{ item.label }}</span>
+            <span class="pcm-nav-line"></span>
+          </button>
+        </nav>
       </div>
+    </header>
+
+    <section id="home" class="pcm-section" ref="home">
+      <img class="pcm-img" :src="img.hero" alt="" />
+      <div class="pcm-hero-btns">
+        <button type="button" class="pcm-btn pcm-btn-fast" @click="getApkInfo">
+          <img class="pcm-btn-icon" :src="fastIcon" alt="" />
+          <span class="pcm-btn-text">极速下载</span>
+        </button>
+        <button
+          type="button"
+          class="pcm-btn pcm-btn-ios"
+          @click="showQr = true"
+        >
+          <img class="pcm-btn-icon" :src="iosIcon" alt="" />
+          <span class="pcm-btn-text pcm-gold">苹果下载</span>
+        </button>
+      </div>
+    </section>
+    <img class="pcm-img" :src="img.strip" alt="" />
+
+    <div class="pcm-sections">
+      <section
+        v-for="item in middle"
+        :key="item.id"
+        :id="item.id"
+        :ref="item.id"
+        class="pcm-section"
+      >
+        <img class="pcm-img" :src="img[item.img]" alt="" />
+      </section>
     </div>
 
-    <div class="pcm-download">
-      <div class="pcm-qrcode">
-        <div class="pcm-qrcode-inner">
-          <img class="pcm-qrcode-img" :src="qrImg" alt="扫码下载" />
-        </div>
-        <div class="pcm-scan">
-          <img class="pcm-scan-icon" :src="scanIcon" alt="" />
-          <div class="pcm-scan-text">
-            用<br />手<br />机<br />扫<br />一<br />扫
-          </div>
-        </div>
+    <img class="pcm-img" :src="img.about" alt="" />
+
+    <footer id="about" ref="about" class="pcm-footer">
+      <div class="pcm-footer-brand">
+        <img class="pcm-footer-logo" :src="logo" alt="黄果漫剧" />
+        <span class="pcm-footer-name pcm-gold">黄果漫剧</span>
+        <span class="pcm-footer-slogan">随时随地，开启漫剧世界</span>
       </div>
-      <div class="pcm-download-copy">
-        <div class="pcm-browser-tip">
-          <span>安卓手机</span>
-          <span>建议使用UC浏览器扫码</span>
-        </div>
-        <p class="pcm-install-tip">
-          安装提示:下载好安装包以后,请断开网络.由于行业原因,本APP会被某些杀毒软件认为是病毒,请放心下载使用.
-        </p>
-        <div class="pcm-safe-tip">
-          本APP有广告和会员收益,安装本APP不会对您的手机造成任何损害
+      <div class="pcm-copyright">
+        Copyright © 2026 黄果漫剧. All Rights Reserved.
+      </div>
+    </footer>
+
+    <button
+      type="button"
+      aria-label="返回顶部"
+      class="pcm-backtop"
+      :class="{ show: showBackTop }"
+      @click="scrollTo('home')"
+    >
+      <svg viewBox="0 0 24 24" fill="none">
+        <path
+          d="M5 3.5h14"
+          stroke="#050505"
+          stroke-width="2.6"
+          stroke-linecap="round"
+        />
+        <path
+          d="M12 21V8.5M6.5 13.5 12 8l5.5 5.5"
+          stroke="#050505"
+          stroke-width="2.6"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </button>
+
+    <div class="pcm-qr-mask" v-if="showQr" @click="showQr = false">
+      <div class="pcm-qr-box" @click.stop>
+        <div class="pcm-qr-title pcm-gold">手机扫码下载</div>
+        <div class="pcm-qr-code">
+          <img :src="qrImg" alt="扫码下载" />
         </div>
+        <p class="pcm-qr-tip">请使用 iPhone 相机扫码，并在 Safari 中打开</p>
+        <p class="pcm-qr-tip">安卓手机建议使用 UC 浏览器扫码</p>
+        <button type="button" class="pcm-qr-close" @click="showQr = false">
+          我知道了
+        </button>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import autofit from "autofit.js";
-
-autofit.init();
+function landImg(name) {
+  return require("@/assets/images/land/pc/" + name + ".webp");
+}
 
 export default {
   props: ["qrImg", "os"],
   data() {
     return {
-      logoImg: require("@/assets/images/common/hgmj_logo.png"),
-      scanIcon: require("@/assets/images/pc/scanIcon.svg")
+      logo: require("@/assets/images/common/hgmj_logo.png"),
+      fastIcon: require("@/assets/images/land/icon/fast.svg"),
+      iosIcon: require("@/assets/images/land/icon/ios.svg"),
+      img: {
+        hero: landImg("hero"),
+        strip: landImg("strip"),
+        types: landImg("types"),
+        highlights: landImg("highlights"),
+        wish: landImg("wish"),
+        creator: landImg("creator"),
+        about: landImg("about")
+      },
+      navs: [
+        { id: "home", label: "首页" },
+        { id: "types", label: "剧场类型" },
+        { id: "highlights", label: "内容亮点" },
+        { id: "wish", label: "心愿榜" },
+        { id: "creator", label: "创作者" },
+        { id: "about", label: "关于我们" }
+      ],
+      middle: [
+        { id: "types", img: "types" },
+        { id: "highlights", img: "highlights" },
+        { id: "wish", img: "wish" },
+        { id: "creator", img: "creator" }
+      ],
+      active: "home",
+      showBackTop: false,
+      showQr: false
     };
   },
-  mounted() {
-    autofit.init(
-      {
-        dh: 1080,
-        dw: 1920,
-        el: "#pcm-wrapper",
-        resize: true
-      },
-      false
-    );
-  },
-  beforeDestroy() {
-    autofit.off("#pcm-wrapper");
-  },
   methods: {
+    sectionEl(id) {
+      const ref = this.$refs[id];
+      return Array.isArray(ref) ? ref[0] : ref;
+    },
+    scrollTo(id) {
+      const el = this.sectionEl(id);
+      if (!el) return;
+      const headerH = this.$refs.page.querySelector(".pcm-header").offsetHeight;
+      this.$refs.page.scrollTo({
+        top: id === "home" ? 0 : el.offsetTop - headerH,
+        behavior: "smooth"
+      });
+    },
+    // 滚动时高亮当前所在分区
+    onScroll() {
+      const page = this.$refs.page;
+      const top = page.scrollTop;
+      this.showBackTop = top > 400;
+      const probe = top + page.clientHeight / 3;
+      let current = "home";
+      this.navs.forEach(item => {
+        const el = this.sectionEl(item.id);
+        if (el && el.offsetTop <= probe) current = item.id;
+      });
+      if (top + page.clientHeight >= page.scrollHeight - 2) current = "about";
+      this.active = current;
+    },
     getApkInfo() {
       this.$emit("getApkInfo", "android");
     }
@@ -74,178 +182,333 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.pcm-wrapper {
-  width: 100vw;
-  height: 100vh;
-  overflow: hidden;
-  background-color: #0a0505;
-  position: relative;
-  color: #fff;
-  cursor: default;
-
-  img {
-    display: block;
-  }
+// 设计稿 1920 宽，按视口宽度等比缩放
+@function v($n) {
+  @return $n / 1920 * 100vw;
 }
 
-.page-bg {
-  position: absolute;
-  left: 0;
-  top: 0;
+.pcm-gold {
+  display: inline-block;
+  background: linear-gradient(180deg, #f3bc58 12%, #cc8a33);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+.pcm-page {
+  width: 100vw;
+  height: 100vh;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background: #0a0a0a;
+  color: #fff;
+  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
+}
+
+.pcm-img {
+  display: block;
   width: 100%;
-  height: 100%;
-  background: url("./../../../assets/images/pc/bg.png") no-repeat;
-  background-size: 100% 100%;
-  z-index: 1;
+}
+
+/* 顶部导航（同原站 layout4-header） */
+.pcm-header {
+  position: sticky;
+  top: 0;
+  z-index: 30;
+  height: v(64);
+  background: #0a0a0a;
+}
+
+.pcm-header-inner {
+  position: absolute;
+  left: v(470);
+  top: v(7.5);
+  height: v(48);
+  display: flex;
+  align-items: center;
 }
 
 .pcm-brand {
-  position: fixed;
-  left: 63px;
-  top: 50px;
-  z-index: 4;
+  width: v(131);
   display: flex;
   align-items: center;
-  gap: 14px;
+  cursor: pointer;
 }
 
 .pcm-logo {
-  width: 90px;
-  height: 90px;
-  border-radius: 23px;
+  width: v(40);
+  height: v(40);
+  border-radius: v(10);
   object-fit: cover;
 }
 
-.pcm-brand-copy {
+.pcm-brand-name {
+  margin-left: v(8);
+  font-size: v(22);
+  font-weight: 800;
+  font-style: italic;
+  padding-right: 0.15em;
+  white-space: nowrap;
+}
+
+.pcm-nav {
+  margin-left: v(69.5);
+  margin-top: v(14);
+  align-self: flex-start;
+  display: flex;
+  align-items: flex-start;
+  gap: v(30);
+}
+
+.pcm-nav-item {
   display: flex;
   flex-direction: column;
+  align-items: center;
+  gap: v(10);
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+.pcm-nav-text {
+  white-space: nowrap;
+  font-size: v(17.5);
+  font-weight: 340;
+  line-height: v(18);
+  letter-spacing: 0.05em;
+  color: #fff;
+  transition: color 0.2s;
+}
+
+.pcm-nav-line {
+  width: 100%;
+  height: v(3.5);
+  border-radius: 999px;
+  background: #f8ca06;
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+.pcm-nav-item.active {
+  .pcm-nav-text {
+    color: #f8ca06;
+  }
+
+  .pcm-nav-line {
+    opacity: 1;
+  }
+}
+
+/* 分区 */
+.pcm-section {
+  position: relative;
+}
+
+.pcm-sections {
+  display: flex;
+  flex-direction: column;
+  gap: v(100);
+}
+
+/* 主视觉下载按钮（同原站 l8-btn） */
+.pcm-hero-btns {
+  position: absolute;
+  left: v(991.5);
+  top: v(631);
+  display: flex;
+  align-items: center;
+  gap: v(55);
+}
+
+.pcm-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: v(7);
+  width: v(315.5);
+  height: v(90);
+  border-radius: v(17.5);
+  cursor: pointer;
+  transition: transform 0.2s ease, filter 0.2s ease;
+
+  &:hover {
+    transform: translateY(v(-2));
+    filter: brightness(1.08);
+  }
+
+  &:active {
+    transform: translateY(0) scale(0.98);
+  }
+}
+
+.pcm-btn-fast {
+  border: 0;
+  background: linear-gradient(180deg, #f3bc58 12%, #cc8a33);
+
+  .pcm-btn-text {
+    color: #050505;
+  }
+}
+
+.pcm-btn-ios {
+  border: 1px solid #e8ac4f;
+  background: linear-gradient(180deg, #352c1d 39%, rgba(1, 1, 1, 0.32) 95%);
+}
+
+.pcm-btn-icon {
+  width: v(47.5);
+  height: v(47.5);
+}
+
+.pcm-btn-text {
+  font-size: v(32);
+  font-weight: 400;
+  line-height: 1;
+  letter-spacing: 0.05em;
+}
+
+/* 页脚 */
+.pcm-footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: v(64) v(40) v(56);
+  background: #0a0a0a;
+}
+
+.pcm-footer-brand {
+  display: flex;
+  align-items: center;
+}
+
+.pcm-footer-logo {
+  width: v(64);
+  height: v(64);
+  border-radius: v(16);
+  object-fit: cover;
+}
+
+.pcm-footer-name {
+  margin-left: v(14);
+  font-size: v(36);
+  font-weight: 800;
+  font-style: italic;
+  padding-right: 0.15em;
+}
+
+.pcm-footer-slogan {
+  margin-left: v(56);
+  font-size: v(16);
+  line-height: v(22);
+  letter-spacing: 0.06em;
+  color: #9a9a96;
+}
+
+.pcm-copyright {
+  margin-top: v(48);
+  font-size: v(15);
+  font-weight: 300;
+  line-height: v(22);
+  letter-spacing: 0.08em;
+  color: #9a9a96;
+}
+
+/* 返回顶部 */
+.pcm-backtop {
+  position: fixed;
+  right: v(60);
+  bottom: v(80);
+  z-index: 20;
+  width: v(72);
+  height: v(72);
+  border: 0;
+  border-radius: 50%;
+  background: linear-gradient(180deg, #f7d48d, #e3a64f);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  opacity: 0;
+  transform: translateY(8px);
+  pointer-events: none;
+  transition: opacity 0.25s ease, transform 0.25s ease;
+
+  &.show {
+    opacity: 1;
+    transform: translateY(0);
+    pointer-events: auto;
+  }
+
+  svg {
+    width: 55%;
+    height: 55%;
+  }
+}
+
+/* 苹果下载：扫码弹窗 */
+.pcm-qr-mask {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 50;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  align-items: center;
   justify-content: center;
 }
 
-.pcm-brand-title {
-  font-family: PingFangSC-Semibold, PingFang SC, "Microsoft YaHei", sans-serif;
-  font-size: 29px;
-  font-weight: 800;
-  line-height: 1.4;
-  color: #fff;
-  white-space: nowrap;
-  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
-}
-
-.pcm-brand-desc {
-  margin-top: 2px;
-  font-family: PingFangSC-Medium, PingFang SC, "Microsoft YaHei", sans-serif;
-  font-size: 27px;
-  font-weight: 800;
-  line-height: 1.4;
-  color: #fff;
-  white-space: nowrap;
-  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
-}
-
-.pcm-download {
-  position: absolute;
-  left: 170px;
-  top: 837px;
-  z-index: 5;
-  display: flex;
-  align-items: flex-start;
-}
-
-.pcm-qrcode {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 5px;
-  box-sizing: border-box;
-  border: 1px solid #f31919;
-  border-radius: 5px;
-  background: rgba(255, 255, 255, 0.05);
-}
-
-.pcm-qrcode-inner {
-  width: 124px;
-  height: 124px;
-  padding: 6px;
-  box-sizing: border-box;
-  border-radius: 6px;
-  background: #fff;
-}
-
-.pcm-qrcode-img {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-}
-
-.pcm-scan {
-  width: 20px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  color: #fff;
-}
-
-.pcm-scan-icon {
-  width: 20px;
-  height: 20px;
-  object-fit: contain;
-}
-
-.pcm-scan-text {
-  margin-top: 6px;
-  font-family: PingFangSC-Medium, PingFang SC, "Microsoft YaHei", sans-serif;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1.1;
+.pcm-qr-box {
+  width: v(420);
+  padding: v(36) v(32) v(30);
+  border-radius: v(20);
+  border: 1px solid rgba(232, 172, 79, 0.35);
+  background: linear-gradient(180deg, #1c160c 0%, #0b0b0b 100%);
   text-align: center;
 }
 
-.pcm-download-copy {
-  margin-left: 10px;
-  width: 334px;
+.pcm-qr-title {
+  font-size: v(30);
+  font-weight: 700;
+  letter-spacing: 0.08em;
 }
 
-.pcm-browser-tip {
-  width: 334px;
-  height: 29px;
-  padding: 0 11px;
+.pcm-qr-code {
+  width: v(220);
+  height: v(220);
+  margin: v(24) auto v(20);
+  padding: v(10);
   box-sizing: border-box;
-  border-radius: 6px;
-  display: flex;
-  align-items: center;
-  gap: 13px;
-  background: linear-gradient(90deg, #ec1717 0%, rgba(198, 42, 31, 0) 100%);
-  font-family: PingFangSC-Semibold, PingFang SC, "Microsoft YaHei", sans-serif;
-  font-size: 17px;
-  font-weight: 600;
-  line-height: 29px;
-  color: #fff;
-  white-space: nowrap;
+  border-radius: v(12);
+  border: v(3) solid #e3a64f;
+  background: #fff;
+
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
 }
 
-.pcm-install-tip {
-  width: 308px;
-  margin: 8px 0 0;
-  font-family: PingFangSC-Regular, PingFang SC, "Microsoft YaHei", sans-serif;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 1.77;
-  color: #fff;
+.pcm-qr-tip {
+  margin-top: v(6);
+  font-size: v(15);
+  color: #c9c2b5;
 }
 
-.pcm-safe-tip {
-  display: inline-block;
-  margin-top: 12px;
-  padding: 3px 7px;
-  box-sizing: border-box;
-  border: 1px solid #dedede;
-  border-radius: 3px;
-  font-family: PingFangSC-Regular, PingFang SC, "Microsoft YaHei", sans-serif;
-  font-size: 10px;
-  font-weight: 400;
-  line-height: 1.77;
-  color: #fff;
-  white-space: nowrap;
+.pcm-qr-close {
+  margin-top: v(24);
+  width: v(200);
+  height: v(48);
+  border: 0;
+  border-radius: v(12);
+  background: linear-gradient(180deg, #f3bc58 12%, #cc8a33);
+  color: #050505;
+  font-size: v(18);
+  cursor: pointer;
 }
 </style>