feat: 首页档案条改为自己/添加/列表三分区,对齐测测交互

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
jackyu66git
2026-08-05 15:01:11 +08:00
co-authored by Cursor
parent 53eb4577b3
commit e589af9bc0
+53 -44
View File
@@ -43,20 +43,23 @@
</div>
</header>
<!-- 2 档条对标测测档案条 -->
<router-link to="/portrait" class="archive reveal" style="--d: 40ms">
<span class="av" aria-hidden="true">
<BrandLogo size="card" class="av-logo" />
</span>
<span class="archive-body">
<!-- 2 头像 · 添加档案 · 列表 -->
<div class="archive reveal" style="--d: 40ms">
<router-link to="/portrait" class="av-self" aria-label="自己的档案">
<span class="av" aria-hidden="true">
<BrandLogo size="card" class="av-logo" />
</span>
<span class="av-name">自己</span>
</router-link>
<button type="button" class="av-add" aria-label="添加档案" @click="goPlus('add')">
<span class="plus-dot" aria-hidden="true">+</span>
<span class="archive-text">输入生日开始愈心解码</span>
</span>
<span class="archive-tail" aria-hidden="true">
<span class="list-ico" />
<span class="chev"></span>
</span>
</router-link>
<span class="av-name">添加</span>
</button>
<router-link to="/profile" class="archive-tail" aria-label="档案列表">
<span class="list-ico" aria-hidden="true" />
<span class="chev" aria-hidden="true"></span>
</router-link>
</div>
<!-- 3 自己卡左心情大分 + 右五维竖柱 -->
<section class="self-card reveal" style="--d: 80ms" @click="router.push('/portrait')">
@@ -554,14 +557,14 @@ function trackGrid(label: string) {
text-overflow: ellipsis;
}
/* ── 建档条 ── */
/* ── 档案条:头像旁 + = 添加档案 ── */
.archive {
margin: 12px 16px 0;
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: 10px;
gap: 14px;
padding: 10px 12px;
border-radius: var(--radius-xl);
background: rgba(255, 255, 255, 0.88);
@@ -569,12 +572,23 @@ function trackGrid(label: string) {
box-shadow: 0 6px 20px rgba(229, 77, 66, 0.08);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: transform var(--duration-fast) ease;
}
.archive:active { transform: scale(0.985); }
.av-self,
.av-add {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
border: none;
background: transparent;
padding: 0;
flex-shrink: 0;
}
.av-self:active,
.av-add:active { transform: scale(0.94); }
.av {
width: 36px;
height: 36px;
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(145deg, #ffe8e0, #ffd0c4);
display: flex;
@@ -583,46 +597,41 @@ function trackGrid(label: string) {
overflow: hidden;
flex-shrink: 0;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
border: 2px solid rgba(229, 77, 66, 0.35);
}
.av-logo {
width: 22px !important;
height: auto !important;
max-height: none !important;
}
.archive-body {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: 8px;
}
.plus-dot {
width: 22px;
height: 22px;
border-radius: 50%;
background: linear-gradient(135deg, #ff8a7a, var(--color-primary));
color: #fff;
font-size: 16px;
font-weight: 500;
line-height: 22px;
text-align: center;
flex-shrink: 0;
box-shadow: 0 3px 8px rgba(229, 77, 66, 0.28);
}
.archive-text {
font-size: 13px;
.av-name {
font-size: 11px;
font-weight: 600;
color: #8a4a3a;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1;
}
.plus-dot {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 236, 230, 0.95);
border: 1.5px dashed rgba(229, 77, 66, 0.35);
color: var(--color-primary);
font-size: 22px;
font-weight: 500;
line-height: 37px;
text-align: center;
flex-shrink: 0;
box-sizing: border-box;
}
.archive-tail {
margin-left: auto;
display: flex;
align-items: center;
gap: 6px;
color: #c4a090;
flex-shrink: 0;
padding: 8px 4px;
}
.list-ico {
width: 14px;