<template>
<div >
<!-- class="container" -->
<div v-for="(item,index) in combinationList" >
<div style="display:flex;justify-content:space-between;">
<div v-for="(it,idx) in item.items" :key="idx">
<div
class="item"
:key="index" >
<div style="display:flex;">
<tile
:key="idx"
:id="it.id"
v-model="item.items[idx]"></tile>
// v-if="(item.items.length-1)!=idx" 最后一个不显示 向左指向性
<div class="arrowContent" v-if="(item.items.length-1)!=idx">
<el-image
style=" width:50px; height:50px;"
class="arrowicone"
src="/img/project/rightflat.png"
:fit="fit">
</el-image>
</div>
</div>
</div>
</div>
</div>
// v-if="(combinationList.length-1)!=index" 判断最后一个不显示 尾首指向线
<pointingSrrow v-if="(combinationList.length-1)!=index"></pointingSrrow>
</div>
</div>
</template>
<script>
import func from "@/util/func";
export default {
props: {
},
components: {
tile: () => import('@/views/pjm/lifecycle/components/phases/components/phase/tileV2'),
},
data() {
return {
data: [{n:1},{n:2},{n:3},{n:4},{n:5},{n:6},{n:1},{n:2},{n:3},{n:4},{n:5},{n:6},{n:1},{n:2},{n:3},{n:4},{n:5},{n:6}], //原数据
combinationList:[ //结构后的数据
{group:0,items:[{n:1},{n:2},{n:3},]},
{group:1,items:[{n:1},{n:2},{n:3},]},
{group:2,items:[{n:1},{n:2},{n:3},]},
],
}
},
watch: {
},
computed: {
},
created() {
},
mounted() {
},
beforeDestroy() {
},
methods: {
setData() {
this.data = this.value.filter(item => {
return item.pid === 0;
});
console.log('---transformArray---',func.transformArray(this.data,5))
this.combinationList=func.transformArray(this.data,5) //结构后的数据
console.log(' this.data----', this.data)
},
transformArray(array, size) {
const result = [];
for (let i = 0; i < array.length; i += size) {
const chunk = array.slice(i, i + size);
result.push({ group: i / size, items: chunk }); // 这里将当前组的索引作为键
}
return result;
},
}
};
</script>
<style lang="scss" scoped>
.container {
// box-sizing: border-box;
display: flex;
flex-wrap: wrap;
.item {
//box-sizing: border-box;
//flex: none;
//padding: 10px;
// position: relative;
width:20%;
// padding-bottom: 20px;
}
}
.arrowContent{
width:100%;
position: relative;
.arrowicone{
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 50%;
transform: translate(100%, -50%);
}
}
</style>
tile 组件 纯样式 ```
<template>
<el-card
:shadow="shadow"
:class="phaseClass"
@click.native.stop="handleClick"
>
<div class="container" :class="{ 'unActive': isUnActive}">
<div v-if="!isUnActive">
<div v-if="isUnAuth" :class="{'masking unAuth':isUnAuth }">
<i class=" el-icon-lock"> 暂无权限</i>
</div>
</div>
<div class="badges">
<el-badge type="danger" :value="count" v-if="count" class="top-end"></el-badge>
</div>
<div class="content">
<i :class="phaseIcon"></i>
<div>{{phaseName }}</div>
<div>{{phaseDuration=='' ?'无 开始时间-无 结束时间':phaseDuration}}</div>
</div>
</div>
</el-card>
</template>
<script>
export default {
components: {
},
data() {
return {
}
},
watch: {
},
computed: {
},
created() {
},
mounted() {
},
beforeDestroy() {
},
methods: {
},
}
};
</script>
<style lang="scss" scoped>
.el-card {
overflow: visible;
::v-deep .el-card__body {
padding: 0;
}
}
.unActive {
color: #bcbec2;
border-color: #e9e9eb;
background: #f4f4f5 linear-gradient(
to bottom right,
rgba(244, 244, 245, 0.1) 0%,
rgba(244, 244, 245, 0.1) calc(50% - 2px),
rgba(200, 200, 200, 1) 50%,
rgba(244, 244, 245, 0.1) calc(50% + 2px),
rgba(244, 244, 245, 0.1) 100%
);
cursor: default !important;
}
.masking {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
right: 0;
left: 0;
border-radius: 1px;
color: #fff;
padding: 2px 0;
}
.masking.unAuth {
bottom: 0;
background-color: rgba(0, 0, 0, 0.4);
cursor: not-allowed;
}
.container {
position: relative;
padding: 10px;
cursor: pointer;
.badges {
> .el-badge {
position: absolute;
::v-deep sup {
top: 0
}
}
> .el-badge.top-start {
top: 0;
left: 0;
transform: translateY(-50%);
}
> .el-badge.top {
top: 0;
left: 50%;
transform: translate(-50%, -50%);
}
> .el-badge.top-end {
top: 0;
right: 0;
transform: translateY(-50%);
}
> .el-badge.left {
top: 50%;
left: 0;
transform: translateY(-50%);
}
> .el-badge.right {
top: 50%;
right: 0;
transform: translateY(-50%);
}
> .el-badge.bottom-start {
bottom: 0;
left: 0;
transform: translateY(50%);
}
> .el-badge.bottom {
bottom: 0;
left: 50%;
transform: translate(-50%, 50%);
}
> .el-badge.bottom-end {
bottom: 0;
right: 0;
transform: translateY(50%);
}
}
.content {
text-align: center;
line-height: 1.5;
> .iconfont-custom {
font-size: 52px;
}
div {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.info {
color: #909399;
background: #f4f4f5;
border-color: #d3d4d6;
}
.normal {
color: #409eff;
background: #ecf5ff;
border-color: #b3d8ff;
}
.success {
color: #67c23a;
background: #f0f9eb;
border-color: #c2e7b0;
}
.warning {
color: #f56c6c;
}
.danger {
color: #f56c6c;
background: #fef0f0;
border-color: #fbc4c4;
}
}
</style>
###效果图
