<template>
    <!-- 面/色漆工作区 -->
    <div class="page-pack">
        <div class="container">
            <!-- 在线车体数量 -->
            <div class="online-number">
                <span>数量：{{onlineNumber !== null ? onlineNumber : '0' }}</span>
            </div>
            <!-- 显示区域 -->
            <div class="view-pack">
                <!-- 第一行 -->
                <div class="HDG1-134" 
                    v-if="realData.hasOwnProperty('HDG1-134') && realData['HDG1-134'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-134'].busType)">
                </div>
                <div class="HDG1-150"
                    v-if="realData.hasOwnProperty('HDG1-150') && realData['HDG1-150'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-150'].busType)">
                </div>
                <div class="HDG1-166"
                    v-if="realData.hasOwnProperty('HDG1-166') && realData['HDG1-166'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-166'].busType)">
                </div>
                <div class="HDG1-167"
                    v-if="realData.hasOwnProperty('HDG1-167') && realData['HDG1-167'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-167'].busType)">
                </div>
                <div class="HDG1-168"
                    v-if="realData.hasOwnProperty('HDG1-168') && realData['HDG1-168'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-168'].busType)">
                </div>
                <div class="HDG5-21"
                    v-if="realData.hasOwnProperty('HDG5-21') && realData['HDG5-21'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG5-21'].busType)">
                </div>
                <!-- 第二行 -->
                <div class="HDG1-135"
                    v-if="realData.hasOwnProperty('HDG1-135') && realData['HDG1-135'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-135'].busType)">
                </div>
                <div class="HDG1-151"
                    v-if="realData.hasOwnProperty('HDG1-151') && realData['HDG1-151'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-151'].busType)">
                </div>
                <div class="HDG1-169"
                    v-if="realData.hasOwnProperty('HDG1-169') && realData['HDG1-169'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-169'].busType)">
                </div>
                <div class="HDG1-170"
                    v-if="realData.hasOwnProperty('HDG1-170') && realData['HDG1-170'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-170'].busType)">
                </div>
                <div class="HDG1-171"
                    v-if="realData.hasOwnProperty('HDG1-171') && realData['HDG1-171'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-171'].busType)">
                </div>
                <div class="HDG5-22"
                    v-if="realData.hasOwnProperty('HDG5-22') && realData['HDG5-22'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG5-22'].busType)">
                </div>
                <!-- 第三行 -->
                <div class="HDG1-136"
                    v-if="realData.hasOwnProperty('HDG1-136') && realData['HDG1-136'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-136'].busType)">
                </div>
                <div class="HDG1-152"
                    v-if="realData.hasOwnProperty('HDG1-152') && realData['HDG1-152'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-152'].busType)">
                </div>
                <div class="HDG1-172"
                    v-if="realData.hasOwnProperty('HDG1-172') && realData['HDG1-172'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-172'].busType)">
                </div>
                <div class="HDG1-173"
                    v-if="realData.hasOwnProperty('HDG1-173') && realData['HDG1-173'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-173'].busType)">
                </div>
                <div class="HDG1-174"
                    v-if="realData.hasOwnProperty('HDG1-174') && realData['HDG1-174'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-174'].busType)">
                </div>
                <div class="HDG5-23"
                    v-if="realData.hasOwnProperty('HDG5-23') && realData['HDG5-23'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG5-23'].busType)">
                </div>
                <!-- 第四行 -->
                <div class="HDG1-137"
                    v-if="realData.hasOwnProperty('HDG1-137') && realData['HDG1-137'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-137'].busType)">
                </div>
                <div class="HDG1-153"
                    v-if="realData.hasOwnProperty('HDG1-153') && realData['HDG1-153'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-153'].busType)">
                </div>
                <div class="HDG1-175"
                    v-if="realData.hasOwnProperty('HDG1-175') && realData['HDG1-175'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-175'].busType)">
                </div>
                <div class="HDG1-176"
                    v-if="realData.hasOwnProperty('HDG1-176') && realData['HDG1-176'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-176'].busType)">
                </div>
                <div class="HDG1-177"
                    v-if="realData.hasOwnProperty('HDG1-177') && realData['HDG1-177'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-177'].busType)">
                </div>
                <div class="HDG5-24"
                    v-if="realData.hasOwnProperty('HDG5-24') && realData['HDG5-24'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG5-24'].busType)">
                </div>
                <!-- 第五行 -->
                <div class="HDG1-138"
                    v-if="realData.hasOwnProperty('HDG1-138') && realData['HDG1-138'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-138'].busType)">
                </div>
                <div class="HDG1-154"
                    v-if="realData.hasOwnProperty('HDG1-154') && realData['HDG1-154'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-154'].busType)">
                </div>
                <div class="HDG1-178"
                    v-if="realData.hasOwnProperty('HDG1-178') && realData['HDG1-178'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-178'].busType)">
                </div>
                <div class="HDG1-179"
                    v-if="realData.hasOwnProperty('HDG1-179') && realData['HDG1-179'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-179'].busType)">
                </div>
                <div class="HDG1-180"
                    v-if="realData.hasOwnProperty('HDG1-180') && realData['HDG1-180'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-180'].busType)">
                </div>
                <div class="HDG5-25"
                    v-if="realData.hasOwnProperty('HDG5-25') && realData['HDG5-25'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG5-25'].busType)">
                </div>
                <!-- 第六行 -->
                <div class="HDG1-139"
                    v-if="realData.hasOwnProperty('HDG1-139') && realData['HDG1-139'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-139'].busType)">
                </div>
                <div class="HDG1-155"
                    v-if="realData.hasOwnProperty('HDG1-155') && realData['HDG1-155'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-155'].busType)">
                </div>
                <div class="HDG1-181"
                    v-if="realData.hasOwnProperty('HDG1-181') && realData['HDG1-181'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-181'].busType)">
                </div>
                <div class="HDG1-182"
                    v-if="realData.hasOwnProperty('HDG1-182') && realData['HDG1-182'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-182'].busType)">
                </div>
                <div class="HDG1-183"
                    v-if="realData.hasOwnProperty('HDG1-183') && realData['HDG1-183'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-183'].busType)">
                </div>
                <div class="HDG5-26"
                    v-if="realData.hasOwnProperty('HDG5-26') && realData['HDG5-26'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG5-26'].busType)">
                </div>
                <!-- 第七行 -->
                <div class="HDG1-140"
                    v-if="realData.hasOwnProperty('HDG1-140') && realData['HDG1-140'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-140'].busType)">
                </div>
                <div class="HDG1-156"
                    v-if="realData.hasOwnProperty('HDG1-156') && realData['HDG1-156'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-156'].busType)">
                </div>
                <div class="HDG1-184"
                    v-if="realData.hasOwnProperty('HDG1-184') && realData['HDG1-184'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-184'].busType)">
                </div>
                <div class="HDG1-185"
                    v-if="realData.hasOwnProperty('HDG1-185') && realData['HDG1-185'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-185'].busType)">
                </div>
                <div class="HDG1-186"
                    v-if="realData.hasOwnProperty('HDG1-186') && realData['HDG1-186'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-186'].busType)">
                </div>
                <div class="HDG5-27"
                    v-if="realData.hasOwnProperty('HDG5-27') && realData['HDG5-27'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG5-27'].busType)">
                </div>
                <!-- 第八行 -->
                <div class="HDG1-141"
                    v-if="realData.hasOwnProperty('HDG1-141') && realData['HDG1-141'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-141'].busType)">
                </div>
                <div class="HDG1-157"
                    v-if="realData.hasOwnProperty('HDG1-157') && realData['HDG1-157'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-157'].busType)">
                </div>
                <div class="HDG1-187"
                    v-if="realData.hasOwnProperty('HDG1-187') && realData['HDG1-187'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-187'].busType)">
                </div>
                <div class="HDG1-188"
                    v-if="realData.hasOwnProperty('HDG1-188') && realData['HDG1-188'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-188'].busType)">
                </div>
                <div class="HDG1-189"
                    v-if="realData.hasOwnProperty('HDG1-189') && realData['HDG1-189'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-189'].busType)">
                </div>
                <div class="HDG5-28"
                    v-if="realData.hasOwnProperty('HDG5-28') && realData['HDG5-28'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG5-28'].busType)">
                </div>
                <!-- 第九行 -->
                <div class="HDG1-142"
                    v-if="realData.hasOwnProperty('HDG1-142') && realData['HDG1-142'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-142'].busType)">
                </div>
                <div class="HDG1-158"
                    v-if="realData.hasOwnProperty('HDG1-158') && realData['HDG1-158'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-158'].busType)">
                </div>
                <div class="HDG1-190"
                    v-if="realData.hasOwnProperty('HDG1-190') && realData['HDG1-190'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-190'].busType)">
                </div>
                <div class="HDG1-191"
                    v-if="realData.hasOwnProperty('HDG1-191') && realData['HDG1-191'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-191'].busType)">
                </div>
                <div class="HDG1-192"
                    v-if="realData.hasOwnProperty('HDG1-192') && realData['HDG1-192'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-192'].busType)">
                </div>
                <div class="HDG5-29"
                    v-if="realData.hasOwnProperty('HDG5-29') && realData['HDG5-29'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG5-29'].busType)">
                </div>
                <!-- 第十行 -->
                <div class="HDG1-143"
                    v-if="realData.hasOwnProperty('HDG1-143') && realData['HDG1-143'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-143'].busType)">
                </div>
                <div class="HDG1-159"
                    v-if="realData.hasOwnProperty('HDG1-159') && realData['HDG1-159'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-159'].busType)">
                </div>
                <div class="HDG1-193"
                    v-if="realData.hasOwnProperty('HDG1-193') && realData['HDG1-193'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-193'].busType)">
                </div>
                <div class="HDG1-194"
                    v-if="realData.hasOwnProperty('HDG1-194') && realData['HDG1-194'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-194'].busType)">
                </div>
                <div class="HDG1-195"
                    v-if="realData.hasOwnProperty('HDG1-195') && realData['HDG1-195'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-195'].busType)">
                </div>
                <div class="HDG5-30"
                v-if="realData.hasOwnProperty('HDG5-30') && realData['HDG5-30'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG5-30'].busType)">
                </div>
                <!-- 第十一行 -->
                <div class="HDG1-144"
                    v-if="realData.hasOwnProperty('HDG1-144') && realData['HDG1-144'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-144'].busType)">
                </div>
                <div class="HDG1-160"
                    v-if="realData.hasOwnProperty('HDG1-160') && realData['HDG1-160'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-160'].busType)">
                </div>
                <div class="HDG1-196"
                    v-if="realData.hasOwnProperty('HDG1-196') && realData['HDG1-196'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-196'].busType)">
                </div>
                <div class="HDG1-197"
                    v-if="realData.hasOwnProperty('HDG1-197') && realData['HDG1-197'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-197'].busType)">
                </div>
                <div class="HDG1-198"
                    v-if="realData.hasOwnProperty('HDG1-198') && realData['HDG1-198'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-198'].busType)">
                </div>
                <div class="HDG5-31"
                    v-if="realData.hasOwnProperty('HDG5-31') && realData['HDG5-31'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG5-31'].busType)">
                </div>
                <!-- 第十二行 -->
                <div class="HDG1-145"
                    v-if="realData.hasOwnProperty('HDG1-145') && realData['HDG1-145'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-145'].busType)">
                </div>
                <div class="HDG1-161"
                    v-if="realData.hasOwnProperty('HDG1-161') && realData['HDG1-161'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-161'].busType)">
                </div>
                <div class="HDG1-199"
                    v-if="realData.hasOwnProperty('HDG1-199') && realData['HDG1-199'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-199'].busType)">
                </div>
                <div class="HDG1-200"
                    v-if="realData.hasOwnProperty('HDG1-200') && realData['HDG1-200'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-200'].busType)">
                </div>
                <div class="HDG1-201"
                    v-if="realData.hasOwnProperty('HDG1-201') && realData['HDG1-201'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-201'].busType)">
                </div>
                <div class="HDG5-32"
                    v-if="realData.hasOwnProperty('HDG5-32') && realData['HDG5-32'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG5-32'].busType)">
                </div>
                <!-- 第十三行 -->
                <div class="HDG1-146"
                    v-if="realData.hasOwnProperty('HDG1-146') && realData['HDG1-146'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-146'].busType)">
                </div>
                <div class="HDG1-162"
                    v-if="realData.hasOwnProperty('HDG1-162') && realData['HDG1-162'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-162'].busType)">
                </div>
                <div class="HDG1-202"
                    v-if="realData.hasOwnProperty('HDG1-202') && realData['HDG1-202'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-202'].busType)">
                </div>
                <div class="HDG1-203"
                    v-if="realData.hasOwnProperty('HDG1-203') && realData['HDG1-203'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-203'].busType)">
                </div>
                <div class="HDG1-204"
                    v-if="realData.hasOwnProperty('HDG1-204') && realData['HDG1-204'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG1-204'].busType)">
                </div>
                <div class="HDG5-33"
                    v-if="realData.hasOwnProperty('HDG5-33') && realData['HDG5-33'].state !== 'FREE'"
                    :class="resolveCarTypeStyle(realData['HDG5-33'].busType)">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                // 定时器
                timer: null,
                // 面/色漆工作区实时信息
                realData: {},
                // 当前在线车体数量
                onlineNumber: null
            }
        },
        mounted () {
            setTimeout(() => {
                this.getComplexionPaintData()
                this.timer = setInterval(() => {
                    // 查询面/色漆工作区实时信息
                    this.getComplexionPaintData();
                }, 20000);
            }, 0)
        },
        beforeDestroy () {
            clearInterval(this.timer);
        },
        methods: {
            //获取面/色漆工作区信息
            getComplexionPaintData () {
                this.$fetch('area-controller/realTime-get', { areaNo: '6' }).then(res => {
                    console.log(res);
                    for (let item of res) {
                        if (item.code === '6') {
                            this.realData = _.cloneDeep(item.stationMap)
                            this.onlineNumber = _.cloneDeep(item.onlineNum);
                            break;
                        }
                    }
                })
            },
            // 解析车体类型样式
            resolveCarTypeStyle (type) {
                if (type === 'OTHER') {
                    return 'car-out';
                } else {
                    return '';
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .page-pack {
        height: 100%;
        width: 100%;
        .container {
            width: 1556px;
            height: 1037px;
            background: url("../../../assets/images/LedCarouselAvi/complexion_paint_bg.png") no-repeat;
            overflow: hidden;
            position: relative;
            // 在线车体数量
            .online-number {
                width: 270px;
                height: 50px;
                position: absolute;
                right: 126px;
                top: 43px;
                text-align: center;
                line-height: 50px;
                font-size: 35px;
                color: rgb(255,255,255);
            }
            // 显示区域
            .view-pack {
                div {
                    width: 70px;
                    height: 40px;
                    position: absolute;
                    background: url("../../../assets/images/LedCarouselAvi/car.png");
                    background-position: center 0;
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                }
                .HDG1-134 {
                    top: 134px;
                    left: 90px;
                }
                .HDG1-135 {
                    top: 243px;
                    left: 90px;
                }
                .HDG1-136 {
                    top: 307px;
                    left: 90px;
                }
                .HDG1-137 {
                    top: 370px;
                    left: 90px;
                }
                .HDG1-138 {
                    top: 435px;
                    left: 90px;
                }
                .HDG1-139 {
                    top: 497px;
                    left: 90px;
                }
                .HDG1-140 {
                    top: 560px;
                    left: 90px;
                }
                .HDG1-141 {
                    top: 625px;
                    left: 90px;
                }
                .HDG1-142 {
                    top: 689px;
                    left: 90px;
                }
                .HDG1-143 {
                    top: 752px;
                    left: 90px;
                }
                .HDG1-144 {
                    top: 814px;
                    left: 90px;
                }
                .HDG1-145 {
                    top: 880px;
                    left: 90px;
                }
                .HDG1-146 {
                    top: 938px;
                    left: 133px;
                }
                .HDG1-150 {
                    top: 134px;
                    left: 275px;
                }
                .HDG1-151 {
                    top: 241px;
                    left: 275px;
                }
                .HDG1-152 {
                    top: 307px;
                    left: 275px;
                }
                .HDG1-153 {
                    top: 366px;
                    left: 275px;
                }
                .HDG1-154 {
                    top: 431px;
                    left: 275px;
                }
                .HDG1-155 {
                    top: 493px;
                    left: 275px;
                }
                .HDG1-156 {
                    top: 556px;
                    left: 275px;
                }
                .HDG1-157 {
                    top: 621px;
                    left: 275px;
                }
                .HDG1-158 {
                    top: 685px;
                    left: 275px;
                }
                .HDG1-159 {
                    top: 748px;
                    left: 275px;
                }
                .HDG1-160 {
                    top: 812px;
                    left: 275px;
                }
                .HDG1-161 {
                    top: 874px;
                    left: 275px;
                }
                .HDG1-162 {
                    top: 943px;
                    left: 275px;
                }
                .HDG1-166 {
                    top: 134px;
                    left: 635px;
                }
                .HDG1-169 {
                    top:241px;
                    left: 582px;
                }
                .HDG1-172 {
                    top:307px;
                    left: 582px;
                }
                .HDG1-175 {
                    top: 374px;
                    left: 582px;
                }
                .HDG1-178 {
                    top: 431px;
                    left: 635px;
                }
                .HDG1-181 {
                    top: 493px;
                    left: 575px;
                }
                .HDG1-184 {
                    top: 556px;
                    left: 635px;
                }
                .HDG1-187 {
                    top: 621px;
                    left: 635px;
                }
                .HDG1-190 {
                    top: 689px;
                    left: 575px;
                }
                .HDG1-193 {
                    top: 754px;
                    left: 575px;
                }
                .HDG1-196 {
                    top: 818px;
                    left: 575px;
                }
                .HDG1-199 {
                    top: 880px;
                    left: 635px;
                }
                .HDG1-202 {
                    top: 943px;
                    left: 575px;
                }
                .HDG1-167 {
                    top: 134px;
                    left: 775px;
                }
                .HDG1-170 {
                    top: 241px;
                    left: 775px;
                }
                .HDG1-173 {
                    top: 307px;
                    left: 823px;
                }
                .HDG1-176 {
                    top: 366px;
                    left: 823px;
                }
                .HDG1-179 {
                    top: 431px;
                    left: 823px;
                }
                .HDG1-182 {
                    top: 493px;
                    left: 823px;
                }
                .HDG1-185 {
                    top: 564px;
                    left: 775px;
                }
                .HDG1-188 {
                    top: 621px;
                    left: 823px;
                }
                .HDG1-194 {
                    top: 748px;
                    left: 823px;
                }
                .HDG1-197 {
                    top: 818px;
                    left: 770px;
                }
                .HDG1-200 {
                    top: 880px;
                    left: 823px;
                }
                .HDG1-203 {
                    top: 943px;
                    left: 823px;
                }
                .HDG1-191 {
                    top: 680px;
                    left: 823px;
                }
                .HDG1-168 {
                    top: 134px;
                    left: 965px;
                }
                .HDG1-171 {
                    top: 236px;
                    left: 1019px;
                }
                .HDG1-174 {
                    top: 307px;
                    left: 965px;
                }
                .HDG1-177 {
                    top: 374px;
                    left: 965px;
                }
                .HDG1-180 {
                    top: 431px;
                    left: 1019px;
                }
                .HDG1-183 {
                    top: 493px;
                    left: 965px;
                }
                .HDG1-186 {
                    top: 564px;
                    left: 965px;
                }
                .HDG1-189 {
                    top: 621px;
                    left: 1019px;
                }
                .HDG1-192 {
                    top: 689px;
                    left: 965px;
                }
                .HDG1-195 {
                    top: 754px;
                    left: 965px;
                }
                .HDG1-198 {
                    top: 818px;
                    left: 965px;
                }
                .HDG1-201 {
                    top: 880px;
                    left: 965px;
                }
                .HDG1-204 {
                    top: 943px;
                    left: 1019px;
                }
                .HDG5-21 {
                    top: 134px;
                    left: 1288px;
                }
                .HDG5-22 {
                    top: 240px;
                    left: 1288px;
                }
                .HDG5-23 {
                    top: 302px;
                    left: 1288px;
                }
                .HDG5-24 {
                    top: 366px;
                    left: 1288px;
                }
                .HDG5-25 {
                    top: 431px;
                    left: 1288px;
                }
                .HDG5-26 {
                    top: 493px;
                    left: 1288px;
                }
                .HDG5-27 {
                    top: 556px;
                    left: 1288px;
                }
                .HDG5-28 {
                    top: 621px;
                    left: 1288px;
                }
                .HDG5-29 {
                    top: 685px;
                    left: 1288px;
                }
                .HDG5-30 {
                    top: 748px;
                    left: 1288px;
                }
                .HDG5-31 {
                    top: 812px;
                    left: 1288px;
                }
                .HDG5-32 {
                    top: 874px;
                    left: 1288px;
                }
                .HDG5-33 {
                    top: 938px;
                    left: 1288px;
                }
            }
        }
        // 轻客车体样式
        .car-out {
            background: url('../../../assets/images/LedCarouselAvi/car_out.png') !important;
            background-position: center 0 !important;
            background-repeat: no-repeat !important;
            background-size: 100% 100% !important;
        }
    }
</style>