835 lines
16 KiB
Plaintext
835 lines
16 KiB
Plaintext
/* 结果页：对齐管理端 Dashboard 分布条视觉（浅色轨 + 实色填充） */
|
||
.dash-section-title {
|
||
display: block;
|
||
font-size: 26rpx;
|
||
font-weight: 700;
|
||
color: #374151;
|
||
margin: 8rpx 0 20rpx;
|
||
letter-spacing: 0.02em;
|
||
}
|
||
|
||
.dash-dimension-row {
|
||
margin-bottom: 18rpx;
|
||
}
|
||
|
||
.dash-dimension-labels {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 6rpx;
|
||
}
|
||
|
||
.dash-lab {
|
||
font-size: 22rpx;
|
||
color: #4b5563;
|
||
}
|
||
|
||
.dash-track {
|
||
height: 10rpx;
|
||
background: #e5e7eb;
|
||
border-radius: 6rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.dash-fill {
|
||
height: 100%;
|
||
border-radius: 6rpx;
|
||
transition: width 0.35s ease;
|
||
}
|
||
|
||
.dash-fill--ei { background: #3b82f6; }
|
||
.dash-fill--sn { background: #6366f1; }
|
||
.dash-fill--tf { background: #f97316; }
|
||
.dash-fill--jp { background: #14b8a6; }
|
||
|
||
.dash-fill--disc-d { background: #ef4444; }
|
||
.dash-fill--disc-i { background: #f59e0b; }
|
||
.dash-fill--disc-s { background: #10b981; }
|
||
.dash-fill--disc-c { background: #3b82f6; }
|
||
|
||
.dash-fill--pdp-tiger { background: #f59e0b; }
|
||
.dash-fill--pdp-peacock { background: #8b5cf6; }
|
||
.dash-fill--pdp-koala { background: #10b981; }
|
||
.dash-fill--pdp-owl { background: #3b82f6; }
|
||
.dash-fill--pdp-chameleon { background: #06b6d4; }
|
||
|
||
.dash-fill--sbti { background: linear-gradient(90deg, #14b8a6 0%, #22d3ee 100%); }
|
||
|
||
.dash-foot {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 6rpx;
|
||
font-size: 22rpx;
|
||
color: #6b7280;
|
||
}
|
||
|
||
.preview-teaser-card {
|
||
margin-top: 24rpx;
|
||
padding: 28rpx;
|
||
border-radius: 20rpx;
|
||
background: #fafafa;
|
||
border: 1rpx solid #f3f4f6;
|
||
}
|
||
|
||
.preview-teaser-title {
|
||
display: block;
|
||
font-size: 28rpx;
|
||
font-weight: 700;
|
||
color: #111827;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.preview-teaser-desc {
|
||
display: block;
|
||
font-size: 26rpx;
|
||
color: #4b5563;
|
||
line-height: 1.65;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.preview-teaser-hint {
|
||
display: block;
|
||
font-size: 22rpx;
|
||
color: #9ca3af;
|
||
margin-top: 8rpx;
|
||
}
|
||
|
||
.preview-strength-row {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.preview-strength-dot {
|
||
color: #8b5cf6;
|
||
margin-right: 10rpx;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.preview-strength-text {
|
||
flex: 1;
|
||
font-size: 26rpx;
|
||
color: #4b5563;
|
||
line-height: 1.55;
|
||
}
|
||
|
||
/* 底部工具条：看全文 / 朋友圈 / 拍照（按步骤解锁·放大更清晰版） */
|
||
.result-bottom-tools {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 180;
|
||
padding: 20rpx 24rpx 18rpx;
|
||
padding-bottom: calc(18rpx + env(safe-area-inset-bottom));
|
||
background: rgba(255, 255, 255, 0.98);
|
||
box-shadow: 0 -8rpx 32rpx rgba(15, 23, 42, 0.08);
|
||
border-top: 1rpx solid #f3f4f6;
|
||
backdrop-filter: saturate(140%) blur(6rpx);
|
||
}
|
||
|
||
.journey-stepper {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 8rpx;
|
||
margin-bottom: 18rpx;
|
||
padding: 0 6rpx;
|
||
}
|
||
|
||
.journey-stepper__item {
|
||
flex: 0 0 auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 6rpx;
|
||
}
|
||
|
||
.journey-stepper__dot {
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
border-radius: 50%;
|
||
background: #e5e7eb;
|
||
color: #94a3b8;
|
||
font-size: 26rpx;
|
||
font-weight: 700;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.25s ease;
|
||
box-shadow: inset 0 0 0 2rpx rgba(255, 255, 255, 0.6);
|
||
}
|
||
|
||
.journey-stepper__dot--done {
|
||
background: #10b981;
|
||
color: #fff;
|
||
box-shadow: 0 4rpx 12rpx rgba(16, 185, 129, 0.25);
|
||
}
|
||
|
||
.journey-stepper__dot--active {
|
||
background: #6366f1;
|
||
color: #fff;
|
||
box-shadow: 0 0 0 8rpx rgba(99, 102, 241, 0.16),
|
||
0 6rpx 16rpx rgba(99, 102, 241, 0.28);
|
||
transform: scale(1.06);
|
||
}
|
||
|
||
.journey-stepper__label {
|
||
font-size: 22rpx;
|
||
color: #6b7280;
|
||
letter-spacing: 0.02em;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.journey-stepper__label--active {
|
||
color: #6366f1;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.journey-stepper__bar {
|
||
flex: 1 1 auto;
|
||
height: 4rpx;
|
||
background: #e5e7eb;
|
||
border-radius: 2rpx;
|
||
align-self: center;
|
||
margin: 0 0 26rpx;
|
||
transition: background 0.3s ease;
|
||
}
|
||
|
||
.journey-stepper__bar--done { background: #10b981; }
|
||
|
||
.result-bottom-tools__row {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: stretch;
|
||
gap: 14rpx;
|
||
}
|
||
|
||
.result-tool-btn {
|
||
flex: 1;
|
||
margin: 0;
|
||
padding: 14rpx 12rpx;
|
||
min-height: 104rpx;
|
||
line-height: 1.25;
|
||
border-radius: 20rpx;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: none;
|
||
box-sizing: border-box;
|
||
transition: all 0.2s ease;
|
||
position: relative;
|
||
}
|
||
|
||
.result-tool-btn::after {
|
||
border: none;
|
||
}
|
||
|
||
.result-tool-btn--primary {
|
||
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
|
||
color: #fff;
|
||
flex: 1.4;
|
||
box-shadow: 0 10rpx 28rpx rgba(99, 102, 241, 0.32);
|
||
transform: translateY(-2rpx);
|
||
}
|
||
|
||
.result-tool-btn--rose {
|
||
background: linear-gradient(135deg, #e63946 0%, #ff6b9d 100%);
|
||
color: #fff;
|
||
flex: 1.4;
|
||
box-shadow: 0 10rpx 28rpx rgba(230, 57, 70, 0.28);
|
||
transform: translateY(-2rpx);
|
||
}
|
||
|
||
.result-tool-btn--ghost {
|
||
background: linear-gradient(135deg, #14b8a6 0%, #22c55e 100%);
|
||
color: #fff;
|
||
border: none !important;
|
||
flex: 1.4;
|
||
box-shadow: 0 10rpx 28rpx rgba(20, 184, 166, 0.28);
|
||
transform: translateY(-2rpx);
|
||
}
|
||
|
||
.result-tool-btn--locked {
|
||
background: #f3f4f6 !important;
|
||
color: #9ca3af !important;
|
||
box-shadow: none !important;
|
||
border: 1rpx solid #e5e7eb !important;
|
||
opacity: 0.78;
|
||
flex: 1;
|
||
transform: none;
|
||
}
|
||
|
||
.result-tool-btn__lock {
|
||
display: inline-block;
|
||
margin-right: 6rpx;
|
||
font-size: 22rpx;
|
||
}
|
||
|
||
/* 步骤角标：按钮左上角 01/02/03（用 :nth-child 自动编号，零接触 wxml） */
|
||
.result-bottom-tools__row .result-tool-btn {
|
||
padding-top: 22rpx;
|
||
}
|
||
.result-bottom-tools__row .result-tool-btn::before {
|
||
position: absolute;
|
||
top: 8rpx;
|
||
left: 14rpx;
|
||
font-size: 18rpx;
|
||
font-weight: 700;
|
||
color: rgba(255, 255, 255, 0.78);
|
||
letter-spacing: 0.06em;
|
||
}
|
||
.result-bottom-tools__row .result-tool-btn:nth-child(1)::before { content: '01'; }
|
||
.result-bottom-tools__row .result-tool-btn:nth-child(2)::before { content: '02'; }
|
||
.result-bottom-tools__row .result-tool-btn:nth-child(3)::before { content: '03'; }
|
||
.result-bottom-tools__row .result-tool-btn--locked::before {
|
||
color: #b0b7bf;
|
||
}
|
||
|
||
.result-tool-sub {
|
||
display: block;
|
||
font-size: 22rpx;
|
||
font-weight: 400;
|
||
opacity: 0.9;
|
||
margin-top: 6rpx;
|
||
letter-spacing: 0.02em;
|
||
}
|
||
|
||
.content-container--with-bottom-tools {
|
||
/* 步骤条 (~72rpx) + 按钮行 (~110rpx) + 垂直内边距 (~34rpx) = 216rpx 本体 + 40rpx 留白 = 256rpx */
|
||
padding-bottom: calc(80rpx + 320rpx + env(safe-area-inset-bottom));
|
||
}
|
||
|
||
.content-scroll--with-bottom-tools {
|
||
height: 100vh;
|
||
}
|
||
|
||
/* 分享落地：双按钮行 */
|
||
.result-share-footer--stack {
|
||
flex-direction: column;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.result-share-footer-row2 {
|
||
display: flex;
|
||
flex-direction: row;
|
||
gap: 16rpx;
|
||
}
|
||
|
||
.result-share-footer-btn--ghost {
|
||
flex: 1;
|
||
background: #fff !important;
|
||
color: #e63946 !important;
|
||
border: 2rpx solid #fecdd3 !important;
|
||
}
|
||
|
||
.result-share-footer-btn--ghost::after {
|
||
border: none;
|
||
}
|
||
|
||
.result-share-footer-btn--share {
|
||
flex: 1;
|
||
margin: 0;
|
||
padding: 0;
|
||
background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%) !important;
|
||
}
|
||
|
||
/* ========== 高级排版（hero / 洞察 / 两栏 / 网格 / 引用 / CTA） ========== */
|
||
|
||
.hero-card {
|
||
position: relative;
|
||
border-radius: 28rpx;
|
||
padding: 56rpx 40rpx 44rpx;
|
||
overflow: hidden;
|
||
color: #fff;
|
||
box-shadow: 0 20rpx 48rpx rgba(15, 23, 42, 0.18);
|
||
margin-bottom: 28rpx;
|
||
}
|
||
|
||
.hero-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: -60rpx;
|
||
top: -60rpx;
|
||
width: 260rpx;
|
||
height: 260rpx;
|
||
border-radius: 50%;
|
||
background: rgba(255, 255, 255, 0.18);
|
||
}
|
||
|
||
.hero-card::after {
|
||
content: '';
|
||
position: absolute;
|
||
right: -90rpx;
|
||
bottom: -80rpx;
|
||
width: 340rpx;
|
||
height: 340rpx;
|
||
border-radius: 50%;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.hero-card--mbti {
|
||
background: linear-gradient(140deg, #7c3aed 0%, #8b5cf6 45%, #6366f1 100%);
|
||
}
|
||
.hero-card--disc {
|
||
background: linear-gradient(140deg, #2563eb 0%, #3b82f6 45%, #0ea5e9 100%);
|
||
}
|
||
.hero-card--pdp {
|
||
background: linear-gradient(140deg, #d97706 0%, #f59e0b 45%, #ea580c 100%);
|
||
}
|
||
.hero-card--sbti {
|
||
background: linear-gradient(140deg, #0f766e 0%, #14b8a6 55%, #22d3ee 100%);
|
||
}
|
||
.hero-card--face {
|
||
background: linear-gradient(140deg, #be185d 0%, #db2777 55%, #f97316 100%);
|
||
}
|
||
|
||
.hero-eyebrow {
|
||
display: block;
|
||
font-size: 24rpx;
|
||
letter-spacing: 0.22em;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
text-transform: uppercase;
|
||
margin-bottom: 12rpx;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.hero-code {
|
||
display: block;
|
||
font-size: 108rpx;
|
||
line-height: 1;
|
||
font-weight: 800;
|
||
letter-spacing: 4rpx;
|
||
font-variant-numeric: tabular-nums;
|
||
text-shadow: 0 4rpx 14rpx rgba(0, 0, 0, 0.18);
|
||
position: relative;
|
||
z-index: 1;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.hero-title {
|
||
display: block;
|
||
font-size: 36rpx;
|
||
font-weight: 700;
|
||
margin-top: 14rpx;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.hero-subtitle {
|
||
display: block;
|
||
font-size: 26rpx;
|
||
margin-top: 10rpx;
|
||
line-height: 1.6;
|
||
opacity: 0.9;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.hero-badges {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 12rpx;
|
||
margin-top: 24rpx;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.hero-badge {
|
||
padding: 8rpx 20rpx;
|
||
border-radius: 999rpx;
|
||
background: rgba(255, 255, 255, 0.22);
|
||
color: #fff;
|
||
font-size: 22rpx;
|
||
backdrop-filter: blur(4rpx);
|
||
}
|
||
|
||
.hero-badge--solid {
|
||
background: #fff;
|
||
color: #111827;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* 洞察三宫格 */
|
||
.insight-grid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 16rpx;
|
||
margin: 0 0 28rpx;
|
||
}
|
||
|
||
.insight-card {
|
||
flex: 1 1 30%;
|
||
min-width: 180rpx;
|
||
background: #fff;
|
||
border-radius: 20rpx;
|
||
padding: 24rpx 20rpx;
|
||
border: 1rpx solid #eef0f5;
|
||
box-shadow: 0 4rpx 14rpx rgba(15, 23, 42, 0.04);
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.insight-card__icon {
|
||
width: 54rpx;
|
||
height: 54rpx;
|
||
border-radius: 14rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 30rpx;
|
||
margin-bottom: 14rpx;
|
||
}
|
||
|
||
.insight-card__icon--purple { background: #f5f3ff; color: #7c3aed; }
|
||
.insight-card__icon--blue { background: #eff6ff; color: #3b82f6; }
|
||
.insight-card__icon--orange { background: #fffbeb; color: #d97706; }
|
||
.insight-card__icon--teal { background: #ecfeff; color: #0d9488; }
|
||
.insight-card__icon--rose { background: #fff1f2; color: #e11d48; }
|
||
|
||
.insight-card__label {
|
||
display: block;
|
||
font-size: 22rpx;
|
||
color: #6b7280;
|
||
margin-bottom: 4rpx;
|
||
}
|
||
|
||
.insight-card__value {
|
||
display: block;
|
||
font-size: 26rpx;
|
||
font-weight: 700;
|
||
color: #111827;
|
||
line-height: 1.3;
|
||
}
|
||
|
||
/* 两栏卡：优势 vs 注意 */
|
||
.trait-dual {
|
||
display: flex;
|
||
gap: 16rpx;
|
||
margin-bottom: 28rpx;
|
||
}
|
||
|
||
.trait-dual__col {
|
||
flex: 1;
|
||
background: #fff;
|
||
border-radius: 20rpx;
|
||
padding: 24rpx 22rpx;
|
||
border: 1rpx solid #eef0f5;
|
||
box-shadow: 0 4rpx 14rpx rgba(15, 23, 42, 0.04);
|
||
}
|
||
|
||
.trait-dual__col--strength { border-top: 6rpx solid #14b8a6; }
|
||
.trait-dual__col--caution { border-top: 6rpx solid #f97316; }
|
||
|
||
.trait-dual__title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10rpx;
|
||
font-size: 26rpx;
|
||
font-weight: 700;
|
||
color: #111827;
|
||
margin-bottom: 12rpx;
|
||
}
|
||
|
||
.trait-dual__ic {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
border-radius: 12rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.trait-dual__ic--strength { background: #ecfdf5; color: #0f766e; }
|
||
.trait-dual__ic--caution { background: #fff7ed; color: #c2410c; }
|
||
|
||
.trait-dual__chip {
|
||
display: inline-block;
|
||
padding: 8rpx 16rpx;
|
||
border-radius: 10rpx;
|
||
margin: 6rpx 8rpx 0 0;
|
||
font-size: 22rpx;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.trait-dual__chip--strength {
|
||
background: #f0fdfa;
|
||
color: #0f766e;
|
||
border: 1rpx solid #99f6e4;
|
||
}
|
||
|
||
.trait-dual__chip--caution {
|
||
background: #fff7ed;
|
||
color: #c2410c;
|
||
border: 1rpx solid #fed7aa;
|
||
}
|
||
|
||
/* 职业网格 */
|
||
.career-grid {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 16rpx;
|
||
margin-top: 12rpx;
|
||
}
|
||
|
||
.career-grid__item {
|
||
flex: 1 1 calc(50% - 16rpx);
|
||
min-width: 220rpx;
|
||
background: #f8fafc;
|
||
border: 1rpx solid #e2e8f0;
|
||
border-radius: 16rpx;
|
||
padding: 18rpx 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14rpx;
|
||
}
|
||
|
||
.career-grid__ic {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
border-radius: 12rpx;
|
||
background: #eef2ff;
|
||
color: #4338ca;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.career-grid__text {
|
||
flex: 1;
|
||
font-size: 26rpx;
|
||
color: #111827;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* 引用风格人际关系 */
|
||
.quote-card {
|
||
position: relative;
|
||
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
|
||
border-radius: 20rpx;
|
||
padding: 40rpx 28rpx 28rpx;
|
||
color: #78350f;
|
||
box-shadow: 0 10rpx 28rpx rgba(180, 83, 9, 0.12);
|
||
margin-bottom: 28rpx;
|
||
}
|
||
|
||
.quote-card::before {
|
||
content: '“';
|
||
position: absolute;
|
||
top: -20rpx;
|
||
left: 20rpx;
|
||
font-size: 140rpx;
|
||
line-height: 1;
|
||
font-family: Georgia, serif;
|
||
color: rgba(120, 53, 15, 0.2);
|
||
}
|
||
|
||
.quote-card__label {
|
||
display: block;
|
||
font-size: 22rpx;
|
||
letter-spacing: 0.2em;
|
||
opacity: 0.75;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.quote-card__text {
|
||
display: block;
|
||
font-size: 28rpx;
|
||
line-height: 1.75;
|
||
font-weight: 500;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
/* 深度解读 CTA */
|
||
.deep-cta-card {
|
||
margin-top: 28rpx;
|
||
background: linear-gradient(140deg, #ede9fe 0%, #e0e7ff 100%);
|
||
border: 1rpx solid #ddd6fe;
|
||
border-radius: 24rpx;
|
||
padding: 32rpx 28rpx;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.deep-cta-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
right: -50rpx;
|
||
top: -50rpx;
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
border-radius: 50%;
|
||
background: radial-gradient(circle, rgba(139, 92, 246, 0.2), transparent 70%);
|
||
}
|
||
|
||
.deep-cta-head {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14rpx;
|
||
margin-bottom: 14rpx;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.deep-cta-ic {
|
||
width: 56rpx;
|
||
height: 56rpx;
|
||
border-radius: 16rpx;
|
||
background: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 30rpx;
|
||
box-shadow: 0 6rpx 18rpx rgba(99, 102, 241, 0.18);
|
||
}
|
||
|
||
.deep-cta-title {
|
||
font-size: 30rpx;
|
||
font-weight: 700;
|
||
color: #312e81;
|
||
}
|
||
|
||
.deep-cta-desc {
|
||
display: block;
|
||
font-size: 24rpx;
|
||
color: #4338ca;
|
||
line-height: 1.65;
|
||
margin-bottom: 20rpx;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.deep-cta-actions {
|
||
display: flex;
|
||
gap: 14rpx;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.deep-cta-btn {
|
||
flex: 1;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
text-align: center;
|
||
font-size: 26rpx;
|
||
font-weight: 600;
|
||
border-radius: 16rpx;
|
||
}
|
||
|
||
.deep-cta-btn--primary {
|
||
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
|
||
color: #fff;
|
||
box-shadow: 0 10rpx 24rpx rgba(99, 102, 241, 0.3);
|
||
}
|
||
|
||
.deep-cta-btn--ghost {
|
||
background: #fff;
|
||
color: #4338ca;
|
||
border: 2rpx solid #c7d2fe;
|
||
}
|
||
|
||
/* 分区标题（高级版） */
|
||
.section-head {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12rpx;
|
||
margin: 8rpx 4rpx 18rpx;
|
||
}
|
||
|
||
.section-head__bar {
|
||
width: 6rpx;
|
||
height: 28rpx;
|
||
border-radius: 4rpx;
|
||
background: linear-gradient(180deg, #7c3aed 0%, #6366f1 100%);
|
||
}
|
||
|
||
.section-head__bar--disc { background: linear-gradient(180deg, #2563eb 0%, #0ea5e9 100%); }
|
||
.section-head__bar--pdp { background: linear-gradient(180deg, #d97706 0%, #f59e0b 100%); }
|
||
.section-head__bar--sbti { background: linear-gradient(180deg, #0f766e 0%, #22d3ee 100%); }
|
||
.section-head__bar--face { background: linear-gradient(180deg, #be185d 0%, #f97316 100%); }
|
||
|
||
.section-head__title {
|
||
font-size: 32rpx;
|
||
font-weight: 700;
|
||
color: #111827;
|
||
letter-spacing: 0.02em;
|
||
}
|
||
|
||
.section-head__desc {
|
||
font-size: 22rpx;
|
||
color: #6b7280;
|
||
margin-left: auto;
|
||
}
|
||
|
||
/* 四维条：尾部描述小字 */
|
||
.dash-dim-desc {
|
||
display: block;
|
||
font-size: 22rpx;
|
||
color: #6b7280;
|
||
margin-top: 6rpx;
|
||
line-height: 1.55;
|
||
}
|
||
|
||
/* 职业领域 chip 行 */
|
||
.field-chip-row {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 14rpx;
|
||
margin-bottom: 28rpx;
|
||
}
|
||
|
||
.field-chip {
|
||
padding: 12rpx 22rpx;
|
||
border-radius: 14rpx;
|
||
background: #eef2ff;
|
||
color: #4338ca;
|
||
font-size: 24rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* 发展建议 */
|
||
.growth-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 14rpx;
|
||
margin-bottom: 28rpx;
|
||
}
|
||
|
||
.growth-item {
|
||
display: flex;
|
||
gap: 18rpx;
|
||
padding: 22rpx 22rpx;
|
||
background: #fff;
|
||
border-radius: 18rpx;
|
||
border-left: 6rpx solid #6366f1;
|
||
box-shadow: 0 4rpx 14rpx rgba(15, 23, 42, 0.04);
|
||
}
|
||
|
||
.growth-item__no {
|
||
flex: 0 0 52rpx;
|
||
height: 52rpx;
|
||
border-radius: 14rpx;
|
||
background: #eef2ff;
|
||
color: #4338ca;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 800;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.growth-item__text {
|
||
flex: 1;
|
||
font-size: 26rpx;
|
||
color: #1e293b;
|
||
line-height: 1.7;
|
||
}
|