UI优化地图功能

src/router/index.js

@@ -30,9 +30,10 @@ import Layout from '@/layout'
 
 // 公共路由（可视化首页头部链接）
 export const constantRoutes = [{
-	path: '/',
-	redirect: 'forest',
-}]
+		path: '/',
+		redirect: 'homePage',
+	}
+]
 
 
 
@@ -42,16 +43,15 @@ export const constantRoutesNew = [{
 		redirect: 'homePage',
 	},
 
-	{
-		//首页
-		path: '/homePage',
-		name: 'homePage',
-		component: () => import('@/views/homePage'),
-		meta: {
-			// title: '水利云图'
-			title: '水务云图'
-		}
-	},
+  {
+    //首页
+    path: '/homePage',
+    name: 'homePage',
+    component: () => import('@/views/homePage'),
+    meta: {
+      title: '首页'
+    }
+  },
 	{
 		//驾驶舱
 		path: '/Cockpit',
@@ -196,4 +196,4 @@ export default new Router({
 		y: 0
 	}),
 	routes: constantRoutesNew
-})
+})

src/views/Cockpit.vue

@@ -1,425 +1,447 @@
 <!--可视化公共模板 林业-->
 <template>
-	<div class="visual-con lifeline-con">
-		<!--主体-->
-		<div class="visual-body">
-			<div class="life-header">
-				<span>四平市城市生命线监管平台</span>
-			</div>
-            <div class="con_left"></div>
-            <div class="con_right">
-                <div class="con_tckz">
-                    <div class="con_tit">图层控制</div>
-                    <div class="con_tckz_div">
-                        <el-tabs v-model="activeName">
-                            <el-tab-pane label="燃气" name="first">
-                                <div class="rq_div tekz_div">
-                                    <p>华生燃气：
-                                        <el-checkbox-group
-                                                v-model="checkedCities1_1">
-                                            <el-checkbox v-for="city in cities1_1" :label="city" :key="city">{{city}}</el-checkbox>
-                                        </el-checkbox-group>
-                                    </p>
-                                    <p>港华燃气：  <el-checkbox-group
-                                            v-model="checkedCities1_2">
-                                        <el-checkbox v-for="city in cities1_2" :label="city" :key="city">{{city}}</el-checkbox>
-                                    </el-checkbox-group></p>
-                                    <p>奥德燃气： <el-checkbox-group
-                                            v-model="checkedCities1_3">
-                                        <el-checkbox v-for="city in cities1_3" :label="city" :key="city">{{city}}</el-checkbox>
-                                    </el-checkbox-group></p>
-                                    <p>润发燃气： <el-checkbox-group
-                                            v-model="checkedCities1_4">
-                                        <el-checkbox v-for="city in cities1_4" :label="city" :key="city">{{city}}</el-checkbox>
-                                    </el-checkbox-group></p>
-                                </div>
-                                <div class="map_btn">
-                                    <span class="map_btn_span on">开挖</span>
-                                    <span class="map_btn_span">测距</span>
-                                    <span class="map_btn_span">测面</span>
-                                    <span class="map_btn_span">测高</span>
-                                    <span class="map_btn_span">填挖方分析</span>
-                                </div>
-                                <a class="map_clear">清除</a>
-                            </el-tab-pane>
-                            <el-tab-pane label="管廊" name="second">
-                                <div class="gl_div tekz_div">
-                                    <p><el-checkbox-group
-                                            v-model="checkedCities2">
-                                        <el-checkbox v-for="city in cities2" :label="city" :key="city">{{city}}</el-checkbox>
-                                    </el-checkbox-group></p>
-                                </div>
-                                <div class="map_btn">
-                                    <span class="map_btn_span on">开挖</span>
-                                    <span class="map_btn_span">测距</span>
-                                    <span class="map_btn_span">测面</span>
-                                    <span class="map_btn_span">测高</span>
-                                    <span class="map_btn_span">填挖方分析</span>
-                                </div>
-                                <a class="map_clear">清除</a>
-                            </el-tab-pane>
-                            <el-tab-pane label="供水" name="three">
-                                <div class="gs_div tekz_div">
-                                    <p><el-checkbox-group
-                                            v-model="checkedCities3">
-                                        <el-checkbox v-for="city in cities3" :label="city" :key="city">{{city}}</el-checkbox>
-                                    </el-checkbox-group></p>
-                                </div>
-                                <div class="map_btn">
-                                    <span class="map_btn_span on">开挖</span>
-                                    <span class="map_btn_span">测距</span>
-                                    <span class="map_btn_span">测面</span>
-                                    <span class="map_btn_span">测高</span>
-                                    <span class="map_btn_span">填挖方分析</span>
-                                </div>
-                                <a class="map_clear">清除</a>
-                            </el-tab-pane>
-                            <el-tab-pane label="排水" name="four">
-                                <div class="ps_div tekz_div">
-                                    <p><el-checkbox-group
-                                            v-model="checkedCities4">
-                                        <el-checkbox v-for="city in cities4" :label="city" :key="city">{{city}}</el-checkbox>
-                                    </el-checkbox-group></p>
-                                </div>
-                                <div class="map_btn">
-                                    <span class="map_btn_span on">开挖</span>
-                                    <span class="map_btn_span">测距</span>
-                                    <span class="map_btn_span">测面</span>
-                                    <span class="map_btn_span">测高</span>
-                                    <span class="map_btn_span">填挖方分析</span>
-                                </div>
-                                <a class="map_clear">清除</a>
-                            </el-tab-pane>
-                            <el-tab-pane label="热力" name="five">
-                                <div class="rl_div tekz_div">
-                                    <p><el-checkbox-group
-                                            v-model="checkedCities5">
-                                        <el-checkbox v-for="city in cities5" :label="city" :key="city">{{city}}</el-checkbox>
-                                    </el-checkbox-group></p>
-                                </div>
-                                <div class="map_btn">
-                                    <span class="map_btn_span on">开挖</span>
-                                    <span class="map_btn_span">测距</span>
-                                    <span class="map_btn_span">测面</span>
-                                    <span class="map_btn_span">测高</span>
-                                    <span class="map_btn_span">填挖方分析</span>
-                                </div>
-                                <a class="map_clear">清除</a>
-                            </el-tab-pane>
-                        </el-tabs>
-                    </div>
+  <div class="visual-con lifeline-con">
+    <!--主体-->
+    <div class="visual-body">
+      <div class="life-header">
+        <span>四平市城市生命线监管平台</span>
+      </div>
+      <div class="con_left"></div>
+      <div class="con_right">
+        <div class="con_tckz">
+          <div class="con_tit">图层控制</div>
+          <div class="con_tckz_div">
+            <el-tabs v-model="activeName">
+              <el-tab-pane label="燃气" name="first">
+                <div class="rq_div tekz_div">
+                  <p>华生燃气：
+                    <el-checkbox-group
+                      v-model="checkedCities1_1">
+                      <el-checkbox v-for="city in cities1_1" :label="city" :key="city">{{city}}</el-checkbox>
+                    </el-checkbox-group>
+                  </p>
+                  <p>港华燃气：  <el-checkbox-group
+                    v-model="checkedCities1_2">
+                    <el-checkbox v-for="city in cities1_2" :label="city" :key="city">{{city}}</el-checkbox>
+                  </el-checkbox-group></p>
+                  <p>奥德燃气： <el-checkbox-group
+                    v-model="checkedCities1_3">
+                    <el-checkbox v-for="city in cities1_3" :label="city" :key="city">{{city}}</el-checkbox>
+                  </el-checkbox-group></p>
+                  <p>润发燃气： <el-checkbox-group
+                    v-model="checkedCities1_4">
+                    <el-checkbox v-for="city in cities1_4" :label="city" :key="city">{{city}}</el-checkbox>
+                  </el-checkbox-group></p>
+                </div>
+                <div class="map_btn">
+                  <button class="map_btn_span on" @click="showExcavation()">开挖</button>
+                  <button class="map_btn_span" @click="choseMeasuringDistance()">测距</button>
+                  <button class="map_btn_span" @click="choseMeasuringArea()">测面</button>
+                  <button class="map_btn_span" @click="choseMeasuringHeight()">测高</button>
+                  <button class="map_btn_span" @click="showExcavationAnalyze()">填挖方分析</button>
+                </div>
+                <a class="map_clear" @click="clearAll()">清除</a>
+              </el-tab-pane>
+              <el-tab-pane label="管廊" name="second">
+                <div class="gl_div tekz_div">
+                  <p><el-checkbox-group
+                    v-model="checkedCities2">
+                    <el-checkbox v-for="city in cities2" :label="city" :key="city">{{city}}</el-checkbox>
+                  </el-checkbox-group></p>
+                </div>
+                <div class="map_btn">
+                  <button class="map_btn_span on" @click="showExcavation()">开挖</button>
+                  <button class="map_btn_span" @click="choseMeasuringDistance()">测距</button>
+                  <button class="map_btn_span" @click="choseMeasuringArea()">测面</button>
+                  <button class="map_btn_span" @click="choseMeasuringHeight()">测高</button>
+                  <button class="map_btn_span" @click="showExcavationAnalyze()">填挖方分析</button>
+                </div>
+                <a class="map_clear" @click="clearAll()">清除</a>
+              </el-tab-pane>
+              <el-tab-pane label="供水" name="three">
+                <div class="gs_div tekz_div">
+                  <p><el-checkbox-group
+                    v-model="checkedCities3">
+                    <el-checkbox v-for="city in cities3" :label="city" :key="city">{{city}}</el-checkbox>
+                  </el-checkbox-group></p>
+                </div>
+                <div class="map_btn">
+                  <button class="map_btn_span on" @click="showExcavation()">开挖</button>
+                  <button class="map_btn_span" @click="choseMeasuringDistance()">测距</button>
+                  <button class="map_btn_span" @click="choseMeasuringArea()">测面</button>
+                  <button class="map_btn_span" @click="choseMeasuringHeight()">测高</button>
+                  <button class="map_btn_span" @click="showExcavationAnalyze()">填挖方分析</button>
+                </div>
+                <a class="map_clear" @click="clearAll()">清除</a>
+              </el-tab-pane>
+              <el-tab-pane label="排水" name="four">
+                <div class="ps_div tekz_div">
+                  <p><el-checkbox-group
+                    v-model="checkedCities4">
+                    <el-checkbox v-for="city in cities4" :label="city" :key="city">{{city}}</el-checkbox>
+                  </el-checkbox-group></p>
+                </div>
+                <div class="map_btn">
+                  <button class="map_btn_span on" @click="showExcavation()">开挖</button>
+                  <button class="map_btn_span" @click="choseMeasuringDistance()">测距</button>
+                  <button class="map_btn_span" @click="choseMeasuringArea()">测面</button>
+                  <button class="map_btn_span" @click="choseMeasuringHeight()">测高</button>
+                  <button class="map_btn_span" @click="showExcavationAnalyze()">填挖方分析</button>
+                </div>
+                <a class="map_clear" @click="clearAll()">清除</a>
+              </el-tab-pane>
+              <el-tab-pane label="热力" name="five">
+                <div class="rl_div tekz_div">
+                  <p><el-checkbox-group
+                    v-model="checkedCities5">
+                    <el-checkbox v-for="city in cities5" :label="city" :key="city">{{city}}</el-checkbox>
+                  </el-checkbox-group></p>
+                </div>
+                <div class="map_btn">
+                  <button class="map_btn_span on" @click="showExcavation()">开挖</button>
+                  <button class="map_btn_span" @click="choseMeasuringDistance()">测距</button>
+                  <button class="map_btn_span" @click="choseMeasuringArea()">测面</button>
+                  <button class="map_btn_span" @click="choseMeasuringHeight()">测高</button>
+                  <button class="map_btn_span" @click="showExcavationAnalyze()">填挖方分析</button>
+                </div>
+                <a class="map_clear" @click="clearAll()">清除</a>
+              </el-tab-pane>
+            </el-tabs>
+          </div>
 
 
-                </div>
-            </div>
+        </div>
+      </div>
 
-			<!-- 地图 -->
-			<supermap ref="supermap" style="width: 100%;height: 100vh;">
-			</supermap>
+      <!-- 地图 -->
+      <supermap ref="supermap" style="width: 100%;height: 100vh;">
+      </supermap>
 
 
-			<!-- 底部按钮 -->
-			<div class="life-btm-btn">
-				<div class="btn-span on">
-					<span>驾驶舱</span>
-				</div>
-				<div class="btn-span">
-					<span>监测系统</span>
-				</div>
-				<div class="btn-span">
-					<span>风险清单</span>
-				</div>
-				<div class="btn-span">
-					<span>数据库</span>
-				</div>
-				<div class="btn-span">
-					<span>监管平台</span>
-				</div>
-				<div class="btn-span">
-					<span>运管体系</span>
-				</div>
-			</div>
+      <!-- 底部按钮 -->
+      <div class="life-btm-btn">
+        <div class="btn-span on">
+          <span>驾驶舱</span>
+        </div>
+        <div class="btn-span">
+          <span>监测系统</span>
+        </div>
+        <div class="btn-span">
+          <span>风险清单</span>
+        </div>
+        <div class="btn-span">
+          <span>数据库</span>
+        </div>
+        <div class="btn-span">
+          <span>监管平台</span>
+        </div>
+        <div class="btn-span">
+          <span>运管体系</span>
+        </div>
+      </div>
 
-		</div>
-	</div>
+    </div>
+  </div>
 </template>
 
 <script>
-	import Cookies from 'js-cookie'
-	import supermap from '@/components/supermap-2.5d' //超图
-	import {
-		getUserProfile
-	} from "@/api/system/user";
+import Cookies from 'js-cookie'
+import supermap from '@/components/supermap-2.5d' //超图
+import {
+  getUserProfile
+} from "@/api/system/user";
 
-	import '../assets/styles/hz_body.css';
+import '../assets/styles/hz_body.css';
 
-	import {
-		selectConfigKey
-	} from "@/api/system/config";
-	let echarts = require('echarts')
-    const cityOptions1_1 = ['企业', '厂站', '管网'];
-    const cityOptions1_2 = ['企业', '厂站', '管网'];
-    const cityOptions1_3 = ['企业', '厂站', '管网'];
-    const cityOptions1_4 = ['企业', '厂站', '管网'];
-    const cityOptions2 = ['企业',  '管网'];
-    const cityOptions3 = ['企业',  '供水'];
-    const cityOptions4 = ['企业',  '合流','污水','雨水'];
-    const cityOptions5 = ['企业',  '一次网','二次网','电厂'];
-	export default {
-		components: {
-			supermap,
-		},
-		metaInfo() {
-			return {
-				title: '全域视联态势感知平台',
-				meta: [{
-						charset: "utf-8"
-					},
-					{
-						name: "viewport",
-						content: "width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
-					}
-				]
-			}
-		},
-		created() {
+import {
+  selectConfigKey
+} from "@/api/system/config";
+let echarts = require('echarts')
+const cityOptions1_1 = ['企业', '厂站', '管网'];
+const cityOptions1_2 = ['企业', '厂站', '管网'];
+const cityOptions1_3 = ['企业', '厂站', '管网'];
+const cityOptions1_4 = ['企业', '厂站', '管网'];
+const cityOptions2 = ['企业',  '管网'];
+const cityOptions3 = ['企业',  '供水'];
+const cityOptions4 = ['企业',  '合流','污水','雨水'];
+const cityOptions5 = ['企业',  '一次网','二次网','电厂'];
+export default {
+  components: {
+    supermap,
+  },
+  metaInfo() {
+    return {
+      title: '全域视联态势感知平台',
+      meta: [{
+        charset: "utf-8"
+      },
+        {
+          name: "viewport",
+          content: "width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+        }
+      ]
+    }
+  },
+  created() {
 
-		},
-		mounted() {
-			// 初始化地图数据
-			this.getSuperMapUrl();
-			setTimeout(() => {
-				this.title = '全域视联态势感知平台'
-			}, 1000)
-		},
-		data() {
-			return {
-				input: '',
-                activeName:'first',
-                checkedCities1_1: [],
-                checkedCities1_2: [],
-                checkedCities1_3: [],
-                checkedCities1_4: [],
-                checkedCities2: [],
-                checkedCities3: [],
-                checkedCities4: [],
-                checkedCities5: [],
-                cities1_1: cityOptions1_1,
-                cities1_2: cityOptions1_2,
-                cities1_3: cityOptions1_3,
-                cities1_4: cityOptions1_4,
-                cities2: cityOptions2,
-                cities3: cityOptions3,
-                cities4: cityOptions4,
-                cities5: cityOptions5,
-			}
-		},
-		methods: {
-			getSuperMapUrl() {
-				getUserProfile().then(response => {
-					let mapDeptId = response.mapDeptId
-					let num = 0;
-					if (mapDeptId == "365") {
-						num = 0;
-					} else if (mapDeptId == "369") {
-						num = 1;
-					} else if (mapDeptId == "371") {
-						num = 2;
-					} else if (mapDeptId == "373") {
-						num = 3;
-					} else if (mapDeptId == "372") {
-						num = 4;
-					} else if (mapDeptId == "370") {
-						num = 5;
-					}
-					this.$refs.supermap.removeAllviewer(mapDeptId, -1);
-				});
-			},
-            handleClick(tab, event) {
-                console.log(tab, event);
-            }
-		},
-	}
+  },
+  mounted() {
+    // 初始化地图数据
+    this.getSuperMapUrl();
+    setTimeout(() => {
+      this.title = '全域视联态势感知平台'
+    }, 1000)
+  },
+  data() {
+    return {
+      input: '',
+      activeName:'first',
+      checkedCities1_1: [],
+      checkedCities1_2: [],
+      checkedCities1_3: [],
+      checkedCities1_4: [],
+      checkedCities2: [],
+      checkedCities3: [],
+      checkedCities4: [],
+      checkedCities5: [],
+      cities1_1: cityOptions1_1,
+      cities1_2: cityOptions1_2,
+      cities1_3: cityOptions1_3,
+      cities1_4: cityOptions1_4,
+      cities2: cityOptions2,
+      cities3: cityOptions3,
+      cities4: cityOptions4,
+      cities5: cityOptions5,
+    }
+  },
+  methods: {
+    getSuperMapUrl() {
+      getUserProfile().then(response => {
+        let mapDeptId = response.mapDeptId
+        let num = 0;
+        if (mapDeptId == "365") {
+          num = 0;
+        } else if (mapDeptId == "369") {
+          num = 1;
+        } else if (mapDeptId == "371") {
+          num = 2;
+        } else if (mapDeptId == "373") {
+          num = 3;
+        } else if (mapDeptId == "372") {
+          num = 4;
+        } else if (mapDeptId == "370") {
+          num = 5;
+        }
+        this.$refs.supermap.removeAllviewer(mapDeptId, -1);
+      });
+    },
+    //开挖
+    showExcavation(){
+      this.$refs.supermap.excavation();
+    },
+    //开挖
+    showExcavationAnalyze(){
+      this.$refs.supermap.excavationAnalyze();
+    },
+    //测距
+    choseMeasuringDistance(){
+      this.$refs.supermap.choseMeasuringDistance();
+    },
+    //测面
+    choseMeasuringArea(){
+      this.$refs.supermap.choseMeasuringArea();
+    },
+    //测高
+    choseMeasuringHeight(){
+      this.$refs.supermap.choseMeasuringHeight();
+    },
+    //清除
+    clearAll(){
+      this.$refs.supermap.closeMeasuringAll();
+      this.$refs.supermap.closeExcavationAll();
+    }
+  },
+}
 </script>
 <style>
-    .el-tabs__item{
-        border-radius: 25px;
-        height: 33px;
-        line-height: 33px;
-    }
-    .el-tabs__nav-next, .el-tabs__nav-prev{
-        line-height: 33px;
+.el-tabs__item{
+  border-radius: 25px;
+  height: 33px;
+  line-height: 33px;
+}
+.el-tabs__nav-next, .el-tabs__nav-prev{
+  line-height: 33px;
+}
+.el-tabs__item.is-active {
+  background: -webkit-gradient(linear, right top, left top, from(#051d2b4f), color-stop(#006ec861), to(#051d2b96));
+  background: linear-gradient(to left, #051d2b4f, #006ec861, #051d2b96);
+  -webkit-box-shadow: rgba(5, 103, 194, 0.8) 0px 0px 15px inset;
+  box-shadow: rgb(5 103 194 / 80%) 0px 0px 15px inset;
+}
+.el-checkbox{
+  margin-right: 15px!important;
+}
+.el-checkbox__inner{
+  border: 1px solid #0fc5f2;
+  width: 13px;
+  height: 13px;
+  background: none;
+}
+.el-checkbox__label {
+  color: #b9e4ef;
+}
+.el-checkbox__inner::after{
+  border-color:#0fc5f2;
+}
+.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  border-color: #0fc0ee;
+  background: none;
+}
+.el-checkbox__input.is-checked+.el-checkbox__label {
+  color: #0fc5f2;
+}
+.el-checkbox__input.is-disabled .el-checkbox__inner {
+  background-color: #628c91;
+  border-color: #407983;
+  cursor: not-allowed;
+}
+</style>
+<style rel="stylesheet/scss" lang="scss" scoped>
+@import '@/assets/styles/base.scss';
+
+.lifeline-con {
+  /*background: url('../assets/index_img/b-bg.jpg') no-repeat;*/
+
+  .life-header {
+    width: 100%;
+    height: 109px;
+    background: url('../assets/index_img/header-img.png') no-repeat center;
+    position: fixed;
+    top: 0;
+    font-family: pmzd;
+    font-size: 42px;
+    text-align: center;
+    line-height: 80px;
+    animation: headermove 1s ease-out;
+			z-index: 10000;
+
+    span {
+      line-height: 22px;
+      font-weight: 400;
+      color: #EFF8FC;
+      background: linear-gradient(0deg, rgba(119, 186, 255, 1), rgba(255, 255, 255, 1));
+      opacity: 1;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
     }
-    .el-tabs__item.is-active {
-        background: -webkit-gradient(linear, right top, left top, from(#051d2b4f), color-stop(#006ec861), to(#051d2b96));
-        background: linear-gradient(to left, #051d2b4f, #006ec861, #051d2b96);
-        -webkit-box-shadow: rgba(5, 103, 194, 0.8) 0px 0px 15px inset;
-        box-shadow: rgb(5 103 194 / 80%) 0px 0px 15px inset;
+
+  }
+
+  //底部按钮5个
+  .life-btm-btn{
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: url("../assets/images/sixZ/btmbg.png") no-repeat bottom;
+    background-size: 100% 25%;
+    .btn-span:nth-child(1){
+      animation: btnmove 1s ;
     }
-    .el-checkbox{
-        margin-right: 15px!important;
+    .btn-span:nth-child(2){
+      animation: btnmove 1.2s ;
     }
-    .el-checkbox__inner{
-        border: 1px solid #0fc5f2;
-        width: 13px;
-        height: 13px;
-        background: none;
+    .btn-span:nth-child(3){
+      animation: btnmove 1.4s ;
     }
-    .el-checkbox__label {
-        color: #b9e4ef;
+    .btn-span:nth-child(4){
+      animation: btnmove 1.6s ;
     }
-    .el-checkbox__inner::after{
-        border-color:#0fc5f2;
+    .btn-span:nth-child(5){
+      animation: btnmove 1.8s ;
     }
-    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
-        border-color: #0fc0ee;
-        background: none;
+    .btn-span{
+      width: 166px;
+      height: 50px;
+      background:url('../assets/index_img/btm-btn.png') no-repeat center;
+      text-align: center;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin: 10px 5px;
+      transition: all 0.3s ease-in-out ;
+      cursor: pointer;
+      span{
+        font-size: 20px;
+        color: #EFF2FF;
+        font-family: ysbth;
+        line-height: 40px;
+        background: linear-gradient(0deg, rgba(49,190,255,1),  rgba(239,252,254,1), rgba(239,252,254,1));
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+      }
     }
-    .el-checkbox__input.is-checked+.el-checkbox__label {
-        color: #0fc5f2;
+    .btn-span:hover{
+      filter: brightness(170%) hue-rotate(-20deg);
+      transform: translateY(-10px);
     }
-    .el-checkbox__input.is-disabled .el-checkbox__inner {
-        background-color: #628c91;
-        border-color: #407983;
-        cursor: not-allowed;
+    .btn-span.on{
+      filter: brightness(170%) hue-rotate(-20deg);
+      box-shadow: none;
     }
-</style>
-<style rel="stylesheet/scss" lang="scss" scoped>
-	@import '@/assets/styles/base.scss';
+  }
+  .btm-btn2{
+    position: absolute;
+    bottom: 80px;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    animation: btmmove2 1s ease-out;
+    .btn-span2{
+      margin: 0 10px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      transition: all 0.3s;
 
-	.lifeline-con {
-		/*background: url('../assets/index_img/b-bg.jpg') no-repeat;*/
-
-		.life-header {
-			width: 100%;
-			height: 109px;
-			background: url('../assets/index_img/header-img.png') no-repeat center;
-			position: fixed;
-			top: 0;
-			font-family: pmzd;
-			font-size: 42px;
-			text-align: center;
-			line-height: 80px;
-			animation: headermove 1s ease-out;
-			z-index: 10000;
-
-			span {
-				line-height: 22px;
-				font-weight: 400;
-				color: #EFF8FC;
-				background: linear-gradient(0deg, rgba(119, 186, 255, 1), rgba(255, 255, 255, 1));
-				opacity: 1;
-				-webkit-background-clip: text;
-				-webkit-text-fill-color: transparent;
-			}
-
-		}
-
-		//底部按钮5个
-	    .life-btm-btn{
-			position: absolute;
-			bottom: 0;
-			width: 100%;
-			display: flex;
-		    justify-content: center;
-			align-items: center;
-            background: url("../assets/images/sixZ/btmbg.png") no-repeat bottom;
-            background-size: 100% 25%;
-			.btn-span:nth-child(1){
-				animation: btnmove 1s ;
-			}
-			.btn-span:nth-child(2){
-				animation: btnmove 1.2s ;
-			}
-			.btn-span:nth-child(3){
-				animation: btnmove 1.4s ;
-			}
-			.btn-span:nth-child(4){
-				animation: btnmove 1.6s ;
-			}
-			.btn-span:nth-child(5){
-				animation: btnmove 1.8s ;
-			}
-			.btn-span{
-				width: 166px;
-				height: 50px;
-				background:url('../assets/index_img/btm-btn.png') no-repeat center;
-				text-align: center;
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				margin: 10px 5px;
-				transition: all 0.3s ease-in-out ;
-				cursor: pointer;
-				span{
-					font-size: 20px;
-					color: #EFF2FF;
-					font-family: ysbth;
-					line-height: 40px;
-					background: linear-gradient(0deg, rgba(49,190,255,1),  rgba(239,252,254,1), rgba(239,252,254,1));
-					-webkit-background-clip: text;
-					-webkit-text-fill-color: transparent;
-				}
-			}
-			.btn-span:hover{
-				filter: brightness(170%) hue-rotate(-20deg);
-				transform: translateY(-10px);
-			}
-			.btn-span.on{
-				filter: brightness(170%) hue-rotate(-20deg);
-                box-shadow: none;
-			}
-		}
-		.btm-btn2{
-			position: absolute;
-			bottom: 80px;
-			width: 100%;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			cursor: pointer;
-			animation: btmmove2 1s ease-out;
-			.btn-span2{
-				margin: 0 10px;
-				display: flex;
-				flex-direction: column;
-				align-items: center;
-				transition: all 0.3s;
-
-				img{
-					width: 150px;
-					height: 100px;
-				}
-				span{
-					font-size: 20px;
-					color: #EFF2FF;
-					font-family: ysbth;
-					line-height: 40px;
-					background: linear-gradient(0deg, rgba(49,190,255,1),  rgba(239,252,254,1), rgba(239,252,254,1));
-					-webkit-background-clip: text;
-					-webkit-text-fill-color: transparent;
-					margin-top: -10px;
-				}
-			}
-			.btn-span2:hover{
-				filter: brightness(170%) hue-rotate(-20deg);
-				transform: translateY(-10px);
-			}
-		}
+      img{
+        width: 150px;
+        height: 100px;
+      }
+      span{
+        font-size: 20px;
+        color: #EFF2FF;
+        font-family: ysbth;
+        line-height: 40px;
+        background: linear-gradient(0deg, rgba(49,190,255,1),  rgba(239,252,254,1), rgba(239,252,254,1));
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        margin-top: -10px;
+      }
+    }
+    .btn-span2:hover{
+      filter: brightness(170%) hue-rotate(-20deg);
+      transform: translateY(-10px);
+    }
+  }
 
 
-	}
-    .con_right{
-        position: absolute;
-        right:20px;
-        top:150px;
-        z-index: 99;
-        width: 350px;
-        background: rgba(3,16,27,0.6);
-        .con_tckz{
-.con_tckz_div{
-    margin: 0px 15px;
-    .tekz_div{
+}
+.con_right{
+  position: absolute;
+  right:20px;
+  top:150px;
+  z-index: 99;
+  width: 350px;
+  background: rgba(3,16,27,0.6);
+  .con_tckz{
+    .con_tckz_div{
+      margin: 0px 15px;
+      .tekz_div{
         font-size: 14px;
         text-align: left;
         color: #fff;
@@ -427,14 +449,14 @@
         border-bottom: 1px dashed #4a5958;
         margin-bottom: 15px;
         p{
-            height: 40px;
-            line-height: 40px;
-            padding-left: 15px;
-            display: flex;
-            flex-direction: row;
+          height: 40px;
+          line-height: 40px;
+          padding-left: 15px;
+          display: flex;
+          flex-direction: row;
         }
-    }
-    .map_btn span{
+      }
+      .map_btn button{
         display: inline-block;
         background: url("../assets/images/sixZ/sixzbtn1.png") no-repeat center;
         background-size: 100% 100%;
@@ -443,13 +465,13 @@
         font-size: 14px;
         color: #fff;
         cursor: pointer;
-    }
-    .map_btn span.on{
+      }
+      .map_btn button.on{
         background: url("../assets/images/sixZ/sixzbtn1_on.png") no-repeat center;
         background-size: 100% 100%;
         box-shadow: none;
-    }
-    .map_clear{
+      }
+      .map_clear{
         background: #09335f;
         color: #a4bfe2;
         font-size: 14px;
@@ -457,25 +479,25 @@
         margin: 20px 0px;
         display: inline-block;
         padding: 6px 18px;
-    }
-    .map_clear:hover{
+      }
+      .map_clear:hover{
         background: #0a5184;
+      }
     }
-}
 
-        }
+  }
 
-    }
+}
 
-    .con_tit{
-        font-size: 18px;
-        font-family: 'ysbth';
-        color: #fff;
-        padding-left: 30px;
-        background: url("../assets/images/sixZ/sixztit.png") no-repeat left;
-        background-size: 100% 100%;
-        height: 35px;
-        line-height: 35px;
-        margin-bottom: 15px;
-    }
+.con_tit{
+  font-size: 18px;
+  font-family: 'ysbth';
+  color: #fff;
+  padding-left: 30px;
+  background: url("../assets/images/sixZ/sixztit.png") no-repeat left;
+  background-size: 100% 100%;
+  height: 35px;
+  line-height: 35px;
+  margin-bottom: 15px;
+}
 </style>