shuochen
/
LargeScreenVisualization


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>车辆综合管控平台</title>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/style2.0.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script>
        $(function () {
            $('.myscroll').myScroll({
                speed: 60, //数值越大，速度越慢
                rowHeight: 38 //li的高度
            });
        })

    </script>
</head>
<body>
<!--头部-->
<header id="header">
    <div class="header">
        <h1 class="">车辆综合管控平台</h1>
    </div>
</header>

<!--内容-->
<section id="data_content">

    <div class="data_info">
        <div class="info_1 fl">
            <div class="text_1">
                <div class="fl">
                    <img src="images/info_1.png" alt="">
                    <div class="fl count">
                        <p>车辆总数(辆)</p>
                        <p class="conuts">46625</p>
                    </div>
                </div>
                <div class="fl">
                    <img src="images/info_2.png" alt="">
                    <div class="fl count">
                        <p>车辆总数(辆)</p>
                        <p class="conuts">46625</p>
                    </div>
                </div>
                <div class="fl">
                    <img src="images/info_3.png" alt="">
                    <div class="fl count">
                        <p>车辆总数(辆)</p>
                        <p class="conuts">46625</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="info_2 fl">
            <div class="text_2">
                <div class="fl">
                    <img src="images/info_4.png" alt="">
                    <div class="fl count">
                        <p>车辆总数(辆)</p>
                        <p class="conuts">46625</p>
                    </div>
                </div>
                <div class="fl">
                    <img src="images/info_5.png" alt="">
                    <div class="fl count">
                        <p>车辆总数(辆)</p>
                        <p class="conuts">46625</p>
                    </div>
                </div>

            </div>
        </div>
        <div class="info_3 fr">
            <div class="text_2">
                <div class="fl">
                    <img src="images/info_6.png" alt="">
                    <div class="fl count">
                        <p>车辆总数(辆)</p>
                        <p class="conuts">46625</p>
                    </div>
                </div>
                <div class="fl">
                    <img src="images/info_7.png" alt="">
                    <div class="fl count">
                        <p>车辆总数(辆)</p>
                        <p class="conuts">46625</p>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div class="data_content">
        <!--左边-->
        <div class="data_left fl">
            <div class="left_top">
                <!--/*左边第一部分*/-->
                <div class="info public">
                    <div class="min-title">
                        <span>车辆总数</span>
                    </div>
                    <div id="char4" style="width:100%;height: 100%;"></div>
                    <div class="boxfoot"></div>
                </div>
                <!--左边第二部分-->
                <div class="top_bottom public">
                    <div class="min-title">
                        <span>车辆类型</span>
                    </div>
                    <div id="echarts_1" style="width:100%;height: 100%;"></div>
                    <div class="boxfoot"></div>
                </div>
                <!--左边第三部分-->
                <div class="left_bottom public">
                    <div class="min-title">
                        <span>车辆状态</span>
                    </div>
                    <div id="chart_2" style="width:100%;height: 100%;"></div>
                    <div class="boxfoot"></div>
                </div>
            </div>
        </div>
        <!--中间-->
        <div class="data_c fl">
            <div class="data_c_1">


                <div id="contPar" class="contPar">
                    <div id="page1"  style="z-index:1">
                        <div class="title0">车辆综合管控平台</div>
                        <div class="title1">旅游、交通、危险品、校车、大数据</div>


                        <div id="drag-container" style="z-index: 1">
                            <div id="spin-container">

                                <img alt="" class="infoBtn" src="picture/page1_0.png">
                                <img alt="" class="" src="picture/page1_1.png">
                                <img alt="" class="" src="picture/page1_2.png">
                                <img alt="" class="" src="picture/page1_1.png">
                                <img alt="" class="" src="picture/page1_2.png">

                            </div>
                            <div id="ground"></div>
                        </div>

                        <img alt="" class="img3 png" src="images/newdz.png" >
                    </div>
                </div>


            </div>
            <div class="data_c_2 public">

                <div id="echart4" style="width: 100%;height: 100%;padding-top: 10px;"></div>
                <div class="boxfoot"></div>
            </div>
        </div>
        <!--右边-->
        <div class="data_right fr">
            <div class="right_top">
                <!--/*右边第一部分*/-->
                <div class="right_info public">
                    <div class="min-title">
                        <span>收费站收费数量</span>
                    </div>
                    <div class="echart wenzi">
                        <div class="gun">
                            <span>小型车</span>
                            <span>中型车</span>
                            <span>大型车</span>
                        </div>
                        <div id="FontScroll" class="myscroll">
                            <ul>
                                <li>
                                    <div class="fontInner clearfix">
                                        <span >253万</span>
                                        <span>65万</span>
                                        <span>182万</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="fontInner clearfix">
                                        <span >253万</span>
                                        <span>65万</span>
                                        <span>182万</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="fontInner clearfix">
                                        <span >253万</span>
                                        <span>65万</span>
                                        <span>182万</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="fontInner clearfix">
                                        <span >253万</span>
                                        <span>65万</span>
                                        <span>182万</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="fontInner clearfix">
                                        <span >253万</span>
                                        <span>65万</span>
                                        <span>182万</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="fontInner clearfix">
                                        <span >253万</span>
                                        <span>65万</span>
                                        <span>182万</span>
                                    </div>
                                </li><li>
                                <div class="fontInner clearfix">
                                    <span >253万</span>
                                    <span>65万</span>
                                    <span>182万</span>
                                </div>
                            </li>
                                <li>
                                    <div class="fontInner clearfix">
                                        <span >253万</span>
                                        <span>65万</span>
                                        <span>182万</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="fontInner clearfix">
                                        <span >253万</span>
                                        <span>65万</span>
                                        <span>182万</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="fontInner clearfix">
                                        <span >253万</span>
                                        <span>65万</span>
                                        <span>182万</span>
                                    </div>
                                </li>
                                <li>
                                    <div class="fontInner clearfix">
                                        <span >253万</span>
                                        <span>65万</span>
                                        <span>182万</span>
                                    </div>
                                </li>


                            </ul>
                        </div>
                    </div>

                    <div class="boxfoot"></div>
                </div>
                <!--右边第二部分-->
                <div class="right_content public">
                    <div class="min-title">
                        <span>抓拍车辆</span>
                    </div>
                    <div id="chart_3" style="width:100%;height: 100%;"></div>
                    <div class="boxfoot"></div>
                </div>
                <!--右边第三部分-->
                <div class="right_bottom public">
                    <div class="min-title">
                        <span>车辆类型</span>
                    </div>
                    <div id="echarts_2" style="width:100%;height: 100%;padding-top: 10px;"></div>
                    <div class="boxfoot"></div>
                </div>
            </div>
        </div>


    </div>
</section>


<script src="js/script.js"></script>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
<script src="js/echart.js"></script>
<script src="js/fontscroll.js"></script>


</body>
</html>