feat: 首页档案条改为自己/添加/列表三分区,对齐测测交互
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -43,20 +43,23 @@
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 2 建档条(对标测测档案条) -->
|
||||
<router-link to="/portrait" class="archive reveal" style="--d: 40ms">
|
||||
<!-- 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="archive-body">
|
||||
<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>
|
||||
<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="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;
|
||||
|
||||
Reference in New Issue
Block a user