.navbar {
    padding-bottom: 24rpx;
    color: #fff;
    &-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20rpx 32rpx 16rpx 32rpx;
        &-info {
            display: flex;
            flex-direction: column;
            image {
                width: 150rpx;
                height: 70rpx;
            }
        }
        &-weather {
            color: #1d2129;
            text-align: right;
            display: flex;
            align-items: center;
            image {
                width: 80rpx;
                height: 80rpx;
            }
            .info {
                color: #fff;
                .place {
                    font-size: 28rpx;
                }
                .msg {
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                }
                .txt {
                    margin-left: 8rpx;
                }
            }
        }
    }

    &-bottom-list {
        background: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 32rpx;
        border-radius: 16rpx;
        padding: 24rpx 44rpx 40rpx 28rpx;
        .list-item {
            display: flex;
            &-image {
                width: 132rpx;
                height: 132rpx;
            }
            &-msg {
                text-align: center;
                font-size: 28rpx;
                color: $mocp-text-5;
                margin-top: 28rpx;
            }
            &-txt {
                font-weight: bold;
                margin-top: 8rpx;
            }
            &-line {
                width: 2rpx;
                height: 58rpx;
                background: #e6f0fe;
            }
        }
    }
}
