Customize timeline component styles

Implement a timeline style , And click to expand the details
The renderings are as follows ：

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> Attack types </p>
                        <p>{
   { item.type }}</p>
                    </div>
                    <div>
                        <p> Source IP Address </p>
                        <p>{
   { item.originIP }}</p>
                    </div>
                    <div>
                        <p> Purpose IP Address </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: ' title 1',
                attackType: 'scout',
                time: '2021-12-06 11:28:35',
                type: ' Port scanning ',
                originIP: '220.0.0.0',
                purposeIP: '220.0.0.1',
                description: ' Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description 1',
                isShow: false,
            },
            {
                title: ' title 2',
                attackType: 'delivery',
                time: '2021-12-06 11:28:35',
                type: ' Port scanning ',
                originIP: '220.0.0.0',
                purposeIP: '220.0.0.1',
                description: ' Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description 2',
                isShow: false,
            },
            {
                title: ' title 3',
                attackType: 'scout',
                time: '2021-12-06 11:28:35',
                type: ' Port scanning ',
                originIP: '220.0.0.0',
                purposeIP: '220.0.0.1',
                description: ' Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description 3',
                isShow: false,
            },
            {
                title: ' title 4',
                attackType: 'delivery',
                time: '2021-12-06 11:28:35',
                type: ' Port scanning ',
                originIP: '220.0.0.0',
                purposeIP: '220.0.0.1',
                description: ' Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description Description 4',
                isShow: false,
            },
        ],
    }
},
methods: {
    //  Click on ： an / Closing details 
    showDetail (row) {
        row.isShow = !row.isShow
    },
},

Customize step style