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

1267
Prototype/pages_BAKUP/board-finance.html
View File

File diff suppressed because it is too large Load Diff

227
Prototype/pages_BAKUP/task-list.html
View File

@@ -77,28 +77,113 @@
background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
border-radius: 4px;
}
/* 底部导航 */
.nav-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
flex: 1;
padding: 8px 0;
color: #8b8b8b;
transition: color 0.2s;
}
.nav-item.active {
color: #0052d9;
}
.nav-item.active svg {
fill: #0052d9;
}
/* 进度条动画 */
.progress-bar {
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;
}
/* 进度条按比例宽度：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; }
/* 红戳样式 - 透明印章风格 */
.red-stamp {
position: relative;
display: inline-flex;
flex-direction: column;
align-items: center;
}
.stamp-badge {
position: absolute;
top: 2px;
right: -58px;
transform: rotate(-18deg) scale(0);
width: 52px;
height: 52px;
border: 3px solid rgb(239, 68, 68);
border-radius: 70%;
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(-2deg) scale(3);
opacity: 0;
}
50% {
transform: rotate(-2deg) scale(0.9);
opacity: 0.9;
}
70% {
transform: rotate(-10deg) scale(1.05);
opacity: 0.85;
}
100% {
transform: rotate(-20deg) scale(1);
opacity: 0.9;
}
}
.stamp-badge.stamp-animate {
animation: stampDown 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.stamp-badge .thumb {
font-size: 20px;
line-height: 1;
}
.stamp-badge .stamp-text {
font-size: 10px;
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);
}
/* 下降趋势样式 */
.trend-down {
color: rgba(255,255,255,0.5);
font-size: 12px;
}
/* 业绩卡片文字样式 */
.stat-value {
color: #ffffff;
@@ -142,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">距离下一目标剩余</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">
查看详情
@@ -157,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 flex justify-center" style="flex: 3;">
<div class="red-stamp" style="display: inline-block; position: relative; left: -5px;">
<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>
<!-- 红戳徽章 - 以左侧区域右边界为参考定位 -->
<div class="stamp-badge" style="right: 10px; top: 10%; transform: translateY(-50%) rotate(-12deg) scale(0);">
<span class="thumb">👍</span>
<span class="stamp-text">已完成</span>
</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>
@@ -335,28 +451,21 @@
<!-- 悬浮助手按钮 -->
<script src="../js/ai-float-btn.js"></script>
<!-- 底部导航栏 -->
<nav class="fixed bottom-0 left-0 right-0 h-16 bg-white border-t border-gray-2 flex items-center px-4 z-50">
<a href="task-list.html" class="nav-item active">
<svg class="w-6 h-6" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zM17.99 9l-1.41-1.42-6.59 6.59-2.58-2.57-1.42 1.41 4 3.99z"/>
</svg>
<span class="text-xs font-medium">任务</span>
</a>
<a href="board-coach.html" class="nav-item">
<svg class="w-6 h-6" viewBox="0 0 24 24" fill="currentColor">
<path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"/>
</svg>
<span class="text-xs">看板</span>
</a>
<a href="my-profile.html" class="nav-item">
<svg class="w-6 h-6" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
</svg>
<span class="text-xs">我的</span>
</a>
</nav>
<!-- 通用底部导航 -->
<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');
}
}, 200);
});
</script>
</body>
</html>