$logistic_gray: #f0f0f0; $border_color_strong: #e5e5e5; $border_color_light: #eee; .logistic-page { background-color: $logistic_gray; .overview { height: 120px; line-height: 120px; width: 100%; margin-bottom: 40px; background-color: #fff; color: #464646; border-bottom: 1px solid $border_color_strong; .left { width: 19%; float: left; text-align: center; height: 100%; .icon { width: 88px; height: 88px; margin: 0 auto; background-size: 100%; background-repeat: no-repeat; background-position: center; margin-top: 16px; } } .right { width: 81%; float: left; padding-top: 20px; padding-bottom: 20px; height: 80px; div { height: 40px; line-height: 44px; color: #595959; font-size: 24px; } } .info { padding-right: 4px; } } .title { height: 112px; line-height: 112px; background-color: #fff; padding-left: 40px; font-size: 40px; } .detail { background-color: #fff; padding-left: 80px; margin-bottom: 40px; } .timeline-box { border-left: 1px solid $border_color_strong; position: relative; padding-left: 52px; } .timeline-node { position: absolute; top: 32px; left: -9.04444px; display: inline-block; width: 16.4px; height: 16.4px; background-color: $border_color_strong; border-radius: 100%; } .timeline-box:first-child { .timeline-node { background-color: #989898; } .timeline-info-row { color: #606060; } } .timeline-info { padding: 20px 0; border-bottom: 1px solid $border_color_strong; } .timeline-box:last-child { .timeline-info { border: none; } } .timeline-info-row { min-height: 40px; line-height: 40px; font-size: 28px; color: #bababa; padding-right: 32px; } .banner { margin-bottom: 40px; a { img { width: 100%; height: 100%; } } } }