init

css/hsbigdata.css

@@ -0,0 +1,316 @@
+*{
+    padding: 0;
+    margin: 0;
+    font-family: 微软雅黑;
+}
+.clearfix{
+    zoom: 1;
+}
+.clearfix:after{
+    content: "";
+    display: block;
+    height: 0;
+    overflow: hidden;
+    clear: both;
+}
+a{
+    list-style: none;
+    text-decoration: none
+}
+li{
+    list-style: none;
+}
+body{
+    background: url(../img/img_bj.png);
+    background-position: bottom center;
+    background-repeat: no-repeat;
+    background-size: 100% auto;
+    background-color: #22272b;
+}
+.row{
+    width: 1200px;
+    margin: 0 auto;
+}
+.logo{
+    display: block;
+    margin: 0 auto;
+    margin-top: 88px
+}
+.font{
+    display: block;
+    margin: 0 auto;
+    margin-top: 20px
+}
+.mid{
+    width: 978px;
+    height: 310px;
+    margin: 0 auto;
+    margin-top: 70px
+}
+.mid-card0{
+    width: 266px;
+    float: left;
+    margin-left: 90px;
+}
+.mid-card1{
+    width: 266px;
+    float: left;
+    margin-left:356px
+}
+.mid-card2{
+    width: 266px;
+    float: left;
+    margin-left:148px
+}
+.mid-card{
+    width: 266px;
+	height: 160px;
+	background-color: #2d3236;
+	box-shadow: 1.8px 2.4px 9px 1px 
+		rgba(6, 14, 19, 0.28);
+    border-radius: 13px;
+    padding-top: 25px
+}
+.mid-card0:first-child{
+    margin-left: 0
+}
+.yuan-wai{
+    width: 96px;
+	height: 96px;
+    background-color: #53595b;
+    border-radius: 50%;
+    margin-left: 85px
+}
+.yuan-li{
+    width: 78px;
+    height: 78px;
+    float: left;
+    border-radius: 50%;
+    margin: 9px;
+}
+.icon-1{
+    background: url(../img/icon_pingtaiyewu.png) center no-repeat;
+    background-color: #ee524f;
+}
+.icon-11{
+    background: url(../img/icon_shujufuwu.png) center no-repeat;
+    background-color: #e6c149;
+}
+.icon-12{
+    background: url(../img/icon_xiaoxi.png) center no-repeat;
+    background-color: #a0c936;
+}
+.icon-13{
+    background: url(../img/icon_shujujiaohuan.png) center no-repeat;
+    background-color: #3ad1b3;
+}
+.icon-2{
+    background: url(../img/icon_yunxingjiankong.png) center no-repeat;
+    background-color: #c447cf;
+}
+.icon-21{
+    background: url(../img/icon_dashuju.png) center no-repeat;
+    background-color: #c447cf;
+}
+.icon-3{
+    background: url(../img/icon_paas.png) center no-repeat;
+    background-color: #8c50d1;
+}
+.icon-4{
+    background: url(../img/icon_fuwukaifa.png) center no-repeat;
+    background-color: #04b7a2;
+}
+.icon-5{
+    background: url(../img/icon_kaifang.png) center no-repeat;
+    background-color: #0389d0;
+}
+.icon-6{
+    background: url(../img/icon_gongxiang.png) center no-repeat;
+    background-color: #7daa0f;
+}
+.icon-7{
+    background: url(../img/icon_chengshijiankong.png) center no-repeat;
+    background-color: #f3b139;
+}
+.icon-8{
+    background: url(../img/icon_shuiwenyunxing.png) center no-repeat;
+    background-color: #ee524f;
+}
+.mid-card p{
+    text-align: center;
+    margin-top: 20px;
+    font-size: 18px;
+    color: #e7e7e7
+}
+.rukou{
+    width: 266px;
+	height: 34px;
+	background-color: #2d3236;
+	box-shadow: 1.8px 2.4px 9px 1px 
+		rgba(6, 14, 19, 0.28);
+    border-radius: 8px;
+    margin-top: 20px;
+    position: relative;
+}
+.rukou-h{
+    margin-top: 10px
+}
+.rukou p{
+    font-size: 14px;
+    color:#8a87f3;
+    line-height: 34px;
+    text-align: center;
+    cursor: pointer;
+}
+.rukou p:hover{
+    color:#c0bfeb
+}
+.rukou img{
+    position: absolute;
+    right: 12px;
+    top:11.5px
+}
+.bottom{
+    width: 100%;
+    height: 300px;
+    margin-top: 110px;
+    overflow: hidden;
+    overflow-x: auto;
+    white-space: nowrap;
+    background: url(../img/dibu.png);
+    background-repeat: no-repeat;
+    background-size: 1200px auto;
+    background-position: 0 120px
+}
+.bottom-but{
+    width: 120%;
+}
+.bottom-card0{
+    position: relative;
+    width: 175px;
+    float: left;
+    margin-left: 100px;
+    height: 194px;
+}
+.big-card{
+    width: 175px;
+    height: 175px;
+    cursor: pointer;
+}
+.little-card{
+    width: 140px;
+    height: 140px;
+    border-radius: 12px;
+    float: left;
+    margin-top: 35px;
+    margin-left: 17.5px;
+}
+.little-card1{
+    background-image: linear-gradient(120deg, 
+    #56aaee 0%, 
+    #2e6cde 100%), 
+linear-gradient(
+    #e16d6d, 
+    #e16d6d);
+background-blend-mode: normal, 
+    normal;
+}
+.little-card2{
+    background-image: linear-gradient(120deg, 
+		#5459db 0%, 
+		#772ab4 100%), 
+	linear-gradient(
+		#e16d6d, 
+		#e16d6d);
+	background-blend-mode: normal, 
+		normal;
+}
+.little-card3{
+    background-image: linear-gradient(120deg, 
+		#8f43db 0%, 
+		#ae4774 100%), 
+	linear-gradient(
+		#e16d6d, 
+		#e16d6d);
+	background-blend-mode: normal, 
+		normal;
+}
+.little-card4{
+    background-image: linear-gradient(120deg, 
+		#ab5e92 0%, 
+		#b7763e 100%), 
+	linear-gradient(
+		#e16d6d, 
+		#e16d6d);
+	background-blend-mode: normal, 
+		normal;
+}
+.little-card5{
+    background-image: linear-gradient(120deg, 
+        #bc7575 0%, 
+		#dbb64c 100%), 
+	linear-gradient(
+		#e16d6d, 
+		#e16d6d);
+	background-blend-mode: normal, 
+		normal;
+}
+.little-card img{
+   width: 68px;
+   height: 68px;
+   margin-left: 36px;
+   margin-top: 36px
+}
+.little-card:hover{
+    transform: scale(1.25);
+    margin-top: 17.5px
+}
+.little-card-active{
+    transform: scale(1.25);
+    margin-top: 17.5px
+}
+.bottom-card0 p{
+    position: absolute;
+    font-size: 22px;
+    color: #1b2026;
+    text-align: center;
+    top: 20px;
+    left: 30px;
+}
+.bottom-font{
+    width: 120%;
+}
+.bottom-font ul li{
+    font-size: 24px;
+    color: #1b2026;
+    float: left;
+}
+.bottom-font ul li:nth-child(1){
+    margin-left: 112px
+}
+.bottom-font ul li:nth-child(2){
+    margin-left: 105px
+}
+.bottom-font ul li:nth-child(3){
+    margin-left: 90px
+}
+.bottom-font ul li:nth-child(4){
+    margin-left: 122px
+}
+.bottom-font ul li:nth-child(5){
+    margin-left: 141px
+}
+.bottom::-webkit-scrollbar{
+     width:20px; 
+     height:10px; 
+     background:#d2d2d2; 
+     border-radius:10px;
+     /*外层轨道*/
+}
+.bottom::-webkit-scrollbar-thumb{ 
+    display:block; 
+    width:6px; 
+    margin:0 auto; 
+    border-radius: 10px; 
+    background: linear-gradient(to right, #d27279 , #6456e0) /* 标准的语法 *//*内层轨道*/
+}

index.html

@@ -0,0 +1,349 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>平台管理和运维</title>
+    <link rel="stylesheet" href="css/hsbigdata.css" type="text/css">
+</head>
+<body>
+    <div class="row">
+        <img src="img/logo.png" alt="" class="logo">
+        <img src="img/font.png" alt="" class="font">
+        <div class="mid">
+            <div class="mid-card2">
+                <div class="mid-card">
+                    <div class="yuan-wai">
+                        <div class="yuan-li icon-7"></div>
+                    </div>
+                    <p>城市运行监测预警平台</p>
+                </div>
+                <div class="rukou">
+                    <a href="http://citysdk.dgtis.com:8080/hsdatashow/" target="_blank">
+                        <p>市领导入口</p>
+                        <img src="img/icon_jiantou.png" alt="">
+                    </a>
+                </div>
+            </div>
+            <div class="mid-card2">
+                <div class="mid-card">
+                    <div class="yuan-wai">
+                        <div class="yuan-li icon-8"></div>
+                    </div>
+                    <p>水务水文运行监控系统</p>
+                </div>
+                <div class="rukou">
+                    <a href="http://citysdk.dgtis.com:8080/hsdatashow/topic/water/home/index.htm" target="_blank">
+                        <p>部门领导入口</p>
+                        <img src="img/icon_jiantou.png" alt="">
+                    </a>
+                </div>
+            </div>
+        </div>
+        <div class="mid" style="display: none;">
+            <div class="mid-card0" style="display: none;">
+                <div class="mid-card">
+                    <div class="yuan-wai">
+                        <div class="yuan-li icon-5"></div>
+                    </div>
+                    <p>资源开放平台</p>
+                </div>
+                <div class="rukou">
+                    <a href="http://citysdk.dgtis.com:8080/hsdataopen/" target="_blank">
+                        <p>公众入口</p>
+                        <img src="img/icon_jiantou.png" alt="">
+                    </a>
+                </div>
+                <div class="rukou">
+                    <a href="http://citysdk.dgtis.com:8080/hsdataopen/" target="_blank">
+                        <p>开发者入口</p>
+                        <img src="img/icon_jiantou.png" alt="">
+                    </a>
+                </div>
+            </div>
+            <div class="mid-card0" style="display: none;">
+                <div class="mid-card">
+                    <div class="yuan-wai">
+                        <div class="yuan-li icon-6"></div>
+                    </div>
+                    <p>资源共享平台</p>
+                </div>
+                <div class="rukou">
+                    <a href="http://citysdk.dgtis.com:8080/hsdatashare/" target="_blank">
+                        <p>部门管理员入口</p>
+                        <img src="img/icon_jiantou.png" alt="">
+                    </a>
+                </div>
+            </div>
+	    <div class="mid-card0" style="display: none;">
+                <div class="mid-card">
+                    <div class="yuan-wai">
+                        <div class="yuan-li icon-13"></div>
+                    </div>
+                    <p>数据交换与消息服务</p>
+                </div>
+                <div class="rukou">
+                    <a href="http://39.98.206.39:6100/center/" target="_blank">
+                        <p>数据交换入口</p>
+                        <img src="img/icon_jiantou.png" alt="">
+                    </a>
+                </div>
+		<div class="rukou">
+                    <a href="http://39.98.206.39:8082" target="_blank">
+                        <p>消息服务入口</p>
+                        <img src="img/icon_jiantou.png" alt="">
+                    </a>
+                </div>
+		<div class="rukou">
+                    <a href="http://citysdk.dgtis.com:8080/hsdataplatformresdir" target="_blank">
+                        <p>资源目录入口</p>
+                        <img src="img/icon_jiantou.png" alt="">
+                    </a>
+                </div>
+            </div>
+        </div>
+        <div class="mid" style="display: none;">
+            <div class="mid-card0" style="display: none;">
+                <div class="mid-card">
+                    <div class="yuan-wai">
+                        <div class="yuan-li icon-4"></div>
+                    </div>
+                    <p>服务开发环境平台</p>
+                </div>
+                <div class="rukou">
+                    <a href="http://39.105.210.5:5151/devops-web/" target="_blank">
+                        <p>开发者入口</p>
+                        <img src="img/icon_jiantou.png" alt="">
+                    </a>
+                </div>
+            </div>
+	    <div class="mid-card0" style="display: none;">
+                <div class="mid-card">
+                    <div class="yuan-wai">
+                        <div class="yuan-li icon-11"></div>
+                    </div>
+                    <p>数据服务平台(DaaS)</p>
+                </div>
+                <div class="rukou">
+                    <a href="https://39.104.105.214:9002" target="_blank">
+                        <p>管理平台入口</p>
+                        <img src="img/icon_jiantou.png" alt="">
+                    </a>
+                </div>
+                <div class="rukou">
+                    <a href="https://39.104.175.149:9004/" target="_blank">
+                        <p>运行平台入口</p>
+                        <img src="img/icon_jiantou.png" alt="">
+                    </a>
+                </div>
+
+            </div>
+            <div class="mid-card0" style="display: none;">
+                    <div class="mid-card">
+                        <div class="yuan-wai">
+                            <div class="yuan-li icon-21"></div>
+                        </div>
+                        <p>大数据分析与可视化</p>
+                    </div>
+                    <div class="rukou">
+                        <a href="http://citysdk.dgtis.com:8088" target="_blank">
+                            <p>平台入口</p>
+                            <img src="img/icon_jiantou.png" alt="">
+                        </a>
+                    </div>
+                   
+                </div>
+        </div>
+        <div class="mid" style="display: none;">
+            <div class="mid-card0" style="display: none;">
+                <div class="mid-card">
+                    <div class="yuan-wai">
+                        <div class="yuan-li icon-1"></div>
+                    </div>
+                    <p>平台业务管理系统</p>
+                </div>
+                <div class="rukou">
+                    <a href="http://citysdk.dgtis.com:8080/hsdataplatform/" target="_blank">
+                        <p>平台运营管理入口</p>
+                        <img src="img/icon_jiantou.png" alt="">
+                    </a>
+                </div>
+                <div class="rukou rukou-h">
+                    <a href="http://citysdk.dgtis.com:8080/hsdataplatform/" target="_blank">
+                        <p>部门管理员入口</p>
+                        <img src="img/icon_jiantou.png" alt="">
+                    </a>
+                </div>
+            </div>
+            <div class="mid-card0" style="display: none;">
+                <div class="mid-card">
+                    <div class="yuan-wai">
+                        <div class="yuan-li icon-2"></div>
+                    </div>
+                    <p>大数据平台运行监控系统</p>
+                </div>
+                <div class="rukou">
+                    <a href="http://121.17.30.198:8097/" target="_blank">
+                        <p>平台运维入口</p>
+                        <img src="img/icon_jiantou.png" alt="">
+                    </a>
+                </div>
+            </div>
+            <div class="mid-card0" style="display: none;">
+                <div class="mid-card">
+                    <div class="yuan-wai">
+                        <div class="yuan-li icon-3"></div>
+                    </div>
+                    <p>PaaS管控平台</p>
+                </div>
+                <div class="rukou">
+                    <a href="http://39.105.210.5:5151/microservice-web" target="_blank">
+                        <p>平台运维入口</p>
+                        <img src="img/icon_jiantou.png" alt="">
+                    </a>
+                </div>
+                <div class="rukou">
+                    <a href="http://citysdk.dgtis.com:8080/hsdatagateway" target="_blank">
+                        <p>API网关</p>
+                        <img src="img/icon_jiantou.png" alt="">
+                    </a>
+                </div>
+                <div class="rukou">
+                    <a href="http://citysdk.dgtis.com:8080/hsdatagatewayapp" target="_blank">
+                        <p>微应用网关</p>
+                        <img src="img/icon_jiantou.png" alt="">
+                    </a>
+                </div>
+            </div>
+        </div>
+        <!--<div class="mid" style="display: none;">
+            <div class="mid-card0" style="display: none;">
+                <div class="mid-card">
+                    <div class="yuan-wai">
+                        <div class="yuan-li icon-11"></div>
+                    </div>
+                    <p>数据服务平台(DaaS)</p>
+                </div>
+                <div class="rukou">
+                    <a href="https://39.104.105.214:9002" target="_blank">
+                        <p>管理平台入口</p>
+                        <img src="img/icon_jiantou.png" alt="">
+                    </a>
+                </div>
+                <div class="rukou">
+                    <a href="https://39.104.175.149:9004/" target="_blank">
+                        <p>运行平台入口</p>
+                        <img src="img/icon_jiantou.png" alt="">
+                    </a>
+                </div>
+                
+            </div>
+            <div class="mid-card0" style="display: none;">
+                <div class="mid-card">
+                    <div class="yuan-wai">
+                        <div class="yuan-li icon-12"></div>
+                    </div>
+                    <p>消息服务</p>
+                </div>
+                <div class="rukou">
+                    <a href="http://39.98.206.39:8082" target="_blank">
+                        <p>监控入口</p>
+                        <img src="img/icon_jiantou.png" alt="">
+                    </a>
+                </div>
+            </div>
+            <div class="mid-card0" style="display: none;">
+                <div class="mid-card">
+                    <div class="yuan-wai">
+                        <div class="yuan-li icon-13"></div>
+                    </div>
+                    <p>数据交换</p>
+                </div>
+                <div class="rukou">
+                    <a href="http://39.98.206.39:6100/center/" target="_blank">
+                        <p>监控入口</p>
+                        <img src="img/icon_jiantou.png" alt="">
+                    </a>
+                </div>
+            </div>
+        </div>-->
+        <div class="bottom">
+            <div class="bottom-but clearfix" style="width: 100%;">
+                <div class="bottom-card0">
+                    <div class="big-card">
+                        <div class="little-card little-card1 little-card-active">
+                            <img src="img/img_jiankong.png" alt="">
+                        </div>
+                    </div>
+                </div>
+                <div class="bottom-card0">
+                    <div class="big-card">
+                        <div class="little-card little-card2">
+                            <img src="img/icon_ziyuan.png" alt="">
+                        </div>
+                    </div>
+                </div>
+                <div class="bottom-card0">
+                    <div class="big-card">
+                        <div class="little-card little-card3">
+                            <img src="img/icon_kaifa.png" alt="">
+                        </div>
+                    </div>
+                </div>
+                <div class="bottom-card0">
+                    <div class="big-card">
+                        <div class="little-card little-card4">
+                            <img src="img/img_pingtai.png" alt="">
+                        </div>
+                    </div>
+                </div>
+                <!--<div class="bottom-card0">
+                    <div class="big-card">
+                        <div class="little-card little-card5">
+                            <img src="img/icon_shuju.png" alt="">
+                        </div>
+                    </div>
+                </div>-->
+            </div>
+            <div class="bottom-font">
+                <ul>
+                    <li>城市运行监控</li>
+                    <li>城市资源开放、共享</li>
+                    <li>城市资源开发</li>
+                    <li>平台管理和运维</li>
+                    <!--<li>数据服务</li>-->
+                </ul>
+            </div>   
+        </div>
+    </div>
+
+    <script type="text/javascript" src="./js/jquery-2.1.4.min.js"></script>
+    <script type="text/javascript">
+        var isLoading = false;
+        $(function () {
+            $(".big-card").each(function (index, element) {
+                $(element).click(function () {
+                    if (isLoading){
+                        return;
+                    }
+                    isLoading = true;
+                    $(".little-card").removeClass("little-card-active");
+                    $(element).children(".little-card").addClass("little-card-active");
+                    var midShow = $(".mid").eq(index);
+                    var midHide = $(".mid:visible");
+                    if (midShow.is(midHide)) {
+                        isLoading = false;
+                        return;
+                    }
+                    midHide.children().slideUp(function () {
+                        midHide.hide();
+                        midShow.show();
+                        midShow.children().fadeIn();
+                        isLoading = false;
+                    });
+                })
+            })
+        });
+    </script>
+</body>
+</html>

index_20190407.html

@@ -0,0 +1,302 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>平台管理和运维</title>
+    <link rel="stylesheet" href="css/hsbigdata.css" type="text/css">
+</head>
+<body>
+    <div class="row">
+        <img src="img/logo.png" alt="" class="logo">
+        <img src="img/font.png" alt="" class="font">
+        <div class="mid">
+            <div class="mid-card2">
+                <div class="mid-card">
+                    <div class="yuan-wai">
+                        <div class="yuan-li icon-7"></div>
+                    </div>
+                    <p>城市运行监测预警平台</p>
+                </div>
+                <div class="rukou">
+                    <a href="http://citysdk.dgtis.com:8080/hsdatashow/" target="_blank">
+                        <p>市领导入口</p>
+                        <img src="img/icon_jiantou.png" alt="">
+                    </a>
+                </div>
+            </div>
+            <div class="mid-card2">
+                <div class="mid-card">
+                    <div class="yuan-wai">
+                        <div class="yuan-li icon-8"></div>
+                    </div>
+                    <p>水务水文运行监控系统</p>
+                </div>
+                <div class="rukou">
+                    <a href="http://citysdk.dgtis.com:8080/hsdatashow/topic/water/home/index.htm" target="_blank">
+                        <p>部门领导入口</p>
+                        <img src="img/icon_jiantou.png" alt="">
+                    </a>
+                </div>
+            </div>
+        </div>
+        <div class="mid" style="display: none;">
+            <div class="mid-card2" style="display: none;">
+                <div class="mid-card">
+                    <div class="yuan-wai">
+                        <div class="yuan-li icon-5"></div>
+                    </div>
+                    <p>资源开放平台</p>
+                </div>
+                <div class="rukou">
+                    <a href="http://citysdk.dgtis.com:8080/hsdataopen/" target="_blank">
+                        <p>公众入口</p>
+                        <img src="img/icon_jiantou.png" alt="">
+                    </a>
+                </div>
+                <div class="rukou">
+                    <a href="http://citysdk.dgtis.com:8080/hsdataopen/" target="_blank">
+                        <p>开发者入口</p>
+                        <img src="img/icon_jiantou.png" alt="">
+                    </a>
+                </div>
+            </div>
+            <div class="mid-card2" style="display: none;">
+                <div class="mid-card">
+                    <div class="yuan-wai">
+                        <div class="yuan-li icon-6"></div>
+                    </div>
+                    <p>资源共享平台</p>
+                </div>
+                <div class="rukou">
+                    <a href="http://citysdk.dgtis.com:8080/hsdatashare/" target="_blank">
+                        <p>部门管理员入口</p>
+                        <img src="img/icon_jiantou.png" alt="">
+                    </a>
+                </div>
+            </div>
+        </div>
+        <div class="mid" style="display: none;">
+            <div class="mid-card2" style="display: none;">
+                <div class="mid-card">
+                    <div class="yuan-wai">
+                        <div class="yuan-li icon-4"></div>
+                    </div>
+                    <p>服务开发环境平台</p>
+                </div>
+                <div class="rukou">
+                    <a href="http://39.105.210.5:5151/devops-web/" target="_blank">
+                        <p>开发者入口</p>
+                        <img src="img/icon_jiantou.png" alt="">
+                    </a>
+                </div>
+            </div>
+            <div class="mid-card2" style="display: none;">
+                    <div class="mid-card">
+                        <div class="yuan-wai">
+                            <div class="yuan-li icon-21"></div>
+                        </div>
+                        <p>大数据分析与可视化</p>
+                    </div>
+                    <div class="rukou">
+                        <a href="http://citysdk.dgtis.com:8088" target="_blank">
+                            <p>平台入口</p>
+                            <img src="img/icon_jiantou.png" alt="">
+                        </a>
+                    </div>
+                   
+                </div>
+        </div>
+        <div class="mid" style="display: none;">
+            <div class="mid-card0" style="display: none;">
+                <div class="mid-card">
+                    <div class="yuan-wai">
+                        <div class="yuan-li icon-1"></div>
+                    </div>
+                    <p>平台业务管理系统</p>
+                </div>
+                <div class="rukou">
+                    <a href="http://citysdk.dgtis.com:8080/hsdataplatform/" target="_blank">
+                        <p>平台运营管理入口</p>
+                        <img src="img/icon_jiantou.png" alt="">
+                    </a>
+                </div>
+                <div class="rukou rukou-h">
+                    <a href="http://citysdk.dgtis.com:8080/hsdataplatform/" target="_blank">
+                        <p>部门管理员入口</p>
+                        <img src="img/icon_jiantou.png" alt="">
+                    </a>
+                </div>
+            </div>
+            <div class="mid-card0" style="display: none;">
+                <div class="mid-card">
+                    <div class="yuan-wai">
+                        <div class="yuan-li icon-2"></div>
+                    </div>
+                    <p>大数据平台运行监控系统</p>
+                </div>
+                <div class="rukou">
+                    <a href="http://121.17.30.198:8097/" target="_blank">
+                        <p>平台运维入口</p>
+                        <img src="img/icon_jiantou.png" alt="">
+                    </a>
+                </div>
+            </div>
+            <div class="mid-card0" style="display: none;">
+                <div class="mid-card">
+                    <div class="yuan-wai">
+                        <div class="yuan-li icon-3"></div>
+                    </div>
+                    <p>PaaS管控平台</p>
+                </div>
+                <div class="rukou">
+                    <a href="http://39.105.210.5:5151/microservice-web" target="_blank">
+                        <p>平台运维入口</p>
+                        <img src="img/icon_jiantou.png" alt="">
+                    </a>
+                </div>
+                <div class="rukou">
+                    <a href="http://citysdk.dgtis.com:8080/hsdatagateway" target="_blank">
+                        <p>API网关</p>
+                        <img src="img/icon_jiantou.png" alt="">
+                    </a>
+                </div>
+                <div class="rukou">
+                    <a href="http://citysdk.dgtis.com:8080/hsdatagatewayapp" target="_blank">
+                        <p>微应用网关</p>
+                        <img src="img/icon_jiantou.png" alt="">
+                    </a>
+                </div>
+            </div>
+        </div>
+        <div class="mid" style="display: none;">
+            <div class="mid-card0" style="display: none;">
+                <div class="mid-card">
+                    <div class="yuan-wai">
+                        <div class="yuan-li icon-11"></div>
+                    </div>
+                    <p>数据服务平台(DaaS)</p>
+                </div>
+                <div class="rukou">
+                    <a href="https://39.104.105.214:9002" target="_blank">
+                        <p>管理平台入口</p>
+                        <img src="img/icon_jiantou.png" alt="">
+                    </a>
+                </div>
+                <div class="rukou">
+                    <a href="https://39.104.175.149:9004/" target="_blank">
+                        <p>运行平台入口</p>
+                        <img src="img/icon_jiantou.png" alt="">
+                    </a>
+                </div>
+                
+            </div>
+            <div class="mid-card0" style="display: none;">
+                <div class="mid-card">
+                    <div class="yuan-wai">
+                        <div class="yuan-li icon-12"></div>
+                    </div>
+                    <p>消息服务</p>
+                </div>
+                <div class="rukou">
+                    <a href="http://39.98.206.39:8082" target="_blank">
+                        <p>监控入口</p>
+                        <img src="img/icon_jiantou.png" alt="">
+                    </a>
+                </div>
+            </div>
+            <div class="mid-card0" style="display: none;">
+                <div class="mid-card">
+                    <div class="yuan-wai">
+                        <div class="yuan-li icon-13"></div>
+                    </div>
+                    <p>数据交换</p>
+                </div>
+                <div class="rukou">
+                    <a href="http://39.98.206.39:6100/center/" target="_blank">
+                        <p>监控入口</p>
+                        <img src="img/icon_jiantou.png" alt="">
+                    </a>
+                </div>
+            </div>
+        </div>
+        <div class="bottom">
+            <div class="bottom-but clearfix">
+                <div class="bottom-card0">
+                    <div class="big-card">
+                        <div class="little-card little-card1 little-card-active">
+                            <img src="img/img_jiankong.png" alt="">
+                        </div>
+                    </div>
+                </div>
+                <div class="bottom-card0">
+                    <div class="big-card">
+                        <div class="little-card little-card2">
+                            <img src="img/icon_ziyuan.png" alt="">
+                        </div>
+                    </div>
+                </div>
+                <div class="bottom-card0">
+                    <div class="big-card">
+                        <div class="little-card little-card3">
+                            <img src="img/icon_kaifa.png" alt="">
+                        </div>
+                    </div>
+                </div>
+                <div class="bottom-card0">
+                    <div class="big-card">
+                        <div class="little-card little-card4">
+                            <img src="img/img_pingtai.png" alt="">
+                        </div>
+                    </div>
+                </div>
+                <div class="bottom-card0">
+                    <div class="big-card">
+                        <div class="little-card little-card5">
+                            <img src="img/icon_shuju.png" alt="">
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="bottom-font">
+                <ul>
+                    <li>城市运行监控</li>
+                    <li>城市资源开放、共享</li>
+                    <li>城市资源开发</li>
+                    <li>平台管理和运维</li>
+                    <li>数据服务</li>
+                </ul>
+            </div>   
+        </div>
+    </div>
+
+    <script type="text/javascript" src="./js/jquery-2.1.4.min.js"></script>
+    <script type="text/javascript">
+        var isLoading = false;
+        $(function () {
+            $(".big-card").each(function (index, element) {
+                $(element).click(function () {
+                    if (isLoading){
+                        return;
+                    }
+                    isLoading = true;
+                    $(".little-card").removeClass("little-card-active");
+                    $(element).children(".little-card").addClass("little-card-active");
+                    var midShow = $(".mid").eq(index);
+                    var midHide = $(".mid:visible");
+                    if (midShow.is(midHide)) {
+                        isLoading = false;
+                        return;
+                    }
+                    midHide.children().slideUp(function () {
+                        midHide.hide();
+                        midShow.show();
+                        midShow.children().fadeIn();
+                        isLoading = false;
+                    });
+                })
+            })
+        });
+    </script>
+</body>
+</html>