/* 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; } .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; } /* 深度解析:单卡整合 */ .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-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-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-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-amber { background: #FFFBEB; } .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; }