fix(h5): 星座分享卡置顶;首页头像进个人档案
星座 ShareSheet/落地页卡片改到上方;首页顶栏个人入口从愈心解码改为 /profile。 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -1,5 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<div v-if="open" class="mask" @click.self="$emit('close')">
|
<div
|
||||||
|
v-if="open"
|
||||||
|
class="mask"
|
||||||
|
:class="{ top: payload?.type === 'star' }"
|
||||||
|
@click.self="$emit('close')"
|
||||||
|
>
|
||||||
<div class="sheet">
|
<div class="sheet">
|
||||||
<header>
|
<header>
|
||||||
<h3>分享卡</h3>
|
<h3>分享卡</h3>
|
||||||
@@ -99,10 +104,17 @@ async function nativeShare() {
|
|||||||
position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:40;
|
position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:40;
|
||||||
display:flex;align-items:flex-end;justify-content:center;padding:12px;
|
display:flex;align-items:flex-end;justify-content:center;padding:12px;
|
||||||
}
|
}
|
||||||
|
.mask.top{
|
||||||
|
align-items:flex-start;
|
||||||
|
padding-top:max(16px, env(safe-area-inset-top, 0px));
|
||||||
|
}
|
||||||
.sheet{
|
.sheet{
|
||||||
width:100%;max-width:430px;background:#fff5f3;border-radius:20px 20px 12px 12px;
|
width:100%;max-width:430px;background:#fff5f3;border-radius:20px 20px 12px 12px;
|
||||||
padding:16px;max-height:90vh;overflow:auto;
|
padding:16px;max-height:90vh;overflow:auto;
|
||||||
}
|
}
|
||||||
|
.mask.top .sheet{
|
||||||
|
border-radius:12px 12px 20px 20px;
|
||||||
|
}
|
||||||
header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
|
header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
|
||||||
h3{font-size:16px;margin:0}
|
h3{font-size:16px;margin:0}
|
||||||
.x{border:none;background:transparent;color:#999;font-size:13px}
|
.x{border:none;background:transparent;color:#999;font-size:13px}
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="archive reveal" style="--d: 40ms">
|
<div class="archive reveal" style="--d: 40ms">
|
||||||
<router-link to="/portrait" class="av-self" :aria-label="`${selfLabel}的档案`">
|
<router-link to="/profile" class="av-self" :aria-label="`${selfLabel}的档案`">
|
||||||
<span class="av" aria-hidden="true">
|
<span class="av" aria-hidden="true">
|
||||||
<img class="av-img" :src="avatarSrc" alt="" />
|
<img class="av-img" :src="avatarSrc" alt="" />
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
@@ -4,6 +4,11 @@
|
|||||||
<div class="top-row">
|
<div class="top-row">
|
||||||
<span class="who-static">分享</span>
|
<span class="who-static">分享</span>
|
||||||
</div>
|
</div>
|
||||||
|
<ShareCard
|
||||||
|
v-if="payload?.type === 'star'"
|
||||||
|
class="card-lead"
|
||||||
|
v-bind="cardProps"
|
||||||
|
/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<div class="body">
|
<div class="body">
|
||||||
@@ -17,13 +22,13 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<div class="hero-block">
|
<div class="hero-block" :class="{ compact: payload.type === 'star' }">
|
||||||
<HomeToolIcon :name="heroIcon" :size="64" />
|
<HomeToolIcon v-if="payload.type !== 'star'" :name="heroIcon" :size="64" />
|
||||||
<h1 class="hero-title">{{ shareTitle }}</h1>
|
<h1 class="hero-title">{{ shareTitle }}</h1>
|
||||||
<p class="hero-sub">{{ shareSub }}</p>
|
<p class="hero-sub">{{ shareSub }}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ShareCard v-bind="cardProps" />
|
<ShareCard v-if="payload.type !== 'star'" v-bind="cardProps" />
|
||||||
|
|
||||||
<div class="actions">
|
<div class="actions">
|
||||||
<router-link class="cta" :to="ctaTo">{{ ctaText }}</router-link>
|
<router-link class="cta" :to="ctaTo">{{ ctaText }}</router-link>
|
||||||
@@ -113,10 +118,17 @@ const ctaText = computed(() => {
|
|||||||
.who-static { flex: 1; font-size: 16px; font-weight: 700; text-align: center; }
|
.who-static { flex: 1; font-size: 16px; font-weight: 700; text-align: center; }
|
||||||
.spacer { width: 36px; }
|
.spacer { width: 36px; }
|
||||||
.body { padding: 8px 16px 24px; }
|
.body { padding: 8px 16px 24px; }
|
||||||
|
.card-lead {
|
||||||
|
margin: 10px 16px 0;
|
||||||
|
}
|
||||||
.hero-block, .empty-hero {
|
.hero-block, .empty-hero {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 20px 12px 16px;
|
padding: 20px 12px 16px;
|
||||||
}
|
}
|
||||||
|
.hero-block.compact {
|
||||||
|
padding: 14px 12px 8px;
|
||||||
|
}
|
||||||
|
.hero-block.compact .hero-title { font-size: 18px; margin-top: 0; }
|
||||||
.hero-title {
|
.hero-title {
|
||||||
font-family: var(--font-display);
|
font-family: var(--font-display);
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
|
|||||||
Reference in New Issue
Block a user