|
|
@@ -1,52 +1,51 @@
|
|
|
<template>
|
|
|
- <div class="index">
|
|
|
- <div class="box-line box-line-left">
|
|
|
- <!-- <img src="@/assets/img/index/index-line.png" alt="" /> -->
|
|
|
- <div class="putImg" id="main" style="width: 32px; height: 1348px"></div>
|
|
|
- </div>
|
|
|
- <div class="box-line box-line-right">
|
|
|
- <!-- <img src="@/assets/img/index/index-line.png" alt="" /> -->
|
|
|
- <div class="putImg" id="main" style="width: 32px; height: 1348px"></div>
|
|
|
- </div>
|
|
|
- <div class="backPlateBox center_map" v-show="mapshow">
|
|
|
- <MapBox></MapBox>
|
|
|
- </div>
|
|
|
- <!-- <div class="backPlateBox addressbox" v-show="!mapshow">
|
|
|
+ <div class="index">
|
|
|
+ <div class="box-line box-line-left">
|
|
|
+ <!-- <img src="@/assets/img/index/index-line.png" alt="" /> -->
|
|
|
+ <div class="putImg" id="main" style="width: 32px; height: 1348px"></div>
|
|
|
+ </div>
|
|
|
+ <div class="box-line box-line-right">
|
|
|
+ <!-- <img src="@/assets/img/index/index-line.png" alt="" /> -->
|
|
|
+ <div class="putImg" id="main" style="width: 32px; height: 1348px"></div>
|
|
|
+ </div>
|
|
|
+ <div class="backPlateBox center_map" v-show="mapshow">
|
|
|
+ <MapBox></MapBox>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="backPlateBox addressbox" v-show="!mapshow">
|
|
|
<AddressBox @set_adresinfo="set_adresinfo"></AddressBox>
|
|
|
</div> -->
|
|
|
|
|
|
- <div class="backPlateBox box1" v-if='mapshow==1'>
|
|
|
- <BackgroundPlate title="概况统计" :url="Backimg1">
|
|
|
- <TheBox1 :overviewStatisticsData="box1_data" v-if="box2_show" />
|
|
|
- </BackgroundPlate>
|
|
|
- </div>
|
|
|
- <div class="backPlateBox box1" v-else>
|
|
|
- <BackgroundPlate title="概况统计" :url="Backimg1">
|
|
|
- <TheBox1_2 :overviewStatisticsData="box1_data" v-if="box2_show" />
|
|
|
- </BackgroundPlate>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="backPlateBox box2">
|
|
|
- <BackgroundPlate title="长者趋势统计" :url="Backimg2">
|
|
|
- <TheBox2 :box2_data="box2_data" v-if="box2_show" />
|
|
|
- </BackgroundPlate>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="backPlateBox box3">
|
|
|
- <!-- <BackgroundPlate title="年龄及性别统计" :url="Backimg3"> -->
|
|
|
- <BackgroundPlate title="病种人数统计" :url="Backimg3">
|
|
|
- <TheBox3 :box3_data="box3_data" v-if="box3_show" @set_listdata="set_dataarr" :id="'yuj' + Math.random()" />
|
|
|
-
|
|
|
- </BackgroundPlate>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- <div class="backPlateBox boxwidthele">
|
|
|
+ <div class="backPlateBox box1" v-if="mapshow == 1">
|
|
|
+ <BackgroundPlate title="概况统计" :url="Backimg1">
|
|
|
+ <TheBox1 :overviewStatisticsData="box1_data" v-if="box2_show" />
|
|
|
+ </BackgroundPlate>
|
|
|
+ </div>
|
|
|
+ <div class="backPlateBox box1" v-else>
|
|
|
+ <BackgroundPlate title="概况统计" :url="Backimg1">
|
|
|
+ <TheBox1_2 :overviewStatisticsData="box1_data" v-if="box2_show" />
|
|
|
+ </BackgroundPlate>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="backPlateBox box2">
|
|
|
+ <BackgroundPlate title="长者趋势统计" :url="Backimg2">
|
|
|
+ <TheBox2 :box2_data="box2_data" v-if="box2_show" />
|
|
|
+ </BackgroundPlate>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="backPlateBox box3">
|
|
|
+ <!-- <BackgroundPlate title="年龄及性别统计" :url="Backimg3"> -->
|
|
|
+ <BackgroundPlate title="病种人数统计" :url="Backimg3">
|
|
|
+ <TheBox3 :box3_data="box3_data" v-if="box3_show" @set_listdata="set_dataarr" :id="'yuj' + Math.random()" />
|
|
|
+ </BackgroundPlate>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- <div class="backPlateBox boxwidthele">
|
|
|
<BackgroundPlate title="海珠颐年养老" :url="Backimg8">
|
|
|
<text class="" @click="jump_detialfun"> 123661</text>
|
|
|
</BackgroundPlate>
|
|
|
</div> -->
|
|
|
|
|
|
- <!-- <div class="backPlateBox box4">
|
|
|
+ <!-- <div class="backPlateBox box4">
|
|
|
<BackgroundPlate title="护理级别统计" :url="Backimg4">
|
|
|
<TheBox4 />
|
|
|
</BackgroundPlate>
|
|
|
@@ -57,369 +56,366 @@
|
|
|
<TheBox5 />
|
|
|
</BackgroundPlate>
|
|
|
</div> -->
|
|
|
- <div class="backPlateBox right_router" >
|
|
|
- <RouterView @dow_map="donw_mappop" :right_data="right_data" v-if="right_show" />
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="backPlateBox box6" v-show="mapshow" >
|
|
|
- <BackgroundPlate title="户籍地统计" :url="Backimg7">
|
|
|
- <TheBox6 :box6_data="box6_data" v-if="box6_show" />
|
|
|
- </BackgroundPlate>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="backPlateBox box7" v-if="mapshow" >
|
|
|
- <BackgroundPlate title="近6个月入住统计" :url="Backimg6">
|
|
|
- <TheBox7 :box7_data="box7_data" v-if="box7_show" />
|
|
|
- </BackgroundPlate>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="backPlateBox box8" v-if="mapshow" >
|
|
|
- <BackgroundPlate title="业务统计" :url="Backimg5">
|
|
|
- <TheBox8 :businessStatisticsDats="box8_data" v-if="box2_show" />
|
|
|
- </BackgroundPlate>
|
|
|
- </div>
|
|
|
- <!-- <div class="backPlateBox mapbox" v-if="!mapshow">
|
|
|
+ <div class="backPlateBox right_router">
|
|
|
+ <RouterView @dow_map="donw_mappop" :right_data="right_data" v-if="right_show" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="backPlateBox box6" v-show="mapshow">
|
|
|
+ <BackgroundPlate title="户籍地统计" :url="Backimg7">
|
|
|
+ <TheBox6 :box6_data="box6_data" v-if="box6_show" />
|
|
|
+ </BackgroundPlate>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="backPlateBox box7" v-if="mapshow">
|
|
|
+ <BackgroundPlate title="近6个月入住统计" :url="Backimg6">
|
|
|
+ <TheBox7 :box7_data="box7_data" v-if="box7_show" />
|
|
|
+ </BackgroundPlate>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="backPlateBox box8" v-if="mapshow">
|
|
|
+ <BackgroundPlate title="业务统计" :url="Backimg5">
|
|
|
+ <TheBox8 :businessStatisticsDats="box8_data" v-if="box2_show" />
|
|
|
+ </BackgroundPlate>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="backPlateBox mapbox" v-if="!mapshow">
|
|
|
<ShowMap @dow_map="donw_mappop" :adres_value="adres_value"></ShowMap>
|
|
|
</div> -->
|
|
|
- </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import BackgroundPlate from "@/components/BackgroundPlate/BackgroundPlate.vue";
|
|
|
-import TheBox1 from "./components/box1.vue";
|
|
|
-import TheBox1_2 from "./components/box1_2.vue";
|
|
|
-import TheBox2 from "./components/box2.vue";
|
|
|
-import TheBox3 from "./components/box3.vue";
|
|
|
-
|
|
|
-import EchartBox from "./components/echart_box.vue";
|
|
|
-import TheBox4 from "./components/box4.vue";
|
|
|
-import TheBox5 from "./components/box5.vue";
|
|
|
-import TheBox6 from "./components/box6.vue";
|
|
|
-import TheBox7 from "./components/box7.vue";
|
|
|
-import TheBox8 from "./components/box8.vue";
|
|
|
-import MapBox from "./components/map.vue";
|
|
|
-import AddressBox from "./components/addressbox.vue";
|
|
|
-import Backimg1 from "../../assets/img/index/index_bock_back1.png";
|
|
|
-import Backimg2 from "../../assets/img/index/index_bock_back2.png";
|
|
|
-import Backimg3 from "../../assets/img/index/index_bock_back3.png";
|
|
|
-import Backimg4 from "../../assets/img/index/index_bock_back4.png";
|
|
|
-import Backimg5 from "../../assets/img/index/index_bock_back5.png";
|
|
|
-import Backimg6 from "../../assets/img/index/index_bock_back6.png";
|
|
|
-import Backimg7 from "../../assets/img/index/index_bock_back7.png";
|
|
|
-import Backimg8 from "../../assets/img/index/index_bock_centerbottom.png";
|
|
|
-
|
|
|
-import { overviewStatisticsAPI } from "@/api/index/index.js";
|
|
|
-
|
|
|
-import { onMounted, defineProps, ref, nextTick } from "vue";
|
|
|
-import { useMechanismStore } from "@/store/index.js";
|
|
|
-const store = useMechanismStore();
|
|
|
-const mapshow = ref(true);
|
|
|
-const box1_data = ref({});
|
|
|
-const box2_data = ref({});
|
|
|
-const box3_data = ref({});
|
|
|
-const box6_data = ref({});
|
|
|
-const box7_data = ref({});
|
|
|
-const box8_data = ref({});
|
|
|
-const right_data = ref({});
|
|
|
-const box2_show = ref(false);
|
|
|
-const box3_show = ref(false);
|
|
|
-const box6_show = ref(false);
|
|
|
-const box7_show = ref(false);
|
|
|
-const box8_show = ref(false);
|
|
|
-const right_show = ref(false);
|
|
|
-
|
|
|
-
|
|
|
-const adres_value = ref({});
|
|
|
-const donw_mappop = (res) => {
|
|
|
- if(res==1){
|
|
|
- mapshow.value = 1;
|
|
|
- box2_show.value = false
|
|
|
- overviewStatistics()
|
|
|
- }else{
|
|
|
- box2_show.value = false
|
|
|
- mapshow.value = 0;
|
|
|
- console.log(res.elderlyTrendsYearBarChart)
|
|
|
- box1_data.value=res.overviewSummary
|
|
|
- box2_data.value=res.elderlyTrendsYearBarChart
|
|
|
- // box3_data.value=res.diseaseType
|
|
|
- setTimeout(() => {
|
|
|
- box2_show.value = true
|
|
|
- }, 100);
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
-onMounted(() => {
|
|
|
- // GroupTenant();
|
|
|
- store.setRoomDetail(false);
|
|
|
- overviewStatistics();
|
|
|
-});
|
|
|
-
|
|
|
-function overviewStatistics() {
|
|
|
- let parmars = {};
|
|
|
- parmars = {
|
|
|
- queryFlag: 1,
|
|
|
- };
|
|
|
- // if (store.isRoomDetailpage) {
|
|
|
- // parmars = {
|
|
|
- // tenantIds: store.rooMdetialId,
|
|
|
- // queryFlag: 2,
|
|
|
- // };
|
|
|
- // } else {
|
|
|
- // parmars = {
|
|
|
- // tenantIds: store.tentantId,
|
|
|
- // queryFlag: 1,
|
|
|
- // };
|
|
|
- // }
|
|
|
- overviewStatisticsAPI(parmars).then((res) => {
|
|
|
- box1_data.value=res.data.overviewSummary
|
|
|
- box2_data.value=res.data.elderlyTrendsYearBarChart
|
|
|
- box3_data.value=res.data.diseaseType
|
|
|
- box6_data.value=res.data
|
|
|
- box7_data.value=res.data.elderlyTrendsMonthBarChart
|
|
|
- box8_data.value=res.data.business
|
|
|
- right_data.value=res.data.tenantList
|
|
|
- box2_show.value = true
|
|
|
- box3_show.value = true
|
|
|
- box6_show.value = true
|
|
|
- box7_show.value = true
|
|
|
- box8_show.value = true
|
|
|
- right_show.value = true
|
|
|
- });
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-const box3_datalist = ref([1]);
|
|
|
-const box3_current = ref(0);
|
|
|
-
|
|
|
-function set_dataarr(event) {
|
|
|
- box3_datalist.value = event;
|
|
|
-}
|
|
|
-function set_current(event) {
|
|
|
- box3_current.value = event;
|
|
|
-}
|
|
|
-
|
|
|
-const set_adresinfo = (info) => {
|
|
|
- if (!mapshow.value) {
|
|
|
- mapshow.value = true;
|
|
|
- }
|
|
|
- adres_value.value = info;
|
|
|
-};
|
|
|
+ import BackgroundPlate from '@/components/BackgroundPlate/BackgroundPlate.vue';
|
|
|
+ import TheBox1 from './components/box1.vue';
|
|
|
+ import TheBox1_2 from './components/box1_2.vue';
|
|
|
+ import TheBox2 from './components/box2.vue';
|
|
|
+ import TheBox3 from './components/box3.vue';
|
|
|
+
|
|
|
+ import EchartBox from './components/echart_box.vue';
|
|
|
+ import TheBox4 from './components/box4.vue';
|
|
|
+ import TheBox5 from './components/box5.vue';
|
|
|
+ import TheBox6 from './components/box6.vue';
|
|
|
+ import TheBox7 from './components/box7.vue';
|
|
|
+ import TheBox8 from './components/box8.vue';
|
|
|
+ import MapBox from './components/map.vue';
|
|
|
+ import AddressBox from './components/addressbox.vue';
|
|
|
+ import Backimg1 from '../../assets/img/index/index_bock_back1.png';
|
|
|
+ import Backimg2 from '../../assets/img/index/index_bock_back2.png';
|
|
|
+ import Backimg3 from '../../assets/img/index/index_bock_back3.png';
|
|
|
+ import Backimg4 from '../../assets/img/index/index_bock_back4.png';
|
|
|
+ import Backimg5 from '../../assets/img/index/index_bock_back5.png';
|
|
|
+ import Backimg6 from '../../assets/img/index/index_bock_back6.png';
|
|
|
+ import Backimg7 from '../../assets/img/index/index_bock_back7.png';
|
|
|
+ import Backimg8 from '../../assets/img/index/index_bock_centerbottom.png';
|
|
|
+
|
|
|
+ import { overviewStatisticsAPI } from '@/api/index/index.js';
|
|
|
+
|
|
|
+ import { onMounted, defineProps, ref, nextTick } from 'vue';
|
|
|
+ import { useMechanismStore } from '@/store/index.js';
|
|
|
+
|
|
|
+ const store = useMechanismStore();
|
|
|
+ const mapshow = ref(true);
|
|
|
+ const box1_data = ref({});
|
|
|
+ const box2_data = ref({});
|
|
|
+ const box3_data = ref({});
|
|
|
+ const box6_data = ref({});
|
|
|
+ const box7_data = ref({});
|
|
|
+ const box8_data = ref({});
|
|
|
+ const right_data = ref({});
|
|
|
+ const box2_show = ref(false);
|
|
|
+ const box3_show = ref(false);
|
|
|
+ const box6_show = ref(false);
|
|
|
+ const box7_show = ref(false);
|
|
|
+ const box8_show = ref(false);
|
|
|
+ const right_show = ref(false);
|
|
|
+
|
|
|
+ const adres_value = ref({});
|
|
|
+ const donw_mappop = res => {
|
|
|
+ if (res == 1) {
|
|
|
+ mapshow.value = 1;
|
|
|
+ box2_show.value = false;
|
|
|
+ overviewStatistics();
|
|
|
+ } else {
|
|
|
+ box2_show.value = false;
|
|
|
+ mapshow.value = 0;
|
|
|
+ console.log(res.elderlyTrendsYearBarChart);
|
|
|
+ box1_data.value = res.overviewSummary;
|
|
|
+ box2_data.value = res.elderlyTrendsYearBarChart;
|
|
|
+ // box3_data.value=res.diseaseType
|
|
|
+ setTimeout(() => {
|
|
|
+ box2_show.value = true;
|
|
|
+ }, 100);
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ function overviewStatistics() {
|
|
|
+ let parmars = {};
|
|
|
+ parmars = {
|
|
|
+ queryFlag: 1
|
|
|
+ };
|
|
|
+ // if (store.isRoomDetailpage) {
|
|
|
+ // parmars = {
|
|
|
+ // tenantIds: store.rooMdetialId,
|
|
|
+ // queryFlag: 2,
|
|
|
+ // };
|
|
|
+ // } else {
|
|
|
+ // parmars = {
|
|
|
+ // tenantIds: store.tentantId,
|
|
|
+ // queryFlag: 1,
|
|
|
+ // };
|
|
|
+ // }
|
|
|
+ overviewStatisticsAPI(parmars).then(res => {
|
|
|
+ box1_data.value = res.data.overviewSummary;
|
|
|
+ box2_data.value = res.data.elderlyTrendsYearBarChart;
|
|
|
+ box3_data.value = res.data.diseaseType;
|
|
|
+ box6_data.value = res.data;
|
|
|
+ box7_data.value = res.data.elderlyTrendsMonthBarChart;
|
|
|
+ box8_data.value = res.data.business;
|
|
|
+ right_data.value = res.data.tenantList;
|
|
|
+ box2_show.value = true;
|
|
|
+ box3_show.value = true;
|
|
|
+ box6_show.value = true;
|
|
|
+ box7_show.value = true;
|
|
|
+ box8_show.value = true;
|
|
|
+ right_show.value = true;
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ const box3_datalist = ref([1]);
|
|
|
+ const box3_current = ref(0);
|
|
|
+
|
|
|
+ function set_dataarr(event) {
|
|
|
+ box3_datalist.value = event;
|
|
|
+ }
|
|
|
+ function set_current(event) {
|
|
|
+ box3_current.value = event;
|
|
|
+ }
|
|
|
+
|
|
|
+ const set_adresinfo = info => {
|
|
|
+ if (!mapshow.value) {
|
|
|
+ mapshow.value = true;
|
|
|
+ }
|
|
|
+ adres_value.value = info;
|
|
|
+ };
|
|
|
+
|
|
|
+ onMounted(() => {
|
|
|
+ // GroupTenant();
|
|
|
+ store.setRoomDetail(false);
|
|
|
+ overviewStatistics();
|
|
|
+ });
|
|
|
</script>
|
|
|
-
|
|
|
<style lang="scss" scoped>
|
|
|
-.index {
|
|
|
- height: 100%;
|
|
|
- width: 100%;
|
|
|
- box-sizing: border-box;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- .box-line {
|
|
|
- width: 34px;
|
|
|
- height: 100%;
|
|
|
- overflow: hidden;
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- .putImg {
|
|
|
- // position: relative;
|
|
|
- // width: 400px;
|
|
|
- height: 100%;
|
|
|
- // background: transparent url(.. /w32h9436steps7.png) no-repeat 0px 0px;
|
|
|
- background: transparent url("../../assets/img/index/w32h9436steps7.png")
|
|
|
- no-repeat 0px 0px;
|
|
|
- -webkit-animation: cartoonRun 2s infinite steps(7, end);
|
|
|
- -moz-animation: cartoonRun 2s infinite steps(7, end);
|
|
|
- -ms-animation: cartoonRun 2s infinite steps(7, end);
|
|
|
- animation: cartoonRun 2s infinite steps(7, end);
|
|
|
- }
|
|
|
-
|
|
|
- img {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .box-line-right {
|
|
|
- right: 564px;
|
|
|
- }
|
|
|
- .box-line-left {
|
|
|
- left: 564px;
|
|
|
- }
|
|
|
- .addressbox {
|
|
|
- width: 400px;
|
|
|
- height: 200px;
|
|
|
- z-index: 1;
|
|
|
- left: 590px;
|
|
|
- border: 2px solid rgb(32, 128, 255);
|
|
|
- background: rgba(26, 38, 53, 0.5);
|
|
|
- border-radius: 5px;
|
|
|
- filter: inherit(60px);
|
|
|
- border-top-left-radius: 30px;
|
|
|
- border-bottom-right-radius: 30px;
|
|
|
- top: 420px;
|
|
|
- }
|
|
|
- .center_map {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- top: -30px;
|
|
|
- }
|
|
|
- .mapbox {
|
|
|
- top: 30px;
|
|
|
- width: 740px;
|
|
|
- height: 600px;
|
|
|
- left: 590px;
|
|
|
- }
|
|
|
- .box1 {
|
|
|
- width: 527px;
|
|
|
- height: 208px;
|
|
|
- top: 30px;
|
|
|
- left: 25px;
|
|
|
- }
|
|
|
-
|
|
|
- .box2 {
|
|
|
- width: 527px;
|
|
|
- height: 319px;
|
|
|
- top: 246px;
|
|
|
- left: 25px;
|
|
|
- }
|
|
|
-
|
|
|
- .box3 {
|
|
|
- width: 527px;
|
|
|
- height: 290px;
|
|
|
- top: 573px;
|
|
|
- left: 25px;
|
|
|
- .echarbox {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .box4 {
|
|
|
- width: 358px;
|
|
|
- height: 225px;
|
|
|
- background-color: rgba(20, 31, 45, 0.8);
|
|
|
- left: 594px;
|
|
|
- bottom: 28px;
|
|
|
- }
|
|
|
- .right_router {
|
|
|
- width: 1300px;
|
|
|
- right: 25px;
|
|
|
- top: 30px;
|
|
|
- }
|
|
|
-
|
|
|
- .box5 {
|
|
|
- width: 358px;
|
|
|
- height: 225px;
|
|
|
- background-color: rgba(20, 31, 45, 0.8);
|
|
|
- right: 594px;
|
|
|
- bottom: 28px;
|
|
|
- }
|
|
|
-
|
|
|
- .box6 {
|
|
|
- width: 527px;
|
|
|
- height: 408px;
|
|
|
- top: 462px;
|
|
|
- right: 25px;
|
|
|
- }
|
|
|
-
|
|
|
- .box7 {
|
|
|
- width: 527px;
|
|
|
- height: 208px;
|
|
|
- top: 246px;
|
|
|
- right: 25px;
|
|
|
- }
|
|
|
-
|
|
|
- .box8 {
|
|
|
- width: 527px;
|
|
|
- height: 208px;
|
|
|
- top: 30px;
|
|
|
- right: 25px;
|
|
|
- }
|
|
|
-
|
|
|
- .boxwidthele {
|
|
|
- width: 730px;
|
|
|
- height: 225px;
|
|
|
- left: 596px;
|
|
|
- bottom: 28px;
|
|
|
- }
|
|
|
-
|
|
|
- @-webkit-keyframes cartoonRun {
|
|
|
- 0% {
|
|
|
- background-position-y: 0px;
|
|
|
- }
|
|
|
-
|
|
|
- 100% {
|
|
|
- background-position-y: -9436px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- @-moz-keyframes cartoonRun {
|
|
|
- 0% {
|
|
|
- background-position-y: 0px;
|
|
|
- }
|
|
|
-
|
|
|
- 100% {
|
|
|
- background-position-y: -9436px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- @-ms-keyframes cartoonRun {
|
|
|
- 0% {
|
|
|
- background-position-y: 0px;
|
|
|
- }
|
|
|
-
|
|
|
- 100% {
|
|
|
- background-position-y: -9436px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes cartoonRun {
|
|
|
- 0% {
|
|
|
- background-position-y: 0px;
|
|
|
- }
|
|
|
-
|
|
|
- 100% {
|
|
|
- background-position-y: -9436px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- @-webkit-keyframes cartoonRunReverse {
|
|
|
- 0% {
|
|
|
- background-position-y: -8088px;
|
|
|
- }
|
|
|
-
|
|
|
- 100% {
|
|
|
- background-position-y: 1348px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- @-moz-keyframes cartoonRunReverse {
|
|
|
- 0% {
|
|
|
- background-position-y: -8088px;
|
|
|
- }
|
|
|
-
|
|
|
- 100% {
|
|
|
- background-position-y: 1348px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- @-ms-keyframes cartoonRunReverse {
|
|
|
- 0% {
|
|
|
- background-position-y: -8088px;
|
|
|
- }
|
|
|
-
|
|
|
- 100% {
|
|
|
- background-position-y: 1348px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- @keyframes cartoonRunReverse {
|
|
|
- 0% {
|
|
|
- background-position-y: -8088px;
|
|
|
- }
|
|
|
-
|
|
|
- 100% {
|
|
|
- background-position-y: 1348px;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ .index {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .box-line {
|
|
|
+ width: 34px;
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ .putImg {
|
|
|
+ // position: relative;
|
|
|
+ // width: 400px;
|
|
|
+ height: 100%;
|
|
|
+ // background: transparent url(.. /w32h9436steps7.png) no-repeat 0px 0px;
|
|
|
+ background: transparent url('../../assets/img/index/w32h9436steps7.png') no-repeat 0px 0px;
|
|
|
+ -webkit-animation: cartoonRun 2s infinite steps(7, end);
|
|
|
+ -moz-animation: cartoonRun 2s infinite steps(7, end);
|
|
|
+ -ms-animation: cartoonRun 2s infinite steps(7, end);
|
|
|
+ animation: cartoonRun 2s infinite steps(7, end);
|
|
|
+ }
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-line-right {
|
|
|
+ right: 564px;
|
|
|
+ }
|
|
|
+ .box-line-left {
|
|
|
+ left: 564px;
|
|
|
+ }
|
|
|
+ .addressbox {
|
|
|
+ width: 400px;
|
|
|
+ height: 200px;
|
|
|
+ z-index: 1;
|
|
|
+ left: 590px;
|
|
|
+ border: 2px solid rgb(32, 128, 255);
|
|
|
+ background: rgba(26, 38, 53, 0.5);
|
|
|
+ border-radius: 5px;
|
|
|
+ filter: inherit(60px);
|
|
|
+ border-top-left-radius: 30px;
|
|
|
+ border-bottom-right-radius: 30px;
|
|
|
+ top: 420px;
|
|
|
+ }
|
|
|
+ .center_map {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ top: -30px;
|
|
|
+ }
|
|
|
+ .mapbox {
|
|
|
+ top: 30px;
|
|
|
+ width: 740px;
|
|
|
+ height: 600px;
|
|
|
+ left: 590px;
|
|
|
+ }
|
|
|
+ .box1 {
|
|
|
+ width: 527px;
|
|
|
+ height: 208px;
|
|
|
+ top: 30px;
|
|
|
+ left: 25px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box2 {
|
|
|
+ width: 527px;
|
|
|
+ height: 319px;
|
|
|
+ top: 246px;
|
|
|
+ left: 25px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box3 {
|
|
|
+ width: 527px;
|
|
|
+ height: 290px;
|
|
|
+ top: 573px;
|
|
|
+ left: 25px;
|
|
|
+ .echarbox {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .box4 {
|
|
|
+ width: 358px;
|
|
|
+ height: 225px;
|
|
|
+ background-color: rgba(20, 31, 45, 0.8);
|
|
|
+ left: 594px;
|
|
|
+ bottom: 28px;
|
|
|
+ }
|
|
|
+ .right_router {
|
|
|
+ width: 1300px;
|
|
|
+ right: 25px;
|
|
|
+ top: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box5 {
|
|
|
+ width: 358px;
|
|
|
+ height: 225px;
|
|
|
+ background-color: rgba(20, 31, 45, 0.8);
|
|
|
+ right: 594px;
|
|
|
+ bottom: 28px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box6 {
|
|
|
+ width: 527px;
|
|
|
+ height: 408px;
|
|
|
+ top: 462px;
|
|
|
+ right: 25px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box7 {
|
|
|
+ width: 527px;
|
|
|
+ height: 208px;
|
|
|
+ top: 246px;
|
|
|
+ right: 25px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box8 {
|
|
|
+ width: 527px;
|
|
|
+ height: 208px;
|
|
|
+ top: 30px;
|
|
|
+ right: 25px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .boxwidthele {
|
|
|
+ width: 730px;
|
|
|
+ height: 225px;
|
|
|
+ left: 596px;
|
|
|
+ bottom: 28px;
|
|
|
+ }
|
|
|
+
|
|
|
+ @-webkit-keyframes cartoonRun {
|
|
|
+ 0% {
|
|
|
+ background-position-y: 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ background-position-y: -9436px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @-moz-keyframes cartoonRun {
|
|
|
+ 0% {
|
|
|
+ background-position-y: 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ background-position-y: -9436px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @-ms-keyframes cartoonRun {
|
|
|
+ 0% {
|
|
|
+ background-position-y: 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ background-position-y: -9436px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes cartoonRun {
|
|
|
+ 0% {
|
|
|
+ background-position-y: 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ background-position-y: -9436px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @-webkit-keyframes cartoonRunReverse {
|
|
|
+ 0% {
|
|
|
+ background-position-y: -8088px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ background-position-y: 1348px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @-moz-keyframes cartoonRunReverse {
|
|
|
+ 0% {
|
|
|
+ background-position-y: -8088px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ background-position-y: 1348px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @-ms-keyframes cartoonRunReverse {
|
|
|
+ 0% {
|
|
|
+ background-position-y: -8088px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ background-position-y: 1348px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @keyframes cartoonRunReverse {
|
|
|
+ 0% {
|
|
|
+ background-position-y: -8088px;
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ background-position-y: 1348px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
