新增添加到桌面引导
This commit is contained in:
yml
@@ -0,0 +1,455 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { showToast } from 'vant'
|
||||
import shareMenuIcon from '@/assets/share-menu-icon.png'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const homeUrl = computed(() => {
|
||||
if (typeof window === 'undefined') return 'https://hao858.com/m'
|
||||
return `${window.location.origin}/m`
|
||||
})
|
||||
|
||||
const displayHost = computed(() => {
|
||||
if (typeof window === 'undefined') return 'hao858.com'
|
||||
return window.location.host || 'hao858.com'
|
||||
})
|
||||
|
||||
async function copyHomeUrl() {
|
||||
try {
|
||||
await navigator.clipboard.writeText(homeUrl.value)
|
||||
showToast({ message: '首页链接已复制', icon: 'success' })
|
||||
} catch {
|
||||
showToast({ message: '复制失败，请手动复制浏览器地址', icon: 'cross' })
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="add-home-guide">
|
||||
<header class="page-header">
|
||||
<button class="back-btn" type="button" @click="router.back()">
|
||||
<van-icon name="arrow-left" :size="20" />
|
||||
</button>
|
||||
<h1>添加到桌面</h1>
|
||||
<button class="home-btn" type="button" @click="router.push('/m')">首页</button>
|
||||
</header>
|
||||
|
||||
<section class="guide-hero">
|
||||
<div class="guide-hero-copy">
|
||||
<span>大锤商行</span>
|
||||
<h2>如何添加到手机</h2>
|
||||
<p>添加后可从桌面直接进入，找号、下单和查看消息更顺手。</p>
|
||||
</div>
|
||||
<div class="hammer-badge" aria-hidden="true">锤</div>
|
||||
</section>
|
||||
|
||||
<section class="guide-step">
|
||||
<div class="step-index">1</div>
|
||||
<div class="step-body">
|
||||
<h3>点击浏览器「分享/共享」</h3>
|
||||
<p>请先用 Safari、Chrome 或系统浏览器打开大锤商行，在底部工具栏或菜单里找到入口。</p>
|
||||
<div class="browser-demo" aria-label="浏览器分享或共享按钮示意">
|
||||
<div class="demo-nav">
|
||||
<span>AA</span>
|
||||
<strong>{{ displayHost }}</strong>
|
||||
<van-icon name="replay" :size="18" />
|
||||
</div>
|
||||
<div class="share-action">
|
||||
<img :src="shareMenuIcon" alt="分享或共享" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="guide-step">
|
||||
<div class="step-index">2</div>
|
||||
<div class="step-body">
|
||||
<h3>下滑点击「添加到主屏幕」</h3>
|
||||
<p>在分享/共享菜单中找到添加入口，确认名称后保存即可。</p>
|
||||
<div class="menu-demo" aria-label="添加到主屏幕菜单示意">
|
||||
<div class="menu-row">
|
||||
<span>添加到阅读列表</span>
|
||||
<van-icon name="eye-o" :size="20" />
|
||||
</div>
|
||||
<div class="menu-row">
|
||||
<span>添加书签</span>
|
||||
<van-icon name="bookmark-o" :size="20" />
|
||||
</div>
|
||||
<div class="menu-row">
|
||||
<span>添加到个人收藏</span>
|
||||
<van-icon name="star-o" :size="20" />
|
||||
</div>
|
||||
<div class="menu-row is-active">
|
||||
<strong>添加到主屏幕</strong>
|
||||
<span class="plus-box">+</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="guide-note">
|
||||
<van-icon name="info-o" :size="18" />
|
||||
<p>
|
||||
如果当前在微信或 QQ 内置浏览器，请先点右上角「...」选择在系统浏览器打开，再按上方步骤添加。
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<div class="guide-actions">
|
||||
<button class="primary-action" type="button" @click="copyHomeUrl">复制首页链接</button>
|
||||
<button class="secondary-action" type="button" @click="router.push('/m')">返回首页</button>
|
||||
</div>
|
||||
|
||||
<footer class="guide-footer">
|
||||
<span>找回包赔</span>
|
||||
<span>安心服务</span>
|
||||
<span>真实号源</span>
|
||||
</footer>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.add-home-guide {
|
||||
width: 100%;
|
||||
max-width: 430px;
|
||||
min-height: 100dvh;
|
||||
margin: 0 auto;
|
||||
padding-bottom: calc(24px + env(safe-area-inset-bottom));
|
||||
background: #f6f8fb;
|
||||
color: #17233d;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
display: grid;
|
||||
grid-template-columns: 44px 1fr 52px;
|
||||
align-items: center;
|
||||
height: 48px;
|
||||
padding: 0 8px;
|
||||
border-bottom: 1px solid #edf0f5;
|
||||
background: rgba(255, 255, 255, 0.96);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
margin: 0;
|
||||
color: #111827;
|
||||
font-size: 17px;
|
||||
font-weight: 800;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.back-btn,
|
||||
.home-btn {
|
||||
display: grid;
|
||||
height: 40px;
|
||||
place-items: center;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.home-btn {
|
||||
justify-self: end;
|
||||
padding: 0 8px;
|
||||
color: #ff6a00;
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.guide-hero {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 88px;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
margin: 12px;
|
||||
padding: 18px;
|
||||
border: 1px solid #fed7aa;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(135deg, #fff7ed 0%, #ffffff 58%, #eef6ff 100%);
|
||||
}
|
||||
|
||||
.guide-hero-copy {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.guide-hero-copy span {
|
||||
color: #c2410c;
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.guide-hero-copy h2 {
|
||||
margin: 7px 0 0;
|
||||
color: #1f1308;
|
||||
font-size: 28px;
|
||||
font-weight: 900;
|
||||
line-height: 1.18;
|
||||
}
|
||||
|
||||
.guide-hero-copy p {
|
||||
margin: 10px 0 0;
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.hammer-badge {
|
||||
display: grid;
|
||||
width: 82px;
|
||||
height: 82px;
|
||||
place-items: center;
|
||||
border-radius: 22px;
|
||||
background: linear-gradient(135deg, #ff9a3d, #ef4444);
|
||||
color: #fff;
|
||||
font-size: 30px;
|
||||
font-weight: 900;
|
||||
box-shadow: 0 18px 36px rgba(239, 68, 68, 0.2);
|
||||
transform: rotate(-8deg);
|
||||
}
|
||||
|
||||
.guide-step {
|
||||
display: grid;
|
||||
grid-template-columns: 42px minmax(0, 1fr);
|
||||
gap: 8px;
|
||||
margin: 12px;
|
||||
}
|
||||
|
||||
.step-index {
|
||||
display: grid;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
place-items: center;
|
||||
border-radius: 999px;
|
||||
background: #ff8a1f;
|
||||
color: #fff;
|
||||
font-size: 18px;
|
||||
font-weight: 900;
|
||||
box-shadow: 0 8px 18px rgba(255, 138, 31, 0.18);
|
||||
}
|
||||
|
||||
.step-body {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.step-body h3 {
|
||||
margin: 2px 0 6px;
|
||||
color: #111827;
|
||||
font-size: 18px;
|
||||
font-weight: 900;
|
||||
line-height: 1.35;
|
||||
}
|
||||
|
||||
.step-body p {
|
||||
margin: 0 0 10px;
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.browser-demo,
|
||||
.menu-demo {
|
||||
overflow: hidden;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
|
||||
}
|
||||
|
||||
.browser-demo {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
justify-items: center;
|
||||
padding: 22px 16px 18px;
|
||||
}
|
||||
|
||||
.demo-nav {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
grid-template-columns: 38px minmax(0, 1fr) 28px;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-height: 46px;
|
||||
padding: 0 12px;
|
||||
border-radius: 8px;
|
||||
background: #f8fafc;
|
||||
color: #111827;
|
||||
box-shadow: inset 0 0 0 1px #eef2f7;
|
||||
}
|
||||
|
||||
.demo-nav span,
|
||||
.demo-nav strong {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.demo-nav span {
|
||||
font-size: 15px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.demo-nav strong {
|
||||
font-size: 17px;
|
||||
font-weight: 900;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.share-action {
|
||||
display: grid;
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
place-items: center;
|
||||
border-radius: 16px;
|
||||
background: #eff6ff;
|
||||
color: #1683ff;
|
||||
box-shadow: 0 10px 22px rgba(22, 131, 255, 0.14);
|
||||
}
|
||||
|
||||
.share-action img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.menu-demo {
|
||||
display: grid;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.menu-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 50px;
|
||||
padding: 0 18px;
|
||||
border-bottom: 1px solid #eef2f7;
|
||||
color: #111827;
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.menu-row:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.menu-row.is-active {
|
||||
margin: 7px 10px;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
background: #fff7ed;
|
||||
color: #c2410c;
|
||||
box-shadow: 0 10px 22px rgba(255, 106, 0, 0.12);
|
||||
}
|
||||
|
||||
.plus-box {
|
||||
display: grid;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
place-items: center;
|
||||
border: 2px solid #111827;
|
||||
border-radius: 7px;
|
||||
color: #111827;
|
||||
font-size: 17px;
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.guide-note {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: flex-start;
|
||||
margin: 12px;
|
||||
padding: 12px;
|
||||
border: 1px solid #bfdbfe;
|
||||
border-radius: 8px;
|
||||
background: #eff6ff;
|
||||
color: #1d4ed8;
|
||||
}
|
||||
|
||||
.guide-note p {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
.guide-actions {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 8px;
|
||||
margin: 14px 12px 0;
|
||||
}
|
||||
|
||||
.primary-action,
|
||||
.secondary-action {
|
||||
height: 42px;
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.primary-action {
|
||||
border: 0;
|
||||
background: #ff6a00;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.secondary-action {
|
||||
border: 1px solid #dbe3ee;
|
||||
background: #fff;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.primary-action:active,
|
||||
.secondary-action:active,
|
||||
.home-btn:active,
|
||||
.back-btn:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
.guide-footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 18px;
|
||||
margin-top: 22px;
|
||||
color: #7c8899;
|
||||
font-size: 12px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
@media (max-width: 360px) {
|
||||
.guide-hero {
|
||||
grid-template-columns: minmax(0, 1fr) 70px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.guide-hero-copy h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.hammer-badge {
|
||||
width: 68px;
|
||||
height: 68px;
|
||||
border-radius: 18px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.guide-actions {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.guide-footer {
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -82,6 +82,76 @@
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.add-home-strip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
min-height: 50px;
|
||||
margin-top: 10px;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid #fed7aa;
|
||||
border-radius: 8px;
|
||||
background: #fff7ed;
|
||||
color: #7c2d12;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.add-home-mark {
|
||||
display: grid;
|
||||
flex: 0 0 auto;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
place-items: center;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(135deg, #ff7a1a, #ef4444);
|
||||
color: #fff;
|
||||
box-shadow: 0 8px 18px rgba(239, 68, 68, 0.2);
|
||||
}
|
||||
|
||||
.add-home-copy {
|
||||
display: grid;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.add-home-copy strong,
|
||||
.add-home-copy small {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.add-home-copy strong {
|
||||
color: #7c2d12;
|
||||
font-size: 14px;
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
.add-home-copy small {
|
||||
color: #c2410c;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.add-home-cta {
|
||||
display: grid;
|
||||
flex: 0 0 auto;
|
||||
min-width: 64px;
|
||||
height: 32px;
|
||||
place-items: center;
|
||||
border-radius: 8px;
|
||||
background: #ef4444;
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
font-weight: 900;
|
||||
box-shadow: 0 8px 18px rgba(239, 68, 68, 0.18);
|
||||
}
|
||||
|
||||
.add-home-strip:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
.fraud-tip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@@ -610,6 +610,16 @@ syncMobileHomeQuery()
|
||||
{{ supportLoading ? '接入中' : '客服' }}
|
||||
</button>
|
||||
</div>
|
||||
<RouterLink class="add-home-strip" to="/m/add-home-guide" aria-label="查看添加到手机桌面教程">
|
||||
<span class="add-home-mark">
|
||||
<van-icon name="home-o" :size="18" />
|
||||
</span>
|
||||
<span class="add-home-copy">
|
||||
<strong>添加到手机桌面</strong>
|
||||
<small>下次像 App 一样快速打开</small>
|
||||
</span>
|
||||
<span class="add-home-cta">去添加</span>
|
||||
</RouterLink>
|
||||
<van-search
|
||||
v-model="searchValue"
|
||||
shape="round"
|
||||
|
||||
Reference in New Issue
Block a user