414 lines
9.1 KiB
Vue
414 lines
9.1 KiB
Vue
<template>
|
||
<!-- Safari 轻量版安装引导：三步（Figma 63:89569 / 63:89572） -->
|
||
<div v-if="show" class="ios-guide" role="dialog" aria-label="海角社区轻量版安装引导">
|
||
<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">
|
||
<span class="logo">
|
||
<img src="/b-land/assets/logo-icon-brick.png" alt="海角社区" width="28" height="28" />
|
||
<b>海角社区</b>
|
||
</span>
|
||
<span class="domain">{{ siteHost }}</span>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="content">
|
||
<div class="head">
|
||
<p class="kicker">轻量版安装</p>
|
||
<h2 class="title">海角社区 轻量版安装引导</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">海角社区</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">桌面出现「海角社区」图标，点击即可观看。建议同时保存账号凭证。</p>
|
||
</div>
|
||
</section>
|
||
|
||
<button class="cta" type="button" @click="emit('close')">
|
||
<img class="cta-ico" :src="iconPlay" alt="" width="16" height="16" />
|
||
<span>已安装，打开海角社区</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
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: #090b2b;
|
||
color: #f2f2f4;
|
||
font-family: 'PingFang SC', 'Helvetica Neue', sans-serif;
|
||
overflow-y: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
.guide-head {
|
||
flex-shrink: 0;
|
||
background: #090b2b;
|
||
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: flex;
|
||
align-items: center;
|
||
gap: r(6);
|
||
height: r(28);
|
||
|
||
img {
|
||
width: r(28);
|
||
height: r(28);
|
||
border-radius: r(7);
|
||
object-fit: cover;
|
||
display: block;
|
||
}
|
||
|
||
b {
|
||
font-size: r(16);
|
||
font-weight: 700;
|
||
color: #fff;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
|
||
.domain {
|
||
font-weight: 500;
|
||
font-size: r(11);
|
||
line-height: r(15);
|
||
letter-spacing: 0.2em;
|
||
color: #7c86b8;
|
||
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: #8fb6ff;
|
||
}
|
||
|
||
.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: #a9b4e0;
|
||
}
|
||
}
|
||
|
||
.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: #4d8dff;
|
||
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: #121a4d;
|
||
border: 1px solid rgba(255, 255, 255, 0.07);
|
||
border-radius: r(12);
|
||
}
|
||
|
||
.ios-alert {
|
||
width: 100%;
|
||
background: #1c2768;
|
||
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: #a9b4e0;
|
||
}
|
||
|
||
&.brand {
|
||
font-weight: 600;
|
||
font-size: r(15);
|
||
letter-spacing: -0.01em;
|
||
color: #4d8dff;
|
||
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: #7c86b8;
|
||
}
|
||
|
||
.card-body {
|
||
margin: 0;
|
||
font-weight: 400;
|
||
font-size: r(13);
|
||
line-height: r(18);
|
||
color: #a9b4e0;
|
||
}
|
||
|
||
.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: #4d8dff;
|
||
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, #5aa0ff 0%, #4d8dff 37.14%, #1a4fd0 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>
|