339 lines
6.3 KiB
Plaintext
339 lines
6.3 KiB
Plaintext
/* 助教看板页 — H5 px × 2 × 0.875 精确转换 */
|
||
|
||
/* ===== 三态 ===== */
|
||
.page-loading,
|
||
.page-empty,
|
||
.page-error {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 60vh;
|
||
}
|
||
|
||
.retry-btn {
|
||
margin-top: 24rpx;
|
||
padding: 16rpx 48rpx;
|
||
font-size: 28rpx;
|
||
color: #0052d9;
|
||
border: 2rpx solid #0052d9;
|
||
border-radius: 44rpx;
|
||
}
|
||
|
||
/* ===== 看板 Tab py-3=12px→22rpx, text-sm=14px→26rpx(视觉校准+2) ===== */
|
||
.board-tabs {
|
||
display: flex;
|
||
background: #ffffff;
|
||
border-bottom: 2rpx solid #eeeeee;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 20;
|
||
}
|
||
|
||
/* text-sm=14px→24rpx, line-height 匹配 Tailwind 默认 1.25rem=20px→36rpx */
|
||
.board-tab {
|
||
flex: 1;
|
||
text-align: center;
|
||
padding: 22rpx 0;
|
||
font-size: 24rpx;
|
||
line-height: 34rpx;
|
||
font-weight: 500;
|
||
color: #8b8b8b;
|
||
position: relative;
|
||
}
|
||
|
||
.board-tab--active {
|
||
color: #0052d9;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* w-24px→42rpx, h-3px→5rpx（H5 实际渲染偏细） */
|
||
.board-tab--active::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 42rpx;
|
||
height: 5rpx;
|
||
background: linear-gradient(90deg, #0052d9, #5b9cf8);
|
||
border-radius: 3rpx;
|
||
}
|
||
|
||
/* px-4=16px→28rpx, py-2=8px→14rpx, sticky top-[44px]→77rpx */
|
||
.filter-bar {
|
||
background: #f3f3f3;
|
||
padding: 14rpx 28rpx;
|
||
position: sticky;
|
||
top: 77rpx;
|
||
z-index: 15;
|
||
border-bottom: 2rpx solid #eeeeee;
|
||
transition: transform 220ms ease, opacity 220ms ease;
|
||
}
|
||
|
||
.filter-bar--hidden {
|
||
opacity: 0;
|
||
transform: translateY(-110%);
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* p-1.5=6px→10rpx, gap-2=8px→14rpx, rounded-lg=8px→14rpx */
|
||
.filter-bar-inner {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14rpx;
|
||
background: #ffffff;
|
||
border-radius: 16rpx;
|
||
padding: 10rpx;
|
||
border: 2rpx solid #eeeeee;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.03);
|
||
}
|
||
|
||
.filter-item {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.filter-item--wide {
|
||
flex: 2;
|
||
}
|
||
|
||
/* p-4=16px→28rpx, space-y-3=12px→22rpx — 四边一致 */
|
||
.coach-list {
|
||
padding: 13rpx 28rpx 28rpx 28rpx;
|
||
}
|
||
|
||
/* p-4=16px→28rpx, rounded-2xl=16px→32rpx（border-radius: px×2，不乘0.875） */
|
||
.coach-card {
|
||
background: #ffffff;
|
||
border-radius: 32rpx;
|
||
padding: 28rpx;
|
||
margin-bottom: 22rpx;
|
||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||
}
|
||
|
||
.coach-card--hover {
|
||
opacity: 0.96;
|
||
transform: scale(0.98);
|
||
}
|
||
|
||
/* gap-3=12px→20rpx, items-center 忠于 H5 原型 */
|
||
.card-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20rpx;
|
||
}
|
||
|
||
/* w-11 h-11=44px→78rpx, text-base=16px→28rpx — items-center 对齐，无需 margin-top */
|
||
.card-avatar {
|
||
width: 78rpx;
|
||
height: 78rpx;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.avatar-text {
|
||
color: #ffffff;
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
}
|
||
|
||
/* 头像渐变色由 app.wxss 全局 .avatar-{key} 统一提供（VI §8） */
|
||
|
||
/* ===== 信息区 ===== */
|
||
.card-info {
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
/* gap-1.5=6px→10rpx */
|
||
.card-name-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10rpx;
|
||
flex-wrap: nowrap;
|
||
}
|
||
|
||
/* text-base=16px→28rpx, line-height: 1.5→42rpx（匹配 Tailwind 默认） */
|
||
.card-name {
|
||
font-size: 28rpx;
|
||
line-height: 42rpx;
|
||
font-weight: 600;
|
||
color: #242424;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* ===== 等级标签 px-1.5=6px→10rpx, py-0.5=2px→4rpx, text-xs=12px→22rpx ===== */
|
||
.level-tag {
|
||
padding: 4rpx 10rpx;
|
||
font-size: 22rpx;
|
||
border-radius: 8rpx;
|
||
flex-shrink: 0;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.level--star {
|
||
background: linear-gradient(to right, #fbbf24, #f97316);
|
||
color: #ffffff;
|
||
}
|
||
|
||
.level--high {
|
||
background: linear-gradient(to right, #a78bfa, #8b5cf6);
|
||
color: #ffffff;
|
||
}
|
||
|
||
.level--mid {
|
||
background: linear-gradient(to right, #60a5fa, #6366f1);
|
||
color: #ffffff;
|
||
}
|
||
|
||
.level--low {
|
||
background: linear-gradient(to right, #9ca3af, #6b7280);
|
||
color: #ffffff;
|
||
}
|
||
|
||
/* ===== 技能标签 ===== */
|
||
.skill-tag {
|
||
padding: 4rpx 10rpx;
|
||
font-size: 22rpx;
|
||
border-radius: 8rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.skill--chinese { background: rgba(0, 82, 217, 0.1); color: #0052d9; }
|
||
.skill--snooker { background: rgba(0, 168, 112, 0.1); color: #00a870; }
|
||
.skill--mahjong { background: rgba(237, 123, 47, 0.1); color: #ed7b2f; }
|
||
.skill--karaoke { background: rgba(227, 77, 89, 0.1); color: #e34d59; }
|
||
|
||
/* ml-auto, gap-2=8px→14rpx */
|
||
.card-right {
|
||
margin-left: auto;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14rpx;
|
||
flex-shrink: 0;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* text-xs=12px→22rpx — "定档"标签文字 */
|
||
.right-text {
|
||
font-size: 22rpx;
|
||
color: #8b8b8b;
|
||
font-weight: 400;
|
||
}
|
||
|
||
/* text-sm=14px→24rpx — 定档数值加粗 */
|
||
.right-highlight {
|
||
font-size: 24rpx;
|
||
font-weight: 700;
|
||
color: #0052d9;
|
||
}
|
||
|
||
/* "折前"/"储值" 辅助文字 — text-xs=12px→22rpx, gray-6=#a6a6a6 */
|
||
.right-sub {
|
||
font-size: 22rpx;
|
||
color: #a6a6a6;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.right-sub-val {
|
||
color: #8b8b8b;
|
||
font-weight: 400;
|
||
}
|
||
|
||
/* 工资维度 */
|
||
.salary-tag {
|
||
padding: 4rpx 10rpx;
|
||
background: rgba(237, 123, 47, 0.1);
|
||
color: #ed7b2f;
|
||
font-size: 22rpx;
|
||
border-radius: 6rpx;
|
||
}
|
||
|
||
/* text-lg=18px→32rpx, line-height: 28px→50rpx（匹配 Tailwind text-lg 的 1.75rem） */
|
||
.salary-amount {
|
||
font-size: 32rpx;
|
||
line-height: 50rpx;
|
||
font-weight: 700;
|
||
color: #242424;
|
||
}
|
||
|
||
/* mt-1.5=6px→10rpx, text-xs=12px→22rpx */
|
||
.card-bottom-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
/* gap-2=8px→14rpx */
|
||
.customer-list {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 14rpx;
|
||
overflow: hidden;
|
||
flex: 1;
|
||
min-width: 0;
|
||
}
|
||
|
||
.customer-item {
|
||
font-size: 22rpx;
|
||
color: #a6a6a6;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.bottom-right {
|
||
font-size: 22rpx;
|
||
font-weight: 500;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.bottom-right--warning {
|
||
color: #ed7b2f;
|
||
}
|
||
|
||
.bottom-right--success {
|
||
color: #00a870;
|
||
}
|
||
|
||
.bottom-right-group {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.bottom-perf {
|
||
font-size: 22rpx;
|
||
color: #4b4b4b;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.bottom-perf-val {
|
||
font-weight: 700;
|
||
color: #4b4b4b;
|
||
}
|
||
|
||
.bottom-sub {
|
||
font-size: 22rpx;
|
||
color: #8b8b8b;
|
||
}
|
||
|
||
.bottom-sub-val {
|
||
color: #8b8b8b;
|
||
}
|
||
|
||
.bottom-divider {
|
||
font-size: 22rpx;
|
||
color: #c5c5c5;
|
||
}
|
||
|
||
/* ===== 底部安全区（自定义导航栏高度 100rpx + safe-area） ===== */
|
||
.safe-bottom {
|
||
height: 200rpx;
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
}
|