.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; }