234 lines
6.1 KiB
Vue
234 lines
6.1 KiB
Vue
<template>
|
||
<section class="company-timeline">
|
||
<!-- 标题区 -->
|
||
<div class="timeline-header">
|
||
<h2 class="main-title">公司发展历程</h2>
|
||
<p class="sub-title">凝聚着汗水与智慧，铸就今日辉煌</p>
|
||
</div>
|
||
|
||
<!-- 时间轴容器（控制曲线、飞机、阶段定位） -->
|
||
<section class="timeline-section">
|
||
<div class="timeline-container">
|
||
<!-- 发展阶段 -->
|
||
<div v-for="(item, index) in timelineData" :key="index" class="timeline-stage" :class="`stage-${index}`">
|
||
<div class="stage-period">{{ item.period }}</div>
|
||
<div class="stage-line"></div>
|
||
<h3 class="stage-title">{{ item.title }}</h3>
|
||
<ul class="stage-content">
|
||
<li v-for="(line, i) in item.content" :key="i">{{ line }}</li>
|
||
</ul>
|
||
<!-- <div class="_line"></div>-->
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</section>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
// 公司发展历程数据结构
|
||
const timelineData = [
|
||
{
|
||
period: '2003-2009',
|
||
title: '创新奠基期',
|
||
content: [
|
||
'·核心技术突破：创始人融合中医世家传承、西医临床医学及营养学理论，独创「人体驾照」非医非药康复体系。',
|
||
'·技术预研储备：同步开展技术底层研究，构建身心健康精准数据分析模型。'
|
||
]
|
||
},
|
||
{
|
||
period: '2019-2022',
|
||
title: '体系升级期',
|
||
content: [
|
||
'·资本助力：获磐石资本连续加注，投入技术研发与服务体系。',
|
||
'·建设智能系统开发：启动七维AI康复系统研发，完成核心算法验证。',
|
||
'·服务标准化：构建三位一体教练体系(客服/教练/副教练)，实现服务可复制。'
|
||
]
|
||
},
|
||
{
|
||
period: '2022-2024',
|
||
title: '智能深化期',
|
||
content: [
|
||
'·技术认证突破：七维AI康复系统通过ISO9001:2015认证',
|
||
'·知识产权布局：累计获得15项发明专利(持续申报中)',
|
||
'·权威资质认证：AAA级企业信用认证(GB/T23794-2023) 五星级服务认证(GB/T 27922-2011)'
|
||
]
|
||
},
|
||
{
|
||
period: '2024-2025',
|
||
title: '生态拓展期',
|
||
content: [
|
||
'·智能升级：推出身心健康AI全息图谱系统(基于多年算法迭代)',
|
||
'·标准建设：主导制定AI健康国家标准(T/UNP280-2024)',
|
||
'·政企协同：与多家政府单位达成战略合作，开展智能健康管理试点'
|
||
]
|
||
}
|
||
]
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.company-timeline {
|
||
padding: 80px 20px;
|
||
border-top: 50px solid #f5f7fe;
|
||
text-align: center;
|
||
|
||
// 标题区样式
|
||
.timeline-header {
|
||
margin-bottom: 50px;
|
||
.main-title {
|
||
font-size: 28px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 10px;
|
||
}
|
||
.sub-title {
|
||
font-size: 14px;
|
||
color: #999;
|
||
}
|
||
}
|
||
}
|
||
.timeline-section {
|
||
padding: 50px 192px;
|
||
background-image: url('https://images.health.ufutx.com/202506/20/26691a92ed7a9b632cd635c08e35fb17.png');
|
||
background-size: cover;
|
||
background-repeat: no-repeat;
|
||
|
||
// 核心容器：提供定位参考
|
||
.timeline-container {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 955px; // 固定高度承载绝对定位
|
||
margin: 0 auto;
|
||
overflow: hidden;
|
||
|
||
// 阶段通用样式
|
||
.timeline-stage {
|
||
position: absolute;
|
||
width: 260px;
|
||
display: grid;
|
||
.stage-period {
|
||
font-size: 36px;
|
||
color: #313fa8;
|
||
font-weight: bold;
|
||
}
|
||
.stage-line {
|
||
width: 64px;
|
||
height: 4px;
|
||
background: #b2b7df;
|
||
}
|
||
.stage-title {
|
||
font-size: 32px;
|
||
font-weight: 600;
|
||
color: #313fa8;
|
||
margin-top: 6px;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.stage-content {
|
||
list-style: none;
|
||
padding: 0;
|
||
font-size: 18px;
|
||
li {
|
||
font-size: 14px;
|
||
color: #666;
|
||
line-height: 34px;
|
||
position: relative;
|
||
padding-left: 12px;
|
||
&::before {
|
||
// 还原设计图的·符号
|
||
//content: '·';
|
||
//position: absolute;
|
||
//left: 0;
|
||
//color: #4b89dc;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 阶段精准定位（匹配设计图）
|
||
.stage-0 {
|
||
/* 左上：2003-2009 */
|
||
left: 0;
|
||
top: 0;
|
||
justify-items: end;
|
||
&:after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
right: -16px;
|
||
width: 2px;
|
||
height: 336px;
|
||
align-self: stretch;
|
||
background: linear-gradient(180deg, #2458c1 0%, rgba(36, 88, 193, 0) 100%);
|
||
}
|
||
}
|
||
.stage-1 {
|
||
/* 中下：2019-2022 */
|
||
left: 400px;
|
||
bottom: 0;
|
||
justify-items: start;
|
||
&:after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: -16px;
|
||
width: 2px;
|
||
height: 336px;
|
||
align-self: stretch;
|
||
background: linear-gradient(180deg, #2458c1 0%, rgba(36, 88, 193, 0) 100%);
|
||
}
|
||
}
|
||
.stage-2 {
|
||
/* 右上：2022-2024 */
|
||
left: 698px;
|
||
top: 0;
|
||
justify-items: end;
|
||
&:after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
right: -16px;
|
||
width: 2px;
|
||
height: 336px;
|
||
align-self: stretch;
|
||
background: linear-gradient(180deg, #2458c1 0%, rgba(36, 88, 193, 0) 100%);
|
||
}
|
||
}
|
||
.stage-3 {
|
||
/* 右中：2024-2025 */
|
||
left: 1164px;
|
||
top: 309px;
|
||
justify-items: start;
|
||
&:after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: -16px;
|
||
width: 2px;
|
||
height: 336px;
|
||
align-self: stretch;
|
||
background: linear-gradient(180deg, #2458c1 0%, rgba(36, 88, 193, 0) 100%);
|
||
}
|
||
}
|
||
}
|
||
|
||
// 响应式适配（移动端垂直排列）
|
||
@media (max-width: 768px) {
|
||
.timeline-container {
|
||
height: auto; // 取消固定高度
|
||
padding: 40px 0;
|
||
|
||
//.timeline-stage {
|
||
// position: relative; // 重置定位
|
||
// margin: 40px auto; // 垂直分布
|
||
// width: 80%; // 适配小屏宽度
|
||
// left: auto;
|
||
// right: auto;
|
||
// top: auto;
|
||
// bottom: auto;
|
||
// transform: none; // 清除变换
|
||
//}
|
||
}
|
||
}
|
||
}
|
||
</style>
|