会员个人中心页面初步完成
This commit is contained in:
时舟年
@@ -0,0 +1,860 @@
|
||||
/* 智能体测模块 - 公共样式（基于 base.css 变量） */
|
||||
@import '@/common/style/memberInfo/member-info-gradient-cards.css';
|
||||
|
||||
.bt-page {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
box-sizing: border-box;
|
||||
overflow-x: hidden;
|
||||
background-color: var(--bg-light, #F9FAFE);
|
||||
}
|
||||
|
||||
.bt-page__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-sm, 12px);
|
||||
padding: var(--spacing-md, 16px) var(--spacing-md, 16px) 40px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.bt-card {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
border-radius: var(--radius-md, 20px);
|
||||
background-color: var(--bg-white, #fff);
|
||||
box-shadow: var(--shadow-sm, 0 8px 20px rgba(0, 0, 0, 0.03));
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.bt-card__title {
|
||||
font-size: var(--font-size-md, 16px);
|
||||
font-weight: 700;
|
||||
color: var(--text-dark, #1E2A3A);
|
||||
margin-bottom: 12px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.bt-card__desc {
|
||||
font-size: var(--font-size-sm, 12px);
|
||||
color: var(--text-muted, #5E6F8D);
|
||||
line-height: 1.5;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.bt-hero {
|
||||
padding: 20px;
|
||||
border-radius: var(--radius-sm, 12px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.bt-hero__top {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.bt-hero__label {
|
||||
font-size: var(--font-size-sm, 12px);
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
}
|
||||
|
||||
.bt-hero__badge {
|
||||
padding: 4px 10px;
|
||||
border-radius: 10px;
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
}
|
||||
|
||||
.bt-hero__badge-text {
|
||||
font-size: var(--font-size-sm, 12px);
|
||||
color: var(--text-inverse, #fff);
|
||||
}
|
||||
|
||||
.bt-hero__score-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.bt-hero__score {
|
||||
font-size: 48px;
|
||||
font-weight: 800;
|
||||
color: var(--text-inverse, #fff);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.bt-hero__grade {
|
||||
font-size: var(--font-size-xl, 20px);
|
||||
font-weight: 700;
|
||||
color: var(--accent-orange-light, #FF8C5A);
|
||||
}
|
||||
|
||||
.bt-hero__meta {
|
||||
font-size: var(--font-size-sm, 12px);
|
||||
color: rgba(255, 212, 184, 1);
|
||||
}
|
||||
|
||||
.bt-hero__actions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.bt-btn {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
padding: 12px 16px;
|
||||
border-radius: var(--radius-full, 999px);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.bt-btn--primary {
|
||||
box-shadow: var(--shadow-orange-glow, 0 4px 12px rgba(255, 107, 53, 0.25));
|
||||
}
|
||||
|
||||
.bt-btn--ghost {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.bt-btn--outline {
|
||||
background: var(--bg-white, #fff);
|
||||
border: 1px solid var(--border-light, #E9EDF2);
|
||||
}
|
||||
|
||||
.bt-btn__text {
|
||||
font-size: var(--font-size-base, 14px);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.bt-btn--primary .bt-btn__text,
|
||||
.bt-btn--ghost .bt-btn__text {
|
||||
color: var(--text-inverse, #fff);
|
||||
}
|
||||
|
||||
.bt-btn--outline .bt-btn__text {
|
||||
color: var(--primary-dark, #0B2B4B);
|
||||
}
|
||||
|
||||
.bt-btn__icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.bt-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.bt-grid__item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 12px 4px;
|
||||
border-radius: var(--radius-sm, 12px);
|
||||
background: var(--bg-gray, #F2F5F9);
|
||||
}
|
||||
|
||||
.bt-grid__icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.bt-grid__label {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted, #5E6F8D);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bt-device {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.bt-device__icon-wrap {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 12px;
|
||||
background: var(--bg-gray, #F2F5F9);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.bt-device__icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.bt-device__info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.bt-device__name {
|
||||
font-size: var(--font-size-base, 14px);
|
||||
font-weight: 600;
|
||||
color: var(--text-dark, #1E2A3A);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.bt-device__status {
|
||||
font-size: var(--font-size-sm, 12px);
|
||||
color: var(--text-muted, #5E6F8D);
|
||||
display: block;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.bt-device__status--on {
|
||||
color: var(--success-green, #2ECC71);
|
||||
}
|
||||
|
||||
.bt-device__dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--text-light, #8A99B4);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.bt-device__dot--on {
|
||||
background: var(--success-green, #2ECC71);
|
||||
}
|
||||
|
||||
.bt-metrics {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.bt-metric {
|
||||
padding: 14px;
|
||||
border-radius: var(--radius-sm, 12px);
|
||||
background: var(--bg-gray, #F2F5F9);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.bt-metric__value {
|
||||
font-size: var(--font-size-xl, 20px);
|
||||
font-weight: 700;
|
||||
color: var(--text-dark, #1E2A3A);
|
||||
}
|
||||
|
||||
.bt-metric__label {
|
||||
font-size: var(--font-size-sm, 12px);
|
||||
color: var(--text-muted, #5E6F8D);
|
||||
}
|
||||
|
||||
.bt-metric__change {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.bt-metric__change--down {
|
||||
color: var(--success-green, #2ECC71);
|
||||
}
|
||||
|
||||
.bt-metric__change--up {
|
||||
color: var(--warning-amber, #F39C12);
|
||||
}
|
||||
|
||||
.bt-steps {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.bt-step {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 12px;
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.bt-step__num {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
background: var(--primary-dark, #0B2B4B);
|
||||
color: var(--text-inverse, #fff);
|
||||
font-size: var(--font-size-sm, 12px);
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.bt-step__content {
|
||||
flex: 1;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid var(--border-light, #E9EDF2);
|
||||
}
|
||||
|
||||
.bt-step:last-child .bt-step__content {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.bt-step__title {
|
||||
font-size: var(--font-size-base, 14px);
|
||||
font-weight: 600;
|
||||
color: var(--text-dark, #1E2A3A);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.bt-step__desc {
|
||||
font-size: var(--font-size-sm, 12px);
|
||||
color: var(--text-muted, #5E6F8D);
|
||||
margin-top: 4px;
|
||||
display: block;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.bt-measure {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 24px 16px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.bt-measure__ring-wrap {
|
||||
position: relative;
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
.bt-measure__ring-bg {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
border-radius: 50%;
|
||||
border: 10px solid var(--border-light, #E9EDF2);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.bt-measure__ring-fill {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
border-radius: 50%;
|
||||
border: 10px solid transparent;
|
||||
border-top-color: var(--accent-orange, #FF6B35);
|
||||
border-right-color: var(--accent-orange, #FF6B35);
|
||||
box-sizing: border-box;
|
||||
transform: rotate(-90deg);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.bt-measure__center {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bt-measure__percent {
|
||||
font-size: 36px;
|
||||
font-weight: 800;
|
||||
color: var(--primary-dark, #0B2B4B);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.bt-measure__hint {
|
||||
font-size: var(--font-size-sm, 12px);
|
||||
color: var(--text-muted, #5E6F8D);
|
||||
}
|
||||
|
||||
.bt-measure__live {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.bt-measure__live-item {
|
||||
padding: 12px;
|
||||
border-radius: var(--radius-sm, 12px);
|
||||
background: var(--bg-gray, #F2F5F9);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bt-measure__live-value {
|
||||
font-size: var(--font-size-lg, 18px);
|
||||
font-weight: 700;
|
||||
color: var(--text-dark, #1E2A3A);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.bt-measure__live-label {
|
||||
font-size: var(--font-size-sm, 12px);
|
||||
color: var(--text-muted, #5E6F8D);
|
||||
margin-top: 2px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.bt-score-card {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 20px;
|
||||
border-radius: var(--radius-sm, 12px);
|
||||
}
|
||||
|
||||
.bt-score-card__circle {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.bt-score-card__num {
|
||||
font-size: 28px;
|
||||
font-weight: 800;
|
||||
color: var(--text-inverse, #fff);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.bt-score-card__grade {
|
||||
font-size: 11px;
|
||||
color: var(--accent-orange-light, #FF8C5A);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.bt-score-card__info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.bt-score-card__title {
|
||||
font-size: var(--font-size-md, 16px);
|
||||
font-weight: 700;
|
||||
color: var(--text-inverse, #fff);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.bt-score-card__date {
|
||||
font-size: var(--font-size-sm, 12px);
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
margin-top: 4px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.bt-body-map {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.bt-body-map__figure {
|
||||
width: 120px;
|
||||
height: 200px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.bt-body-map__head {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background: var(--primary-light, #2C6288);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.bt-body-map__torso {
|
||||
width: 56px;
|
||||
height: 70px;
|
||||
border-radius: 12px;
|
||||
background: var(--primary-deep, #1A4A6F);
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.bt-body-map__limbs {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 48px;
|
||||
margin-top: -60px;
|
||||
}
|
||||
|
||||
.bt-body-map__arm {
|
||||
width: 16px;
|
||||
height: 50px;
|
||||
border-radius: 8px;
|
||||
background: var(--primary-light, #2C6288);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.bt-body-map__legs {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 12px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.bt-body-map__leg {
|
||||
width: 22px;
|
||||
height: 60px;
|
||||
border-radius: 8px;
|
||||
background: var(--primary-light, #2C6288);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.bt-body-map__segments {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.bt-body-map__seg {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
background: var(--bg-gray, #F2F5F9);
|
||||
}
|
||||
|
||||
.bt-body-map__seg--high {
|
||||
border-left: 3px solid var(--accent-orange, #FF6B35);
|
||||
}
|
||||
|
||||
.bt-body-map__seg--low {
|
||||
border-left: 3px solid var(--info-blue, #3498DB);
|
||||
}
|
||||
|
||||
.bt-body-map__seg-name {
|
||||
font-size: var(--font-size-sm, 12px);
|
||||
color: var(--text-dark, #1E2A3A);
|
||||
}
|
||||
|
||||
.bt-body-map__seg-val {
|
||||
font-size: var(--font-size-sm, 12px);
|
||||
font-weight: 600;
|
||||
color: var(--text-muted, #5E6F8D);
|
||||
}
|
||||
|
||||
.bt-advice-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.bt-advice-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.bt-advice-item__dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent-orange, #FF6B35);
|
||||
margin-top: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.bt-advice-item__text {
|
||||
font-size: var(--font-size-sm, 12px);
|
||||
color: var(--text-muted, #5E6F8D);
|
||||
line-height: 1.5;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.bt-course {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 12px;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid var(--border-light, #E9EDF2);
|
||||
}
|
||||
|
||||
.bt-course:last-child {
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.bt-course__banner {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.bt-course__info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.bt-course__tag {
|
||||
font-size: 10px;
|
||||
color: var(--accent-orange, #FF6B35);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.bt-course__title {
|
||||
font-size: var(--font-size-base, 14px);
|
||||
font-weight: 600;
|
||||
color: var(--text-dark, #1E2A3A);
|
||||
}
|
||||
|
||||
.bt-course__meta {
|
||||
font-size: var(--font-size-sm, 12px);
|
||||
color: var(--text-muted, #5E6F8D);
|
||||
}
|
||||
|
||||
.bt-history-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 14px 0;
|
||||
border-bottom: 1px solid var(--border-light, #E9EDF2);
|
||||
}
|
||||
|
||||
.bt-history-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.bt-history-item__date {
|
||||
width: 52px;
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.bt-history-item__day {
|
||||
font-size: var(--font-size-xl, 20px);
|
||||
font-weight: 700;
|
||||
color: var(--primary-dark, #0B2B4B);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.bt-history-item__month {
|
||||
font-size: 10px;
|
||||
color: var(--text-muted, #5E6F8D);
|
||||
}
|
||||
|
||||
.bt-history-item__info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.bt-history-item__score-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.bt-history-item__grade {
|
||||
font-size: var(--font-size-base, 14px);
|
||||
font-weight: 600;
|
||||
color: var(--text-dark, #1E2A3A);
|
||||
}
|
||||
|
||||
.bt-history-item__status {
|
||||
font-size: var(--font-size-sm, 12px);
|
||||
color: var(--text-muted, #5E6F8D);
|
||||
}
|
||||
|
||||
.bt-history-item__metrics {
|
||||
font-size: 11px;
|
||||
color: var(--text-light, #8A99B4);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.bt-history-item__arrow {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.bt-compare-header {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.bt-compare-picker {
|
||||
padding: 12px;
|
||||
border-radius: var(--radius-sm, 12px);
|
||||
background: var(--bg-gray, #F2F5F9);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bt-compare-picker__label {
|
||||
font-size: 10px;
|
||||
color: var(--text-light, #8A99B4);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.bt-compare-picker__date {
|
||||
font-size: var(--font-size-base, 14px);
|
||||
font-weight: 600;
|
||||
color: var(--text-dark, #1E2A3A);
|
||||
margin-top: 4px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.bt-compare-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid var(--border-light, #E9EDF2);
|
||||
}
|
||||
|
||||
.bt-compare-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.bt-compare-row__label {
|
||||
flex: 1;
|
||||
font-size: var(--font-size-sm, 12px);
|
||||
color: var(--text-muted, #5E6F8D);
|
||||
}
|
||||
|
||||
.bt-compare-row__val {
|
||||
width: 60px;
|
||||
text-align: center;
|
||||
font-size: var(--font-size-sm, 12px);
|
||||
font-weight: 600;
|
||||
color: var(--text-dark, #1E2A3A);
|
||||
}
|
||||
|
||||
.bt-compare-row__diff {
|
||||
width: 56px;
|
||||
text-align: right;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.bt-setting {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 14px 0;
|
||||
border-bottom: 1px solid var(--border-light, #E9EDF2);
|
||||
}
|
||||
|
||||
.bt-setting:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.bt-setting__label {
|
||||
font-size: var(--font-size-base, 14px);
|
||||
color: var(--text-dark, #1E2A3A);
|
||||
}
|
||||
|
||||
.bt-setting__desc {
|
||||
font-size: var(--font-size-sm, 12px);
|
||||
color: var(--text-light, #8A99B4);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.bt-footer-actions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.bt-empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px 16px;
|
||||
}
|
||||
|
||||
.bt-empty__text {
|
||||
font-size: var(--font-size-base, 14px);
|
||||
color: var(--text-light, #8A99B4);
|
||||
}
|
||||
|
||||
.bt-tabs {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: var(--spacing-sm, 8px);
|
||||
padding: 0 var(--spacing-md, 16px) var(--spacing-sm, 8px);
|
||||
overflow-x: auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.bt-tab {
|
||||
padding: 8px 14px;
|
||||
border-radius: var(--radius-full, 999px);
|
||||
background: var(--bg-white, #fff);
|
||||
border: 1px solid var(--border-light, #E9EDF2);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.bt-tab--active {
|
||||
background: var(--primary-dark, #0B2B4B);
|
||||
border-color: var(--primary-dark, #0B2B4B);
|
||||
}
|
||||
|
||||
.bt-tab__text {
|
||||
font-size: var(--font-size-sm, 12px);
|
||||
color: var(--text-muted, #5E6F8D);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.bt-tab--active .bt-tab__text {
|
||||
color: var(--text-inverse, #fff);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.bt-trend-link {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 0 0;
|
||||
margin-top: 8px;
|
||||
border-top: 1px solid var(--border-light, #E9EDF2);
|
||||
}
|
||||
|
||||
.bt-trend-link__text {
|
||||
font-size: var(--font-size-sm, 12px);
|
||||
color: var(--primary-deep, #1A4A6F);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.bt-trend-link__arrow {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
Reference in New Issue
Block a user