diff --git a/css/demo.css b/css/demo.css
index 9de9ef8..2390a01 100644
--- a/css/demo.css
+++ b/css/demo.css
@@ -33,7 +33,7 @@ body{
 }
 /* .div-a{ position: fixed;width:400px;height:536px;padding:10px;z-index: 1;background-color: rgba(0,0,0,0.3);} 
 .div-b{ width:400px;height:536px;padding:5px;color:rgb(255, 255, 255);position: relative;}  */
-.div-a{ position: fixed;width:400px;height:100%;z-index: 1;background-color: rgba(0,0,0,0.3);} 
+/* .div-a{ position: fixed;height:100%;z-index: 1;background-color: rgba(0,0,0,0.3);}  */
 /* .div-b{ width:400px;height:536px;padding:5px;color:rgb(255, 255, 255);position: relative;} */
 .div-a{
   position: fixed;
@@ -46,15 +46,22 @@ body{
 .div-a.active{
   text-align: center;
   width: 100%;
+  height: 100%;
 }
-.div-a.active .div-c{
-  display: none;
-}
+
 .div-b,
 .div-c{
   color:rgb(255, 255, 255);
 }
-.div-b{ height: 60%; }
+.div-b{
+   height: 60%; 
+   background: green;
+}
+
+.div-b > div{
+  width: 100% !important;
+  height: 100% !important;
+}
 .div-c{ 
   position: relative;
   box-sizing: border-box;
@@ -67,6 +74,15 @@ body{
   content: '';
   border-top: 1px solid #fff;
 }
+
+.div-a.active .div-c{
+  display: none;
+}
+.div-a.active .div-b{
+  width: 100%;
+  height: 100%;
+}
+
 .div-video{
   height: 60%;
   /* background: pink; */
@@ -78,23 +94,16 @@ body{
 .screen-btn{
   position: absolute;
   right: 10px;
-  top: 10px;
+  top: 60px;
   color: #fff;
   z-index: 10;
   cursor: pointer;
   color: #fff;
 }
 
-.search-area{
-  position: fixed;
-  right: 20px;
-  top: 20px;
-  z-index: 10;
-  text-align: right;
-}
-
 .show_detail{
   position: relative;
+  top: 2px;
 }
 .more_icon{
   display: inline-block;
@@ -108,28 +117,31 @@ body{
   transform: rotate(90deg);
   font-size: 20px !important;
   cursor: pointer;
+  color: black;
   
 }
 
 .detail_info{
+  /* display: block; */
   display: none;
   position: absolute;
   background: #fff;
-  padding: 10px 0;
-  right: 40px;
-  top: -10px;
+  /* padding: 10px 0; */
+  left: 40px;
+  top: 6px;
   border-radius: 5px;
+  z-index: 50;
 }
 
 .detail_info::before{
   position: absolute;
-  left: 100%;
-  top: 18px;
+  right: 100%;
+  top: 12px;
   content: '';
   width: 0;
   height: 0;
-  border: 8px solid transparent;
-  border-left-color: #fff;
+  border: 6px solid transparent;
+  border-right-color: #fff;
 }
 .info_txt{
   width: 50px;
@@ -139,6 +151,7 @@ body{
   border-bottom: 1px solid #eee;
   cursor: pointer;
   text-align: left;
+  color: black;
   transition: color .3s;
 }
 .info_txt:hover{
@@ -149,14 +162,18 @@ body{
 }
 
 .search-prov{
+  position: relative;
+  top: 5px;
   font-size: 0;
+  margin-right: 10px;
   /* margin-top: 5px; */
 }
 
 .search-prov,
 .lat_lon_sec{
   display: none;
-  margin-top: 10px;
+  /* display: block; */
+  /* margin-top: 10px; */
 }
 
 .search_input,
@@ -184,32 +201,44 @@ body{
   width: 150px;
   padding: 0 15px;
 }
+
 .search_icon{
   cursor: pointer;
   width: 40px;
+  line-height: 40px;
   text-align: center;
   background: #fff;
   border: 1px solid #eee;
   box-sizing: border-box;
+  color: black;
   /* box-shadow: 5px 5px 10px #eee; */
 }
 
 .search_input_common{
+  position: relative;
+  top: -1px;
   outline: none;
   border: none;
-  padding: 5px 10px;
-  width: 50px;
+  /* padding: 5px 10px; */
+  width: 100px;
+  height: 40px;
+  padding: 0 10px;
 }
 
 .lat_lon_search{
+  display: inline-block;
+  vertical-align: top;
+  position: relative;
+  top: 5px;
   cursor: pointer;
   background: #fff;
-  display: inline-block;
-  height: 24px;
-  line-height: 24px;
-  width: 24px;
+  width: 40px;
+  height: 40px;
   vertical-align: top;
   text-align: center;
+  margin-right: 10px;
+  line-height: 42px;
+  color: black;
 }
 
 
diff --git a/css/flexleft.css b/css/flexleft.css
new file mode 100644
index 0000000..80a4525
--- /dev/null
+++ b/css/flexleft.css
@@ -0,0 +1,163 @@
+.fixed-left{
+  position: fixed;
+  top: 0px;
+  bottom: 0;
+  left: 0;
+  width: 0;
+  padding-top: 50px;
+  /* width: 400px; */
+  /* background: green; */
+  z-index: 10;
+  /* opacity: .3; */
+  z-index: 40;
+  transition: width .3s;
+  overflow: hidden;
+}
+
+.fixed-left.collpased{
+  width: 400px;
+}
+
+.fixed-left::before{
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  content: '';
+  background: rgba(0,0,0,0.3);
+}
+
+.fixed-left.active{
+  width: 100%;
+}
+
+.left_echart{
+  position: absolute;
+  width: 100%;
+  height: 60%;
+}
+
+.fixed-left.active .left_echart{
+  width: 100%;
+  height: 100%;
+  /* background: pink; */
+}
+.fixed-left.active::before{
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  content: '';
+  background: rgba(0,0,0,0.3);
+}
+.video_img{
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 40%;
+}
+
+.map_header{
+  display: flex;
+  position: fixed;
+  justify-content: space-between;
+  align-items: center;
+  height: 50px;
+  left: 0;
+  right: 0;
+  background: rgba(78, 173, 222, 1);
+  z-index: 50;
+  transition: .3s;
+}
+
+.logo_txt{
+  margin-left: 15px;
+  color: #fff;
+  font-size: 18px;
+}
+
+.logo_txt .collpase-icon{
+  margin-right: 5px;
+  cursor: pointer;
+}
+
+.user_info{
+  padding-right: 30px;
+  font-size: 0;
+}
+.user_info .info-item{
+  display: inline-block;
+  vertical-align: top;  
+  font-size: 14px;
+  color: #fff;
+  line-height: 50px;
+  cursor: pointer;
+}
+.info-item .user_img{
+  /* display: inline-block; */
+  position: relative;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  top: 10px;
+  margin-right: 10px;
+  
+}
+
+.info-item .user_nick{
+  font-size: 14px;
+}
+
+.drop-down{
+  position: relative;
+  margin-left: 10px;
+}
+.drop-down::before{
+  position: absolute;
+  content: '';
+  width: 0;
+  height: 0;
+  top: 50%;
+  right: -15px;
+  border: 5px solid transparent;
+  border-top-color: #fff;
+  margin-top: -2px;
+}
+
+.drop-down-list{
+  display: none;
+  position: absolute;
+  top: 55px;
+  right: -20px;
+  background: #fff;
+  padding: 10px 0;
+  line-height: 24px;
+  min-width: 80px;
+  text-align: right;
+}
+
+.drop-down-list::before{
+  position: absolute;
+  bottom: 100%;
+  right: 5px;
+  width: 0;
+  height: 0;
+  content: '';
+  border: 5px solid transparent;
+  border-bottom-color: #fff;
+}
+.drop-down-item{
+  padding: 0 15px;
+  font-size: 14px;
+  color: black;
+  transition: color .3s;
+}
+
+.drop-down-item:hover{
+  color: #1890ff;
+}
+
+
diff --git a/demo.html b/demo.html
index 4cb785c..4c049f7 100644
--- a/demo.html
+++ b/demo.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <title>map</title>
     <link href="./css/demo.css" rel="stylesheet">
+    <link rel="stylesheet" href="./css/flexleft.css">
     <link href="./css/slider.css" rel="stylesheet">
     <link href="./font/iconfont.css" rel="stylesheet">
     <!-- 引入 echarts.js -->
@@ -15,14 +16,117 @@
 </head>
 
 <body>
-    <div class="div-a">
+    <!-- 
+        增加点:
+            1. 头部文字与 用户信息
+            2. 加一个语音识别
+            3. 
+
+    -->
+    <!-- <div class="div-a"> -->
         <!-- 放大或缩小左侧图层-->
+        <!-- <div class="screen-btn screen-open" id="btn">
+            <span class="screen_icon iconfont icon-kuoda"></span>
+        </div> -->
+        <!-- <div class="div-b" id="mainGraph">知识图谱</div> -->
+        <!-- 视频与图片 -->
+        <!-- <div class="div-c">
+            <div class="div-video">
+                <video width="100%" height="100%" controls>
+                    <source src="movie.mp4" type="video/mp4">
+                    <source src="movie.ogg" type="video/ogg">
+                    Your browser does not support the video tag.
+                </video>
+            </div>
+            <div class="slider slider_one_big_picture">
+                <div>
+                    <img src="./image/1.jpg" />
+                </div>
+                <div>
+                    <img src="./image/2.jpg" />
+                </div>
+                <div>
+                    <img src="./image/3.jpg" />
+                </div>
+                <div>
+                    <img src="./image/4.jpg" />
+                </div>
+                <div>
+                    <img src="./image/5.jpg" />
+                </div>
+                <div>
+                    <img src="./image/6.jpg" />
+                </div>
+                <div>
+                    <img src="./image/7.jpg" />
+                </div>
+                <div>
+                    <img src="./image/8.jpg" />
+                </div>
+                <div>
+                    <img src="./image/9.jpg" />
+                </div>
+                <div class="next_button"></div>
+                <div class="prev_button"></div>
+                <div class="nav_indicators"></div>
+            </div>
+        </div> -->
+    <!-- </div>  -->
+    <div class="map_header">
+        <h2 class="logo_txt">
+            <span class="iconfont icon-zhankai collpase-icon"></span>
+            基于知识图谱的兵要信息平台
+        </h2>
+        <ul class="user_info">
+            <li class="info-item">
+                <div class="lat_lon_sec">
+                    <input
+                        onkeyup="this.value=this.value.replace(/[^\d.]/g, '')" 
+                        class="search_input_common lon" placeholder="经度" />
+                    <input 
+                        onkeyup="this.value=this.value.replace(/[^\d.]/g, '')" 
+                        class="search_input_common lat" placeholder="纬度" />
+                    <span class="iconfont icon-search lat_lon_search"></span>
+                </div>
+            </li>
+            <li class="info-item">
+                <div class="search-prov">
+                    <input class="search_input" placeholder="请输入地点" />
+                    <span class="search_icon iconfont icon-search">
+                    </span>
+                </div>
+            </li>
+
+            <li class="info-item">
+                <!-- 搜索,径纬度 区域 -->
+                <div class="search-area">
+                    <div class="show_detail">
+                        <span class="iconfont icon-gengduo more_icon"></span>
+                        <ul class="detail_info">
+                            <li class="info_txt" data-key="prov">地点</li>
+                            <li class="info_txt" data-key="lon">经纬度</li>
+                            <li class="info_txt" data-key="lon">语音</li>
+                        </ul>
+                    </div>
+                </div>
+            </li>
+            <li class="info-item drop-down">
+                <img class="user_img" src="./image/3.jpg" />
+                <span class="user_nick">
+                    admin
+                </span>
+                <ul class="drop-down-list">
+                    <li class="drop-down-item">退出</li>
+                </ul>
+            </li>
+            
+        </ul>
+    </div>
+    <div class="fixed-left">
         <div class="screen-btn screen-open" id="btn">
             <span class="screen_icon iconfont icon-kuoda"></span>
         </div>
-        <div class="div-b" id="mainGraph">知识图谱</div>
-        <!-- 视频与图片 -->
-        <div class="div-c">
+        <div class="video_img">
             <div class="div-video">
                 <video width="100%" height="100%" controls>
                     <source src="movie.mp4" type="video/mp4">
@@ -63,36 +167,18 @@
                 <div class="nav_indicators"></div>
             </div>
         </div>
-    </div> 
-    <!-- 搜索,径纬度 区域 -->
-    <div class="search-area">
-        <div class="show_detail">
-            <span class="iconfont icon-gengduo more_icon"></span>
-            <ul class="detail_info">
-                <li class="info_txt" data-key="prov">地点</li>
-                <li class="info_txt" data-key="lon">经纬度</li>
-            </ul>
-        </div>
-        <div class="search-prov">
-            <input class="search_input" placeholder="请输入地点" />
-            <span class="search_icon iconfont icon-search"></span>
-        </div>
-        <div class="lat_lon_sec">
-            <input
-                onkeyup="this.value=this.value.replace(/[^\d.]/g, '')" 
-                class="search_input_common lon" placeholder="经度" />
-            <input 
-                onkeyup="this.value=this.value.replace(/[^\d.]/g, '')" 
-                class="search_input_common lat" placeholder="纬度" />
-            <span class="iconfont icon-search lat_lon_search"></span>
-        </div>
+
+        <div class="left_echart" id="mainGraph"></div>
+        
     </div>
+    
     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
 
     <div id="main" style="width: 100%;height:100vh;"></div>
 
     <script type="text/javascript" src="./js/jQuery-1.8.3.min.js"></script>
     <script type="text/javascript" src="./js/jquery.easy_slides.js"></script>
+    <script type="text/javascript" src="./js/demo.js"></script>
     <script type="text/javascript">
         // 基于准备好的dom，初始化echarts实例，地图
         var myChart = echarts.init(document.getElementById('main'));
@@ -1368,26 +1454,6 @@
 
 </script>
 
-<script>
-    window.onload = function () {
-        var oBtn = document.querySelector('#btn');
-        oBtn.addEventListener('click', function () {
-            var oText = this.innerHTML;
-            var oParent = this.parentNode;
-            if (oParent.classList.contains('active')) {
-                oParent.classList.remove('active');
-                $('.screen_icon').addClass('icon-kuoda').removeClass('icon-suoxiao');
-                $('.search-area').show();
-            } else {
-                oParent.classList.add('active');
-                $('.screen_icon').addClass('icon-suoxiao').removeClass('icon-kuoda');
-                $('.search-area').hide();
-            }
-        }, false);
-
-    }
-</script>
-
 <script type="text/javascript">
     $(document).ready(function () {
         $('.slider_one_big_picture').EasySlides({
@@ -1404,17 +1470,19 @@
             $('.search_input').removeClass('active');
         });
 
+        // 搜索
         $('.more_icon').on('mouseover', function () {
             $('.detail_info').show();
         }).on('mouseout', function () {
             var timer = setTimeout(function () {
-                $('.detail_info').on('mouseover', function () {
-                    $('.detail_info').show();
-                }).on('mouseout', function () {
-                    $('.detail_info').hide();
-                });
-            }, 500);
-            $('.detail_info').hide();
+                $('.detail_info').hide();
+            }, 300);
+            $('.detail_info').on('mouseover', function () {
+                clearTimeout(timer);
+                $('.detail_info').show();
+            }).on('mouseout', function () {
+                $('.detail_info').hide();
+            });
         })
 
 
@@ -1468,6 +1536,11 @@
         $('.lat_lon_search').on('click', function () {
             latOrLonSearch();
         })
+
+        // 左侧滑屏结束后调用该事件，重新渲染知识图谱
+        $('.fixed-left').on('transitionend', function () {
+            console.log('滑屏结束时，调用渲染知识图谱');
+        })
     });
   </script>
 </body>
diff --git a/font/demo_index.html b/font/demo_index.html
index 17f821f..865aa06 100644
--- a/font/demo_index.html
+++ b/font/demo_index.html
@@ -40,6 +40,18 @@
                 <div class="code-name">&amp;#xe7ba;</div>
               </li>
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe771;</span>
+                <div class="name">展开</div>
+                <div class="code-name">&amp;#xe771;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe772;</span>
+                <div class="name">收起</div>
+                <div class="code-name">&amp;#xe772;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe62b;</span>
                 <div class="name">缩小</div>
@@ -120,6 +132,24 @@
             </div>
           </li>
           
+          <li class="dib">
+            <span class="icon iconfont icon-zhankai"></span>
+            <div class="name">
+              展开
+            </div>
+            <div class="code-name">.icon-zhankai
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-shouqi"></span>
+            <div class="name">
+              收起
+            </div>
+            <div class="code-name">.icon-shouqi
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-suoxiao"></span>
             <div class="name">
@@ -183,6 +213,22 @@
                 <div class="code-name">#icon-gengduo</div>
             </li>
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zhankai"></use>
+                </svg>
+                <div class="name">展开</div>
+                <div class="code-name">#icon-zhankai</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-shouqi"></use>
+                </svg>
+                <div class="name">收起</div>
+                <div class="code-name">#icon-shouqi</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-suoxiao"></use>
diff --git a/font/iconfont.css b/font/iconfont.css
index 30c0b5c..7d1a6c0 100644
--- a/font/iconfont.css
+++ b/font/iconfont.css
@@ -1,10 +1,10 @@
 @font-face {font-family: "iconfont";
-  src: url('iconfont.eot?t=1575968442554'); /* IE9 */
-  src: url('iconfont.eot?t=1575968442554#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAQIAAsAAAAACJQAAAO5AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDKgqEOINsATYCJAMUCwwABCAFhG0HTBt0B8iehbHzIjQqeeZs2X+PAP7Yey9+roMiMS1SR+WRNpCBbToeroEmPqsQ2N+3aQ9+aqQudE1q6jT5UGJkgKxoUtHjmvqtJqddv5qeUn/n+d8PePy9qhlj4TyLxWW9/7P2smAAwwEK0OxeXLJWpCDeRTybDP4n8HUCqvqtQSznldSAvUw9LyCc8BwD9pGAXDAelAXFjFszhAuwUY5D5CiAc+f3wx9EBXsQFRKob1rfy1VDxufq95HZmpZkBnN3MbB3kTABZMJRZmIH8hoTkKrcqzALlLV9kc81E9+3QtpqbCn7yqqqSDL5x4uEIqiOWqDO+7ItQ4Zf2kgEWRlAoCPwdb8p4pjuoooKHgC8IHVgR5REsdvRQWUEBH5lc93uZS8WiPn5utnZmrm52pGF8n1etedGnlgMSeHCQr0hc8fm2+OWiZEx82iHS10QTVtmLpWoYe/T5wlkeTLyyA/qry2leUWN8tRfP6Q2DJ8/fMSnnjr92PJE6TTideockGcPhx/7EzVnpWzycqkfuTcgD3cn9UcHpK8eHXvUkrSj5N0HX2rYZduz0d3vv28rbikwprirCJ50CxX0r92S9ebug9q0RynVRwbQjVvXv3vwxu0Bsp9Eg2eIGBKzEPm4OsOlIKTImEqHigZYayj2Z1wyIKMxz7WIfixsX5KOO3zaPJIDYuJjqCP//oVG10Z52PccOZodnx0QG+Xv+emT+nV0RXI126K6dc9fH01jRYrouOijPSe9y1AyFaBucn4EoYzzyJSFSNdawuP/v6NlnwobAP7LBDIDkE6JOes/AgStHOwDeJ+r5oxf7S4pv+2VCoBnL/fBXB01Nz9FVBk9bl+GAgKLgqvBQpYwg/m/gzRaMAtxydDTxR9zh2ZvunG2DWK2UmVtAUQlfZCUDRAzdQIKakxCUdkcVI3Lv7tGCxESsgMwpo9A0OgKRPWeIGk0RszU11DQ7jMUNQYEVRvB45E1hgJPZYuYkbGa7txI8yrBwOphmXLHqzBn0jFiGHeUdViU+DIdGRYRb+djAxa7uEJax0XJMkuzoqCn88jbsE4n0EZR0GCVHNYly8ak8HA265vCVIIeKEtEGEOGqdE6bUTjqQgMWGu9jEr8fBWMY6LDEAuWyvp1MJGE354WKUxEBWK+w1Bp6VT2S9bhRJHJWOoslkigR8uDGKbTGgKaMfuYBqYiC9PVoGaUJBxXsVUdYcO79Od4A6rUzxUCSSBCQdgQtlA8xYyo6rLjsIFTmwQ7yTi4gWcEG61JUDMAAAAA') format('woff2'),
-  url('iconfont.woff?t=1575968442554') format('woff'),
-  url('iconfont.ttf?t=1575968442554') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
-  url('iconfont.svg?t=1575968442554#iconfont') format('svg'); /* iOS 4.1- */
+  src: url('iconfont.eot?t=1576034900220'); /* IE9 */
+  src: url('iconfont.eot?t=1576034900220#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAATUAAsAAAAACjAAAASGAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDTgqHEIVyATYCJAMcCxAABCAFhG0HXxu5CMgusG3Yo5iAAtrKEQCAhQfKh74z38xs4oPg1tnWSQE4X5W+bv/XNCUWslGVKKuAtynWefdzQOkBCTN6/ibc3qTb1Hh4u73f3dKLW4aJZ1F2WxxgGnBUyO2ksEjA/v+fP2a61CrLZ98GNLWssuFoPE4eDdeXzWcnGKQnRreIZ5NLBSfnu/g8EICUJXdkPt49QhuH6wm0bZZB0E45cDVUQmwWllybQU4IiLvp9AaA2e7nyQ/fEAOUIIG/KHs9KFg3N/UxphiG8qSAgs4HYH4TwADuAA7IXhroVgsFd4x0m6uLB7uLxSja3NUh6l71seGBVgqEHs0V+aTkwqBJ/g9PiGA4FEgPbpADsVgvvHtKhUAAn9wRCEEdgoCAugcBA3UvAg7UxxyggBcd1wToAJkAsjCiv4E+B/kiSke5hMe15ZpyZTUzh4+MLiwdzz8mjx4VPniQ//Bhgepx1lKDgq2q03xnnvr4cZG0dMPoQ7f426qbihvVnviYdo+//8Eq5aZl/PLNRjoLNy5VLNkgHfG9jd/upLNxq2KL/SjlKijTUOGvrnsuN4AeG42KFvM9JBu5o16+Nt5vg2HhIr5PqjTctI0w/rTqpAmKbsNTOOfLNl5wQjric9uq1UZF0k2n+NP9fAYbt3ZYe0J5ypTk//SV452YJnSJo19JxzRly5kXT669l33kGnrk+Jf8xsn4uNqR778PcQc54+OOcPGDDrLkV48xsf9HjhdEngzPWz2V7T/4bVZP239oKp1CURqkKWmuFz6PW7RW8jhVdUUhuyCppEU9o2hYD4naqdPt8H01O37NHrffmX1njPtrjdUM/nEz+4TbiezZ2TfcbmQHf2864X7C8I9m+5/pk3ZNVfhl1aIyubG8tLysHDTouuWXfsP9huFvzTHT5TGawdURgJlyz5KLyucbVeqFmfkH+UtX//tn41fgq2dvWb0mLijOLMDXVP/Dh/qX6RFh7XS2k7z+r/cDN+s4foF+a2o2GGayMGmspImZECLLkmj4gI92AdH7/29N03tiHAAwjCNMAQCsVh4O88on9oeZOl11GMjSClT9Kw/B9XMYWzUK/y2W/VLTzwwn5qOivZLOJP4+ggT+g7aMGsyanZo7RXmjUrJ6JehzipZJkWBHylGAVIwB/76Irld0RoPRFCYkZhADJWIBjJg9liO6g4CMPwiJRYGUm6SbZfT0qiFZAsDVZAaEtt1AaToNjLabWI74EgQMfQYh7WAgVRh695RxjJZuXMgUs8LakdhSJ74u3XHXt9+zkbgUJtWO98xhZKXRx9M7Wz6xzyHFBX2DxrK/X8fGXvEwkb2MXVewu1ds1uJpc398XXl5NZZ90rSuy4OuOCFGYkxBtQqohUb4dDM51s19/z1mSLhIWDN0K/6MhSLW6siHJ+8W2JPBbzX0XHr7pAxL/ZjTocZ5q/CgRPQxVxQE6i7fZ2Oa2FRzj9zViheOamxrmI5v8l7nKQAp/sWioIQRjgiIkIiIGMLKFGpmq4l9QyXSGmWS75DV7DMlCaxWXyK5RdJoS0QRAAAA') format('woff2'),
+  url('iconfont.woff?t=1576034900220') format('woff'),
+  url('iconfont.ttf?t=1576034900220') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('iconfont.svg?t=1576034900220#iconfont') format('svg'); /* iOS 4.1- */
 }
 
 .iconfont {
@@ -23,6 +23,14 @@
   content: "\e7ba";
 }
 
+.icon-zhankai:before {
+  content: "\e771";
+}
+
+.icon-shouqi:before {
+  content: "\e772";
+}
+
 .icon-suoxiao:before {
   content: "\e62b";
 }
diff --git a/font/iconfont.eot b/font/iconfont.eot
index c420a1f..1cf46ed 100644
Binary files a/font/iconfont.eot and b/font/iconfont.eot differ
diff --git a/font/iconfont.js b/font/iconfont.js
index 84f6541..5109530 100644
--- a/font/iconfont.js
+++ b/font/iconfont.js
@@ -1 +1 @@
-!function(s){var e,l='<svg><symbol id="icon-search" viewBox="0 0 1024 1024"><path d="M1002.139794 894.317714l-185.051429-187.830857a73.874286 73.874286 0 0 0-36.644571-20.406857 438.345143 438.345143 0 0 0 77.897143-250.368C858.340937 195.072 666.194651 0 429.211794 0 192.155794 0 0.009508 195.072 0.009508 435.712s192.146286 435.785143 429.202286 435.785143a422.985143 422.985143 0 0 0 262.875428-91.355429c3.291429 12.361143 9.728 23.990857 19.236572 33.718857l185.051428 187.904a74.020571 74.020571 0 0 0 105.764572 0 76.873143 76.873143 0 0 0 0-107.446857z m-574.610286-136.630857c-175.908571 0-318.537143-144.822857-318.537143-323.510857 0-178.614857 142.628571-323.437714 318.537143-323.437714 175.981714 0 318.610286 144.822857 318.610286 323.437714 0 178.688-142.628571 323.510857-318.610286 323.510857z"  ></path></symbol><symbol id="icon-gengduo" viewBox="0 0 1024 1024"><path d="M795.2824707 596.53979492c-48.9440918 0-87.50610352-37.07885742-87.50610351-84.53979492s40.04516602-84.53979492 87.50610351-84.53979492c48.9440918 0 87.50610352 37.07885742 87.50610352 84.53979492s-40.04516602 84.53979492-87.50610352 84.53979492z m-283.2824707 0c-48.9440918 0-87.50610352-37.07885742-87.50610352-84.53979492s40.04516602-84.53979492 87.50610352-84.53979492c48.9440918 0 87.50610352 37.07885742 87.50610352 84.53979492s-38.56201172 84.53979492-87.50610352 84.53979492z m-283.2824707 0C181.2565918 596.53979492 141.21142578 557.9777832 141.21142578 512s40.04516602-84.53979492 87.50610352-84.53979492c48.9440918 0 87.50610352 37.07885742 87.50610351 84.53979492s-38.56201172 84.53979492-87.50610351 84.53979492z"  ></path></symbol><symbol id="icon-suoxiao" viewBox="0 0 1024 1024"><path d="M601.6 486.4h-1.536a63.168 63.168 0 0 1-22.336-4.608 63.936 63.936 0 0 1-40.064-57.856V108.8a64 64 0 0 1 128 0v159.104L914.688 18.752a64 64 0 0 1 90.496 90.496L756.096 358.4H915.2a64 64 0 0 1 0 128H601.6zM64 1024a64 64 0 0 1-45.248-109.248l249.152-249.216H108.8a64 64 0 0 1 0-128H423.936a63.36 63.36 0 0 1 22.4 4.672 64 64 0 0 1 40.064 57.792V915.2a64 64 0 0 1-128 0v-159.168l-249.152 249.216A63.808 63.808 0 0 1 64 1024z" fill="#999999" ></path></symbol><symbol id="icon-kuoda" viewBox="0 0 1024 1024"><path d="M601.570673 486.398688a63.99688 63.99688 0 0 1-45.245794-109.178677L805.464734 128.016159H646.36849a63.99688 63.99688 0 0 1 0-127.99376h313.392722a12.991367 12.991367 0 0 1 1.535925 0h0.19199a63.164921 63.164921 0 0 1 22.398908 4.671772A64.060877 64.060877 0 0 1 1023.950082 62.547351V377.603992a63.99688 63.99688 0 0 1-127.99376 0V218.571745l-249.139854 249.139854A63.80489 63.80489 0 0 1 601.570673 486.398688zM63.99688 1023.972481a11.647432 11.647432 0 0 0-1.535925 0 63.356911 63.356911 0 0 1-22.398908-4.607775 63.868886 63.868886 0 0 1-40.062047-57.789183V646.390888a63.99688 63.99688 0 0 1 127.99376 0v159.096245l249.139855-249.139855a63.99688 63.99688 0 0 1 90.491588 90.491589L218.485349 895.978721H377.581593a63.99688 63.99688 0 1 1 0 127.99376H63.99688z" fill="#999999" ></path></symbol></svg>',t=(e=document.getElementsByTagName("script"))[e.length-1].getAttribute("data-injectcss");if(t&&!s.__iconfont__svg__cssinject__){s.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(e){console&&console.log(e)}}!function(e){if(document.addEventListener)if(~["complete","loaded","interactive"].indexOf(document.readyState))setTimeout(e,0);else{var t=function(){document.removeEventListener("DOMContentLoaded",t,!1),e()};document.addEventListener("DOMContentLoaded",t,!1)}else document.attachEvent&&(o=e,a=s.document,i=!1,(l=function(){try{a.documentElement.doScroll("left")}catch(e){return void setTimeout(l,50)}n()})(),a.onreadystatechange=function(){"complete"==a.readyState&&(a.onreadystatechange=null,n())});function n(){i||(i=!0,o())}var o,a,i,l}(function(){var e,t,n,o,a,i;(e=document.createElement("div")).innerHTML=l,l=null,(t=e.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",n=t,(o=document.body).firstChild?(a=n,(i=o.firstChild).parentNode.insertBefore(a,i)):o.appendChild(n))})}(window);
\ No newline at end of file
+!function(s){var e,l='<svg><symbol id="icon-search" viewBox="0 0 1024 1024"><path d="M1002.139794 894.317714l-185.051429-187.830857a73.874286 73.874286 0 0 0-36.644571-20.406857 438.345143 438.345143 0 0 0 77.897143-250.368C858.340937 195.072 666.194651 0 429.211794 0 192.155794 0 0.009508 195.072 0.009508 435.712s192.146286 435.785143 429.202286 435.785143a422.985143 422.985143 0 0 0 262.875428-91.355429c3.291429 12.361143 9.728 23.990857 19.236572 33.718857l185.051428 187.904a74.020571 74.020571 0 0 0 105.764572 0 76.873143 76.873143 0 0 0 0-107.446857z m-574.610286-136.630857c-175.908571 0-318.537143-144.822857-318.537143-323.510857 0-178.614857 142.628571-323.437714 318.537143-323.437714 175.981714 0 318.610286 144.822857 318.610286 323.437714 0 178.688-142.628571 323.510857-318.610286 323.510857z"  ></path></symbol><symbol id="icon-gengduo" viewBox="0 0 1024 1024"><path d="M795.2824707 596.53979492c-48.9440918 0-87.50610352-37.07885742-87.50610351-84.53979492s40.04516602-84.53979492 87.50610351-84.53979492c48.9440918 0 87.50610352 37.07885742 87.50610352 84.53979492s-40.04516602 84.53979492-87.50610352 84.53979492z m-283.2824707 0c-48.9440918 0-87.50610352-37.07885742-87.50610352-84.53979492s40.04516602-84.53979492 87.50610352-84.53979492c48.9440918 0 87.50610352 37.07885742 87.50610352 84.53979492s-38.56201172 84.53979492-87.50610352 84.53979492z m-283.2824707 0C181.2565918 596.53979492 141.21142578 557.9777832 141.21142578 512s40.04516602-84.53979492 87.50610352-84.53979492c48.9440918 0 87.50610352 37.07885742 87.50610351 84.53979492s-38.56201172 84.53979492-87.50610351 84.53979492z"  ></path></symbol><symbol id="icon-zhankai" viewBox="0 0 1024 1024"><path d="M51.2 204.8a51.2 51.2 0 1 1 0-102.4h911.2064a51.2 51.2 0 1 1 0 102.4H51.2zM51.2 921.6a51.2 51.2 0 0 1 0-102.4h911.2064a51.2 51.2 0 1 1 0 102.4H51.2zM51.2 563.2a51.2 51.2 0 0 1 0-102.4h501.6064a51.2 51.2 0 1 1 0 102.4H51.2zM948.8384 501.9648l-199.8336-139.8784A20.48 20.48 0 0 0 716.8 378.88v279.7568a20.48 20.48 0 0 0 32.256 16.7424l199.7824-139.8784a20.48 20.48 0 0 0 0-33.536z"  ></path></symbol><symbol id="icon-shouqi" viewBox="0 0 1024 1024"><path d="M51.2 204.8a51.2 51.2 0 1 1 0-102.4h911.2064a51.2 51.2 0 1 1 0 102.4H51.2zM51.2 921.6a51.2 51.2 0 0 1 0-102.4h911.2064a51.2 51.2 0 1 1 0 102.4H51.2zM460.8 563.2a51.2 51.2 0 0 1 0-102.4h501.6064a51.2 51.2 0 1 1 0 102.4H460.8zM59.904 501.9648l199.8336-139.8784a20.48 20.48 0 0 1 32.256 16.7936v279.7568a20.48 20.48 0 0 1-32.256 16.7424L59.9552 535.552a20.48 20.48 0 0 1 0-33.536z"  ></path></symbol><symbol id="icon-suoxiao" viewBox="0 0 1024 1024"><path d="M601.6 486.4h-1.536a63.168 63.168 0 0 1-22.336-4.608 63.936 63.936 0 0 1-40.064-57.856V108.8a64 64 0 0 1 128 0v159.104L914.688 18.752a64 64 0 0 1 90.496 90.496L756.096 358.4H915.2a64 64 0 0 1 0 128H601.6zM64 1024a64 64 0 0 1-45.248-109.248l249.152-249.216H108.8a64 64 0 0 1 0-128H423.936a63.36 63.36 0 0 1 22.4 4.672 64 64 0 0 1 40.064 57.792V915.2a64 64 0 0 1-128 0v-159.168l-249.152 249.216A63.808 63.808 0 0 1 64 1024z" fill="#999999" ></path></symbol><symbol id="icon-kuoda" viewBox="0 0 1024 1024"><path d="M601.570673 486.398688a63.99688 63.99688 0 0 1-45.245794-109.178677L805.464734 128.016159H646.36849a63.99688 63.99688 0 0 1 0-127.99376h313.392722a12.991367 12.991367 0 0 1 1.535925 0h0.19199a63.164921 63.164921 0 0 1 22.398908 4.671772A64.060877 64.060877 0 0 1 1023.950082 62.547351V377.603992a63.99688 63.99688 0 0 1-127.99376 0V218.571745l-249.139854 249.139854A63.80489 63.80489 0 0 1 601.570673 486.398688zM63.99688 1023.972481a11.647432 11.647432 0 0 0-1.535925 0 63.356911 63.356911 0 0 1-22.398908-4.607775 63.868886 63.868886 0 0 1-40.062047-57.789183V646.390888a63.99688 63.99688 0 0 1 127.99376 0v159.096245l249.139855-249.139855a63.99688 63.99688 0 0 1 90.491588 90.491589L218.485349 895.978721H377.581593a63.99688 63.99688 0 1 1 0 127.99376H63.99688z" fill="#999999" ></path></symbol></svg>',t=(e=document.getElementsByTagName("script"))[e.length-1].getAttribute("data-injectcss");if(t&&!s.__iconfont__svg__cssinject__){s.__iconfont__svg__cssinject__=!0;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(e){console&&console.log(e)}}!function(e){if(document.addEventListener)if(~["complete","loaded","interactive"].indexOf(document.readyState))setTimeout(e,0);else{var t=function(){document.removeEventListener("DOMContentLoaded",t,!1),e()};document.addEventListener("DOMContentLoaded",t,!1)}else document.attachEvent&&(o=e,n=s.document,i=!1,(l=function(){try{n.documentElement.doScroll("left")}catch(e){return void setTimeout(l,50)}a()})(),n.onreadystatechange=function(){"complete"==n.readyState&&(n.onreadystatechange=null,a())});function a(){i||(i=!0,o())}var o,n,i,l}(function(){var e,t,a,o,n,i;(e=document.createElement("div")).innerHTML=l,l=null,(t=e.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",a=t,(o=document.body).firstChild?(n=a,(i=o.firstChild).parentNode.insertBefore(n,i)):o.appendChild(a))})}(window);
\ No newline at end of file
diff --git a/font/iconfont.json b/font/iconfont.json
index 10151ec..3d64671 100644
--- a/font/iconfont.json
+++ b/font/iconfont.json
@@ -19,6 +19,20 @@
       "unicode": "e7ba",
       "unicode_decimal": 59322
     },
+    {
+      "icon_id": "32852889",
+      "name": "展开",
+      "font_class": "zhankai",
+      "unicode": "e771",
+      "unicode_decimal": 59249
+    },
+    {
+      "icon_id": "32852890",
+      "name": "收起",
+      "font_class": "shouqi",
+      "unicode": "e772",
+      "unicode_decimal": 59250
+    },
     {
       "icon_id": "46750641",
       "name": "缩小",
diff --git a/font/iconfont.svg b/font/iconfont.svg
index 25d7a2b..9b4a313 100644
--- a/font/iconfont.svg
+++ b/font/iconfont.svg
@@ -26,6 +26,12 @@ Created by iconfont
     <glyph glyph-name="gengduo" unicode="&#59322;" d="M795.2824707 299.46020508000004c-48.9440918 0-87.50610352 37.07885742-87.50610351 84.53979492s40.04516602 84.53979492 87.50610351 84.53979492c48.9440918 0 87.50610352-37.07885742 87.50610352-84.53979492s-40.04516602-84.53979492-87.50610352-84.53979492z m-283.2824707 0c-48.9440918 0-87.50610352 37.07885742-87.50610352 84.53979492s40.04516602 84.53979492 87.50610352 84.53979492c48.9440918 0 87.50610352-37.07885742 87.50610352-84.53979492s-38.56201172-84.53979492-87.50610352-84.53979492z m-283.2824707 0C181.2565918 299.46020508000004 141.21142578 338.0222168 141.21142578 384s40.04516602 84.53979492 87.50610352 84.53979492c48.9440918 0 87.50610352-37.07885742 87.50610351-84.53979492s-38.56201172-84.53979492-87.50610351-84.53979492z"  horiz-adv-x="1024" />
 
     
+    <glyph glyph-name="zhankai" unicode="&#59249;" d="M51.2 691.2a51.2 51.2 0 1 0 0 102.4h911.2064a51.2 51.2 0 1 0 0-102.4H51.2zM51.2-25.6a51.2 51.2 0 0 0 0 102.4h911.2064a51.2 51.2 0 1 0 0-102.4H51.2zM51.2 332.8a51.2 51.2 0 0 0 0 102.4h501.6064a51.2 51.2 0 1 0 0-102.4H51.2zM948.8384 394.0352l-199.8336 139.8784A20.48 20.48 0 0 1 716.8 517.12v-279.7568a20.48 20.48 0 0 1 32.256-16.7424l199.7824 139.8784a20.48 20.48 0 0 1 0 33.536z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="shouqi" unicode="&#59250;" d="M51.2 691.2a51.2 51.2 0 1 0 0 102.4h911.2064a51.2 51.2 0 1 0 0-102.4H51.2zM51.2-25.6a51.2 51.2 0 0 0 0 102.4h911.2064a51.2 51.2 0 1 0 0-102.4H51.2zM460.8 332.8a51.2 51.2 0 0 0 0 102.4h501.6064a51.2 51.2 0 1 0 0-102.4H460.8zM59.904 394.0352l199.8336 139.8784a20.48 20.48 0 0 0 32.256-16.7936v-279.7568a20.48 20.48 0 0 0-32.256-16.7424L59.9552 360.448a20.48 20.48 0 0 0 0 33.536z"  horiz-adv-x="1024" />
+
+    
     <glyph glyph-name="suoxiao" unicode="&#58923;" d="M601.6 409.6h-1.536a63.168 63.168 0 0 0-22.336 4.608 63.936 63.936 0 0 0-40.064 57.856V787.2a64 64 0 0 0 128 0v-159.104L914.688 877.248a64 64 0 0 0 90.496-90.496L756.096 537.6H915.2a64 64 0 0 0 0-128H601.6zM64-128a64 64 0 0 0-45.248 109.248l249.152 249.216H108.8a64 64 0 0 0 0 128H423.936a63.36 63.36 0 0 0 22.4-4.672 64 64 0 0 0 40.064-57.792V-19.2a64 64 0 0 0-128 0v159.168l-249.152-249.216A63.808 63.808 0 0 0 64-128z"  horiz-adv-x="1024" />
 
     
diff --git a/font/iconfont.ttf b/font/iconfont.ttf
index 323f15e..4984621 100644
Binary files a/font/iconfont.ttf and b/font/iconfont.ttf differ
diff --git a/font/iconfont.woff b/font/iconfont.woff
index 6558b6e..1cf8c86 100644
Binary files a/font/iconfont.woff and b/font/iconfont.woff differ
diff --git a/font/iconfont.woff2 b/font/iconfont.woff2
index 3381857..19d36d0 100644
Binary files a/font/iconfont.woff2 and b/font/iconfont.woff2 differ
diff --git a/js/demo.js b/js/demo.js
new file mode 100644
index 0000000..caaf31b
--- /dev/null
+++ b/js/demo.js
@@ -0,0 +1,64 @@
+/*
+ * @Description: 
+ * @Author: tangjiang
+ * @Github: 
+ * @Date: 2019-12-11 09:17:17
+ * @LastEditors: tangjiang
+ * @LastEditTime: 2019-12-11 11:50:01
+ */
+$(document).ready(function () {
+  $('#btn').on('click', function () {
+    
+    if ($('.fixed-left').hasClass('active')) {
+      // 改变样式
+      $('.fixed-left').removeClass('active');
+      $('.video_img, .search-area').show();
+      $('.screen_icon').addClass('icon-kuoda').removeClass('icon-suoxiao');
+
+      // 重新加载知识图谱
+      
+    } else {
+      $('.fixed-left').addClass('active');
+      $('.video_img, .search-area').hide();
+      $('.screen_icon').addClass('icon-suoxiao').removeClass('icon-kuoda');
+    }
+  });
+
+  // 用户登录信息
+  $('.drop-down').on('mouseover', function () {
+    $('.drop-down-list').show();
+  }).on('mouseout', function () {
+    var timer = setTimeout(function () {
+      $('.drop-down-list').hide();
+    }, 300);
+    $('.drop-down-list').on('mouseover', function () {
+      clearTimeout(timer);
+      $('.drop-down-list').show();
+    }).on('mouseout', function () {
+      $('.drop-down-list').hide();
+    });  
+  });
+
+  // 收缩左侧侧边栏
+  $('.collpase-icon').on('click', function() {
+    if ($('.fixed-left').hasClass('collpased')) {
+      $('.fixed-left').removeClass('collpased');
+      $('.map_header').css({left: 0});
+      // $('.collpase-icon').remove('icon-zhankai').add('icon-shouqi');
+      // $('.collpase-icon').addClass('icon-zhankai').remove('icon-shouqi');
+    } else {
+      $('.fixed-left').addClass('collpased');
+      $('.map_header').css({left: '400px'});
+      // $('.collpase-icon').remove('icon-shouqi').add('icon-zhankai');
+    }
+
+    if ($(this).hasClass('icon-zhankai')) {
+      $(this).removeClass('icon-zhankai').addClass('icon-shouqi')
+    } else {
+      $(this).removeClass('icon-shouqi').addClass('icon-zhankai')
+    }
+    // $(this).hasClass('icon-zhankai')
+    //   ? $(this).removeClass('icon-zhankai').addClass('icon-shouqi')
+    //   : $(this).removeClass('icon-shouqi').addClass('icon-zhankai)
+  })
+});
\ No newline at end of file