需求初衷：现有组件库没法自定义步骤条，自身通过css伪元素的样式进行设计，灵活运用css3特性，供日后自定义步骤条设计思路，动态渲染
vue2代码片段：基本都是比较基础的布局
<template>
<div class="year-container">
<div class="year-header">
<div class="year-title">
<div class="year-name">
<div class="big-name">发展历程</div>
<div class="small-name">Our History</div>
</div>
</div>
<div class="name-right">
<div class="right-bgr"></div>
<div class="right-bgl"></div>
</div>
</div>
<div class="year-line">
<div class="line-left"></div>
<div class="line-right"></div>
</div>
<div class="main">
<div class="content">
<div class="years">2022年</div>
<div class="circle">
<h2></h2>
<span></span>
<div class="triangle"></div>
</div>
<div class="right-line"></div>
<div class="right-content">
<div class="right-content-left">
<div class="left-title">未来</div>
<div class="left-line"></div>
<ul class="left-content">
<li>开拓，从未止步；未来，不忘初心。</li>
</ul>
</div>
<img class="img" :src="nowImg" />
</div>
</div>
<div
class="content"
style="margin-top: 40px"
v-for="(item, index) in developmentCourse"
:key="index"
>
<div class="years">{{ item.year }}</div>
<div class="child-circle">
<h2></h2>
<span></span>
</div>
<div class="right-line"></div>
<div class="right-content">
<div class="right-content-left">
<div class="left-title">{{ item.title }}</div>
<div class="left-line"></div>
<ul
class="left-content"
v-for="(itemA, index) in item.list"
:key="index"
>
<li>{{ itemA.name }}</li>
</ul>
</div>
<img class="img" :src="item.image" />
</div>
</div>
</div>
</div>
</template>
<script>
export default {
components: {},
props: {},
data() {
return {
nowImg: require('@/assets/development1.png'),
developmentCourse: [
{
title: '公司发展',
year: '2021年',
list: [
{ name: '承担生物药企信息管理系统项目建设并协助企业新药上市' },
{
name:
'获批承担省部省部共建中医湿证国家重点实验室信息系统平台建设',
},
{
name:
'组织编写人卫出版社《生物样本库信息管理系统功能设计与实践》专著',
},
],
image: require('@/assets/development2.png'),
},
{
title: '公司成长',
year: '2020年',
list: [
{
name:
'承担全国第一家通过ISO20387认可的综合性医院生物样本库信息管理系统建设',
},
{
name: '承担“国家青藏高原动物资源共享平台”建设',
},
{
name: '公司第一次参与行业相关国家标准制订',
},
],
image: require('@/assets/development3.png'),
},
{
title: '公司初创',
year: '2019年',
list: [
{ name: '申请公司第一个发明专利' },
{
name: '获得公司第一个高新产品证书',
},
],
image: require('@/assets/development2.png'),
},
{
title: '公司成立',
year: '2018年',
list: [{ name: '获得公司第一个软件著作权' }],
image: require('@/assets/development4.png'),
},
],
}
},
computed: {},
watch: {},
created() {},
mounted() {},
methods: {},
}
</script>
<style lang="scss" scoped>
.year-container {
display: flex;
flex-direction: column;
align-items: center;
background-color: #fff;
}
.year-header {
display: flex;
align-items: center;
justify-content: space-between;
width: 1200px;
margin-bottom: 7px;
.year-title {
display: flex;
flex-direction: column;
align-items: center;
.big-name {
font-size: 40px;
font-weight: bold;
color: #000000;
}
.small-name {
font-size: 16px;
color: #969696;
}
}
.name-right {
height: 37px;
display: flex;
.right-bgr {
width: 158px;
background: #2a5ce9;
}
.right-bgl {
width: 78px;
background: #21ceca;
}
}
}
.year-line {
display: flex;
margin-bottom: 157px;
height: 6px;
.line-left {
width: 800px;
background: #2a5ce9;
}
.line-right {
width: 400px;
background: #21ceca;
}
}
.main {
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
.content {
display: flex;
align-items: center;
.years {
font-size: 32px;
font-weight: bold;
color: #000000;
margin-right: 48px;
}
.right-content {
width: 791px;
height: 179px;
padding: 0 17px;
background: #f6f9ff;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 8px 8px 8px 8px;
.right-content-left {
.left-title {
font-size: 32px;
font-weight: bold;
color: #2a5ce9;
}
.left-line {
width: 518px;
height: 0px;
border: 1px solid #c3c3c3;
margin: 12px 0 23px;
}
.left-content {
font-size: 16px;
padding: 0;
color: #000000;
overflow: hidden;
li {
list-style: none;
padding: 0px;
margin: 0px;
}
li:before {
content: '';
display: inline-block;
width: 8px;
height: 8px;
background: #2a5ce9;
border-radius: 50%;
margin-right: 8px;
}
}
}
}
.img {
width: 187px;
height: 146px;
}
}
.right-line {
width: 107px;
height: 0px;
border: 2px solid #21ceca;
background-color: #21ceca;
}
.child-circle::before {
display: block;
content: '';
position: absolute;
top: -100px;
left: 50%;
width: 0px;
height: 100px;
border-left: 3px dashed #2a5ce9;
}
.child-circle::before {
display: block;
content: '';
position: absolute;
top: -176px;
left: 50%;
width: 0px;
height: 179px;
border-left: 3px dashed #2a5ce9;
}
.child-circle {
position: relative;
width: 33px;
height: 33px;
background: #2a5ce9;
border-radius: 50%;
}
.circle::before {
display: block;
content: '';
position: absolute;
top: -100px;
left: 50%;
width: 0px;
height: 100px;
border-left: 3px dashed #2a5ce9;
}
.circle {
position: relative;
width: 55px;
height: 55px;
border-radius: 50%;
background: #fff;
border: 2px solid #21ceca;
text-align: center;
margin: 0 auto;
h2 {
position: absolute;
top: 30%;
left: 50%;
z-index: 999;
transform: translateX(-50%);
}
span {
position: absolute;
top: 60%;
left: 50%;
z-index: 999;
transform: translateX(-50%);
}
.triangle {
width: 0;
height: 0;
top: -129px;
left: 50%;
position: absolute;
transform: translateX(-50%);
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 28px solid #2a5ce9;
}
}
.circle::after {
content: '';
width: 33px;
height: 33px;
background: #21ceca;
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
transform: translate(-50%, -50%);
z-index: 10;
}
}
</style>