syy

src/assets/iconfont/demo_index.html

@@ -55,6 +55,102 @@
           <ul class="icon_lists dib-box">
           
             <li class="dib">
+              <span class="icon iconfont">&#xe6f9;</span>
+                <div class="name">nav3</div>
+                <div class="code-name">&amp;#xe6f9;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe618;</span>
+                <div class="name">搜索</div>
+                <div class="code-name">&amp;#xe618;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe81f;</span>
+                <div class="name">值班</div>
+                <div class="code-name">&amp;#xe81f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe646;</span>
+                <div class="name">搜索</div>
+                <div class="code-name">&amp;#xe646;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe686;</span>
+                <div class="name">天气-暴雨转大暴雨</div>
+                <div class="code-name">&amp;#xe686;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe687;</span>
+                <div class="name">天气-暴雨</div>
+                <div class="code-name">&amp;#xe687;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe688;</span>
+                <div class="name">天气-大雪</div>
+                <div class="code-name">&amp;#xe688;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe689;</span>
+                <div class="name">天气-暴雪</div>
+                <div class="code-name">&amp;#xe689;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe68a;</span>
+                <div class="name">天气-多云</div>
+                <div class="code-name">&amp;#xe68a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe68b;</span>
+                <div class="name">天气-大雨转特大暴雨</div>
+                <div class="code-name">&amp;#xe68b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe68c;</span>
+                <div class="name">天气-晴</div>
+                <div class="code-name">&amp;#xe68c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe68d;</span>
+                <div class="name">天气-雷阵雨</div>
+                <div class="code-name">&amp;#xe68d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe68e;</span>
+                <div class="name">天气-雾</div>
+                <div class="code-name">&amp;#xe68e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe68f;</span>
+                <div class="name">天气-阴</div>
+                <div class="code-name">&amp;#xe68f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe690;</span>
+                <div class="name">天气-扬沙</div>
+                <div class="code-name">&amp;#xe690;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe691;</span>
+                <div class="name">天气-阵雨</div>
+                <div class="code-name">&amp;#xe691;</div>
+              </li>
+          
+            <li class="dib">
               <span class="icon iconfont">&#xe674;</span>
                 <div class="name">传感器</div>
                 <div class="code-name">&amp;#xe674;</div>
@@ -270,9 +366,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1690511239171') format('woff2'),
-       url('iconfont.woff?t=1690511239171') format('woff'),
-       url('iconfont.ttf?t=1690511239171') format('truetype');
+  src: url('iconfont.woff2?t=1691128774366') format('woff2'),
+       url('iconfont.woff?t=1691128774366') format('woff'),
+       url('iconfont.ttf?t=1691128774366') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -299,6 +395,150 @@
         <ul class="icon_lists dib-box">
           
           <li class="dib">
+            <span class="icon iconfont yj-icon-nav"></span>
+            <div class="name">
+              nav3
+            </div>
+            <div class="code-name">.yj-icon-nav
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont yj-icon-weibiaoti-"></span>
+            <div class="name">
+              搜索
+            </div>
+            <div class="code-name">.yj-icon-weibiaoti-
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont yj-icon-zhiban"></span>
+            <div class="name">
+              值班
+            </div>
+            <div class="code-name">.yj-icon-zhiban
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont yj-icon-sousuo"></span>
+            <div class="name">
+              搜索
+            </div>
+            <div class="code-name">.yj-icon-sousuo
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont yj-icon-tianqi-baoyuzhuandabaoyu"></span>
+            <div class="name">
+              天气-暴雨转大暴雨
+            </div>
+            <div class="code-name">.yj-icon-tianqi-baoyuzhuandabaoyu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont yj-icon-tianqi-baoyu"></span>
+            <div class="name">
+              天气-暴雨
+            </div>
+            <div class="code-name">.yj-icon-tianqi-baoyu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont yj-icon-tianqi-daxue"></span>
+            <div class="name">
+              天气-大雪
+            </div>
+            <div class="code-name">.yj-icon-tianqi-daxue
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont yj-icon-tianqi-baoxue"></span>
+            <div class="name">
+              天气-暴雪
+            </div>
+            <div class="code-name">.yj-icon-tianqi-baoxue
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont yj-icon-tianqi-duoyun"></span>
+            <div class="name">
+              天气-多云
+            </div>
+            <div class="code-name">.yj-icon-tianqi-duoyun
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont yj-icon-tianqi-dayuzhuantedabaoyu"></span>
+            <div class="name">
+              天气-大雨转特大暴雨
+            </div>
+            <div class="code-name">.yj-icon-tianqi-dayuzhuantedabaoyu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont yj-icon-tianqi-qing"></span>
+            <div class="name">
+              天气-晴
+            </div>
+            <div class="code-name">.yj-icon-tianqi-qing
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont yj-icon-tianqi-leizhenyu"></span>
+            <div class="name">
+              天气-雷阵雨
+            </div>
+            <div class="code-name">.yj-icon-tianqi-leizhenyu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont yj-icon-tianqi-wu"></span>
+            <div class="name">
+              天气-雾
+            </div>
+            <div class="code-name">.yj-icon-tianqi-wu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont yj-icon-tianqi-yin"></span>
+            <div class="name">
+              天气-阴
+            </div>
+            <div class="code-name">.yj-icon-tianqi-yin
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont yj-icon-tianqi-yangsha"></span>
+            <div class="name">
+              天气-扬沙
+            </div>
+            <div class="code-name">.yj-icon-tianqi-yangsha
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont yj-icon-tianqi-zhenyu"></span>
+            <div class="name">
+              天气-阵雨
+            </div>
+            <div class="code-name">.yj-icon-tianqi-zhenyu
+            </div>
+          </li>
+          
+          <li class="dib">
             <span class="icon iconfont yj-icon-centerdata-t-firecontrol-fire-pressure-sensor"></span>
             <div class="name">
               传感器
@@ -624,6 +864,134 @@
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#yj-icon-nav"></use>
+                </svg>
+                <div class="name">nav3</div>
+                <div class="code-name">#yj-icon-nav</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#yj-icon-weibiaoti-"></use>
+                </svg>
+                <div class="name">搜索</div>
+                <div class="code-name">#yj-icon-weibiaoti-</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#yj-icon-zhiban"></use>
+                </svg>
+                <div class="name">值班</div>
+                <div class="code-name">#yj-icon-zhiban</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#yj-icon-sousuo"></use>
+                </svg>
+                <div class="name">搜索</div>
+                <div class="code-name">#yj-icon-sousuo</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#yj-icon-tianqi-baoyuzhuandabaoyu"></use>
+                </svg>
+                <div class="name">天气-暴雨转大暴雨</div>
+                <div class="code-name">#yj-icon-tianqi-baoyuzhuandabaoyu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#yj-icon-tianqi-baoyu"></use>
+                </svg>
+                <div class="name">天气-暴雨</div>
+                <div class="code-name">#yj-icon-tianqi-baoyu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#yj-icon-tianqi-daxue"></use>
+                </svg>
+                <div class="name">天气-大雪</div>
+                <div class="code-name">#yj-icon-tianqi-daxue</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#yj-icon-tianqi-baoxue"></use>
+                </svg>
+                <div class="name">天气-暴雪</div>
+                <div class="code-name">#yj-icon-tianqi-baoxue</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#yj-icon-tianqi-duoyun"></use>
+                </svg>
+                <div class="name">天气-多云</div>
+                <div class="code-name">#yj-icon-tianqi-duoyun</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#yj-icon-tianqi-dayuzhuantedabaoyu"></use>
+                </svg>
+                <div class="name">天气-大雨转特大暴雨</div>
+                <div class="code-name">#yj-icon-tianqi-dayuzhuantedabaoyu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#yj-icon-tianqi-qing"></use>
+                </svg>
+                <div class="name">天气-晴</div>
+                <div class="code-name">#yj-icon-tianqi-qing</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#yj-icon-tianqi-leizhenyu"></use>
+                </svg>
+                <div class="name">天气-雷阵雨</div>
+                <div class="code-name">#yj-icon-tianqi-leizhenyu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#yj-icon-tianqi-wu"></use>
+                </svg>
+                <div class="name">天气-雾</div>
+                <div class="code-name">#yj-icon-tianqi-wu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#yj-icon-tianqi-yin"></use>
+                </svg>
+                <div class="name">天气-阴</div>
+                <div class="code-name">#yj-icon-tianqi-yin</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#yj-icon-tianqi-yangsha"></use>
+                </svg>
+                <div class="name">天气-扬沙</div>
+                <div class="code-name">#yj-icon-tianqi-yangsha</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#yj-icon-tianqi-zhenyu"></use>
+                </svg>
+                <div class="name">天气-阵雨</div>
+                <div class="code-name">#yj-icon-tianqi-zhenyu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#yj-icon-centerdata-t-firecontrol-fire-pressure-sensor"></use>
                 </svg>
                 <div class="name">传感器</div>

src/assets/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4184217 */
-  src: url('iconfont.woff2?t=1690511239171') format('woff2'),
-       url('iconfont.woff?t=1690511239171') format('woff'),
-       url('iconfont.ttf?t=1690511239171') format('truetype');
+  src: url('iconfont.woff2?t=1691128774366') format('woff2'),
+       url('iconfont.woff?t=1691128774366') format('woff'),
+       url('iconfont.ttf?t=1691128774366') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,70 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.yj-icon-nav:before {
+  content: "\e6f9";
+}
+
+.yj-icon-weibiaoti-:before {
+  content: "\e618";
+}
+
+.yj-icon-zhiban:before {
+  content: "\e81f";
+}
+
+.yj-icon-sousuo:before {
+  content: "\e646";
+}
+
+.yj-icon-tianqi-baoyuzhuandabaoyu:before {
+  content: "\e686";
+}
+
+.yj-icon-tianqi-baoyu:before {
+  content: "\e687";
+}
+
+.yj-icon-tianqi-daxue:before {
+  content: "\e688";
+}
+
+.yj-icon-tianqi-baoxue:before {
+  content: "\e689";
+}
+
+.yj-icon-tianqi-duoyun:before {
+  content: "\e68a";
+}
+
+.yj-icon-tianqi-dayuzhuantedabaoyu:before {
+  content: "\e68b";
+}
+
+.yj-icon-tianqi-qing:before {
+  content: "\e68c";
+}
+
+.yj-icon-tianqi-leizhenyu:before {
+  content: "\e68d";
+}
+
+.yj-icon-tianqi-wu:before {
+  content: "\e68e";
+}
+
+.yj-icon-tianqi-yin:before {
+  content: "\e68f";
+}
+
+.yj-icon-tianqi-yangsha:before {
+  content: "\e690";
+}
+
+.yj-icon-tianqi-zhenyu:before {
+  content: "\e691";
+}
+
 .yj-icon-centerdata-t-firecontrol-fire-pressure-sensor:before {
   content: "\e674";
 }

src/assets/iconfont/iconfont.json

@@ -6,6 +6,118 @@
   "description": "",
   "glyphs": [
     {
+      "icon_id": "1409956",
+      "name": "nav3",
+      "font_class": "nav",
+      "unicode": "e6f9",
+      "unicode_decimal": 59129
+    },
+    {
+      "icon_id": "10878295",
+      "name": "搜索",
+      "font_class": "weibiaoti-",
+      "unicode": "e618",
+      "unicode_decimal": 58904
+    },
+    {
+      "icon_id": "17711615",
+      "name": "值班",
+      "font_class": "zhiban",
+      "unicode": "e81f",
+      "unicode_decimal": 59423
+    },
+    {
+      "icon_id": "12439745",
+      "name": "搜索",
+      "font_class": "sousuo",
+      "unicode": "e646",
+      "unicode_decimal": 58950
+    },
+    {
+      "icon_id": "5128999",
+      "name": "天气-暴雨转大暴雨",
+      "font_class": "tianqi-baoyuzhuandabaoyu",
+      "unicode": "e686",
+      "unicode_decimal": 59014
+    },
+    {
+      "icon_id": "5129000",
+      "name": "天气-暴雨",
+      "font_class": "tianqi-baoyu",
+      "unicode": "e687",
+      "unicode_decimal": 59015
+    },
+    {
+      "icon_id": "5129002",
+      "name": "天气-大雪",
+      "font_class": "tianqi-daxue",
+      "unicode": "e688",
+      "unicode_decimal": 59016
+    },
+    {
+      "icon_id": "5129004",
+      "name": "天气-暴雪",
+      "font_class": "tianqi-baoxue",
+      "unicode": "e689",
+      "unicode_decimal": 59017
+    },
+    {
+      "icon_id": "5129007",
+      "name": "天气-多云",
+      "font_class": "tianqi-duoyun",
+      "unicode": "e68a",
+      "unicode_decimal": 59018
+    },
+    {
+      "icon_id": "5129010",
+      "name": "天气-大雨转特大暴雨",
+      "font_class": "tianqi-dayuzhuantedabaoyu",
+      "unicode": "e68b",
+      "unicode_decimal": 59019
+    },
+    {
+      "icon_id": "5129013",
+      "name": "天气-晴",
+      "font_class": "tianqi-qing",
+      "unicode": "e68c",
+      "unicode_decimal": 59020
+    },
+    {
+      "icon_id": "5129014",
+      "name": "天气-雷阵雨",
+      "font_class": "tianqi-leizhenyu",
+      "unicode": "e68d",
+      "unicode_decimal": 59021
+    },
+    {
+      "icon_id": "5129019",
+      "name": "天气-雾",
+      "font_class": "tianqi-wu",
+      "unicode": "e68e",
+      "unicode_decimal": 59022
+    },
+    {
+      "icon_id": "5129023",
+      "name": "天气-阴",
+      "font_class": "tianqi-yin",
+      "unicode": "e68f",
+      "unicode_decimal": 59023
+    },
+    {
+      "icon_id": "5129028",
+      "name": "天气-扬沙",
+      "font_class": "tianqi-yangsha",
+      "unicode": "e690",
+      "unicode_decimal": 59024
+    },
+    {
+      "icon_id": "5129031",
+      "name": "天气-阵雨",
+      "font_class": "tianqi-zhenyu",
+      "unicode": "e691",
+      "unicode_decimal": 59025
+    },
+    {
       "icon_id": "21053689",
       "name": "传感器",
       "font_class": "centerdata-t-firecontrol-fire-pressure-sensor",

src/assets/static/yj-base.css

@@ -116,13 +116,13 @@ aside {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 
-  
+
 }
 a {
     color: #337ab7;
     cursor: pointer;
 
-    
+
   }
 a:hover {
       color: rgb(32, 160, 255);
@@ -157,11 +157,11 @@ h1,h2,h3,h4,h5,h6{
   padding: 0 .3rem;
   height: 1.5rem;
   background-color: #112543;
-  color: $inBlue;
-  border: 1px $searchBorder;
+  color: #2BACF7;
+  border: 1px solid #33467f;
 }
 .sj-icon-btn:hover {
-  text-shadow: 0 0 15px rgba($color: $inBlueHover, $alpha: 1.0);
+  text-shadow: 0 0 15px #07ffc1;
 }
 
 .el-select-dropdown {
@@ -169,12 +169,12 @@ h1,h2,h3,h4,h5,h6{
   background-color: rgba(1, 28, 82, 0.8);
 }
 .el-select-dropdown__item{
-  color: $white;
+  color: #fff;
 }
 .el-select-dropdown{
   background-color: #00335c;
   border: solid 1px #56dfff;
-  color: $white;
+  color: #fff;
 }
 .el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
   background-color: #035faa;
@@ -191,7 +191,7 @@ h1,h2,h3,h4,h5,h6{
 }
 
 #toolbar {
-  color: $inBlue;
+  color: #2BACF7;
 }
 .sj-search {
   padding:.5rem .8rem;
@@ -335,6 +335,9 @@ h1,h2,h3,h4,h5,h6{
 .h-55 {
   height: 55vh;
 }
+.h-58 {
+  height: 58vh;
+}
 
 .h-60 {
   height: 59vh;
@@ -507,4 +510,127 @@ h1,h2,h3,h4,h5,h6{
 		color: #fff;
 		padding-left: 8px;
 		line-height: 38px;
-	}
+	}
+
+
+	.yj-search{
+		width: 100%;
+		background-color: rgb(5 52 126 / 93%);
+		border: 1px solid #084baf;
+		border-radius: 50px;
+		height: 40px;
+		line-height: 40px;
+		margin-top: 20px;
+		position: relative;
+	}
+	.yj-search .inp-txt .el-input__inner{
+		background: none!important;
+		color:#f5f5f5;
+		outline: 0px;
+		border: 0px;
+	}
+
+	.yj-search .el-button{
+		position: absolute;
+		right: 0px;
+		background: none!important;
+		color:#f5f5f5;
+		outline: 0px;
+		border: 0px;
+	}
+    .yj-topnav .el-checkbox__input .el-checkbox__inner{
+        background: none;
+        border: 1px solid #0bf3f7;
+        width: 10px;
+        height: 10px;
+        display: none;
+    }
+    .yj-topnav .el-checkbox__label{
+        color: #fff;
+        padding: 0px;
+    }
+    .yj-topnav  .el-checkbox__input.is-checked+.el-checkbox__label{
+        color: #0bf3f7;
+        text-shadow: 0px 0px 3px #2cb8f7;
+    }
+    .yj-topnav .el-checkbox__inner::after{
+        color: #0bf3f7;
+        text-shadow: 0px 0px 3px #2cb8f7;
+    }
+.yj-topnav .el-checkbox{
+    background: url("../images/yj-topnavbg1-on.png") no-repeat center;
+    background-size: 100% 100%;
+    color: #fff;
+    /*padding: 5px 15px;*/
+    /*border-radius: 50px;*/
+    margin-right: 15px;
+    font-size: 12px;
+    width: 120px;
+    height: 42px;
+    line-height: 42px;
+}
+.yj-topnav .is-checked{
+    background: url("../images/yj-topnavbg-on.png") no-repeat center;
+}
+
+
+ .leaflet-popup-content-wrapper {
+     background-image: -moz-linear-gradient(180deg,#1541A0,#1541a0)!important;
+     background-image: -webkit-linear-gradient(180deg, #1541A0,#1541a0) !important;
+     background-image: linear-gradient(180deg, #1541A0,#1541a0)!important;
+     box-shadow: 0 -0.2rem .5rem 0.3rem rgba(13,192,219, .09) inset !important;
+     color: #3cd7ef !important;
+
+
+ }
+.leaflet-popup-tip{
+    background: #3061c9 !important;
+    color: #333;
+    box-shadow:none !important;
+}
+.map-tip .d-l-con {
+    width: 100%;
+    box-shadow: none;
+    cursor: auto;
+}
+.map-tip .d-l-con .d-l-l-text {
+    width: 100%;
+}
+.map-tip .d-l-con .d-l-l-text h4 {
+    color:#fff;
+}
+
+
+.dia-left-top {
+    width: 16.3rem;
+    display: flex;
+    color: #2BACF7;
+    align-items: center;
+    border: 1px solid rgba(51, 70, 127, .7);
+    padding: 0.5rem 1rem;
+    position: absolute;
+    background: linear-gradient(180deg, #0d2760, #081a41);
+    z-index: 999;
+    left: 1rem;
+    top: 1rem;
+}
+
+.dia-left-top .dia-left-top-tit {
+    width: 6.3rem;
+    padding: .5rem;
+    background: linear-gradient(180deg, #0d2760, #18377e);
+}
+
+.dia-left-top-carousel {
+    width: 10rem;
+    padding-left: 1rem;
+    overflow: hidden;
+}
+.dia-left-top-carousel .el-carousel__indicator {
+    display: none;
+}
+
+.el-carousel__item {
+    display: flex;
+    align-items: center;
+}

src/components/Btmbutton.vue

@@ -5,6 +5,9 @@
 	  <div class="btmbutton">
 
 		  <div class="btmbutton-con">
+			  <!--<div class="btm-left-btn">-->
+				  <!--<a class="btm-btn">值班信息</a>-->
+			  <!--</div>-->
 			  <div class="yj-name" style="text-indent: 1em">张雨晴</div>
 			  <div class="model-tab">
 				  <button class="on" @click="goJiaShi">驾驶模式</button>
@@ -39,7 +42,6 @@
 				  <p><i class="iconfont yj-icon-tongxunlu"></i>通讯录</p>
 				  <p><i class="iconfont yj-icon-weizhi"></i>人员定位</p>
 				  <p><i class="iconfont yj-icon-taizhang"></i>事件台账</p>
-				  <p><i class="iconfont yj-icon-dianshiqiang"></i>电视墙</p>
 				  <div class="btm-cs">
 					  <b>72</b>
 					  <span>传感器</span>
@@ -48,27 +50,18 @@
 			  <div class="btn-right">
 				  <p>物联网<i class="iconfont yj-icon-wulianwang"></i></p>
 				  <p>视联网<i class="iconfont yj-icon-shilianwang"></i></p>
+				  <p>电视墙<i class="iconfont yj-icon-dianshiqiang"></i></p>
 				  <div class="btm-cs">
 					  <b>160</b>
 					  <span>摄像头</span>
 				  </div>
 			  </div>
-
 		  </div>
 
 	  </div>
 
   </div>
-  <div class="btm-left-btn">
-  	<a class="btm-btn">值班信息</a>
-  </div>
-  <div class="btm-right-btn">
-  	<a class="btm-btn">重点关注</a>
-	<a class="btm-btn">地灾点</a>
-	<a class="btm-btn">救援物资</a>
-	<a class="btm-btn">救援队伍</a>
-	<a class="btm-btn">防控区</a>
-  </div>
+
 </div>
 </template>
 <script>
@@ -309,7 +302,7 @@ export default {
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-		margin-top: 10px;
+		margin-top: 25px;
 	}
 	.btm-cs b{
 		font-size: 50px;
@@ -356,13 +349,16 @@ export default {
 	.btn-right p:nth-child(2){
 		margin-left: 13px;
 	}
+	.btn-right p:nth-child(3){
+		margin-left: 28px;
+	}
 	.btn-right .btm-cs{
-		margin-top: 70px;
+		margin-top: 25px;
 	}
 	.btm-left-btn{
-		position: fixed;
-		left: 395px;
-		bottom:18px;
+		position: absolute;
+		left: 90px;
+		top: -26px;
 		z-index: 99;
 		display: flex;
 		flex-direction: row;

src/components/Cjmsheader.vue

@@ -2,7 +2,7 @@
 	<div class="Cjmsheader">
 		<div class="time">{{nowdate}}&nbsp;&nbsp;{{nowtime}}</div>
 		<div class="header">
-			  <p>延吉市数字应急自然灾害综合风险监管平台</p>
+			  <p>延吉市自然灾害综合风险普查成果应用平台</p>
 		</div>
 		<div class="yj-name" style="text-indent: 1em">张雨晴</div>
 	</div>

src/components/Header.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="header">
-	  <p>延吉市数字应急自然灾害综合风险监管平台</p>
+	  <p>延吉市自然灾害综合风险普查成果应用平台</p>
   </div>
 </template>
 
@@ -8,7 +8,7 @@
 export default {
   name: 'Header',
   props: {
-	  
+
   }
 }
 </script>

src/components/Leftnav.vue

@@ -1,288 +1,380 @@
-<template>
-	<div class="nav">
-		<div class="nav-cont">
-			<div class="nav-tit">
-				<div class="nav-circle">
-					<img src="../assets/images/yj-tity1.png" />
-				</div>
-				<p>市指挥部</p>
-			</div>
-			<div class="left-table">
-				<div class="bz-name">
-					<img src="../assets/images/yj-navimg2.png"/>
-					<p>班长</p>
-				</div>
-				<div class="bz-table">
-					<div class="bz-head">
-						<span>序号</span>
-						<span>姓名</span>
-						<span>电话</span>
-					</div>
-					<div class="scroll h-16">
-						<div class="bz-td">
-							<span>01</span>
-							<span>王&nbsp;&nbsp;&nbsp;毅</span>
-							<span>15689963655</span>
-						</div>
-						<div class="bz-td">
-							<span>02</span>
-							<span>周&nbsp;&nbsp;&nbsp;晓</span>
-							<span>15689996355</span>
-						</div>
-						<div class="bz-td">
-							<span>03</span>
-							<span>孙美玲</span>
-							<span>15678563254</span>
-						</div>
-						<div class="bz-td">
-							<span>04</span>
-							<span>王&nbsp;&nbsp;&nbsp;丽</span>
-							<span>15963325636</span>
-						</div>
-						<div class="bz-td">
-							<span>05</span>
-							<span>崔&nbsp;&nbsp;&nbsp;松</span>
-							<span>13856988745</span>
-						</div>
-						<div class="bz-td">
-							<span>06</span>
-							<span>于洪富</span>
-							<span>15904468899</span>
-						</div>
-						<div class="bz-td">
-							<span>07</span>
-							<span>李凤武</span>
-							<span>13351508889</span>
-						</div>
-						<div class="bz-td">
-							<span>08</span>
-							<span>李双旭</span>
-							<span>13331658988</span>
-						</div>
-					</div>
-				</div>
-			</div>
-			<div class="nav-tit">
-				<div class="nav-circle">
-					<img src="../assets/images/yj-tity1.png" />
-				</div>
-				<p>县区指挥部</p>
-			</div>
-			<h6 class="nav-wz"><i class="iconfont yj-icon-weizhi"></i>东兴县</h6>
-			<div class="left-table">
-				<div class="bz-name">
-					<img src="../assets/images/yj-navimg2.png"/>
-					<p>班长</p>
-				</div>
-				<div class="bz-table">
-					<div class="bz-head">
-						<span>序号</span>
-						<span>姓名</span>
-						<span>电话</span>
-					</div>
-					<div class="scroll h-16">
-						<div class="bz-td">
-							<span>01</span>
-							<span>陆长吉</span>
-							<span>13596109074</span>
-						</div>
-						<div class="bz-td">
-							<span>02</span>
-							<span>王淑芬</span>
-							<span>13943054203</span>
-						</div>
-						<div class="bz-td">
-							<span>03</span>
-							<span>李健英</span>
-							<span>13354305001</span>
-						</div>
-						<div class="bz-td">
-							<span>04</span>
-							<span>刘&nbsp;&nbsp;&nbsp;铁</span>
-							<span>13244318887</span>
-						</div>
-						<div class="bz-td">
-							<span>05</span>
-							<span>许德新</span>
-							<span>13596192378</span>
-						</div>
-						<div class="bz-td">
-							<span>06</span>
-							<span>丁国富</span>
-							<span>15843109515</span>
-						</div>
-						<div class="bz-td">
-							<span>07</span>
-							<span>张丽宝</span>
-							<span>13756289955</span>
-						</div>
-						<div class="bz-td">
-							<span>08</span>
-							<span>刘洪吉</span>
-							<span>15643712332</span>
-						</div>
-					</div>
-				</div>
-			</div>
-			<h6 class="nav-wz"><i class="iconfont yj-icon-weizhi"></i>长胜县</h6>
-			<div class="left-table">
-				<div class="bz-name">
-					<img src="../assets/images/yj-navimg2.png"/>
-					<p>班长</p>
-				</div>
-				<div class="bz-table">
-					<div class="bz-head">
-						<span>序号</span>
-						<span>姓名</span>
-						<span>电话</span>
-					</div>
-					<div class="scroll h-16">
-						<div class="bz-td">
-							<span>01</span>
-							<span>徐&nbsp;&nbsp;&nbsp;多</span>
-							<span>13756614567</span>
-						</div>
-						<div class="bz-td">
-							<span>02</span>
-							<span>鲁&nbsp;&nbsp;&nbsp;晶</span>
-							<span>13944919611</span>
-						</div>
-						<div class="bz-td">
-							<span>03</span>
-							<span>赵淑芬</span>
-							<span>13199107629</span>
-						</div>
-						<div class="bz-td">
-							<span>04</span>
-							<span>郑&nbsp;&nbsp;&nbsp;玲</span>
-							<span>13944191043</span>
-						</div>
-						<div class="bz-td">
-							<span>05</span>
-							<span>佟&nbsp;&nbsp;&nbsp;佟</span>
-							<span>13943139381</span>
-						</div>
-						<div class="bz-td">
-							<span>06</span>
-							<span>许久康</span>
-							<span>19975872187</span>
-						</div>
-						<div class="bz-td">
-							<span>07</span>
-							<span>刘新新</span>
-							<span>13086861398</span>
-						</div>
-						<div class="bz-td">
-							<span>08</span>
-							<span>马永生</span>
-							<span>17037468333</span>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script>
-	export default {
-		name: 'Leftnav',
-		props: {
-
-		}
-	}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-	.nav{
-		background: url("../assets/images/yj-leftnavbg.png") no-repeat center;
-		background-size: cover;
-		position: absolute;
-		left: 0px;
-		top:0px;
-		height: 100vh;
-		z-index: 3;
-		width: 382px;
-	}
-	.nav-cont{
-		width: 320px;
-		height: calc(100vh - 17vh);
-		margin-top: 10vh;
-		margin: 8vh 0px 0px 15px;
-	}
-
-	.left-table{
-		display: flex;
-		flex-direction: row;
-		margin: 20px 10px;
-	}
-	.left-table .bz-name{
-		background: url("../assets/images/yj-navimg1.png") no-repeat center;
-		width: 65px;
-		height: 70px;
-		padding: 0px 5px;
-		margin-right: 20px;
-	}
-	.left-table .bz-name p{
-		margin-top: -13px;
-		text-align: center;
-		font-size: 14px;
-		color: #36c9ff;
-	}
-	.bz-table{
-		width: 100%;
-	}
-
-	.bz-table .bz-head{
-		background: rgb(27, 55, 113,0.8);
-		width: 100%;
-		height: 30px;
-		line-height: 30px;
-		padding: 0px 4%;
-	}
-	.bz-table .bz-td{
-		width: 100%;
-		height: 30px;
-		line-height: 30px;
-		padding: 0px 4%;
-	}
-	.bz-table .bz-td:nth-child(even){
-		background: rgb(24, 56, 129,0.4);
-	}
-	.bz-table .bz-head span,.bz-table .bz-td span{
-		color: #fff;
-		font-size: 14px;
-		display: inline-block;
-	}
-	.bz-table .bz-head span:nth-child(1){
-		width: 20%;
-	}
-	.bz-table .bz-head span:nth-child(2){
-		width: 30%;
-	}
-	.bz-table .bz-head span:nth-child(3){
-		width: 50%;
-	}
-	.bz-table .bz-td span:nth-child(1){
-		width: 20%;
-	}
-	.bz-table .bz-td span:nth-child(2){
-		width: 30%;
-	}
-	.bz-table .bz-td span:nth-child(3){
-		width: 50%;
-	}
-
-	.nav-wz{
-		font-size: 16px;
-		color: #46e7ff;
-		margin-top: 10px;
-		text-align: left;
-	}
-	.nav-wz i{
-		margin-right: 4px;
-	}
-
-
-</style>
+<template>
+	<div class="nav">
+		<div class="nav-cont">
+			<!--<div class="yj-tqdiv">-->
+				<!--<div class="yj-qyb">-->
+					<!--<i class="iconfont yj-icon-tianqi-baoyu"></i>-->
+					<!--<p>暴雨</p>-->
+				<!--</div>-->
+				<!--<div class="yj-tqtxt">-->
+					<!--<p>风力：2级</p>-->
+					<!--<p>低温：20℃</p>-->
+					<!--<p>风向：东南风</p>-->
+					<!--<p>高温：17℃</p>-->
+					<!--<p>火险：一级火险</p>-->
+					<!--<p>湿度：93</p>-->
+				<!--</div>-->
+			<!--</div>-->
+			<div class="yj-tqdiv2">
+				<div class="yj-qyb">
+					<img class="yj-qybimg qing" src="../assets/images/yj-tq-qing.png"/>
+					<div class="yj-qybtxt">
+						<h4>26~30℃</h4>
+						<p><i class="iconfont yj-icon-weizhi"></i>延吉市 晴</p>
+					</div>
+				</div>
+				<div class="yj-tqtxt2">
+					<span>风力：2级</span>
+					<span>低温：20℃</span>
+					<span>风向：东南风</span>
+					<span>高温：17℃</span>
+					<span>火险：一级火险</span>
+					<span>湿度：93</span>
+				</div>
+			</div>
+
+			<div class="nav-tit">
+				<div class="nav-circle">
+					<img src="../assets/images/yj-tity1.png" />
+				</div>
+				<p>应急资源信息</p>
+			</div>
+			<h6 class="nav-wz"><i class="iconfont yj-icon-weizhi"></i>新兴街道民昌社区</h6>
+			<div class="left-table">
+				<div class="bz-name">
+					<img src="../assets/images/yj-navimg2.png"/>
+					<p>班长</p>
+				</div>
+				<div class="bz-table">
+					<div class="bz-head">
+						<span>姓名</span>
+						<span>性别</span>
+						<span>身份证号</span>
+						<span>联系电话</span>
+					</div>
+					<div class="scroll h-22">
+						<div class="bz-td">
+							<span title="朴明">朴明</span>
+							<span title="女">女</span>
+							<span title="222401197210073324">222401197210073324</span>
+							<span title="17643311303">17643311303</span>
+						</div>
+						<div class="bz-td">
+							<span title="朴明">王永玲</span>
+							<span title="朴明">女</span>
+							<span title="朴明">222426198103232926</span>
+							<span title="朴明">17643311338</span>
+						</div>
+						<div class="bz-td">
+							<span title="邢超">邢超</span>
+							<span title="男">男</span>
+							<span title="23272119950921063X">23272119950921063X</span>
+							<span title="17643311332">17643311332</span>
+						</div>
+						<div class="bz-td">
+							<span title="于洋">于洋</span>
+							<span title="男">男</span>
+							<span title="222401199005270010">222401199005270010</span>
+							<span title="17643311336">17643311336</span>
+						</div>
+						<div class="bz-td">
+							<span title="桂延章">桂延章</span>
+							<span title="男">男</span>
+							<span title="222401199005270010">222401199005270010</span>
+							<span title="15944328870">15944328870</span>
+						</div>
+						<div class="bz-td">
+							<span title="于芳">于芳</span>
+							<span title="女">女</span>
+							<span title="222401199508020021">222401199508020021</span>
+							<span title="18340835186">18340835186</span>
+						</div>
+						<div class="bz-td">
+							<span title="于洋">于洋</span>
+							<span title="男">男</span>
+							<span title="222401199005270010">222401199005270010</span>
+							<span title="17643311336">17643311336</span>
+						</div>
+						<div class="bz-td">
+							<span title="单明金砚">单明金砚</span>
+							<span title="女">女</span>
+							<span title="222403199004275621">222403199004275621</span>
+							<span title="17643311340">17643311340</span>
+						</div>
+
+					</div>
+				</div>
+			</div>
+			<h6 class="nav-wz"><i class="iconfont yj-icon-weizhi"></i>进学街道</h6>
+			<div class="left-table">
+				<div class="bz-name">
+					<img src="../assets/images/yj-navimg2.png"/>
+					<p>班长</p>
+				</div>
+				<div class="bz-table">
+					<div class="bz-head">
+						<span>姓名</span>
+						<span>性别</span>
+						<span>身份证号</span>
+						<span>联系电话</span>
+					</div>
+					<div class="scroll h-22">
+						<div class="bz-td">
+							<span title="朴明">朴明</span>
+							<span title="女">女</span>
+							<span title="222401197210073324">222401197210073324</span>
+							<span title="17643311303">17643311303</span>
+						</div>
+						<div class="bz-td">
+							<span title="朴明">王永玲</span>
+							<span title="朴明">女</span>
+							<span title="朴明">222426198103232926</span>
+							<span title="朴明">17643311338</span>
+						</div>
+						<div class="bz-td">
+							<span title="邢超">邢超</span>
+							<span title="男">男</span>
+							<span title="23272119950921063X">23272119950921063X</span>
+							<span title="17643311332">17643311332</span>
+						</div>
+						<div class="bz-td">
+							<span title="于洋">于洋</span>
+							<span title="男">男</span>
+							<span title="222401199005270010">222401199005270010</span>
+							<span title="17643311336">17643311336</span>
+						</div>
+						<div class="bz-td">
+							<span title="桂延章">桂延章</span>
+							<span title="男">男</span>
+							<span title="222401199005270010">222401199005270010</span>
+							<span title="15944328870">15944328870</span>
+						</div>
+						<div class="bz-td">
+							<span title="于芳">于芳</span>
+							<span title="女">女</span>
+							<span title="222401199508020021">222401199508020021</span>
+							<span title="18340835186">18340835186</span>
+						</div>
+						<div class="bz-td">
+							<span title="于洋">于洋</span>
+							<span title="男">男</span>
+							<span title="222401199005270010">222401199005270010</span>
+							<span title="17643311336">17643311336</span>
+						</div>
+						<div class="bz-td">
+							<span title="单明金砚">单明金砚</span>
+							<span title="女">女</span>
+							<span title="222403199004275621">222403199004275621</span>
+							<span title="17643311340">17643311340</span>
+						</div>
+
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+		name: 'Leftnav',
+		props: {
+
+		}
+	}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+	.nav{
+		background: url("../assets/images/yj-leftnavbg.png") no-repeat center;
+		background-size: cover;
+		position: absolute;
+		left: 0px;
+		top:0px;
+		height: 100vh;
+		z-index: 3;
+		width: 382px;
+	}
+	.nav-cont{
+		width: 320px;
+		height: calc(100vh - 17vh);
+		margin-top: 10vh;
+		margin: 8vh 0px 0px 15px;
+	}
+
+	.left-table{
+		display: flex;
+		flex-direction: row;
+		margin: 20px 0px;
+	}
+	.left-table .bz-name{
+		background: url("../assets/images/yj-navimg1.png") no-repeat center;
+		background-size: 100% 100%;
+		width: 40px;
+		height: 40px;
+		padding: 0px 5px;
+		margin-right: 8px;
+	}
+	.left-table .bz-name img{
+		width: 30px;
+		margin-top: 4px;
+	}
+	.left-table .bz-name p{
+		margin-top: -13px;
+		text-align: center;
+		font-size: 14px;
+		color: #36c9ff;
+		margin-top: 10px;
+	}
+	.bz-table{
+		width: 100%;
+	}
+
+	.bz-table .bz-head{
+		background: rgb(27, 55, 113,0.8);
+		width: 100%;
+		height: 33px;
+		line-height: 33px;
+		padding: 0px 1%;
+	}
+	.bz-table .bz-td{
+		width: 100%;
+		height: 33px;
+		line-height: 33px;
+		padding: 0px 1%;
+	}
+	.bz-table .bz-td:nth-child(even){
+		background: rgb(24, 56, 129,0.4);
+	}
+	.bz-table .bz-head span,.bz-table .bz-td span{
+		color: #fff;
+		font-size: 10px;
+		display: inline-block;
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		text-align: left;
+		position: relative;
+	}
+	.bz-table .bz-head span:nth-child(1){
+		width: 15%;
+	}
+	.bz-table .bz-head span:nth-child(2){
+		width: 10%;
+	}
+	.bz-table .bz-head span:nth-child(3){
+		width: 47%;
+	}
+	.bz-table .bz-head span:nth-child(4){
+		width: 28%;
+	}
+
+	.bz-table .bz-td span:nth-child(1){
+		width: 15%;
+	}
+	.bz-table .bz-td span:nth-child(2){
+		width: 10%;
+	}
+	.bz-table .bz-td span:nth-child(3){
+		width: 47%;
+	}
+	.bz-table .bz-td span:nth-child(4){
+		width: 28%;
+	}
+
+
+
+
+	.nav-wz{
+		font-size: 16px;
+		color: #46e7ff;
+		margin-top: 10px;
+		text-align: left;
+	}
+	.nav-wz i{
+		margin-right: 4px;
+	}
+
+	.yj-tqdiv{
+		display: flex;
+		flex-direction: row;
+		margin: 0px 0px 20px 0px;
+		background: url("../assets/images/yj-tqbg.png") no-repeat center;
+		background-size: 100% 100%;
+		padding: 15px 0px;
+		height: 180px;
+	}
+	.yj-tqdiv .yj-qyb{
+		display: flex;
+		flex-direction: column;
+		margin-right: 15px;
+		align-items: center;
+		width: 120px;
+		text-align: center;
+	}
+	.yj-tqdiv .yj-qyb i{
+		color: #00ffff;
+		font-size: 60px;
+	}
+	.yj-tqdiv .yj-qyb p{
+		color: #00ffff;
+		font-size: 16px;
+	}
+	.yj-tqdiv .yj-tqtxt{
+		color: #00ffff;
+		text-align: left;
+		font-size: 14px;
+		line-height: 25px;
+	}
+
+
+	.yj-tqdiv2{
+		display: flex;
+		flex-direction: column;
+		margin: 0px 0px 20px 0px;
+		background: url("../assets/images/yj-tqbg.png") no-repeat center;
+		background-size: 100% 100%;
+		padding: 15px 0px;
+		height: 180px;
+	}
+	.yj-tqdiv2 .yj-qyb{
+		display: flex;
+		flex-direction: row;
+		padding-left: 20px;
+	}
+	.yj-tqdiv2 .yj-qyb .yj-qybimg{
+		width: 60px;
+	}
+	.yj-tqdiv2 .yj-qyb .yj-qybtxt{
+		text-align: left;
+		padding-left: 25px;
+	}
+	.yj-tqdiv2 .yj-qyb .yj-qybtxt h4{
+		font-size: 30px;
+		color: #fff402;
+		font-weight: bold;
+	}
+	.yj-tqdiv2 .yj-qyb .yj-qybtxt p{
+		font-size: 14px;
+		color: #fff;
+	}
+	.yj-tqdiv2 .yj-qyb .yj-qybtxt p i{
+		font-size: 13px;
+		color: #fff;
+	}
+	.yj-tqdiv2 .yj-tqtxt2{
+		padding: 10px 0px 0px 20px;
+		text-align: left;
+	}
+	.yj-tqdiv2 .yj-tqtxt2 span{
+		color: #00bef1;
+		display: inline-block;
+		width: 130px;
+		margin: 0px 10px;
+		font-size: 14px;
+		line-height: 25px;
+	}
+
+
+</style>

src/components/Rightnav.vue

@@ -7,6 +7,14 @@
 				</div>
 				<p>救援队伍</p>
 			</div>
+			<div class="yj-search">
+				<el-input
+				  class="inp-txt"
+				  placeholder="请输入内容"
+				  v-model="input">
+				</el-input>
+				 <el-button slot="append" icon="el-icon-search"></el-button>
+			</div>
 			<div class="jydw-zs">
 				<span>救援队伍总数：</span>
 				<b>150</b>
@@ -63,6 +71,11 @@
 	import * as echarts from 'echarts';
 	export default {
 		name: 'Rightnav',
+		data() {
+			return{
+				input:''
+			}
+		},
 		props: {
 
 		},
@@ -262,7 +275,7 @@
 	}
 	.jydw-list .jydw-li h2{
 		color: #23d6df;
-		font-size: 16px;
+		font-size: 14px;
 		font-weight: 900;
 		padding-bottom: 5px;
 	}

src/views/index.vue

@@ -20,6 +20,17 @@
           <Rightnav></Rightnav>
           <Btmbutton></Btmbutton>
           <Jsmsdialog ref="Jsmsdialog"></Jsmsdialog>
+        <!--<div class="yj-topnav-div" title="地图信息"><i class="iconfont yj-icon-centerdata-t-firecontrol-other-linkage-force"></i></div>-->
+            <div class="yj-topnav">
+                <el-checkbox-group v-model="checkList">
+                    <el-checkbox label="避难场所"></el-checkbox>
+                    <el-checkbox label="救援物资库"></el-checkbox>
+                    <el-checkbox label="救援队伍"></el-checkbox>
+                    <el-checkbox label="视联网"></el-checkbox>
+                </el-checkbox-group>
+                <a><i class="iconfont yj-icon-nav"></i>普查结果</a>
+                <a><i class="iconfont yj-icon-zhiban"></i>值班信息</a>
+            </div>
         </div>
       </template>
 
@@ -37,6 +48,7 @@
           data() {
               return {
                   mapToolShowBH:false,
+                  checkList: ['']
               }
           },
         components: {
@@ -227,4 +239,57 @@
               width: 100%;
               height: 100%;
           }
+          .yj-topnav-div{
+              position: fixed;
+              top:85px;
+              right: 400px;
+              width: 60px;
+              height: 60px;
+              /*background: url("../assets/images/yj-topnavbg.png") no-repeat center;*/
+              background-size: 100% 100%;
+              border-radius: 50%;
+              z-index: 99;
+          }
+          .yj-topnav-div i{
+              color: #fff;
+              font-size: 40px;
+              line-height: 57px;
+              cursor: pointer;
+
+          }
+          .yj-topnav{
+              position: fixed;
+              top:85px;
+              transform: translateX(-50%);
+              z-index: 2;
+              display: flex;
+              flex-direction: row;
+              /*background: url("../assets/images/yj-topnavbg.png") no-repeat center;*/
+              background-size: 100% 100%;
+              padding: 12px 20px;
+              left: 50%;
+              align-items: center;
+              font-size: 12px;
+              color: #fff;
+          }
+          .yj-topnav a{
+              display: block;
+              /*background:#08388c;*/
+              background: url("../assets/images/yj-topnavbg1-on.png") no-repeat center;
+              background-size: 100% 100%;
+              color: #fff;
+              /*padding: 5px 15px;*/
+              /*border-radius: 50px;*/
+              margin-right: 15px;
+              font-size: 14px;
+              width: 120px;
+              height: 42px;
+              line-height: 42px;
+          }
+          .yj-topnav a:hover{
+              color: #0bf3f7;
+          }
+          .yj-topnav a i{
+              margin-right: 6px;
+          }
       </style>