css实现简单时序图布局
<template>
<div id="app" >
<div class="grid">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</div>
<div class="colum">
<div class="bock">
<ul>
<li v-for="(item,index) in title" :key="index">{{item}}</li>
</ul>
</div>
<ul>
<li v-for="(item,index) in lineData" :key="index">
<span>{{item.timeLine}}</span>
<!-- <span :class="index===1?'lineWidth2 left1':index===2?'lineWidth3 left3':index===3?'lineWidth3 left4':''" class="text">{{item.text}}</span>
<img :class="index===1?'lineWidth2 left1':index===2?'lineWidth3 left3':index===3?'lineWidth3 left4':''" class="line" src="./img/line.png"> -->
<div class="step" :class="item.style">
<span class="text">{{item.text}}</span>
<div :class="item.style" class="arrow-right icon"></div>
</div>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data () {
return {
title: ['UE', 'ENB', 'BSC', 'MME', 'SGW', 'PGW', 'HSS'],
lineData: [
{
text: '登陆用户名',
style: 'lineWidth1 left1',
type: 1,
timeLine: '15:24:05 343391'
},
{
text: '登陆系统',
style: 'lineWidth2 left1',
type: 2,
timeLine: '15:24:05 343392'
},
{
text: '查看个人信息',
style: 'lineWidth2 left3',
type: 2,
timeLine: '15:24:05 343393'
},
{
text: '显示操作结果',
style: 'lineWidth3 left4',
type: 3,
timeLine: '15:24:05 343394'
},
{
text: '查看信息',
style: 'lineWidth3 left4',
type: 3,
timeLine: '15:24:05 343395'
},
{
text: '导出信息',
style: 'lineWidth3 left4',
type: 3,
timeLine: '15:24:05 343396'
},
{
text: '导出信息',
style: 'lineWidth3 left4',
type: 3,
timeLine: '15:24:05 343397'
},
{
text: '导出信息',
style: 'lineWidth3 left4',
type: 3,
timeLine: '15:24:05 343398'
},
{
text: '导出信息',
style: 'lineWidth3 left4',
type: 3,
timeLine: '15:24:05 343399'
},
{
text: '导出信息',
style: 'lineWidth3 left4',
type: 3,
timeLine: '15:24:05 3433910'
}, {
text: '导出信息',
style: 'lineWidth3 left4',
type: 3,
timeLine: '15:24:05 3433911'
},
{
text: '导出信息',
style: 'lineWidth3 left4',
type: 3,
timeLine: '15:24:05 3433912'
}
]
}
},
computed: {
// 计算属性的 getter
},
methods: {
},
created () {
},
mounted () {
}
}
</script>
<style scoped lang="less">
#app{
height: 100vh;
width: 100vw;
overflow: hidden;
position: relative;
}
.grid{
width:90%;
height:600px;
margin:1px auto;
border:solid 1px #333;
>ul li{
position: relative;
float:left;
width:12.5%;
height:600px;
box-sizing: border-box;
border-right: solid 1px #333;
&:last-child{
border-right:none!important;
}
}
}
.colum {
top:0;
left:5%;
position: absolute;
width:90%;
height:600px;
margin-top:2px;
>ul li {
width:100%;
height:40px;
>span{
display: block;
float: left;
width:12%;
height:40px;
line-height: 40px;
text-align: right;
}
}
}
.step{
width:calc(12.5% - 2px);
height:40px;
padding-top: 10px;
}
.text{
display: block;
width:100%;
text-align: center;
}
.lineWidth1{
width:calc(12.5% - 2px)!important;
}
.lineWidth2{
width:calc(25% - 2px)!important;
}
.lineWidth3{
width:calc(37.5% - 2px)!important;
}
.left1{
margin-left: calc(12.5% - 2px);
}
.left2{
margin-left: calc(25% - 2px);
}
.left3{
margin-left: calc(37.5% - 2px)
}
.left4{
margin-left: calc(50% - 2px)
}
.arrow-right.icon {
color: #000;
position: absolute;
margin-left: 2px;
margin-top: 10px;
width: calc(12.5% - 2px);
height: 1px;
background-color: currentColor;
}
.arrow-right.icon:before {
content: '';
position: absolute;
right: 1px;
top: -5px;
width: 10px;
height: 10px;
border-top: solid 1px currentColor;
border-right: solid 1px currentColor;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.bock{
width: 100%;
height:100px;
background: #fff;
>ul{
padding-top: 64px;
margin-left:3.8%;
li{
width: 6%;
height:34px;
line-height: 34px;
float: left;
margin: 0 0.8% 0 6%;
text-align: center;
border: 1px solid #333;
}
}
}
</style>
效果如下图
如果有什么方便的方法欢迎留言分享，谢谢！
