313 lines
6.7 KiB
Vue
313 lines
6.7 KiB
Vue
<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="黄果短剧" width="79" height="28" />
|
||
</picture>
|
||
<span class="domain">hgaidj.app</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">官方备用地址 hgaidj.app</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 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>
|