UTL Development History
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Inter", Arial, Helvetica, sans-serif;
}
.timeline-section {
width: 100%;
min-height: 560px;
background:
radial-gradient(circle at 20% 20%, rgba(54, 195, 176, 0.08), transparent 26%),
radial-gradient(circle at 80% 10%, rgba(20, 120, 200, 0.10), transparent 28%),
linear-gradient(135deg, #1f2428 0%, #2a3035 50%, #24292d 100%);
color: #ffffff;
position: relative;
overflow: hidden;
padding: 70px 50px 90px;
}
.timeline-section::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
background-size: 34px 34px;
pointer-events: none;
opacity: 0.55;
}
.container {
max-width: 1280px;
margin: 0 auto;
position: relative;
z-index: 2;
}
/* 主内容区：左侧大年份 + 右侧事件 */
.timeline-main {
display: grid;
grid-template-columns: 260px 1fr;
gap: 70px;
align-items: flex-start;
margin-bottom: 90px;
}
.year-display {
font-size: 148px;
font-weight: 800;
line-height: 1;
letter-spacing: -4px;
background: linear-gradient(90deg, #36c3b0 0%, #40b8cc 45%, #5499e5 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
white-space: nowrap;
}
.event-list {
padding-top: 28px;
display: flex;
flex-direction: column;
gap: 18px;
}
.event-item {
display: flex;
align-items: flex-start;
gap: 14px;
font-size: 19px;
line-height: 1.7;
color: #e7ecf0;
}
.event-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #36c3b0;
margin-top: 9px;
flex-shrink: 0;
box-shadow: 0 0 0 4px rgba(54, 195, 176, 0.18);
}
.empty-tip {
color: #9aa5ad;
font-style: italic;
}
/* 底部时间轴 */
.timeline-nav {
display: flex;
align-items: center;
gap: 18px;
}
.arrow-btn {
width: 48px;
height: 48px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.04);
color: #d8e1e7;
font-size: 20px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.25s ease;
flex-shrink: 0;
}
.arrow-btn:hover {
border-color: #36c3b0;
color: #36c3b0;
background: rgba(54, 195, 176, 0.08);
}
.arrow-btn:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.timeline-track {
flex: 1;
position: relative;
height: 2px;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0.06),
rgba(255, 255, 255, 0.18),
rgba(255, 255, 255, 0.06)
);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 22px;
}
.year-node {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
background: transparent;
border: none;
color: inherit;
}
.node-circle {
width: 14px;
height: 14px;
border-radius: 50%;
border: 2px solid #9aa5ad;
background: #2a3035;
transition: all 0.25s ease;
z-index: 2;
}
.year-node.active .node-circle {
border-color: #36c3b0;
background: #36c3b0;
box-shadow:
0 0 0 5px rgba(54, 195, 176, 0.18),
0 0 18px rgba(54, 195, 176, 0.45);
}
.year-label {
position: absolute;
top: -30px;
font-size: 14px;
color: #9aa5ad;
white-space: nowrap;
transition: color 0.25s ease;
}
.year-node.active .year-label {
color: #ffffff;
font-weight: 600;
}
.year-node:hover .year-label {
color: #cfd8de;
}
/* 淡入动画 */
.fade-in {
animation: fadeIn 0.4s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* 移动端适配 */
@media (max-width: 900px) {
.timeline-main {
grid-template-columns: 1fr;
gap: 30px;
}
.year-display {
font-size: 96px;
}
.timeline-section {
padding: 50px 24px 70px;
}
.year-label {
font-size: 12px;
top: -24px;
}
}
2006
Shenzhen UTL was established and commenced mass production
const milestones = [
{
year: "2006",
events: [
"Shenzhen UTL was established and commenced mass production"
]
},
{
year: "2010",
events: [
"Phase‑I of the Ji’an UTL Industrial Park went into operation, with a daily capacity of 500,000 cells"
]
},
{
year: "2012",
events: [
"Awarded the National High‑Tech Enterprise qualification and ISO 14001 certification"
]
},
{
year: "2013",
events: [
"Partnered with Audi to develop 85°C lithium‑polymer power battery products"
]
},
{
year: "2018",
events: [
"Launched mass production of 18650 lithium‑ion cells"
]
},
{
year: "2019",
events: [
"Groundbreaking for the new industrial park; the facility was commissioned in Q2 2021"
]
},
{
year: "2020",
events: [
"Obtained ISO 13485 Medical Device Quality Management System Certification"
]
},
{
year: "2023",
events: [
"Ji’an UTL was selected as a national‑level \"Little Giant\" enterprise for SRDI.",
"Successful iteration of the ERP system and official launch of the MES system."
]
},
{
year: "2024",
events: []
},
{
year: "2025",
events: []
},
{
year: "2026",
events: []
}
];
let currentIndex = 0;
const yearDisplay = document.getElementById("yearDisplay");
const eventList = document.getElementById("eventList");
const timelineTrack = document.getElementById("timelineTrack");
const prevBtn = document.getElementById("prevBtn");
const nextBtn = document.getElementById("nextBtn");
// 渲染底部时间轴节点
function renderTrack() {
timelineTrack.innerHTML = "";
milestones.forEach((item, index) => {
const node = document.createElement("button");
node.className = "year-node";
if (index === currentIndex) node.classList.add("active");
node.innerHTML = `
${item.year}
`;
node.addEventListener("click", () => {
currentIndex = index;
updateTimeline();
});
timelineTrack.appendChild(node);
});
}
// 更新主内容
function updateTimeline() {
const current = milestones[currentIndex];
yearDisplay.textContent = current.year;
yearDisplay.classList.remove("fade-in");
void yearDisplay.offsetWidth;
yearDisplay.classList.add("fade-in");
eventList.innerHTML = "";
if (current.events.length === 0) {
const emptyItem = document.createElement("div");
emptyItem.className = "event-item fade-in";
emptyItem.innerHTML = `
Upcoming milestone
`;
eventList.appendChild(emptyItem);
} else {
current.events.forEach((event, i) => {
const eventItem = document.createElement("div");
eventItem.className = "event-item";
if (i === 0) eventItem.classList.add("fade-in");
eventItem.innerHTML = `
${event}
`;
eventList.appendChild(eventItem);
});
}
renderTrack();
updateArrowButtons();
}
// 更新箭头按钮状态
function updateArrowButtons() {
prevBtn.disabled = currentIndex === 0;
nextBtn.disabled = currentIndex === milestones.length - 1;
}
// 上一年
prevBtn.addEventListener("click", () => {
if (currentIndex > 0) {
currentIndex--;
updateTimeline();
}
});
// 下一年
nextBtn.addEventListener("click", () => {
if (currentIndex < milestones.length - 1) {
currentIndex++;
updateTimeline();
}
});
// 初始化
updateTimeline();
Your Website Name
