feat: 为12个订单班添加专属SVG图标
详细说明: - 为每个订单班创建专属的SVG favicon图标 - 每个图标使用渐变色和专属图形设计 - 在所有订单班的index.html中添加favicon引用 - 图标设计： * wenlu(文旅): 紫蓝渐变 + 地图标记 * food(食品): 橙红渐变 + 厨师帽 * visual-design(视觉设计): 粉紫渐变 + 画笔 * civil(土木): 灰蓝渐变 + 建筑 * health(大健康): 绿青渐变 + 医疗十字 * energy(能源): 黄橙渐变 + 闪电 * transportation(交通物流): 蓝色渐变 + 卡车 * manufacturing(智能制造): 深蓝银色渐变 + 齿轮 * developer(智能开发): 青绿渐变 + 代码符号 * finance(财经商贸): 金蓝渐变 + 上升图表 * environmental(环保): 绿蓝渐变 + 叶子 * chemical(化工): 蓝紫渐变 + 烧杯 - 修改文件: 12个favicon.svg文件 + 12个index.html文件 - 影响模块: 所有订单班网页的视觉标识系统 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Yep_Q
@@ -854,6 +854,446 @@ tr:hover {
|
||||
.gap-md { gap: var(--spacing-md); }
|
||||
.gap-lg { gap: var(--spacing-lg); }
|
||||
|
||||
/* ========== Timeline时间轴布局 ========== */
|
||||
.timeline-container {
|
||||
margin: var(--spacing-2xl) 0;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
position: relative;
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
padding: var(--spacing-xl) 0;
|
||||
}
|
||||
|
||||
/* 时间轴中心线 */
|
||||
.timeline::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 3px;
|
||||
background: linear-gradient(to bottom,
|
||||
transparent,
|
||||
var(--primary-green) 10%,
|
||||
var(--primary-green) 90%,
|
||||
transparent
|
||||
);
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-2xl);
|
||||
}
|
||||
|
||||
.timeline-item:nth-child(odd) {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.timeline-item:nth-child(even) {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.timeline-marker {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
background: var(--bg-card);
|
||||
border: 3px solid var(--primary-green);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 10;
|
||||
box-shadow: var(--shadow-lg), 0 0 0 8px var(--bg-dark);
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
|
||||
.timeline-marker i {
|
||||
width: 24px !important;
|
||||
height: 24px !important;
|
||||
color: var(--primary-green);
|
||||
}
|
||||
|
||||
.timeline-item:hover .timeline-marker {
|
||||
transform: translateX(-50%) scale(1.15);
|
||||
box-shadow: var(--shadow-xl), 0 0 0 12px var(--bg-dark), var(--shadow-green);
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
width: calc(50% - 50px);
|
||||
background: var(--bg-card);
|
||||
backdrop-filter: blur(15px);
|
||||
padding: var(--spacing-lg);
|
||||
border-radius: var(--radius-xl);
|
||||
border: 2px solid var(--border-light);
|
||||
box-shadow: var(--shadow-md);
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
|
||||
.timeline-item:nth-child(odd) .timeline-content {
|
||||
margin-right: calc(50% + 35px);
|
||||
}
|
||||
|
||||
.timeline-item:nth-child(even) .timeline-content {
|
||||
margin-left: calc(50% + 35px);
|
||||
}
|
||||
|
||||
.timeline-content:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: var(--shadow-xl), var(--shadow-green);
|
||||
border-color: var(--primary-green);
|
||||
}
|
||||
|
||||
.timeline-content h4 {
|
||||
font-size: var(--text-lg);
|
||||
color: var(--primary-green);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
font-weight: var(--font-semibold);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.timeline::before {
|
||||
left: 30px;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
justify-content: flex-end !important;
|
||||
}
|
||||
|
||||
.timeline-marker {
|
||||
left: 30px;
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
width: calc(100% - 90px);
|
||||
margin-left: 90px !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 图标网格（无卡片）========== */
|
||||
.icon-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: var(--spacing-2xl);
|
||||
margin: var(--spacing-2xl) 0;
|
||||
}
|
||||
|
||||
.icon-item {
|
||||
text-align: center;
|
||||
transition: all var(--transition-base);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.icon-item:hover {
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
|
||||
.icon-wrapper {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto var(--spacing-md);
|
||||
background: var(--bg-card);
|
||||
border: 3px solid var(--primary-green);
|
||||
box-shadow: var(--shadow-md);
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
|
||||
.icon-item:hover .icon-wrapper {
|
||||
box-shadow: var(--shadow-xl), 0 0 30px rgba(16, 185, 129, 0.4);
|
||||
transform: scale(1.1) rotate(5deg);
|
||||
}
|
||||
|
||||
.icon-wrapper i {
|
||||
width: 40px !important;
|
||||
height: 40px !important;
|
||||
color: var(--primary-green);
|
||||
}
|
||||
|
||||
.icon-item h4 {
|
||||
font-size: var(--text-base);
|
||||
font-weight: var(--font-semibold);
|
||||
color: var(--text-light);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.icon-item p {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-gray);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.icon-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.icon-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.icon-wrapper {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.icon-wrapper i {
|
||||
width: 30px !important;
|
||||
height: 30px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 圆形进度条统计 ========== */
|
||||
.progress-stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: var(--spacing-2xl);
|
||||
margin: var(--spacing-2xl) 0;
|
||||
padding: var(--spacing-2xl);
|
||||
background: var(--bg-card);
|
||||
backdrop-filter: blur(15px);
|
||||
border-radius: var(--radius-2xl);
|
||||
border: 2px solid var(--border-light);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.progress-item {
|
||||
text-align: center;
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
|
||||
.progress-item:hover {
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
|
||||
.circle-progress {
|
||||
position: relative;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
margin: 0 auto var(--spacing-md);
|
||||
}
|
||||
|
||||
.circle-progress svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.circle-bg,
|
||||
.circle-fill {
|
||||
fill: none;
|
||||
stroke-width: 10;
|
||||
}
|
||||
|
||||
.circle-bg {
|
||||
stroke: var(--border-light);
|
||||
}
|
||||
|
||||
.circle-fill {
|
||||
stroke: var(--primary-green);
|
||||
stroke-linecap: round;
|
||||
stroke-dasharray: 314; /* 2 * π * r = 2 * π * 50 */
|
||||
stroke-dashoffset: calc(314 * (1 - var(--progress, 0) / 100));
|
||||
transition: stroke-dashoffset 2s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
filter: drop-shadow(0 0 8px rgba(16, 185, 129, 0.5));
|
||||
}
|
||||
|
||||
.circle-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.circle-value {
|
||||
font-size: var(--text-3xl);
|
||||
font-weight: var(--font-bold);
|
||||
color: var(--primary-green);
|
||||
line-height: 1;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.circle-unit {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-gray);
|
||||
font-weight: var(--font-medium);
|
||||
}
|
||||
|
||||
.progress-item .stat-label {
|
||||
font-size: var(--text-base);
|
||||
color: var(--text-light);
|
||||
font-weight: var(--font-semibold);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.progress-stats {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.progress-stats {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--spacing-lg);
|
||||
padding: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.circle-progress {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.circle-value {
|
||||
font-size: var(--text-2xl);
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== Section 1 Split Layout + Floating Data Cards ========== */
|
||||
.split-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--spacing-2xl);
|
||||
align-items: flex-start;
|
||||
margin: var(--spacing-2xl) 0;
|
||||
}
|
||||
|
||||
.split-column-left,
|
||||
.split-column-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.split-column-left .image-container {
|
||||
aspect-ratio: 4/3; /* 改为4:3比例，更紧凑 */
|
||||
border-radius: var(--radius-2xl);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-xl);
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
|
||||
.split-column-left .image-container:hover {
|
||||
transform: scale(1.02);
|
||||
box-shadow: var(--shadow-xl), var(--shadow-green);
|
||||
}
|
||||
|
||||
.floating-data-card {
|
||||
background: linear-gradient(135deg,
|
||||
rgba(16, 185, 129, 0.12) 0%,
|
||||
rgba(5, 150, 105, 0.08) 100%);
|
||||
backdrop-filter: blur(15px);
|
||||
-webkit-backdrop-filter: blur(15px);
|
||||
padding: var(--spacing-xl);
|
||||
border-radius: var(--radius-xl);
|
||||
border: 2px solid var(--border-light);
|
||||
box-shadow: var(--shadow-md);
|
||||
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.floating-data-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(135deg, transparent 0%, rgba(16, 185, 129, 0.05) 100%);
|
||||
opacity: 0;
|
||||
transition: opacity var(--transition-base);
|
||||
}
|
||||
|
||||
.floating-data-card:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.floating-data-card:hover {
|
||||
transform: translateY(-8px) scale(1.02);
|
||||
box-shadow: 0 12px 32px rgba(16, 185, 129, 0.2),
|
||||
0 6px 16px rgba(0, 0, 0, 0.1);
|
||||
border-color: var(--primary-green);
|
||||
}
|
||||
|
||||
.floating-data-value {
|
||||
font-size: var(--text-4xl);
|
||||
font-weight: var(--font-bold);
|
||||
color: var(--primary-green);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
line-height: 1;
|
||||
letter-spacing: -0.02em;
|
||||
text-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
|
||||
}
|
||||
|
||||
body.dark-theme .floating-data-value {
|
||||
color: var(--accent-emerald-light);
|
||||
text-shadow: 0 2px 12px rgba(52, 211, 153, 0.3);
|
||||
}
|
||||
|
||||
.floating-data-label {
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--font-semibold);
|
||||
color: var(--text-gray);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
opacity: 0.85;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.floating-data-note {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-gray);
|
||||
opacity: 0.7;
|
||||
margin-top: var(--spacing-xs);
|
||||
}
|
||||
|
||||
/* 深色主题适配 */
|
||||
body.dark-theme .floating-data-card {
|
||||
background: linear-gradient(135deg,
|
||||
rgba(52, 211, 153, 0.15) 0%,
|
||||
rgba(16, 185, 129, 0.1) 100%);
|
||||
}
|
||||
|
||||
/* 响应式布局 */
|
||||
@media (max-width: 1024px) {
|
||||
.split-layout {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.split-column-left .image-container {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.split-column-left .card {
|
||||
order: 2;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.floating-data-card {
|
||||
padding: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.floating-data-value {
|
||||
font-size: var(--text-3xl);
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 图片加载状态 ========== */
|
||||
img {
|
||||
transition: opacity var(--transition-base);
|
||||
|
||||
Reference in New Issue
Block a user