.top { background-color: #3b7cff; padding: 30rpx 30rpx 60rpx; box-sizing: border-box; display: flex; } .top-logo { background-color: #ffffff; border-radius: 10rpx; width: 100rpx; height: 100rpx; padding: 10rpx; box-sizing: border-box; } .top-logo image { width: 100%; height: 100%; } .top-cont { color: #ffffff; width: calc(100% - 130rpx); margin-left: 30rpx; } .top-name { display: flex; line-height: 44rpx; padding: 10rpx 0; } .top-no { font-size: 26rpx; padding-left: 30rpx; opacity: .9; } .top-type { font-size: 24rpx; } .top-type text { padding-left: 20rpx; } .address { color: #333333; font-size: 24rpx; display: flex; padding: 30rpx 30rpx 0; } .address-tips { width: 54rpx; text-align: center; height: 54rpx; line-height: 54rpx; border-radius: 50%; background-color: #EEEEEE; margin-left: -15rpx; font-size: 24rpx } .address-text { width: calc(100% - 74rpx); margin-left: 20rpx; padding-top: 10rpx; } .white { margin-top: -30rpx; background-color: #ffffff; border-radius: 20rpx; } .list { padding: 0 30rpx; box-sizing: border-box; } .item { padding-bottom: 40rpx; padding-left: 40rpx; box-sizing: border-box; position: relative; } .item:first-child { padding-top: 30rpx; } .item::after { position: absolute; content: ''; background-color: #DDDDDD; width: 14rpx; height: 14rpx; border-radius: 50%; left: 0; top: calc(50% - 6rpx); z-index: 3; border: 2rpx solid #ffffff; } .item::before { position: absolute; content: ''; background-color: #F0F0F0; width: 2rpx; height: 100%; border-radius: 50%; left: 8rpx; top: 0; } .item-name { display: flex; } .item-status { font-weight: 600; padding-right: 20rpx; } .item-time { color: #868686; } .item-text { color: #868686; font-size: 24rpx; line-height: 40rpx; margin-top: 20rpx; } .item:first-child .item-time, .item:first-child .item-text { color: #ff8100 !important; }