root/LLZQ-XCX
1
0
Fork 0
generated from root/feiqiu-ETL
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

需要部分页面

Browse Source
This commit is contained in:
Neo
2026-02-05 03:35:07 +08:00
parent c972c52e04
commit d328e2dee4
23 changed files with 47746 additions and 475 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1394
Prototype/pages/board-finance.html
View File

File diff suppressed because it is too large Load Diff

973
Prototype/pages/performance.html
View File

File diff suppressed because it is too large Load Diff

186
Prototype/pages/task-list.html
View File

@@ -82,6 +82,108 @@
background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 50%, #fcd34d 100%);
transition: width 0.6s ease-out;
}
/* 6段档位进度条 */
.tier-progress {
display: flex;
gap: 2px;
height: 8px;
}
.tier-segment {
border-radius: 2px;
background: rgba(255,255,255,0.25);
position: relative;
overflow: hidden;
}
.tier-segment.completed {
background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
}
.tier-segment.current {
background: linear-gradient(90deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0.25) 100%);
overflow: hidden;
}
.tier-segment.current .tier-fill {
height: 100%;
background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
border-radius: 2px;
}
/* 红戳样式 - 透明印章风格 */
.red-stamp {
position: relative;
display: inline-flex;
flex-direction: column;
align-items: center;
}
.stamp-badge {
position: absolute;
top: -2px;
right: -28px;
transform: rotate(-12deg) scale(0);
width: 52px;
height: 52px;
border: 3px solid rgb(239, 68, 68);
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: transparent;
pointer-events: none;
opacity: 0;
box-shadow:
inset 0 0 0 2px rgba(255, 255, 255, 0.95),
inset 0 0 10px 2px rgba(255, 255, 255, 0.7),
inset 0 0 20px 4px rgba(255, 255, 255, 0.4);
}
/* 盖戳动画 */
@keyframes stampDown {
0% {
transform: rotate(-12deg) scale(3);
opacity: 0;
}
50% {
transform: rotate(-12deg) scale(0.9);
opacity: 0.9;
}
70% {
transform: rotate(-12deg) scale(1.05);
opacity: 0.85;
}
100% {
transform: rotate(-12deg) scale(1);
opacity: 0.8;
}
}
.stamp-badge.stamp-animate {
animation: stampDown 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.stamp-badge .thumb {
font-size: 18px;
line-height: 1;
}
.stamp-badge .stamp-text {
font-size: 11px;
color: rgb(220, 38, 38);
font-weight: bold;
margin-top: 1px;
text-shadow:
0 0 2px rgba(255,255,255,1),
0 0 4px rgba(255,255,255,0.9),
1px 1px 0 rgba(255,255,255,0.9),
-1px -1px 0 rgba(255,255,255,0.9),
1px -1px 0 rgba(255,255,255,0.9),
-1px 1px 0 rgba(255,255,255,0.9);
}
/* 进度条按比例宽度：0-100(45.45%), 100-130(13.64%), 130-160(13.64%), 160-190(13.64%), 190-220(13.64%) */
.tier-segment-0 { flex: 100; }
.tier-segment-1 { flex: 30; }
.tier-segment-2 { flex: 30; }
.tier-segment-3 { flex: 30; }
.tier-segment-4 { flex: 30; }
/* 下降趋势样式 */
.trend-down {
color: rgba(255,255,255,0.5);
font-size: 12px;
}
/* 业绩卡片文字样式 */
.stat-value {
color: #ffffff;
@@ -125,12 +227,12 @@
<!-- 业绩进度卡片 -->
<div class="mx-4">
<div class="bg-white/15 backdrop-blur-md rounded-2xl px-4 py-2.5 border border-white/20">
<div class="bg-white/15 backdrop-blur-md rounded-2xl px-4 py-3 border border-white/20">
<!-- 第一层：标题行 -->
<div class="flex items-center justify-between mb-2">
<div class="flex items-baseline gap-2">
<span class="stat-label text-sm font-medium">本月业绩进度</span>
<span class="stat-accent text-xl font-bold">60%</span>
<span class="stat-label text-sm font-medium">距离100小时仅剩</span>
<span class="stat-accent text-xl font-bold">12.5小时</span>
</div>
<a href="performance.html" class="stat-secondary text-xs flex items-center gap-1 hover:text-white transition-colors">
查看详情
@@ -140,35 +242,66 @@
</a>
</div>
<!-- 第二层：进度条 -->
<div class="h-1.5 bg-white/20 rounded-full overflow-hidden mb-2.5">
<div class="progress-bar h-full rounded-full" style="width: 60%"></div>
<!-- 第二层：5段档位进度条 + 边界小时数（按比例宽度） -->
<div class="relative mb-6">
<div class="tier-progress">
<div class="tier-segment tier-segment-0 completed" title="0档 <100h"></div>
<div class="tier-segment tier-segment-1 current" title="1档 100-130h">
<div class="tier-fill" style="width: 58%"></div>
</div>
<div class="tier-segment tier-segment-2" title="2档 130-160h"></div>
<div class="tier-segment tier-segment-3" title="3档 160-190h"></div>
<div class="tier-segment tier-segment-4" title="4档 190-220h"></div>
</div>
<!-- 档位边界小时数（按比例定位：0, 100/220≈45.45%, 130/220≈59.09%, 160/220≈72.73%, 190/220≈86.36%, 220/220=100%） -->
<div class="absolute w-full top-full mt-1.5 flex text-[9px]" style="left: 0;">
<span class="text-white/60" style="position:absolute; left:0; transform:translateX(0);">0</span>
<span class="text-white/60" style="position:absolute; left:45.45%; transform:translateX(-50%);">100</span>
<span class="text-white/80 font-medium" style="position:absolute; left:59.09%; transform:translateX(-50%);">130</span>
<span class="text-white/60" style="position:absolute; left:72.73%; transform:translateX(-50%);">160</span>
<span class="text-white/60" style="position:absolute; left:86.36%; transform:translateX(-50%);">190</span>
<span class="text-white/60" style="position:absolute; right:0; transform:translateX(0);">220</span>
</div>
</div>
<!-- 第三层：核心数据 - 两列布局 -->
<!-- 第三层：核心数据 - 两列布局（左宽右窄） -->
<div class="flex items-stretch mb-2.5">
<div class="flex-1 pr-3 border-r border-white/25 text-center">
<div>
<span class="stat-highlight text-xl font-bold">82.5</span>
<span class="stat-secondary text-sm font-medium"> / 120</span>
<!-- 左侧：课时数据 + 红戳（占60%） -->
<div class="pr-4 border-r border-white/25 relative" style="flex: 3;">
<div class="red-stamp" style="display: inline-block; position: relative; left: 15px;">
<div class="text-center">
<div class="flex items-baseline justify-center gap-1.5">
<span class="stat-highlight text-xl font-bold">77.5</span>
<span class="stat-secondary text-sm">|</span>
<span class="stat-accent text-xl font-bold">12</span>
<span class="stat-secondary text-sm">|</span>
<span class="stat-value text-xl font-bold">87.5</span>
</div>
<p class="stat-label text-xs mt-1.5">基础课 | 激励课 | 全部</p>
</div>
<!-- 红戳徽章 -->
<div class="stamp-badge" style="right: -42px; top: 5px;">
<span class="thumb">👍</span>
<span class="stamp-text">已完成</span>
</div>
</div>
<p class="stat-label text-xs">已完成 / 目标课时</p>
</div>
<div class="flex-1 pl-3 text-center">
<!-- 右侧：奖金激励（占40%） -->
<div class="pl-3 text-center flex flex-col justify-center" style="flex: 2;">
<div>
<span class="stat-highlight text-xl font-bold">3.5</span>
<span class="stat-secondary text-sm font-medium"> / 10</span>
<span class="stat-secondary text-xs">万</span>
<span class="text-3xl font-bold text-amber-300">800</span>
<span class="text-base text-amber-300/80">元</span>
</div>
<p class="stat-label text-xs">已完成 / 目标销售额</p>
<p class="stat-label text-xs mt-1.5">达100h即得</p>
</div>
</div>
<!-- 第四层：预计收入 -->
<div class="flex items-center justify-between pt-2 border-t border-white/25">
<span class="stat-label text-xs">11月预计收入</span>
<span class="stat-label text-xs">2月预计收入 | 比1月同期</span>
<a href="performance.html" class="flex items-center gap-1.5 group">
<span class="stat-value text-lg font-bold">¥12,345</span>
<span class="stat-value text-lg font-bold">¥6,206</span>
<span class="trend-down">↓368</span>
<svg class="w-3.5 h-3.5 stat-secondary group-hover:text-white transition-colors" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="9 18 15 12 9 6"/>
</svg>
@@ -182,7 +315,7 @@
<div class="px-4 py-5">
<!-- 标题 -->
<div class="flex items-center justify-between mb-4">
<h2 class="text-base font-semibold text-gray-13">待办任务</h2>
<h2 class="text-base font-semibold text-gray-13">今日 客户维护</h2>
<span class="text-sm text-gray-6">共 7 项</span>
</div>
@@ -321,6 +454,19 @@
<!-- 通用底部导航 -->
<script src="../js/bottom-nav.js"></script>
<!-- 盖戳动画 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
// 延迟一点触发盖戳动画，让页面先加载完
setTimeout(function() {
const stamp = document.querySelector('.stamp-badge');
if (stamp) {
stamp.classList.add('stamp-animate');
}
}, 0);
});
</script>
</body>
</html>