generated from root/feiqiu-ETL
需要部分页面
This commit is contained in:
@@ -53,18 +53,18 @@
|
||||
}
|
||||
};
|
||||
|
||||
// 创建底部导航HTML
|
||||
// 创建底部导航HTML - 增大点击区域，提升z-index
|
||||
const navHTML = `
|
||||
<div id="bottomNav" class="fixed bottom-0 left-0 right-0 h-16 bg-white/95 backdrop-blur-lg border-t border-gray-2 flex items-center justify-around px-4 z-50">
|
||||
<a href="task-list.html" class="flex flex-col items-center gap-1">
|
||||
<div id="bottomNav" class="fixed bottom-0 left-0 right-0 h-16 bg-white/95 backdrop-blur-lg border-t border-gray-2 flex items-center justify-around px-2" style="z-index: 9999;">
|
||||
<a href="task-list.html" class="flex flex-col items-center justify-center gap-1 flex-1 h-full py-2 active:bg-gray-100 rounded-lg transition-colors">
|
||||
${isTaskActive ? icons.task.active : icons.task.inactive}
|
||||
<span class="text-xs ${isTaskActive ? 'text-primary font-medium' : 'text-gray-6'}">任务</span>
|
||||
</a>
|
||||
<a href="board-finance.html" class="flex flex-col items-center gap-1">
|
||||
<a href="board-finance.html" class="flex flex-col items-center justify-center gap-1 flex-1 h-full py-2 active:bg-gray-100 rounded-lg transition-colors">
|
||||
${isBoardActive ? icons.board.active : icons.board.inactive}
|
||||
<span class="text-xs ${isBoardActive ? 'text-primary font-medium' : 'text-gray-6'}">看板</span>
|
||||
</a>
|
||||
<a href="my-profile.html" class="flex flex-col items-center gap-1">
|
||||
<a href="my-profile.html" class="flex flex-col items-center justify-center gap-1 flex-1 h-full py-2 active:bg-gray-100 rounded-lg transition-colors">
|
||||
${isMyActive ? icons.my.active : icons.my.inactive}
|
||||
<span class="text-xs ${isMyActive ? 'text-primary font-medium' : 'text-gray-6'}">我的</span>
|
||||
</a>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -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>
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user