taro開發小程序中，使用css僞類實現時間軸

.event-item {
    position: relative;
    box-shadow:  0 -2px 10px 0px #0fb3ff;
}

.event-item , .idforAttr{
    margin:0  30px;
    padding: 30px;
     background: #fff;
    border-radius: 10px;
    margin-bottom: 30px;
}
.event-item::before{
     content: "";
    position: absolute;
    left: 34px;
    width: 14px;
    height:14px;
    border-radius:  50%;
    background-color: #3e9de1;
    z-index: 10;
}
.event-item::after{
    content: "";
    position: absolute;
    top: 30px;
    left: 40px;
    width: 2px;
    height: calc(100% + 30px);
    border-radius:  4px;
    background-color: #0fb3ff;
    z-index: 9;
}
.event-item:last-child::after{
    content: "";
    position: absolute;
    left: 40px;
    width: 2px;
    height: calc(100% - 30px);
    border-radius:  4px;
    background: #0fb3ff;
    z-index: 9;
}

jsx代碼：

                            <View className="event-item" key={key}>
                                <View className="row">
                                    <View className="row-title">
                                        <View className="rt"> {item.title}</View>
                                    </View>
                                </View>
                                <View className="row" onClick={this.idforDetail.bind(this, item.operator)}>
                                    <View className="rt">ID:</View>
                                    <View className="rc" style={{ color: '#0fb3ff' }}>
                                        {item.operator}</View>
                                </View>
                                <View className="row">
                                    <View className="rt" >時間: </View>
                                    <View className="rc">
                                        {formatDate(item.timestamp)}</View>
                                </View>
                                <View className="row">
                                    <View className="rt">text:</View>
                                    <View className="rc">
                                        {item.content}</View>
                                </View>
                                <View className="row">
                                    <View className="rt">content: </View>
                                    <View className="rc">
                                        {item.signature}</View>
                                </View>
                            </View>