自定义时间轴组件样式

实现一个时间轴的样式，并且点击可以展开详情
效果图如下：

1.html

<div class='timeline-step'>
    <div
        class='time-list'
        v-for='(item, index) in timeList'
        :key='index'
    >
        <div class='left'>
            <img
                :src='require(`@assets/safety-analysis${item.attackType}.png`)'
                alt=''
            >
            <div class='connecting-line'></div>
        </div>
        <div class='right'>
            <div class='title-common'>
                <p>
                    <span>{{ item.time }}</span>
                    <span>{{ item.title }}</span>
                    <Icon
                        :custom="item.isShow?'bl-icon-arrow-down':'bl-icon-arrow-left'"
                        class='arrow'
                        @click='showDetail(item)'
                    />
                </p>
                <p :title='item.description'>{{ item.description }}</p>
            </div>
            <div v-if='item.isShow'>
                <Divider/>
                <div class='detail-info'>
                    <div>
                        <p>攻击类型</p>
                        <p>{{ item.type }}</p>
                    </div>
                    <div>
                        <p>源IP地址</p>
                        <p>{{ item.originIP }}</p>
                    </div>
                    <div>
                        <p>目的IP地址</p>
                        <p>{{ item.purposeIP }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

2.css

.timeline-step {
    position: absolute;
    overflow-y: auto;
    width: calc(100% - 16px);
    height: 554px;
    padding-right: 10px;

    .time-list {
        display: flex;

        .left {
            width: 38px;
            position: relative;

            img {
                width: 38px;
                height: 38px;
            }

            .connecting-line {
                width: 2px;
                height: calc(100% - 38px);
                position: absolute;
                top: 38px;
                left: 18px;
                background: #d8d8d8;
            }
        }

        .right {
            width: calc(100% - 42px);
            margin-left: 4px;
            margin-bottom: 16px;
            padding: 8px 12px 12px;
            background-color: #f5f5f5;

            .title-common {
                p:nth-of-type(1) {
                    height: 22px;
                    font-weight: bold;
                    position: relative;
                    color: rgba(0, 0, 0, 0.85);

                    span:nth-of-type(2) {
                        margin-left: 12px;
                    }

                    .arrow {
                        position: absolute;
                        right: 0;
                        top: 2px;
                        cursor: pointer;
                        color: rgba(0, 0, 0, 0.45);
                    }
                }

                p:nth-of-type(2) {
                    font-size: 12px;
                    margin-top: 4px;
                    color: rgba(0, 0, 0, 0.45);
                }
            }

            .ivu-divider-horizontal {
                margin: 8px 0;
            }

            .detail-info {
                display: flex;
                justify-content: space-between;

                > div {
                    flex: 1;
                    font-weight: bold;
                    font-size: 12px;

                    p:nth-of-type(1) {
                        font-weight: normal;
                        color: rgba(0, 0, 0, 0.45);
                    }
                }
            }

        }

        &:last-child {
            .connecting-line {
                width: 0;
            }

        }
    }
}

3.js

data () {
    return {
        timeList: [
            {
                title: '标题1',
                attackType: 'scout',
                time: '2021-12-06 11:28:35',
                type: '端口扫描',
                originIP: '220.0.0.0',
                purposeIP: '220.0.0.1',
                description: '描述描述描述描述描述描述描述描述描述描述描述1',
                isShow: false,
            },
            {
                title: '标题2',
                attackType: 'delivery',
                time: '2021-12-06 11:28:35',
                type: '端口扫描',
                originIP: '220.0.0.0',
                purposeIP: '220.0.0.1',
                description: '描述描述描述描述描述描述描述描述描述描述描述2',
                isShow: false,
            },
            {
                title: '标题3',
                attackType: 'scout',
                time: '2021-12-06 11:28:35',
                type: '端口扫描',
                originIP: '220.0.0.0',
                purposeIP: '220.0.0.1',
                description: '描述描述描述描述描述描述描述描述描述描述描述3',
                isShow: false,
            },
            {
                title: '标题4',
                attackType: 'delivery',
                time: '2021-12-06 11:28:35',
                type: '端口扫描',
                originIP: '220.0.0.0',
                purposeIP: '220.0.0.1',
                description: '描述描述描述描述描述描述描述描述描述描述描述4',
                isShow: false,
            },
        ],
    }
},
methods: {
    // 点击：展开/关闭详情
    showDetail (row) {
        row.isShow = !row.isShow
    },
},

自定义step样式