首次提交

package.json

@@ -9,7 +9,10 @@
   },
   "dependencies": {
     "core-js": "^3.8.3",
-    "vue": "^2.6.14"
+    "echarts": "^5.4.3",
+    "element-ui": "^2.15.13",
+    "vue": "^2.6.14",
+    "vue-router": "^3.6.5"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
@@ -19,6 +22,7 @@
     "@vue/cli-service": "~5.0.0",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",
+    "sass-loader": "^13.3.2",
     "vue-template-compiler": "^2.6.14"
   },
   "eslintConfig": {
@@ -33,7 +37,14 @@
     "parserOptions": {
       "parser": "@babel/eslint-parser"
     },
-    "rules": {}
+    "rules": {
+      "generator-star-spacing": "off",
+      "no-tabs": "off",
+      "no-unused-vars": "off",
+      "no-console": "off",
+      "no-irregular-whitespace": "off",
+      "no-debugger": "off"
+    }
   },
   "browserslist": [
     "> 1%",

src/App.vue

@@ -1,28 +1,29 @@
 <template>
-  <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
-</template>
-
-<script>
-import HelloWorld from './components/HelloWorld.vue'
-
-export default {
-  name: 'App',
-  components: {
-    HelloWorld
+	<div id="app">
+	  <router-view/>
+	</div>
+  </template>
+  
+  <style>
+  #app {
+	font-family: Avenir, Helvetica, Arial, sans-serif;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-align: center;
+	color: #2c3e50;
   }
-}
-</script>
-
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>
+  
+  nav {
+	padding: 30px;
+  
+	a {
+	  font-weight: bold;
+	  color: #2c3e50;
+  
+	  &.router-link-exact-active {
+		color: #42b983;
+	  }
+	}
+  }
+  </style>
+  

src/YjCjms.vue

@@ -0,0 +1,34 @@
+<template>
+	<div class="cjms">
+		 <Cjmsheader></Cjmsheader>
+		 <Cjmsleftnav></Cjmsleftnav>
+		 <Cjmsrightnav></Cjmsrightnav>
+		 <Cjmsbtm></Cjmsbtm>
+		 <Cjmscon></Cjmscon>
+	</div>
+</template>
+
+<script>
+import './assets/iconfont/iconfont.css'
+import Cjmsheader from './components/Cjmsheader.vue'
+import Cjmsleftnav from './components/Cjmsleftnav.vue'
+import Cjmsrightnav from './components/Cjmsrightnav.vue'
+import Cjmsbtm from './components/Cjmsbtm.vue'
+import Cjmscon from './components/Cjmscon.vue'
+
+export default {
+  name: 'App',
+  components: {
+	  Cjmsheader,
+	  Cjmsleftnav,
+	  Cjmsrightnav,
+	  Cjmsbtm,
+	  Cjmscon
+  }
+}
+</script>
+<style>
+	body{
+		background: #0c2142;
+	}
+</style>

src/assets/iconfont/demo.css

@@ -0,0 +1,539 @@
+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

src/assets/iconfont/demo_index.html

@@ -0,0 +1,947 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <title>iconfont Demo</title>
+  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
+  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
+  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
+  <link rel="stylesheet" href="demo.css">
+  <link rel="stylesheet" href="iconfont.css">
+  <script src="iconfont.js"></script>
+  <!-- jQuery -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
+  <!-- 代码高亮 -->
+  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
+  <style>
+    .main .logo {
+      margin-top: 0;
+      height: auto;
+    }
+
+    .main .logo a {
+      display: flex;
+      align-items: center;
+    }
+
+    .main .logo .sub-title {
+      margin-left: 0.5em;
+      font-size: 22px;
+      color: #fff;
+      background: linear-gradient(-45deg, #3967FF, #B500FE);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  </style>
+</head>
+<body>
+  <div class="main">
+    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
+      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
+      
+    </a></h1>
+    <div class="nav-tabs">
+      <ul id="tabs" class="dib-box">
+        <li class="dib active"><span>Unicode</span></li>
+        <li class="dib"><span>Font class</span></li>
+        <li class="dib"><span>Symbol</span></li>
+      </ul>
+      
+      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=4184217" target="_blank" class="nav-more">查看项目</a>
+      
+    </div>
+    <div class="tab-container">
+      <div class="content unicode" style="display: block;">
+          <ul class="icon_lists dib-box">
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe674;</span>
+                <div class="name">传感器</div>
+                <div class="code-name">&amp;#xe674;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60d;</span>
+                <div class="name">森林防火队</div>
+                <div class="code-name">&amp;#xe60d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60e;</span>
+                <div class="name">取水口</div>
+                <div class="code-name">&amp;#xe60e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe616;</span>
+                <div class="name">水鹤</div>
+                <div class="code-name">&amp;#xe616;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61c;</span>
+                <div class="name">监控中心-摄像头</div>
+                <div class="code-name">&amp;#xe61c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe66f;</span>
+                <div class="name">重点服务企业</div>
+                <div class="code-name">&amp;#xe66f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe632;</span>
+                <div class="name">专职站</div>
+                <div class="code-name">&amp;#xe632;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe633;</span>
+                <div class="name">其他联动力量</div>
+                <div class="code-name">&amp;#xe633;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe634;</span>
+                <div class="name">泡沫液</div>
+                <div class="code-name">&amp;#xe634;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe636;</span>
+                <div class="name">消防力量</div>
+                <div class="code-name">&amp;#xe636;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe640;</span>
+                <div class="name">室内消火栓</div>
+                <div class="code-name">&amp;#xe640;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe645;</span>
+                <div class="name">地上消火栓</div>
+                <div class="code-name">&amp;#xe645;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe649;</span>
+                <div class="name">地下消火栓</div>
+                <div class="code-name">&amp;#xe649;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe71d;</span>
+                <div class="name">多人</div>
+                <div class="code-name">&amp;#xe71d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe62e;</span>
+                <div class="name">摄像头</div>
+                <div class="code-name">&amp;#xe62e;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe648;</span>
+                <div class="name">责任人</div>
+                <div class="code-name">&amp;#xe648;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60c;</span>
+                <div class="name">跟踪</div>
+                <div class="code-name">&amp;#xe60c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe619;</span>
+                <div class="name">详情</div>
+                <div class="code-name">&amp;#xe619;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe7ce;</span>
+                <div class="name">风险提示</div>
+                <div class="code-name">&amp;#xe7ce;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe64f;</span>
+                <div class="name">确认工单</div>
+                <div class="code-name">&amp;#xe64f;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe613;</span>
+                <div class="name">告警事件</div>
+                <div class="code-name">&amp;#xe613;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe609;</span>
+                <div class="name">降雨量</div>
+                <div class="code-name">&amp;#xe609;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60a;</span>
+                <div class="name">风向</div>
+                <div class="code-name">&amp;#xe60a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60b;</span>
+                <div class="name">电视墙</div>
+                <div class="code-name">&amp;#xe60b;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe601;</span>
+                <div class="name">火险等级</div>
+                <div class="code-name">&amp;#xe601;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe602;</span>
+                <div class="name">台账</div>
+                <div class="code-name">&amp;#xe602;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe603;</span>
+                <div class="name">湿度</div>
+                <div class="code-name">&amp;#xe603;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe604;</span>
+                <div class="name">通讯录</div>
+                <div class="code-name">&amp;#xe604;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe605;</span>
+                <div class="name">视联网</div>
+                <div class="code-name">&amp;#xe605;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe606;</span>
+                <div class="name">物联网</div>
+                <div class="code-name">&amp;#xe606;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe607;</span>
+                <div class="name">风速</div>
+                <div class="code-name">&amp;#xe607;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe608;</span>
+                <div class="name">人员</div>
+                <div class="code-name">&amp;#xe608;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe64b;</span>
+                <div class="name">位置</div>
+                <div class="code-name">&amp;#xe64b;</div>
+              </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="unicode-">Unicode 引用</h2>
+          <hr>
+
+          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
+          <ul>
+            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
+            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
+          </ul>
+          <blockquote>
+            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
+          </blockquote>
+          <p>Unicode 使用步骤如下：</p>
+          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
+<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');
+}
+</code></pre>
+          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
+<pre><code class="language-css"
+>.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
+<pre>
+<code class="language-html"
+>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
+</code></pre>
+          <blockquote>
+            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+          </blockquote>
+          </div>
+      </div>
+      <div class="content font-class">
+        <ul class="icon_lists dib-box">
+          
+          <li class="dib">
+            <span class="icon iconfont yj-icon-centerdata-t-firecontrol-fire-pressure-sensor"></span>
+            <div class="name">
+              传感器
+            </div>
+            <div class="code-name">.yj-icon-centerdata-t-firecontrol-fire-pressure-sensor
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont yj-icon-centerdata-t-forest-fireteam"></span>
+            <div class="name">
+              森林防火队
+            </div>
+            <div class="code-name">.yj-icon-centerdata-t-forest-fireteam
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont yj-icon-centerdata-t-forest-waterintake"></span>
+            <div class="name">
+              取水口
+            </div>
+            <div class="code-name">.yj-icon-centerdata-t-forest-waterintake
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont yj-icon-watercrane"></span>
+            <div class="name">
+              水鹤
+            </div>
+            <div class="code-name">.yj-icon-watercrane
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont yj-icon-jkzx"></span>
+            <div class="name">
+              监控中心-摄像头
+            </div>
+            <div class="code-name">.yj-icon-jkzx
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont yj-icon-centerdata-t-firecontrol-fire-key-places"></span>
+            <div class="name">
+              重点服务企业
+            </div>
+            <div class="code-name">.yj-icon-centerdata-t-firecontrol-fire-key-places
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont yj-icon-station"></span>
+            <div class="name">
+              专职站
+            </div>
+            <div class="code-name">.yj-icon-station
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont yj-icon-centerdata-t-firecontrol-other-linkage-force"></span>
+            <div class="name">
+              其他联动力量
+            </div>
+            <div class="code-name">.yj-icon-centerdata-t-firecontrol-other-linkage-force
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont yj-icon-centerdata-t-firecontrol-foam-liquid"></span>
+            <div class="name">
+              泡沫液
+            </div>
+            <div class="code-name">.yj-icon-centerdata-t-firecontrol-foam-liquid
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont yj-icon-centerdata-t-firecontrol-fire-force"></span>
+            <div class="name">
+              消防力量
+            </div>
+            <div class="code-name">.yj-icon-centerdata-t-firecontrol-fire-force
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont yj-icon-centerdata-t-forest-firehydrant-3"></span>
+            <div class="name">
+              室内消火栓
+            </div>
+            <div class="code-name">.yj-icon-centerdata-t-forest-firehydrant-3
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont yj-icon-centerdata-t-forest-firehydrant-1"></span>
+            <div class="name">
+              地上消火栓
+            </div>
+            <div class="code-name">.yj-icon-centerdata-t-forest-firehydrant-1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont yj-icon-centerdata-t-forest-firehydrant-2"></span>
+            <div class="name">
+              地下消火栓
+            </div>
+            <div class="code-name">.yj-icon-centerdata-t-forest-firehydrant-2
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont yj-icon-liandong"></span>
+            <div class="name">
+              多人
+            </div>
+            <div class="code-name">.yj-icon-liandong
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont yj-icon-fujintantou"></span>
+            <div class="name">
+              摄像头
+            </div>
+            <div class="code-name">.yj-icon-fujintantou
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont yj-icon-zerenzhi"></span>
+            <div class="name">
+              责任人
+            </div>
+            <div class="code-name">.yj-icon-zerenzhi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont yj-icon-dongtaigenzong"></span>
+            <div class="name">
+              跟踪
+            </div>
+            <div class="code-name">.yj-icon-dongtaigenzong
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont yj-icon-jibenqingkuang"></span>
+            <div class="name">
+              详情
+            </div>
+            <div class="code-name">.yj-icon-jibenqingkuang
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont yj-icon-fengxiantishi"></span>
+            <div class="name">
+              风险提示
+            </div>
+            <div class="code-name">.yj-icon-fengxiantishi
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont yj-icon-querengongdan"></span>
+            <div class="name">
+              确认工单
+            </div>
+            <div class="code-name">.yj-icon-querengongdan
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont yj-icon-gaojingshijian"></span>
+            <div class="name">
+              告警事件
+            </div>
+            <div class="code-name">.yj-icon-gaojingshijian
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont yj-icon-jiangyuliang"></span>
+            <div class="name">
+              降雨量
+            </div>
+            <div class="code-name">.yj-icon-jiangyuliang
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont yj-icon-fengxiang"></span>
+            <div class="name">
+              风向
+            </div>
+            <div class="code-name">.yj-icon-fengxiang
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont yj-icon-dianshiqiang"></span>
+            <div class="name">
+              电视墙
+            </div>
+            <div class="code-name">.yj-icon-dianshiqiang
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont yj-icon-huoxiandengji"></span>
+            <div class="name">
+              火险等级
+            </div>
+            <div class="code-name">.yj-icon-huoxiandengji
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont yj-icon-taizhang"></span>
+            <div class="name">
+              台账
+            </div>
+            <div class="code-name">.yj-icon-taizhang
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont yj-icon-shidu"></span>
+            <div class="name">
+              湿度
+            </div>
+            <div class="code-name">.yj-icon-shidu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont yj-icon-tongxunlu"></span>
+            <div class="name">
+              通讯录
+            </div>
+            <div class="code-name">.yj-icon-tongxunlu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont yj-icon-shilianwang"></span>
+            <div class="name">
+              视联网
+            </div>
+            <div class="code-name">.yj-icon-shilianwang
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont yj-icon-wulianwang"></span>
+            <div class="name">
+              物联网
+            </div>
+            <div class="code-name">.yj-icon-wulianwang
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont yj-icon-fengsu"></span>
+            <div class="name">
+              风速
+            </div>
+            <div class="code-name">.yj-icon-fengsu
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont yj-icon-renyuan"></span>
+            <div class="name">
+              人员
+            </div>
+            <div class="code-name">.yj-icon-renyuan
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont yj-icon-weizhi"></span>
+            <div class="name">
+              位置
+            </div>
+            <div class="code-name">.yj-icon-weizhi
+            </div>
+          </li>
+          
+        </ul>
+        <div class="article markdown">
+        <h2 id="font-class-">font-class 引用</h2>
+        <hr>
+
+        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
+        <p>与 Unicode 使用方式相比，具有如下特点：</p>
+        <ul>
+          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
+          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
+        </ul>
+        <p>使用步骤如下：</p>
+        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
+<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
+</code></pre>
+        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;span class="iconfont yj-icon-xxx"&gt;&lt;/span&gt;
+</code></pre>
+        <blockquote>
+          <p>"
+            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
+        </blockquote>
+      </div>
+      </div>
+      <div class="content symbol">
+          <ul class="icon_lists dib-box">
+          
+            <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>
+                <div class="code-name">#yj-icon-centerdata-t-firecontrol-fire-pressure-sensor</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#yj-icon-centerdata-t-forest-fireteam"></use>
+                </svg>
+                <div class="name">森林防火队</div>
+                <div class="code-name">#yj-icon-centerdata-t-forest-fireteam</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#yj-icon-centerdata-t-forest-waterintake"></use>
+                </svg>
+                <div class="name">取水口</div>
+                <div class="code-name">#yj-icon-centerdata-t-forest-waterintake</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#yj-icon-watercrane"></use>
+                </svg>
+                <div class="name">水鹤</div>
+                <div class="code-name">#yj-icon-watercrane</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#yj-icon-jkzx"></use>
+                </svg>
+                <div class="name">监控中心-摄像头</div>
+                <div class="code-name">#yj-icon-jkzx</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#yj-icon-centerdata-t-firecontrol-fire-key-places"></use>
+                </svg>
+                <div class="name">重点服务企业</div>
+                <div class="code-name">#yj-icon-centerdata-t-firecontrol-fire-key-places</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#yj-icon-station"></use>
+                </svg>
+                <div class="name">专职站</div>
+                <div class="code-name">#yj-icon-station</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#yj-icon-centerdata-t-firecontrol-other-linkage-force"></use>
+                </svg>
+                <div class="name">其他联动力量</div>
+                <div class="code-name">#yj-icon-centerdata-t-firecontrol-other-linkage-force</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#yj-icon-centerdata-t-firecontrol-foam-liquid"></use>
+                </svg>
+                <div class="name">泡沫液</div>
+                <div class="code-name">#yj-icon-centerdata-t-firecontrol-foam-liquid</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#yj-icon-centerdata-t-firecontrol-fire-force"></use>
+                </svg>
+                <div class="name">消防力量</div>
+                <div class="code-name">#yj-icon-centerdata-t-firecontrol-fire-force</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#yj-icon-centerdata-t-forest-firehydrant-3"></use>
+                </svg>
+                <div class="name">室内消火栓</div>
+                <div class="code-name">#yj-icon-centerdata-t-forest-firehydrant-3</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#yj-icon-centerdata-t-forest-firehydrant-1"></use>
+                </svg>
+                <div class="name">地上消火栓</div>
+                <div class="code-name">#yj-icon-centerdata-t-forest-firehydrant-1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#yj-icon-centerdata-t-forest-firehydrant-2"></use>
+                </svg>
+                <div class="name">地下消火栓</div>
+                <div class="code-name">#yj-icon-centerdata-t-forest-firehydrant-2</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#yj-icon-liandong"></use>
+                </svg>
+                <div class="name">多人</div>
+                <div class="code-name">#yj-icon-liandong</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#yj-icon-fujintantou"></use>
+                </svg>
+                <div class="name">摄像头</div>
+                <div class="code-name">#yj-icon-fujintantou</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#yj-icon-zerenzhi"></use>
+                </svg>
+                <div class="name">责任人</div>
+                <div class="code-name">#yj-icon-zerenzhi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#yj-icon-dongtaigenzong"></use>
+                </svg>
+                <div class="name">跟踪</div>
+                <div class="code-name">#yj-icon-dongtaigenzong</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#yj-icon-jibenqingkuang"></use>
+                </svg>
+                <div class="name">详情</div>
+                <div class="code-name">#yj-icon-jibenqingkuang</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#yj-icon-fengxiantishi"></use>
+                </svg>
+                <div class="name">风险提示</div>
+                <div class="code-name">#yj-icon-fengxiantishi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#yj-icon-querengongdan"></use>
+                </svg>
+                <div class="name">确认工单</div>
+                <div class="code-name">#yj-icon-querengongdan</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#yj-icon-gaojingshijian"></use>
+                </svg>
+                <div class="name">告警事件</div>
+                <div class="code-name">#yj-icon-gaojingshijian</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#yj-icon-jiangyuliang"></use>
+                </svg>
+                <div class="name">降雨量</div>
+                <div class="code-name">#yj-icon-jiangyuliang</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#yj-icon-fengxiang"></use>
+                </svg>
+                <div class="name">风向</div>
+                <div class="code-name">#yj-icon-fengxiang</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#yj-icon-dianshiqiang"></use>
+                </svg>
+                <div class="name">电视墙</div>
+                <div class="code-name">#yj-icon-dianshiqiang</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#yj-icon-huoxiandengji"></use>
+                </svg>
+                <div class="name">火险等级</div>
+                <div class="code-name">#yj-icon-huoxiandengji</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#yj-icon-taizhang"></use>
+                </svg>
+                <div class="name">台账</div>
+                <div class="code-name">#yj-icon-taizhang</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#yj-icon-shidu"></use>
+                </svg>
+                <div class="name">湿度</div>
+                <div class="code-name">#yj-icon-shidu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#yj-icon-tongxunlu"></use>
+                </svg>
+                <div class="name">通讯录</div>
+                <div class="code-name">#yj-icon-tongxunlu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#yj-icon-shilianwang"></use>
+                </svg>
+                <div class="name">视联网</div>
+                <div class="code-name">#yj-icon-shilianwang</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#yj-icon-wulianwang"></use>
+                </svg>
+                <div class="name">物联网</div>
+                <div class="code-name">#yj-icon-wulianwang</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#yj-icon-fengsu"></use>
+                </svg>
+                <div class="name">风速</div>
+                <div class="code-name">#yj-icon-fengsu</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#yj-icon-renyuan"></use>
+                </svg>
+                <div class="name">人员</div>
+                <div class="code-name">#yj-icon-renyuan</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#yj-icon-weizhi"></use>
+                </svg>
+                <div class="name">位置</div>
+                <div class="code-name">#yj-icon-weizhi</div>
+            </li>
+          
+          </ul>
+          <div class="article markdown">
+          <h2 id="symbol-">Symbol 引用</h2>
+          <hr>
+
+          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
+            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
+          <ul>
+            <li>支持多色图标了，不再受单色限制。</li>
+            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
+            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
+            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
+          </ul>
+          <p>使用步骤如下：</p>
+          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
+<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
+</code></pre>
+          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
+<pre><code class="language-html">&lt;style&gt;
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+&lt;/style&gt;
+</code></pre>
+          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
+<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
+  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
+&lt;/svg&gt;
+</code></pre>
+          </div>
+      </div>
+
+    </div>
+  </div>
+  <script>
+  $(document).ready(function () {
+      $('.tab-container .content:first').show()
+
+      $('#tabs li').click(function (e) {
+        var tabContent = $('.tab-container .content')
+        var index = $(this).index()
+
+        if ($(this).hasClass('active')) {
+          return
+        } else {
+          $('#tabs li').removeClass('active')
+          $(this).addClass('active')
+
+          tabContent.hide().eq(index).fadeIn()
+        }
+      })
+    })
+  </script>
+</body>
+</html>

src/assets/iconfont/iconfont.css

@@ -0,0 +1,147 @@
+@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');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.yj-icon-centerdata-t-firecontrol-fire-pressure-sensor:before {
+  content: "\e674";
+}
+
+.yj-icon-centerdata-t-forest-fireteam:before {
+  content: "\e60d";
+}
+
+.yj-icon-centerdata-t-forest-waterintake:before {
+  content: "\e60e";
+}
+
+.yj-icon-watercrane:before {
+  content: "\e616";
+}
+
+.yj-icon-jkzx:before {
+  content: "\e61c";
+}
+
+.yj-icon-centerdata-t-firecontrol-fire-key-places:before {
+  content: "\e66f";
+}
+
+.yj-icon-station:before {
+  content: "\e632";
+}
+
+.yj-icon-centerdata-t-firecontrol-other-linkage-force:before {
+  content: "\e633";
+}
+
+.yj-icon-centerdata-t-firecontrol-foam-liquid:before {
+  content: "\e634";
+}
+
+.yj-icon-centerdata-t-firecontrol-fire-force:before {
+  content: "\e636";
+}
+
+.yj-icon-centerdata-t-forest-firehydrant-3:before {
+  content: "\e640";
+}
+
+.yj-icon-centerdata-t-forest-firehydrant-1:before {
+  content: "\e645";
+}
+
+.yj-icon-centerdata-t-forest-firehydrant-2:before {
+  content: "\e649";
+}
+
+.yj-icon-liandong:before {
+  content: "\e71d";
+}
+
+.yj-icon-fujintantou:before {
+  content: "\e62e";
+}
+
+.yj-icon-zerenzhi:before {
+  content: "\e648";
+}
+
+.yj-icon-dongtaigenzong:before {
+  content: "\e60c";
+}
+
+.yj-icon-jibenqingkuang:before {
+  content: "\e619";
+}
+
+.yj-icon-fengxiantishi:before {
+  content: "\e7ce";
+}
+
+.yj-icon-querengongdan:before {
+  content: "\e64f";
+}
+
+.yj-icon-gaojingshijian:before {
+  content: "\e613";
+}
+
+.yj-icon-jiangyuliang:before {
+  content: "\e609";
+}
+
+.yj-icon-fengxiang:before {
+  content: "\e60a";
+}
+
+.yj-icon-dianshiqiang:before {
+  content: "\e60b";
+}
+
+.yj-icon-huoxiandengji:before {
+  content: "\e601";
+}
+
+.yj-icon-taizhang:before {
+  content: "\e602";
+}
+
+.yj-icon-shidu:before {
+  content: "\e603";
+}
+
+.yj-icon-tongxunlu:before {
+  content: "\e604";
+}
+
+.yj-icon-shilianwang:before {
+  content: "\e605";
+}
+
+.yj-icon-wulianwang:before {
+  content: "\e606";
+}
+
+.yj-icon-fengsu:before {
+  content: "\e607";
+}
+
+.yj-icon-renyuan:before {
+  content: "\e608";
+}
+
+.yj-icon-weizhi:before {
+  content: "\e64b";
+}
+

src/assets/iconfont/iconfont.json

@@ -0,0 +1,240 @@
+{
+  "id": "4184217",
+  "name": "延吉应急",
+  "font_family": "iconfont",
+  "css_prefix_text": "yj-icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "21053689",
+      "name": "传感器",
+      "font_class": "centerdata-t-firecontrol-fire-pressure-sensor",
+      "unicode": "e674",
+      "unicode_decimal": 58996
+    },
+    {
+      "icon_id": "30787123",
+      "name": "森林防火队",
+      "font_class": "centerdata-t-forest-fireteam",
+      "unicode": "e60d",
+      "unicode_decimal": 58893
+    },
+    {
+      "icon_id": "30787128",
+      "name": "取水口",
+      "font_class": "centerdata-t-forest-waterintake",
+      "unicode": "e60e",
+      "unicode_decimal": 58894
+    },
+    {
+      "icon_id": "30787139",
+      "name": "水鹤",
+      "font_class": "watercrane",
+      "unicode": "e616",
+      "unicode_decimal": 58902
+    },
+    {
+      "icon_id": "30787145",
+      "name": "监控中心-摄像头",
+      "font_class": "jkzx",
+      "unicode": "e61c",
+      "unicode_decimal": 58908
+    },
+    {
+      "icon_id": "33191314",
+      "name": "重点服务企业",
+      "font_class": "centerdata-t-firecontrol-fire-key-places",
+      "unicode": "e66f",
+      "unicode_decimal": 58991
+    },
+    {
+      "icon_id": "33526963",
+      "name": "专职站",
+      "font_class": "station",
+      "unicode": "e632",
+      "unicode_decimal": 58930
+    },
+    {
+      "icon_id": "33526964",
+      "name": "其他联动力量",
+      "font_class": "centerdata-t-firecontrol-other-linkage-force",
+      "unicode": "e633",
+      "unicode_decimal": 58931
+    },
+    {
+      "icon_id": "33526965",
+      "name": "泡沫液",
+      "font_class": "centerdata-t-firecontrol-foam-liquid",
+      "unicode": "e634",
+      "unicode_decimal": 58932
+    },
+    {
+      "icon_id": "33526967",
+      "name": "消防力量",
+      "font_class": "centerdata-t-firecontrol-fire-force",
+      "unicode": "e636",
+      "unicode_decimal": 58934
+    },
+    {
+      "icon_id": "35530155",
+      "name": "室内消火栓",
+      "font_class": "centerdata-t-forest-firehydrant-3",
+      "unicode": "e640",
+      "unicode_decimal": 58944
+    },
+    {
+      "icon_id": "35530159",
+      "name": "地上消火栓",
+      "font_class": "centerdata-t-forest-firehydrant-1",
+      "unicode": "e645",
+      "unicode_decimal": 58949
+    },
+    {
+      "icon_id": "35530162",
+      "name": "地下消火栓",
+      "font_class": "centerdata-t-forest-firehydrant-2",
+      "unicode": "e649",
+      "unicode_decimal": 58953
+    },
+    {
+      "icon_id": "680977",
+      "name": "多人",
+      "font_class": "liandong",
+      "unicode": "e71d",
+      "unicode_decimal": 59165
+    },
+    {
+      "icon_id": "1464111",
+      "name": "摄像头",
+      "font_class": "fujintantou",
+      "unicode": "e62e",
+      "unicode_decimal": 58926
+    },
+    {
+      "icon_id": "2743898",
+      "name": "责任人",
+      "font_class": "zerenzhi",
+      "unicode": "e648",
+      "unicode_decimal": 58952
+    },
+    {
+      "icon_id": "4465002",
+      "name": "跟踪",
+      "font_class": "dongtaigenzong",
+      "unicode": "e60c",
+      "unicode_decimal": 58892
+    },
+    {
+      "icon_id": "20104520",
+      "name": "详情",
+      "font_class": "jibenqingkuang",
+      "unicode": "e619",
+      "unicode_decimal": 58905
+    },
+    {
+      "icon_id": "8797972",
+      "name": "风险提示",
+      "font_class": "fengxiantishi",
+      "unicode": "e7ce",
+      "unicode_decimal": 59342
+    },
+    {
+      "icon_id": "1761533",
+      "name": "确认工单",
+      "font_class": "querengongdan",
+      "unicode": "e64f",
+      "unicode_decimal": 58959
+    },
+    {
+      "icon_id": "6882987",
+      "name": "告警事件",
+      "font_class": "gaojingshijian",
+      "unicode": "e613",
+      "unicode_decimal": 58899
+    },
+    {
+      "icon_id": "36619087",
+      "name": "降雨量",
+      "font_class": "jiangyuliang",
+      "unicode": "e609",
+      "unicode_decimal": 58889
+    },
+    {
+      "icon_id": "36619088",
+      "name": "风向",
+      "font_class": "fengxiang",
+      "unicode": "e60a",
+      "unicode_decimal": 58890
+    },
+    {
+      "icon_id": "36619086",
+      "name": "电视墙",
+      "font_class": "dianshiqiang",
+      "unicode": "e60b",
+      "unicode_decimal": 58891
+    },
+    {
+      "icon_id": "36619092",
+      "name": "火险等级",
+      "font_class": "huoxiandengji",
+      "unicode": "e601",
+      "unicode_decimal": 58881
+    },
+    {
+      "icon_id": "36619096",
+      "name": "台账",
+      "font_class": "taizhang",
+      "unicode": "e602",
+      "unicode_decimal": 58882
+    },
+    {
+      "icon_id": "36619095",
+      "name": "湿度",
+      "font_class": "shidu",
+      "unicode": "e603",
+      "unicode_decimal": 58883
+    },
+    {
+      "icon_id": "36619094",
+      "name": "通讯录",
+      "font_class": "tongxunlu",
+      "unicode": "e604",
+      "unicode_decimal": 58884
+    },
+    {
+      "icon_id": "36619093",
+      "name": "视联网",
+      "font_class": "shilianwang",
+      "unicode": "e605",
+      "unicode_decimal": 58885
+    },
+    {
+      "icon_id": "36619091",
+      "name": "物联网",
+      "font_class": "wulianwang",
+      "unicode": "e606",
+      "unicode_decimal": 58886
+    },
+    {
+      "icon_id": "36619090",
+      "name": "风速",
+      "font_class": "fengsu",
+      "unicode": "e607",
+      "unicode_decimal": 58887
+    },
+    {
+      "icon_id": "36619089",
+      "name": "人员",
+      "font_class": "renyuan",
+      "unicode": "e608",
+      "unicode_decimal": 58888
+    },
+    {
+      "icon_id": "5121522",
+      "name": "位置",
+      "font_class": "weizhi",
+      "unicode": "e64b",
+      "unicode_decimal": 58955
+    }
+  ]
+}

src/assets/static/yj-base.css

@@ -0,0 +1,510 @@
+body {
+  height: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+}
+@font-face {
+	font-family: "myfont";
+	src: url(~@/assets/font/PMZDFONT.ttf) format("truetype");
+}
+@font-face {
+	font-family: "myfont2";
+	src: url(~@/assets/font/HKXZY.TTF) format("truetype");
+}
+@font-face {
+	font-family: "myfont3";
+	src: url(~@/assets/font/HKLST.ttf) format("truetype");
+}
+
+label {
+  font-weight: 700;
+}
+
+html {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+#app {
+  height: 100%;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+b{
+	font-weight:normal;
+}
+.no-padding {
+  padding: 0px !important;
+}
+
+.padding-content {
+  padding: 4px 0;
+}
+button{
+	cursor: pointer;
+}
+a:focus,
+a:active {
+  outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+  cursor: pointer;
+  color: inherit;
+  text-decoration: none;
+}
+
+div:focus {
+  outline: none;
+}
+
+.fr {
+  float: right;
+}
+
+.fl {
+  float: left;
+}
+
+.pr-5 {
+  padding-right: 5px;
+}
+
+.pl-5 {
+  padding-left: 5px;
+}
+
+.block {
+  display: block;
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.inlineBlock {
+  display: block;
+}
+
+.clearfix:after  {
+    visibility: hidden;
+    display: block;
+    font-size: 0;
+    content: " ";
+    clear: both;
+    height: 0;
+}
+
+aside {
+  background: #eef1f6;
+  padding: 8px 24px;
+  margin-bottom: 20px;
+  border-radius: 2px;
+  display: block;
+  line-height: 32px;
+  font-size: 16px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  color: #2c3e50;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  
+}
+a {
+    color: #337ab7;
+    cursor: pointer;
+
+    
+  }
+a:hover {
+      color: rgb(32, 160, 255);
+    }
+iframe {
+  border: 0;
+}
+
+* {
+  padding: 0;
+  margin: 0;
+}
+
+a {
+  padding: 0;
+  margin: 0;
+}
+
+ul {
+  list-style: none;
+}
+h1,h2,h3,h4,h5,h6{
+	font-weight: normal;
+}
+
+.sj-container {
+  width: 100%;
+  height: 100vh;
+}
+.sj-icon-btn {
+
+  padding: 0 .3rem;
+  height: 1.5rem;
+  background-color: #112543;
+  color: $inBlue;
+  border: 1px $searchBorder;
+}
+.sj-icon-btn:hover {
+  text-shadow: 0 0 15px rgba($color: $inBlueHover, $alpha: 1.0);
+}
+
+.el-select-dropdown {
+  border: none;
+  background-color: rgba(1, 28, 82, 0.8);
+}
+.el-select-dropdown__item{
+  color: $white;
+}
+.el-select-dropdown{
+  background-color: #00335c;
+  border: solid 1px #56dfff;
+  color: $white;
+}
+.el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
+  background-color: #035faa;
+
+}
+
+#icon {
+  margin-bottom: 5rem;
+  padding: .5rem;
+}
+
+.ztree {
+  padding: .5rem;
+}
+
+#toolbar {
+  color: $inBlue;
+}
+.sj-search {
+  padding:.5rem .8rem;
+}
+
+.w-5 {
+  width: 5.5rem;
+}
+
+.h-9 {
+  height: 9vh;
+}
+
+.h-10 {
+  height: 10vh;
+}
+.h-11 {
+  height: 11vh;
+}
+.h-12 {
+  height: 12vh;
+}
+.h-13 {
+  height: 13vh;
+}
+
+.h-14 {
+  height: 14vh;
+}
+
+.h-15 {
+  height: 15vh;
+}
+
+.h-16 {
+  height: 16vh;
+}
+
+.h-18 {
+  height: 18vh;
+}
+
+.h-19 {
+  height: 19vh !important;
+}
+
+.h-20 {
+  height: 20vh !important;
+}
+
+.h-21 {
+  height: 21vh;
+}
+
+.h-22 {
+  height: 22vh;
+}
+
+.h-23 {
+  height: 23vh !important;
+}
+
+.h-25 {
+  height: 25vh !important;
+}
+
+.h-26 {
+  height: 26vh !important;
+}
+
+.h-27 {
+  height: 27vh;
+}
+
+.h-28 {
+  height: 28vh !important;
+}
+
+.h-29 {
+  height: 29vh;
+}
+
+.h-29-5 {
+  height: 29.5vh;
+}
+
+.h-30 {
+  height: 30vh;
+}
+
+.h-31 {
+  height: 31vh;
+}
+
+.h-35 {
+  height: 34vh;
+}
+
+.h-32 {
+  height: 31.6vh;
+}
+.h-34{
+	 height: 34vh;
+}
+.h-36{
+	 height: 36vh;
+}
+.h-38{
+	 height: 38vh;
+}
+
+.h-39 {
+  height: 39vh !important;
+}
+
+.h-40 {
+  height: 40vh !important;
+}
+.h-41 {
+  height: 41vh !important;
+}
+.h-41-7 {
+  height: 41.7vh !important;
+}
+.h-43 {
+  height: 42vh !important;
+}
+
+.h-45 {
+  height: 45vh !important;
+}
+
+.h-50 {
+  height: 50vh !important;
+}
+
+.h-51 {
+  height: 51vh;
+}
+
+.h-55 {
+  height: 55vh;
+}
+
+.h-60 {
+  height: 59vh;
+}
+
+.h-63 {
+  height: 62vh;
+}
+
+.h-67 {
+  height: 66.5vh;
+}
+
+.h-73 {
+  height: 74vh;
+}
+
+.h-78 {
+  height: 78vh;
+}
+
+.h-80 {
+  height: 80vh;
+}
+
+.line-h-1 {
+  line-height: 1rem;
+
+}
+
+.w-100p {
+  width: 100% !important;
+  max-width: 100% !important;
+}
+
+.w-25 {
+  width: 25rem !important;
+}
+
+.w-50 {
+  width: 50% !important;
+}
+
+.w-33 {
+  width: 33% !important;
+}
+
+.w-10 {
+  width: 10rem !important;
+}
+
+.top-2 {
+  top: 5vh !important;
+  position: relative !important;
+}
+
+.flex-d {
+  flex-direction: column !important;
+}
+
+.a-item {
+  align-items: center;
+}
+
+.icon-bigger {
+  font-size: 2.4rem !important;
+}
+
+.no-padding {
+  padding: 0;
+}
+
+.m-t-no {
+  margin-top: 0 !important;
+}
+
+.m-btm-no {
+  margin-bottom: 0 !important;
+}
+
+.overflow-y {
+  overflow-y: scroll;
+}
+
+.el-radio {
+  margin-right: 1rem;
+}
+
+.justify-content-bt {
+
+  justify-content: space-between
+}
+
+.justify-content-end {
+  justify-content: end
+}
+
+.text-right {
+  text-align: right;
+}
+
+.flex-c {
+  flex-direction: column !important;
+}
+
+.flex-r {
+  flex-direction: row !important;
+}
+
+.padding-box {
+  padding-top: .3rem !important;
+  padding-bottom: .3rem !important;
+}
+
+.nowrap {
+  flex-wrap: nowrap !important;
+}
+
+
+
+.t-a-center {
+  text-align: center;
+}
+
+.m-r-none {
+  margin-right: 0 !important;
+}
+
+.icon-text-col {
+  margin-top: .5rem;
+}
+
+.scroll{
+		overflow-y: scroll;
+	}
+.scroll::-webkit-scrollbar{
+	width: 0px;
+	height: 0px;
+}
+.nav-tit{
+		background: url("../images/yj-titybg.png") no-repeat center;
+		background-size: 100% 100%;
+		width: 100%;
+		height: 36px;
+		padding-left: 10px;
+		display: flex;
+		flex-direction: row;
+	}
+	.nav-tit .nav-circle{
+		width: 20px;
+		height: 20px;
+		background: url("../images/yj-tity2.png") no-repeat center;
+		margin-top: 8px;
+	}
+	.nav-tit .nav-circle img{
+		animation: rotate 2s infinite;
+		transform-origin: center;
+	}
+	@keyframes rotate {
+	from {
+	transform: rotate(0);
+	}
+	to {
+	transform: rotate(360deg);
+	}
+	}
+	.nav-tit p{
+		font-size: 16px;
+		font-weight: bold;
+		color: #fff;
+		padding-left: 8px;
+		line-height: 38px;
+	}

src/components/Btmbutton.vue

@@ -0,0 +1,405 @@
+<template>
+	  <div>
+  <div class="btmbuttonbg">
+	 
+	  <div class="btmbutton">
+		  
+		  <div class="btmbutton-con">
+			  <div class="yj-name">张三</div>
+			  <div class="model-tab">
+				  <button class="on" @click="goJiaShi">驾驶模式</button>
+				  <button @click="goChenJin">沉浸模式</button>
+			  </div>
+			  <div class="time"> {{nowdate}}&nbsp;&nbsp;{{nowtime}}</div>
+			  <div class="btm-con">
+				  <h2 class="yj-sjzs">160</h2>
+				  <div class="yj-sjs">
+					  <div class="yj-cl">
+						  <b>40</b>
+						  <span>未处理</span>
+					  </div>
+					  <div class="yj-k"></div>
+					  <div class="yj-cl">
+						  <b>120</b>
+						  <span>已确认</span>
+					  </div>
+				  </div>
+			  </div>
+			  <div class="btm-con2">
+				  <span>隐患排查</span>
+				  <span>应急物资</span>
+			  </div>
+			  <div class="btm-con3">
+					<i class="iconfont yj-icon-fengsu"></i>
+					<i class="iconfont yj-icon-fengxiang"></i>
+					<i class="iconfont yj-icon-jiangyuliang"></i>
+					<i class="iconfont yj-icon-shidu"></i>
+			  </div>
+			  <div class="btn-left">
+				  <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>
+				  </div>
+			  </div>
+			  <div class="btn-right">
+				  <p>物联网<i class="iconfont yj-icon-wulianwang"></i></p>
+				  <p>视联网<i class="iconfont yj-icon-shilianwang"></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>
+export default {
+  name: 'Btmbutton',
+  data(){
+  	return {
+		nowdate : '', //日期
+		nowtime : '', //时间
+		newTimer : '', //定时器
+	  }
+  },
+  props: {
+	  
+  },
+   mounted () {
+         this.timerOneScondRun(); //执行日期函数
+                clearInterval(this.newTimer); //清除定时器
+                // 定时获取时间
+                this.newTimer = setInterval(this.timerOneScondRun, 1000);
+            },
+            beforeRouteLeave(to,from,next){
+            	// 离开组件时停掉定时器，节省内存
+                clearInterval(this.newTimer);
+                next();
+            },
+   
+  methods: {
+         //获取时间
+                timerOneScondRun() {
+                	let date = new Date();
+                	// 日期格式  2022年05月31日
+        	        this.nowdate =
+        	            date.getFullYear() +
+        	            "/" +
+        	            (date.getMonth() + 1 >= 10
+        	            ? date.getMonth() + 1
+        	            : "0" + (date.getMonth() + 1)) +
+        	            "/" +
+        	            (date.getDate() >= 10 ? date.getDate() : "0" + date.getDate());
+        	        // 时间格式 12:11:27
+        	        this.nowtime =
+        	            date.getHours() +
+        	            ":" +
+        	            (date.getMinutes() >= 10
+        	            ? date.getMinutes()
+        	            : "0" + date.getMinutes()) +
+        	            ":" +
+        	            (date.getSeconds() >= 10 ? date.getSeconds() : "0" + date.getSeconds());
+                },
+				
+		// 跳转沉浸模式
+		goChenJin(){
+			this.$router.push( '/YjCjms');
+		},
+		goJiaShi(){
+			// this.$router.push( '/index');
+		}
+
+  	}
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+	.btmbuttonbg{
+		position: absolute;
+		bottom: 0px;
+		width: 100%;
+		height: 239px;
+		background: url("../assets/images/yj-btmbg.png") no-repeat center;
+		background-size: 100% 100%;
+		z-index: 2;
+	}
+	.btmbutton{
+		width: 100%;
+		height: 100%;
+		position: relative;
+	}
+	.btmbutton-con{
+		width: 900px;
+		height: 100%;
+		position: absolute;
+		top: 0px;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+	.btmbutton-con .model-tab{
+		text-align: center;
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+	}
+	.btmbutton-con .model-tab button{
+		background: url("../assets/images/yj-nav.png") no-repeat center;
+		display: block;
+		width: 165px;
+		height: 25px;
+		line-height: 25px;
+		background-size: 100% 100%;
+		margin-top: -15px;
+		cursor: pointer;
+		color: #8b8b8b;
+		font-size: 14px;
+		border: 0px;
+		outline: 0px;
+	}
+	.btmbutton-con .model-tab button.on{
+		background: url("../assets/images/yj-navon.png") no-repeat center;
+		background-size: 100% 100%;
+		color: #fff;
+	}
+	.btmbutton-con .model-tab button:hover{
+		background: url("../assets/images/yj-navon.png") no-repeat center;
+		background-size: 100% 100%;
+		color: #fff;
+	}
+	.time{
+		text-align: center;
+		font-family: "黑体";
+		font-size: 20px;
+		color: #fff;
+		font-style: italic;
+		margin-top: 10px;
+	}
+	.btm-con{
+		background: url("../assets/images/yj-btmcbg1.png") no-repeat center;
+		width: 313px;
+		height: 207px;
+		margin: -20px auto 0px auto;
+		display: flex;
+		flex-direction: column;
+	}
+	.btm-con h2{
+		font-size: 55px;
+		background-image:-webkit-linear-gradient(top,#fff,#6a6a6a); 
+		-webkit-background-clip:text; 
+		-webkit-text-fill-color:transparent; 
+		text-align: center;
+		margin-top: 50px;
+		font-family: myfont3;
+		font-weight: bold;
+	}
+	.btm-con .yj-sjs{
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		margin-top: -7px;
+	}
+	.btm-con .yj-sjs b{
+		font-size: 28px;
+		background-image:-webkit-linear-gradient(top,#fff,#6a6a6a); 
+		-webkit-background-clip:text; 
+		-webkit-text-fill-color:transparent; 
+		text-align: center;
+		display: block;
+		font-family: myfont3;
+		font-weight: bold;
+	}
+	.btm-con .yj-sjs span{
+		color: #fff;
+		font-size: 12px;
+		text-align: center;
+		display: block;
+	}
+	.btm-con .yj-k{
+		width: 70px;
+	}
+	.btm-con2{
+		background: url("../assets/images/yj-btmcbg2.png") no-repeat center;
+		width: 459px;
+		height: 43px;
+		margin: -135px auto 0px auto;
+		background-size: 100% 100%;
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+	}
+	.btm-con2 span{
+		color: #fff;
+		font-size: 14px;
+		line-height: 43px;
+	}
+	.btm-con2 span:nth-child(1){
+		padding-left: 30px;
+	}
+	.btm-con2 span:nth-child(2){
+		padding-right: 30px;
+	}
+	.btm-con3{
+		width:220px ;
+		height: 20px;
+		margin: 75px auto 0px auto;
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+	}
+	.btm-con3 i{
+		color: #fff;
+		font-size: 16px;
+	}
+	.btn-left{
+		position: absolute;
+		left: 0px;
+		top:14px;
+	}
+	.btn-left p{
+		background: url("../assets/images/yj-btmleftbg.png") no-repeat center;
+		background-size: 100% 100%;
+		width: 150px;
+		height: 23px;
+		line-height: 23px;
+		margin-bottom: 10px;
+		color: #fff;
+		padding-left: 18px;
+		font-size: 14px;
+		cursor: pointer;
+		text-align: left;
+	}
+	.btn-left p i{
+		font-size: 15px;
+		margin-right: 8px;
+	}
+	.btn-left p:nth-child(1){
+		margin-left: 85px;
+	}
+	.btn-left p:nth-child(2){
+		margin-left: 72px;
+	}
+	.btn-left p:nth-child(3){
+		margin-left: 62px;
+	}
+	.btn-left p:nth-child(4){
+		margin-left: 50px;
+	}
+	.btm-cs{
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		margin-top: 10px;
+	}
+	.btm-cs b{
+		font-size: 50px;
+		background-image:-webkit-linear-gradient(top,#fff,#6a6a6a); 
+		-webkit-background-clip:text; 
+		-webkit-text-fill-color:transparent; 
+		text-align: center;
+		display: block;
+		font-family: myfont3;
+		font-weight: bold;
+	}
+	.btm-cs span{
+		color: #fff;
+		font-size: 12px;
+	}
+	.btn-right{
+		position: absolute;
+		right: 0px;
+		top:14px;
+	}
+	.btn-right p{
+		background: url("../assets/images/yj-btmrightbg.png") no-repeat center;
+		background-size: 100% 100%;
+		width: 150px;
+		height: 23px;
+		line-height: 23px;
+		margin-bottom: 10px;
+		color: #fff;
+		padding-right: 18px;
+		font-size: 14px;
+		cursor: pointer;
+		text-align: right;
+	}
+	.btn-left p:hover,.btn-right p:hover{
+		text-shadow: 0px 0px 5px #1cf4ff;
+	}
+	.btn-right p i{
+		font-size: 15px;
+		margin-left: 8px;
+	}
+	.btn-right p:nth-child(1){
+		margin-right: 85px;
+	}
+	.btn-right p:nth-child(2){
+		margin-left: 13px;
+	}
+	.btn-right .btm-cs{
+		margin-top: 70px;
+	}
+	.btm-left-btn{
+		position: fixed;
+		left: 395px;
+		bottom:18px;
+		z-index: 99;
+		display: flex;
+		flex-direction: row;
+	}
+	.btm-right-btn{
+		position: fixed;
+		right: 20px;
+		bottom:18px;
+		z-index: 99;
+		display: flex;
+		flex-direction: row;
+	}
+	.btm-btn{
+		background: url("../assets/images/yj-btmxbg.png") no-repeat center;
+		background-size: 100% 100%;
+		width: 85px;
+		height: 28px;
+		line-height: 28px;
+		display: block;
+		text-align: center;
+		font-size: 12px;
+		color: #fff;
+		cursor: pointer;
+		margin: 0px 5px;
+	}
+	.btm-btn:hover{
+		text-shadow: 0px 0px 5px #1cf4ff;
+	}
+	.yj-name{
+		position: absolute;
+		cursor: pointer;
+		padding-left: 72px;
+		height: 26px;
+		line-height: 26px;
+		right: 101px;
+		top: -25px;
+		color: #fff;
+		font-size: 16px;
+		background: url("../assets/images/yj-name.png") no-repeat center;
+	}
+</style>

src/components/Cjmsbtm.vue

@@ -0,0 +1,354 @@
+<template>
+	  <div>
+	  <div class="btmbuttonbg">
+		  <div class="btmbutton">
+			  <div class="btmbutton-con">
+				  <div class="model-tab">
+					  <button @click="goJiaShi">驾驶模式</button>
+					  <button class="on"  @click="goChenJin">沉浸模式</button>
+				  </div>
+				  <!-- 左右滚动  开始 -->
+				  <div class="ProgressBoxTool" v-if="progressList && progressList.length">
+				        <div class="processBox">
+				          <div :class="currentClickNumber > 0 ? 'arrow' : 'arrow arrowOpacity'" @click="fnPrev()">
+				            <img :src="arrowL" alt="" />
+				          </div>
+				          <div class="fixedBox" :ref="`fixedBox`">
+				            <div
+				              class="centerScroll"
+				              :style="
+				                `width:${signleWidth *
+				                  progressList.length}px;transform:translate(${scrollResultWidth}px,0);transition:1s;`
+				              "
+				            >
+				              <div
+				                class="signleTab"
+				                v-for="(itemP, indexP) in progressList"
+				                :key="indexP + 'progress'"
+				              >
+				                <div class="leftIcon">
+				                  <img class="pregressIcon" :src="icon" alt="" />
+				                </div>
+				                <!-- 最后一个不展示箭头 -->
+				                <!-- <img
+				                  v-if="progressList.length > indexP + 1"
+				                  :src="iconArrow"
+				                  alt=""
+				                  class="arrowSquare"
+				                /> -->
+				  						   <span>摄像头</span>
+				              </div>
+				            </div>
+				          </div>
+				  
+				          <div :class="noScrollRight ? 'arrow' : 'arrow arrowOpacity'" @click="fnNext(activeName)">
+				            <img :src="arrowR" alt="" />
+				          </div>
+				        </div>
+				      </div>
+				  <!-- 左右滚动  结束 -->
+			  </div>
+			  <div class="cjms-btmbtn">
+				  <p class="on"><i class="iconfont yj-icon-wulianwang"></i>物联网</p>
+				  <p><i class="iconfont yj-icon-shilianwang"></i>视联网</p>
+			  </div>
+			 
+		  </div>
+		  
+	  </div>
+ 
+</div>
+</template>
+<script>
+	import arrowL from '@/assets/images/yj-cjmsbtnleft.png';
+	import arrowR from '@/assets/images/yj-cjmsbtnright.png';
+	import icon from '@/assets/images/yj-cjmsimg.png';
+	import iconArrow from '@/assets/images/yj-navimg2.png';
+	
+export default {
+  name: 'Cjmscon',
+  data(){
+  	return {
+		nowdate : '', //日期
+		nowtime : '', //时间
+		newTimer : '', //定时器
+		
+		progressList: [
+		        { type: '1' },
+		        { type: '2' },
+		        { type: '1' },
+		        { type: '2' },
+		        { type: '1' },
+		        { type: '2' },
+		        { type: '1' },
+		        { type: '2' },
+		        { type: '1' },
+		        { type: '2' }
+		      ],
+		      arrowL,
+		      arrowR,
+		      icon,
+		      iconArrow,
+		      currentProgressId: '',
+		      scrollResultWidth: 0, //transform滚动的距离
+		      signleWidth: 215, //单个流程的宽度
+		      activeName: 0,
+		      currentClickNumber: 0,
+		      noScrollRight: true
+	  }
+  },
+  created() {
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.initgoRightArrow();
+        });
+      });
+    },
+   mounted () {
+         this.timerOneScondRun(); //执行日期函数
+                clearInterval(this.newTimer); //清除定时器
+                // 定时获取时间
+                this.newTimer = setInterval(this.timerOneScondRun, 1000);
+            },
+            beforeRouteLeave(to,from,next){
+            	// 离开组件时停掉定时器，节省内存
+                clearInterval(this.newTimer);
+                next();
+            },
+   
+  methods: {
+         //获取时间
+                timerOneScondRun() {
+                	let date = new Date();
+                	// 日期格式  2022年05月31日
+        	        this.nowdate =
+        	            date.getFullYear() +
+        	            "/" +
+        	            (date.getMonth() + 1 >= 10
+        	            ? date.getMonth() + 1
+        	            : "0" + (date.getMonth() + 1)) +
+        	            "/" +
+        	            (date.getDate() >= 10 ? date.getDate() : "0" + date.getDate());
+        	        // 时间格式 12:11:27
+        	        this.nowtime =
+        	            date.getHours() +
+        	            ":" +
+        	            (date.getMinutes() >= 10
+        	            ? date.getMinutes()
+        	            : "0" + date.getMinutes()) +
+        	            ":" +
+        	            (date.getSeconds() >= 10 ? date.getSeconds() : "0" + date.getSeconds());
+                },
+				
+		//初始化判断是否可以向右滚动
+		    initgoRightArrow() {
+		      const currentScrollWidth = this.$refs[`fixedBox`].clientWidth;
+		      const canNumber = Math.floor(currentScrollWidth / this.signleWidth); //可以放下的个数
+		      //如果最后一个流程图标已经展示出来，则停止滚动
+		      if (this.currentClickNumber + canNumber >= this.progressList.length) {
+		        this.noScrollRight = false;
+		        return;
+		      }
+		    },
+		    //点击上一个
+		    fnPrev() {
+		      //如果右点击的次数大于0，才可以左滚
+		      if (this.currentClickNumber > 0) {
+		        this.currentClickNumber -= 1;
+		        this.noScrollRight = true;
+		        this.fnScrollWidth('reduce');
+		      } else {
+		        return false;
+		      }
+		    },
+		    //点击下一个
+		    fnNext() {
+		      const currentScrollWidth = this.$refs[`fixedBox`].clientWidth;
+		      const canNumber = Math.floor(currentScrollWidth / this.signleWidth); //可以放下的个数
+		      //如果最后一个流程图标已经展示出来，则停止滚动
+		      if (this.currentClickNumber + canNumber >= this.progressList.length) {
+		        return;
+		      }
+		      //说明放不下有滚动条
+		      if (this.progressList.length > canNumber) {
+		        this.currentClickNumber += 1;
+		        if (this.currentClickNumber + canNumber >= this.progressList.length) {
+		          this.noScrollRight = false;
+		        }
+		        this.fnScrollWidth('add');
+		      }
+		    },
+		    //translate的宽度
+		    fnScrollWidth(type) {
+		      let result = 0;
+		      if (type === 'reduce') {
+		        result = 215;
+		      } else if (type === 'add') {
+		        result = -215;
+		      } else {
+		        result = 0;
+		      }
+		      this.scrollResultWidth += result;
+		    },
+				// 跳转沉浸模式
+		goChenJin(){
+			// this.$router.push('/YjCjms');
+		},
+		goJiaShi(){
+			this.$router.push('/');
+		}
+
+		
+
+  	}
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+	.btmbuttonbg{
+		position: absolute;
+		bottom: 0px;
+		width: 100%;
+		height: 120px;
+		background: url("../assets/images/yj-cjmsbtmbg.png") no-repeat center;
+		background-size: 100% 100%;
+		z-index: 2;
+	}
+	.btmbutton{
+		width: 100%;
+		height: 100%;
+		position: relative;
+	}
+	.btmbutton-con{
+		width: 1075px;
+		height: 100%;
+		position: absolute;
+		top: -2px;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+	.btmbutton-con .model-tab{
+		text-align: center;
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+	}
+	.btmbutton-con .model-tab button{
+		background: url("../assets/images/yj-nav.png") no-repeat center;
+		display: block;
+		width: 165px;
+		height: 25px;
+		line-height: 25px;
+		background-size: 100% 100%;
+		margin-top: -15px;
+		cursor: pointer;
+		color: #8b8b8b;
+		font-size: 14px;
+		border: 0px;
+		outline: 0px;
+	}
+	.btmbutton-con .model-tab button.on{
+		background: url("../assets/images/yj-navon.png") no-repeat center;
+		background-size: 100% 100%;
+		color: #fff;
+	}
+	.btmbutton-con .model-tab button:hover{
+		background: url("../assets/images/yj-navon.png") no-repeat center;
+		background-size: 100% 100%;
+		color: #fff;
+	}
+	.cjms-btmbtn{
+		position: absolute;
+		left: 250px;
+		top:50px;
+	}
+	.cjms-btmbtn p{
+		background: url("../assets/images/yj-cjmsbtnbg4.png") no-repeat center;
+		background-size: 100% 100%;
+		width: 150px;
+		height: 23px;
+		line-height: 23px;
+		margin-bottom: 10px;
+		color: #fff;
+		padding-left: 13px;
+		font-size: 14px;
+		cursor: pointer;
+		text-align: left;
+	}
+	.cjms-btmbtn p.on{
+		background: url("../assets/images/yj-cjmsbtnbg4-on.png") no-repeat center;
+	}
+	.cjms-btmbtn p:hover{
+		background: url("../assets/images/yj-cjmsbtnbg4-on.png") no-repeat center;
+	}
+	.cjms-btmbtn p:hover,.cjms-btmbtn p:hover{
+		text-shadow: 0px 0px 5px #1cf4ff;
+	}
+	.cjms-btmbtn p i{
+		font-size: 15px;
+		margin-right: 8px;
+	}
+	.cjms-btmbtn p:nth-child(1){
+		margin-left: 15px;
+	}
+	.cjms-btmbtn p:nth-child(2){
+		margin-left: 0px;
+	}
+	
+	.processBox {
+	  display: flex;
+	  align-items: center;
+	  justify-content: space-between;
+	
+	}
+	.processBox .arrow {
+	  width: 30px;
+	  cursor: pointer;
+	}
+	.processBox .arrowOpacity {
+	  cursor: default;
+	  opacity: 0.4;
+	}
+	.processBox .fixedBox {
+	  flex: 1;
+	  overflow: hidden;
+	}
+	.processBox .centerScroll {
+	  box-sizing: border-box;
+	  padding: 12px 0 0px 0px;
+	  white-space: nowrap;
+	  display:flex;
+	  flex-direction: row;
+	}
+	.processBox .centerScroll .signleTab {
+	  width: 120px;
+	  position: relative;
+	 
+	}
+	.processBox .centerScroll .signleTab img{
+	  width:103px;
+	  height:70px;
+	}
+	.processBox .centerScroll .signleTab span{
+	  text-align:center;
+	  color:#fff;
+	  font-size:14px;
+	  display:block;
+	  text-align:center;
+	}
+	.processBox .centerScroll .signleTab .arrowSquare {
+	  position: absolute;
+	  top: 25px;
+	  right: 0;
+	}
+	.leftIcon {
+	  width: 120px;
+	  text-align: center;
+	  cursor: pointer;
+	}
+	.leftIcon .pregressIcon {
+	  width: 60px;
+	  height: 60px;
+	}
+</style>

src/components/Cjmscon.vue

@@ -0,0 +1,79 @@
+<template>
+	<div class="cjmscon">
+		<div class="cjmscon-btn">
+			<a><i class="iconfont yj-icon-fengsu"></i>风速&nbsp;8.0m/s</a>
+			<a><i class="iconfont yj-icon-fengxiang"></i>风向&nbsp;东南风</a>
+			<a><i class="iconfont yj-icon-jiangyuliang"></i>降雨量&nbsp;10mm</a>
+			<a><i class="iconfont yj-icon-huoxiandengji"></i>风险等级&nbsp;4</a>
+			<a><i class="iconfont yj-icon-fengxiantishi"></i>风险&nbsp;1</a>
+		</div>
+		<div class="cjmscon-map">
+			<img src="../assets/images/yj-cjmsimg2.png" />
+		</div>
+	</div>
+</template>
+<script>
+	
+	
+export default {
+  name: 'Cjmsbtm',
+  data(){
+  	return {
+		
+		}
+		    
+  },
+  created() {
+
+    },
+   mounted () {
+       
+            },
+   
+  methods: {
+         
+},
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+	.cjmscon{
+		position: absolute;
+		top: 90px;
+		left: 50%;
+		transform: translateX(-50%);
+		z-index: 99;
+		}
+	.cjmscon-btn{
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		margin-bottom: 15px;
+	}
+	.cjmscon-btn a{
+		display: flex;
+		flex-direction: row;
+		color: #fff;
+		background: url("../assets/images/yj-cjmsbtnbg3.png") no-repeat center;
+		width: 189px;
+		height: 38px;
+		align-items: center;
+		font-size: 14px;
+	}
+	.cjmscon-btn a:hover{
+		text-shadow: 0px 0px 5px #00ffff;
+	}
+	.cjmscon-btn a i{
+		margin-left: 20px;
+		margin-right: 10px;
+	}
+	.cjmscon-map{
+		width: 1100px;
+		height: 650px;
+	}
+	.cjmscon-map img{
+		width: 100%;
+		height: 100%;
+	}
+</style>

src/components/Cjmsheader.vue

@@ -0,0 +1,108 @@
+<template>
+	<div class="Cjmsheader">
+		<div class="time">{{nowdate}}&nbsp;&nbsp;{{nowtime}}</div>
+		<div class="header">
+			  <p>延吉市数字应急自然灾害综合风险监管平台</p>
+		</div>
+		<div class="yj-name">张三</div>
+	</div>
+  
+</template>
+
+<script>
+export default {
+  name: 'Cjmsheader',
+ data(){
+   	return {
+ 		nowdate : '', //日期
+ 		nowtime : '', //时间
+ 		newTimer : '', //定时器
+ 	  }
+   },
+   props: {
+ 	  
+   },
+    mounted () {
+          this.timerOneScondRun(); //执行日期函数
+                 clearInterval(this.newTimer); //清除定时器
+                 // 定时获取时间
+                 this.newTimer = setInterval(this.timerOneScondRun, 1000);
+             },
+             beforeRouteLeave(to,from,next){
+             	// 离开组件时停掉定时器，节省内存
+                 clearInterval(this.newTimer);
+                 next();
+             },
+    
+   methods: {
+          //获取时间
+                 timerOneScondRun() {
+                 	let date = new Date();
+                 	// 日期格式  2022年05月31日
+         	        this.nowdate =
+         	            date.getFullYear() +
+         	            "/" +
+         	            (date.getMonth() + 1 >= 10
+         	            ? date.getMonth() + 1
+         	            : "0" + (date.getMonth() + 1)) +
+         	            "/" +
+         	            (date.getDate() >= 10 ? date.getDate() : "0" + date.getDate());
+         	        // 时间格式 12:11:27
+         	        this.nowtime =
+         	            date.getHours() +
+         	            ":" +
+         	            (date.getMinutes() >= 10
+         	            ? date.getMinutes()
+         	            : "0" + date.getMinutes()) +
+         	            ":" +
+         	            (date.getSeconds() >= 10 ? date.getSeconds() : "0" + date.getSeconds());
+                 },
+ 				
+   	}
+ }
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+	.header{
+		position: absolute;
+		background: url("../assets/images/yj-cjmstopbg.png") no-repeat center;
+		width: 100%;
+		height: 108px;
+		top:0px;
+		left: 0px;
+		z-index: 4;
+	}
+	.header p{
+		color: #fff;
+		line-height: 70px;
+		font-family: "myfont";
+		font-size: 36px;
+		letter-spacing: 1px;
+		text-align: center;
+	}
+	.time{
+		text-align: center;
+		font-family: "黑体";
+		font-size: 16px;
+		color: #fff;
+		font-style: italic;
+		position: absolute;
+		left:25px;
+		top:6px;
+		z-index: 9;
+	}
+	.yj-name{
+		position: absolute;
+		cursor: pointer;
+		padding-left: 72px;
+		height: 26px;
+		line-height: 26px;
+		right: 25px;
+		top: 4px;
+		color: #fff;
+		z-index: 9;
+		font-size: 16px;
+		background: url("../assets/images/yj-name.png") no-repeat center;
+	}
+</style>

src/components/Cjmsleftnav.vue

@@ -0,0 +1,104 @@
+<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>
+		  <ul class="sxt-list">
+			  <li>名称：摄像头</li>
+			  <li>地址：东风乡喇嘛屯</li>
+			  <li>塔高：50m</li>
+			  <li>半径：6km</li>
+			  <li>网络：移动</li>
+			  <li>状态：在线</li>
+			  <li>周边：</li>
+		  </ul>
+		  <div class="sxt-img">
+			  <div class="sxt-img-div">
+				  <img src="../assets/images/yj-cjmsimg1.png"/>
+				  <span>摄像头1</span>
+			  </div>
+			  <div class="sxt-img-div">
+				  <img src="../assets/images/yj-cjmsimg1.png"/>
+				  <span>摄像头2</span>
+			  </div>
+			  <div class="sxt-img-div">
+				  <img src="../assets/images/yj-cjmsimg1.png"/>
+				  <span>摄像头3</span>
+			  </div>
+		  </div>
+		</div>
+</div>
+</template>
+
+<script>
+export default {
+  name: 'Cjmsleftnav',
+  props: {
+	  
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+	.nav{
+		background: url("../assets/images/yj-cjmsleftnavbg.png") no-repeat center;
+		background-size: 100% 100%;
+		position: absolute;
+		left: 0px;
+		top: 0px;
+		height: 87.2vh;
+		z-index: 3;
+		width: 421px;
+	}
+	.nav-cont{
+		width: 350px;
+		height: calc(100vh - 17vh);
+		margin-top: 10vh;
+		margin: 8vh 0px 0px 15px;
+	}
+	
+	.sxt-list{
+		display: flex;
+		flex-direction: column;
+		margin: 20px 10px;
+	}
+	.sxt-list li{
+		font-size:14px;
+		color:#fff;
+		height:28px;
+		line-height:28px;
+		margin:2px 0px;
+		width:100%;
+		padding-left:18px;
+		text-align: left;
+	}
+	.sxt-list li:nth-child(odd){
+		background:#102452;
+	}
+	.sxt-img{
+		display:flex;
+		flex-direction:row;
+		justify-content: space-around;
+	}
+	.sxt-img .sxt-img-div{
+		cursor: pointer;
+	}
+	.sxt-img .sxt-img-div img{
+		width:105px;
+		height:75px;
+		border:1px solid #173e79;
+	}
+	.sxt-img .sxt-img-div span{
+		text-align:center;
+		color:#fff;
+		font-size:14px;
+		display:block;
+	}
+	
+	
+</style>

src/components/Cjmsrightnav.vue

@@ -0,0 +1,208 @@
+<template>
+  <div class="right-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="cjms-sjtj">
+			  <div class="cjms-sjdiv">
+				  <i class="iconfont yj-icon-gaojingshijian"></i>
+				  <div class="cjms-sjdiv-sj">
+					  <span>事件总数</span>
+					  <p>2682</p>
+				  </div>
+			  </div>
+			  <div class="cjms-sjdiv">
+				  <i class="iconfont yj-icon-querengongdan"></i>
+				  <div class="cjms-sjdiv-sj">
+					  <span>确认事件</span>
+					  <p>2000</p>
+				  </div>
+			  </div>
+		  </div>
+		 <div class="cjms-sjcon">
+			 <p><span>今日事件</span><b>2682</b></p>
+			 <p><span>新增事件</span><b>2682</b></p>
+			 <p><span>确认事件</span><b>2682</b></p>
+			 <p><span>完成事件</span><b>2682</b></p>
+		 </div>
+		<div class="jydw-list scroll h-45">
+			<div class="jydw-li">
+				<img src="../assets/images/yj-img1.png"/>
+				<div class="jydw-txt">
+					<h2>防汛应急事件</h2>
+					<p>2023/7/27 18:50:36</p>
+				</div>
+			</div>
+			<div class="jydw-li">
+				<img src="../assets/images/yj-img1.png"/>
+				<div class="jydw-txt">
+					<h2>防汛应急事件</h2>
+					<p>2023/7/27 18:50:36</p>
+				</div>
+			</div>
+			<div class="jydw-li">
+				<img src="../assets/images/yj-img1.png"/>
+				<div class="jydw-txt">
+					<h2>防汛应急事件</h2>
+					<p>2023/7/27 18:50:36</p>
+				</div>
+			</div>
+			<div class="jydw-li">
+				<img src="../assets/images/yj-img1.png"/>
+				<div class="jydw-txt">
+					<h2>防汛应急事件</h2>
+					<p>2023/7/27 18:50:36</p>
+				</div>
+			</div>
+			<div class="jydw-li">
+				<img src="../assets/images/yj-img1.png"/>
+				<div class="jydw-txt">
+					<h2>防汛应急事件</h2>
+					<p>2023/7/27 18:50:36</p>
+				</div>
+			</div>
+			<div class="jydw-li">
+				<img src="../assets/images/yj-img1.png"/>
+				<div class="jydw-txt">
+					<h2>防汛应急事件</h2>
+					<p>2023/7/27 18:50:36</p>
+				</div>
+			</div>
+			<div class="jydw-li">
+				<img src="../assets/images/yj-img1.png"/>
+				<div class="jydw-txt">
+					<h2>防汛应急事件</h2>
+					<p>2023/7/27 18:50:36</p>
+				</div>
+			</div>
+		</div>
+	  </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Cjmsrightnav',
+  props: {
+	  
+  },
+  methods:{
+		
+  },
+  mounted(){
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+	.right-nav{
+		background: url("../assets/images/yj-cjmsrightnavbg.png") no-repeat center;
+		background-size: 100% 100%;
+		position: absolute;
+		right: 0px;
+		top:0px;
+		height: 87.2vh;
+		z-index: 3;
+		width: 421px;
+	}
+	.nav-cont{
+		width: 370px;
+		height: calc(100vh - 17vh);
+		margin-top: 10vh;
+		margin: 8vh 19px 0px 0px;
+		float: right;
+	}
+	.cjms-sjtj{
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		margin: 20px 5px 10px 20px;
+	}
+	.cjms-sjtj .cjms-sjdiv{
+		background:url("../assets/images/yj-cjmsbtnbg1.png") no-repeat center;
+		background-size:100% 100%;
+		width: 145px;
+		height:52px;
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
+		padding: 0px 10px;
+	}
+	.cjms-sjtj .cjms-sjdiv i{
+		color:#fff;
+		font-size:30px;
+	}
+	.cjms-sjtj .cjms-sjdiv .cjms-sjdiv-sj{
+		text-align:right;
+		color:#fff;
+	}
+	.cjms-sjtj .cjms-sjdiv .cjms-sjdiv-sj span{
+		font-size:12px;
+		display:block;
+	}
+	.cjms-sjtj .cjms-sjdiv .cjms-sjdiv-sj p{
+		font-size:24px;
+		font-family:myfont2;
+	}
+	.cjms-sjcon{
+		margin: 0px 5px 20px 20px;
+	}
+	.cjms-sjcon p{
+		background:url("../assets/images/yj-cjmsbtnbg2.png") no-repeat center;
+		background-size:100% 100%;
+		width: 1005;
+		height:40px;
+		line-height:40px;
+		color:#fff;
+		padding:0px 15px;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
+		margin-bottom:8px;
+	}
+	.cjms-sjcon p span{
+		font-size:12px;
+	}
+	.cjms-sjcon p b{
+		font-size:24px;
+		font-family:myfont2;
+		margin-right:0px;
+	}
+	.jydw-list{
+		display: flex;
+		flex-direction: column;
+		margin: 20px 20px;
+	}
+	.jydw-list .jydw-li{
+		display: flex;
+		flex-direction: row;
+		margin-bottom: 15px;
+		cursor: pointer;
+		text-align: left;
+	}
+	.jydw-list .jydw-li img{
+		width: 100px;
+		height: 68px;
+		margin-right: 15px;
+	}
+	.jydw-list .jydw-li h2{
+		color: #23d6df;
+		font-size: 16px;
+		font-weight: 900;
+		padding-bottom: 5px;
+	}
+	.jydw-list .jydw-li p{
+		color: #fff;
+		font-size: 14px;
+		line-height: 20px;
+	}
+		
+	
+</style>

src/components/Header.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="header">
+	  <p>延吉市数字应急自然灾害综合风险监管平台</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Header',
+  props: {
+	  
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+	.header{
+		position: absolute;
+		background: url("../assets/images/yj-topbg.png") no-repeat center;
+		width: 100%;
+		height: 180px;
+		top:0px;
+		left: 0px;
+		z-index: 2;
+	}
+	.header p{
+		color: #fff;
+		line-height: 60px;
+		font-family: "myfont";
+		font-size: 36px;
+		letter-spacing: 1px;
+		text-align: center;
+	}
+</style>

src/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/Jsmsdialog.vue

@@ -0,0 +1,521 @@
+<template>
+	 <el-dialog title="事件详情" custom-class="Jsmsdialog" :visible.sync="outerVisible">
+	 <div class="Jsmsdialog-con">
+		 <div class="Jsmsdialog-left">
+			 <div class="Jsmsdialog-map">
+				 <div class="Jsmsdialog-yatz">
+					 <span>暂为应急预案</span>
+					 <button>应急预案</button>
+				 </div>
+				 <img src="../assets/images/yj-mapbg2.png" />
+			 </div>
+			 <div class="Jsmsdialog-btn">
+				 <div class="Jsmsdialog-btn-left">
+					 <i class="iconfont yj-icon-fengsu"></i>
+					 <i class="iconfont yj-icon-fengxiang"></i>
+					 <i class="iconfont yj-icon-jiangyuliang"></i>
+					 <i class="iconfont yj-icon-shidu"></i>
+				 </div>
+				 <div class="Jsmsdialog-btn-right">
+					 <a class="dialog-btn"><i class="iconfont yj-icon-zerenzhi"></i>责任制</a>
+					 <a class="dialog-btn"><i class="iconfont yj-icon-liandong"></i>联动</a>
+					 <a class="dialog-btn"><i class="iconfont yj-icon-fujintantou"></i>附近探头</a>
+				 </div>
+			 </div>
+			 <div class="Jsmsdialog-icon">
+				 <leftRightSwiperScroll>
+					 <div class="icon-con"  >
+					   <div class="iconfont icon yj-icon-centerdata-t-forest-fireteam" style="background:#f5ad1b"></div>
+					   <div class="icon-text">
+						 <h5 style="white-space: nowrap">防火队</h5>
+					   </div>
+					 </div>
+					 <div class="icon-con"  >
+					   <div class="iconfont icon yj-icon-centerdata-t-forest-waterintake" style="background:#58b35d"></div>
+					   <div class="icon-text">
+					 		<h5 style="white-space: nowrap">取水口</h5>
+					   </div>
+					 </div>
+					 <div class="icon-con"  >
+					   <div class="iconfont icon yj-icon-watercrane" style="background:#0fa2ff"></div>
+					   <div class="icon-text">
+					 						 <h5 style="white-space: nowrap">水鹤</h5>
+					   </div>
+					 </div>
+					 <div class="icon-con"  >
+					   <div class="iconfont icon yj-icon-centerdata-t-forest-firehydrant-1" style="background:#da8ec5"></div>
+					   <div class="icon-text">
+					 						 <h5 style="white-space: nowrap">地上消火栓</h5>
+					   </div>
+					 </div>
+					 <div class="icon-con"  >
+					   <div class="iconfont icon yj-icon-centerdata-t-forest-firehydrant-2" style="background:#78bfc2"></div>
+					   <div class="icon-text">
+					 						 <h5 style="white-space: nowrap">地下消火栓</h5>
+					   </div>
+					 </div>
+					 <div class="icon-con"  >
+					   <div class="iconfont icon yj-icon-centerdata-t-forest-firehydrant-3" style="background:#f5ad1b"></div>
+					   <div class="icon-text">
+					 						 <h5 style="white-space: nowrap">室内消火栓</h5>
+					   </div>
+					 </div>
+					 <div class="icon-con"  >
+					   <div class="iconfont icon yj-icon-centerdata-t-firecontrol-fire-force" style="background:#ff6063"></div>
+					   <div class="icon-text">
+					 						 <h5 style="white-space: nowrap">消防力量</h5>
+					   </div>
+					 </div>
+					 <div class="icon-con"  >
+					   <div class="iconfont icon yj-icon-centerdata-t-firecontrol-fire-key-places" style="background:#58b35d"></div>
+					   <div class="icon-text">
+					 						 <h5 style="white-space: nowrap">重点场所</h5>
+					   </div>
+					 </div>
+					 <div class="icon-con"  >
+					   <div class="iconfont icon yj-icon-centerdata-t-firecontrol-fire-pressure-sensor" style="background:#f5ad1b"></div>
+					   <div class="icon-text">
+					 						 <h5 style="white-space: nowrap">压力传感器</h5>
+					   </div>
+					 </div>
+					 <div class="icon-con"  >
+					   <div class="iconfont icon yj-icon-liandong" style="background:#da8ec5"></div>
+					   <div class="icon-text">
+					 						 <h5 style="white-space: nowrap">基本联动力量</h5>
+					   </div>
+					 </div>
+					 <div class="icon-con"  >
+					   <div class="iconfont icon yj-icon-centerdata-t-firecontrol-other-linkage-force" style="background:#5278e8"></div>
+					   <div class="icon-text">
+					 						 <h5 style="white-space: nowrap">其他联动力量</h5>
+					   </div>
+					 </div>
+					 <div class="icon-con"  >
+					   <div class="iconfont icon yj-icon-centerdata-t-firecontrol-foam-liquid" style="background:#00d6cc"></div>
+					   <div class="icon-text">
+					 						 <h5 style="white-space: nowrap">泡沫液</h5>
+					   </div>
+					 </div>
+					 <div class="icon-con"  >
+					   <div class="iconfont icon yj-icon-station" style="background:#898e28"></div>
+					   <div class="icon-text">
+					 						 <h5 style="white-space: nowrap">专职站</h5>
+					   </div>
+					 </div>
+					 <div class="icon-con"  >
+					   <div class="iconfont icon yj-icon-fujintantou" style="background:#f5ad1b"></div>
+					   <div class="icon-text">
+					 						 <h5 style="white-space: nowrap">摄像头</h5>
+					   </div>
+					 </div>
+				 </leftRightSwiperScroll>
+				 <input type="number" class="d-input-bottom" placeholder="请输入搜索半径" />
+			 </div>
+		 </div>
+		 <div class="Jsmsdialog-right">
+			 <div class="Jsmsdialog-jbqk">
+				 <div class="Jsmsdialog-tit2">
+					 <i class="iconfont yj-icon-jibenqingkuang"></i>
+					 <span>基本情况</span>
+				 </div>
+				 <div class="Jsmsdialog-jbqk-txt">
+					 <div class="txt">
+						 <span>来源：</span>
+						 <span>东山乡，喇嘛甸摄像头</span>
+					 </div>
+					 <div class="txt">
+						 <span>时间：</span>
+						 <span>2023年7月21 10:25:07</span>
+					 </div>
+					 <div class="txt">
+						 <span>地区：</span>
+						 <span>东山乡喇嘛甸村</span>
+					 </div>
+					 <div class="txt">
+						 <span>类型：</span>
+						 <span class="hxsj">火险事件</span>
+					 </div>
+					 <div class="txt">
+						 <span>状态：</span>
+						 <button class="xsb">新上报</button>
+						  <button class="wqr">未确认</button>
+					 </div>
+					 <div class="txt colm">
+						 <span>详情：</span>
+						 <span>东山乡喇嘛甸村喇嘛甸摄像头与2023年7月21日10:25:07上报火险事件，事件位于基站西北方向3公里</span>
+					 </div>
+				 </div>
+			 </div>
+			 <div class="Jsmsdialog-dtgz">
+				 <div class="Jsmsdialog-tit2">
+					 <i class="iconfont yj-icon-dongtaigenzong"></i>
+					 <span>动态跟踪</span>
+				 </div>
+				<div class="Jsmsdialog-sjz scroll h-41-7">
+					<div class="Jsmsdialog-sjz-con">
+						<h4>东山乡，喇嘛甸摄像头</h4>
+						<p>2023年7月21日10:25:07</p>
+						<div class="Jsmsdialog-sjz-sj">
+							<button class="sb">上报</button>
+							<span class="hxsj">火险事件</span>
+						</div>
+						<img src="../assets/images/yj-img2.png" />
+					</div>
+					<div class="Jsmsdialog-sjz-con">
+						<h4>东山乡，李四</h4>
+						<p>2023年7月21日10:29:36</p>
+						<div class="Jsmsdialog-sjz-sj">
+							<button class="qr">确认</button>
+							<span class="hxsj">森林防火事件</span>
+						</div>
+						<p>火老大了，赶紧来吧，再晚点就要进屯子了!</p>
+						<img src="../assets/images/yj-img3.png" />
+					</div>
+				</div>
+			 </div>
+			 
+		 </div>
+	 </div>
+	 </el-dialog>
+</template>
+
+<script>
+import leftRightSwiperScroll from './leftRightSwiperScroll.vue'
+export default {
+  name: 'Jsmsdialog',
+  data(){
+	  return{
+		  outerVisible:false
+	  }
+  },
+	components: {
+ 	 leftRightSwiperScroll
+ }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style>
+	.Jsmsdialog{
+		position: fixed;
+		top:-10%;
+		left:50%;
+		transform: translateX(-50%);
+		width: 1750px;
+		height: 830px;
+		background: #031135;
+		border: 1px solid #2159b3;
+		z-index: 999;
+		box-shadow: 0px 0px 10px #1a498f;
+	}
+	.Jsmsdialog .el-dialog__header{
+		height: 55px;
+		background: #081a46;
+		line-height: 55px;
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		
+	}
+	.Jsmsdialog .el-dialog__header span{
+		font-size: 18px;
+		padding-left: 20px;
+		color: #fff;
+	}
+	.Jsmsdialog .el-dialog__header i{
+		background: none;
+		outline: 0px;
+		border: 0px;
+		font-size: 16px;
+		color: #fff;
+		width: 60px;
+		cursor: pointer;
+	}
+	.el-dialog__body{
+		padding: 17px 20px;
+	}
+	.Jsmsdialog-con{
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+	}
+	.Jsmsdialog-left{
+		width: 1330px;
+		height: 738px;
+	}
+	.Jsmsdialog-left .Jsmsdialog-map{
+		width: 100%;
+		height: 640px;
+		position: relative;
+	}
+	.Jsmsdialog-left .Jsmsdialog-map img{
+		width: 100%;
+		height: 100%;
+	}
+	.Jsmsdialog-left .Jsmsdialog-map .Jsmsdialog-yatz{
+		position: absolute;
+		top:5px;
+		left: 5px;
+		width: 220px;
+		height: 30px;
+		line-height: 30px;
+		display: flex;
+		flex-direction: row;
+		background: #18326c;
+	}
+	.Jsmsdialog-left .Jsmsdialog-map .Jsmsdialog-yatz span{
+		color: #fff;
+		font-size: 14px;
+		padding-left: 15px;
+	}
+	.Jsmsdialog-left .Jsmsdialog-map .Jsmsdialog-yatz button{
+		margin-left: auto;
+		width: 80px;
+		background: #052880;
+		border: 0px;
+		outline: 0px;
+		color: #fff;
+	}
+	.Jsmsdialog-left .Jsmsdialog-map .Jsmsdialog-yatz button:hover{
+		text-shadow: 0px 0px 5px #00ffff;
+	}
+	.Jsmsdialog-left .Jsmsdialog-btn{
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		margin: 10px 0px 10px 0px;
+	}
+	.Jsmsdialog-left .Jsmsdialog-btn .Jsmsdialog-btn-left i{
+		color: #fff;
+		font-size: 18px;
+		margin-right: 30px;
+	}
+	.Jsmsdialog-left .Jsmsdialog-btn .Jsmsdialog-btn-right .dialog-btn{
+		color: #fff;
+		font-size: 14px;
+		 background: -webkit-linear-gradient(#11274d, #104894); /* Safari 5.1 - 6.0 */
+		  background: -o-linear-gradient(#11274d, #104894); /* Opera 11.1 - 12.0 */
+		  background: -moz-linear-gradient(#11274d, #104894); /* Firefox 3.6 - 15 */
+		  background: linear-gradient(#11274d, #104894); /* 标准的语法 */
+		border: 1px solid #1c61be;
+		padding: 0px 12px;
+		height: 30px;
+		line-height: 26px;
+		margin-left: 10px;
+		border-radius: 5px;
+		display: inline-block;
+	}
+	.Jsmsdialog-left .Jsmsdialog-btn .Jsmsdialog-btn-right .dialog-btn:hover{
+		 background: -webkit-linear-gradient(#142f5e, #1152a7); /* Safari 5.1 - 6.0 */
+		  background: -o-linear-gradient(#142f5e, #1152a7); /* Opera 11.1 - 12.0 */
+		  background: -moz-linear-gradient(#142f5e, #1152a7); /* Firefox 3.6 - 15 */
+		  background: linear-gradient(#142f5e, #1152a7); /* 标准的语法 */
+		  text-shadow: 0px 0px 5px #00ffff;
+	}
+	.Jsmsdialog-left .Jsmsdialog-btn .Jsmsdialog-btn-right .dialog-btn i{
+		font-size: 18px;
+		margin-right: 8px;
+		color: #01d2f5;
+	}
+	.Jsmsdialog-icon{
+		font-size: 16px;
+		cursor: pointer;
+		display: -webkit-box;
+		display: -ms-flexbox;
+		display: flex;
+		-webkit-box-align: center;
+		-ms-flex-align: center;
+		align-items: center;
+		-ms-flex-wrap: wrap;
+		flex-wrap: wrap;
+		background: -webkit-linear-gradient(#11274d, #104894); /* Safari 5.1 - 6.0 */
+		  background: -o-linear-gradient(#11274d, #104894); /* Opera 11.1 - 12.0 */
+		  background: -moz-linear-gradient(#11274d, #104894); /* Firefox 3.6 - 15 */
+		  background: linear-gradient(#11274d, #104894); /* 标准的语法 */
+		border: 1px solid #1c61be;
+		border-radius: 5px;
+	}
+	.Jsmsdialog-icon .icon-con{
+	    width: 100%;
+	    display: -webkit-box;
+	    display: -ms-flexbox;
+	    display: flex;
+	    padding: 0.5rem;
+	    -webkit-box-align: center;
+	    -ms-flex-align: center;
+	    align-items: center;
+	}
+	.Jsmsdialog-icon .icon-con .icon{
+	    display: -webkit-box;
+	    display: -ms-flexbox;
+	    display: flex;
+	    -webkit-box-pack: center;
+	    -ms-flex-pack: center;
+	    justify-content: center;
+	    -webkit-box-align: center;
+	    -ms-flex-align: center;
+	    align-items: center;
+	    border-radius: 5px;
+	    text-align: center;
+	    color: #fff !important;
+	    border: 2.5px solid rgba(51, 70, 127, 0.7);
+		width: 35px;
+		height: 35px;
+		font-size: 18px;
+	}
+	.Jsmsdialog-icon .icon-con .icon-text{
+	    display: -webkit-box;
+	    display: -ms-flexbox;
+	    display: flex;
+	    -webkit-box-orient: vertical;
+	    -webkit-box-direction: normal;
+	    -ms-flex-direction: column;
+	    flex-direction: column;
+	    -webkit-box-pack: center;
+	    -ms-flex-pack: center;
+	    justify-content: center;
+	    font-size: 14px;
+	    color: #2bacf7;
+	    padding: 0 0.5rem;
+	}
+	.Jsmsdialog-icon .icon-con .icon-text h5{
+	    font-size: 12px;
+	    line-height: 35px;
+	    margin-right: 10px;
+	}
+	.Jsmsdialog-icon .d-input-bottom {
+	    border: 1px solid #1c61be;
+	    background-color: #0e2a54;
+	    color: #2bacf7;
+		border-radius: 3px;
+		    display: inline-block;
+		    height: 40px;
+		    line-height: 40px;
+		    outline: 0;
+		    padding: 0 15px;
+		    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
+		    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
+		    width: 145px;
+		        margin-left: 8px;
+	}
+	.Jsmsdialog-right{
+		width: 438px;
+		margin-left: 20px;
+	}
+	.Jsmsdialog-tit2{
+		width: 100%;
+		background: url("../assets/images/yj-titxbg.png") no-repeat bottom;
+		height: 40px;
+		line-height: 40px;
+		    align-items: center;
+		    display: flex;
+	}
+	.Jsmsdialog-tit2 i{
+		font-size: 22px;
+		color: #00c3e4;
+		margin-right: 8px;
+	}
+	.Jsmsdialog-tit2 span{
+		font-size: 18px;
+		 background-image:-webkit-linear-gradient(top,#fff,#4ce9ff); 
+		-webkit-background-clip:text; 
+		-webkit-text-fill-color:transparent; 
+		font-weight: bold;
+	}
+	.Jsmsdialog-jbqk-txt{
+		width: 96%;
+		display: flex;
+		flex-direction: column;
+		margin: 10px auto;
+	}
+	.Jsmsdialog-jbqk-txt .txt{
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		font-size: 16px;
+		color: #fff;
+		margin-bottom: 10px;
+	}
+	.hxsj{
+		padding-left: 25px;
+		background: url("../assets/images/yj-fair.png") no-repeat left;
+		color:#ff6406;
+		background-size: contain;
+	}
+	.Jsmsdialog-jbqk-txt .txt button{
+		font-size: 14px;
+		color: #fff;
+		border: 0px;
+		outline: 0px;
+		display: inline-block;
+		border-radius: 5px;
+		margin-right: 10px;
+		width: 80px;
+		height: 25px;
+		line-height: 25px;
+	}
+	.Jsmsdialog-jbqk-txt .txt button.xsb{
+		background: #183881;
+	}
+	.Jsmsdialog-jbqk-txt .txt button.wqr{
+		background: #ff780a;
+	}
+	.colm{
+		display: flex!important;
+		flex-direction: column!important;
+		align-items: flex-start!important;
+	}
+	.Jsmsdialog-sjz{
+		background: url("../assets/images/yj-titx1.png") repeat-y 10px 0px;
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		margin: 13px auto;
+		padding-left: 30px;
+		text-align: left;
+	}
+	.Jsmsdialog-sjz .Jsmsdialog-sjz-con{
+		position: relative;
+		margin-bottom: 10px;
+	}
+	.Jsmsdialog-sjz .Jsmsdialog-sjz-con::after{
+		content: " ";
+		display: block;
+		background: url("../assets/images/yj-tity3.png") no-repeat center;
+		width: 14px;
+		height: 14px;
+		position: absolute;
+		left: -25px;
+		top:6px;
+	}
+	.Jsmsdialog-sjz .Jsmsdialog-sjz-con h4{
+		font-size: 18px;
+		color: #00deff;
+		margin-bottom: 5px;
+	}
+	.Jsmsdialog-sjz .Jsmsdialog-sjz-con p{
+		font-size: 14px;
+		color: #fff;
+		margin-bottom: 10px;
+	}
+	.Jsmsdialog-sjz .Jsmsdialog-sjz-con .Jsmsdialog-sjz-sj{
+		margin-bottom: 13px;
+	}
+	.Jsmsdialog-sjz .Jsmsdialog-sjz-con .Jsmsdialog-sjz-sj button{
+		font-size: 14px;
+		color: #fff;
+		border: 0px;
+		outline: 0px;
+		display: inline-block;
+		border-radius: 5px;
+		margin-right: 13px;
+		padding: 3px 10px;
+	}
+	.Jsmsdialog-sjz .Jsmsdialog-sjz-con .Jsmsdialog-sjz-sj button.sb{
+		background:#183881 ;
+	}
+	.Jsmsdialog-sjz .Jsmsdialog-sjz-con .Jsmsdialog-sjz-sj button.qr{
+		background:#188138 ;
+	}
+
+</style>

src/components/Leftnav.vue

@@ -0,0 +1,288 @@
+<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>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>
+			  </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>王&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>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>
+		  			  </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>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>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>
+		  			  </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>

src/components/Rightnav.vue

@@ -0,0 +1,292 @@
+<template>
+  <div class="right-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="jydw-zs">
+			<span>救援队伍总数：</span>
+			<b>300</b>
+			<span>人</span>
+		</div>
+		<div id="Jydw"></div>
+		<div class="jydw-list scroll h-50">
+			<div class="jydw-li">
+				<img src="../assets/images/yj-img1.png"/>
+				<div class="jydw-txt">
+					<h2>大王庄救援队伍</h2>
+					<p>队长：周晔</p>
+					<p>人数：30人</p>
+				</div>
+			</div>
+			<div class="jydw-li">
+				<img src="../assets/images/yj-img1.png"/>
+				<div class="jydw-txt">
+					<h2>大王庄救援队伍</h2>
+					<p>队长：周晔</p>
+					<p>人数：30人</p>
+				</div>
+			</div>
+			<div class="jydw-li">
+				<img src="../assets/images/yj-img1.png"/>
+				<div class="jydw-txt">
+					<h2>大王庄救援队伍</h2>
+					<p>队长：周晔</p>
+					<p>人数：30人</p>
+				</div>
+			</div>
+			<div class="jydw-li">
+				<img src="../assets/images/yj-img1.png"/>
+				<div class="jydw-txt">
+					<h2>大王庄救援队伍</h2>
+					<p>队长：周晔</p>
+					<p>人数：30人</p>
+				</div>
+			</div>
+			<div class="jydw-li">
+				<img src="../assets/images/yj-img1.png"/>
+				<div class="jydw-txt">
+					<h2>大王庄救援队伍</h2>
+					<p>队长：周晔</p>
+					<p>人数：30人</p>
+				</div>
+			</div>
+			<div class="jydw-li">
+				<img src="../assets/images/yj-img1.png"/>
+				<div class="jydw-txt">
+					<h2>大王庄救援队伍</h2>
+					<p>队长：周晔</p>
+					<p>人数：30人</p>
+				</div>
+			</div>
+			<div class="jydw-li">
+				<img src="../assets/images/yj-img1.png"/>
+				<div class="jydw-txt">
+					<h2>大王庄救援队伍</h2>
+					<p>队长：周晔</p>
+					<p>人数：30人</p>
+				</div>
+			</div>
+		</div>
+	  </div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+export default {
+  name: 'Rightnav',
+  props: {
+	  
+  },
+  methods:{
+	  initCharts (){
+		  let myChart = echarts.init(document.getElementById('Jydw'));
+		  myChart.setOption({
+			  tooltip: {
+			          show: true,
+			          trigger: 'axis',
+			          axisPointer: { // 坐标轴指示器，坐标轴触发有效
+			              type: 'line', // 默认为直线，可选为：'line' | 'shadow'
+			              //修改指识线的颜色
+			              lineStyle: {
+			                  color: "transparent"
+			              }
+			          },
+			          formatter: function(params) {
+			              console.log(params)
+			          },
+			      },
+			      grid: {
+			          top: 20,
+			          bottom: 20,
+			          left: 30,
+			          right: 20
+			      },
+			      xAxis: [{
+			          type: 'category',
+			          axisTick: {
+			              show: false,
+			              alignWithLabel: true, //true 的时候有效，可以保证刻度线和标签对齐
+			          },
+			          axisLine: {
+			              lineStyle: {
+			                  color: "#fff"
+			              }
+			          },
+			          data: ['大王庄', '兴安村', '太阳村', '实现村', '勤劳村']
+			      }, ],
+			      yAxis: [{
+			          type: 'value',
+			          splitLine: {
+			              show: true,
+			              lineStyle: {
+			                  color: "rgba(136, 159, 204, .2)"
+			              }
+			          },
+			          axisLine: {
+			              show: false,
+			              lineStyle: {
+			                  color: "#fff"
+			              }
+			          },
+			          axisTick: {
+			              show: false
+			          },
+			      }],
+			      //手势放大柱状图折线图
+			      dataZoom: {
+			          type: "inside"
+			      },
+			      series: [{
+			          //给折线图下方添加阴影
+			          areaStyle: {
+			              normal: {
+			                  color: new echarts.graphic.LinearGradient(
+			                      0,
+			                      0,
+			                      0,
+			                      1,
+			                      [{
+			                              offset: 0,
+			                              color: 'rgba(0, 102, 255,0.4)'
+			                          },
+			                          {
+			                              offset: 1,
+			                              color: 'rgba(0, 102, 255,0)'
+			                          }
+			                      ],
+			                      false
+			                  ),
+			                  shadowColor: 'rgba(59, 34, 201,1)',
+			                  shadowBlur: 10
+			              }
+			          },
+			          name: '',
+			          type: 'line',
+			          smooth: true,
+			          itemStyle: {
+			              normal: {
+			                  show: false,
+			                  color: "#00a0fc", //改变折线点的颜色
+			                  lineStyle: {
+			                      color: "#00a0fc" //改变折线颜色
+			                  },
+			                  label: {
+			                      show: false, //开启显示
+			                      position: 'top', //在上方显示
+			                      textStyle: { //数值样式
+			                          color: '#999999',
+			                          fontSize: 10
+			                      }
+			                  },
+			  
+			              },
+			              emphasis: {
+			                  show: true,
+			                  color: "#00a0fc",
+			                  borderColor: "#ffffff",
+			                  label: {
+			                      show: true, //开启显示
+			                      position: 'top', //在上方显示
+			                      textStyle: { //数值样式
+			                          color: '#fff',
+			                          fontSize: 10,
+			                          padding: [10, 10, 10, 10],
+			                          backgroundColor: "rgba(24, 71, 185, .6)",
+			                          borderRadius: 4,
+			                      }
+			                  }
+			              }
+			          },
+			          data: [150, 110, 160, 155, 110]
+			      }]
+		  })
+	  }
+  },
+  mounted(){
+	  this.initCharts();
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+	.right-nav{
+		background: url("../assets/images/yj-rightnavbg.png") no-repeat center;
+		background-size: cover;
+		position: absolute;
+		right: 0px;
+		top:0px;
+		height: 100vh;
+		z-index: 3;
+		width: 382px;
+	}
+	.nav-cont{
+		width: 330px;
+		height: calc(100vh - 17vh);
+		margin-top: 10vh;
+		margin: 8vh 19px 0px 0px;
+		float: right;
+	}
+	.jydw-zs{
+		display: flex;
+		flex-direction: row;
+		margin:15px 0px;
+		padding-left: 15px;
+		align-items: baseline;
+	}
+	.jydw-zs span{
+		font-size: 14px;
+		color: #fff;
+	}
+	.jydw-zs b{
+		font-size: 28px;
+		color: #23d6df;
+		padding: 0px 5px;
+		font-family: myfont2;
+	}
+	#Jydw{
+		width: 98%;
+		height: 200px;
+		margin-left: 20px;
+	}
+	.jydw-list{
+		display: flex;
+		flex-direction: column;
+		margin: 20px 20px;
+	}
+	.jydw-list .jydw-li{
+		display: flex;
+		flex-direction: row;
+		margin-bottom: 5px;
+		cursor: pointer;
+		width: 100%;
+		text-align: left;
+		padding: 4px 0px;
+	}
+	.jydw-list .jydw-li:hover{
+		background: rgb(13 69 155 / 43%);
+	}
+	.jydw-list .jydw-li img{
+		width: 100px;
+		height: 68px;
+		margin-right: 15px;
+	}
+	.jydw-list .jydw-li h2{
+		color: #23d6df;
+		font-size: 16px;
+		font-weight: 900;
+		padding-bottom: 5px;
+	}
+	.jydw-list .jydw-li p{
+		color: #fff;
+		font-size: 14px;
+		line-height: 20px;
+	}
+		
+	
+</style>

src/components/leftRightSwiperScroll.vue

@@ -0,0 +1,183 @@
+<template>
+    <!-- 文本超出，左右按钮滚动 -->
+    <div ref="swiperScroll" class="left-right-swiper-scroll-box">
+      <!-- 左边按钮 -->
+      <div v-show="showLeftIcon" @click="handleLeftClick" class="scroll-icon left-icon">
+        <i ></i>
+      </div>
+      <!-- 中间滚动区域 -->
+      <div ref="swiperScrollContent" class="swiper-scroll-content">
+        <slot></slot>
+      </div>
+      <!-- 右边按钮 -->
+      <div v-show="showRightIcon" @click="handleRightClick" class="scroll-icon right-icon">
+        <i ></i>
+      </div>
+    </div>
+    </template>
+
+    <script>
+    export default {
+      name: 'leftRightSwiperScroll',
+      props: {
+        swiperList: {
+          type: Object,
+          default: () => {
+            return {};
+          }
+        }
+      },
+      data() {
+        return {
+          showRightIcon: false, // 是否显示右箭头
+          swiperScrollWidth: 0, // 盒子的宽度
+          swiperScrollContentWidth: 0, // 内容的宽度
+          maxClickNum: 0, // 最大点击次数
+          lastLeft: 0, // 上次滑动距离
+          clickNum: 0, // 点击次数
+          childrenList: [] // 传进来的子元素
+        }
+      },
+      computed: {
+        showLeftIcon() {
+          return this.clickNum > 0
+        }
+      },
+      mounted() {
+        // 获取 HTMLCollection 转为 数组
+        this.childrenList = [...this.$refs.swiperScrollContent.children];
+        console.log('childrenList--->', this.childrenList);
+        console.log('swiperScroll--->', this.$refs.swiperScroll);
+        console.log('swiperScrollContent--->', this.$refs.swiperScrollContent);
+
+        // 盒子的宽度
+        this.swiperScrollWidth = this.$refs.swiperScroll.getBoundingClientRect().width;
+        // 内容的宽度
+        this.swiperScrollContentWidth = this.$refs.swiperScrollContent.getBoundingClientRect().width;
+        // 比较盒子的宽度,跟内容的宽度：判断是否需要展示右边的按钮
+        if(this.swiperScrollWidth < this.swiperScrollContentWidth) {
+          this.showRightIcon = true;
+        }
+        console.log('盒子的宽度--->', this.swiperScrollWidth );
+        console.log('内容的宽度--->', this.swiperScrollContentWidth);
+        console.log('this.showRightIcon',this.showRightIcon)
+      },
+      methods: {
+        // 点击右箭头（左侧滚动）
+        handleRightClick() {
+          // 如果点击次数小于数组长度-1时，执行左滑动效果。
+          if (this.clickNum < this.childrenList.length - 1) {
+            // 获取当前元素宽度
+            let width = this.childrenList[this.clickNum].getBoundingClientRect().width;
+            console.log(this.childrenList[this.clickNum], this.childrenList[this.clickNum].getBoundingClientRect());
+            // 获取最后一个元素距离左侧的距离
+            let lastItemOffsetLeft = this.childrenList[this.childrenList.length - 1].offsetLeft;
+            // 获取最后一个元素宽度
+            let lastWidth = this.childrenList[this.childrenList.length - 1].getBoundingClientRect().width;
+            console.log('lastItemOffsetLeft-->', lastItemOffsetLeft, this.childrenList[this.childrenList.length - 1].getBoundingClientRect());
+            // 获取可视区域宽度
+            const lookWidth = this.$refs.swiperScroll.clientWidth;
+            console.log('获取可视区域宽度-->lookWidth', lookWidth);
+            // 如果最后一个元素距离左侧的距离+自身的宽度大于可视距离，表示最后一个元素没有出现，执行滚动效果
+            if (lastItemOffsetLeft + lastWidth > lookWidth) {
+              // 滚动距离（元素的magin-left值） = 负的它自己的长度 + 上一次滑动的距离
+              this.$refs.swiperScrollContent.style.marginLeft = `${-width + this.lastLeft}px`;
+              this.lastLeft = -width + this.lastLeft;
+              // 点击次数+1
+              this.clickNum++;
+              // 记录到最后一个元素出现在可视区域时，点击次数的最大值。用于后面点击左侧箭头时判断右侧箭头的显示
+              this.maxClickNum = this.clickNum;
+            }
+            // 如果最后一个元素距离左侧的距离小于于可视距离，需要隐藏右侧箭头
+            let timer = setTimeout(() => {
+              // 重新：获取最后一个元素距离左侧的距离
+              let lastItemOffsetLeft2 = this.childrenList[this.childrenList.length - 1].offsetLeft;
+              console.log('lastItemOffsetLeft2-新的->', lastItemOffsetLeft2);
+              if(lastItemOffsetLeft2 + lastWidth <= lookWidth) {
+                this.showRightIcon = false;
+              }
+              clearTimeout(timer);
+            }, 200);
+          }
+        },
+        // 点击左箭头（右侧滚动）
+        handleLeftClick() {
+          // 当点击次数大于0时才触发，这样当点击次数clickNum等于1的到时候，clickNum--等于0.根据计算属性的判断会隐藏掉左箭头
+          if (this.clickNum > 0) {
+            // 获取当前元素宽度
+            let width = this.childrenList[this.clickNum - 1].getBoundingClientRect().width;
+            // 公示：滚动距离（元素的magin-left值） = 它自己的长度 + 上一次滑动的距离
+            this.$refs.swiperScrollContent.style.marginLeft = `${this.lastLeft + width}px`
+            this.lastLeft = width + this.lastLeft;
+            // 点击次数-1
+            this.clickNum--;
+            // 如果点击次数小于最大点击次数，说明最后一个元素已经不在可是区域内了，显示右箭头
+            if (this.clickNum < this.maxClickNum) {
+              this.showRightIcon = true;
+            }
+          }
+        }
+      }
+    }
+    </script>
+
+    <style scoped>
+    .left-right-swiper-scroll-box {
+        position: relative;
+        display: flex;
+        width: 1100px;
+        overflow: hidden;
+        transition: all 0.3s;
+        padding: 0 30px;
+        margin-right: 5px;
+       
+
+      }
+ .scroll-icon {
+            position: absolute;
+            top: 0;
+            width: 34px;
+            height: 51px;
+            z-index: 9;
+            cursor: pointer;
+            background-image: linear-gradient(270deg, invalid gradient);
+            z-index: 1000;
+    }
+	 .scroll-icon i {
+	    position: absolute;
+	    top: 5px;
+	    width: 20px;
+	    height: 20px;
+	  }
+	   .left-icon {
+	    left: 0;
+	    background: url("../assets/images/yj-rightbtn.png") 0 0 no-repeat;
+	  }
+	   .left-icon:hover{
+	    left: 0;
+	    background: url("../assets/images/yj-rightbtn-on.png") 0 0 no-repeat;
+	
+	  }
+	
+	   .right-icon {
+	    right: 0;
+	    background: url("../assets/images/yj-leftbtn.png") 0 0 no-repeat;
+	   /* // i {
+	    //   right: 0;
+	    //   background: url("~@/assets/images/icon-arrow-right.png") 0 0 no-repeat;
+	    // } */
+	  }
+	   .right-icon:hover {
+	    right: 0;
+	    background: url("../assets/images/yj-leftbtn-on.png") 0 0 no-repeat;
+	
+	  }
+	
+	.swiper-scroll-content {
+	  width: fit-content;
+	  display: flex;
+	  flex-wrap: nowrap;
+	  white-space: nowrap;
+	  transition: all 0.3s;
+	}
+    </style>

src/main.js

@@ -1,8 +1,28 @@
 import Vue from 'vue'
 import App from './App.vue'
+// 引入echarts
+import echarts from 'echarts'//echarts
+import router from './router'
+
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+
+import '@/assets/static/yj-base.css' // 通用样式 css
+import "@/assets/font/PMZDFONT.ttf"  //logo字体
+import "@/assets/font/HKXZY.TTF"  //总数字体
+import "@/assets/font/HKLST.ttf"  //底部数字字体
+import "@/assets/font/HYLXTJ.ttf"//登录字体
+
+Vue.prototype.$echarts = echarts //挂载echarts
 
 Vue.config.productionTip = false
 
+Vue.use(ElementUI);
+
+ 
+
 new Vue({
+	el:'#app',
+  router,
   render: h => h(App),
 }).$mount('#app')

src/router/index.js

@@ -0,0 +1,36 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
+Vue.use(VueRouter)
+
+const routes = [
+  {
+    path: '/',
+    redirect: '/Login'
+  },
+  {
+    path: '/index',
+    name: 'index',
+    component: () => import(/* webpackChunkName: "about" */ '../views/index.vue'),
+  },
+  {
+    path: '/Login',
+    name: 'Login',
+    component: () => import(/* webpackChunkName: "about" */ '../views/Login.vue'),
+  },
+  {
+    path: '/YjCjms',
+    name: 'YjCjms',
+    component: () => import(/* webpackChunkName: "about" */ '../views/YjCjms.vue'),
+  },
+  
+ 
+]
+
+
+const router = new VueRouter({
+  mode: 'history',
+  base: process.env.BASE_URL,
+  routes
+})
+export default router

src/views/Login.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="app-container">
+    <el-form class="login-form to-right" :model="ruleForm">
+      <h3 class="title">延吉市自然灾害综合风险</h3>
+      <h3 class="sub-title">普查成果应用平台</h3>
+      <div class="login-container">
+        <h4>请登录</h4>
+        <div class="el-form-item is-success is-required">
+          <el-form-item prop="pass">
+            <el-input prefix-icon="el-icon-user-solid" type="text"
+                      v-model="ruleForm.pass"
+                      placeholder="请输入用户名"></el-input>
+          </el-form-item>
+          <el-form-item prop="checkPass">
+            <el-input prefix-icon="el-icon-s-tools" show-password type="password"
+                      placeholder="请输入密码" v-model="ruleForm.checkPass"></el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" style="width: 100%;" @click="login">提交</el-button>
+          </el-form-item>
+        </div>
+      </div>
+    </el-form>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Login',
+  data() {
+    return {
+      ruleForm: {
+        pass: "",
+        checkPass: "",
+      },
+    }
+  },
+  components: {},
+  methods: {
+    login() {
+      if (this.ruleForm.pass == "admin" && this.ruleForm.checkPass == "admin123") {
+        this.$router.push('/index')
+      }else{
+        this.$message.error(`账号或密码错误!`);
+      }
+    }
+  },
+}
+</script>
+<style scoped>
+.app-container {
+  background: url("../assets/images/yj-dlbg.png") no-repeat center;
+  background-size: 100% 100%;
+  width: 100%;
+  height: 100vh;
+}
+
+.login-form {
+  border-radius: 6px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding-top: 11%;
+}
+
+.login-form h3 {
+  font-family: "myfont4";
+  text-shadow: 0 0 15px rgb(0 246 255 / 70%);
+}
+
+.title {
+  margin: 0px auto 10px auto;
+  text-align: center;
+  color: #fff;
+  font-family: zk;
+  font-size: 38px;
+}
+
+.to-right {
+  margin-left: 30%;
+}
+
+.sub-title {
+  text-align: center;
+  color: #fff;
+  font-family: zk;
+  font-size: 38px;
+  margin: 0px auto 20px auto;
+}
+
+.login-form .login-container {
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.7);
+  width: 450px;
+  padding: 30px;
+  -webkit-box-shadow: 0 0 20px rgb(255 255 255 / 50%);
+  box-shadow: 0 0 20px rgb(255 255 255 / 50%);
+  text-align: left;
+}
+
+.login-form .login-container h4 {
+  border-bottom: #3e6bfb 1px solid;
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  display: inline-block;
+  margin-top: 0;
+  padding-bottom: 5px;
+  margin-bottom: 20px;
+  text-align: left;
+}
+
+.el-form-item {
+  margin-bottom: 1rem;
+}
+
+.el-form-item__content {
+  line-height: 40px;
+  position: relative;
+  font-size: 14px;
+}
+
+.login-form .el-input {
+  height: 38px;
+  margin-bottom: 15px;
+}
+</style>

src/views/YjCjms.vue

@@ -0,0 +1,34 @@
+<template>
+	<div class="cjms">
+		 <Cjmsheader></Cjmsheader>
+		 <Cjmsleftnav></Cjmsleftnav>
+		 <Cjmsrightnav></Cjmsrightnav>
+		 <Cjmsbtm></Cjmsbtm>
+		 <Cjmscon></Cjmscon>
+	</div>
+</template>
+
+<script>
+import '../assets/iconfont/iconfont.css'
+import Cjmsheader from '../components/Cjmsheader.vue'
+import Cjmsleftnav from '../components/Cjmsleftnav.vue'
+import Cjmsrightnav from '../components/Cjmsrightnav.vue'
+import Cjmsbtm from '../components/Cjmsbtm.vue'
+import Cjmscon from '../components/Cjmscon.vue'
+
+export default {
+  name: 'App',
+  components: {
+	  Cjmsheader,
+	  Cjmsleftnav,
+	  Cjmsrightnav,
+	  Cjmsbtm,
+	  Cjmscon
+  }
+}
+</script>
+<style>
+	body{
+		background: #0c2142;
+	}
+</style>

src/views/index.vue

@@ -0,0 +1,52 @@
+<template>
+    <div>
+      <div class="map" @click="abc()">
+          <img src="../assets/images/yj-mapbg.png"/>
+      </div>
+      <Header></Header>
+      <Leftnav></Leftnav>
+      <Rightnav></Rightnav>
+      <Btmbutton></Btmbutton>
+      <Jsmsdialog ref="Jsmsdialog"></Jsmsdialog>
+    </div>
+  </template>
+  
+  <script>
+  import '../assets/iconfont/iconfont.css'
+  import Header from '../components/Header.vue'
+  import Leftnav from '../components/Leftnav.vue'
+  import Rightnav from '../components/Rightnav.vue'
+  import Btmbutton from '../components/Btmbutton.vue'
+  import Jsmsdialog from '../components/Jsmsdialog.vue'
+  
+  export default {
+    name: 'App',
+    components: {
+        Header,
+        Leftnav,
+        Rightnav,
+        Btmbutton,
+        Jsmsdialog
+    },
+	methods: {
+		abc(){
+			this.$refs.Jsmsdialog.outerVisible = true
+			console.log('1111')
+		}
+	},
+  }
+  </script>
+  <style>
+      .map{
+          position: fixed;
+          z-index: 1;
+          width: 100%;
+          height: 100vh;
+          left: 0px;
+      }
+      .map img{
+          width: 100%;
+          height: 100%;
+      }
+  </style>
+  

vue.config.js

@@ -1,4 +1,5 @@
 const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig({
-  transpileDependencies: true
+  transpileDependencies: true,
+    lintOnSave:false
 })