@charset "UTF-8"; /* 需要放到文件最上面 */ /* 水平间距 */ /* 水平间距 */ /* 以下变量是默认值,如不需要修改可以不用给下面的变量重新赋值 */ /* 水平间距 */ .steps-lists { background: #fff; padding: 30rpx; } .steps-lists .steps-text { color: #08979c; margin: 0 2rpx; font-weight: 400; } .steps-lists .steps-item { position: relative; display: flex; } .steps-lists .steps-item .steps-state { width: 52rpx; height: 52rpx; background: #B9B9B9; border-radius: 50%; margin-right: 20rpx; margin-top: 16rpx; display: flex; align-items: center; justify-content: center; oversteps: hidden; color: #fff; } .steps-lists .steps-item .steps-content { flex: 1; width: 0; } .steps-lists .steps-item .steps-content .steps-name { height: 96rpx; display: flex; flex-direction: column; justify-content: center; } .steps-lists .steps-item .steps-content .steps-name .name { color: #B9B9B9; font-size: 32rpx; font-weight: 600; } .steps-lists .steps-item .steps-content .steps-name .date { font-size: 24rpx; color: #8c8c8c; display: flex; align-items: center; justify-content: space-between; } .steps-lists .steps-item .steps-content .steps-item-content { background-color: #ffffff; border-radius: 8px; box-shadow: 0px 1px 12px rgba(3, 3, 3, 0.08); padding: 10px; margin-bottom: 16rpx; position: relative; } .steps-lists .steps-item .steps-content .steps-item-content.last { margin-bottom: 0; } .steps-lists .steps-item .steps-content .steps-item-content .title { font-weight: 600; padding-bottom: 10rpx; } .steps-lists .steps-item .steps-content .steps-item-content .content { font-weight: 300; } .steps-lists .steps-item .steps-content .steps-item-content .right-icon { position: absolute; top: 50%; margin-top: -16rpx; right: 20rpx; } .steps-lists .steps-item .steps-line { width: 1px; border-left: 1px solid #B9B9B9; position: absolute; top: 68rpx; bottom: -16rpx; left: 26rpx; } .steps-lists .steps-item.success .steps-state { background: #389e0d; } .steps-lists .steps-item.success .steps-name .name { color: #389e0d; } .steps-lists .steps-item.success .steps-line { border-color: #389e0d; }