|
|
@@ -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>
|
