1416 lines
38 KiB
Plaintext
1416 lines
38 KiB
Plaintext
/* 任务列表页样式 — 2026-03-13 全量重写，1:1 对齐 H5 原型 task-list.html */
|
||
/* AI_CHANGELOG
|
||
| 日期 | Prompt | 变更 |
|
||
|------|--------|------|
|
||
| 2026-03-13 | 重写 task-list 1:1 还原 H5 | 全量重写 |
|
||
| 2026-03-13 | banner 错位重做 | 页面内实现完整 banner |
|
||
| 2026-03-13 | 5项修复+精确还原 | 恢复纹理CSS层、盖戳改回CSS、标签恢复CSS渐变、abandoned灰化、全量line-height按排版字典校准 |
|
||
*/
|
||
/* 换算公式：rpx = H5_px × 1.8204（基于 412px 验收宽度）
|
||
* 排版字典 B.3 硬映射：
|
||
* text-xs → 22rpx / 29rpx
|
||
* text-sm → 26rpx / 36rpx
|
||
* text-base→ 30rpx / 44rpx
|
||
* text-lg → 33rpx / 51rpx
|
||
* text-xl → 36rpx / 51rpx
|
||
* text-2xl → 44rpx / 58rpx
|
||
* text-3xl → 54rpx / 66rpx
|
||
* text-[9px]→ 16rpx（行高需视觉校准）
|
||
*/
|
||
|
||
/* ============================================
|
||
* 页面容器
|
||
* ============================================ */
|
||
.page-task-list {
|
||
min-height: 100vh;
|
||
background-color: var(--color-gray-1);
|
||
padding-bottom: 180rpx;
|
||
}
|
||
|
||
/* ============================================
|
||
* Banner 区域
|
||
* 方案：SVG 做渐变底图 + CSS 做纹理叠加
|
||
* 原因：SVG pattern 在小程序 image 组件中不渲染
|
||
* ============================================ */
|
||
.banner-area {
|
||
position: relative;
|
||
/* H5: pb-4 = 16px → 29rpx */
|
||
padding-bottom: 29rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 渐变底图 — SVG 包含 7 层渐变 + 光晕 */
|
||
.banner-bg-img {
|
||
position: absolute;
|
||
top: -50rpx;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 110%;
|
||
z-index: 0;
|
||
}
|
||
|
||
/* 纹理层已烘焙进 banner-bg-combined.svg，此层保留占位供未来扩展 */
|
||
|
||
/* ============================================
|
||
* 用户信息区 — H5: .px-5.pt-10.pb-3
|
||
* px-5=20px→36rpx, pt-10=40px→73rpx, pb-3=12px→22rpx
|
||
* ============================================ */
|
||
.user-info-section {
|
||
position: relative;
|
||
z-index: 2;
|
||
padding: 36rpx 29rpx 29rpx 29rpx;
|
||
}
|
||
|
||
/* H5: .flex.items-center.gap-4 → gap-4=16px→29rpx */
|
||
.user-info-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 29rpx;
|
||
}
|
||
|
||
/* 头像容器 — H5: w-14 h-14 rounded-2xl bg-white/20 shadow-lg overflow-hidden */
|
||
/* w-14=56px→102rpx, rounded-2xl=16px→29rpx (实际 24rpx 更接近视觉) */
|
||
.avatar-wrap {
|
||
width: 102rpx;
|
||
height: 102rpx;
|
||
border-radius: 24rpx;
|
||
background: rgba(255,255,255,0.2);
|
||
box-shadow: 0 10rpx 15rpx -3rpx rgba(0,0,0,0.1), 0 4rpx 6rpx -4rpx rgba(0,0,0,0.1);
|
||
overflow: hidden;
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.avatar-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.user-detail {
|
||
flex: 1;
|
||
}
|
||
|
||
/* H5: .flex.items-center.gap-2.mb-1 → gap-2=8px→15rpx, mb-1=4px→7rpx */
|
||
.user-name-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 15rpx;
|
||
margin-bottom: 7rpx;
|
||
line-height: 51rpx; /* text-xl line-height 容器 */
|
||
}
|
||
|
||
/* H5: text-xl font-semibold → 36rpx/51rpx */
|
||
.user-name {
|
||
font-size: 36rpx;
|
||
font-weight: 600;
|
||
color: #ffffff;
|
||
}
|
||
|
||
/* H5: px-2 py-0.5 bg-white/20 rounded-full text-xs
|
||
* px-2=8px→15rpx, py-0.5=2px→4rpx, text-xs→22rpx/29rpx */
|
||
.user-role-tag {
|
||
font-size: 22rpx;
|
||
padding: 0rpx 20rpx 0 20rpx;
|
||
background: rgba(255,255,255,0.2);
|
||
border-radius: 9999rpx;
|
||
color: #ffffff;
|
||
height: 35rpx;
|
||
line-height: 35rpx;
|
||
}
|
||
|
||
/* H5: text-white/70 text-sm → 26rpx/36rpx */
|
||
.user-store-row {
|
||
line-height: 36rpx;
|
||
}
|
||
.user-store {
|
||
font-size: 26rpx;
|
||
color: rgba(255,255,255,0.7);
|
||
}
|
||
|
||
/* ============================================
|
||
* 业绩进度卡片 — H5: .mx-4 > .bg-white/15.backdrop-blur-md.rounded-2xl.px-4.py-3.border.border-white/20
|
||
* mx-4=16px→29rpx, px-4=16px→29rpx, py-3=12px→22rpx, rounded-2xl=16px→29rpx
|
||
* ============================================ */
|
||
.perf-card {
|
||
position: relative;
|
||
z-index: 2;
|
||
margin: 0 29rpx;
|
||
background: rgba(255,255,255,0.15);
|
||
backdrop-filter: blur(12px);
|
||
-webkit-backdrop-filter: blur(12px);
|
||
border-radius: 29rpx;
|
||
padding: 22rpx 29rpx;
|
||
border: 1rpx solid rgba(255,255,255,0.2);
|
||
}
|
||
|
||
/* --- L1: 跳档提示行 --- */
|
||
/* H5: .flex.items-center.justify-between.mb-2 → mb-2=8px→15rpx */
|
||
.perf-l1 {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 15rpx;
|
||
}
|
||
|
||
/* H5: .flex.items-baseline.gap-2 → gap-2=8px→15rpx */
|
||
.perf-l1-left {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 15rpx;
|
||
line-height: 51rpx; /* text-xl 行高容器 */
|
||
}
|
||
|
||
/* H5: stat-label text-sm font-medium → 26rpx/36rpx */
|
||
.perf-label {
|
||
font-size: 26rpx;
|
||
font-weight: 500;
|
||
color: rgba(255,255,255,0.9);
|
||
text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.15);
|
||
}
|
||
|
||
/* H5: stat-accent text-xl font-bold → 36rpx/51rpx */
|
||
.perf-accent {
|
||
font-size: 36rpx;
|
||
font-weight: 700;
|
||
color: #fcd34d;
|
||
text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.2);
|
||
}
|
||
|
||
/* H5: stat-secondary text-xs → 22rpx/29rpx */
|
||
.perf-l1-right {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 4rpx;
|
||
line-height: 29rpx;
|
||
}
|
||
.perf-secondary {
|
||
font-size: 22rpx;
|
||
color: rgba(255,255,255,0.7);
|
||
}
|
||
|
||
/* --- L2: 5段档位进度条 --- */
|
||
/* H5: .relative.mb-6 → mb-6=24px→44rpx */
|
||
.perf-l2 {
|
||
position: relative;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════
|
||
* 进度条 — 一整根方案
|
||
* 结构：tier-track > tier-track-bg + tier-track-fill + tier-divider×4
|
||
* ═══════════════════════════════════════════════════ */
|
||
|
||
/* 外层容器：撑高、relative 供分隔线绝对定位 */
|
||
.tier-track {
|
||
position: relative;
|
||
height: 14rpx;
|
||
border-radius: 9rpx;
|
||
overflow: visible;
|
||
|
||
}
|
||
|
||
/* 底轨：整条灰白背景 */
|
||
.tier-track-bg {
|
||
position: absolute;
|
||
top: 0; left: 0; right: 0; bottom: 0;
|
||
border-radius: 9rpx;
|
||
background: rgba(255,255,255,0.18);
|
||
}
|
||
|
||
/* 填充条：仅控制裁剪宽度，overflow:hidden，不设背景色 */
|
||
.tier-track-fill {
|
||
position: absolute;
|
||
top: 0; left: 0; bottom: 0;
|
||
border-radius: 9rpx;
|
||
overflow: hidden;
|
||
transition: width 0.4s cubic-bezier(0.34, 1.2, 0.64, 1);
|
||
box-shadow: 0 0 14rpx rgba(239,68,68,0.45);
|
||
}
|
||
|
||
/* 全宽渐变层：宽度撑满轨道 100%（相对于 tier-track），不随填充宽度缩放 */
|
||
/* 小程序中 position:absolute + left:0 + width 用 vw 单位近似轨道宽度 */
|
||
.tier-gradient-bar {
|
||
position: absolute;
|
||
top: 0; left: 0; bottom: 0;
|
||
/* 轨道 = perf-card 内宽，约 (100vw - 29rpx*2 - 29rpx*2) ≈ 100vw - 116rpx */
|
||
/* 用 100vw 保证渐变铺满，超出部分被父层 overflow:hidden 裁掉 */
|
||
width: 100vw;
|
||
background: linear-gradient(
|
||
90deg,
|
||
#fde68a 0%,
|
||
#fbbf24 20%,
|
||
#f97316 45%,
|
||
#ef4444 70%,
|
||
#910a0a 100%
|
||
);
|
||
}
|
||
|
||
/* ══════════════════════════════════════════════════════
|
||
* 高光动画
|
||
* 默认状态：不播放（animation: none）
|
||
* 触发：JS 设置 shineRunning=true → 挂上 .tier-shine--active → 单次播放
|
||
* duration 由 WXML style 注入（shineDurMs），每轮由 JS 按进度+速度重算
|
||
*
|
||
* ★ 外观旋钮（在此修改）★
|
||
* --shine-width : 光束宽度（默认50%）
|
||
* --shine-opacity: 峰值亮度 0~1（默认1.0）
|
||
* --shine-color : RGB颜色，默认纯白
|
||
* 255,220,100=暖黄；255,180,80=橙
|
||
* ══════════════════════════════════════════════════════ */
|
||
.tier-shine {
|
||
--shine-width: 120rpx; /* ★固定宽度，不随进度条长短变化；改大=光晕更宽 */
|
||
--shine-opacity: 1.0;
|
||
--shine-color: 255, 255, 255;
|
||
|
||
position: absolute;
|
||
top: 0;
|
||
left: -70%; /* 静止时停在左侧外，不可见 */
|
||
width: var(--shine-width);
|
||
height: 100%;
|
||
background: linear-gradient(
|
||
90deg,
|
||
transparent 0%,
|
||
rgba(var(--shine-color), 0.08) 20%,
|
||
rgba(var(--shine-color), var(--shine-opacity)) 50%,
|
||
rgba(var(--shine-color), 0.08) 80%,
|
||
transparent 100%
|
||
);
|
||
animation: none; /* 默认不播放 */
|
||
pointer-events: none;
|
||
}
|
||
/* JS 设置 shineRunning=true 时挂上此 class，触发单次播放 */
|
||
.tier-shine--active {
|
||
animation: tierShine 1s linear 1 forwards; /* duration 被 style 覆盖 */
|
||
}
|
||
@keyframes tierShine {
|
||
/* left 用固定 rpx，确保起终点与填充条宽度无关 */
|
||
0% { left: -130rpx; opacity: 0; } /* 从左侧外出发（≈ shine-width + 10rpx） */
|
||
5% { opacity: 1; } /* 淡入 */
|
||
95% { opacity: 1; } /* 接近右端 */
|
||
100% { left: calc(100% + 10rpx); opacity: 0; } /* 到达右侧外，淡出 */
|
||
}
|
||
|
||
/* ══════════════════════════════════════════════════════
|
||
* 进度末端导火索效果
|
||
* 默认状态：光柱微弱待机，火花不播放
|
||
* 触发：JS 设置 sparkRunning=true → 挂上 --active class → 单次播放
|
||
* duration 由 WXML style 注入（sparkDurMs = SPARK_DUR_MS）
|
||
*
|
||
* ★ 外观旋钮（在此修改）★
|
||
* --spark-scale : 整体缩放，影响光柱+粒子大小+飞射距离
|
||
* --spark-pole-h: 光柱高度（宽度自动=高度/2）
|
||
* ══════════════════════════════════════════════════════ */
|
||
.tier-edge-glow {
|
||
--spark-scale: 0.7;
|
||
--spark-pole-h: 30rpx;
|
||
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%) scale(var(--spark-scale));
|
||
transform-origin: center center;
|
||
width: calc(var(--spark-pole-h) / 2);
|
||
height: var(--spark-pole-h);
|
||
border-radius: 999rpx;
|
||
background: rgba(255,255,255,1);
|
||
/* 默认：微弱待机光 */
|
||
opacity: 0.25;
|
||
box-shadow: 0 0 4rpx 2rpx rgba(255,200,80,0.35);
|
||
animation: none;
|
||
pointer-events: none;
|
||
overflow: visible;
|
||
z-index: 10;
|
||
transition: opacity 0.1s, box-shadow 0.1s;
|
||
}
|
||
/* 触发时：爆亮并消散（单次） */
|
||
.tier-edge-glow--active {
|
||
animation: edgePulse 1s ease-out 1 forwards;
|
||
}
|
||
@keyframes edgePulse {
|
||
0% { opacity: 1; box-shadow: 0 0 22rpx 12rpx rgba(255,255,255,0.95); }
|
||
15% { opacity: 1; box-shadow: 0 0 26rpx 14rpx rgba(255,220, 80,0.90); }
|
||
55% { opacity: 0.6; box-shadow: 0 0 12rpx 6rpx rgba(255,160, 40,0.60); }
|
||
85% { opacity: 0.25; box-shadow: 0 0 4rpx 2rpx rgba(255,200, 80,0.35); }
|
||
100% { opacity: 0.25; box-shadow: 0 0 4rpx 2rpx rgba(255,200, 80,0.35); }
|
||
}
|
||
|
||
/* 火星粒子基础样式：默认隐藏，从光柱中心出发 */
|
||
.spark {
|
||
position: absolute;
|
||
border-radius: 999rpx;
|
||
pointer-events: none;
|
||
opacity: 0;
|
||
top: 50%;
|
||
left: 50%;
|
||
animation: none;
|
||
}
|
||
/* 触发时播放单次散射动画 */
|
||
.spark--active { animation-iteration-count: 1; animation-fill-mode: forwards; }
|
||
|
||
/* ──────────────────────────────────────────────────────
|
||
* 6粒火星：方向/颜色/大小各异，在 0%~15% 之间依次爆发
|
||
* timing-function 用 linear，减速效果由关键帧间距控制：
|
||
* 前段（爆发）：帧间距大 → 视觉上快
|
||
* 后段（消散）：帧间距小 → 视觉上慢，自然减速飘散
|
||
* ────────────────────────────────────────────────────── */
|
||
|
||
/* 粒子1：右上，亮白，第一个爆发 */
|
||
.spark-1 { width: 10rpx; height: 10rpx; background: #ffffff; }
|
||
.spark-1.spark--active { animation-name: spark1; animation-timing-function: linear; }
|
||
@keyframes spark1 {
|
||
0% { opacity: 0; transform: translate( 0rpx, 0rpx) scale(0.0); }
|
||
8% { opacity: 1; transform: translate( 8rpx, -16rpx) scale(1.6); } /* 爆发 */
|
||
25% { opacity: 0.9; transform: translate( 16rpx, -30rpx) scale(1.2); }
|
||
45% { opacity: 0.7; transform: translate( 22rpx, -40rpx) scale(0.9); }
|
||
62% { opacity: 0.5; transform: translate( 27rpx, -48rpx) scale(0.7); }
|
||
76% { opacity: 0.3; transform: translate( 31rpx, -53rpx) scale(0.5); }
|
||
87% { opacity: 0.15;transform: translate( 34rpx, -57rpx) scale(0.3); }
|
||
100% { opacity: 0; transform: translate( 36rpx, -60rpx) scale(0.1); }
|
||
}
|
||
|
||
/* 粒子2：右下，橙色 */
|
||
.spark-2 { width: 12rpx; height: 12rpx; background: #fb923c; }
|
||
.spark-2.spark--active { animation-name: spark2; animation-timing-function: linear; }
|
||
@keyframes spark2 {
|
||
0% { opacity: 0; transform: translate( 0rpx, 0rpx) scale(0.0); }
|
||
12% { opacity: 1; transform: translate( 10rpx, 14rpx) scale(1.5); } /* 爆发 */
|
||
28% { opacity: 0.8; transform: translate( 19rpx, 24rpx) scale(1.1); }
|
||
46% { opacity: 0.6; transform: translate( 26rpx, 32rpx) scale(0.8); }
|
||
62% { opacity: 0.4; transform: translate( 31rpx, 38rpx) scale(0.6); }
|
||
76% { opacity: 0.25;transform: translate( 35rpx, 43rpx) scale(0.4); }
|
||
88% { opacity: 0.1; transform: translate( 38rpx, 47rpx) scale(0.25); }
|
||
100% { opacity: 0; transform: translate( 42rpx, 56rpx) scale(0.1); }
|
||
}
|
||
|
||
/* 粒子3：正上，黄色，快速 */
|
||
.spark-3 { width: 8rpx; height: 8rpx; background: #fde68a; }
|
||
.spark-3.spark--active { animation-name: spark3; animation-timing-function: linear; }
|
||
@keyframes spark3 {
|
||
0% { opacity: 0; transform: translate( 0rpx, 0rpx) scale(0.0); }
|
||
6% { opacity: 1; transform: translate( 4rpx, -22rpx) scale(1.8); } /* 爆发 */
|
||
20% { opacity: 0.9; transform: translate( 7rpx, -36rpx) scale(1.3); }
|
||
38% { opacity: 0.7; transform: translate( 9rpx, -48rpx) scale(1.0); }
|
||
55% { opacity: 0.5; transform: translate( 10rpx, -57rpx) scale(0.7); }
|
||
70% { opacity: 0.3; transform: translate( 11rpx, -63rpx) scale(0.5); }
|
||
84% { opacity: 0.15;transform: translate( 11rpx, -68rpx) scale(0.3); }
|
||
100% { opacity: 0; transform: translate( 12rpx, -74rpx) scale(0.1); }
|
||
}
|
||
|
||
/* 粒子4：右斜上，红橙，拖尾长条 */
|
||
.spark-4 { width: 16rpx; height: 6rpx; background: #ef4444; }
|
||
.spark-4.spark--active { animation-name: spark4; animation-timing-function: linear; }
|
||
@keyframes spark4 {
|
||
0% { opacity: 0; transform: translate( 0rpx, 0rpx) rotate( 0deg) scale(0.0); }
|
||
10% { opacity: 1; transform: translate( 14rpx, -10rpx) rotate(-20deg) scale(1.4); } /* 爆发 */
|
||
26% { opacity: 0.8; transform: translate( 24rpx, -16rpx) rotate(-30deg) scale(1.0); }
|
||
44% { opacity: 0.6; transform: translate( 32rpx, -21rpx) rotate(-38deg) scale(0.75);}
|
||
60% { opacity: 0.4; transform: translate( 39rpx, -26rpx) rotate(-45deg) scale(0.55);}
|
||
74% { opacity: 0.25;transform: translate( 44rpx, -30rpx) rotate(-50deg) scale(0.4); }
|
||
87% { opacity: 0.1; transform: translate( 48rpx, -33rpx) rotate(-53deg) scale(0.25);}
|
||
100% { opacity: 0; transform: translate( 58rpx, -40rpx) rotate(-55deg) scale(0.1); }
|
||
}
|
||
|
||
/* 粒子5：正右，黄白，最先弹出 */
|
||
.spark-5 { width: 10rpx; height: 10rpx; background: #fbbf24; }
|
||
.spark-5.spark--active { animation-name: spark5; animation-timing-function: linear; }
|
||
@keyframes spark5 {
|
||
0% { opacity: 0; transform: translate( 0rpx, 0rpx) scale(0.0); }
|
||
5% { opacity: 1; transform: translate( 18rpx, 2rpx) scale(1.7); } /* 爆发（最早）*/
|
||
20% { opacity: 0.85;transform: translate( 30rpx, 3rpx) scale(1.2); }
|
||
38% { opacity: 0.65;transform: translate( 40rpx, 4rpx) scale(0.9); }
|
||
55% { opacity: 0.45;transform: translate( 47rpx, 5rpx) scale(0.7); }
|
||
70% { opacity: 0.3; transform: translate( 52rpx, 6rpx) scale(0.5); }
|
||
84% { opacity: 0.15;transform: translate( 56rpx, 7rpx) scale(0.3); }
|
||
100% { opacity: 0; transform: translate( 60rpx, 8rpx) scale(0.1); }
|
||
}
|
||
|
||
/* 粒子6：右下斜，淡橙，最大最慢 */
|
||
.spark-6 { width: 14rpx; height: 14rpx; background: #fed7aa; }
|
||
.spark-6.spark--active { animation-name: spark6; animation-timing-function: linear; }
|
||
@keyframes spark6 {
|
||
0% { opacity: 0; transform: translate( 0rpx, 0rpx) scale(0.0); }
|
||
15% { opacity: 0.9; transform: translate( 6rpx, 18rpx) scale(1.5); } /* 爆发（最晚）*/
|
||
30% { opacity: 0.75;transform: translate( 10rpx, 28rpx) scale(1.1); }
|
||
47% { opacity: 0.55;transform: translate( 14rpx, 36rpx) scale(0.85);}
|
||
62% { opacity: 0.4; transform: translate( 17rpx, 43rpx) scale(0.65);}
|
||
75% { opacity: 0.25;transform: translate( 19rpx, 48rpx) scale(0.5); }
|
||
87% { opacity: 0.1; transform: translate( 21rpx, 53rpx) scale(0.35);}
|
||
100% { opacity: 0; transform: translate( 24rpx, 64rpx) scale(0.1); }
|
||
}
|
||
|
||
|
||
/* 分隔竖线：绝对定位叠在进度条上 */
|
||
.tier-divider {
|
||
position: absolute;
|
||
top: 0;
|
||
width: 8rpx;
|
||
height: 100%;
|
||
background: #5381D9;
|
||
transform: translateX(-50%);
|
||
pointer-events: none;
|
||
z-index: 2;
|
||
}
|
||
|
||
/* 刻度 — 完成后高亮 */
|
||
.tick--done {
|
||
color: rgba(255,255,255,0.95);
|
||
font-weight: 600;
|
||
}
|
||
.tick--highlight {
|
||
color: rgba(255,255,255,0.85);
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 刻度 — H5: text-[9px] → 16rpx */
|
||
.tier-ticks {
|
||
position: absolute;
|
||
width: 100%;
|
||
top: 100%;
|
||
margin-top: 6rpx;
|
||
height: 24rpx;
|
||
}
|
||
.tick {
|
||
position: absolute;
|
||
font-size: 16rpx;
|
||
color: rgba(255,255,255,0.55);
|
||
transition: color 0.3s ease, font-weight 0.3s ease;
|
||
}
|
||
.tick--current {
|
||
color: rgba(255,255,255,0.8);
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* ============================================
|
||
* 调试面板（task-list 专属）
|
||
* ============================================ */
|
||
.debug-panel {
|
||
position: fixed;
|
||
bottom: 180rpx;
|
||
right: 30rpx;
|
||
width: 540rpx;
|
||
background: #ffffff;
|
||
border-radius: 28rpx;
|
||
padding: 30rpx 28rpx 24rpx;
|
||
box-shadow: 0 12rpx 48rpx rgba(0,0,0,0.18);
|
||
z-index: 999;
|
||
opacity: 0;
|
||
transform: translateY(20rpx) scale(0.96);
|
||
pointer-events: none;
|
||
transition: opacity 0.2s ease, transform 0.2s ease;
|
||
}
|
||
.debug-panel--visible {
|
||
opacity: 1;
|
||
transform: translateY(0) scale(1);
|
||
pointer-events: all;
|
||
}
|
||
.debug-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 24rpx;
|
||
padding-bottom: 20rpx;
|
||
border-bottom: 2rpx solid #f3f3f3;
|
||
}
|
||
.debug-title {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #242424;
|
||
line-height: 40rpx;
|
||
}
|
||
.debug-close {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 52rpx;
|
||
height: 52rpx;
|
||
border-radius: 999rpx;
|
||
background: #f3f3f3;
|
||
}
|
||
.debug-close--hover { opacity: 0.6; }
|
||
.debug-section {
|
||
margin-bottom: 22rpx;
|
||
}
|
||
.debug-section:last-child { margin-bottom: 0; }
|
||
.debug-section--row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.debug-label-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
.debug-label {
|
||
font-size: 24rpx;
|
||
color: #5e5e5e;
|
||
line-height: 36rpx;
|
||
}
|
||
.debug-value-chip {
|
||
font-size: 22rpx;
|
||
font-weight: 600;
|
||
color: #10b981;
|
||
background: rgba(16,185,129,0.10);
|
||
padding: 4rpx 14rpx;
|
||
border-radius: 999rpx;
|
||
line-height: 32rpx;
|
||
}
|
||
.debug-chip--green {
|
||
color: #10b981;
|
||
background: rgba(16,185,129,0.10);
|
||
}
|
||
.debug-chip--yellow {
|
||
color: #d97706;
|
||
background: rgba(251,191,36,0.12);
|
||
}
|
||
.debug-slider {
|
||
width: 100%;
|
||
margin: 4rpx 0 0;
|
||
}
|
||
.debug-tick-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 4rpx;
|
||
}
|
||
.debug-tick {
|
||
font-size: 18rpx;
|
||
color: #a6a6a6;
|
||
line-height: 28rpx;
|
||
}
|
||
.debug-tick--key {
|
||
color: #8b8b8b;
|
||
font-weight: 500;
|
||
}
|
||
.debug-tick--current {
|
||
color: #0052d9;
|
||
font-weight: 600;
|
||
}
|
||
.debug-btn-group {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 12rpx;
|
||
margin-top: 10rpx;
|
||
}
|
||
.debug-btn {
|
||
padding: 10rpx 18rpx;
|
||
background: #f3f3f3;
|
||
border-radius: 12rpx;
|
||
font-size: 22rpx;
|
||
color: #5e5e5e;
|
||
line-height: 32rpx;
|
||
border: 2rpx solid transparent;
|
||
}
|
||
.debug-btn--active {
|
||
background: #ecf2fe;
|
||
color: #0052d9;
|
||
border-color: #0052d9;
|
||
font-weight: 600;
|
||
}
|
||
/* Toggle switch */
|
||
.debug-toggle {
|
||
width: 88rpx;
|
||
height: 48rpx;
|
||
border-radius: 999rpx;
|
||
background: #e7e7e7;
|
||
position: relative;
|
||
transition: background 0.25s ease;
|
||
flex-shrink: 0;
|
||
}
|
||
.debug-toggle--on {
|
||
background: #10b981;
|
||
}
|
||
.debug-toggle-thumb {
|
||
position: absolute;
|
||
top: 6rpx;
|
||
left: 6rpx;
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
border-radius: 999rpx;
|
||
background: #ffffff;
|
||
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.15);
|
||
transition: left 0.25s ease;
|
||
}
|
||
.debug-toggle--on .debug-toggle-thumb {
|
||
left: 46rpx;
|
||
}
|
||
/* 调试触发按钮 */
|
||
.debug-trigger {
|
||
position: fixed;
|
||
bottom: 230rpx;
|
||
right: 30rpx;
|
||
width: 88rpx;
|
||
height: 88rpx;
|
||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||
border-radius: 999rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 8rpx 24rpx rgba(102,126,234,0.40);
|
||
z-index: 998;
|
||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||
}
|
||
.debug-trigger--active {
|
||
background: linear-gradient(135deg, #764ba2, #667eea);
|
||
box-shadow: 0 12rpx 32rpx rgba(102,126,234,0.55);
|
||
transform: rotate(15deg);
|
||
}
|
||
.debug-trigger--hover { opacity: 0.88; }
|
||
.debug-trigger-icon {
|
||
font-size: 44rpx;
|
||
line-height: 1;
|
||
}
|
||
|
||
/* --- L3: 课时 + 红戳 + 奖金 --- */
|
||
/* H5: .flex.items-stretch.mb-2.5 → mb-2.5=10px→18rpx */
|
||
.perf-l3 {
|
||
display: flex;
|
||
align-items: stretch;
|
||
margin: 40rpx 0 30rpx 0;
|
||
}
|
||
|
||
/* 左侧：课时数据 + 红戳（flex:3） */
|
||
/* H5: .pr-4.border-r.border-white/25.flex.justify-center.items-center */
|
||
.perf-l3-left {
|
||
flex: 3.5;
|
||
padding-right: 0rpx;
|
||
border-right: 1rpx solid rgba(255,255,255,0.25);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
/* H5: .red-stamp.inline-block.relative padding-right:35px→64rpx */
|
||
.perf-hours-wrap {
|
||
display: inline-block;
|
||
position: relative;
|
||
padding-right: 62rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
/* H5: .flex.items-baseline.justify-center.gap-1.5 → gap-1.5=6px→11rpx */
|
||
.perf-hours-row {
|
||
display: flex;
|
||
align-items: baseline;
|
||
justify-content: center;
|
||
gap: 11rpx;
|
||
line-height: 51rpx; /* text-xl 行高容器 */
|
||
}
|
||
|
||
/* H5: stat-highlight text-xl font-bold → 36rpx, color:#6ee7b7 */
|
||
.hours-green {
|
||
font-size: 38rpx;
|
||
font-weight: 700;
|
||
color: #6ee7b7;
|
||
text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.2);
|
||
}
|
||
|
||
/* H5: stat-secondary text-sm → 26rpx */
|
||
.hours-sep {
|
||
font-size: 32rpx;
|
||
color: rgba(255,255,255,0.7);
|
||
}
|
||
|
||
/* H5: stat-accent text-xl font-bold → 36rpx, color:#fcd34d */
|
||
.hours-yellow {
|
||
font-size: 38rpx;
|
||
font-weight: 700;
|
||
color: #fcd34d;
|
||
text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.2);
|
||
}
|
||
|
||
/* H5: stat-value text-xl font-bold → 36rpx, color:#ffffff */
|
||
.hours-white {
|
||
font-size: 38rpx;
|
||
font-weight: 700;
|
||
color: #ffffff;
|
||
text-shadow: 0 2rpx 6rpx rgba(0,0,0,0.25);
|
||
}
|
||
|
||
/* H5: stat-label text-xs mt-1.5 → 22rpx/29rpx, mt-1.5=6px→11rpx */
|
||
.hours-label-row {
|
||
margin-top: 0;
|
||
line-height: 29rpx;
|
||
}
|
||
.hours-label {
|
||
font-size: 22rpx;
|
||
color: rgba(255,255,255,0.9);
|
||
text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.15);
|
||
}
|
||
|
||
/* --- 红戳徽章 — SVG 实现 --- */
|
||
/* H5: position:absolute, top:5px, right:-5px (相对于 .red-stamp 容器)
|
||
* 52px→95rpx, rotate(-12deg), opacity:0.8 */
|
||
.stamp-badge {
|
||
position: absolute;
|
||
top: 9rpx;
|
||
right: -9rpx;
|
||
width: 95rpx;
|
||
height: 95rpx;
|
||
pointer-events: none;
|
||
opacity: 0;
|
||
transform: rotate(-12deg) scale(0);
|
||
}
|
||
|
||
/* 盖戳动画 */
|
||
@keyframes stampDown {
|
||
0% { transform: rotate(-12deg) scale(3); opacity: 0; }
|
||
50% { transform: rotate(-12deg) scale(0.9); opacity: 0.6; }
|
||
70% { transform: rotate(-12deg) scale(1.05); opacity: 0.75; }
|
||
100% { transform: rotate(-12deg) scale(1); opacity: 0.80; }
|
||
}
|
||
.stamp-animate {
|
||
animation: stampDown 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
|
||
}
|
||
|
||
/* 右侧：奖金激励（flex:2） */
|
||
/* H5: .pl-3.text-center.flex.flex-col.justify-center → pl-3=12px→22rpx */
|
||
.perf-l3-right {
|
||
flex: 2;
|
||
padding-left: 22rpx;
|
||
text-align: center;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
|
||
.bonus-wrap {
|
||
display: flex;
|
||
align-items: baseline;
|
||
justify-content: center;
|
||
padding-top: 10rpx;
|
||
}
|
||
|
||
/* H5: text-3xl font-bold text-amber-300 → 54rpx/66rpx */
|
||
.bonus-amount {
|
||
font-size: 54rpx;
|
||
font-weight: 700;
|
||
color: #fcd34d;
|
||
text-shadow:
|
||
0 4rpx 7rpx rgba(0, 0, 0, 0.35),
|
||
0 0 22rpx rgba(251, 191, 36, 0.5);
|
||
}
|
||
|
||
/* H5: text-base text-amber-300/80 → 30rpx */
|
||
.bonus-unit {
|
||
font-size: 30rpx;
|
||
color: rgba(252, 211, 77, 0.8);
|
||
}
|
||
|
||
/* H5: stat-label text-xs mt-1.5 → 22rpx/29rpx, mt-1.5=6px→11rpx */
|
||
.bonus-label-row {
|
||
margin-top: -8rpx;
|
||
line-height: 29rpx;
|
||
}
|
||
.bonus-label {
|
||
font-size: 22rpx;
|
||
color: rgba(255,255,255,0.9);
|
||
text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.15);
|
||
}
|
||
|
||
/* --- L4: 预计收入 --- */
|
||
/* H5: .flex.items-center.justify-between.pt-2.border-t.border-white/25 → pt-2=8px→15rpx */
|
||
.perf-l4 {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding-top: 16rpx;
|
||
border-top: 1rpx solid rgba(255,255,255,0.25);
|
||
line-height: 29rpx;
|
||
}
|
||
|
||
/* H5: stat-label text-xs → 22rpx/29rpx */
|
||
.perf-l4-label {
|
||
font-size: 22rpx;
|
||
color: rgba(255,255,255,0.9);
|
||
text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.15);
|
||
white-space: pre;
|
||
}
|
||
|
||
/* H5: .flex.items-center.gap-1.5 → gap-1.5=6px→11rpx */
|
||
.perf-l4-right {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 11rpx;
|
||
}
|
||
|
||
/* H5: stat-value text-lg font-bold → 33rpx/51rpx */
|
||
.income-value {
|
||
font-size: 33rpx;
|
||
font-weight: 700;
|
||
color: #ffffff;
|
||
text-shadow: 0 2rpx 6rpx rgba(0,0,0,0.25);
|
||
}
|
||
|
||
/* H5: trend-down → color:rgba(255,255,255,0.5), font-size:12px→22rpx */
|
||
.income-trend {
|
||
font-size: 22rpx;
|
||
color: rgba(255,255,255,0.7);
|
||
}
|
||
.trend-down {
|
||
color: rgba(255,255,255,0.5);
|
||
}
|
||
|
||
/* ============================================
|
||
* Loading / Empty / Error 状态
|
||
* ============================================ */
|
||
.state-loading {
|
||
padding: 36rpx 29rpx;
|
||
}
|
||
.loading-placeholder {
|
||
background: #ffffff;
|
||
border-radius: 22rpx;
|
||
padding: 29rpx;
|
||
margin-bottom: 22rpx;
|
||
}
|
||
.ph-line {
|
||
height: 22rpx;
|
||
background: #f3f3f3;
|
||
border-radius: 7rpx;
|
||
margin-bottom: 15rpx;
|
||
}
|
||
.ph-line--title { width: 40%; height: 29rpx; }
|
||
.ph-line--body { width: 80%; }
|
||
.ph-line--short { width: 55%; margin-bottom: 0; }
|
||
|
||
.state-empty {
|
||
padding: 120rpx 0;
|
||
text-align: center;
|
||
}
|
||
.empty-text {
|
||
font-size: 26rpx;
|
||
color: #a6a6a6;
|
||
}
|
||
|
||
.state-error {
|
||
padding: 120rpx 0;
|
||
text-align: center;
|
||
}
|
||
.error-text {
|
||
font-size: 26rpx;
|
||
color: #a6a6a6;
|
||
display: block;
|
||
margin-bottom: 29rpx;
|
||
}
|
||
.retry-btn {
|
||
display: inline-block;
|
||
padding: 15rpx 44rpx;
|
||
background: #0052d9;
|
||
border-radius: 18rpx;
|
||
color: #ffffff;
|
||
}
|
||
.retry-btn-text {
|
||
font-size: 26rpx;
|
||
color: #ffffff;
|
||
}
|
||
|
||
/* ============================================
|
||
* 任务列表区域
|
||
* ============================================ */
|
||
/* H5: .px-4.py-5 → padding: 36rpx 29rpx */
|
||
.task-section {
|
||
padding: 36rpx 29rpx;
|
||
}
|
||
|
||
/* --- 标题行 --- */
|
||
/* H5: .flex.items-center.justify-between.mb-4 → mb-4=16px→29rpx */
|
||
.section-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 29rpx;
|
||
line-height: 44rpx; /* text-base 行高容器 */
|
||
}
|
||
|
||
/* H5: text-base font-semibold text-gray-13 → 30rpx/44rpx */
|
||
.section-title {
|
||
font-size: 28rpx;
|
||
font-weight: 600;
|
||
color: #242424;
|
||
}
|
||
|
||
/* H5: text-sm text-gray-6 → 26rpx/36rpx */
|
||
.section-count {
|
||
font-size: 26rpx;
|
||
color: #a6a6a6;
|
||
}
|
||
|
||
/* --- 任务分组 --- */
|
||
/* H5: .mb-5 → mb-5=20px→36rpx */
|
||
.task-group {
|
||
margin-bottom: 36rpx;
|
||
}
|
||
|
||
/* H5: .flex.items-center.gap-1.5.mb-2.5 → gap-1.5=6px→11rpx, mb-2.5=10px→18rpx */
|
||
.group-label-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 11rpx;
|
||
margin-bottom: 18rpx;
|
||
}
|
||
|
||
/* H5: .section-label → font-size:13px→24rpx, font-weight:500, padding:3px 10px→6rpx 18rpx, border-radius:4px→8rpx */
|
||
.group-label {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 7rpx;
|
||
font-size: 24rpx;
|
||
font-weight: 500;
|
||
padding: 6rpx 18rpx;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
/* H5: text-amber-700 bg-amber-50 */
|
||
.group-label--pinned {
|
||
color: #b45309;
|
||
background: #fffbeb;
|
||
/* 确保 📌 Emoji 在 Android 真机上正确渲染 */
|
||
font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
|
||
}
|
||
|
||
/* H5: text-gray-9 bg-gray-2 */
|
||
.group-label--normal {
|
||
color: #5e5e5e;
|
||
background: #eeeeee;
|
||
}
|
||
|
||
/* H5: text-gray-6 bg-gray-2 */
|
||
.group-label--abandoned {
|
||
color: #a6a6a6;
|
||
background: #eeeeee;
|
||
}
|
||
|
||
/* H5: text-sm text-gray-6 → 26rpx/36rpx */
|
||
.group-count {
|
||
font-size: 26rpx;
|
||
color: #a6a6a6;
|
||
line-height: 36rpx;
|
||
}
|
||
|
||
/* --- 卡片列表 --- */
|
||
/* H5: .space-y-3 → gap 12px→22rpx */
|
||
.task-card-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 22rpx;
|
||
}
|
||
|
||
/* ============================================
|
||
* 任务卡片
|
||
* H5: .task-card → border-left:4px solid transparent, bg-white rounded-xl p-4 shadow-sm
|
||
* border-left:4px→8rpx, rounded-xl=12px→22rpx, p-4=16px→29rpx
|
||
* ============================================ */
|
||
.task-card {
|
||
position: relative;
|
||
background: #ffffff;
|
||
border-radius: 20rpx;
|
||
border-left: 12rpx solid transparent;
|
||
box-shadow:0rpx 4rpx 6rpx rgba(0,0,0,0.08);
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
/* 卡片边框颜色 — 严格对齐 VI-DESIGN-SYSTEM.md 1.1 节 */
|
||
.task-card--high_priority { border-left-color: var(--task-high-priority-border); }
|
||
.task-card--priority_recall { border-left-color: var(--task-priority-recall-border); }
|
||
.task-card--relationship { border-left-color: var(--task-relationship-border); }
|
||
.task-card--callback { border-left-color: var(--task-callback-border); }
|
||
|
||
/* 置顶卡片微亮边框 — 严格对齐 VI-DESIGN-SYSTEM.md 4.1 节 */
|
||
.task-card--pinned {
|
||
box-shadow: 0 5rpx 7rpx var(--status-pinned-shadow-light), 0 0 0 8rpx var(--status-pinned-shadow-glow);
|
||
}
|
||
|
||
/* 已放弃卡片 — 严格对齐 VI-DESIGN-SYSTEM.md 4.2 节 */
|
||
.task-card--abandoned {
|
||
border-left-color: var(--status-abandoned-border) !important;
|
||
opacity: var(--status-abandoned-opacity);
|
||
}
|
||
|
||
/* hover 态 */
|
||
.task-card--hover {
|
||
background: #f9f9f9;
|
||
}
|
||
|
||
/* H5: p-4 → 29rpx */
|
||
.card-body {
|
||
flex: 1;
|
||
padding: 32rpx 4rpx 32rpx 32rpx;
|
||
min-width: 0;
|
||
}
|
||
|
||
/* 右侧箭头 — H5: w-5 h-5 text-gray-5 flex-shrink-0 ml-2 mt-1 */
|
||
.card-arrow {
|
||
flex-shrink: 0;
|
||
padding: 0 22rpx 0 0;
|
||
display: flex;
|
||
align-items: center;
|
||
align-self: stretch;
|
||
}
|
||
|
||
/* --- 卡片第一行：标签 + 客户名 + 心形 + 备注 --- */
|
||
/* H5: .flex.items-center.gap-2.mb-1.5 → gap-2=8px→15rpx, mb-1.5=6px→11rpx */
|
||
.card-row-1 {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 15rpx;
|
||
margin-bottom: 14rpx;
|
||
line-height: 29rpx; /* text-xs 行高容器（标签高度基准） */
|
||
}
|
||
|
||
/* --- 任务类型标签 --- */
|
||
/* H5: px-2 py-0.5 text-white text-xs font-medium → padding:2px 8px→4rpx 15rpx, 22rpx/29rpx, border-radius:4px→8rpx */
|
||
.task-type-tag {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding: 8rpx 16rpx;
|
||
border-radius: 8rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
.tag-text {
|
||
font-size: 22rpx;
|
||
font-weight: 500;
|
||
color: #ffffff;
|
||
line-height: 1;
|
||
}
|
||
|
||
/* 标签渐变色 — 严格对齐 VI-DESIGN-SYSTEM.md 1.1 节 */
|
||
.task-type-tag--high_priority {
|
||
background: linear-gradient(135deg, var(--task-high-priority-from) 0%, var(--task-high-priority-to) 100%);
|
||
}
|
||
.task-type-tag--priority_recall {
|
||
background: linear-gradient(135deg, var(--task-priority-recall-from) 0%, var(--task-priority-recall-to) 100%);
|
||
}
|
||
.task-type-tag--relationship {
|
||
background: linear-gradient(135deg, var(--task-relationship-from) 0%, var(--task-relationship-to) 100%);
|
||
}
|
||
.task-type-tag--callback {
|
||
background: linear-gradient(135deg, var(--task-callback-from) 0%, var(--task-callback-to) 100%);
|
||
}
|
||
|
||
/* 已放弃标签灰化 — 严格对齐 VI-DESIGN-SYSTEM.md 4.2 节 */
|
||
.task-type-tag--abandoned {
|
||
background: var(--status-abandoned-border) !important;
|
||
}
|
||
|
||
/* H5: text-base font-semibold text-gray-13 → 30rpx/44rpx */
|
||
.customer-name {
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
color: #242424;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
/* 已放弃客户名灰色 — 严格对齐 VI-DESIGN-SYSTEM.md 4.2 节 */
|
||
.customer-name--abandoned {
|
||
color: var(--status-abandoned-text);
|
||
}
|
||
|
||
/* H5: note-indicator → font-size:12px→22rpx, margin-left:2px→4rpx */
|
||
.note-indicator {
|
||
font-size: 22rpx;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* --- 卡片第二行：到店/余额 --- */
|
||
/* H5: text-sm text-gray-7 leading-relaxed → 26rpx/36rpx（leading-relaxed≈1.625，但按字典取 36rpx） */
|
||
.card-row-2 {
|
||
margin-bottom: 4rpx;
|
||
line-height: 36rpx;
|
||
}
|
||
.visit-text {
|
||
font-size: 26rpx;
|
||
color: #8b8b8b;
|
||
}
|
||
/* 已放弃到店文字 — H5: .task-card.abandoned .task-desc { color: #c5c5c5 } */
|
||
.visit-text--abandoned {
|
||
color: #c5c5c5;
|
||
}
|
||
|
||
/* --- 卡片第三行：AI 建议 --- */
|
||
/* H5: text-sm text-gray-6 leading-relaxed → 26rpx/36rpx */
|
||
.card-row-3 {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 0;
|
||
line-height: 36rpx;
|
||
}
|
||
|
||
/* AI 图标 — 全局样式见 app.wxss .ai-inline-icon / .ai-title-badge */
|
||
/* task-list 使用默认 indigo 配色，无需额外覆盖 */
|
||
.ai-suggestion-text {
|
||
font-size: 26rpx;
|
||
color: #a6a6a6;
|
||
flex: 1;
|
||
line-height: 36rpx;
|
||
}
|
||
|
||
.ai-suggestion-text {
|
||
font-size: 26rpx;
|
||
color: #a6a6a6;
|
||
flex: 1;
|
||
}
|
||
|
||
/* --- 放弃原因行 --- */
|
||
.card-row-abandon {
|
||
margin-top: 7rpx;
|
||
line-height: 36rpx;
|
||
}
|
||
.abandon-reason {
|
||
font-size: 26rpx;
|
||
color: #a6a6a6;
|
||
}
|
||
|
||
/* --- 加载更多 --- */
|
||
.load-more {
|
||
padding: 36rpx 0;
|
||
text-align: center;
|
||
}
|
||
.load-more-text {
|
||
font-size: 24rpx;
|
||
color: #c5c5c5;
|
||
}
|
||
|
||
/* ============================================
|
||
* 长按上下文菜单
|
||
* H5: .context-overlay / .context-menu / .ctx-item
|
||
* ============================================ */
|
||
.ctx-overlay {
|
||
position: fixed;
|
||
top: 0; left: 0; right: 0; bottom: 0;
|
||
background: rgba(0, 0, 0, 0.35);
|
||
z-index: 100;
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transition: opacity 0.2s ease;
|
||
}
|
||
.ctx-overlay--active {
|
||
opacity: 1;
|
||
pointer-events: all;
|
||
}
|
||
|
||
/* H5: .context-menu → border-radius:14px→25rpx, min-width:192px→350rpx, padding:6px 0→11rpx 0 */
|
||
.ctx-menu {
|
||
position: fixed;
|
||
z-index: 101;
|
||
background: #ffffff;
|
||
border-radius: 25rpx;
|
||
box-shadow: 0 22rpx 73rpx rgba(0, 0, 0, 0.18);
|
||
min-width: 350rpx;
|
||
padding: 11rpx 0;
|
||
opacity: 0;
|
||
transform: scale(0.88);
|
||
pointer-events: none;
|
||
transition: opacity 0.15s ease, transform 0.15s ease;
|
||
transform-origin: top left;
|
||
}
|
||
.ctx-menu--active {
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
pointer-events: all;
|
||
}
|
||
|
||
/* H5: .ctx-item → gap:10px→18rpx, padding:13px 18px→24rpx 33rpx, font-size:14px→26rpx */
|
||
.ctx-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 18rpx;
|
||
padding: 24rpx 33rpx;
|
||
line-height: 36rpx;
|
||
}
|
||
.ctx-item + .ctx-item {
|
||
border-top: 1rpx solid #f3f3f3;
|
||
}
|
||
.ctx-item--hover {
|
||
background: #f3f3f3;
|
||
}
|
||
|
||
.ctx-emoji {
|
||
font-size: 30rpx;
|
||
flex-shrink: 0;
|
||
/* 确保 Emoji 在 Android 真机上正确渲染 */
|
||
font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
|
||
}
|
||
.ctx-text {
|
||
font-size: 26rpx;
|
||
color: #393939;
|
||
}
|
||
|
||
/* ============================================
|
||
* 放弃弹窗
|
||
* H5: .modal-overlay / .modal-card
|
||
* ============================================ */
|
||
.abandon-overlay {
|
||
position: fixed;
|
||
top: 0; left: 0; right: 0; bottom: 0;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
z-index: 200;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: center;
|
||
padding-top: 30vh;
|
||
transition: align-items 0.3s ease, padding-top 0.3s ease;
|
||
}
|
||
|
||
/* 键盘弹出时，弹窗移到顶部 */
|
||
.abandon-overlay--keyboard-open {
|
||
align-items: flex-start;
|
||
padding-top: 0;
|
||
}
|
||
|
||
/* H5: .modal-card → border-radius:16px→29rpx, width:88%, padding:24px 20px 20px→44rpx 36rpx 36rpx */
|
||
.abandon-modal {
|
||
background: #ffffff;
|
||
border-radius: 29rpx;
|
||
width: 88%;
|
||
max-width: 655rpx;
|
||
padding: 44rpx 36rpx 36rpx;
|
||
box-shadow: 0 36rpx 109rpx rgba(0, 0, 0, 0.2);
|
||
max-height: 80vh;
|
||
overflow-y: auto;
|
||
transition: border-radius 0.3s ease;
|
||
}
|
||
|
||
/* 键盘弹出时，改为全圆角 */
|
||
.abandon-overlay--keyboard-open .abandon-modal {
|
||
border-radius: 0;
|
||
max-height: none;
|
||
}
|
||
|
||
/* 弹窗标题行 */
|
||
.abandon-header {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 7rpx;
|
||
line-height: 44rpx;
|
||
}
|
||
.abandon-header-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 11rpx;
|
||
}
|
||
.abandon-header-emoji {
|
||
font-size: 30rpx;
|
||
}
|
||
/* H5: text-base font-semibold text-gray-13 → 30rpx/44rpx */
|
||
.abandon-header-title {
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
color: #242424;
|
||
}
|
||
.abandon-header-name {
|
||
color: #e34d59;
|
||
}
|
||
|
||
/* H5: text-xs text-gray-6 mb-3 → 22rpx/29rpx, mb-3=12px→22rpx */
|
||
.abandon-desc-row {
|
||
margin-bottom: 22rpx;
|
||
line-height: 29rpx;
|
||
}
|
||
.abandon-desc {
|
||
font-size: 22rpx;
|
||
color: #a6a6a6;
|
||
}
|
||
|
||
/* H5: textarea → border:1.5px→3rpx solid #e7e7e7, border-radius:10px→18rpx, padding:12px 14px→22rpx 25rpx, font-size:14px→26rpx */
|
||
.abandon-textarea {
|
||
width: 100%;
|
||
min-height: 180rpx;
|
||
border: 3rpx solid #e7e7e7;
|
||
border-radius: 18rpx;
|
||
padding: 22rpx 25rpx;
|
||
font-size: 26rpx;
|
||
line-height: 1.6;
|
||
color: #2c2c2c;
|
||
box-sizing: border-box;
|
||
transition: border-color 0.2s;
|
||
}
|
||
.abandon-textarea:focus {
|
||
border-color: #0052d9;
|
||
background: #fff;
|
||
}
|
||
.abandon-textarea--error {
|
||
border-color: #e34d59;
|
||
}
|
||
|
||
/* H5: .modal-error → color:#e34d59, font-size:12px→22rpx, margin-top:6px→11rpx */
|
||
.abandon-error {
|
||
color: #e34d59;
|
||
font-size: 22rpx;
|
||
margin-top: 11rpx;
|
||
}
|
||
|
||
/* 弹窗按钮行 */
|
||
.abandon-actions {
|
||
display: flex;
|
||
gap: 18rpx;
|
||
margin-top: 25rpx;
|
||
}
|
||
|
||
/* 键盘弹出时固定在键盘上方 */
|
||
.abandon-actions--float {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
padding: 12rpx 36rpx 16rpx;
|
||
background: #fff;
|
||
box-shadow: 0 -2rpx 16rpx rgba(0, 0, 0, 0.06);
|
||
z-index: 201;
|
||
}
|
||
|
||
.abandon-btn {
|
||
flex: 1;
|
||
padding: 22rpx 0;
|
||
border-radius: 18rpx;
|
||
text-align: center;
|
||
font-size: 27rpx;
|
||
font-weight: 500;
|
||
}
|
||
.abandon-btn--cancel {
|
||
background: #f3f3f3;
|
||
color: #5e5e5e;
|
||
}
|
||
.abandon-btn--cancel-hover {
|
||
background: #e7e7e7;
|
||
}
|
||
.abandon-btn--confirm {
|
||
background: #e34d59;
|
||
color: #ffffff;
|
||
}
|
||
.abandon-btn--confirm-hover {
|
||
background: #c9363f;
|
||
}
|
||
|
||
/* 逾期徽章 — 姓名行最右，红色半透明背景 */
|
||
.overdue-badge {
|
||
margin-left: auto;
|
||
flex-shrink: 0;
|
||
font-size: 22rpx;
|
||
font-weight: 600;
|
||
color: #e34d59;
|
||
background: rgba(227, 77, 89, 0.12);
|
||
border: 1rpx solid rgba(227, 77, 89, 0.25);
|
||
border-radius: 8rpx;
|
||
padding: 4rpx 14rpx;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
/* 截止日期行 — DISPLAY-STANDARDS §7 */
|
||
.card-row-deadline {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 4rpx;
|
||
margin-bottom: 2rpx;
|
||
}
|
||
.deadline-text {
|
||
font-size: 22rpx;
|
||
line-height: 29rpx;
|
||
font-weight: 500;
|
||
}
|
||
.deadline-text--muted { color: #a6a6a6; }
|
||
.deadline-text--normal { color: #5e5e5e; }
|
||
.deadline-text--warning { color: #ed7b2f; }
|
||
.deadline-text--danger { color: #e34d59; font-weight: 600; }
|