Files
wechat_wc/src/pages/profile/index.scss
T

324 lines
5.7 KiB
SCSS

.profile-page {
padding: 0 32rpx calc(220rpx + env(safe-area-inset-bottom));
min-height: 100vh;
box-sizing: border-box;
}
/* 用户头部 */
.profile-page .profile-header {
padding: 32rpx 32rpx 16rpx;
margin: 0 0 32rpx;
}
.profile-page .user-info {
display: flex;
align-items: center;
gap: 24rpx;
margin-bottom: 24rpx;
}
.profile-page .avatar,
.profile-page .avatar-placeholder {
width: 112rpx;
height: 112rpx;
border-radius: 50%;
border: 1rpx solid var(--border);
background: var(--bg-muted);
display: flex;
align-items: center;
justify-content: center;
margin-right: 0;
flex-shrink: 0;
overflow: hidden;
}
.profile-page .avatar-icon-img {
width: 44rpx;
height: 44rpx;
}
.profile-page .user-meta {
flex: 1;
min-width: 0;
}
.profile-page .user-name {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 36rpx;
font-weight: 700;
line-height: 1.2;
color: var(--text-primary);
margin-bottom: 8rpx;
}
.profile-page .user-level {
display: block;
font-size: 24rpx;
line-height: 1.4;
color: var(--text-secondary);
}
/* 5 状态快捷入口 */
.profile-page .status-grid {
display: flex;
flex-direction: column;
border-top: 1rpx solid var(--border);
padding-top: 16rpx;
}
.profile-page .status-row {
display: flex;
align-items: center;
justify-content: space-around;
}
.profile-page .status-group {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
justify-content: center;
}
.profile-page .status-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex: 1;
min-height: 112rpx;
padding: 8rpx 0;
transition: transform 0.18s ease;
}
.profile-page .status-item:active {
transform: scale(0.97);
}
.profile-page .status-icon-img {
width: 32rpx;
height: 32rpx;
margin-bottom: 10rpx;
}
.profile-page .status-num {
font-size: 32rpx;
font-weight: 800;
line-height: 1.2;
color: var(--accent-primary);
margin-bottom: 6rpx;
font-variant-numeric: tabular-nums;
}
.profile-page .status-label {
font-size: 24rpx;
line-height: 1.2;
color: var(--text-secondary);
}
.profile-page .status-divider {
width: 1rpx;
height: 56rpx;
background: var(--border);
flex-shrink: 0;
}
.profile-page .status-divider-h {
height: 1rpx;
background: var(--border);
margin: 4rpx 16rpx 12rpx;
}
/* 区块标题 */
.profile-page .section-title {
display: block;
margin: 0 0 24rpx;
font-size: 32rpx;
font-weight: 700;
line-height: 1.25;
color: var(--text-primary);
}
/* 功能菜单 */
.profile-page .menu-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16rpx;
}
.profile-page .menu-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 148rpx;
padding: 28rpx 16rpx;
border-radius: 24rpx;
box-shadow: var(--shadow-card);
transition: transform 0.2s ease;
}
.profile-page .menu-card:active {
transform: scale(0.97);
}
.profile-page .menu-icon-img {
width: 44rpx;
height: 44rpx;
margin-bottom: 16rpx;
}
.profile-page .menu-label {
display: block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 26rpx;
font-weight: 600;
line-height: 1.2;
color: var(--text-primary);
}
/* 企业定制入口 */
.profile-page .enterprise-section {
padding: 28rpx 32rpx;
margin: 0 0 48rpx;
}
.profile-page .enterprise-icon {
width: 32rpx;
height: 32rpx;
margin-right: 12rpx;
flex-shrink: 0;
}
.profile-page .enterprise-title {
display: block;
font-size: 30rpx;
font-weight: 700;
line-height: 1.3;
color: var(--text-primary);
margin-bottom: 6rpx;
}
.profile-page .enterprise-desc {
display: block;
font-size: 24rpx;
line-height: 1.4;
color: var(--text-secondary);
}
.profile-page .enterprise-btn {
display: flex;
align-items: center;
justify-content: center;
height: 80rpx;
padding: 0 32rpx;
font-size: 26rpx;
font-weight: 600;
line-height: 1.2;
border-radius: 999rpx;
flex-shrink: 0;
}
/* 登录弹窗 */
.profile-page .modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 48rpx;
}
.profile-page .login-card {
width: 100%;
max-width: 640rpx;
padding: 40rpx;
text-align: center;
border-radius: 32rpx;
}
.profile-page .login-title {
display: block;
font-size: 36rpx;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 12rpx;
}
.profile-page .login-desc {
display: block;
font-size: 26rpx;
color: var(--text-secondary);
margin-bottom: 32rpx;
}
.profile-page .avatar-btn {
width: 160rpx;
height: 160rpx;
border-radius: 50%;
margin: 0 auto 24rpx;
background: var(--bg-input);
border: 1rpx solid var(--border);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding: 0;
line-height: 1;
font-size: 0;
}
.profile-page .avatar-img {
width: 100%;
height: 100%;
border-radius: 50%;
}
.profile-page .avatar-placeholder-img {
width: 64rpx;
height: 64rpx;
}
.profile-page .nickname-input {
width: 100%;
height: 88rpx;
background: var(--bg-input);
border: 1rpx solid var(--border);
border-radius: 16rpx;
padding: 0 24rpx;
font-size: 28rpx;
color: var(--text-primary);
margin-bottom: 32rpx;
text-align: center;
box-sizing: border-box;
}
.profile-page .login-actions {
display: flex;
gap: 20rpx;
}
.profile-page .login-actions .btn-secondary,
.profile-page .login-actions .btn-primary {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
height: 88rpx;
padding: 0;
font-size: 28rpx;
font-weight: 600;
text-align: center;
border-radius: 999rpx;
}