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

[Ai] chore: 初始化 hjsq_landpage 仓库

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
谢宇宁
2026-11-05 12:17:11 +07:00
co-authored by Claude Opus 5.5
commit 23df3ae435
343 changed files with 24939 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/mobile/AndroidInstallTip.vue
+67
View File
@@ -0,0 +1,67 @@
<template>
<!-- 安卓点下载后弹「安卓安装教程」整图（对齐 d10vry7axuojk2 版落地页）：只有图内「我知道了」热区可关闭 -->
<div v-if="show" class="android-tip" role="dialog" aria-label="安卓安装教程">
<div class="tip-card">
<picture>
<source type="image/webp" :srcset="tipW" />
<img :src="tip" alt="安卓安装教程" />
</picture>
<button class="confirm-hit" type="button" aria-label="我知道了" @click="emit('close')" />
</div>
</div>
</template>
<script lang="ts" setup>
import tip from '~/assets/image/hg/mobile/android-tip.png'
import tipW from '~/assets/image/hg/mobile/android-tip.webp'
defineProps<{ show: boolean }>()
const emit = defineEmits<{ close: [] }>()
</script>
<style lang="scss" scoped>
@use 'sass:math';
// 参考站 37.5px/rem 换算：卡片 7.92×11.76rem = 297×441，按钮热区 top 10.133rem = 380、3.733×0.96rem = 140×36
@function r($px) {
@return math.div($px, 50) * 1rem;
}
.android-tip {
position: fixed;
inset: 0;
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.7);
}
.tip-card {
position: relative;
width: r(297);
height: r(441);
border-radius: r(12);
overflow: hidden;
img {
display: block;
width: 100%;
height: 100%;
}
}
.confirm-hit {
position: absolute;
left: 50%;
top: r(380);
transform: translateX(-50%);
width: r(140);
height: r(36);
border-radius: r(40);
border: none;
padding: 0;
background: transparent;
cursor: pointer;
}
</style>
src/components/mobile/IosInstallGuide.vue
+406
View File
@@ -0,0 +1,406 @@
<template>
<!-- Safari 轻量版安装引导：三步（Figma 63:89569 / 63:89572） -->
<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" />
<span>返回</span>
</button>
<div class="top">
<picture class="logo">
<source type="image/webp" :srcset="logoHW" />
<img :src="logoH" alt="51短剧" width="79" height="28" />
</picture>
<span class="domain">{{ siteHost }}</span>
</div>
</header>
<div class="content">
<div class="head">
<p class="kicker">轻量版安装</p>
<h2 class="title">51短剧 轻量版安装引导</h2>
<p class="desc">三步完成，约 1 分钟。安装后可在桌面直接打开。</p>
</div>
<!-- STEP.1 -->
<section class="step">
<div class="step-h">
<span class="step-no">STEP.1</span>
<span class="step-name">允许下载描述文件</span>
</div>
<div class="card">
<div class="ios-alert">
<div class="alert-body">
<p>“{{ siteHost }}”正尝试下载配置描述文件。要允许吗？</p>
</div>
<div class="alert-btns">
<div class="alert-btn muted">忽略</div>
<div class="alert-btn brand">允许</div>
</div>
</div>
<p class="card-tip">点击「允许」，系统提示「已下载描述文件」即可进入下一步。</p>
</div>
</section>
<!-- STEP.2 -->
<section class="step">
<div class="step-h">
<span class="step-no">STEP.2</span>
<span class="step-name">安装描述文件</span>
</div>
<div class="card">
<div class="path-row">
<span class="path-text">设置</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>
</div>
<div class="path-row">
<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>
</div>
<div class="path-row">
<span class="path-text">输入锁屏密码</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>
</div>
<p class="card-tip">安装包报毒提醒为杀毒软件误报，可忽略继续。</p>
</div>
</section>
<!-- STEP.3 -->
<section class="step">
<div class="step-h">
<span class="step-no">STEP.3</span>
<span class="step-name">返回桌面打开</span>
</div>
<div class="card">
<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>已安装，打开51短剧</span>
</button>
</div>
</div>
</template>
<script lang="ts" setup>
import logoH from '~/assets/image/hg/common/logo-h.png'
import logoHW from '~/assets/image/hg/common/logo-h.webp'
import iconFilm from '~/assets/image/hg/mobile/guide/icon-film.svg'
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>
<style lang="scss" scoped>
@use 'sass:math';
@function r($px) {
@return math.div($px, 50) * 1rem;
}
.ios-guide {
position: fixed;
inset: 0;
z-index: 999;
display: flex;
flex-direction: column;
background: #0b0b0d;
color: #f2f2f4;
font-family: 'PingFang SC', 'Helvetica Neue', sans-serif;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.guide-head {
flex-shrink: 0;
background: #0b0b0d;
padding-top: env(safe-area-inset-top);
}
.nav-back {
display: flex;
align-items: center;
gap: r(12);
width: 100%;
padding: r(10);
box-sizing: border-box;
border: none;
background: transparent;
color: #fff;
font-family: inherit;
font-weight: 500;
font-size: r(16);
line-height: normal;
cursor: pointer;
text-align: left;
.nav-back-ico {
width: r(24);
height: r(24);
display: block;
flex-shrink: 0;
transform: scaleX(-1);
}
}
.top {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
height: r(56);
padding: 0 r(16);
box-sizing: border-box;
.logo {
display: block;
width: r(79);
height: r(28);
img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
}
.domain {
font-weight: 500;
font-size: r(11);
line-height: r(15);
letter-spacing: 0.2em;
color: #6b6b74;
white-space: nowrap;
}
}
.content {
display: flex;
flex-direction: column;
align-items: stretch;
gap: r(28);
padding: r(24) r(16) calc(#{r(32)} + env(safe-area-inset-bottom));
box-sizing: border-box;
}
.head {
display: flex;
flex-direction: column;
gap: r(8);
.kicker {
margin: 0;
font-weight: 500;
font-size: r(11);
line-height: r(15);
letter-spacing: 0.2em;
color: #e9c977;
}
.title {
margin: 0;
font-weight: 600;
font-size: r(24);
line-height: r(27);
letter-spacing: -0.01em;
color: #f2f2f4;
}
.desc {
margin: 0;
font-weight: 400;
font-size: r(13);
line-height: r(18);
color: #a1a1aa;
}
}
.step {
display: flex;
flex-direction: column;
gap: r(12);
width: 100%;
}
.step-h {
display: flex;
align-items: baseline;
gap: r(10);
.step-no {
flex-shrink: 0;
font-weight: 600;
font-size: r(26);
line-height: r(32);
letter-spacing: -0.01em;
color: #ec237f;
white-space: nowrap;
}
.step-name {
flex: 1;
font-weight: 600;
font-size: r(15);
line-height: r(18);
letter-spacing: -0.01em;
color: #f2f2f4;
}
}
.card {
display: flex;
flex-direction: column;
gap: r(12);
width: 100%;
padding: r(16);
box-sizing: border-box;
background: #141417;
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: r(12);
}
.ios-alert {
width: 100%;
background: #232328;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: r(14);
overflow: hidden;
.alert-body {
padding: r(18) r(16) r(16);
box-sizing: border-box;
p {
margin: 0;
font-weight: 500;
font-size: r(13);
line-height: r(18);
color: #f2f2f4;
text-align: center;
}
}
.alert-btns {
display: flex;
height: r(44);
border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.alert-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
font-size: r(13);
line-height: r(18);
white-space: nowrap;
&.muted {
font-weight: 500;
color: #a1a1aa;
}
&.brand {
font-weight: 600;
font-size: r(15);
letter-spacing: -0.01em;
color: #ec237f;
border-left: 1px solid rgba(255, 255, 255, 0.07);
}
}
}
.card-tip {
margin: 0;
font-weight: 400;
font-size: r(11);
line-height: r(15);
letter-spacing: 0.06em;
color: #6b6b74;
}
.card-body {
margin: 0;
font-weight: 400;
font-size: r(13);
line-height: r(18);
color: #a1a1aa;
}
.path-row {
display: flex;
align-items: center;
gap: r(8);
width: 100%;
.path-text {
font-weight: 500;
font-size: r(13);
line-height: r(18);
color: #f2f2f4;
white-space: nowrap;
}
.path-brand {
font-weight: 500;
font-size: r(13);
line-height: r(18);
color: #ec237f;
white-space: nowrap;
}
.ico-film {
width: r(12);
height: r(12);
display: block;
flex-shrink: 0;
}
.ico-chevron {
width: r(14);
height: r(14);
display: block;
flex-shrink: 0;
}
}
.cta {
display: flex;
align-items: center;
justify-content: center;
gap: r(6);
width: 100%;
height: r(48);
padding: 0;
border: none;
border-radius: r(24);
background: linear-gradient(172.03deg, #ff4a7b 0%, #ec237f 37.14%, #93226f 71.43%);
color: #fff;
font-weight: 600;
font-size: r(15);
line-height: r(18);
letter-spacing: -0.01em;
cursor: pointer;
.cta-ico {
width: r(16);
height: r(16);
display: block;
}
}
</style>
src/components/mobile/IosSafariOpenGuide.vue
+315
View File
@@ -0,0 +1,315 @@
<template>
<!-- 社媒内置浏览器：引导复制链接到 Safari（Figma 63:89540） -->
<div v-if="show" class="safari-open" role="dialog" aria-label="请在 Safari 中打开">
<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" />
<span>返回</span>
</button>
<div class="top">
<picture class="logo">
<source type="image/webp" :srcset="logoHW" />
<img :src="logoH" alt="51短剧" width="79" height="28" />
</picture>
<span class="domain">{{ siteHost }}</span>
</div>
</header>
<div class="content">
<div class="head">
<img class="safari-icon" :src="safariIcon" alt="" width="48" height="48" />
<p class="kicker">仅支持 Safari 浏览器</p>
<h2 class="title">请在 Safari 中打开</h2>
<p class="desc">该链接仅支持 Safari 安装描述文件。请复制链接，打开 Safari 粘贴访问后继续安装。</p>
</div>
<div class="link-box">
<p class="link-text">{{ displayUrl }}</p>
<button class="copy-btn" type="button" @click="onCopy">
<img class="copy-ico" :src="copyIcon" alt="" width="16" height="16" />
<span>{{ copied ? '已复制' : '复制' }}</span>
</button>
</div>
<div class="steps">
<div class="row">
<span class="num">01</span>
<span class="label">复制上方链接</span>
</div>
<div class="row">
<span class="num">02</span>
<span class="label">打开 Safari，粘贴并访问</span>
</div>
<div class="row">
<span class="num">03</span>
<span class="label">允许下载描述文件，按引导安装</span>
</div>
</div>
<p class="foot">官方备用地址&nbsp;&nbsp;{{ siteHost }}</p>
</div>
</div>
</template>
<script lang="ts" setup>
import { computed, ref } from 'vue'
import { copyToClipboard } from '~/utils/clipboard'
import logoH from '~/assets/image/hg/common/logo-h.png'
import logoHW from '~/assets/image/hg/common/logo-h.webp'
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 描述文件下载地址（含渠道参数）；为空时暂不展示链接 */
url?: string
}>()
const emit = defineEmits<{ close: [] }>()
const copied = ref(false)
let copiedTimer: ReturnType<typeof setTimeout> | null = null
const copyUrl = computed(() => props.url || '')
const displayUrl = computed(() => copyUrl.value)
function onCopy() {
if (!copyUrl.value) return
copyToClipboard(copyUrl.value)
copied.value = true
if (copiedTimer) clearTimeout(copiedTimer)
copiedTimer = setTimeout(() => {
copied.value = false
}, 2000)
}
</script>
<style lang="scss" scoped>
@use 'sass:math';
@function r($px) {
@return math.div($px, 50) * 1rem;
}
.safari-open {
position: fixed;
inset: 0;
z-index: 1000;
background: #0b0b0d;
color: #f2f2f4;
font-family: 'PingFang SC', 'Helvetica Neue', sans-serif;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.guide-head {
position: sticky;
top: 0;
z-index: 2;
background: #0b0b0d;
padding-top: env(safe-area-inset-top);
}
.nav-back {
display: flex;
align-items: center;
gap: r(12);
width: 100%;
padding: r(10);
box-sizing: border-box;
border: none;
background: transparent;
color: #fff;
font-family: inherit;
font-weight: 500;
font-size: r(16);
line-height: normal;
cursor: pointer;
text-align: left;
.nav-back-ico {
width: r(24);
height: r(24);
display: block;
flex-shrink: 0;
transform: scaleX(-1);
}
}
.top {
display: flex;
align-items: center;
justify-content: space-between;
height: r(56);
padding: 0 r(16);
box-sizing: border-box;
.logo {
display: block;
width: r(79);
height: r(28);
img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
}
.domain {
font-weight: 500;
font-size: r(11);
line-height: r(15);
letter-spacing: 0.2em;
color: #6b6b74;
white-space: nowrap;
}
}
.content {
display: flex;
flex-direction: column;
align-items: center;
gap: r(24);
padding: r(56) r(16) r(32);
box-sizing: border-box;
}
.head {
display: flex;
flex-direction: column;
align-items: center;
gap: r(12);
width: 100%;
text-align: center;
.safari-icon {
width: r(48);
height: r(48);
display: block;
}
.kicker {
margin: 0;
font-weight: 500;
font-size: r(11);
line-height: r(15);
letter-spacing: 0.2em;
color: #6b6b74;
}
.title {
margin: 0;
font-weight: 600;
font-size: r(26);
line-height: r(32);
letter-spacing: -0.01em;
color: #f2f2f4;
}
.desc {
margin: 0;
font-weight: 400;
font-size: r(13);
line-height: r(18);
color: #a1a1aa;
}
}
.link-box {
display: flex;
align-items: center;
gap: r(8);
width: 100%;
height: r(56);
padding: 0 r(6) 0 r(14);
box-sizing: border-box;
background: #141417;
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: r(12);
.link-text {
flex: 1;
margin: 0;
min-width: 0;
font-weight: 500;
font-size: r(13);
line-height: r(18);
color: #f2f2f4;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.copy-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: r(6);
flex-shrink: 0;
width: r(92);
height: r(48);
padding: 0;
border: none;
border-radius: r(24);
background: linear-gradient(152.45deg, #ff4a7b 0%, #ec237f 37.14%, #93226f 71.43%);
color: #fff;
font-weight: 600;
font-size: r(15);
line-height: r(18);
letter-spacing: -0.01em;
cursor: pointer;
.copy-ico {
width: r(16);
height: r(16);
display: block;
}
}
}
.steps {
width: 100%;
.row {
display: flex;
align-items: center;
gap: r(14);
padding: r(14) 0;
border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.num {
flex-shrink: 0;
width: r(40);
font-weight: 600;
font-size: r(26);
line-height: r(32);
letter-spacing: -0.01em;
color: #6b6b74;
}
.label {
flex: 1;
font-weight: 500;
font-size: r(13);
line-height: r(18);
color: #f2f2f4;
}
}
.foot {
margin: 0;
font-weight: 400;
font-size: r(11);
line-height: r(15);
letter-spacing: 0.06em;
color: #6b6b74;
text-align: center;
white-space: pre-wrap;
}
</style>