/* pages/logistics_details/logistics_details.wxss */ page { background-color: #f2f2f2; } .packages-scroll { display: flex; flex-direction: row; height: 128rpx; } .packages-scroll .package { position: relative; display: flex; justify-content: center; align-items: center; width: 200rpx; height: 96rpx; background-color: #fff; border-radius: 16rpx; overflow: hidden; } .packages-scroll .package .icon { width: 48rpx; height: 48rpx; margin-right: 4rpx; } .packages-scroll .package .active-indicator { position: absolute; height: 12rpx; width: 100%; bottom: 0; left: 0; background-color: #f85900; } .packages-scroll .package:not(:first-of-type) { margin-left: 20rpx; } .record-item { /* padding-bottom: 48rpx; */ display: flex; flex-direction: column; position: relative; padding-left: 48rpx; } .goods-name { /* overflow: hidden; text-overflow: ellipsis; white-space: nowrap; */ } .record-item:not(:last-child) { padding-bottom: 48rpx; } .time { font-size: 24rpx; } .dot { position: absolute; left: 0; top: 9rpx; width: 16rpx; height: 16rpx; background-color: gray; opacity: 50%; border-radius: 50%; z-index: 999; } .record-item:nth-child(1) .dot { background-color: red; opacity: 1; width: 24rpx; height: 24rpx; left: -6rpx; } .line { position: absolute; left: 8rpx; top: 0; height: 100%; width: 2rpx; background-color: gray; opacity: 50%; }