173 lines
6.3 KiB
Plaintext
173 lines
6.3 KiB
Plaintext
/* Soul创业派对 - 个人资料页（enhanced_professional_profile 1:1 还原） */
|
||
.page { background: #050B14; min-height: 100vh; color: #fff; }
|
||
|
||
/* 导航栏 */
|
||
.nav-bar {
|
||
position: fixed; top: 0; left: 0; right: 0; z-index: 999;
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
padding: 0 32rpx; height: 44px;
|
||
background: rgba(5, 11, 20, 0.9);
|
||
backdrop-filter: blur(24rpx);
|
||
-webkit-backdrop-filter: blur(24rpx);
|
||
border-bottom: 1rpx solid rgba(255, 255, 255, 0.05);
|
||
}
|
||
.nav-back { width: 80rpx; height: 80rpx; display: flex; align-items: center; justify-content: flex-start; }
|
||
.nav-icon { font-size: 44rpx; color: #5EEAD4; font-weight: 300; }
|
||
.nav-title { font-size: 34rpx; font-weight: 700; color: #fff; letter-spacing: 2rpx; }
|
||
.nav-right { display: flex; align-items: center; gap: 16rpx; }
|
||
.nav-icon-wrap { padding: 8rpx; }
|
||
.nav-icon-dot { font-size: 28rpx; color: rgba(255,255,255,0.8); }
|
||
|
||
.scroll-wrap { height: calc(100vh - 88px); }
|
||
|
||
/* ===== 顶部 Profile 卡片 ===== */
|
||
.card-profile {
|
||
position: relative; margin: 32rpx 32rpx 0;
|
||
padding: 64rpx 40rpx 48rpx;
|
||
border-radius: 32rpx;
|
||
background: #0F1720;
|
||
border: 1rpx solid rgba(255, 255, 255, 0.08);
|
||
overflow: hidden;
|
||
}
|
||
.profile-deco {
|
||
position: absolute; top: 0; left: 0; right: 0; height: 128rpx;
|
||
background: linear-gradient(180deg, rgba(30, 58, 69, 0.3) 0%, transparent 100%);
|
||
pointer-events: none;
|
||
}
|
||
.profile-body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
|
||
.avatar-outer {
|
||
position: relative;
|
||
width: 176rpx; height: 176rpx;
|
||
margin-bottom: 32rpx;
|
||
}
|
||
.avatar-wrap {
|
||
position: relative;
|
||
width: 100%; height: 100%;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
border: 2rpx solid rgba(255, 255, 255, 0.1);
|
||
box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.4);
|
||
}
|
||
.avatar-wrap.vip-ring {
|
||
border: 4rpx solid transparent;
|
||
background: linear-gradient(135deg, #F59E0B, #5EEAD4, #F59E0B);
|
||
background-size: 200% 200%;
|
||
animation: vipGlow 4s ease infinite;
|
||
}
|
||
@keyframes vipGlow {
|
||
0%, 100% { background-position: 0% 50%; }
|
||
50% { background-position: 100% 50%; }
|
||
}
|
||
.avatar-img { width: 100%; height: 100%; object-fit: cover; }
|
||
.avatar-ph {
|
||
width: 100%; height: 100%;
|
||
background: #17212F;
|
||
display: flex; align-items: center; justify-content: center;
|
||
font-size: 56rpx; color: #5EEAD4; font-weight: 700;
|
||
}
|
||
.vip-tag {
|
||
position: absolute; bottom: -4rpx; right: -4rpx;
|
||
background: linear-gradient(135deg, #F59E0B, #e8920d);
|
||
color: #000; font-size: 20rpx; font-weight: 800;
|
||
padding: 6rpx 14rpx; border-radius: 16rpx;
|
||
z-index: 2;
|
||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
|
||
}
|
||
.profile-name { font-size: 40rpx; font-weight: 700; color: #fff; margin-bottom: 24rpx; letter-spacing: 2rpx; }
|
||
.profile-tags { display: flex; align-items: center; justify-content: center; gap: 24rpx; flex-wrap: wrap; }
|
||
.tag { font-size: 24rpx; font-weight: 500; padding: 8rpx 24rpx; border-radius: 999rpx; }
|
||
.tag-mbti { background: #134E4A; color: #5EEAD4; border: 1rpx solid rgba(94, 234, 212, 0.2); }
|
||
.tag-region { background: #1F2937; color: #D1D5DB; border: 1rpx solid rgba(255, 255, 255, 0.1); display: flex; align-items: center; gap: 8rpx; }
|
||
.pin-icon { color: #EF4444; font-size: 22rpx; }
|
||
|
||
/* ===== 通用卡片 ===== */
|
||
.card {
|
||
margin: 32rpx;
|
||
padding: 40rpx 40rpx;
|
||
border-radius: 32rpx;
|
||
background: #0F1720;
|
||
border: 1rpx solid rgba(255, 255, 255, 0.08);
|
||
}
|
||
.card-head { display: flex; align-items: center; gap: 20rpx; margin-bottom: 40rpx; }
|
||
.card-icon { font-size: 40rpx; }
|
||
.card-icon.bulb { filter: sepia(1) saturate(3) hue-rotate(15deg); }
|
||
.card-icon.rocket { opacity: 0.9; }
|
||
.card-label { font-size: 30rpx; font-weight: 700; color: #fff; letter-spacing: 1rpx; }
|
||
|
||
.card-body { }
|
||
.field { margin-bottom: 32rpx; }
|
||
.field:last-child { margin-bottom: 0; }
|
||
.f-key { display: block; font-size: 26rpx; color: #94A3B8; margin-bottom: 12rpx; }
|
||
.f-val { font-size: 30rpx; font-weight: 500; color: #fff; line-height: 1.6; }
|
||
.f-val.mono { font-family: ui-monospace, monospace; letter-spacing: 2rpx; }
|
||
.f-row { display: flex; align-items: center; gap: 16rpx; }
|
||
.icon-copy { font-size: 36rpx; color: #94A3B8; opacity: 0.6; padding: 8rpx; }
|
||
.icon-eye-off { display: flex; align-items: center; justify-content: center; }
|
||
.icon-eye-off .icon-img { width: 40rpx; height: 40rpx; }
|
||
|
||
.divider { height: 1rpx; background: rgba(255, 255, 255, 0.05); margin: 32rpx 0; }
|
||
|
||
/* ===== 个人故事 ===== */
|
||
.story { margin-bottom: 32rpx; }
|
||
.story:last-child { margin-bottom: 0; }
|
||
.story-head { display: flex; align-items: center; gap: 12rpx; margin-bottom: 12rpx; }
|
||
.story-icon { font-size: 32rpx; }
|
||
.story-icon.turn { opacity: 0.9; }
|
||
.story-q { font-size: 26rpx; font-weight: 500; color: #94A3B8; }
|
||
.story-a { display: block; font-size: 28rpx; color: #E5E7EB; line-height: 1.7; }
|
||
|
||
/* ===== 互助需求 ===== */
|
||
.help-box {
|
||
padding: 32rpx;
|
||
border-radius: 24rpx;
|
||
margin-bottom: 24rpx;
|
||
background: #17212F;
|
||
border: 1rpx solid rgba(255, 255, 255, 0.05);
|
||
}
|
||
.help-box:last-child { margin-bottom: 0; }
|
||
.help-tag {
|
||
display: inline-block;
|
||
font-size: 22rpx; font-weight: 600;
|
||
padding: 6rpx 16rpx; border-radius: 12rpx;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
.help-give .help-tag { color: #5EEAD4; background: #112D2A; }
|
||
.help-need .help-tag { color: #F59E0B; background: #2D1F0D; }
|
||
.help-txt { display: block; font-size: 26rpx; color: #fff; line-height: 1.6; letter-spacing: 1rpx; }
|
||
|
||
/* ===== 项目介绍 ===== */
|
||
.proj-txt { font-size: 28rpx; color: #E5E7EB; line-height: 1.7; }
|
||
|
||
/* ===== 底部按钮 ===== */
|
||
.bottom-wrap {
|
||
padding: 48rpx 32rpx 0;
|
||
}
|
||
.btn-super {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 12rpx;
|
||
width: 100%;
|
||
padding: 32rpx 0;
|
||
border-radius: 999rpx;
|
||
background: transparent;
|
||
border: 1rpx solid rgba(245, 158, 11, 0.3);
|
||
color: #F59E0B;
|
||
font-size: 30rpx; font-weight: 500;
|
||
letter-spacing: 2rpx;
|
||
}
|
||
.btn-arrow { font-size: 36rpx; font-weight: 300; }
|
||
|
||
/* ===== 状态 ===== */
|
||
.state-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; gap: 24rpx; }
|
||
.state-txt { font-size: 28rpx; color: #64748B; }
|
||
.state-emoji { font-size: 96rpx; }
|
||
.loading-dot {
|
||
width: 56rpx; height: 56rpx;
|
||
border-radius: 50%;
|
||
border: 4rpx solid rgba(94, 234, 212, 0.2);
|
||
border-top-color: #5EEAD4;
|
||
animation: spin 1s linear infinite;
|
||
}
|
||
@keyframes spin { to { transform: rotate(360deg); } }
|