[Ai] chore: 初始化 hjsq_landpage 仓库
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
谢宇宁
@@ -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>
|
||||
Reference in New Issue
Block a user