/* pages/profile/index.wxss */ page { background-color: #F9FAFB; } .page { min-height: 100vh; background-color: #F9FAFB; /* 自定义 tabBar 加高 + 中间浮钮上移,多留底边距 */ padding-bottom: calc(168rpx + env(safe-area-inset-bottom)); } custom-tab-bar { display: block; height: 0; overflow: visible; } /* ===== 顶部栏 ===== */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 16rpx 40rpx 24rpx; background: #F9FAFB; } .topbar-title { font-size: 48rpx; font-weight: 700; color: #111827; letter-spacing: -0.5rpx; } .topbar-actions { display: flex; gap: 12rpx; align-items: center; } .settings-btn { width: 72rpx; height: 72rpx; display: flex; align-items: center; justify-content: center; } .settings-icon { font-size: 44rpx; color: #4B5563; } .icon-btn { width: 72rpx; height: 72rpx; border-radius: 50%; background: transparent; display: flex; align-items: center; justify-content: center; padding: 0; border: none; } .icon-btn::after { border: none; } .icon-text { font-size: 36rpx; } /* ===== 用户卡片 ===== */ .user-card { margin: 0 32rpx 28rpx; background: #FFFFFF; border-radius: 28rpx; padding: 36rpx 32rpx; display: flex; align-items: center; gap: 20rpx; box-shadow: 0 4rpx 24rpx rgba(0,0,0,0.05); position: relative; } .user-card:active { opacity: 0.9; } /* 头像区域(已登录,仅展示) */ .avatar-wrap { position: relative; width: 144rpx; height: 144rpx; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .avatar-ring { width: 144rpx; height: 144rpx; border-radius: 50%; padding: 4rpx; background: linear-gradient(135deg, #FFDEE9 0%, #B5FFFC 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: inset 0 2rpx 10rpx rgba(0,0,0,0.05); box-sizing: border-box; } .avatar-img { width: 128rpx; height: 128rpx; border-radius: 50%; border: 4rpx solid #FFFFFF; display: block; } .avatar-letter-wrap { width: 128rpx; height: 128rpx; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 4rpx solid #FFFFFF; } .avatar-letter { font-size: 64rpx; font-weight: 700; color: #FFFFFF; } .online-dot { position: absolute; bottom: 8rpx; right: 8rpx; width: 28rpx; height: 28rpx; background: #22C55E; border-radius: 50%; border: 4rpx solid #FFFFFF; z-index: 10; pointer-events: none; } /* 用户信息 */ .user-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 8rpx; padding-left: 12rpx; } .user-name { font-size: 36rpx; font-weight: 700; color: #111827; display: block; } .user-sub { font-size: 24rpx; color: #9CA3AF; } .nickname-text { font-size: 36rpx; font-weight: 700; color: #111827; line-height: 1.3; display: block; } /* 类型标签 */ .tags-scroll { width: 100%; white-space: nowrap; } .tags-row { display: flex; gap: 10rpx; flex-wrap: nowrap; } .tag { display: inline-flex; align-items: center; padding: 6rpx 16rpx; border-radius: 10rpx; flex-shrink: 0; } .tag-text { font-size: 20rpx; font-weight: 600; white-space: nowrap; } .tag-purple { background: #EDE9FE; } .tag-purple .tag-text { color: #7C3AED; } .tag-blue { background: #DBEAFE; } .tag-blue .tag-text { color: #2563EB; } .tag-orange { background: #FEF3C7; } .tag-orange .tag-text { color: #D97706; } /* SBTI 主题 #f2f7f3 + 强调 #5a7268 */ .tag-sbti { background: #f2f7f3; border: 1rpx solid #dce8e0; } .tag-sbti .tag-text { color: #5a7268; } .tag-gray { background: #F3F4F6; } .tag-gray .tag-text { color: #9CA3AF; } .chevron { font-size: 48rpx; color: #D1D5DB; flex-shrink: 0; } /* ===== Section ===== */ .section { margin-bottom: 28rpx; } .px-section { padding: 0 32rpx; } .section-header { display: flex; align-items: center; justify-content: space-between; padding: 0 32rpx; margin-bottom: 20rpx; } .section-title { font-size: 32rpx; font-weight: 700; color: #1F2937; display: block; margin-bottom: 20rpx; } .depth-parse-title { letter-spacing: 4rpx; margin-bottom: 16rpx; } .section-title--quiet { font-size: 26rpx; font-weight: 500; color: #6b7280; letter-spacing: 2rpx; margin-top: 8rpx; margin-bottom: 12rpx; } .menu-item--quiet .menu-icon-wrap.menu-icon-quiet { background: #f1f5f9; } .menu-item--quiet .menu-icon-quiet .menu-icon { color: #475569; } .menu-sub--highlight { color: #e11d48; font-weight: 600; } /* 深度解析:单卡整合 */ .depth-unified-card { background: #FFFFFF; border-radius: 24rpx; overflow: hidden; box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.05); border: 1rpx solid rgba(0,0,0,0.04); } .depth-unified-header { display: flex; align-items: center; justify-content: space-between; padding: 28rpx 32rpx 12rpx; } .depth-unified-subtitle { font-size: 28rpx; font-weight: 600; color: #374151; } .depth-header-link { display: flex; align-items: center; gap: 4rpx; } .depth-header-link:active { opacity: 0.75; } .depth-header-link-text { font-size: 24rpx; color: #F43F5E; font-weight: 500; } .depth-header-chevron { font-size: 28rpx; color: #F43F5E; font-weight: 300; } .depth-empty-hint { padding: 8rpx 32rpx 20rpx; } .depth-empty-hint text { font-size: 24rpx; color: #9CA3AF; line-height: 1.55; } .depth-empty-hint--compact { padding-top: 4rpx; padding-bottom: 16rpx; } .depth-inner-divider { height: 1rpx; background: #F3F4F6; margin: 8rpx 32rpx 0; } .cards-scroll--in-card { width: 100%; } .cards-row--in-card { padding: 8rpx 24rpx 20rpx; } .menu-item--flat { padding: 28rpx 32rpx; } .menu-divider--in-card { margin: 0 32rpx; } .section-header .section-title { margin-bottom: 0; } .section-link { display: flex; align-items: center; } .section-link-text { font-size: 24rpx; color: #F43F5E; font-weight: 500; } /* ===== 测试结果卡片(横向滚动) ===== */ .cards-scroll { width: 100%; white-space: nowrap; } .cards-row { display: flex; gap: 24rpx; padding: 8rpx 32rpx 16rpx; width: max-content; } .result-card { width: 280rpx; height: 240rpx; border-radius: 24rpx; padding: 32rpx 28rpx 24rpx; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.06); border: 1rpx solid rgba(0,0,0,0.04); background: #FFFFFF; flex-shrink: 0; } /* 未完成测评:灰阶可点击 */ .result-card--placeholder { background: #f3f4f6 !important; border-color: #e5e7eb !important; box-shadow: none !important; } .result-card--placeholder .card-deco { opacity: 0.12 !important; } .result-card--placeholder .card-label, .result-card--placeholder .card-time { color: #9ca3af !important; } .result-card--placeholder .card-value { color: #6b7280 !important; } .result-card--placeholder .card-icon-wrap { opacity: 0.65; } .card-deco { position: absolute; top: -24rpx; right: -24rpx; width: 120rpx; height: 120rpx; border-radius: 50%; opacity: 0.3; } .card-purple .card-deco { background: #DDD6FE; } .card-sbti .card-deco { background: #c5d4cc; } .card-blue .card-deco { background: #BFDBFE; } .card-orange .card-deco { background: #FDE68A; } .card-rose .card-deco { background: #FECDD3; } .card-teal .card-deco { background: #99f6e4; } .card-icon-wrap { width: 64rpx; height: 64rpx; border-radius: 16rpx; display: flex; align-items: center; justify-content: center; } .card-icon-purple { background: #EDE9FE; } .card-icon-sbti { background: #f2f7f3; border: 1rpx solid #dce8e0; } .card-icon-blue { background: #DBEAFE; } .card-icon-orange { background: #FEF3C7; } .card-icon-rose { background: #FFE4E6; } .card-icon-teal { background: #ccfbf1; } .card-icon { font-size: 32rpx; } .card-label { font-size: 22rpx; color: #9CA3AF; font-weight: 500; } .card-value { font-size: 44rpx; font-weight: 800; letter-spacing: -1rpx; } /* 与 MBTI 同字号;长文案(如 PDP/DISC 双项)最多两行 */ .result-card .card-value { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 1.2; } .card-purple .card-value { color: #7C3AED; } .card-sbti .card-value { color: #5a7268; } .card-blue .card-value { color: #2563EB; } .card-orange .card-value { color: #D97706; } .card-rose .card-value { color: #E11D48; } .card-teal .card-value { color: #0f766e; } .card-value--small { font-size: 26rpx !important; font-weight: 700 !important; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .card-time { font-size: 20rpx; color: #D1D5DB; } .card-time { font-size: 20rpx; color: #D1D5DB; } /* ===== 推广中心(白底圆角卡片,与深度解析整块风格一致) ===== */ .promo-card { background: #FFFFFF; border-radius: 24rpx; padding: 36rpx 32rpx 40rpx; box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05); border: 1rpx solid rgba(0, 0, 0, 0.04); } .promo-card:active { opacity: 0.92; } .promo-header { display: flex; align-items: center; margin-bottom: 32rpx; } .promo-title-wrap { display: flex; align-items: center; gap: 12rpx; } .promo-icon { font-size: 32rpx; } .promo-title { font-size: 32rpx; font-weight: 700; color: #1F2937; } .promo-stats { display: flex; justify-content: space-between; align-items: center; } .promo-stat-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8rpx; } .promo-stat-label { font-size: 24rpx; color: #9CA3AF; } .promo-stat-value { font-size: 34rpx; font-weight: 700; color: #111827; font-variant-numeric: tabular-nums; } .promo-stat-divider { width: 1rpx; height: 60rpx; background: #F3F4F6; } .promo-highlight { color: #F43F5E; } /* ===== 服务菜单 ===== */ .menu-card { background: #FFFFFF; border-radius: 24rpx; overflow: hidden; box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.05); border: 1rpx solid rgba(0,0,0,0.04); } .menu-item { display: flex; align-items: center; padding: 32rpx 36rpx; gap: 28rpx; position: relative; } .menu-item:active { background: #F9FAFB; } .menu-divider { height: 1rpx; background: #F3F4F6; margin: 0 36rpx; } .menu-icon-wrap { width: 80rpx; height: 80rpx; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .menu-icon-red { background: #FEF2F2; } .menu-icon-indigo { background: #EEF2FF; } .menu-icon-test-select { background: #eef2ff; } .menu-icon-emerald { background: #ECFDF5; } .menu-icon-purple { background: #EDE9FE; } .menu-icon { font-size: 36rpx; } .menu-content { flex: 1; min-width: 0; } .menu-title { font-size: 30rpx; font-weight: 600; color: #111827; display: block; margin-bottom: 6rpx; } .menu-sub { font-size: 24rpx; color: #9CA3AF; display: block; } .menu-chevron { font-size: 48rpx; color: #D1D5DB; flex-shrink: 0; } /* ===== 退出登录按钮 ===== */ .logout-btn { width: 100%; padding: 32rpx; background: #FFF1F2; border: 1rpx solid #FFE4E6; border-radius: 24rpx; display: flex; align-items: center; justify-content: center; gap: 16rpx; box-sizing: border-box; } .logout-btn:active { opacity: 0.8; } .logout-icon { font-size: 32rpx; } .logout-text { font-size: 30rpx; font-weight: 600; color: #EF4444; } .bottom-safe { height: 40rpx; } /* ===== 用户数据条(Soul 风,营销数据融入身份卡下方)===== */ .user-stats { display: flex; align-items: stretch; margin: 16rpx 32rpx 0; padding: 28rpx 8rpx; background: #fff; border-radius: 24rpx; box-shadow: 0 4rpx 20rpx rgba(15, 23, 42, 0.05); border: 1rpx solid #f1f5f9; } .user-stat { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6rpx; position: relative; } .user-stat + .user-stat::before { content: ''; position: absolute; left: 0; top: 14rpx; bottom: 14rpx; width: 1rpx; background: #f1f5f9; } .user-stat__v { font-size: 36rpx; font-weight: 700; color: #111827; line-height: 1.1; letter-spacing: -0.01em; } .user-stat__l { font-size: 22rpx; color: #94a3b8; } .user-stat--highlight .user-stat__v { color: #7c3aed; } .user-stat:active { background: rgba(124, 58, 237, 0.04); border-radius: 12rpx; } /* "累计"第四格:金额字号略小,紫色辅文字呼应高亮格 */ .user-stat__v--sm { font-size: 30rpx; } .user-stat--sub .user-stat__v { color: #a78bfa; } .user-stat--sub .user-stat__l { color: #7c3aed; font-weight: 600; } /* ===== 小节标题(Soul 风:短促、带副箭头链接)===== */ .sec-head { display: flex; align-items: center; justify-content: space-between; padding: 0 8rpx 16rpx; } .sec-head__title { font-size: 30rpx; font-weight: 700; color: #111827; letter-spacing: -0.01em; } .sec-head__link { display: flex; align-items: center; gap: 4rpx; font-size: 24rpx; color: #94a3b8; } .sec-head__chev { font-size: 26rpx; color: #cbd5e1; } /* ===== 快捷入口图标网格 2×3 / 2×4 ===== */ .quick-grid { display: grid; gap: 12rpx; padding: 24rpx 20rpx; background: #fff; border-radius: 24rpx; box-shadow: 0 4rpx 20rpx rgba(15, 23, 42, 0.05); border: 1rpx solid #f1f5f9; } .quick-grid--3 { grid-template-columns: repeat(3, 1fr); } .quick-grid--4 { grid-template-columns: repeat(4, 1fr); } .quick-grid__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10rpx; padding: 16rpx 8rpx; border-radius: 16rpx; transition: background 0.2s; } .quick-grid__item:active { background: #f8fafc; } .quick-grid__ic { width: 72rpx; height: 72rpx; border-radius: 20rpx; display: flex; align-items: center; justify-content: center; font-size: 36rpx; } .quick-grid__ic--purple { background: #f5f3ff; color: #7c3aed; } .quick-grid__ic--emerald { background: #ecfdf5; color: #059669; } .quick-grid__ic--indigo { background: #eef2ff; color: #4f46e5; } .quick-grid__ic--blue { background: #eff6ff; color: #2563eb; } .quick-grid__label { font-size: 24rpx; color: #374151; line-height: 1.2; } /* ===== 我的页 · Soul 推荐条(灰字、可读) ===== */ .profile-reco-wrap { margin-top: 8rpx; } .profile-reco-card { background: #fff; border-radius: 20rpx; padding: 22rpx 26rpx 24rpx; border: 1rpx solid #eef2f7; box-shadow: 0 2rpx 12rpx rgba(15, 23, 42, 0.04); } .profile-reco-card--press { opacity: 0.92; background: #fafbfc; } .profile-reco-label { display: block; font-size: 22rpx; color: #9ca3af; letter-spacing: 0.02em; margin-bottom: 10rpx; } .profile-reco-row { display: flex; align-items: flex-start; gap: 12rpx; } .profile-reco-title { flex: 1; min-width: 0; font-size: 26rpx; line-height: 1.45; color: #6b7280; font-weight: 500; } .profile-reco-chev { flex-shrink: 0; font-size: 30rpx; color: #d1d5db; line-height: 1.4; margin-top: 2rpx; } /* ===== 克制菜单(推广中心/提现历史 等低调入口)===== */ .plain-menu { background: #fff; border-radius: 24rpx; box-shadow: 0 4rpx 20rpx rgba(15, 23, 42, 0.05); border: 1rpx solid #f1f5f9; overflow: hidden; } .plain-menu__item { display: flex; align-items: center; gap: 16rpx; padding: 24rpx 28rpx; } .plain-menu__item:active { background: #f8fafc; } .plain-menu__ic { width: 56rpx; height: 56rpx; border-radius: 16rpx; background: #f1f5f9; color: #64748b; display: flex; align-items: center; justify-content: center; font-size: 28rpx; } .plain-menu__main { flex: 1; display: flex; flex-direction: column; gap: 4rpx; } .plain-menu__title { font-size: 28rpx; color: #111827; font-weight: 500; } .plain-menu__sub { font-size: 22rpx; color: #94a3b8; } .plain-menu__arrow { color: #cbd5e1; font-size: 32rpx; } .plain-menu__divider { height: 1rpx; background: #f1f5f9; margin-left: 100rpx; } /* ===== 赚取分润卡(保留定义以兼容旧引用;当前页面已不使用)===== */ .earn-card { position: relative; padding: 32rpx 36rpx 28rpx; border-radius: 28rpx; overflow: hidden; background: linear-gradient(135deg, #7c3aed 0%, #6366f1 55%, #4f46e5 100%); box-shadow: 0 14rpx 36rpx rgba(99, 102, 241, 0.22); color: #fff; } .earn-card__bg { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 85% 0%, rgba(255, 255, 255, 0.25) 0 120rpx, transparent 200rpx), radial-gradient(circle at 0% 100%, rgba(255, 255, 255, 0.12) 0 180rpx, transparent 320rpx); } .earn-card__head { position: relative; margin-bottom: 24rpx; } .earn-card__title-row { display: flex; align-items: center; gap: 14rpx; margin-bottom: 8rpx; } .earn-card__ic { width: 52rpx; height: 52rpx; border-radius: 14rpx; background: rgba(255, 255, 255, 0.18); display: flex; align-items: center; justify-content: center; font-size: 32rpx; } .earn-card__title { font-size: 32rpx; font-weight: 700; letter-spacing: 0.02em; } .earn-card__title-em { color: #fde047; font-weight: 800; margin: 0 4rpx; } .earn-card__sub { display: block; font-size: 24rpx; color: rgba(255, 255, 255, 0.85); line-height: 1.55; max-width: 540rpx; } .earn-card__stats { position: relative; display: flex; align-items: stretch; gap: 12rpx; padding: 20rpx 4rpx; border-top: 1rpx solid rgba(255, 255, 255, 0.18); border-bottom: 1rpx solid rgba(255, 255, 255, 0.18); margin-bottom: 20rpx; } .earn-card__stat { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4rpx; } .earn-card__stat-v { font-size: 36rpx; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; } .earn-card__stat-l { font-size: 22rpx; color: rgba(255, 255, 255, 0.78); } .earn-card__stat--highlight .earn-card__stat-v { color: #fde047; } .earn-card__cta { position: relative; display: flex; align-items: center; justify-content: center; gap: 8rpx; font-size: 26rpx; font-weight: 600; color: #fff; padding: 14rpx 0; } .earn-card__cta-arrow { font-size: 28rpx; opacity: 0.9; } .earn-card:active { transform: scale(0.995); }