3 년 전 · 24d0edcf48
--- a/.browserslistrc
+++ b/.browserslistrc
@@ -0,0 +1,3 @@
 
				+> 1%
			
 
				+last 2 versions
			
 
				+not dead
			
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -0,0 +1,17 @@
 
				+module.exports = {
			
 
				+  root: true,
			
 
				+  env: {
			
 
				+    node: true
			
 
				+  },
			
 
				+  'extends': [
			
 
				+    'plugin:vue/essential',
			
 
				+    'eslint:recommended'
			
 
				+  ],
			
 
				+  parserOptions: {
			
 
				+    parser: 'babel-eslint'
			
 
				+  },
			
 
				+  rules: {
			
 
				+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
			
 
				+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
			
 
				+  }
			
 
				+}
			
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,23 @@
 
				+.DS_Store
			
 
				+node_modules
			
 
				+/dist
			
 
				+
			
 
				+
			
 
				+# local env files
			
 
				+.env.local
			
 
				+.env.*.local
			
 
				+
			
 
				+# Log files
			
 
				+npm-debug.log*
			
 
				+yarn-debug.log*
			
 
				+yarn-error.log*
			
 
				+pnpm-debug.log*
			
 
				+
			
 
				+# Editor directories and files
			
 
				+.idea
			
 
				+.vscode
			
 
				+*.suo
			
 
				+*.ntvs*
			
 
				+*.njsproj
			
 
				+*.sln
			
 
				+*.sw?
			
--- a/README.md
+++ b/README.md
@@ -0,0 +1,24 @@
 
				+# cdhz
			
 
				+
			
 
				+## Project setup
			
 
				+```
			
 
				+npm install
			
 
				+```
			
 
				+
			
 
				+### Compiles and hot-reloads for development
			
 
				+```
			
 
				+npm run serve
			
 
				+```
			
 
				+
			
 
				+### Compiles and minifies for production
			
 
				+```
			
 
				+npm run build
			
 
				+```
			
 
				+
			
 
				+### Lints and fixes files
			
 
				+```
			
 
				+npm run lint
			
 
				+```
			
 
				+
			
 
				+### Customize configuration
			
 
				+See [Configuration Reference](https://cli.vuejs.org/config/).
			
--- a/babel.config.js
+++ b/babel.config.js
@@ -0,0 +1,5 @@
 
				+module.exports = {
			
 
				+  presets: [
			
 
				+    '@vue/cli-plugin-babel/preset'
			
 
				+  ]
			
 
				+}
			
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,28 @@
 
				+{
			
 
				+  "name": "cdhz",
			
 
				+  "version": "0.1.0",
			
 
				+  "private": true,
			
 
				+  "scripts": {
			
 
				+    "serve": "vue-cli-service serve",
			
 
				+    "build": "vue-cli-service build",
			
 
				+    "lint": "vue-cli-service lint"
			
 
				+  },
			
 
				+  "dependencies": {
			
 
				+    "@panzoom/panzoom": "^4.3.2",
			
 
				+    "core-js": "^3.6.5",
			
 
				+    "vue": "^2.6.11",
			
 
				+    "vue-router": "^3.2.0"
			
 
				+  },
			
 
				+  "devDependencies": {
			
 
				+    "@vue/cli-plugin-babel": "~4.5.0",
			
 
				+    "@vue/cli-plugin-eslint": "~4.5.0",
			
 
				+    "@vue/cli-plugin-router": "~4.5.0",
			
 
				+    "@vue/cli-service": "~4.5.0",
			
 
				+    "babel-eslint": "^10.1.0",
			
 
				+    "eslint": "^6.7.2",
			
 
				+    "eslint-plugin-vue": "^6.2.2",
			
 
				+    "less": "^3.0.4",
			
 
				+    "less-loader": "^5.0.0",
			
 
				+    "vue-template-compiler": "^2.6.11"
			
 
				+  }
			
 
				+}
			
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,21 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+  <head>
			
 
				+    <meta charset="utf-8">
			
 
				+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
			
 
				+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
			
 
				+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
			
 
				+    <title>首届数字政府建设峰会</title>
			
 
				+  </head>
			
 
				+  <body>
			
 
				+    <noscript>
			
 
				+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
			
 
				+    </noscript>
			
 
				+    <div id="app"></div>
			
 
				+    <!-- built files will be auto injected -->
			
 
				+    <script src="<%= BASE_URL %>js/svg-pan-zoom.min.js"></script>
			
 
				+    <script src="<%= BASE_URL %>js/hammer.js"></script>
			
 
				+    <script src="<%= BASE_URL %>js/clipboard.min.js"></script>
			
 
				+
			
 
				+  </body>
			
 
				+</html>
			
--- a/public/js/clipboard.min.js
+++ b/public/js/clipboard.min.js
--- a/public/js/hammer.js
+++ b/public/js/hammer.js
--- a/public/js/svg-pan-zoom.min.js
+++ b/public/js/svg-pan-zoom.min.js
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,123 @@
 
				+<template>
			
 
				+  <div id="app">
			
 
				+    <router-view :select="select" />
			
 
				+    <fold
			
 
				+      @close="fActive = false"
			
 
				+      class="fold-con"
			
 
				+      :isActive="fActive"
			
 
				+      :class="{ 'fold-active': fActive }"
			
 
				+    />
			
 
				+
			
 
				+    <vSelect
			
 
				+      v-show="$route.name=='Home'"
			
 
				+      :select="select"
			
 
				+      class="select"
			
 
				+      @select="
			
 
				+        (data) => {
			
 
				+          select = data;
			
 
				+        }
			
 
				+      "
			
 
				+    />
			
 
				+
			
 
				+    <div class="btn-show" @click.stop="fActive = !fActive">参展企业</div>
			
 
				+  </div>
			
 
				+</template>
			
 
				+<script>
			
 
				+import "@/assets/style/reset.css";
			
 
				+import "@/assets/style/public.css";
			
 
				+
			
 
				+import fold from "@/components/fold.vue";
			
 
				+import select from "@/components/select.vue";
			
 
				+
			
 
				+export default {
			
 
				+  components: {
			
 
				+    vSelect: select,
			
 
				+    fold,
			
 
				+  },
			
 
				+  data() {
			
 
				+    return {
			
 
				+      fActive: false,
			
 
				+      showselect:false
			
 
				+    };
			
 
				+  }
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less">
			
 
				+html,
			
 
				+body {
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+}
			
 
				+#app {
			
 
				+  background: #f7f7f7;
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  overflow: hidden;
			
 
				+  position: relative;
			
 
				+
			
 
				+  .fold-con {
			
 
				+    position: absolute;
			
 
				+    right: -500px;
			
 
				+    bottom: 96px;
			
 
				+    transition: right 0.3s ease;
			
 
				+  }
			
 
				+
			
 
				+  .fold-active {
			
 
				+    z-index: 99;
			
 
				+    right: 30px;
			
 
				+  }
			
 
				+
			
 
				+  .btn-show {
			
 
				+    text-align: center;
			
 
				+    color: #fff;
			
 
				+    background: linear-gradient(270deg, #00cfff 0%, #00aaff 100%);
			
 
				+    bottom: 30px;
			
 
				+    right: 30px;
			
 
				+    position: absolute;
			
 
				+    z-index: 1;
			
 
				+    font-size: 20px;
			
 
				+    cursor: pointer;
			
 
				+    width: 144px;
			
 
				+    height: 56px;
			
 
				+    line-height: 56px;
			
 
				+    border-radius: 6px;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+
			
 
				+@media screen and (max-width: 500px) {
			
 
				+#app {
			
 
				+  .fold-con {
			
 
				+    position: absolute;
			
 
				+    right: -100%;
			
 
				+    bottom: 70px;
			
 
				+    transition: right 0.3s ease;
			
 
				+  }
			
 
				+
			
 
				+  .fold-active {
			
 
				+    z-index: 99;
			
 
				+    right: 0;
			
 
				+  }
			
 
				+  .select{
			
 
				+    top: unset;
			
 
				+    bottom: 60px;
			
 
				+    right: 10px;
			
 
				+    transform: scale(0.7);
			
 
				+    transform-origin: right;
			
 
				+  }
			
 
				+
			
 
				+  .btn-show {
			
 
				+    bottom: 20px;
			
 
				+    right: 10px;
			
 
				+    z-index: 1;
			
 
				+    font-size: 16px;
			
 
				+    cursor: pointer;
			
 
				+    width: 90px;
			
 
				+    height: 40px;
			
 
				+    line-height: 40px;
			
 
				+    border-radius: 6px;
			
 
				+  }
			
 
				+}
			
 
				+}
			
 
				+</style>
			
--- a/src/assets/images/bg_pc.jpg
+++ b/src/assets/images/bg_pc.jpg
--- a/src/assets/images/btn_home.png
+++ b/src/assets/images/btn_home.png
--- a/src/assets/images/btn_share.png
+++ b/src/assets/images/btn_share.png
--- a/src/assets/images/close.png
+++ b/src/assets/images/close.png
--- a/src/assets/images/list_open@2x.png
+++ b/src/assets/images/list_open@2x.png
--- a/src/assets/images/list_pulldown@2x.png
+++ b/src/assets/images/list_pulldown@2x.png
--- a/src/assets/images/list_retract@2x.png
+++ b/src/assets/images/list_retract@2x.png
--- a/src/assets/images/map.svg
+++ b/src/assets/images/map.svg
--- a/src/assets/images/maps_bg@2x.png
+++ b/src/assets/images/maps_bg@2x.png
--- a/src/assets/images/nav_skip@2x.png
+++ b/src/assets/images/nav_skip@2x.png
--- a/src/assets/images/pop_close@2x.png
+++ b/src/assets/images/pop_close@2x.png
--- a/src/assets/images/show_enlarge@2x.png
+++ b/src/assets/images/show_enlarge@2x.png
--- a/src/assets/images/show_enlarge@2x_w.png
+++ b/src/assets/images/show_enlarge@2x_w.png
--- a/src/assets/images/show_help@2x.png
+++ b/src/assets/images/show_help@2x.png
--- a/src/assets/images/show_narrow@2x.png
+++ b/src/assets/images/show_narrow@2x.png
--- a/src/assets/images/show_narrow@2x_w.png
+++ b/src/assets/images/show_narrow@2x_w.png
--- a/src/assets/style/public.css
+++ b/src/assets/style/public.css
@@ -0,0 +1,7 @@
 
				+.svg-pan-zoom-control{
			
 
				+  display: none!important;
			
 
				+}
			
 
				+
			
 
				+*{
			
 
				+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
			
 
				+}
			
--- a/src/assets/style/reset.css
+++ b/src/assets/style/reset.css
@@ -0,0 +1,109 @@
 
				+
			
 
				+html, body, div, span, applet, object, iframe,
			
 
				+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
			
 
				+a, abbr, acronym, address, big, cite, code,
			
 
				+del, dfn, em, img, ins, kbd, q, s, samp,
			
 
				+small, strike, strong, sub, sup, tt, var,
			
 
				+b, u, i, center,
			
 
				+dl, dt, dd, ol, ul, li,
			
 
				+fieldset, form, label, legend,
			
 
				+table, caption, tbody, tfoot, thead, tr, th, td,
			
 
				+article, aside, canvas, details, embed, 
			
 
				+figure, figcaption, footer, header, hgroup, 
			
 
				+menu, nav, output, ruby, section, summary,
			
 
				+time, mark, audio, video {
			
 
				+  font-family: "Microsoft YaHei","Microsoft JhengHei";;
			
 
				+	margin: 0;
			
 
				+	padding: 0;
			
 
				+	border: 0;
			
 
				+	font-size: 100%;
			
 
				+	vertical-align: baseline;
			
 
				+}
			
 
				+*{
			
 
				+  box-sizing: border-box;
			
 
				+}
			
 
				+/* HTML5 display-role reset for older browsers */
			
 
				+article, aside, details, figcaption, figure, 
			
 
				+footer, header, hgroup, menu, nav, section, main {
			
 
				+	display: block;
			
 
				+}
			
 
				+html{
			
 
				+	height: 100%;
			
 
				+}
			
 
				+body {
			
 
				+	line-height: 1;
			
 
				+	height: 100%;
			
 
				+}
			
 
				+html,body{
			
 
				+	font-size: 16px;
			
 
				+}
			
 
				+ol, ul {
			
 
				+	list-style: none;
			
 
				+}
			
 
				+blockquote, q {
			
 
				+	quotes: none;
			
 
				+}
			
 
				+blockquote:before, blockquote:after,
			
 
				+q:before, q:after {
			
 
				+	content: '';
			
 
				+	content: none;
			
 
				+}
			
 
				+table {
			
 
				+	border-collapse: collapse;
			
 
				+	border-spacing: 0;
			
 
				+}
			
 
				+button{outline:none; border: none;}
			
 
				+input, button, select, textarea {
			
 
				+outline: none;
			
 
				+appearance: none;
			
 
				+-webkit-appearance: none;
			
 
				+border-radius: 0;
			
 
				+-webkit-appearance: textfield;
			
 
				+    background-color: white;
			
 
				+    -webkit-rtl-ordering: logical;
			
 
				+    cursor: text;
			
 
				+    padding: 1px;
			
 
				+    border-color: initial;
			
 
				+    border-image: initial;
			
 
				+}
			
 
				+input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{
			
 
				+        -webkit-appearance:textfield;
			
 
				+}
			
 
				+input[type="number"]{
			
 
				+        -moz-appearance:textfield;
			
 
				+}
			
 
				+input:focus { outline: none; } 
			
 
				+select::-ms-expand {
			
 
				+display: none;
			
 
				+}
			
 
				+
			
 
				+
			
 
				+::-webkit-scrollbar-track-piece {  
			
 
				+	background-color:#ffffff;  
			
 
				+}  
			
 
				+::-webkit-scrollbar {  
			
 
				+	width:0;  
			
 
				+	height:10px;  
			
 
				+}  
			
 
				+::-webkit-scrollbar-thumb {  
			
 
				+	background-color:#e5e5e5;  
			
 
				+	background-clip:padding-box;  
			
 
				+	min-height:20px;  
			
 
				+	border-radius: 3px;
			
 
				+}  
			
 
				+::-webkit-scrollbar-thumb:hover {  
			
 
				+	background-color:#929292;  
			
 
				+}  
			
 
				+
			
 
				+table th,
			
 
				+table td {
			
 
				+  text-align: center !important;
			
 
				+}
			
 
				+
			
 
				+table th > .cell{
			
 
				+	color: #000;
			
 
				+}
			
 
				+
			
 
				+textarea{
			
 
				+  height: 8rem!important;
			
 
				+}
			
--- a/src/components/data.js
+++ b/src/components/data.js
@@ -0,0 +1,223 @@
 
				+const raw = {
			
 
				+  primary: [
			
 
				+    {
			
 
				+      url: "uOOgUDc7j&lang=zh&firstView=pano:16,qua:-0.2411,-0.658,-0.2356,0.6734",
			
 
				+      name: "国办&部委",
			
 
				+      id: 1,
			
 
				+      key:'GBBW',
			
 
				+      color: "#DD7E6B",
			
 
				+      isHide:true
			
 
				+    },
			
 
				+    {
			
 
				+      url: "uOOgUDc7j&lang=zh&firstView=pano:34,qua:0.0126,0.2591,-0.0034,0.9658",
			
 
				+      name: "广东省",
			
 
				+      key:'GDS',
			
 
				+      id: 2,
			
 
				+      color: "#DD7E6B",
			
 
				+      isHide:true
			
 
				+    },
			
 
				+    {
			
 
				+      url: "7gjMOKpUke&lang=zh&firstView=pano:2,qua:-0.1805,0.096,0.0177,0.9787",
			
 
				+      name: "深圳",
			
 
				+      key:'SZ',
			
 
				+      id: 3,
			
 
				+      color: "#DD7E6B",
			
 
				+      isHide:true
			
 
				+    },
			
 
				+    {
			
 
				+      url: "vroMUXdx",
			
 
				+      name: "上海",
			
 
				+      key:'SH',
			
 
				+      id: 4,
			
 
				+      color: "#DD7E6B",
			
 
				+      isHide:true
			
 
				+    },
			
 
				+    {
			
 
				+      url: "vroMUXdx",
			
 
				+      name: "贵州",
			
 
				+      id: 5,
			
 
				+      key:'GZ',
			
 
				+      color: "#DD7E6B",
			
 
				+      isHide:true
			
 
				+    },
			
 
				+    {
			
 
				+      url: "vroMUXdx",
			
 
				+      name: "北京",
			
 
				+      id: 6,
			
 
				+      key:'BJ',
			
 
				+      color: "#DD7E6B",
			
 
				+      isHide:true
			
 
				+    },
			
 
				+    {
			
 
				+      url: "vroMUXdx",
			
 
				+      name: "休息区",
			
 
				+      key:'XIUXIQU',
			
 
				+      id: 7,
			
 
				+      color: "#DD7E6B",
			
 
				+      isHide:true
			
 
				+    },
			
 
				+    {
			
 
				+      url: "vroMUXdx",
			
 
				+      name: "A区",
			
 
				+      id: 8,
			
 
				+      color: "#916CE5",
			
 
				+    },
			
 
				+    {
			
 
				+      url: "vroMUXdx",
			
 
				+      name: "B区",
			
 
				+      id: 9,
			
 
				+      color: "#DDBC6B",
			
 
				+    },
			
 
				+  ],
			
 
				+  secondary: [
			
 
				+    {
			
 
				+      p_id: 8,
			
 
				+      bgclr: '#794DDD',
			
 
				+      data: [
			
 
				+		{
			
 
				+          xuhao: "A1",
			
 
				+          url: "oFCV0OaG84&lang=zh&firstView=pano:0,qua:-0.1158,0.7445,0.1339,0.6438",
			
 
				+          name: "华为",
			
 
				+          id:1
			
 
				+        },
			
 
				+		{
			
 
				+          xuhao: "A2",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "腾讯",
			
 
				+          id:2
			
 
				+        },{
			
 
				+          xuhao: "A3",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "深智城",
			
 
				+          id:3
			
 
				+        },{
			
 
				+          xuhao: "A4",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "广联达",
			
 
				+          id:4
			
 
				+        },{
			
 
				+          xuhao: "A5",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "深信服",
			
 
				+          id:5
			
 
				+        },{
			
 
				+          xuhao: "A6",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "中国电信",
			
 
				+          id:6
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "A7",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "中国移动",
			
 
				+          id:7
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "A8",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "中国联通",
			
 
				+          id:8
			
 
				+        },
			
 
				+      ],
			
 
				+    },
			
 
				+    {
			
 
				+      p_id: 9,
			
 
				+      bgclr: '#CC9C23',
			
 
				+      data: [
			
 
				+        {
			
 
				+          xuhao: "B1",
			
 
				+          url: "vroMUkZaw692dHm&lang=zh&firstView=pano:8,qua:0.017,0.246,-0.0043,0.9691Xdx",
			
 
				+          name: "中国电子信息产业集团有限公司",
			
 
				+          id: 1
			
 
				+        },
			
 
				+		{
			
 
				+          xuhao: "B2",
			
 
				+          url: "C2phKAqXHV&lang=zh&firstView=pano:2,qua:-0.0188,0.703,0.0186,0.7107",
			
 
				+          name: "奇安信科技集团股份有限公司",
			
 
				+          id: 2
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "B3",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "中电科新型智慧城市研究院有限公司",
			
 
				+          id: 3
			
 
				+        },
			
 
				+		{
			
 
				+          xuhao: "B4",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "杭州海康威视数字技术股份有限公司",
			
 
				+          id: 4
			
 
				+        },
			
 
				+		{
			
 
				+          xuhao: "B5",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "科大讯飞股份有限公司",
			
 
				+          id: 5
			
 
				+        },
			
 
				+		{
			
 
				+          xuhao: "B6",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "奥格科技股份有限公司",
			
 
				+          id: 6
			
 
				+        },
			
 
				+		{
			
 
				+          xuhao: "B7",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "中兴通讯股份有限公司",
			
 
				+          id: 7
			
 
				+        },
			
 
				+		{
			
 
				+          xuhao: "B8",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "阿里巴巴集团控股有限公司",
			
 
				+          id: 8
			
 
				+        },
			
 
				+		{
			
 
				+          xuhao: "B9",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "广州市智慧城市投资公司",
			
 
				+          id: 9
			
 
				+        },
			
 
				+		{
			
 
				+          xuhao: "B10",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "云从科技集团股份有限公司",
			
 
				+          id: 10
			
 
				+        },
			
 
				+		{
			
 
				+          xuhao: "B11",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "广州广电运通金融电子股份有限公司",
			
 
				+          id: 11
			
 
				+        },
			
 
				+		{
			
 
				+          xuhao: "B12",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "中国南方电网有限责任公司",
			
 
				+          id: 12
			
 
				+        },
			
 
				+      ],
			
 
				+    },
			
 
				+  ]
			
 
				+};
			
 
				+
			
 
				+let loop = (main, sub) => {
			
 
				+  let data = main.map((item) => {
			
 
				+    sub.forEach((sub) => {
			
 
				+      if (item.id === sub.p_id) {
			
 
				+        item.sub = sub;
			
 
				+        item.show = false;
			
 
				+      }
			
 
				+    });
			
 
				+    return item;
			
 
				+  });
			
 
				+
			
 
				+  return data;
			
 
				+};
			
 
				+
			
 
				+let data = loop(raw.primary, raw.secondary);
			
 
				+
			
 
				+module.exports = {
			
 
				+  data,
			
 
				+  raw,
			
 
				+};
			
--- a/src/components/data2.js
+++ b/src/components/data2.js
@@ -0,0 +1,537 @@
 
				+const raw = {
			
 
				+  primary: [
			
 
				+    {
			
 
				+      name: "C区",
			
 
				+      id: 1,
			
 
				+      color: "#ED8A5F",
			
 
				+    },
			
 
				+    {
			
 
				+      name: "D区",
			
 
				+      id: 2,
			
 
				+      color: "#EAB363",
			
 
				+    },
			
 
				+    {
			
 
				+      name: "E区",
			
 
				+      id: 3,
			
 
				+      color: "#C872DD",
			
 
				+    },
			
 
				+    {
			
 
				+      name: "F区",
			
 
				+      id: 4,
			
 
				+      color: "#5EDAEF",
			
 
				+    },
			
 
				+    {
			
 
				+      name: "G区",
			
 
				+      id: 5,
			
 
				+      color: "#3A6BD6",
			
 
				+    },
			
 
				+    {
			
 
				+      name: "H区",
			
 
				+      id: 6,
			
 
				+      color: "#80CE89",
			
 
				+    },
			
 
				+  ],
			
 
				+  secondary: [
			
 
				+    {
			
 
				+      p_id: 1, //对应primary的id
			
 
				+      bgclr: "#E36E3B",
			
 
				+      data: [
			
 
				+        {
			
 
				+          xuhao: "C1",
			
 
				+          url: "sPOpr07IX&lang=zh&firstView=pano:52,qua:-0.0006,-0.5783,-0.0004,0.8158",
			
 
				+          name: "视联动力信息技术股份有限公司",
			
 
				+          id: 1,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "C2",
			
 
				+          url: "sPOpr07IX&lang=zh&firstView=pano:16,qua:-0.1747,-0.0027,-0.0005,0.9846",
			
 
				+          name: "齐心好视通",
			
 
				+          id: 2,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "C3",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "上海卓繁信息技术股份有限公司",
			
 
				+          id: 3,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "C4",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "信创联盟",
			
 
				+          id: 4,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "C5",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "信创联盟",
			
 
				+          id: 5,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "C6",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "工业和信息化部电子第五研究所",
			
 
				+          id: 6,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "C7",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "联想集团",
			
 
				+          id: 7,
			
 
				+        },
			
 
				+      ],
			
 
				+    },
			
 
				+    {
			
 
				+      p_id: 2,
			
 
				+      bgclr: "#DF9325",
			
 
				+      data: [
			
 
				+        {
			
 
				+          xuhao: "D1",
			
 
				+          url: "https://www.4dkankan.com/spc.html?m=RNAdjRVrG&lang=zh&firstView=pano:0,qua:-0.0876,0.6674,0.0796,0.7352",
			
 
				+          name: "厦门市巨龙信息科技有限公司",
			
 
				+          id: 1,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "D2",
			
 
				+          url: "RNAdjRVrG&lang=zh&firstView=pano:0,qua:-0.0876,0.6674,0.0796,0.7352",
			
 
				+          name: "珠海欧比特宇航科技股份有限公司",
			
 
				+          id: 2,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "D3",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "广东君略科技咨询有限公司",
			
 
				+          id: 3,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "D4",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "广州智能科技发展有限公司",
			
 
				+          id: 4,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "D5",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "广州市中智软件开发有限公司",
			
 
				+          id: 5,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "D6",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "广东方纬科技有限公司",
			
 
				+          id: 6,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "D7",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "武大吉奥信息技术有限公司",
			
 
				+          id: 7,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "D8",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "珠海市四维时代网络有限公司",
			
 
				+          id: 8,
			
 
				+        },
			
 
				+      ],
			
 
				+    },
			
 
				+    {
			
 
				+      p_id: 3, //对应primary的id
			
 
				+      bgclr: "#B53BD3",
			
 
				+      data: [
			
 
				+        {
			
 
				+          xuhao: "E1",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "中国航天科工集团第二研究院七〇六所",
			
 
				+          id: 1,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "E2",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "珠海金山办公软件有限公司",
			
 
				+          id: 2,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "E3",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "广州软件应用技术研究所",
			
 
				+          id: 3,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "E4",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "中智政源技术有限公司",
			
 
				+          id: 4,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "E5",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "南方报业传媒集团",
			
 
				+          id: 5,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "E6",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "北京国脉互联信息顾问有限公司",
			
 
				+          id: 6,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "E7",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "广东紫慧旭光科技有限公司",
			
 
				+          id: 7,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "E8",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "双杨信息科技（珠海）有限公司",
			
 
				+          id: 8,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "E9",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "广州华资软件技术有限公司",
			
 
				+          id: 9,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "E10",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "北京构力科技有限公司",
			
 
				+          id: 10,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "E11",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "深圳云天励飞技术股份有限公司",
			
 
				+          id: 11,
			
 
				+        },
			
 
				+      ],
			
 
				+    },
			
 
				+    {
			
 
				+      p_id: 4, //对应primary的id
			
 
				+      bgclr: "#13B1CC",
			
 
				+      data: [
			
 
				+        {
			
 
				+          xuhao: "F1",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "360政企安全集团",
			
 
				+          id: 1,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "F2",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "北京永信至诚科技股份有限公司",
			
 
				+          id: 2,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "F3",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "开普数智科技（广东）有限公司",
			
 
				+          id: 3,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "F4",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "北京安天网络安全技术有限公司",
			
 
				+          id: 4,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "F5",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "中孚信息股份有限公司",
			
 
				+          id: 5,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "F6",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "广东中安网脉华南技术有限公司",
			
 
				+          id: 6,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "F7",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "数安时代科技股份有限公司",
			
 
				+          id: 7,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "F8",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "北京升鑫网络科技有限公司",
			
 
				+          id: 8,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "F9",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "广东省电子商务认证有限公司",
			
 
				+          id: 9,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "F10",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "杭州世平信息科技有限公司",
			
 
				+          id: 10,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "F11",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "绿盟科技集团股份有限公司",
			
 
				+          id: 11,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "F12",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "天融信科技集团",
			
 
				+          id: 12,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "F13",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "北京启明星辰信息安全技术有限公司",
			
 
				+          id: 13,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "F14",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "杭州安恒信息技术股份有限公司",
			
 
				+          id: 14,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "F15",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "广东广宇科技发展有限公司",
			
 
				+          id: 15,
			
 
				+        },
			
 
				+      ],
			
 
				+    },
			
 
				+    {
			
 
				+      p_id: 5, //对应primary的id
			
 
				+      bgclr: "#598BF6",
			
 
				+      data: [
			
 
				+        {
			
 
				+          xuhao: "G1",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "新华三技术有限公司",
			
 
				+          id: 1,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "G2",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "广东省医学科学院广东省人民医院",
			
 
				+          id: 2,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "G3",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "广州南科信息科技有限公司",
			
 
				+          id: 3,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "G4",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "北明软件有限公司",
			
 
				+          id: 4,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "G5",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "北京东方通科技股份有限公司",
			
 
				+          id: 5,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "G6",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "广东金赋科技股份有限公司",
			
 
				+          id: 6,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "G7",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "深圳太极云软技术有限公司",
			
 
				+          id: 7,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "G8",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "国泰新点软件股份有限公司",
			
 
				+          id: 8,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "G9",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "厦门市美亚柏科信息股份有限公司 ",
			
 
				+          id: 9,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "G10",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "西湾智慧（广东）信息科技有限公司",
			
 
				+          id: 10,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "G11",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "广州数鹏通科技有限公司",
			
 
				+          id: 11,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "G12",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "福建博思软件股份有限公司",
			
 
				+          id: 12,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "G13",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "广州政企互联科技有限公司",
			
 
				+          id: 13,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "G14",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "广东南方数码科技股份有限公司",
			
 
				+          id: 14,
			
 
				+        },
			
 
				+      ],
			
 
				+    },
			
 
				+    {
			
 
				+      p_id: 6, //对应primary的id
			
 
				+      bgclr: "#66AF6B",
			
 
				+      data: [
			
 
				+        {
			
 
				+          xuhao: "H1",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "广东中浦科技有限公司",
			
 
				+          id: 1,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "H2",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "统信软件技术有限公司",
			
 
				+          id: 2,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "H3",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "北京数字认证股份有限公司",
			
 
				+          id: 3,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "H4",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "金税信息技术服务股份有限公司",
			
 
				+          id: 4,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "H5",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "北京国脉信安科技有限公司",
			
 
				+          id: 5,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "H6",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "润建股份有限公司",
			
 
				+          id: 6,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "H7",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "广东紫晶信息存储技术股份有限公司",
			
 
				+          id: 7,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "H8",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "广东三鼎实业集团有限公司",
			
 
				+          id: 8,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "H9",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "广东智信信息科技股份有限公司",
			
 
				+          id: 9,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "H10",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "广东国腾量子科技有限公司",
			
 
				+          id: 10,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "H11",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "北京建设数字科技有限公司",
			
 
				+          id: 11,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "H12",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "广东信航信息技术有限公司",
			
 
				+          id: 12,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "H13",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "瀚蓝环境股份有限公司",
			
 
				+          id: 13,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "H14",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "国衡智慧（广东）科技有限公司",
			
 
				+          id: 14,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "H15",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "广东数字生态科技有限责任公司",
			
 
				+          id: 15,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "H16",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "云浮市物联网研究院有限公司",
			
 
				+          id: 16,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "H17",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "广州中大凯旋电子科技有限公司",
			
 
				+          id: 17,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "H18",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "广东柯内特环境科技有限公司",
			
 
				+          id: 18,
			
 
				+        },
			
 
				+        {
			
 
				+          xuhao: "H19",
			
 
				+          url: "vroMUXdx",
			
 
				+          name: "广东省广播电视网络股份有限公司",
			
 
				+          id: 19,
			
 
				+        },
			
 
				+      ],
			
 
				+    },
			
 
				+  ],
			
 
				+};
			
 
				+
			
 
				+let loop = (main, sub) => {
			
 
				+  let data = main.map((item) => {
			
 
				+    sub.forEach((sub) => {
			
 
				+      if (item.id === sub.p_id) {
			
 
				+        item.sub = sub;
			
 
				+        item.show = false;
			
 
				+      }
			
 
				+    });
			
 
				+    return item;
			
 
				+  });
			
 
				+
			
 
				+  return data;
			
 
				+};
			
 
				+
			
 
				+let data = loop(raw.primary, raw.secondary);
			
 
				+
			
 
				+module.exports = {
			
 
				+  data,
			
 
				+  raw,
			
 
				+};
			
--- a/src/components/fold.vue
+++ b/src/components/fold.vue
@@ -0,0 +1,159 @@
 
				+<template>
			
 
				+  <div class="fold">
			
 
				+    <ul>
			
 
				+      <li :class="{anima:isActive}" @click.stop="showItem(item)" :style="{background:item.color,transitionDelay:`${(i+1)*0.1}s`}" v-for="(item,i) in rawdata" :key="i">
			
 
				+        <div>
			
 
				+          <span>{{item.name}}</span>
			
 
				+          <span>{{item.xuhao}}</span>
			
 
				+        </div>
			
 
				+        <img v-if="item.sub" :src="require(`@/assets/images/${!item.show?`show_enlarge@2x.png`:`show_narrow@2x.png`}`)" alt="">
			
 
				+        <ul @click.stop v-if="item.sub" :style="{maxHeight:item.show?`${item.sub.data.length*70}px`:'0','padding-bottom':item.show?'10px':'0'}">
			
 
				+          <li :style="{background:item.sub.bgclr||''}" v-for="(sub,idx) in item.sub.data" :key="idx">
			
 
				+            <div @click.stop="showItem(sub)" :class="{bLine:item.bgclr}">
			
 
				+              <div>
			
 
				+                <span>{{sub.name}}</span>
			
 
				+                <span>{{sub.xuhao}}</span>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+          </li>
			
 
				+        </ul>
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import {data} from './data.js'
			
 
				+import {data as data2} from './data2.js'
			
 
				+
			
 
				+import browser from '@/utils/browser'
			
 
				+
			
 
				+
			
 
				+export default {
			
 
				+  props:['isActive'],
			
 
				+  data(){
			
 
				+    let tt = data.concat(data2)
			
 
				+    let temp = tt.filter(item=>{
			
 
				+      item.show = false
			
 
				+      return !item.isHide
			
 
				+    })
			
 
				+    return {
			
 
				+      rawdata:temp,
			
 
				+      isMobile: browser.mobile
			
 
				+    }
			
 
				+  },
			
 
				+  methods:{
			
 
				+    goto(url){
			
 
				+      this.$router.push({
			
 
				+        name:'iframe',
			
 
				+        params:{
			
 
				+          id: url
			
 
				+        }
			
 
				+      })
			
 
				+    },
			
 
				+    showItem(item){
			
 
				+      if (!item.sub) {
			
 
				+        this.goto(item.url)
			
 
				+        return 
			
 
				+      }
			
 
				+      item.show = !item.show
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+.fold{
			
 
				+  width: 320px;
			
 
				+  min-height: 70px;
			
 
				+  max-height: 600px;
			
 
				+  background: linear-gradient(180deg, #00D3F6 0%, #234ED8 100%);
			
 
				+  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
			
 
				+  opacity: 1;
			
 
				+  padding: 15px;
			
 
				+  border-radius: 4px;
			
 
				+  overflow: auto;
			
 
				+  .mb-top{
			
 
				+    position: relative;
			
 
				+    border-bottom: 1px solid #ECECEC;
			
 
				+    margin-bottom: 10px;
			
 
				+    padding: 10px 0 20px;
			
 
				+    font-weight: bold;
			
 
				+    >img{
			
 
				+      position: absolute;
			
 
				+      transform: translateX(-50%);
			
 
				+      left: 50%;
			
 
				+      top: 0px;
			
 
				+    }
			
 
				+  }
			
 
				+  >ul{
			
 
				+    color: #FFFFFF;
			
 
				+    height: 100%;
			
 
				+    overflow: hidden;
			
 
				+   >li{
			
 
				+      padding: 0 15px;
			
 
				+      line-height: 40px;
			
 
				+      border-radius: 4px;
			
 
				+      background: #231815;
			
 
				+      position: relative;
			
 
				+      margin-bottom: 10px;
			
 
				+      overflow: hidden;
			
 
				+      transform: translateX(150%);
			
 
				+      transition: none;
			
 
				+      >div{
			
 
				+        display: flex;
			
 
				+        justify-content: space-between;
			
 
				+      }
			
 
				+     >img{
			
 
				+       position: absolute;
			
 
				+       top: 18px;
			
 
				+       right: 15px;
			
 
				+       width: 10px;
			
 
				+     }
			
 
				+     >ul{
			
 
				+      max-height: 0;
			
 
				+      transition: all 0.3s ease;
			
 
				+       >li{
			
 
				+          line-height: 36px;
			
 
				+          background: rgba(255, 255, 255, 0.2);
			
 
				+          border-radius: 4px;
			
 
				+          padding: 0 10px;
			
 
				+          font-size: 14px;
			
 
				+          overflow: hidden;
			
 
				+          cursor: pointer;
			
 
				+          &:not(:last-of-type){
			
 
				+            margin-bottom: 10px;
			
 
				+          }
			
 
				+          >div{
			
 
				+            >div{
			
 
				+              display: flex;
			
 
				+              justify-content: space-between;
			
 
				+              &:not(:last-of-type){
			
 
				+                border-bottom: 1px solid rgba(255,255,255,0.4);
			
 
				+              }
			
 
				+            }
			
 
				+          }
			
 
				+          .bLine{
			
 
				+            >div{
			
 
				+              &:not(:last-of-type){
			
 
				+                border-bottom: 1px solid rgba(0,0,0,0.1);
			
 
				+              }
			
 
				+            }
			
 
				+          }
			
 
				+       }
			
 
				+     }
			
 
				+   } 
			
 
				+   .anima{
			
 
				+      transform: translateX(0);
			
 
				+      transition: ease .3s transform;
			
 
				+   }
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+@media screen and (max-width: 500px) {
			
 
				+  .fold{
			
 
				+    max-height: calc(100vh - 70px);
			
 
				+  }
			
 
				+
			
 
				+}
			
 
				+</style>
			
--- a/src/components/map.vue
+++ b/src/components/map.vue
--- a/src/components/map2.vue
+++ b/src/components/map2.vue
--- a/src/components/select.vue
+++ b/src/components/select.vue
@@ -0,0 +1,112 @@
 
				+<template>
			
 
				+  <ul class="selectcon">
			
 
				+    <li :class="{ active: active==2 }" @click="active=2,$emit('select',2)">
			
 
				+      <span class="txt">2楼</span>
			
 
				+      <span class="line"></span>
			
 
				+      <span class="round"></span>
			
 
				+    </li>
			
 
				+    <span class="v-line" :style="{top:active==1?'30px':'36px'}"></span>
			
 
				+    <li :class="{ active: active==1 }" @click="active=1,$emit('select',1)">
			
 
				+      <span class="txt">1楼</span>
			
 
				+      <span class="line"></span>
			
 
				+      <span class="round"></span>
			
 
				+    </li>
			
 
				+  </ul>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  props:['select'],
			
 
				+  data(){
			
 
				+    return {
			
 
				+      active:this.select
			
 
				+    }
			
 
				+  },
			
 
				+  watch:{
			
 
				+    '$route':{
			
 
				+      deep:true,
			
 
				+      handler:function (newVal) {
			
 
				+        console.log(newVal);
			
 
				+        if (newVal != 'Home') {
			
 
				+          this.showselect = true
			
 
				+        }
			
 
				+        
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+.selectcon {
			
 
				+  position: fixed;
			
 
				+  top: 40px;
			
 
				+  right: 10px;
			
 
				+  color: #fff;
			
 
				+  > li {
			
 
				+    display: flex;
			
 
				+    align-items: center;
			
 
				+    justify-content: flex-end;
			
 
				+    cursor: pointer;
			
 
				+    margin-right: 5px;
			
 
				+    &:last-of-type{
			
 
				+      margin-top: 52px;
			
 
				+    }
			
 
				+    .txt {
			
 
				+      width: 80px;
			
 
				+      display: inline-block;
			
 
				+      height: 34px;
			
 
				+      line-height: 34px;
			
 
				+      text-align: right;
			
 
				+    }
			
 
				+    .line {
			
 
				+      display: inline-block;
			
 
				+      background: #fff;
			
 
				+      width: 24px;
			
 
				+      height: 1px;
			
 
				+    }
			
 
				+    .round {
			
 
				+      width: 32px;
			
 
				+      height: 32px;
			
 
				+      background: #fff;
			
 
				+      border-radius: 50%;
			
 
				+    }
			
 
				+  }
			
 
				+  .v-line{
			
 
				+    height: 60px;
			
 
				+    top: 36px;
			
 
				+    display: inline-block;
			
 
				+    background: #fff;
			
 
				+    width: 2px;
			
 
				+    position: absolute;
			
 
				+    right: 20px;
			
 
				+  }
			
 
				+  .active {
			
 
				+    margin-right: 0;
			
 
				+    .txt {
			
 
				+      width: 80px;
			
 
				+      display: inline-block;
			
 
				+      height: 34px;
			
 
				+      line-height: 34px;
			
 
				+      border-radius: 60px;
			
 
				+      background: linear-gradient(270deg, #00cfff 0%, #00aaff 100%);
			
 
				+      border: 4px solid #fff;
			
 
				+      box-sizing: content-box;
			
 
				+      text-align: center;
			
 
				+    }
			
 
				+    .line {
			
 
				+      display: inline-block;
			
 
				+      background: #fff;
			
 
				+      width: 24px;
			
 
				+      height: 2px;
			
 
				+    }
			
 
				+    .round {
			
 
				+      width: 42px;
			
 
				+      height: 42px;
			
 
				+      background: linear-gradient(270deg, #00cfff 0%, #00aaff 100%);
			
 
				+      border-radius: 50%;
			
 
				+      border: 8px solid #fff;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/components/share.vue
+++ b/src/components/share.vue
@@ -0,0 +1,171 @@
 
				+<template>
			
 
				+  <div class="intro brightness" >
			
 
				+    <div v-if="!istips">
			
 
				+      <p>分享链接给好友</p>
			
 
				+      <div class="link" v-html="url"></div>
			
 
				+      <div class="btn">
			
 
				+        <span ref="btn" class="submit" :data-clipboard-text="url">
			
 
				+          一键复制
			
 
				+        </span>
			
 
				+      </div>
			
 
				+      <img
			
 
				+        class="close"
			
 
				+        @click.stop="$emit('close')"
			
 
				+        :src="require('@/assets/images/close.png')"
			
 
				+      />
			
 
				+    </div>
			
 
				+
			
 
				+    <transition name="fade">
			
 
				+      <div class="tips" v-if="istips">
			
 
				+        场景链接复制成功
			
 
				+      </div>
			
 
				+    </transition>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+export default {
			
 
				+  methods: {
			
 
				+    handleoutside() {
			
 
				+      this.$emit("close");
			
 
				+    },
			
 
				+  },
			
 
				+  mounted() {
			
 
				+    let copy = new window.ClipboardJS(this.$refs.btn);
			
 
				+    copy.on("success", (e) => {
			
 
				+      this.istips = true
			
 
				+      setTimeout(() => {
			
 
				+        this.istips = false
			
 
				+        this.$emit('close')
			
 
				+      }, 3000);
			
 
				+      e.clearSelection();
			
 
				+    });
			
 
				+    copy.on("error", (err) => console.log(err));
			
 
				+  },
			
 
				+  data() {
			
 
				+    return {
			
 
				+      url: window.location.href.replace('http://','https://'),
			
 
				+      istips:false
			
 
				+    };
			
 
				+  }
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+@bx: 0 3px 6px rgba(0, 0, 0, 1);
			
 
				+@bc: rgba(12, 91, 246, 0.8);
			
 
				+@animation: 0.3s ease all;
			
 
				+@color:#000;
			
 
				+
			
 
				+.intro {
			
 
				+  text-align: center;
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  position: fixed;
			
 
				+  z-index: 999;
			
 
				+  top: 0;
			
 
				+  left: 0;
			
 
				+  background: linear-gradient(180deg, rgba(0, 33, 75, 0.84) 0%, rgba(35, 78, 216, 0.84) 100%);
			
 
				+  > div {
			
 
				+    padding: 20px;
			
 
				+    width: 640px;
			
 
				+    transform: translate(-50%, -50%);
			
 
				+    top: 50%;
			
 
				+    left: 50%;
			
 
				+    position: fixed;
			
 
				+    background-color: rgba(27, 27, 27, 0.9);
			
 
				+    border-radius: 5px;
			
 
				+    color:#fff;
			
 
				+    box-sizing: content-box;
			
 
				+    > p {
			
 
				+      text-align: left;
			
 
				+    }
			
 
				+    .link {
			
 
				+      color: #fff;
			
 
				+      text-align: center;
			
 
				+      padding: 30px 20px;
			
 
				+      word-wrap: break-word;
			
 
				+      width: 100%;
			
 
				+      margin: 50px auto;
			
 
				+    }
			
 
				+
			
 
				+    .btn{
			
 
				+      width: 100%;
			
 
				+      display: flex;
			
 
				+      justify-content: space-around;
			
 
				+      align-items: center;
			
 
				+      margin-bottom: 20px;
			
 
				+      >span{
			
 
				+        background: linear-gradient(180deg, #00D3F6 0%, #234ED8 100%);
			
 
				+        border-radius: 32px;
			
 
				+        width: 250px;
			
 
				+        height: 64px;
			
 
				+        line-height: 64px;
			
 
				+        cursor: pointer;
			
 
				+        font-size: 24px;
			
 
				+        border: 1px solid #fff;
			
 
				+        display: inline-block;
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    .close {
			
 
				+      position: absolute;
			
 
				+      top: 14px;
			
 
				+      width: 50px;
			
 
				+      height: 50px;
			
 
				+      right: -10px;
			
 
				+      transform: translateX(-50%);
			
 
				+      border-radius: 30px;
			
 
				+      cursor: pointer;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  .tips{
			
 
				+    position: absolute;
			
 
				+    top: 50%;
			
 
				+    left: 50%;
			
 
				+    transform: translate(-50%,-50%);
			
 
				+    width: 20%;
			
 
				+    padding: 20px 10px;
			
 
				+    z-index: 99999;
			
 
				+  }
			
 
				+}
			
 
				+@media screen and (max-width: 500px) {
			
 
				+  .intro {
			
 
				+  > div {
			
 
				+    padding: 20px;
			
 
				+    width: 80%;
			
 
				+    > p {
			
 
				+      text-align: center;
			
 
				+      margin-top: 40px;
			
 
				+      font-size: 18px;
			
 
				+    }
			
 
				+    .link {
			
 
				+      color: #fff;
			
 
				+      text-align: center;
			
 
				+      padding: 10px 0px;
			
 
				+      word-wrap: break-word;
			
 
				+      margin: 10px auto 30px;
			
 
				+    }
			
 
				+
			
 
				+    .btn{
			
 
				+      >span{
			
 
				+        width: 60%;
			
 
				+        height: 44px;
			
 
				+        line-height: 44px;
			
 
				+        font-size: 16px;
			
 
				+      }
			
 
				+
			
 
				+    }
			
 
				+
			
 
				+    .close {
			
 
				+      top: 14px;
			
 
				+      width: 30px;
			
 
				+      height: 30px;
			
 
				+      right: 0px;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+}
			
 
				+}
			
 
				+</style>
			
--- a/src/components/style.less
+++ b/src/components/style.less
@@ -0,0 +1,561 @@
 
				+.cls-1,
			
 
				+.cls-160 {
			
 
				+  fill: none;
			
 
				+}
			
 
				+.cls-2 {
			
 
				+  opacity: 0.8;
			
 
				+}
			
 
				+.cls-3 {
			
 
				+  clip-path: url(#clip-path);
			
 
				+}
			
 
				+.cls-4 {
			
 
				+  clip-path: url(#clip-path-2);
			
 
				+}
			
 
				+.cls-158,
			
 
				+.cls-5 {
			
 
				+  isolation: isolate;
			
 
				+}
			
 
				+.cls-6 {
			
 
				+  fill: #7f7f7f;
			
 
				+}
			
 
				+.cls-158,
			
 
				+.cls-159,
			
 
				+.cls-7 {
			
 
				+  fill: #fff;
			
 
				+}
			
 
				+.cls-8 {
			
 
				+  fill: #00446c;
			
 
				+}
			
 
				+.cls-9 {
			
 
				+  fill: #00315b;
			
 
				+}
			
 
				+.cls-10 {
			
 
				+  fill: #003c70;
			
 
				+}
			
 
				+.cls-11 {
			
 
				+  fill: #c4000f;
			
 
				+}
			
 
				+.cls-12 {
			
 
				+  fill: #7a000a;
			
 
				+}
			
 
				+.cls-13 {
			
 
				+  fill: #a0000d;
			
 
				+}
			
 
				+.cls-14 {
			
 
				+  fill: #cd6f00;
			
 
				+}
			
 
				+.cls-15 {
			
 
				+  fill: #ab5d00;
			
 
				+}
			
 
				+.cls-16 {
			
 
				+  fill: #d39100;
			
 
				+}
			
 
				+.cls-17 {
			
 
				+  fill: #af000e;
			
 
				+}
			
 
				+.cls-18 {
			
 
				+  fill: #e40012;
			
 
				+}
			
 
				+.cls-19 {
			
 
				+  fill: #b66300;
			
 
				+}
			
 
				+.cls-20 {
			
 
				+  fill: #ee8100;
			
 
				+}
			
 
				+.cls-21 {
			
 
				+  fill: #c06800;
			
 
				+}
			
 
				+.cls-22 {
			
 
				+  fill: #7f4500;
			
 
				+}
			
 
				+.cls-23 {
			
 
				+  fill: #835a00;
			
 
				+}
			
 
				+.cls-24 {
			
 
				+  fill: #c58800;
			
 
				+}
			
 
				+.cls-25 {
			
 
				+  fill: #f5a900;
			
 
				+}
			
 
				+.cls-26 {
			
 
				+  clip-path: url(#clip-path-4);
			
 
				+}
			
 
				+.cls-27 {
			
 
				+  fill: #a25800;
			
 
				+}
			
 
				+.cls-28 {
			
 
				+  fill: #9d5500;
			
 
				+}
			
 
				+.cls-29 {
			
 
				+  clip-path: url(#clip-path-5);
			
 
				+}
			
 
				+.cls-30 {
			
 
				+  fill: #a9000d;
			
 
				+}
			
 
				+.cls-31 {
			
 
				+  fill: #a4000d;
			
 
				+}
			
 
				+.cls-32 {
			
 
				+  fill: #ba8000;
			
 
				+}
			
 
				+.cls-33 {
			
 
				+  clip-path: url(#clip-path-6);
			
 
				+}
			
 
				+.cls-34 {
			
 
				+  fill: #9d6c00;
			
 
				+}
			
 
				+.cls-35 {
			
 
				+  fill: #986900;
			
 
				+}
			
 
				+.cls-36 {
			
 
				+  clip-path: url(#clip-path-7);
			
 
				+}
			
 
				+.cls-37 {
			
 
				+  fill: #004077;
			
 
				+}
			
 
				+.cls-38 {
			
 
				+  fill: #003e74;
			
 
				+}
			
 
				+.cls-39 {
			
 
				+  clip-path: url(#clip-path-8);
			
 
				+}
			
 
				+.cls-40 {
			
 
				+  clip-path: url(#clip-path-9);
			
 
				+}
			
 
				+.cls-41 {
			
 
				+  fill: #00437e;
			
 
				+}
			
 
				+.cls-42 {
			
 
				+  fill: #00427a;
			
 
				+}
			
 
				+.cls-43 {
			
 
				+  clip-path: url(#clip-path-10);
			
 
				+}
			
 
				+.cls-44 {
			
 
				+  clip-path: url(#clip-path-11);
			
 
				+}
			
 
				+.cls-45 {
			
 
				+  fill: #003a6d;
			
 
				+}
			
 
				+.cls-46 {
			
 
				+  clip-path: url(#clip-path-12);
			
 
				+}
			
 
				+.cls-47 {
			
 
				+  fill: #003869;
			
 
				+}
			
 
				+.cls-48 {
			
 
				+  clip-path: url(#clip-path-13);
			
 
				+}
			
 
				+.cls-49 {
			
 
				+  fill: #003766;
			
 
				+}
			
 
				+.cls-50 {
			
 
				+  fill: #003563;
			
 
				+}
			
 
				+.cls-51 {
			
 
				+  fill: #00335f;
			
 
				+}
			
 
				+.cls-52 {
			
 
				+  fill: #00315c;
			
 
				+}
			
 
				+.cls-53 {
			
 
				+  fill: #002f58;
			
 
				+}
			
 
				+.cls-54 {
			
 
				+  clip-path: url(#clip-path-14);
			
 
				+}
			
 
				+.cls-55 {
			
 
				+  fill: #005baa;
			
 
				+}
			
 
				+.cls-56 {
			
 
				+  clip-path: url(#clip-path-15);
			
 
				+}
			
 
				+.cls-57 {
			
 
				+  clip-path: url(#clip-path-16);
			
 
				+}
			
 
				+.cls-58 {
			
 
				+  fill: #945000;
			
 
				+}
			
 
				+.cls-59 {
			
 
				+  fill: #985300;
			
 
				+}
			
 
				+.cls-60 {
			
 
				+  clip-path: url(#clip-path-17);
			
 
				+}
			
 
				+.cls-61 {
			
 
				+  fill: #7c4300;
			
 
				+}
			
 
				+.cls-62 {
			
 
				+  clip-path: url(#clip-path-18);
			
 
				+}
			
 
				+.cls-63 {
			
 
				+  fill: #92000c;
			
 
				+}
			
 
				+.cls-64 {
			
 
				+  fill: #96000c;
			
 
				+}
			
 
				+.cls-65 {
			
 
				+  clip-path: url(#clip-path-19);
			
 
				+}
			
 
				+.cls-66 {
			
 
				+  clip-path: url(#clip-path-20);
			
 
				+}
			
 
				+.cls-67 {
			
 
				+  fill: #770009;
			
 
				+}
			
 
				+.cls-68 {
			
 
				+  clip-path: url(#clip-path-21);
			
 
				+}
			
 
				+.cls-69 {
			
 
				+  clip-path: url(#clip-path-22);
			
 
				+}
			
 
				+.cls-70 {
			
 
				+  fill: #7f5800;
			
 
				+}
			
 
				+.cls-71 {
			
 
				+  clip-path: url(#clip-path-23);
			
 
				+}
			
 
				+.cls-72 {
			
 
				+  clip-path: url(#clip-path-24);
			
 
				+}
			
 
				+.cls-73 {
			
 
				+  fill: #936500;
			
 
				+}
			
 
				+.cls-74 {
			
 
				+  clip-path: url(#clip-path-25);
			
 
				+}
			
 
				+.cls-75 {
			
 
				+  fill: #005a8d;
			
 
				+}
			
 
				+.cls-76 {
			
 
				+  fill: #005789;
			
 
				+}
			
 
				+.cls-77 {
			
 
				+  clip-path: url(#clip-path-26);
			
 
				+}
			
 
				+.cls-78 {
			
 
				+  fill: #005485;
			
 
				+}
			
 
				+.cls-79 {
			
 
				+  clip-path: url(#clip-path-27);
			
 
				+}
			
 
				+.cls-80 {
			
 
				+  fill: #005c91;
			
 
				+}
			
 
				+.cls-81 {
			
 
				+  clip-path: url(#clip-path-28);
			
 
				+}
			
 
				+.cls-82 {
			
 
				+  fill: #005281;
			
 
				+}
			
 
				+.cls-83 {
			
 
				+  fill: #004f7d;
			
 
				+}
			
 
				+.cls-84 {
			
 
				+  clip-path: url(#clip-path-29);
			
 
				+}
			
 
				+.cls-85 {
			
 
				+  clip-path: url(#clip-path-30);
			
 
				+}
			
 
				+.cls-86 {
			
 
				+  clip-path: url(#clip-path-31);
			
 
				+}
			
 
				+.cls-87 {
			
 
				+  fill: #004d79;
			
 
				+}
			
 
				+.cls-88 {
			
 
				+  clip-path: url(#clip-path-32);
			
 
				+}
			
 
				+.cls-89 {
			
 
				+  clip-path: url(#clip-path-33);
			
 
				+}
			
 
				+.cls-90 {
			
 
				+  fill: #004a75;
			
 
				+}
			
 
				+.cls-91 {
			
 
				+  fill: #004871;
			
 
				+}
			
 
				+.cls-92 {
			
 
				+  clip-path: url(#clip-path-34);
			
 
				+}
			
 
				+.cls-93 {
			
 
				+  clip-path: url(#clip-path-35);
			
 
				+}
			
 
				+.cls-94 {
			
 
				+  clip-path: url(#clip-path-36);
			
 
				+}
			
 
				+.cls-95 {
			
 
				+  clip-path: url(#clip-path-37);
			
 
				+}
			
 
				+.cls-96 {
			
 
				+  clip-path: url(#clip-path-38);
			
 
				+}
			
 
				+.cls-97 {
			
 
				+  clip-path: url(#clip-path-39);
			
 
				+}
			
 
				+.cls-98 {
			
 
				+  fill: #8e6200;
			
 
				+}
			
 
				+.cls-99 {
			
 
				+  fill: #895f00;
			
 
				+}
			
 
				+.cls-100 {
			
 
				+  clip-path: url(#clip-path-40);
			
 
				+}
			
 
				+.cls-101 {
			
 
				+  fill: #006898;
			
 
				+}
			
 
				+.cls-102 {
			
 
				+  clip-path: url(#clip-path-41);
			
 
				+}
			
 
				+.cls-103 {
			
 
				+  fill: #0072a6;
			
 
				+}
			
 
				+.cls-104 {
			
 
				+  fill: #006fa2;
			
 
				+}
			
 
				+.cls-105 {
			
 
				+  clip-path: url(#clip-path-42);
			
 
				+}
			
 
				+.cls-106 {
			
 
				+  fill: #0075ab;
			
 
				+}
			
 
				+.cls-107 {
			
 
				+  clip-path: url(#clip-path-43);
			
 
				+}
			
 
				+.cls-108 {
			
 
				+  fill: #006594;
			
 
				+}
			
 
				+.cls-109 {
			
 
				+  fill: #00628f;
			
 
				+}
			
 
				+.cls-110 {
			
 
				+  clip-path: url(#clip-path-44);
			
 
				+}
			
 
				+.cls-111 {
			
 
				+  fill: #005f8b;
			
 
				+}
			
 
				+.cls-112 {
			
 
				+  fill: #005c86;
			
 
				+}
			
 
				+.cls-113 {
			
 
				+  clip-path: url(#clip-path-45);
			
 
				+}
			
 
				+.cls-114 {
			
 
				+  fill: #005881;
			
 
				+}
			
 
				+.cls-115 {
			
 
				+  clip-path: url(#clip-path-46);
			
 
				+}
			
 
				+.cls-116 {
			
 
				+  fill: #00557d;
			
 
				+}
			
 
				+.cls-117 {
			
 
				+  clip-path: url(#clip-path-47);
			
 
				+}
			
 
				+.cls-118 {
			
 
				+  clip-path: url(#clip-path-48);
			
 
				+}
			
 
				+.cls-119 {
			
 
				+  fill: #00456d;
			
 
				+}
			
 
				+.cls-120 {
			
 
				+  fill: #004369;
			
 
				+}
			
 
				+.cls-121 {
			
 
				+  clip-path: url(#clip-path-49);
			
 
				+}
			
 
				+.cls-122 {
			
 
				+  clip-path: url(#clip-path-50);
			
 
				+}
			
 
				+.cls-123 {
			
 
				+  clip-path: url(#clip-path-51);
			
 
				+}
			
 
				+.cls-124 {
			
 
				+  fill: #ab7600;
			
 
				+}
			
 
				+.cls-125 {
			
 
				+  clip-path: url(#clip-path-52);
			
 
				+}
			
 
				+.cls-126 {
			
 
				+  clip-path: url(#clip-path-53);
			
 
				+}
			
 
				+.cls-127 {
			
 
				+  fill: #005278;
			
 
				+}
			
 
				+.cls-128 {
			
 
				+  clip-path: url(#clip-path-54);
			
 
				+}
			
 
				+.cls-129 {
			
 
				+  fill: #00547b;
			
 
				+}
			
 
				+.cls-130 {
			
 
				+  fill: #0088c7;
			
 
				+}
			
 
				+.cls-131 {
			
 
				+  fill: #009ee7;
			
 
				+}
			
 
				+.cls-132 {
			
 
				+  clip-path: url(#clip-path-55);
			
 
				+}
			
 
				+.cls-133 {
			
 
				+  clip-path: url(#clip-path-56);
			
 
				+}
			
 
				+.cls-134 {
			
 
				+  clip-path: url(#clip-path-57);
			
 
				+}
			
 
				+.cls-135 {
			
 
				+  clip-path: url(#clip-path-58);
			
 
				+}
			
 
				+.cls-136 {
			
 
				+  clip-path: url(#clip-path-59);
			
 
				+}
			
 
				+.cls-137 {
			
 
				+  clip-path: url(#clip-path-60);
			
 
				+}
			
 
				+.cls-138 {
			
 
				+  fill: #0080ca;
			
 
				+}
			
 
				+.cls-139 {
			
 
				+  clip-path: url(#clip-path-61);
			
 
				+}
			
 
				+.cls-140 {
			
 
				+  clip-path: url(#clip-path-62);
			
 
				+}
			
 
				+.cls-141 {
			
 
				+  clip-path: url(#clip-path-63);
			
 
				+}
			
 
				+.cls-142 {
			
 
				+  clip-path: url(#clip-path-64);
			
 
				+}
			
 
				+.cls-143 {
			
 
				+  clip-path: url(#clip-path-65);
			
 
				+}
			
 
				+.cls-144 {
			
 
				+  clip-path: url(#clip-path-66);
			
 
				+}
			
 
				+.cls-145 {
			
 
				+  clip-path: url(#clip-path-67);
			
 
				+}
			
 
				+.cls-146 {
			
 
				+  clip-path: url(#clip-path-68);
			
 
				+}
			
 
				+.cls-147 {
			
 
				+  clip-path: url(#clip-path-69);
			
 
				+}
			
 
				+.cls-148 {
			
 
				+  clip-path: url(#clip-path-70);
			
 
				+}
			
 
				+.cls-149 {
			
 
				+  fill: #006eae;
			
 
				+}
			
 
				+.cls-150 {
			
 
				+  fill: #004e92;
			
 
				+}
			
 
				+.cls-151 {
			
 
				+  fill: #006b9d;
			
 
				+}
			
 
				+.cls-152,
			
 
				+.cls-161 {
			
 
				+  fill: #dd7e6b;
			
 
				+}
			
 
				+.cls-153 {
			
 
				+  fill: #b5483c;
			
 
				+}
			
 
				+.cls-154 {
			
 
				+  fill: #a52f2d;
			
 
				+}
			
 
				+.cls-155 {
			
 
				+  fill: #ba433a;
			
 
				+}
			
 
				+.cls-156 {
			
 
				+  fill: #ce5e4e;
			
 
				+}
			
 
				+.cls-157 {
			
 
				+  fill: #a8a8a8;
			
 
				+}
			
 
				+.cls-158 {
			
 
				+  opacity: 0.6;
			
 
				+}
			
 
				+.cls-159 {
			
 
				+  opacity: 0.9;
			
 
				+}
			
 
				+.cls-160 {
			
 
				+  stroke: #fff;
			
 
				+  stroke-miterlimit: 10;
			
 
				+}
			
 
				+.cls-161,
			
 
				+.cls-167,
			
 
				+.cls-173 {
			
 
				+  font-size: 16px;
			
 
				+  font-family: SourceHanSansCN-Regular-GBpc-EUC-H, Source Han Sans CN;
			
 
				+}
			
 
				+.cls-162,
			
 
				+.cls-167 {
			
 
				+  fill: #916ce5;
			
 
				+}
			
 
				+.cls-163 {
			
 
				+  fill: #6952cc;
			
 
				+}
			
 
				+.cls-164 {
			
 
				+  fill: #5644c1;
			
 
				+}
			
 
				+.cls-165 {
			
 
				+  fill: #6850cc;
			
 
				+}
			
 
				+.cls-166 {
			
 
				+  fill: #7b5dd8;
			
 
				+}
			
 
				+.cls-168,
			
 
				+.cls-173 {
			
 
				+  fill: #ddbc6b;
			
 
				+}
			
 
				+.cls-169 {
			
 
				+  fill: #ba7820;
			
 
				+}
			
 
				+.cls-170 {
			
 
				+  fill: #9e6613;
			
 
				+}
			
 
				+.cls-171 {
			
 
				+  fill: #b58024;
			
 
				+}
			
 
				+.cls-172 {
			
 
				+  fill: #c99b41;
			
 
				+}
			
 
				+.cls-174 {
			
 
				+  fill: #b2b2b2;
			
 
				+}
			
 
				+.cls-175 {
			
 
				+  fill: #858585;
			
 
				+}
			
 
				+
			
 
				+
			
 
				+
			
 
				+g[data-istag="yes"] {
			
 
				+  display: none;
			
 
				+}
			
 
				+
			
 
				+g[data-isface="yes"]{
			
 
				+  cursor: pointer;
			
 
				+}
			
 
				+
			
 
				+
			
 
				+g[data-isid="yes"] {
			
 
				+  &:hover {
			
 
				+    >g[data-isface="yes"]{
			
 
				+      .cls-168, .cls-173 {
			
 
				+        fill: #fde5aa;
			
 
				+      }
			
 
				+      .cls-162, .cls-167{
			
 
				+        fill: #C1A6FF;
			
 
				+      }
			
 
				+      .cls-152, .cls-161{
			
 
				+        fill: #EE927F;
			
 
				+      }
			
 
				+    }
			
 
				+    
			
 
				+    g[data-istag="yes"] {
			
 
				+      display: block;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
--- a/src/components/style2.less
+++ b/src/components/style2.less
@@ -0,0 +1,630 @@
 
				+.cls-1,
			
 
				+.cls-160 {
			
 
				+  fill: none;
			
 
				+}
			
 
				+.cls-2 {
			
 
				+  opacity: 0.8;
			
 
				+}
			
 
				+.cls-3 {
			
 
				+  clip-path: url(#clip-path);
			
 
				+}
			
 
				+.cls-4 {
			
 
				+  clip-path: url(#clip-path-2);
			
 
				+}
			
 
				+.cls-158,
			
 
				+.cls-5 {
			
 
				+  isolation: isolate;
			
 
				+}
			
 
				+.cls-6 {
			
 
				+  fill: #7f7f7f;
			
 
				+}
			
 
				+.cls-158,
			
 
				+.cls-159,
			
 
				+.cls-7 {
			
 
				+  fill: #fff;
			
 
				+}
			
 
				+.cls-8 {
			
 
				+  fill: #00446c;
			
 
				+}
			
 
				+.cls-9 {
			
 
				+  fill: #00315b;
			
 
				+}
			
 
				+.cls-10 {
			
 
				+  fill: #003c70;
			
 
				+}
			
 
				+.cls-11 {
			
 
				+  fill: #c4000f;
			
 
				+}
			
 
				+.cls-12 {
			
 
				+  fill: #7a000a;
			
 
				+}
			
 
				+.cls-13 {
			
 
				+  fill: #a0000d;
			
 
				+}
			
 
				+.cls-14 {
			
 
				+  fill: #cd6f00;
			
 
				+}
			
 
				+.cls-15 {
			
 
				+  fill: #ab5d00;
			
 
				+}
			
 
				+.cls-16 {
			
 
				+  fill: #d39100;
			
 
				+}
			
 
				+.cls-17 {
			
 
				+  fill: #af000e;
			
 
				+}
			
 
				+.cls-18 {
			
 
				+  fill: #e40012;
			
 
				+}
			
 
				+.cls-19 {
			
 
				+  fill: #b66300;
			
 
				+}
			
 
				+.cls-20 {
			
 
				+  fill: #ee8100;
			
 
				+}
			
 
				+.cls-21 {
			
 
				+  fill: #c06800;
			
 
				+}
			
 
				+.cls-22 {
			
 
				+  fill: #7f4500;
			
 
				+}
			
 
				+.cls-23 {
			
 
				+  fill: #835a00;
			
 
				+}
			
 
				+.cls-24 {
			
 
				+  fill: #c58800;
			
 
				+}
			
 
				+.cls-25 {
			
 
				+  fill: #f5a900;
			
 
				+}
			
 
				+.cls-26 {
			
 
				+  clip-path: url(#clip-path-4);
			
 
				+}
			
 
				+.cls-27 {
			
 
				+  fill: #a25800;
			
 
				+}
			
 
				+.cls-28 {
			
 
				+  fill: #9d5500;
			
 
				+}
			
 
				+.cls-29 {
			
 
				+  clip-path: url(#clip-path-5);
			
 
				+}
			
 
				+.cls-30 {
			
 
				+  fill: #a9000d;
			
 
				+}
			
 
				+.cls-31 {
			
 
				+  fill: #a4000d;
			
 
				+}
			
 
				+.cls-32 {
			
 
				+  fill: #ba8000;
			
 
				+}
			
 
				+.cls-33 {
			
 
				+  clip-path: url(#clip-path-6);
			
 
				+}
			
 
				+.cls-34 {
			
 
				+  fill: #9d6c00;
			
 
				+}
			
 
				+.cls-35 {
			
 
				+  fill: #986900;
			
 
				+}
			
 
				+.cls-36 {
			
 
				+  clip-path: url(#clip-path-7);
			
 
				+}
			
 
				+.cls-37 {
			
 
				+  fill: #004077;
			
 
				+}
			
 
				+.cls-38 {
			
 
				+  fill: #003e74;
			
 
				+}
			
 
				+.cls-39 {
			
 
				+  clip-path: url(#clip-path-8);
			
 
				+}
			
 
				+.cls-40 {
			
 
				+  clip-path: url(#clip-path-9);
			
 
				+}
			
 
				+.cls-41 {
			
 
				+  fill: #00437e;
			
 
				+}
			
 
				+.cls-42 {
			
 
				+  fill: #00427a;
			
 
				+}
			
 
				+.cls-43 {
			
 
				+  clip-path: url(#clip-path-10);
			
 
				+}
			
 
				+.cls-44 {
			
 
				+  clip-path: url(#clip-path-11);
			
 
				+}
			
 
				+.cls-45 {
			
 
				+  fill: #003a6d;
			
 
				+}
			
 
				+.cls-46 {
			
 
				+  clip-path: url(#clip-path-12);
			
 
				+}
			
 
				+.cls-47 {
			
 
				+  fill: #003869;
			
 
				+}
			
 
				+.cls-48 {
			
 
				+  clip-path: url(#clip-path-13);
			
 
				+}
			
 
				+.cls-49 {
			
 
				+  fill: #003766;
			
 
				+}
			
 
				+.cls-50 {
			
 
				+  fill: #003563;
			
 
				+}
			
 
				+.cls-51 {
			
 
				+  fill: #00335f;
			
 
				+}
			
 
				+.cls-52 {
			
 
				+  fill: #00315c;
			
 
				+}
			
 
				+.cls-53 {
			
 
				+  fill: #002f58;
			
 
				+}
			
 
				+.cls-54 {
			
 
				+  clip-path: url(#clip-path-14);
			
 
				+}
			
 
				+.cls-55 {
			
 
				+  fill: #005baa;
			
 
				+}
			
 
				+.cls-56 {
			
 
				+  clip-path: url(#clip-path-15);
			
 
				+}
			
 
				+.cls-57 {
			
 
				+  clip-path: url(#clip-path-16);
			
 
				+}
			
 
				+.cls-58 {
			
 
				+  fill: #945000;
			
 
				+}
			
 
				+.cls-59 {
			
 
				+  fill: #985300;
			
 
				+}
			
 
				+.cls-60 {
			
 
				+  clip-path: url(#clip-path-17);
			
 
				+}
			
 
				+.cls-61 {
			
 
				+  fill: #7c4300;
			
 
				+}
			
 
				+.cls-62 {
			
 
				+  clip-path: url(#clip-path-18);
			
 
				+}
			
 
				+.cls-63 {
			
 
				+  fill: #92000c;
			
 
				+}
			
 
				+.cls-64 {
			
 
				+  fill: #96000c;
			
 
				+}
			
 
				+.cls-65 {
			
 
				+  clip-path: url(#clip-path-19);
			
 
				+}
			
 
				+.cls-66 {
			
 
				+  clip-path: url(#clip-path-20);
			
 
				+}
			
 
				+.cls-67 {
			
 
				+  fill: #770009;
			
 
				+}
			
 
				+.cls-68 {
			
 
				+  clip-path: url(#clip-path-21);
			
 
				+}
			
 
				+.cls-69 {
			
 
				+  clip-path: url(#clip-path-22);
			
 
				+}
			
 
				+.cls-70 {
			
 
				+  fill: #7f5800;
			
 
				+}
			
 
				+.cls-71 {
			
 
				+  clip-path: url(#clip-path-23);
			
 
				+}
			
 
				+.cls-72 {
			
 
				+  clip-path: url(#clip-path-24);
			
 
				+}
			
 
				+.cls-73 {
			
 
				+  fill: #936500;
			
 
				+}
			
 
				+.cls-74 {
			
 
				+  clip-path: url(#clip-path-25);
			
 
				+}
			
 
				+.cls-75 {
			
 
				+  fill: #005a8d;
			
 
				+}
			
 
				+.cls-76 {
			
 
				+  fill: #005789;
			
 
				+}
			
 
				+.cls-77 {
			
 
				+  clip-path: url(#clip-path-26);
			
 
				+}
			
 
				+.cls-78 {
			
 
				+  fill: #005485;
			
 
				+}
			
 
				+.cls-79 {
			
 
				+  clip-path: url(#clip-path-27);
			
 
				+}
			
 
				+.cls-80 {
			
 
				+  fill: #005c91;
			
 
				+}
			
 
				+.cls-81 {
			
 
				+  clip-path: url(#clip-path-28);
			
 
				+}
			
 
				+.cls-82 {
			
 
				+  fill: #005281;
			
 
				+}
			
 
				+.cls-83 {
			
 
				+  fill: #004f7d;
			
 
				+}
			
 
				+.cls-84 {
			
 
				+  clip-path: url(#clip-path-29);
			
 
				+}
			
 
				+.cls-85 {
			
 
				+  clip-path: url(#clip-path-30);
			
 
				+}
			
 
				+.cls-86 {
			
 
				+  clip-path: url(#clip-path-31);
			
 
				+}
			
 
				+.cls-87 {
			
 
				+  fill: #004d79;
			
 
				+}
			
 
				+.cls-88 {
			
 
				+  clip-path: url(#clip-path-32);
			
 
				+}
			
 
				+.cls-89 {
			
 
				+  clip-path: url(#clip-path-33);
			
 
				+}
			
 
				+.cls-90 {
			
 
				+  fill: #004a75;
			
 
				+}
			
 
				+.cls-91 {
			
 
				+  fill: #004871;
			
 
				+}
			
 
				+.cls-92 {
			
 
				+  clip-path: url(#clip-path-34);
			
 
				+}
			
 
				+.cls-93 {
			
 
				+  clip-path: url(#clip-path-35);
			
 
				+}
			
 
				+.cls-94 {
			
 
				+  clip-path: url(#clip-path-36);
			
 
				+}
			
 
				+.cls-95 {
			
 
				+  clip-path: url(#clip-path-37);
			
 
				+}
			
 
				+.cls-96 {
			
 
				+  clip-path: url(#clip-path-38);
			
 
				+}
			
 
				+.cls-97 {
			
 
				+  clip-path: url(#clip-path-39);
			
 
				+}
			
 
				+.cls-98 {
			
 
				+  fill: #8e6200;
			
 
				+}
			
 
				+.cls-99 {
			
 
				+  fill: #895f00;
			
 
				+}
			
 
				+.cls-100 {
			
 
				+  clip-path: url(#clip-path-40);
			
 
				+}
			
 
				+.cls-101 {
			
 
				+  fill: #006898;
			
 
				+}
			
 
				+.cls-102 {
			
 
				+  clip-path: url(#clip-path-41);
			
 
				+}
			
 
				+.cls-103 {
			
 
				+  fill: #0072a6;
			
 
				+}
			
 
				+.cls-104 {
			
 
				+  fill: #006fa2;
			
 
				+}
			
 
				+.cls-105 {
			
 
				+  clip-path: url(#clip-path-42);
			
 
				+}
			
 
				+.cls-106 {
			
 
				+  fill: #0075ab;
			
 
				+}
			
 
				+.cls-107 {
			
 
				+  clip-path: url(#clip-path-43);
			
 
				+}
			
 
				+.cls-108 {
			
 
				+  fill: #006594;
			
 
				+}
			
 
				+.cls-109 {
			
 
				+  fill: #00628f;
			
 
				+}
			
 
				+.cls-110 {
			
 
				+  clip-path: url(#clip-path-44);
			
 
				+}
			
 
				+.cls-111 {
			
 
				+  fill: #005f8b;
			
 
				+}
			
 
				+.cls-112 {
			
 
				+  fill: #005c86;
			
 
				+}
			
 
				+.cls-113 {
			
 
				+  clip-path: url(#clip-path-45);
			
 
				+}
			
 
				+.cls-114 {
			
 
				+  fill: #005881;
			
 
				+}
			
 
				+.cls-115 {
			
 
				+  clip-path: url(#clip-path-46);
			
 
				+}
			
 
				+.cls-116 {
			
 
				+  fill: #00557d;
			
 
				+}
			
 
				+.cls-117 {
			
 
				+  clip-path: url(#clip-path-47);
			
 
				+}
			
 
				+.cls-118 {
			
 
				+  clip-path: url(#clip-path-48);
			
 
				+}
			
 
				+.cls-119 {
			
 
				+  fill: #00456d;
			
 
				+}
			
 
				+.cls-120 {
			
 
				+  fill: #004369;
			
 
				+}
			
 
				+.cls-121 {
			
 
				+  clip-path: url(#clip-path-49);
			
 
				+}
			
 
				+.cls-122 {
			
 
				+  clip-path: url(#clip-path-50);
			
 
				+}
			
 
				+.cls-123 {
			
 
				+  clip-path: url(#clip-path-51);
			
 
				+}
			
 
				+.cls-124 {
			
 
				+  fill: #ab7600;
			
 
				+}
			
 
				+.cls-125 {
			
 
				+  clip-path: url(#clip-path-52);
			
 
				+}
			
 
				+.cls-126 {
			
 
				+  clip-path: url(#clip-path-53);
			
 
				+}
			
 
				+.cls-127 {
			
 
				+  fill: #005278;
			
 
				+}
			
 
				+.cls-128 {
			
 
				+  clip-path: url(#clip-path-54);
			
 
				+}
			
 
				+.cls-129 {
			
 
				+  fill: #00547b;
			
 
				+}
			
 
				+.cls-130 {
			
 
				+  fill: #0088c7;
			
 
				+}
			
 
				+.cls-131 {
			
 
				+  fill: #009ee7;
			
 
				+}
			
 
				+.cls-132 {
			
 
				+  clip-path: url(#clip-path-55);
			
 
				+}
			
 
				+.cls-133 {
			
 
				+  clip-path: url(#clip-path-56);
			
 
				+}
			
 
				+.cls-134 {
			
 
				+  clip-path: url(#clip-path-57);
			
 
				+}
			
 
				+.cls-135 {
			
 
				+  clip-path: url(#clip-path-58);
			
 
				+}
			
 
				+.cls-136 {
			
 
				+  clip-path: url(#clip-path-59);
			
 
				+}
			
 
				+.cls-137 {
			
 
				+  clip-path: url(#clip-path-60);
			
 
				+}
			
 
				+.cls-138 {
			
 
				+  fill: #0080ca;
			
 
				+}
			
 
				+.cls-139 {
			
 
				+  clip-path: url(#clip-path-61);
			
 
				+}
			
 
				+.cls-140 {
			
 
				+  clip-path: url(#clip-path-62);
			
 
				+}
			
 
				+.cls-141 {
			
 
				+  clip-path: url(#clip-path-63);
			
 
				+}
			
 
				+.cls-142 {
			
 
				+  clip-path: url(#clip-path-64);
			
 
				+}
			
 
				+.cls-143 {
			
 
				+  clip-path: url(#clip-path-65);
			
 
				+}
			
 
				+.cls-144 {
			
 
				+  clip-path: url(#clip-path-66);
			
 
				+}
			
 
				+.cls-145 {
			
 
				+  clip-path: url(#clip-path-67);
			
 
				+}
			
 
				+.cls-146 {
			
 
				+  clip-path: url(#clip-path-68);
			
 
				+}
			
 
				+.cls-147 {
			
 
				+  clip-path: url(#clip-path-69);
			
 
				+}
			
 
				+.cls-148 {
			
 
				+  clip-path: url(#clip-path-70);
			
 
				+}
			
 
				+.cls-149 {
			
 
				+  fill: #006eae;
			
 
				+}
			
 
				+.cls-150 {
			
 
				+  fill: #004e92;
			
 
				+}
			
 
				+.cls-151 {
			
 
				+  fill: #006b9d;
			
 
				+}
			
 
				+.cls-152,
			
 
				+.cls-161 {
			
 
				+  fill: #3a6bd6;
			
 
				+}
			
 
				+.cls-153 {
			
 
				+  fill: #35549b;
			
 
				+}
			
 
				+.cls-154 {
			
 
				+  fill: #224589;
			
 
				+}
			
 
				+.cls-155 {
			
 
				+  fill: #3f5db2;
			
 
				+}
			
 
				+.cls-156 {
			
 
				+  fill: #2d4e96;
			
 
				+}
			
 
				+.cls-157 {
			
 
				+  fill: #a8a8a8;
			
 
				+}
			
 
				+.cls-158 {
			
 
				+  opacity: 0.6;
			
 
				+}
			
 
				+.cls-159 {
			
 
				+  opacity: 0.9;
			
 
				+}
			
 
				+.cls-160 {
			
 
				+  stroke: #fff;
			
 
				+  stroke-miterlimit: 10;
			
 
				+}
			
 
				+.cls-161,
			
 
				+.cls-172,
			
 
				+.cls-178,
			
 
				+.cls-184,
			
 
				+.cls-190,
			
 
				+.cls-196 {
			
 
				+  font-size: 16px;
			
 
				+  font-family: SourceHanSansCN-Regular-GBpc-EUC-H, Source Han Sans CN;
			
 
				+}
			
 
				+.cls-162 {
			
 
				+  letter-spacing: -0.46em;
			
 
				+}
			
 
				+.cls-163 {
			
 
				+  letter-spacing: -0.04em;
			
 
				+}
			
 
				+.cls-164 {
			
 
				+  letter-spacing: -0.04em;
			
 
				+}
			
 
				+.cls-165 {
			
 
				+  letter-spacing: -0.46em;
			
 
				+}
			
 
				+.cls-166 {
			
 
				+  fill: #c95c3f;
			
 
				+}
			
 
				+.cls-167 {
			
 
				+  fill: #b23b2b;
			
 
				+}
			
 
				+.cls-168 {
			
 
				+  fill: #cc5c3e;
			
 
				+}
			
 
				+.cls-169 {
			
 
				+  fill: #dd734e;
			
 
				+}
			
 
				+.cls-170 {
			
 
				+  fill: #e49b77;
			
 
				+}
			
 
				+.cls-171,
			
 
				+.cls-172 {
			
 
				+  fill: #ed8a5f;
			
 
				+}
			
 
				+.cls-173,
			
 
				+.cls-178 {
			
 
				+  fill: #eab363;
			
 
				+}
			
 
				+.cls-174 {
			
 
				+  fill: #bf833c;
			
 
				+}
			
 
				+.cls-175 {
			
 
				+  fill: #b26d28;
			
 
				+}
			
 
				+.cls-176 {
			
 
				+  fill: #d69947;
			
 
				+}
			
 
				+.cls-177 {
			
 
				+  fill: #c68334;
			
 
				+}
			
 
				+.cls-179,
			
 
				+.cls-184 {
			
 
				+  fill: #80ce89;
			
 
				+}
			
 
				+.cls-180 {
			
 
				+  fill: #579659;
			
 
				+}
			
 
				+.cls-181 {
			
 
				+  fill: #3d703d;
			
 
				+}
			
 
				+.cls-182 {
			
 
				+  fill: #66af6b;
			
 
				+}
			
 
				+.cls-183 {
			
 
				+  fill: #518e53;
			
 
				+}
			
 
				+.cls-185 {
			
 
				+  fill: #5edaef;
			
 
				+}
			
 
				+.cls-186 {
			
 
				+  fill: #1eadad;
			
 
				+}
			
 
				+.cls-187 {
			
 
				+  fill: #0c9393;
			
 
				+}
			
 
				+.cls-188 {
			
 
				+  fill: #43c4d1;
			
 
				+}
			
 
				+.cls-189,
			
 
				+.cls-190 {
			
 
				+  fill: #18b0b7;
			
 
				+}
			
 
				+.cls-191,
			
 
				+.cls-196 {
			
 
				+  fill: #c872dd;
			
 
				+}
			
 
				+.cls-192 {
			
 
				+  fill: #9045a8;
			
 
				+}
			
 
				+.cls-193 {
			
 
				+  fill: #793493;
			
 
				+}
			
 
				+.cls-194 {
			
 
				+  fill: #b359c9;
			
 
				+}
			
 
				+.cls-195 {
			
 
				+  fill: #9944ad;
			
 
				+}
			
 
				+
			
 
				+
			
 
				+
			
 
				+g[data-istag="yes"] {
			
 
				+  display: none;
			
 
				+}
			
 
				+
			
 
				+g[data-isface="yes"]{
			
 
				+  cursor: pointer;
			
 
				+}
			
 
				+
			
 
				+
			
 
				+g[data-isid="yes"] {
			
 
				+  &:hover {
			
 
				+    >g[data-isface="yes"]{
			
 
				+      .cls-173, .cls-178{
			
 
				+        fill: #FFD092;
			
 
				+      }
			
 
				+      .cls-191, .cls-196{
			
 
				+        fill: #E2B3EE;
			
 
				+      }
			
 
				+      .cls-171, .cls-172{
			
 
				+        fill: #FFA57D;
			
 
				+      }
			
 
				+      .cls-185{
			
 
				+        fill: #98EFFE;
			
 
				+      }
			
 
				+      .cls-152, .cls-161{
			
 
				+        fill: #598BF6;
			
 
				+      }
			
 
				+      .cls-179, .cls-184{
			
 
				+        fill: #B3EAB9;
			
 
				+      }
			
 
				+    }
			
 
				+    
			
 
				+    g[data-istag="yes"] {
			
 
				+      display: block;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
--- a/src/main.js
+++ b/src/main.js
@@ -0,0 +1,22 @@
 
				+import Vue from 'vue'
			
 
				+import App from './App.vue'
			
 
				+import router from './router'
			
 
				+import browser from "@/utils/browser";
			
 
				+
			
 
				+
			
 
				+Vue.config.productionTip = false
			
 
				+
			
 
				+
			
 
				+Vue.mixin({
			
 
				+  data() {
			
 
				+    return {
			
 
				+      g_isMobile: browser.mobile,
			
 
				+    };
			
 
				+  },
			
 
				+});
			
 
				+
			
 
				+
			
 
				+new Vue({
			
 
				+  router,
			
 
				+  render: h => h(App)
			
 
				+}).$mount('#app')
			
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -0,0 +1,24 @@
 
				+import Vue from 'vue'
			
 
				+import VueRouter from 'vue-router'
			
 
				+import Home from '../views/Home.vue'
			
 
				+
			
 
				+Vue.use(VueRouter)
			
 
				+
			
 
				+const routes = [
			
 
				+  {
			
 
				+    path: '/',
			
 
				+    name: 'Home',
			
 
				+    component: Home
			
 
				+  },
			
 
				+  {
			
 
				+    path: '/iframe/:id',
			
 
				+    name: 'iframe',
			
 
				+    component: () => import('../views/iframe.vue')
			
 
				+  }
			
 
				+]
			
 
				+
			
 
				+const router = new VueRouter({
			
 
				+  routes
			
 
				+})
			
 
				+
			
 
				+export default router
			
--- a/src/utils/browser.js
+++ b/src/utils/browser.js
@@ -0,0 +1,35 @@
 
				+function versions () {
			
 
				+  var u = window.navigator.userAgent
			
 
				+  return {
			
 
				+    // IE内核
			
 
				+    trident: u.indexOf('Trident') > -1,
			
 
				+    // Firefox
			
 
				+    firefox: u.indexOf('Firefox') > -1,
			
 
				+    // edge
			
 
				+    edge: u.indexOf('Edge') > -1,
			
 
				+    // opera内核
			
 
				+    presto: u.indexOf('Presto') > -1,
			
 
				+    // 苹果、谷歌内核
			
 
				+    webKit: u.indexOf('AppleWebKit') > -1,
			
 
				+    // 火狐内核
			
 
				+    gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') === -1,
			
 
				+    // 是否为移动终端
			
 
				+    mobile: /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent),
			
 
				+    // ios终端
			
 
				+    ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
			
 
				+    // android终端或者uc浏览器
			
 
				+    android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
			
 
				+    // 是否为iPhone或者安卓QQ浏览器
			
 
				+    iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1,
			
 
				+    // 是否为iPad
			
 
				+    iPad: u.indexOf('iPad') > -1,
			
 
				+    // 是否为web应用程序，没有头部与底部
			
 
				+    webApp: u.indexOf('Safari') === -1,
			
 
				+    // 是否为微信浏览器
			
 
				+    weixin: ~u.indexOf('MicroMessenger'),
			
 
				+    // 获取浏览器语言
			
 
				+    language: (navigator.browserLanguage || navigator.language).toLowerCase()
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+export default versions()
			
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -0,0 +1,28 @@
 
				+module.exports = {
			
 
				+  copyTextToClipboard: function (text,cb) {
			
 
				+    var textArea = document.createElement('textarea')
			
 
				+    textArea.style.position = 'fixed'
			
 
				+    textArea.style.top = 0
			
 
				+    textArea.style.left = 0
			
 
				+    textArea.style.width = '2em'
			
 
				+    textArea.style.height = '2em'
			
 
				+    textArea.style.padding = 0
			
 
				+    textArea.style.border = 'none'
			
 
				+    textArea.style.outline = 'none'
			
 
				+    textArea.style.boxShadow = 'none'
			
 
				+    textArea.style.background = 'transparent'
			
 
				+    textArea.value = text
			
 
				+
			
 
				+    document.body.appendChild(textArea)
			
 
				+
			
 
				+    textArea.select()
			
 
				+
			
 
				+    try {
			
 
				+      document.execCommand('copy') ? cb('success'):cb('success')
			
 
				+    } catch (err) {
			
 
				+      cb(err)
			
 
				+    }
			
 
				+
			
 
				+    document.body.removeChild(textArea)
			
 
				+  }
			
 
				+}
			
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -0,0 +1,152 @@
 
				+<template>
			
 
				+  <div
			
 
				+    class="home"
			
 
				+    :style="{ backgroundImage: `url(${require(`@/assets/images/bg_pc.jpg`)})` }"
			
 
				+  >
			
 
				+    <!-- <component class="map" :key="cp" :is="cp"/> -->
			
 
				+    
			
 
				+    <vMap class="map" v-if="select==1"/>
			
 
				+    <vMap2 class="map" v-else  />
			
 
				+  
			
 
				+
			
 
				+    <!-- <div
			
 
				+      @click.stop="fActive = false"
			
 
				+      v-if="isMobile && (fActive || tipsActive)"
			
 
				+      class="mask"
			
 
				+    ></div> -->
			
 
				+
			
 
				+
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+// @ is an alias to /src
			
 
				+import map from "@/components/map.vue";
			
 
				+import map2 from "@/components/map2.vue";
			
 
				+
			
 
				+export default {
			
 
				+  name: "Home",
			
 
				+  props:['select'],
			
 
				+  components: {
			
 
				+    vMap: map,
			
 
				+    vMap2: map2,
			
 
				+  },
			
 
				+  data() {
			
 
				+    return {
			
 
				+    };
			
 
				+  },
			
 
				+ 
			
 
				+  computed: {
			
 
				+  },
			
 
				+  mounted() {
			
 
				+    
			
 
				+  },
			
 
				+};
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+.home {
			
 
				+  position: relative;
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  background-size: cover;
			
 
				+  .logo {
			
 
				+    position: absolute;
			
 
				+    left: 30px;
			
 
				+    top: 50px;
			
 
				+    width: 390px;
			
 
				+    z-index: 90;
			
 
				+  }
			
 
				+  .map {
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+    margin: 0;
			
 
				+  }
			
 
				+
			
 
				+}
			
 
				+
			
 
				+@media screen and (max-width: 500px) {
			
 
				+  .home {
			
 
				+    background: none;
			
 
				+    .tips {
			
 
				+      position: fixed;
			
 
				+      width: 88%;
			
 
				+      background: #fff;
			
 
				+      transform: translate(-50%, -50%);
			
 
				+      top: 50%;
			
 
				+      left: 50%;
			
 
				+      border-radius: 4px;
			
 
				+      z-index: 999;
			
 
				+      > div {
			
 
				+        position: relative;
			
 
				+        width: 100%;
			
 
				+        padding: 20px;
			
 
				+        > p {
			
 
				+          font-weight: bold;
			
 
				+          margin-bottom: 10px;
			
 
				+        }
			
 
				+        > ul {
			
 
				+          display: flex;
			
 
				+          flex-wrap: wrap;
			
 
				+          justify-content: space-between;
			
 
				+          > li {
			
 
				+            width: 48%;
			
 
				+            display: flex;
			
 
				+            align-items: center;
			
 
				+            margin: 10px 0;
			
 
				+            > i {
			
 
				+              min-width: 20px;
			
 
				+              height: 20px;
			
 
				+              display: inline-block;
			
 
				+              margin-right: 10px;
			
 
				+            }
			
 
				+          }
			
 
				+        }
			
 
				+        > img {
			
 
				+          position: absolute;
			
 
				+          right: 10px;
			
 
				+          width: 10px;
			
 
				+          top: 10px;
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+    .bg {
			
 
				+      z-index: 0;
			
 
				+      position: fixed;
			
 
				+      width: 100%;
			
 
				+    }
			
 
				+    .logo {
			
 
				+      left: 50%;
			
 
				+      transform: translateX(-50%);
			
 
				+      top: 15px;
			
 
				+      width: 60%;
			
 
				+    }
			
 
				+    .mask {
			
 
				+      width: 100%;
			
 
				+      height: 100%;
			
 
				+      position: fixed;
			
 
				+      left: 0;
			
 
				+      top: 0;
			
 
				+      background: rgba(0, 0, 0, 0.5);
			
 
				+      transition: 0.3s all ease;
			
 
				+      z-index: 98;
			
 
				+    }
			
 
				+    .fold-con {
			
 
				+      position: absolute;
			
 
				+      left: 0;
			
 
				+      bottom: -800px;
			
 
				+      width: 100%;
			
 
				+      transition: 0.3s all ease;
			
 
				+    }
			
 
				+    .fold-active {
			
 
				+      bottom: 0;
			
 
				+      z-index: 99;
			
 
				+      border-radius: 14px 14px 0px 0px;
			
 
				+    }
			
 
				+    .map {
			
 
				+    }
			
 
				+  
			
 
				+ 
			
 
				+  }
			
 
				+}
			
 
				+</style>
			
--- a/src/views/iframe.vue
+++ b/src/views/iframe.vue
@@ -0,0 +1,70 @@
 
				+<template>
			
 
				+  <div class="iframe">
			
 
				+    <ul class="aside">
			
 
				+      <li>
			
 
				+        <img @click="$router.push({name:'Home'})" :src="require('@/assets/images/btn_home.png')" alt="">
			
 
				+      </li>
			
 
				+      <li>
			
 
				+        <img @click="isShowShare = true" :src="require('@/assets/images/btn_share.png')" alt="">
			
 
				+      </li>
			
 
				+    </ul>
			
 
				+    <vShare v-if="isShowShare" @close="isShowShare = false" />
			
 
				+
			
 
				+    <iframe :src="`https://www.4dkankan.com/spc.html?m=${sceneCode}`" frameborder="0"></iframe>
			
 
				+  </div>
			
 
				+</template>
			
 
				+
			
 
				+<script>
			
 
				+import vShare from "@/components/share";
			
 
				+
			
 
				+export default {
			
 
				+  components:{vShare},
			
 
				+  data(){
			
 
				+    return {
			
 
				+      isShowShare: false,
			
 
				+      sceneCode:this.$route.params.id
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+</script>
			
 
				+
			
 
				+<style lang="less" scoped>
			
 
				+.iframe{
			
 
				+  width: 100%;
			
 
				+  height: 100%;
			
 
				+  position: relative;
			
 
				+  .aside{
			
 
				+    position: absolute;
			
 
				+    top: 50%;
			
 
				+    left: 14px;
			
 
				+    transform: translateY(-50%);
			
 
				+    >li{
			
 
				+      cursor: pointer;
			
 
				+      margin: 10px 0;
			
 
				+      width: 60px;
			
 
				+      >img{
			
 
				+        width: 100%;
			
 
				+      }
			
 
				+    }
			
 
				+  }
			
 
				+  >iframe{
			
 
				+    width: 100%;
			
 
				+    height: 100%;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+@media screen and (max-width: 500px) {
			
 
				+  .iframe{
			
 
				+  .aside{
			
 
				+    top: 30px;
			
 
				+    left: 14px;
			
 
				+    transform: none;
			
 
				+    >li{
			
 
				+      margin: 10px 0;
			
 
				+      width: 46px;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
 
				+}
			
 
				+
			
 
				+</style>
			
--- a/vue.config.js
+++ b/vue.config.js
@@ -0,0 +1,3 @@
 
				+module.exports = {
			
 
				+  publicPath: "./"
			
 
				+};