Let me start by getting design system recommendations and assets for this mining vehicle data dashboard.Now I have enough context. Let me create a stunning mining vehicle data statistics dashboard with a dark industrial theme.
```json{
"summary": "为矿车生产运营数据设计了一个深色工业风统计仪表盘，采用粗野主义与工业美学融合的风格。配色以深灰/黑色为基底，橙色（#e67e22）和琥珀色（#f39c12）作为强调色，模拟矿车与矿石的视觉联想。字体选用 'Space Grotesk' 搭配 'JetBrains Mono' 等宽字体，强化数据感。布局采用非对称网格，每个数据卡片以粗边框和微妙的发光效果呈现，模拟工业仪表盘质感。包含运行时长、作业时长、作业循环次数、怠速时长、装载时长、卸载时长、空车返回时间、重车运行时间共8个核心指标，每个卡片配有图标和进度/环形指示器，底部加入趋势图表区域增强数据深度。响应式适配移动端。",
"widget": {
"type": "full-html",
"html": "<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>矿车运营数据仪表盘</title>\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <link href=\"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500…\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.c…\">\n <style>\n :root {\n --bg-primary: #0a0e0f;\n --bg-secondary: #111618;\n --bg-card: #151a1c;\n --bg-card-hover: #1a2124;\n --border-color: #1e282c;\n --border-glow: rgba(230, 126, 34, 0.15);\n --accent: #e67e22;\n --accent-light: #f39c12;\n --accent-dim: rgba(230, 126, 34, 0.08);\n --text-primary: #e8edee;\n --text-secondary: #88969a;\n --text-muted: #4d5a5e;\n --danger: #e74c3c;\n --success: #27ae60;\n --warning: #f1c40f;\n --info: #3498db;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'Space Grotesk', sans-serif;\n background: var(--bg-primary);\n color: var(--text-primary);\n min-height: 100vh;\n overflow-x: hidden;\n }\n\n /* 噪点纹理叠加 */\n body::before {\n content: '';\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: 9999;\n opacity: 0.035;\n background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E\");\n background-repeat: repeat;\n background-size: 256px 256px;\n }\n\n /* 网格背景 */\n .grid-bg {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-image: \n linear-gradient(rgba(230, 126, 34, 0.03) 1px, transparent 1px),\n linear-gradient(90deg, rgba(230, 126, 34, 0.03) 1px, transparent 1px);\n background-size: 60px 60px;\n pointer-events: none;\n z-index: 0;\n }\n\n .container {\n position: relative;\n z-index: 1;\n max-width: 1400px;\n margin: 0 auto;\n padding: 2rem 1.5rem;\n }\n\n /* 头部 */\n .header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-bottom: 2rem;\n border-bottom: 1px solid var(--border-color);\n margin-bottom: 2.5rem;\n flex-wrap: wrap;\n gap: 1rem;\n }\n\n .header-left {\n display: flex;\n align-items: center;\n gap: 1.25rem;\n }\n\n .logo-icon {\n width: 48px;\n height: 48px;\n background: linear-gradient(135deg, var(--accent), var(--accent-light));\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.5rem;\n color: #0a0e0f;\n box-shadow: 0 0 30px rgba(230, 126, 34, 0.2);\n }\n\n .header-title h1 {\n font-size: 1.75rem;\n font-weight: 600;\n letter-spacing: -0.02em;\n line-height: 1.2;\n }\n\n .header-title p {\n font-size: 0.85rem;\n color: var(--text-secondary);\n font-family: 'JetBrains Mono', monospace;\n letter-spacing: 0.05em;\n }\n\n .header-right {\n display: flex;\n align-items: center;\n gap: 1.5rem;\n }\n\n .time-display {\n font-family: 'JetBrains Mono', monospace;\n font-size: 0.9rem;\n color: var(--text-secondary);\n padding: 0.5rem 1rem;\n border: 1px solid var(--border-color);\n border-radius: 8px;\n background: var(--bg-secondary);\n }\n\n .status-badge {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.5rem 1.25rem;\n border-radius: 100px;\n background: var(--accent-dim);\n border: 1px solid rgba(230, 126, 34, 0.2);\n font-size: 0.85rem;\n font-weight: 500;\n }\n\n .status-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: var(--success);\n animation: pulse-dot 2s ease-in-out infinite;\n }\n\n @keyframes pulse-dot {\n 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.4); }\n 50% { opacity: 0.7; box-shadow: 0 0 0 6px rgba(39, 174, 96, 0); }\n }\n\n /* 概览统计行 */\n .stats-overview {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 1rem;\n margin-bottom: 2.5rem;\n }\n\n .stat-mini-card {\n background: var(--bg-card);\n border: 1px solid var(--border-color);\n border-radius: 12px;\n padding: 1.25rem 1.5rem;\n display: flex;\n align-items: center;\n gap: 1rem;\n transition: all 0.3s ease;\n }\n\n .stat-mini-card:hover {\n border-color: rgba(230, 126, 34, 0.3);\n background: var(--bg-card-hover);\n transform: translateY(-2px);\n }\n\n .stat-mini-icon {\n width: 44px;\n height: 44px;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.1rem;\n flex-shrink: 0;\n }\n\n .stat-mini-icon.orange { background: rgba(230, 126, 34, 0.12); color: var(--accent); }\n .stat-mini-icon.blue { background: rgba(52, 152, 219, 0.12); color: var(--info); }\n .stat-mini-icon.green { background: rgba(39, 174, 96, 0.12); color: var(--success); }\n .stat-mini-icon.yellow { background: rgba(241, 196, 15, 0.12); color: var(--warning); }\n\n .stat-mini-info {\n flex: 1;\n min-width: 0;\n }\n\n .stat-mini-label {\n font-size: 0.75rem;\n color: var(--text-muted);\n text-transform: uppercase;\n letter-spacing: 0.08em;\n font-weight: 500;\n }\n\n .stat-mini-value {\n font-family: 'JetBrains Mono', monospace;\n font-size: 1.35rem;\n font-weight: 600;\n color: var(--text-primary);\n line-height: 1.3;\n }\n\n .stat-mini-change {\n font-size: 0.75rem;\n font-weight: 500;\n padding: 0.15rem 0.5rem;\n border-radius: 4px;\n }\n\n .stat-mini-change.up {\n color: var(--success);\n background: rgba(39, 174, 96, 0.1);\n }\n\n .stat-mini-change.down {\n color: var(--danger);\n background: rgba(231, 76, 60, 0.1);\n }\n\n /* 主网格 - 8个指标卡片 */\n .metrics-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 1.25rem;\n margin-bottom: 2.5rem;\n }\n\n .metric-card {\n background: var(--bg-card);\n border: 1px solid var(--border-color);\n border-radius: 16px;\n padding: 1.5rem;\n position: relative;\n overflow: hidden;\n transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n cursor: default;\n }\n\n .metric-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 3px;\n background: linear-gradient(90deg, var(--accent), var(--accent-light));\n opacity: 0;\n transition: opacity 0.3s ease;\n }\n\n .metric-card:hover::before {\n opacity: 1;\n }\n\n .metric-card:hover {\n border-color: rgba(230, 126, 34, 0.25);\n background: var(--bg-card-hover);\n transform: translateY(-3px);\n box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(230, 126, 34, 0.05);\n }\n\n .metric-card-header {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 1rem;\n }\n\n .metric-icon {\n width: 40px;\n height: 40px;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1rem;\n flex-shrink: 0;\n }\n\n .metric-icon.orange { background: rgba(230, 126, 34, 0.12); color: var(--accent); }\n .metric-icon.blue { background: rgba(52, 152, 219, 0.12); color: var(--info); }\n .metric-icon.green { background: rgba(39, 174, 96, 0.12); color: var(--success); }\n .metric-icon.red { background: rgba(231, 76, 60, 0.12); color: var(--danger); }\n .metric-icon.yellow { background: rgba(241, 196, 15, 0.12); color: var(--warning); }\n .metric-icon.purple { background: rgba(155, 89, 182, 0.12); color: #9b59b6; }\n .metric-icon.teal { background: rgba(26, 188, 156, 0.12); color: #1abc9c; }\n .metric-icon.cyan { background: rgba(0, 188, 212, 0.12); color: #00bcd4; }\n\n .metric-badge {\n font-size: 0.65rem;\n padding: 0.2rem 0.6rem;\n border-radius: 100px;\n font-weight: 500;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n border: 1px solid;\n }\n\n .metric-badge.orange { border-color: rgba(230, 126, 34, 0.25); color: var(--accent); background: rgba(230, 126, 34, 0.06); }\n .metric-badge.blue { border-color: rgba(52, 152, 219, 0.25); color: var(--info); background: rgba(52, 152, 219, 0.06); }\n .metric-badge.green { border-color: rgba(39, 174, 96, 0.25); color: var(--success); background: rgba(39, 174, 96, 0.06); }\n .metric-badge.red { border-color: rgba(231, 76, 60, 0.25); color: var(--danger); background: rgba(231, 76, 60, 0.06); }\n .metric-badge.yellow { border-color: rgba(241, 196, 15, 0.25); color: var(--warning); background: rgba(241, 196, 15, 0.06); }\n .metric-badge.purple { border-color: rgba(155, 89, 182, 0.25); color: #9b59b6; background: rgba(155, 89, 182, 0.06); }\n .metric-badge.teal { border-color: rgba(26, 188, 156, 0.25); color: #1abc9c; background: rgba(26, 188, 156, 0.06); }\n .metric-badge.cyan { border-color: rgba(0, 188, 212, 0.25); color: #00bcd4; background: rgba(0, 188, 212, 0.06); }\n\n .metric-value {\n font-family: 'JetBrains Mono', monospace;\n font-size: 2rem;\n font-weight: 700;\n line-height: 1.1;\n margin-bottom: 0.35rem;\n letter-spacing: -0.02em;\n }\n\n .metric-label {\n font-size: 0.8rem;\n color: var(--text-secondary);\n font-weight: 400;\n margin-bottom: 0.75rem;\n }\n\n .metric-progress {\n width: 100%;\n height: 4px;\n background: rgba(255, 255, 255, 0.06);\n border-radius: 100px;\n overflow: hidden;\n }\n\n .metric-progress-bar {\n height: 100%;\n border-radius: 100px;\n transition: width 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n width: 0%;\n }\n\n .metric-progress-bar.orange { background: linear-gradient(90deg, var(--accent), var(--accent-light)); }\n .metric-progress-bar.blue { background: linear-gradient(90deg, #2980b9, #3498db); }\n .metric-progress-bar.green { background: linear-gradient(90deg, #27ae60, #2ecc71); }\n .metric-progress-bar.red { background: linear-gradient(90deg, #c0392b, #e74c3c); }\n .metric-progress-bar.yellow { background: linear-gradient(90deg, #f39c12, #f1c40f); }\n .metric-progress-bar.purple { background: linear-gradient(90deg, #8e44ad, #9b59b6); }\n .metric-progress-bar.teal { background: linear-gradient(90deg, #16a085, #1abc9c); }\n .metric-progress-bar.cyan { background: linear-gradient(90deg, #00acc1, #00bcd4); }\n\n .metric-sub {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-top: 0.75rem;\n font-size: 0.75rem;\n color: var(--text-muted);\n font-family: 'JetBrains Mono', monospace;\n }\n\n .metric-sub .change {\n font-weight: 500;\n }\n\n .metric-sub .change.up { color: var(--success); }\n .metric-sub .change.down { color: var(--danger); }\n\n /* 底部图表区域 */\n .chart-section {\n display: grid;\n grid-template-columns: 2fr 1fr;\n gap: 1.25rem;\n }\n\n .chart-card {\n background: var(--bg-card);\n border: 1px solid var(--border-color);\n border-radius: 16px;\n padding: 1.5rem;\n transition: all 0.3s ease;\n }\n\n .chart-card:hover {\n border-color: rgba(230, 126, 34, 0.2);\n }\n\n .chart-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 1.25rem;\n }\n\n .chart-title {\n font-size: 1rem;\n font-weight: 600;\n }\n\n .chart-legend {\n display: flex;\n gap: 1.25rem;\n font-size: 0.75rem;\n color: var(--text-secondary);\n }\n\n .chart-legend-item {\n display: flex;\n align-items: center;\n gap: 0.4rem;\n }\n\n .chart-legend-dot {\n width: 8px;\n height: 8px;\n border-radius: 2px;\n }\n\n .chart-legend-dot.orange { background: var(--accent); }\n .chart-legend-dot.cyan { background: #00bcd4; }\n\n /* 条形图 */\n .bar-chart {\n display: flex;\n align-items: flex-end;\n gap: 0.6rem;\n height: 160px;\n padding-top: 0.5rem;\n }\n\n .bar-group {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.35rem;\n height: 100%;\n justify-content: flex-end;\n }\n\n .bar-wrapper {\n width: 100%;\n display: flex;\n gap: 3px;\n align-items: flex-end;\n height: 100%;\n justify-content: center;\n }\n\n .bar {\n width: 40%;\n border-radius: 3px 3px 0 0;\n min-height: 4px;\n transition: height 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n height: 0%;\n position: relative;\n }\n\n .bar.orange { background: linear-gradient(180deg, var(--accent-light), var(--accent)); }\n .bar.cyan { background: linear-gradient(180deg, #4dd0e1, #00bcd4); }\n\n .bar-label {\n font-size: 0.6rem;\n color: var(--text-muted);\n font-family: 'JetBrains Mono', monospace;\n text-align: center;\n white-space: nowrap;\n }\n\n /* 环形进度 */\n .donut-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 0.5rem 0;\n }\n\n .donut {\n position: relative;\n width: 140px;\n height: 140px;\n }\n\n .donut svg {\n transform: rotate(-90deg);\n }\n\n .donut-center {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n text-align: center;\n }\n\n .donut-center-value {\n font-family: 'JetBrains Mono', monospace;\n font-size: 1.75rem;\n font-weight: 700;\n color: var(--text-primary);\n line-height: 1;\n }\n\n .donut-center-label {\n font-size: 0.65rem;\n color: var(--text-muted);\n margin-top: 0.25rem;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n }\n\n .donut-legend {\n display: flex;\n flex-wrap: wrap;\n gap: 0.75rem;\n margin-top: 1rem;\n justify-content: center;\n }\n\n .donut-legend-item {\n display: flex;\n align-items: center;\n gap: 0.35rem;\n font-size: 0.7rem;\n color: var(--text-secondary);\n }\n\n .donut-legend-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n }\n\n /* 动画 */\n @keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .animate-in {\n animation: fadeInUp 0.6s ease forwards;\n opacity: 0;\n }\n\n .delay-1 { animation-delay: 0.05s; }\n .delay-2 { animation-delay: 0.1s; }\n .delay-3 { animation-delay: 0.15s; }\n .delay-4 { animation-delay: 0.2s; }\n .delay-5 { animation-delay: 0.25s; }\n .delay-6 { animation-delay: 0.3s; }\n .delay-7 { animation-delay: 0.35s; }\n .delay-8 { animation-delay: 0.4s; }\n .delay-9 { animation-delay: 0.45s; }\n .delay-10 { animation-delay: 0.5s; }\n .delay-11 { animation-delay: 0.55s; }\n .delay-12 { animation-delay: 0.6s; }\n\n /* 响应式 */\n @media (max-width: 1200px) {\n .metrics-grid {\n grid-template-columns: repeat(3, 1fr);\n }\n .stats-overview {\n grid-template-columns: repeat(2, 1fr);\n }\n .chart-section {\n grid-template-columns: 1fr;\n }\n }\n\n @media (max-width: 768px) {\n .container {\n padding: 1.25rem 1rem;\n }\n .header {\n flex-direction: column;\n align-items: flex-start;\n }\n .header-right {\n width: 100%;\n justify-content: space-between;\n }\n .metrics-grid {\n grid-template-columns: repeat(2, 1fr);\n gap: 0.85rem;\n }\n .stats-overview {\n grid-template-columns: repeat(2, 1fr);\n gap: 0.75rem;\n }\n .stat-mini-card {\n padding: 1rem;\n }\n .stat-mini-value {\n font-size: 1.1rem;\n }\n .metric-value {\n font-size: 1.5rem;\n }\n .metric-card {\n padding: 1.15rem;\n }\n .bar-chart {\n height: 120px;\n gap: 0.4rem;\n }\n .donut {\n width: 110px;\n height: 110px;\n }\n .donut-center-value {\n font-size: 1.35rem;\n }\n .header-title h1 {\n font-size: 1.35rem;\n }\n .time-display {\n font-size: 0.75rem;\n padding: 0.35rem 0.75rem;\n }\n }\n\n @media (max-width: 480px) {\n .metrics-grid {\n grid-template-columns: 1fr 1fr;\n gap: 0.65rem;\n }\n .stats-overview {\n grid-template-columns: 1fr 1fr;\n gap: 0.6rem;\n }\n .metric-card {\n padding: 1rem;\n }\n .metric-value {\n font-size: 1.25rem;\n }\n .metric-icon {\n width: 32px;\n height: 32px;\n font-size: 0.85rem;\n }\n .stat-mini-card {\n padding: 0.75rem;\n }\n .stat-mini-icon {\n width: 36px;\n height: 36px;\n font-size: 0.9rem;\n }\n .stat-mini-value {\n font-size: 1rem;\n }\n .header-title h1 {\n font-size: 1.15rem;\n }\n .logo-icon {\n width: 38px;\n height: 38px;\n font-size: 1.2rem;\n }\n .bar-chart {\n height: 100px;\n gap: 0.3rem;\n }\n .bar-label {\n font-size: 0.5rem;\n }\n }\n </style>\n</head>\n<body>\n\n<div class=\"grid-bg\"></div>\n\n<div class=\"container\">\n \n <!-- 头部 -->\n <header class=\"header animate-in\">\n <div class=\"header-left\">\n <div class=\"logo-icon\">\n <i class=\"fas fa-truck-front\"></i>\n </div>\n <div class=\"header-title\">\n <h1>矿车运营数据平台</h1>\n <p><i class=\"fa-regular fa-circle-check\" style=\"color: var(--success); margin-right: 4px;\"></i> 系统运行正常 · 实时数据同步中</p>\n </div>\n </div>\n <div class=\"header-right\">\n <div class=\"time-display\" id=\"currentTime\">\n <i class=\"fa-regular fa-clock\" style=\"margin-right: 6px;\"></i>\n <span id=\"timeText\">--:--:--</span>\n </div>\n <div class=\"status-badge\">\n <span class=\"status-dot\"></span>\n 在线 · 3台矿车\n </div>\n </div>\n </header>\n\n <!-- 概览统计 -->\n <div class=\"stats-overview\">\n <div class=\"stat-mini-card animate-in delay-1\">\n <div class=\"stat-mini-icon orange\">\n <i class=\"fas fa-truck\"></i>\n </div>\n <div class=\"stat-mini-info\">\n <div class=\"stat-mini-label\">在线矿车</div>\n <div class=\"stat-mini-value\">3 <span style=\"font-size:0.7rem;color:var(--text-muted);font-weight:400;\">/ 5 台</span></div>\n </div>\n <span class=\"stat-mini-change up\"><i class=\"fa-solid fa-arrow-up\"></i> 12%</span>\n </div>\n <div class=\"stat-mini-card animate-in delay-2\">\n <div class=\"stat-mini-icon blue\">\n <i class=\"fas fa-clock\"></i>\n </div>\n <div class=\"stat-mini-info\">\n <div class=\"stat-mini-label\">总运行时长</div>\n <div class=\"stat-mini-value\">1,284 <span style=\"font-size:0.7rem;color:var(--text-muted);font-weight:400;\">h</span></div>\n </div>\n <span class=\"stat-mini-change up\"><i class=\"fa-solid fa-arrow-up\"></i> 8.3%</span>\n </div>\n <div class=\"stat-mini-card animate-in delay-3\">\n <div class=\"stat-mini-icon green\">\n <i class=\"fas fa-arrows-rotate\"></i>\n </div>\n <div class=\"stat-mini-info\">\n <div class=\"stat-mini-label\">总循环次数</div>\n <div class=\"stat-mini-value\">3,847</div>\n </div>\n <span class=\"stat-mini-change up\"><i class=\"fa-solid fa-arrow-up\"></i> 5.7%</span>\n </div>\n <div class=\"stat-mini-card animate-in delay-4\">\n <div class=\"stat-mini-icon yellow\">\n <i class=\"fas fa-gauge-high\"></i>\n </div>\n <div class=\"stat-mini-info\">\n <div class=\"stat-mini-label\">平均作业效率</div>\n <div class=\"stat-mini-value\">87.6<span style=\"font-size:0.7rem;color:var(--text-muted);font-weight:400;\">%</span></div>\n </div>\n <span class=\"stat-mini-change down\"><i class=\"fa-solid fa-arrow-down\"></i> 2.1%</span>\n </div>\n </div>\n\n <!-- 8个核心指标卡片 -->\n <div class=\"metrics-grid\">\n <!-- 1. 运行时长 -->\n <div class=\"metric-card animate-in delay-1\">\n <div class=\"metric-card-header\">\n <div class=\"metric-icon orange\">\n <i class=\"fas fa-play-circle\"></i>\n </div>\n <span class=\"metric-badge orange\">累计</span>\n </div>\n <div class=\"metric-value\" style=\"color: var(--accent);\">1,284 <span style=\"font-size:1rem;font-weight:400;color:var(--text-muted);\">h</span></div>\n <div class=\"metric-label\">运行时长</div>\n <div class=\"metric-progress\">\n <div class=\"metric-progress-bar orange\" style=\"width: 82%;\"></div>\n </div>\n <div class=\"metric-sub\">\n <span>日平均 10.7h</span>\n <span class=\"change up\"><i class=\"fa-solid fa-arrow-up\"></i> +3.2%</span>\n </div>\n </div>\n\n <!-- 2. 作业时长 -->\n <div class=\"metric