html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Kirin先进测试中心 - 数字化测试平台</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
}
/* Header */
header {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
box-shadow: 0 2px 20px rgba(0,0,0,0.1);
position: sticky;
top: 0;
z-index: 1000;
}
.header-content {
max-width: 1400px;
margin: 0 auto;
padding: 20px 40px;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
display: flex;
align-items: center;
gap: 12px;
font-size: 24px;
font-weight: 700;
color: #667eea;
}
.logo svg {
width: 32px;
height: 32px;
}
nav {
display: flex;
gap: 35px;
}
nav a {
text-decoration: none;
color: #333;
font-weight: 500;
transition: color 0.3s;
position: relative;
}
nav a:hover {
color: #667eea;
}
nav a::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background: #667eea;
transition: width 0.3s;
}
nav a:hover::after {
width: 100%;
}
/* Hero Banner */
.hero {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.9), rgba(118, 75, 162, 0.9));
padding: 80px 40px;
text-align: center;
color: white;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
background-size: 50px 50px;
animation: moveGrid 20s linear infinite;
}
@keyframes moveGrid {
0% { transform: translate(0, 0); }
100% { transform: translate(50px, 50px); }
}
.hero-content {
position: relative;
z-index: 1;
max-width: 1200px;
margin: 0 auto;
}
.hero h1 {
font-size: 56px;
margin-bottom: 20px;
animation: fadeInUp 1s ease;
}
.hero p {
font-size: 22px;
opacity: 0.95;
animation: fadeInUp 1s ease 0.2s both;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Container */
.container {
max-width: 1400px;
margin: -60px auto 0;
padding: 0 40px 60px;
position: relative;
z-index: 10;
}
/* Stats Cards */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 25px;
margin-bottom: 40px;
}
.stat-card {
background: white;
padding: 30px;
border-radius: 16px;
box-shadow: 0 10px 40px rgba(0,0,0,0.1);
transition: transform 0.3s, box-shadow 0.3s;
position: relative;
overflow: hidden;
}
.stat-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, #667eea, #764ba2);
}
.stat-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 60px rgba(102, 126, 234, 0.3);
}
.stat-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 15px;
color: white;
font-size: 24px;
}
.stat-label {
color: #666;
font-size: 14px;
margin-bottom: 8px;
}
.stat-value {
font-size: 36px;
font-weight: 700;
color: #333;
display: flex;
align-items: baseline;
gap: 5px;
}
.stat-unit {
font-size: 18px;
color: #999;
}
/* Charts Section */
.charts-section {
background: white;
border-radius: 20px;
padding: 40px;
box-shadow: 0 10px 40px rgba(0,0,0,0.1);
margin-bottom: 40px;
}
.section-title {
font-size: 28px;
font-weight: 700;
color: #333;
margin-bottom: 30px;
display: flex;
align-items: center;
gap: 12px;
}
.section-title::before {
content: '';
width: 4px;
height: 32px;
background: linear-gradient(180deg, #667eea, #764ba2);
border-radius: 2px;
}
.charts-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.chart-container {
position: relative;
height: 350px;
}
/* Lab Section */
.lab-section {
background: white;
border-radius: 20px;
padding: 40px;
box-shadow: 0 10px 40px rgba(0,0,0,0.1);
margin-bottom: 40px;
}
.lab-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
margin-bottom: 40px;
}
.lab-stat {
text-align: center;
padding: 25px;
background: linear-gradient(135deg, #f5f7ff, #e8ecff);
border-radius: 12px;
transition: transform 0.3s;
}
.lab-stat:hover {
transform: scale(1.05);
}
.lab-stat-icon {
font-size: 40px;
margin-bottom: 10px;
}
.lab-stat-value {
font-size: 32px;
font-weight: 700;
color: #667eea;
margin-bottom: 5px;
}
.lab-stat-label {
color: #666;
font-size: 14px;
}
/* City Tabs */
.city-tabs {
display: flex;
gap: 15px;
margin-bottom: 30px;
flex-wrap: wrap;
}
.city-tab {
padding: 12px 30px;
border: 2px solid #e0e0e0;
border-radius: 25px;
background: white;
cursor: pointer;
transition: all 0.3s;
font-weight: 500;
}
.city-tab.active {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
border-color: transparent;
}
.city-tab:hover:not(.active) {
border-color: #667eea;
color: #667eea;
}
/* Server Image */
.server-display {
background: #1a1a1a;
border-radius: 16px;
padding: 30px;
text-align: center;
position: relative;
overflow: hidden;
}
.server-display::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
animation: shimmer 3s infinite;
}
@keyframes shimmer {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
.server-metrics {
display: flex;
justify-content: space-around;
margin-top: 20px;
position: relative;
z-index: 1;
}
.server-metric {
text-align: center;
color: white;
}
.server-metric-label {
font-size: 12px;
opacity: 0.7;
margin-bottom: 5px;
}
.server-metric-value {
font-size: 24px;
font-weight: 700;
}
/* Roadmap */
.roadmap {
background: white;
border-radius: 20px;
padding: 40px;
box-shadow: 0 10px 40px rgba(0,0,0,0.1);
margin-bottom: 40px;
}
.timeline {
position: relative;
padding-left: 50px;
}
.timeline::before {
content: '';
position: absolute;
left: 20px;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(180deg, #667eea, #764ba2);
}
.timeline-item {
position: relative;
margin-bottom: 40px;
padding-left: 30px;
}
.timeline-dot {
position: absolute;
left: -42px;
top: 5px;
width: 16px;
height: 16px;
background: white;
border: 4px solid #667eea;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
}
.timeline-content {
background: linear-gradient(135deg, #f5f7ff, #e8ecff);
padding: 20px;
border-radius: 12px;
border-left: 4px solid #667eea;
}
.timeline-date {
color: #667eea;
font-weight: 700;
margin-bottom: 8px;
}
.timeline-title {
font-size: 18px;
font-weight: 600;
color: #333;
margin-bottom: 5px;
}
.timeline-desc {
color: #666;
font-size: 14px;
}
/* Footer */
footer {
background: rgba(255, 255, 255, 0.95);
padding: 40px;
text-align: center;
color: #666;
margin-top: 60px;
}
@media (max-width: 768px) {
.charts-grid {
grid-template-columns: 1fr;
}
.hero h1 {
font-size: 36px;
}
nav {
flex-wrap: wrap;
gap: 15px;
}
}
</style>
</head>
<body>
<header>
<div class="header-content">
<div class="logo">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5zm0 18c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6z"/>
</svg>
Kirin先进测试中心
</div>
<nav>
<a href="#home">首页</a>
<a href="#testing">测试监测</a>
<a href="#protection">测试防护</a>
<a href="#datacenter">数据中心</a>
<a href="#lab">数字化实验室</a>
<a href="#services">智能服务</a>
</nav>
</div>
</header>
<div class="hero">
<div class="hero-content">
<h1>智能测试 · 未来已来</h1>
<p>打造全球领先的数字化测试平台，赋能企业创新发展</p>
</div>
</div>
<div class="container">
<!-- Stats Cards -->
<div class="stats-grid">
<div class="stat-card">
<div class="stat-icon">📅</div>
<div class="stat-label">无人代理车</div>
<div class="stat-value">10<span class="stat-unit">/30</span></div>
</div>
<div class="stat-card">
<div class="stat-icon">🚗</div>
<div class="stat-label">热门任务</div>
<div class="stat-value">2000</div>
</div>
<div class="stat-card">
<div class="stat-icon">📊</div>
<div class="stat-label">当前用例</div>
<div class="stat-value">3000</div>
</div>
<div class="stat-card">
<div class="stat-icon">⏱️</div>
<div class="stat-label">DTS量</div>
<div class="stat-value">350</div>
</div>
</div>
<!-- Charts Section -->
<div class="charts-section">
<h2 class="section-title">实时数据分析</h2>
<div class="charts-grid">
<div class="chart-container">
<canvas id="cityChart"></canvas>
</div>
<div class="chart-container">
<canvas id="performanceChart"></canvas>
</div>
</div>
</div>
<!-- Lab Section -->
<div class="lab-section">
<h2 class="section-title">数字化实验室</h2>
<div class="lab-stats">
<div class="lab-stat">
<div class="lab-stat-icon">🔬</div>
<div class="lab-stat-value">30</div>
<div class="lab-stat-label">检测项</div>
</div>
<div class="lab-stat">
<div class="lab-stat-icon">📝</div>
<div class="lab-stat-value">1000</div>
<div class="lab-stat-label">用例数</div>
</div>
<div class="lab-stat">
<div class="lab-stat-icon">✅</div>
<div class="lab-stat-value">619</div>
<div class="lab-stat-label">测试样本</div>
</div>
<div class="lab-stat">
<div class="lab-stat-icon">📈</div>
<div class="lab-stat-value">80%</div>
<div class="lab-stat-label">样板通过率</div>
</div>
</div>
<div class="city-tabs">
<div class="city-tab active">上海</div>
<div class="city-tab">南京</div>
<div class="city-tab">西安</div>
<div class="city-tab">重庆</div>
<div class="city-tab">深圳</div>
</div>
<div class="server-display">
<div style="color: white; font-size: 48px; margin: 40px 0;">🖥️ 🖥️ 🖥️</div>
<div class="server-metrics">
<div class="server-metric">
<div class="server-metric-label">在线机柜</div>
<div class="server-metric-value">800台</div>
</div>
<div class="server-metric">
<div class="server-metric-label">离线储备</div>
<div class="server-metric-value">100台</div>
</div>
<div class="server-metric">
<div class="server-metric-label">CPU利用率</div>
<div class="server-metric-value">78%</div>
</div>
<div class="server-metric">
<div class="server-metric-label">运行时长</div>
<div class="server-metric-value">24/7</div>
</div>
</div>
</div>
</div>
<!-- Roadmap -->
<div class="roadmap">
<h2 class="section-title">发展路标</h2>
<div class="timeline">
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-content">
<div class="timeline-date">2025 Q1</div>
<div class="timeline-title">AI智能测试引擎上线</div>
<div class="timeline-desc">基于机器学习的自动化测试用例生成，提升测试效率300%</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-content">
<div class="timeline-date">2025 Q2</div>
<div class="timeline-title">全球节点部署完成</div>
<div class="timeline-desc">覆盖北美、欧洲、亚太15个核心城市，实现全球化测试网络</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-content">
<div class="timeline-date">2025 Q3</div>
<div class="timeline-title">区块链测试溯源系统</div>
<div class="timeline-desc">引入区块链技术，确保测试数据不可篡改，提升测试可信度</div>
</div>
</div>
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-content">
<div class="timeline-date">2025 Q4</div>
<div class="timeline-title">量子计算实验室启动</div>
<div class="timeline-desc">建立量子计算测试实验室，探索下一代测试技术前沿</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<p>© 2025 Kirin先进测试中心 | 创新驱动 · 质量为先</p>
<p style="margin-top: 10px; font-size: 14px;">联系我们: service@kirin-test.com | 400-888-8888</p>
</footer>
<script>
// City Distribution Chart
const cityCtx = document.getElementById('cityChart').getContext('2d');
new Chart(cityCtx, {
type: 'doughnut',
data: {
labels: ['Baltimore', 'Charlotte', 'Charlotte Pro', 'Changsha', 'Nashville', 'Xian', 'Burbank', 'Denver'],
datasets: [{
data: [14.6, 14.41, 14.32, 14.13, 14.61, 7.60, 6.92, 13.55],
backgroundColor: [
'#667eea', '#48bb78', '#ed64a6', '#f6ad55',
'#4299e1', '#9f7aea', '#fc8181', '#38b2ac'
],
borderWidth: 2,
borderColor: '#fff'
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'right',
labels: {
padding: 15,
font: { size: 12 }
}
},
title: {
display: true,
text: '城市分布占比',
font: { size: 16, weight: 'bold' }
}
}
}
});
// Performance Bar Chart
const perfCtx = document.getElementById('performanceChart').getContext('2d');
new Chart(perfCtx, {
type: 'bar',
data: {
labels: ['Nanchang', 'Baltimore', 'Xian', 'Changde', 'Charlotte', 'Changsha', 'Nashville'],
datasets: [{
label: '通过率',
data: [750, 800, 850, 650, 1050, 900, 1150],
backgroundColor: 'rgba(102, 126, 234, 0.8)',
borderColor: '#667eea',
borderWidth: 2,
borderRadius: 8
}, {
label: '任务量',
data: [850, 780, 820, 700, 1000, 950, 1100],
backgroundColor: 'rgba(72, 187, 120, 0.8)',
borderColor: '#48bb78',
borderWidth: 2,
borderRadius: 8
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'top',
labels: {
padding: 15,
font: { size: 12 }
}
},
title: {
display: true,
text: '城市性能统计',
font: { size: 16, weight: 'bold' }
}
},
scales: {
y: {
beginAtZero: true,
grid: {
color: 'rgba(0, 0, 0, 0.05)'
}
},
x: {
grid: {
display: false
}
}
}
}
});
// City tabs interaction
document.querySelectorAll('.city-tab').forEach(tab => {
tab.addEventListener('click', function() {
document.querySelectorAll('.city-tab').forEach(t => t.classList.remove('active'));
this.classList.add('active');
});
});
</script>
</body>
</html>