原型图:
思路:
1、因为奇数行要从左往右排列,偶数行要从右往左排列,所以我将原数据重组为二维数组,方便判断。第一、二、三行放在外层循环,每行的一、二、三列为为内层循环
2、箭头规律:2,3, 8,9, 14,15都为向左的箭头,5,6, 11,12都为向右箭头,4,7,10,13都为向上箭头,根据计算,给每块增加标识,用于旋转图标的角度
全部源码:
<template>
<div style="padding:0 20px;">
<div class="flex " v-for="(item, index) of assetsList" :key="index" :class="(index % 2) == 0 ? '' : 'assets_align_right' ">
<div class="assetsInfo" v-for="(el, d) of item" :key="d">
<div class="assetsBox">
<svg class="arrow" aria-hidden="true" v-if="el.towards"
:class="el.towards == 'top' ? 'topWards' : (el.towards == 'left' ? 'leftWards' : 'Wards')">
<use xlink:href="#el-icon-myjt4" />
</svg>
<div class="replaceTop replace-row">
<div class="caption">{{ el.assetsName }}</div>
<div class="time">2022-23-1</div>
</div>
<div class="replaceDeatils">
<div class="replace-row">
<div class="title">替换资产</div>
<div class="content">2022-23-1</div>
</div>
<div class="replace-row">
<div class="title">替换资产</div>
<div class="content">2022-23-1</div>
</div>
<div class="replace-row">
<div class="title">替换资产</div>
<div class="content">2022-23-1</div>
</div>
<div class="replace-row">
<div class="title">替换资产</div>
<div class="content">2022-23-1</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
assetsList: [], // 数据
}
},
created() {
// 正常数据源
let list = [
{ assetsName: '运维主机1', },
{ assetsName: '运维主机2', },
{ assetsName: '运维主机3', },
{ assetsName: '运维主机4', },
{ assetsName: '运维主机5', },
{ assetsName: '运维主机6', },
{ assetsName: '运维主机7', },
{ assetsName: '运维主机8', },
{ assetsName: '运维主机9', },
]
list.forEach((item, index) => {
let bit = index + 1 // 第几位
if (bit == 1){
item.towards = ''
} else if (bit == 2 || this.isInteger((bit - 2) / 6) || bit == 3 || this.isInteger((bit - 3) / 6)) {
// 计算箭头向左的朝向,找规律2,3, 8,9, 14,15都为向左的箭头
item.towards = 'left'
} else if (bit == 5 || this.isInteger((bit - 5) / 6) || bit == 6 || this.isInteger((bit - 6) / 6) ) {
item.towards = 'right' // 5,6, 11,12
} else if (this.isInteger((bit - 1) % 3)) {
item.towards = 'top' // 4,7,10,13
}
})
var pairArr = this.spArray(3, list) // 将数组两两一组
this.assetsList = pairArr
console.log(pairArr)
},
methods: {
// 将数组进行分组 Q代表传过来的总数组,N为2时代表两两一组
spArray(N, Q) {
var R = []; var F
for (F = 0; F < Q.length;) {
R.push(Q.slice(F, F += N))
}
return R
},
// 判断是否为整数
isInteger(obj) {
return obj % 1 === 0
}
}
}
</script>
<style scoped lang="scss">
.flex {
display: flex;
}
.assets_align_right {
flex-direction: row-reverse;
justify-content: end;
}
.assetsInfo, .assetsInfo_right {
width: 33.3%;
padding: 30px 40px;
.replaceTop {
background: #ecf5fd;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
.caption {
width: 100px;
line-height: 36px;
font-size: 15px;
margin-left: 15px;
}
.time {
width: calc(100% - 130px);
font-size: 12px;
line-height: 33px;
color: #7a7a7a;
}
}
}
.assetsBox {
// background: #fff;
box-shadow: 0px 5px 10px 5px rgba(0, 0, 0, 0.06);
border-radius: 6px;
position: relative;
.replaceDeatils {
height: 100px;
}
.replace-row {
display: flex;
flex-wrap: wrap;
.title {
width: 100px;
color: #7a7a7a;
line-height: 24px;
margin-left: 15px;
}
.content {
margin-right: 15px;
line-height: 24px;
width: calc(100% - 130px);
}
}
.arrow {
position: absolute;
width: 22px;
height: 40px;
}
.leftWards {
top: 47px;
left: -57px;
transform: rotate(180deg);
}
.topWards {
top: -50px;
left: 43%;
transform: rotate(270deg);
}
.Wards {
top: 47px;
right: -57px;
}
}
</style>