jackyu66gitandCursor
96292d0e95
Logo 下移 safe-area、embed 隐藏 HTML 标题；暖色渐变铺满刘海，页面背景上延与全屏洗底层对齐。 Co-authored-by: Cursor <cursoragent@cursor.com>
126 lines
2.8 KiB
Vue
126 lines
2.8 KiB
Vue
<template>
|
||
<!-- 测测同构功能界面 · 愈心谷品牌质感（design-system） -->
|
||
<main class="home">
|
||
<span class="atm a1" aria-hidden="true" />
|
||
<span class="atm a2" aria-hidden="true" />
|
||
<span class="atm a3" aria-hidden="true" />
|
||
|
||
<HomeArchiveStrip :nickname="profileLabel" :avatar-url="avatarUrl" @add="goPlus('add')" />
|
||
<HomeSelfCard
|
||
:profile-label="profileLabel"
|
||
:tips="tips"
|
||
:loading="tipsLoading"
|
||
@open-profile="router.push('/profile')"
|
||
/>
|
||
|
||
<div class="sheet reveal" style="--d: 100ms">
|
||
<HomeToolGrid :row1="gridRow1" :row2="gridRow2" @track="trackGrid" />
|
||
<HomePromoSection />
|
||
<HomeFeedSection v-if="feedsVisible" :feeds="feeds" />
|
||
</div>
|
||
</main>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import HomeArchiveStrip from '../components/home/HomeArchiveStrip.vue'
|
||
import HomeFeedSection from '../components/home/HomeFeedSection.vue'
|
||
import HomePromoSection from '../components/home/HomePromoSection.vue'
|
||
import HomeSelfCard from '../components/home/HomeSelfCard.vue'
|
||
import HomeToolGrid from '../components/home/HomeToolGrid.vue'
|
||
import { useHomePage } from '../composables/useHomePage'
|
||
|
||
const {
|
||
router,
|
||
profileLabel,
|
||
avatarUrl,
|
||
tips,
|
||
tipsLoading,
|
||
gridRow1,
|
||
gridRow2,
|
||
feeds,
|
||
feedsVisible,
|
||
goPlus,
|
||
trackGrid,
|
||
} = useHomePage()
|
||
</script>
|
||
|
||
<style scoped>
|
||
.home {
|
||
position: relative;
|
||
overflow-x: hidden;
|
||
margin-top: calc(-1 * var(--yxg-safe-top));
|
||
padding-top: var(--yxg-page-top);
|
||
padding-bottom: var(--spacing-xs);
|
||
min-height: calc(100% + var(--yxg-safe-top));
|
||
background: var(--yxg-page-wash);
|
||
}
|
||
.atm {
|
||
position: absolute;
|
||
pointer-events: none;
|
||
border-radius: 50%;
|
||
z-index: 0;
|
||
filter: blur(1px);
|
||
}
|
||
.atm.a1 {
|
||
width: 160px;
|
||
height: 160px;
|
||
top: 28px;
|
||
right: -40px;
|
||
background: rgba(255, 255, 255, 0.5);
|
||
animation: drift 12s ease-in-out infinite alternate;
|
||
}
|
||
.atm.a2 {
|
||
width: 100px;
|
||
height: 100px;
|
||
top: 88px;
|
||
left: -28px;
|
||
background: rgba(255, 200, 180, 0.45);
|
||
animation: drift 14s ease-in-out infinite alternate-reverse;
|
||
}
|
||
.atm.a3 {
|
||
width: 70px;
|
||
height: 70px;
|
||
top: 160px;
|
||
right: 40px;
|
||
background: rgba(255, 230, 210, 0.5);
|
||
opacity: 0.8;
|
||
}
|
||
@keyframes drift {
|
||
from {
|
||
transform: translate(0, 0);
|
||
}
|
||
to {
|
||
transform: translate(-8px, 10px);
|
||
}
|
||
}
|
||
.reveal {
|
||
animation: rise 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
|
||
animation-delay: var(--d, 0ms);
|
||
}
|
||
@keyframes rise {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(10px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
.sheet {
|
||
margin-top: 14px;
|
||
background: var(--color-surface);
|
||
border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
|
||
padding: 8px 0 28px;
|
||
box-shadow: var(--shadow-sheet);
|
||
position: relative;
|
||
z-index: 3;
|
||
}
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.reveal,
|
||
.atm {
|
||
animation: none !important;
|
||
}
|
||
}
|
||
</style>
|