思路: 左中右
html
<div class="line-box" style="padding-bottom: 30px; flex: 1;">
<div style="width: 100%; display: flex; position: relative;">
<!-- 左边 -->
<div style="width: 10%; margin-left: 30px">
<div>
<!-- 开头 -->
<span
data-v-jzl20210826=""
style="margin-top: 95px"
class="headerRadio"
></span>
<!-- 中间 -->
<span
v-for="(it, ii) in ((Index%2===0&&Index>1)?Math.floor(Index/2)-1:Math.floor(Index/2))"
:key="ii"
class="hingelisHeard"
style="margin-top: 190px"
></span>
<!-- 左指箭头 -->
<span
data-v-jzl20210826=""
v-if="Index%2==0"
style="margin-top: 190.5px; left: 1px"
class="hingeorgerHeard"
></span>
</div>
</div>
<!-- 中间 -->
<div style="width: 75%">
<!-- 数据 -->
<div v-for="(item, index) in experienceData" :key="index">
<div style="display:flex;">
<div
class="timeline"
v-for="v in item"
:key="v.id"
>
<div class="border"></div>
<!-- <div class="Nodes"></div> -->
<img src="@/assets/client/event/location.png" alt="">
<div class="timeNodes">
<p class="nodeTimes">
<span :title="v.abstractText">{{ v.abstractText }}</span>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- 右边 -->
<div style="width: 10%; margin-right: 30px">
<div>
<!-- 第一行 -->
<span class="hingelis" v-if="experienceData.length > 1"></span>
<span
data-v-jzl20210826=""
v-if="experienceData.length<=1"
class="hingeorger"
></span>
<!-- 第n行中间 -->
<span
v-for="(itl, iil) in Index>1?Math.floor(Index/2)-1:0" :key="iil"
class="hingelis"
style="margin-top: 190px"
></span>
<!-- 右指箭头 -->
<span
data-v-jzl20210826=""
v-if="(!(Index%2==0))&&Index>1"
style="margin-top: 190px"
class="hingeorger"
></span>
</div>
</div>
</div>
</div>
scss
<style scoped lang="scss">
.line-box {
$main-color: #a0bcec;
.timeline {
width: 100%;
height: 200px;
position: relative;
}
.border {
width: 101%;
border-bottom: 10px solid $main-color;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.Nodes {
// width: 8px;
// height: 8px;
// background: #fff;
// position: absolute;
// right: 35px;
// top: 50%;
// -webkit-transform: translate(0, -50%);
// transform: translate(0, -50%);
// border-radius: 50%;
}
img {
position: absolute;
top: 45%;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
right: 65px;
// right: 30px;
}
.timeNodes {
position: absolute;
right: 0px;
// right: -30px;
width: 140px;
top: 87%;
transform: translate(0, -80%);
}
.nodeTimelis {
width: 70px;
margin-bottom: 20px;
margin-left: 20px;
overflow: hidden;
word-break: keep-all;
white-space: nowrap;
text-overflow: ellipsis;
}
.nodeTimes {
width: 100%;
line-height: 1.7;
background-color: #f5f8fb;
padding: 3px 10px;
border-radius: 3px;
overflow: hidden;
-webkit-line-clamp: 3;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
font-size: 12px;
color: #606266;
}
.hingelis {
content: "";
display: block;
width: 100%;
height: 210px;
border: 10px solid $main-color;
border-radius: 0 50px 50px 0;
border-left: 0px;
margin-top: 95px;
}
.hingelisHeard {
content: "";
display: block;
width: 101%;
height: 210px;
border: 10px solid $main-color;
border-radius: 50px 0 0 50px;
border-right: 0px;
margin-top: 50px;
}
.hingeorger {
display: block;
width: 100%;
border-bottom: 10px solid $main-color;
margin: 95.1px 0;
position: relative;
}
.hingeorgerHeard {
display: block;
width: 100%;
border-bottom: 10px solid $main-color;
position: relative;
}
.hingeorgerHeard[data-v-jzl20210826]:after {
content: "";
position: absolute;
top: -4px;
left: -12px;
border-top: 10px solid transparent;
border-right: 12px solid $main-color;
border-bottom: 10px solid transparent;
}
.hingeorger[data-v-jzl20210826]:after {
content: "";
position: absolute;
top: -5px;
right: -12px;
border-top: 10px solid transparent;
border-left: 12px solid $main-color;
border-bottom: 10px solid transparent;
}
.headerRadio {
display: block;
width: 101%;
border-bottom: 10px solid $main-color;
position: relative;
}
.headerRadio[data-v-jzl20210826]:after {
// content: "";
// position: absolute;
// top: -4px;
// left: -2px;
// width: 1px;
// height: 1px;
// border-radius: 50%;
// background: $main-color;
// border: 5px solid $main-color;
// position: absolute;
// right: 35px;
// top: 50%;
// transform: translate(0, -50%);
}
}
</style>
js
<script>
export default {
props: {
experienceData: { // 在父组件中用toArr处理好的数组
required: true,
type: Array
},
Index: 0 // 数组experienceData的length
},
data () {
return {
}
},
activated () {
console.log('dayin', this.experienceData)
},
methods: {
toArr (list) {
const arr = []
for (let i=0; i<list.length; i+=3) {
arr.push(list.slice(i, i+3))
}
console.log('arr', arr)
return arr
}
},
watch: {
data: function (newVal, oldVal) {
this.experienceData = newVal
}
}
}
</script>
效果图