112 lines
2.6 KiB
Vue
112 lines
2.6 KiB
Vue
<script setup lang="ts">
|
||
/**
|
||
* C 端个人页头图：大头像 + 昵称 + 状态文案。
|
||
* 用 art 金色光环与渐变底，避免 wd-cell 式后台感，统一深浅色 token。
|
||
*/
|
||
withDefaults(defineProps<{
|
||
avatarUrl: string
|
||
name: string
|
||
/** 状态短文案，如「登录后可同步更多内容」 */
|
||
subtitle?: string
|
||
/** 弱化的状态 pill，如「访客」 */
|
||
badge?: string
|
||
}>(), {
|
||
subtitle: '',
|
||
badge: '',
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<view class="profile-hero animate-reveal">
|
||
<view class="hero-glow" />
|
||
<view class="hero-row">
|
||
<view class="avatar-ring">
|
||
<image class="avatar" :src="avatarUrl" mode="aspectFill" />
|
||
</view>
|
||
<view class="meta">
|
||
<text class="name font-serif-italic">{{ name }}</text>
|
||
<text v-if="subtitle" class="subtitle text-art-muted">{{ subtitle }}</text>
|
||
<view v-if="badge" class="badge">
|
||
<text class="badge-text font-mono-label text-art-accent">{{ badge }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
.profile-hero {
|
||
position: relative;
|
||
margin-bottom: 48rpx;
|
||
padding: 40rpx 32rpx 48rpx;
|
||
border-radius: 24rpx;
|
||
overflow: hidden;
|
||
background: linear-gradient(
|
||
145deg,
|
||
rgba(var(--art-accent), 0.12) 0%,
|
||
rgb(var(--art-surface)) 48%,
|
||
rgba(var(--art-accent), 0.06) 100%
|
||
);
|
||
border: 1px solid var(--art-card-border);
|
||
}
|
||
.hero-glow {
|
||
position: absolute;
|
||
top: -80rpx;
|
||
right: -40rpx;
|
||
width: 280rpx;
|
||
height: 280rpx;
|
||
border-radius: 50%;
|
||
background: radial-gradient(circle, rgba(212, 179, 131, 0.22) 0%, transparent 70%);
|
||
pointer-events: none;
|
||
}
|
||
.hero-row {
|
||
position: relative;
|
||
z-index: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 32rpx;
|
||
}
|
||
.avatar-ring {
|
||
flex-shrink: 0;
|
||
padding: 6rpx;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, rgb(var(--art-accent)), rgba(212, 179, 131, 0.35));
|
||
box-shadow: 0 12rpx 40rpx -8rpx rgba(212, 179, 131, 0.35);
|
||
}
|
||
.avatar {
|
||
display: block;
|
||
width: 144rpx;
|
||
height: 144rpx;
|
||
border-radius: 50%;
|
||
background: rgb(var(--art-bg));
|
||
border: 4rpx solid rgb(var(--art-bg));
|
||
}
|
||
.meta {
|
||
flex: 1;
|
||
min-width: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12rpx;
|
||
}
|
||
.name {
|
||
font-size: 44rpx;
|
||
line-height: 1.25;
|
||
color: rgb(var(--art-text));
|
||
}
|
||
.subtitle {
|
||
font-size: 26rpx;
|
||
line-height: 1.5;
|
||
}
|
||
.badge {
|
||
align-self: flex-start;
|
||
margin-top: 4rpx;
|
||
padding: 6rpx 16rpx;
|
||
border-radius: 999rpx;
|
||
border: 1px solid rgba(212, 179, 131, 0.35);
|
||
background: rgba(212, 179, 131, 0.08);
|
||
}
|
||
.badge-text {
|
||
font-size: 20rpx;
|
||
}
|
||
</style>
|