188 lines
3.7 KiB
Vue
188 lines
3.7 KiB
Vue
<template>
|
||
<div class="timeline-section">
|
||
<h2 class="section-title">
|
||
<i class="timeline-icon"></i>
|
||
个人履历
|
||
</h2>
|
||
<div class="timeline">
|
||
<!-- 时间节点 -->
|
||
<div class="timeline-items">
|
||
<div v-for="(item, index) in timelineData" :key="index" :class="['timeline-item', index % 2 === 0 ? 'top' : 'bottom']">
|
||
<div class="content">
|
||
<div class="year">{{ item.year }}</div>
|
||
<div class="description">{{ item.description }}</div>
|
||
</div>
|
||
<div class="dot" :class="{ active: index === 0 }"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref } from 'vue'
|
||
|
||
const timelineData = ref([
|
||
{
|
||
year: '2020年',
|
||
description: '新创设计21号项目设计~某月某空中机',
|
||
},
|
||
{
|
||
year: '2021年',
|
||
description: '南京工业大学机器人实验室项目',
|
||
},
|
||
{
|
||
year: '2022年',
|
||
description: '新创设计21号项目设计~某月某空中机',
|
||
},
|
||
{
|
||
year: '2023年',
|
||
description: '南京工业大学机器人实验室项目',
|
||
},
|
||
{
|
||
year: '2023年',
|
||
description: '南京工业大学机器人实验室项目',
|
||
},
|
||
{
|
||
year: '2023年',
|
||
description: '南京工业大学机器人实验室项目',
|
||
},
|
||
// 可以继续添加更多数据...
|
||
])
|
||
</script>
|
||
|
||
<style scoped>
|
||
.timeline-section {
|
||
margin: 30px 0;
|
||
padding: 20px;
|
||
}
|
||
|
||
.section-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
margin-bottom: 30px;
|
||
font-size: 18px;
|
||
color: #333;
|
||
}
|
||
|
||
.timeline {
|
||
position: relative;
|
||
padding: 40px 0;
|
||
}
|
||
|
||
.timeline-items {
|
||
position: relative;
|
||
display: grid; /* 改用grid布局 */
|
||
grid-template-columns: repeat(4, 1fr); /* 4列 */
|
||
gap: 60px 20px; /* 行间距60px，列间距20px */
|
||
z-index: 2;
|
||
}
|
||
|
||
.timeline-item {
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
min-width: 200px;
|
||
}
|
||
|
||
/* 时间轴横线 - 为每一行创建独立的线 */
|
||
.timeline-item::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: -10px;
|
||
right: -10px;
|
||
top: 50%;
|
||
height: 2px;
|
||
background-color: #e8f3ff;
|
||
z-index: 1;
|
||
}
|
||
|
||
/* 连接相邻项目的横线 */
|
||
.timeline-item::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: 50%;
|
||
right: -50%;
|
||
top: 50%;
|
||
height: 2px;
|
||
background-color: #e8f3ff;
|
||
z-index: 1;
|
||
}
|
||
|
||
/* 最后一个项目不需要连接线 */
|
||
.timeline-item:last-child::after {
|
||
display: none;
|
||
}
|
||
|
||
.timeline-item.top {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.timeline-item.bottom {
|
||
flex-direction: column-reverse;
|
||
}
|
||
|
||
.dot {
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 50%;
|
||
background-color: #fff;
|
||
border: 2px solid #005be5;
|
||
margin: 15px 0;
|
||
z-index: 2;
|
||
}
|
||
|
||
.dot.active {
|
||
background-color: #005be5;
|
||
}
|
||
|
||
.content {
|
||
text-align: center;
|
||
background-color: #fff;
|
||
padding: 0 10px;
|
||
width: 100%;
|
||
}
|
||
|
||
.top .content {
|
||
padding-bottom: 20px;
|
||
}
|
||
|
||
.bottom .content {
|
||
padding-top: 20px;
|
||
}
|
||
|
||
.year {
|
||
font-size: 16px;
|
||
color: #005be5;
|
||
font-weight: 500;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.description {
|
||
font-size: 14px;
|
||
color: #666;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* 响应式布局 */
|
||
@media screen and (max-width: 1200px) {
|
||
.timeline-items {
|
||
grid-template-columns: repeat(3, 1fr); /* 3列 */
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 900px) {
|
||
.timeline-items {
|
||
grid-template-columns: repeat(2, 1fr); /* 2列 */
|
||
}
|
||
}
|
||
|
||
@media screen and (max-width: 600px) {
|
||
.timeline-items {
|
||
grid-template-columns: 1fr; /* 1列 */
|
||
}
|
||
}
|
||
</style>
|