关注互联网应用及运维技术的个人博客

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>
赞(0)
未经允许不得转载:飞天狒狒 » taro开发小程序中,使用css伪类实现时间轴

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址