all_user/51dj_landpage
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

logo替换

Browse Source
This commit is contained in:
谢宇宁
2026-10-14 17:39:34 +07:00
parent 6b8f1e5b7c
commit 1373d48523
20 changed files with 106 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
auto-imports.d.ts
Vendored
+1 -1
View File
@@ -71,6 +71,6 @@ declare global {
// for type re-export
declare global {
// @ts-ignore
export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
export type { Component, Slot, Slots, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
import('vue')
}
index.html
+10 -10
View File
@@ -11,32 +11,32 @@
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700;900&display=swap" rel="stylesheet" />
<title>黄果短剧｜成人短剧APP｜每日更新｜海量高清</title>
<meta name="description" content="黄果短剧每日更新，海量高清成人短剧、成人影集在线观看，禁忌、诱惑、霸总、逆袭、穿越，精彩黄剧尽在黄果。" />
<meta name="keywords" content="黄果,huangguo,黄果短剧 官网,黄果落地页,黄果短剧 落地页,黄果APP下载,黄果短剧 APP下载,黄果短剧 APP,黄果 下载,黄果短剧 下载,黄果短剧 安卓版,黄果短剧 安卓下载,黄果短剧 APK,黄果短剧 苹果版,黄果短剧 iOS下载,黄果短剧 App Store,黄果 观看,黄果短剧 怎么看,黄果短剧 在哪看,黄果短剧 在线看,黄果短剧 免费看,黄果短剧 全集,黄果短剧 注册,黄果短剧 登录,黄果短剧 会员,黄果短剧 VIP,黄果短剧 客服,黄果短剧 官方,黄果短剧 是什么,黄果短剧 好看吗,黄果短剧 评价,黄果短剧 心得,黄果短剧 安全吗,黄果短剧 收费,黄果短剧 上线时间,黄果短剧 预订,黄果短剧 预约,黄果短剧 通知,短剧,竖屏短剧,直屏短剧,微短剧,迷你剧,短剧集,追剧,在线短剧,短剧平台,短剧 APP,短剧网站,在线看短剧,免费短剧,短剧推荐,热门短剧,短剧下载,逆袭爽剧,小人物逆袭,爽剧,都市情感剧,都市爱情剧,悬疑反转剧,悬疑短剧,甜宠恋爱剧,甜宠剧,古装传奇,古装爽剧,奇幻脑洞,穿越短剧,重生短剧,霸道总裁,通勤看剧,碎片时间追剧,一集十分钟 短剧,上瘾短剧,睡前看剧,短剧 上瘾,什么是短剧,什么是竖屏短剧,红果短剧,ReelShort,DramaBox,番茄短剧,抖音短剧,快手短剧,手机 看短剧,短剧 排行榜,2026 短剧推荐,台湾 短剧,繁体中文 短剧,日本 短剧,短剧 上线通知,黄果 上线时间" />
<title>51短剧｜成人短剧APP｜每日更新｜海量高清</title>
<meta name="description" content="51短剧每日更新，海量高清成人短剧、成人影集在线观看，禁忌、诱惑、霸总、逆袭、穿越，精彩黄剧尽在51短剧。" />
<meta name="keywords" content="51短剧,51dj,51短剧 官网,51短剧落地页,51短剧 落地页,51短剧APP下载,51短剧 APP下载,51短剧 APP,51短剧 下载,51短剧 安卓版,51短剧 安卓下载,51短剧 APK,51短剧 苹果版,51短剧 iOS下载,51短剧 App Store,51短剧 观看,51短剧 怎么看,51短剧 在哪看,51短剧 在线看,51短剧 免费看,51短剧 全集,51短剧 注册,51短剧 登录,51短剧 会员,51短剧 VIP,51短剧 客服,51短剧 官方,51短剧 是什么,51短剧 好看吗,51短剧 评价,51短剧 心得,51短剧 安全吗,51短剧 收费,51短剧 上线时间,51短剧 预订,51短剧 预约,51短剧 通知,短剧,竖屏短剧,直屏短剧,微短剧,迷你剧,短剧集,追剧,在线短剧,短剧平台,短剧 APP,短剧网站,在线看短剧,免费短剧,短剧推荐,热门短剧,短剧下载,逆袭爽剧,小人物逆袭,爽剧,都市情感剧,都市爱情剧,悬疑反转剧,悬疑短剧,甜宠恋爱剧,甜宠剧,古装传奇,古装爽剧,奇幻脑洞,穿越短剧,重生短剧,霸道总裁,通勤看剧,碎片时间追剧,一集十分钟 短剧,上瘾短剧,睡前看剧,短剧 上瘾,什么是短剧,什么是竖屏短剧,红果短剧,ReelShort,DramaBox,番茄短剧,抖音短剧,快手短剧,手机 看短剧,短剧 排行榜,2026 短剧推荐,台湾 短剧,繁体中文 短剧,日本 短剧,短剧 上线通知" />
<meta name="robots" content="index, follow" />
<!-- Bing Webmaster Tools -->
<meta name="msvalidate.01" content="__BING_VERIFICATION_TOKEN__" />
<meta property="og:title" content="黄果短剧 | 竖屏短剧APP下载官方入口" />
<meta property="og:site_name" content="黄果短剧" />
<meta property="og:title" content="51短剧 | 竖屏短剧APP下载官方入口" />
<meta property="og:site_name" content="51短剧" />
<meta property="og:type" content="article" />
<meta property="og:image" content="/favicon.ico" />
<meta property="og:description" content="黄果短剧每日更新，海量高清成人短剧、成人影集在线观看，禁忌、诱惑、霸总、逆袭、穿越，精彩黄剧尽在黄果。" />
<meta property="og:description" content="51短剧每日更新，海量高清成人短剧、成人影集在线观看，禁忌、诱惑、霸总、逆袭、穿越，精彩黄剧尽在51短剧。" />
<meta name="twitter:title" content="黄果短剧 | 竖屏短剧APP下载官方入口" />
<meta name="twitter:description" content="黄果短剧每日更新，海量高清成人短剧、成人影集在线观看，禁忌、诱惑、霸总、逆袭、穿越，精彩黄剧尽在黄果。" />
<meta name="twitter:title" content="51短剧 | 竖屏短剧APP下载官方入口" />
<meta name="twitter:description" content="51短剧每日更新，海量高清成人短剧、成人影集在线观看，禁忌、诱惑、霸总、逆袭、穿越，精彩黄剧尽在51短剧。" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:image" content="/favicon.ico" />
<meta name="twitter:site" content="黄果短剧" />
<meta name="twitter:site" content="51短剧" />
<meta name="theme-color" content="#000000" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="#000000" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<link rel="canonical" href="https://hgaidj.app" />
<link rel="canonical" href="https://51djlandpage.mfcg.me/" />
</head>
public/b-land/assets/logo-icon-activity.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 148 KiB

After

Width:  |  Height:  |  Size: 102 KiB

public/b-land/assets/wordmark-white-1line.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 33 KiB

After

Width:  |  Height:  |  Size: 5.0 KiB

public/b-land/assets/wordmark-white-2line.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 7.4 KiB

public/favicon.ico
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 93 KiB

After

Width:  |  Height:  |  Size: 83 KiB

public/logo.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 179 KiB

After

Width:  |  Height:  |  Size: 114 KiB

src/api/btn.ts
+2 -4
View File
@@ -1,4 +1,5 @@
import { useHttp } from '../utils/userFetchReq'
import { APP_ID } from '~/config/app'
import type { donwloadParam, ButtonListParam, H5param } from './interface'
// 下载相关接口对齐 bili-landpage-client，域名写死（接口已开 CORS: *）
@@ -14,15 +15,12 @@ export const bottonclick = (param: donwloadParam) => {
return useHttp.post(`${STAT_API}/bottonclick`, param, {})
}
// iOS H5 描述文件的 appId 写死
const H5_CONFIG_APP_ID = 2
// iOS H5 描述文件：返回 .mobileconfig 原文（非 JSON），不走 useHttp
export const downloadH5 = async (data: H5param): Promise<string> => {
const res = await fetch(`${STAT_API}/h5/config`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ ...data, appId: H5_CONFIG_APP_ID }),
body: JSON.stringify({ ...data, appId: APP_ID }),
})
if (!res.ok) throw new Error('获取描述文件失败 ' + res.status)
return res.text()
src/api/interface/index.ts
+1 -1
View File
@@ -25,7 +25,7 @@ export type donwloadParam = {
packageType?: number // 1 企业签 / 2 商店包 / 3 TF
}
export type H5param = {
appId?: number // 请求时固定为 2，见 api/btn.ts downloadH5
appId?: number // 请求时取 config/app.ts 的 APP_ID，见 api/btn.ts downloadH5
dc?: string
pc?: string
[key: string]: number | string | undefined
src/assets/image/hg/common/logo-h.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 51 KiB

After

Width:  |  Height:  |  Size: 26 KiB

src/assets/image/hg/common/logo-h.webp
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 7.4 KiB

src/assets/logo.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 23 KiB

src/assets/logo.webp
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 4.9 KiB

src/components/landing-b/LandingBMobile.vue
+34 -32
View File
@@ -1,5 +1,6 @@
<script setup lang="ts">
import { useLandingB } from './useLandingB'
import { APP_DOMAIN } from '~/config/app'
const {
FEATURED,
@@ -109,8 +110,8 @@ const {
<header class="nav" :class="{ scrolled: isScrolled }">
<div class="wrap">
<a class="logo" href="#" @click.prevent="switchView('landing')">
<img class="ico" :src="assetUrl('logo-icon-activity.png')" alt="黄果短剧" />
<img class="wm" :src="assetUrl('wordmark-white-1line.png')" alt="黄果短剧" />
<img class="ico" :src="assetUrl('logo-icon-activity.png')" alt="51短剧" />
<img class="wm" :src="assetUrl('wordmark-white-1line.png')" alt="51短剧" />
</a>
<div class="right">
<button class="btn glass xs" @click="handleDownload()">
@@ -163,7 +164,7 @@ const {
{{ (currentHero?.tags || []).join(' ') }}&nbsp;&nbsp;{{ currentHero?.eps ? `全 ${currentHero.eps} 集 更新至第 ${currentHero.eps} 集` : '连载中' }}&nbsp;&nbsp;2026
</div>
<p class="syn">
{{ currentHero?.syn || '精彩短剧，黄果独家呈现。高清画质与震撼剧情，畅享视听盛宴。' }}
{{ currentHero?.syn || '精彩短剧，51短剧独家呈现。高清画质与震撼剧情，畅享视听盛宴。' }}
</p>
<div class="dlhero">
<div class="dlbtns">
@@ -214,7 +215,7 @@ const {
下载 Android 版
</button>
<a class="link brand open-app" href="#" @click.prevent="handleOpenAppDeepLink">
已安装？打开黄果短剧 App
已安装？打开51短剧 App
<svg class="ic"><use href="#i-arrow-right" /></svg>
</a>
</template>
@@ -353,18 +354,18 @@ const {
<div class="col">
<span class="kicker">关于我们</span>
<h2 class="h2">不是所有短剧，<br />都能被称作作品。</h2>
<p class="sub">黄果短剧，因为专业，所以领先。</p>
<p class="sub">51短剧，因为专业，所以领先。</p>
<p>
别人拼命追赶风口，我们定义创造标准。每一支作品都经过精心制作，分镜反复推敲，为一句台词的语气重新生成十次，字幕与剪辑的表情调整到满意为止。这就是我们的匠人精神，也是黄果品质唯一的定义。
别人拼命追赶风口，我们定义创造标准。每一支作品都经过精心制作，分镜反复推敲，为一句台词的语气重新生成十次，字幕与剪辑的表情调整到满意为止。这就是我们的匠人精神，也是51短剧品质唯一的定义。
</p>
<p>
我们用 AI 帮助提升作品的品质，把不可能的画面化为可能。题材多元，都会、悬疑、古装、奇幻同步推进；每日更新，精彩不断。短剧与影集双轨并行，仿真与动画齐发。我们只做一件事：把每一支作品，做到值得被记得。
</p>
<p class="slogan">黄果一开，全射出来，每一帧都能解你的色。</p>
<p class="slogan">51短剧一开，全射出来，每一帧都能解你的色。</p>
</div>
<div>
<div class="vis">
<img :src="assetUrl('about-visual.png')" alt="黄果短剧 作品视觉" />
<img :src="assetUrl('about-visual.png')" alt="51短剧 作品视觉" />
</div>
<div class="tags">
<span class="chip">短剧与影集双轨并行</span>
@@ -376,12 +377,12 @@ const {
</div>
</section>
<!-- ④ 黄果特色 -->
<!-- ④ 51短剧特色 -->
<section class="sec" style="padding-top: 0">
<div class="wrap">
<div class="secHead" data-reveal>
<div class="left">
<span class="kicker">黄果特色</span>
<span class="kicker">51短剧特色</span>
<h2 class="h2">把最好看的留给你</h2>
</div>
</div>
@@ -415,7 +416,7 @@ const {
<div class="wscrim"></div>
<div class="wrap in">
<div data-reveal>
<h2>现在下载，海量短剧尽在黄果</h2>
<h2>现在下载，海量短剧尽在51短剧</h2>
<p class="sub">
支援 iOS / Android&nbsp;&nbsp;双版本 APP，即刻下载，追剧不断档
</p>
@@ -467,7 +468,7 @@ const {
<div class="wrap faq">
<div class="left" data-reveal>
<span class="kicker">常见问题</span>
<h2 class="h2">关于黄果，<br />你想知道的</h2>
<h2 class="h2">关于51短剧，<br />你想知道的</h2>
</div>
<div class="acc" data-reveal>
<div
@@ -559,12 +560,12 @@ const {
<footer>
<div class="wrap in">
<div class="lockup">
<img class="ico" :src="assetUrl('logo-icon-activity.png')" alt="黄果短剧" />
<img class="wm" :src="assetUrl('wordmark-white-2line.png')" alt="黄果短剧 hgaidj.app" />
<img class="ico" :src="assetUrl('logo-icon-activity.png')" alt="51短剧" />
<img class="wm" :src="assetUrl('wordmark-white-2line.png')" alt="51短剧" />
</div>
<div class="fl">
<a href="#works" @click.prevent="switchView('landing', '#works')">作品精选</a>
<a href="#about" @click.prevent="switchView('landing', '#about')">关于黄果</a>
<a href="#about" @click.prevent="switchView('landing', '#about')">关于51短剧</a>
<a href="#faq" @click.prevent="switchView('landing', '#faq')">常见问题</a>
<a href="#" @click.prevent="handleDownload()">下载 APP</a>
</div>
@@ -573,16 +574,17 @@ const {
<p>本网站所呈现之所有人员，于拍摄当时均已年满 18 岁，符合 18 U.S.C. 第 2257 章规定。</p>
</div>
<div class="bot">
<span>© 2026 黄果短剧 HUANGGUO&nbsp;&nbsp;All rights reserved.</span>
<span>© 2026 51短剧 51DJ&nbsp;&nbsp;All rights reserved.</span>
<span>官方地址&nbsp;&nbsp;{{ APP_DOMAIN }}</span>
<span>仅限 18 岁以上成年人</span>
</div>
</div>
</footer>
<!-- ============ H5 底部常驻下载条 ============ -->
<div class="mdl" :class="{ show: showMobileStickyBar }">
<img :src="assetUrl('logo-icon-activity.png')" alt="黄果短剧" />
<img :src="assetUrl('logo-icon-activity.png')" alt="51短剧" />
<div class="c">
<b>黄果短剧 App</b>
<b>51短剧 App</b>
<span>免费下载&nbsp;&nbsp;海量短剧每日更新</span>
</div>
<button class="btn primary" @click="handleDownload()">
@@ -597,10 +599,10 @@ const {
<div class="bd"></div>
<div class="dlg">
<div class="grab" aria-hidden="true"></div>
<img class="age-ico" :src="assetUrl('logo-icon-activity.png')" alt="黄果短剧" width="72" height="72" />
<img class="age-ico" :src="assetUrl('logo-icon-activity.png')" alt="51短剧" width="72" height="72" />
<h3 id="agegate-title">本站含成人内容</h3>
<p>
黄果短剧仅限 18 岁以上成年人访问。进入即表示您已年满 18 岁、所在地区法律允许浏览成人内容，并同意<a class="privacy" href="#" @click.prevent>《隐私政策》</a>。
51短剧仅限 18 岁以上成年人访问。进入即表示您已年满 18 岁、所在地区法律允许浏览成人内容，并同意<a class="privacy" href="#" @click.prevent>《隐私政策》</a>。
</p>
<button class="btn primary md block enter" type="button" @click="confirmAge">
我已年满 18 岁，进入
@@ -616,13 +618,13 @@ const {
:class="{ open: showInstallGuideModal, in: showInstallGuideModal }"
role="dialog"
aria-modal="true"
aria-label="下载黄果短剧 App"
aria-label="下载51短剧 App"
>
<div class="dlg">
<header class="install-nav">
<button class="back" type="button" aria-label="返回" @click="showInstallGuideModal = false">
<svg class="ic"><use href="#i-chevron-left" /></svg>
<span>下载黄果短剧 App</span>
<span>下载51短剧 App</span>
</button>
</header>
@@ -630,7 +632,7 @@ const {
<template v-if="installGuideTab === 'ios'">
<div class="install-scroll">
<div class="hd">
<img :src="assetUrl('logo-icon-activity.png')" alt="黄果短剧" width="72" height="72" />
<img :src="assetUrl('logo-icon-activity.png')" alt="51短剧" width="72" height="72" />
<h3>安装 iOS 版</h3>
<p>
{{
@@ -670,7 +672,7 @@ const {
<svg class="ic"><use href="#i-si-apple" /></svg>
</div>
<div class="store-title">
<b>黄果短剧&nbsp;&nbsp;App Store 版</b>
<b>51短剧&nbsp;&nbsp;App Store 版</b>
<span class="tag-rec">推荐</span>
</div>
<p>
@@ -711,7 +713,7 @@ const {
<span class="n">STEP.3</span>
<div class="c">
<b>返回桌面打开</b>
<span>桌面出现「黄果短剧」图标，点击即可观看。建议同时保存账号凭证。</span>
<span>桌面出现「51短剧」图标，点击即可观看。建议同时保存账号凭证。</span>
</div>
</div>
<div class="tip">
@@ -738,7 +740,7 @@ const {
</template>
</button>
<a class="link brand open-app" href="#" @click.prevent="handleOpenAppDeepLink">
已安装？打开黄果短剧 App
已安装？打开51短剧 App
<svg class="ic"><use href="#i-arrow-right" /></svg>
</a>
</div>
@@ -748,7 +750,7 @@ const {
<template v-else>
<div class="install-scroll">
<div class="hd">
<img :src="assetUrl('logo-icon-activity.png')" alt="黄果短剧" width="72" height="72" />
<img :src="assetUrl('logo-icon-activity.png')" alt="51短剧" width="72" height="72" />
<h3>安装 Android 版</h3>
<p>已识别为 Android 设备，下载 APK 直接安装。</p>
</div>
@@ -758,7 +760,7 @@ const {
<span class="n">STEP.1</span>
<div class="c">
<b>下载 APK 安装包</b>
<span>点击「下载 Android 版」，浏览器开始下载 huangguo.apk，下载完成后在通知栏或下载列表点击打开。</span>
<span>点击「下载 Android 版」，浏览器开始下载 51dj.apk，下载完成后在通知栏或下载列表点击打开。</span>
</div>
</div>
<div class="step">
@@ -771,8 +773,8 @@ const {
<div class="step">
<span class="n">STEP.3</span>
<div class="c">
<b>打开黄果短剧</b>
<span>安装完成后点击「打开」，或在桌面找到「黄果短剧」图标即可观看。</span>
<b>打开51短剧</b>
<span>安装完成后点击「打开」，或在桌面找到「51短剧」图标即可观看。</span>
</div>
</div>
<div class="tip">
@@ -792,7 +794,7 @@ const {
下载 Android 版
</button>
<a class="link brand open-app" href="#" @click.prevent="handleOpenAppDeepLink">
已安装？打开黄果短剧 App
已安装？打开51短剧 App
<svg class="ic"><use href="#i-arrow-right" /></svg>
</a>
</div>
@@ -1905,7 +1907,7 @@ section.sec {
margin-top: 20px;
}
/* ============ 黄果特色 ============ */
/* ============ 51短剧特色 ============ */
.feat {
margin-top: 40px;
display: flex;
src/components/landing-b/LandingBPc.vue
+32 -30
View File
@@ -1,6 +1,7 @@
<script setup lang="ts">
import QrcodeVue from 'qrcode.vue'
import { useLandingB } from './useLandingB'
import { APP_DOMAIN } from '~/config/app'
const {
FEATURED,
@@ -112,8 +113,8 @@ const {
<header class="nav" :class="{ scrolled: isScrolled }">
<div class="wrap">
<a class="logo" href="#" @click.prevent="switchView('landing')">
<img class="ico" :src="assetUrl('logo-icon-activity.png')" alt="黄果短剧" />
<img class="wm" :src="assetUrl('wordmark-white-1line.png')" alt="黄果短剧" />
<img class="ico" :src="assetUrl('logo-icon-activity.png')" alt="51短剧" />
<img class="wm" :src="assetUrl('wordmark-white-1line.png')" alt="51短剧" />
</a>
<nav class="links">
<a
@@ -128,7 +129,7 @@ const {
:class="{ on: activeAnchor === '#about' && currentView === 'landing' }"
@click.prevent="switchView('landing', '#about')"
>
关于黄果
关于51短剧
</a>
<a
href="#faq"
@@ -191,7 +192,7 @@ const {
{{ (currentHero?.tags || []).join(' ') }}&nbsp;&nbsp;{{ currentHero?.eps ? `全 ${currentHero.eps} 集 更新至第 ${currentHero.eps} 集` : '连载中' }}&nbsp;&nbsp;2026
</div>
<p class="syn">
{{ currentHero?.syn || '精彩短剧，黄果独家呈现。高清画质与震撼剧情，畅享视听盛宴。' }}
{{ currentHero?.syn || '精彩短剧，51短剧独家呈现。高清画质与震撼剧情，畅享视听盛宴。' }}
</p>
<div class="dlhero">
<div class="qrbox">
@@ -389,18 +390,18 @@ const {
<div class="col">
<span class="kicker">关于我们</span>
<h2 class="h2">不是所有短剧，<br />都能被称作作品。</h2>
<p class="sub">黄果短剧，因为专业，所以领先。</p>
<p class="sub">51短剧，因为专业，所以领先。</p>
<p>
别人拼命追赶风口，我们定义创造标准。每一支作品都经过精心制作，分镜反复推敲，为一句台词的语气重新生成十次，字幕与剪辑的表情调整到满意为止。这就是我们的匠人精神，也是黄果品质唯一的定义。
别人拼命追赶风口，我们定义创造标准。每一支作品都经过精心制作，分镜反复推敲，为一句台词的语气重新生成十次，字幕与剪辑的表情调整到满意为止。这就是我们的匠人精神，也是51短剧品质唯一的定义。
</p>
<p>
我们用 AI 帮助提升作品的品质，把不可能的画面化为可能。题材多元，都会、悬疑、古装、奇幻同步推进；每日更新，精彩不断。短剧与影集双轨并行，仿真与动画齐发。我们只做一件事：把每一支作品，做到值得被记得。
</p>
<p class="slogan">黄果一开，全射出来，每一帧都能解你的色。</p>
<p class="slogan">51短剧一开，全射出来，每一帧都能解你的色。</p>
</div>
<div>
<div class="vis">
<img :src="assetUrl('about-visual.png')" alt="黄果短剧 作品视觉" />
<img :src="assetUrl('about-visual.png')" alt="51短剧 作品视觉" />
</div>
<div class="tags">
<span class="chip">短剧与影集双轨并行</span>
@@ -412,12 +413,12 @@ const {
</div>
</section>
<!-- ④ 黄果特色 -->
<!-- ④ 51短剧特色 -->
<section class="sec" style="padding-top: 0">
<div class="wrap">
<div class="secHead" data-reveal>
<div class="left">
<span class="kicker">黄果特色</span>
<span class="kicker">51短剧特色</span>
<h2 class="h2">把最好看的留给你</h2>
</div>
</div>
@@ -451,7 +452,7 @@ const {
<div class="wscrim"></div>
<div class="wrap in">
<div data-reveal>
<h2>现在下载，海量短剧尽在黄果</h2>
<h2>现在下载，海量短剧尽在51短剧</h2>
<p class="sub">
支援 iOS / Android&nbsp;&nbsp;双版本 APP，即刻下载，追剧不断档
</p>
@@ -471,7 +472,7 @@ const {
<span class="qr-lab">扫码下载 App</span>
</div>
<div class="col">
<h4>扫码安装 黄果短剧 App</h4>
<h4>扫码安装 51短剧 App</h4>
<div class="btns">
<template v-if="hasIosShopPackage">
<button
@@ -532,7 +533,7 @@ const {
<div class="wrap faq">
<div class="left" data-reveal>
<span class="kicker">常见问题</span>
<h2 class="h2">关于黄果，<br />你想知道的</h2>
<h2 class="h2">关于51短剧，<br />你想知道的</h2>
</div>
<div class="acc" data-reveal>
<div
@@ -624,12 +625,12 @@ const {
<footer>
<div class="wrap in">
<div class="lockup">
<img class="ico" :src="assetUrl('logo-icon-activity.png')" alt="黄果短剧" />
<img class="wm" :src="assetUrl('wordmark-white-2line.png')" alt="黄果短剧 hgaidj.app" />
<img class="ico" :src="assetUrl('logo-icon-activity.png')" alt="51短剧" />
<img class="wm" :src="assetUrl('wordmark-white-2line.png')" alt="51短剧" />
</div>
<div class="fl">
<a href="#works" @click.prevent="switchView('landing', '#works')">作品精选</a>
<a href="#about" @click.prevent="switchView('landing', '#about')">关于黄果</a>
<a href="#about" @click.prevent="switchView('landing', '#about')">关于51短剧</a>
<a href="#faq" @click.prevent="switchView('landing', '#faq')">常见问题</a>
<a href="#" @click.prevent="handleDownload()">下载 APP</a>
</div>
@@ -638,7 +639,8 @@ const {
<p>本网站所呈现之所有人员，于拍摄当时均已年满 18 岁，符合 18 U.S.C. 第 2257 章规定。</p>
</div>
<div class="bot">
<span>© 2026 黄果短剧 HUANGGUO&nbsp;&nbsp;All rights reserved.</span>
<span>© 2026 51短剧 51DJ&nbsp;&nbsp;All rights reserved.</span>
<span>官方地址&nbsp;&nbsp;{{ APP_DOMAIN }}</span>
<span>仅限 18 岁以上成年人</span>
</div>
</div>
@@ -657,7 +659,7 @@ const {
/>
</span>
<div class="c">
<b>扫码下载黄果短剧 App</b>
<b>扫码下载51短剧 App</b>
<span>支援 iOS / Android</span>
<button class="btn primary" @click="handleDownload()">
<svg class="ic"><use href="#i-download" /></svg>
@@ -676,10 +678,10 @@ const {
<div class="modal agegate" :class="{ open: showAgeGate, in: showAgeGate }" role="dialog" aria-modal="true" aria-labelledby="agegate-title-pc">
<div class="bd"></div>
<div class="dlg">
<img class="age-ico" :src="assetUrl('logo-icon-activity.png')" alt="黄果短剧" width="72" height="72" />
<img class="age-ico" :src="assetUrl('logo-icon-activity.png')" alt="51短剧" width="72" height="72" />
<h3 id="agegate-title-pc">本站含成人内容</h3>
<p>
黄果短剧仅限 18 岁以上成年人访问。进入即表示您已年满 18 岁、所在地区法律允许浏览成人内容，并同意<a class="privacy" href="#" @click.prevent>《隐私政策》</a>。
51短剧仅限 18 岁以上成年人访问。进入即表示您已年满 18 岁、所在地区法律允许浏览成人内容，并同意<a class="privacy" href="#" @click.prevent>《隐私政策》</a>。
</p>
<button class="btn primary lg block enter" type="button" @click="confirmAge">
我已年满 18 岁，进入
@@ -697,7 +699,7 @@ const {
<svg class="ic"><use href="#i-x" /></svg>
</button>
<div class="hd">
<h3>下载黄果短剧 App</h3>
<h3>下载51短剧 App</h3>
<p>
<template v-if="targetDramaForDownload">
下载后即可观看<b>《{{ targetDramaForDownload.t }}》</b>全 {{ targetDramaForDownload.eps || '' }} 集及更多原创作品&nbsp;&nbsp;支援 iOS / Android
@@ -761,7 +763,7 @@ const {
<div class="bot">
<span>
已安装？
<a class="link brand" href="#" @click.prevent="handleOpenAppDeepLink">打开黄果短剧 App</a>
<a class="link brand" href="#" @click.prevent="handleOpenAppDeepLink">打开51短剧 App</a>
</span>
<a
class="link guide"
@@ -783,8 +785,8 @@ const {
<svg class="ic"><use href="#i-x" /></svg>
</button>
<div class="hd">
<img :src="assetUrl('logo-icon-activity.png')" alt="黄果短剧" />
<h3>安装黄果短剧 App</h3>
<img :src="assetUrl('logo-icon-activity.png')" alt="51短剧" />
<h3>安装51短剧 App</h3>
<p>三步完成，约 1 分钟。安装后可在桌面直接打开。</p>
</div>
<div class="seg">
@@ -810,7 +812,7 @@ const {
<span class="n">STEP.3</span>
<div class="c">
<b>返回桌面打开</b>
<span>桌面出现「黄果短剧」图标，点击即可观看。建议同时保存账号凭证。</span>
<span>桌面出现「51短剧」图标，点击即可观看。建议同时保存账号凭证。</span>
</div>
</div>
</div>
@@ -819,7 +821,7 @@ const {
<span class="n">STEP.1</span>
<div class="c">
<b>下载 APK 安装包</b>
<span>点击「下载 Android 版」，浏览器开始下载 huangguo.apk，下载完成后在通知栏或下载列表点击打开。</span>
<span>点击「下载 Android 版」，浏览器开始下载 51dj.apk，下载完成后在通知栏或下载列表点击打开。</span>
</div>
</div>
<div class="step">
@@ -832,8 +834,8 @@ const {
<div class="step">
<span class="n">STEP.3</span>
<div class="c">
<b>打开黄果短剧</b>
<span>安装完成后点击「打开」，或在桌面找到「黄果短剧」图标即可观看。</span>
<b>打开51短剧</b>
<span>安装完成后点击「打开」，或在桌面找到「51短剧」图标即可观看。</span>
</div>
</div>
</div>
@@ -851,7 +853,7 @@ const {
{{ installGuideTab === 'ios' ? '下载 iOS 版' : '下载 Android 版' }}
</button>
<a class="link brand open-app" href="#" @click.prevent="handleOpenAppDeepLink">
已安装？打开黄果短剧 App
已安装？打开51短剧 App
<svg class="ic"><use href="#i-arrow-right" /></svg>
</a>
</div>
@@ -1960,7 +1962,7 @@ section.sec {
margin-top: 20px;
}
/* ============ 黄果特色 ============ */
/* ============ 51短剧特色 ============ */
.feat {
margin-top: 40px;
display: flex;
src/components/landing-b/useLandingB.ts
+2 -2
View File
@@ -70,11 +70,11 @@ const GENRES = ['都市', '悬疑', '古装', '奇幻', '穿越', '重生', '武
const FAQS = [
{
q: '黄果短剧 App 需要付费吗？',
q: '51短剧 App 需要付费吗？',
a: 'App 免费下载。海量短剧与影集每日更新，开通会员可解锁全站作品、免广告与高清画质，随时可取消。',
},
{
q: 'iOS 如何安装黄果短剧 App？',
q: 'iOS 如何安装51短剧 App？',
a: '用 Safari 打开本页，点击「下载 iOS 版」，允许下载描述文件后，前往 设置 › 已下载描述文件 › 安装，输入锁屏密码即可；桌面出现图标即安装完成。',
},
{
src/components/mobile/IosInstallGuide.vue
+11 -8
View File
@@ -1,6 +1,6 @@
<template>
<!-- Safari 轻量版安装引导：三步（Figma 63:89569 / 63:89572） -->
<div v-if="show" class="ios-guide" role="dialog" aria-label="黄果短剧轻量版安装引导">
<div v-if="show" class="ios-guide" role="dialog" aria-label="51短剧轻量版安装引导">
<header class="guide-head">
<button class="nav-back" type="button" @click="emit('close')">
<img class="nav-back-ico" :src="iconBack" alt="" width="24" height="24" />
@@ -9,16 +9,16 @@
<div class="top">
<picture class="logo">
<source type="image/webp" :srcset="logoHW" />
<img :src="logoH" alt="黄果短剧" width="79" height="28" />
<img :src="logoH" alt="51短剧" width="79" height="28" />
</picture>
<span class="domain">hgaidj.app</span>
<span class="domain">{{ siteHost }}</span>
</div>
</header>
<div class="content">
<div class="head">
<p class="kicker">轻量版安装</p>
<h2 class="title">黄果短剧 轻量版安装引导</h2>
<h2 class="title">51短剧 轻量版安装引导</h2>
<p class="desc">三步完成，约 1 分钟。安装后可在桌面直接打开。</p>
</div>
@@ -31,7 +31,7 @@
<div class="card">
<div class="ios-alert">
<div class="alert-body">
<p>“hgaidj.app”正尝试下载配置描述文件。要允许吗？</p>
<p>“{{ siteHost }}”正尝试下载配置描述文件。要允许吗？</p>
</div>
<div class="alert-btns">
<div class="alert-btn muted">忽略</div>
@@ -56,7 +56,7 @@
<span class="path-brand">已下载描述文件</span>
</div>
<div class="path-row">
<span class="path-text">黄果短剧</span>
<span class="path-text">51短剧</span>
<img class="ico-film" :src="iconFilm" alt="" width="12" height="12" />
<img class="ico-chevron" :src="iconChevron" alt="" width="14" height="14" />
<span class="path-brand">安装</span>
@@ -78,13 +78,13 @@
<span class="step-name">返回桌面打开</span>
</div>
<div class="card">
<p class="card-body">桌面出现「黄果短剧」图标，点击即可观看。建议同时保存账号凭证。</p>
<p class="card-body">桌面出现「51短剧」图标，点击即可观看。建议同时保存账号凭证。</p>
</div>
</section>
<button class="cta" type="button" @click="emit('close')">
<img class="cta-ico" :src="iconPlay" alt="" width="16" height="16" />
<span>已安装，打开黄果短剧</span>
<span>已安装，打开51短剧</span>
</button>
</div>
</div>
@@ -98,6 +98,9 @@ import iconChevron from '~/assets/image/hg/mobile/guide/icon-chevron-right.svg'
import iconPlay from '~/assets/image/hg/mobile/guide/icon-play.svg'
import iconBack from '~/assets/image/hg/mobile/guide/icon-back.svg'
// 当前落地页域名，随部署域名变化
const siteHost = window.location.host
defineProps<{ show: boolean }>()
const emit = defineEmits<{ close: [] }>()
</script>
src/components/mobile/IosSafariOpenGuide.vue
+6 -3
View File
@@ -9,9 +9,9 @@
<div class="top">
<picture class="logo">
<source type="image/webp" :srcset="logoHW" />
<img :src="logoH" alt="黄果短剧" width="79" height="28" />
<img :src="logoH" alt="51短剧" width="79" height="28" />
</picture>
<span class="domain">hgaidj.app</span>
<span class="domain">{{ siteHost }}</span>
</div>
</header>
@@ -46,7 +46,7 @@
</div>
</div>
<p class="foot">官方备用地址&nbsp;&nbsp;hgaidj.app</p>
<p class="foot">官方备用地址&nbsp;&nbsp;{{ siteHost }}</p>
</div>
</div>
</template>
@@ -60,6 +60,9 @@ import safariIcon from '~/assets/image/hg/mobile/guide/safari-icon.svg'
import copyIcon from '~/assets/image/hg/mobile/guide/icon-copy.svg'
import iconBack from '~/assets/image/hg/mobile/guide/icon-back.svg'
// 当前落地页域名，随部署域名变化
const siteHost = window.location.host
const props = defineProps<{
show: boolean
/** iOS 描述文件下载地址（含渠道参数）；为空时暂不展示链接 */
src/config/app.ts
+6 -2
View File
@@ -1,2 +1,6 @@
// 黄果 App 在下载接口（blsp01.com /api/stat/version）的 appId
export const APP_ID = 2
// 51短剧 App 在下载接口（blsp01.com /api/stat/version）的 appId
export const APP_ID = 6
// 品牌信息：落地页、安装引导统一从这里取
export const APP_NAME = '51短剧'
export const APP_DOMAIN = '51djlandpage.mfcg.me'
src/utils/useAppDownload.ts
+1 -1
View File
@@ -158,7 +158,7 @@ export function useAppDownload() {
*/
async function download(index = 0, terminal: Terminal = isIos ? 'ios' : 'android') {
const trace_id = renewSessionTraceId()
// 写剪贴板供 App 首次启动读取做安装归因：整包 URL 参数 + tid（黄果 App 按 tid 读）
// 写剪贴板供 App 首次启动读取做安装归因：整包 URL 参数 + tid（51短剧 App 按 tid 读）
copyToClipboard(JSON.stringify({ ...route.query, tid: trace_id }))
if (terminal === 'ios' && index !== 1) {