UI修改
This commit is contained in:
谢宇宁
@@ -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://huangguo.com
|
||||
|
||||
+7
-7
@@ -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>
|
||||
|
||||
+1
-1
@@ -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，不含下载地址
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 157 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 452 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 79 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 377 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
@@ -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>
|
||||
|
After Width: | Height: | Size: 761 B |
@@ -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>
|
||||
|
After Width: | Height: | Size: 609 B |
Binary file not shown.
|
After Width: | Height: | Size: 126 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 176 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 272 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 203 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 437 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 251 KiB |
@@ -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;
|
||||
|
||||
+455
-192
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user