integrated_traffic_vue/src/views/BI/index.vue

<template>
  <div id="bi_container">
    <div class="map_bg" id="map"></div>
    <transition
      enter-active-class="animate__animated animate__fadeInDown"
      leave-active-class="animate__animated animate__fadeOutUp"
    >
      <div class="header" :key="transitionKey">
        <div class="back" @click="router.back()">
          <img src="/src/assets/images/map/back.png" alt="" />
        </div>
        <div class="light"></div>
        <div class="title" />
      </div>
    </transition>
    <div class="left_container" v-if="leftCurrentComponent">
      <transition
        enter-active-class="animate__animated animate__fadeInLeft"
        leave-active-class="animate__animated animate__fadeOutLeft"
        mode="out-in"
      >
        <component :is="leftCurrentComponent" />
      </transition>
    </div>
    <div class="mid-container">
      <bottom-options
        v-model:left-current-component="leftCurrentComponent"
        v-model:right-current-component="rightCurrentComponent"
        v-model:right-option="right_option"
      />
    </div>
    <transition
      enter-active-class="animate__animated animate__fadeInRight"
      leave-active-class="animate__animated animate__fadeOutRight"
      mode="out-in"
    >
      <div class="right_container" v-if="rightCurrentComponent">
        <component :is="rightCurrentComponent" />
      </div>
    </transition>

    <div class="right_ico" v-show="right_option">
      <RightIco></RightIco>
    </div>
  </div>
</template>

<script setup>
import autofit from "autofit.js";
import { onBeforeUnmount, onMounted, ref } from "vue";
import RightIco from "./components/rightico.vue";
import BottomOptions from "./components/bottom_options.vue";
import { useRouter } from "vue-router";
import { initMap } from "./js/map";

const router = useRouter();
const right_option = ref(true);
const transitionKey = ref(0);
const leftCurrentComponent = ref("");
const rightCurrentComponent = ref("");
const corp = { CORP_NAME: "河北秦安", lng: 119.44758654, lat: 39.91845908 };

onMounted(() => {
  autofit.init({
    designHeight: 1080,
    designWidth: 1920,
    renderDom: "#bi_container",
    resize: true,
  });
  transitionKey.value = Math.random();
  initMap(corp);
});
onBeforeUnmount(() => {
  autofit.off();
});
</script>
<style scoped lang="scss">
#bi_container {
  width: 100%;
  height: 100%;
  color: #ffffff;
  position: relative;
  font-size: 14px;

  .map_bg {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -9;
    background-size: 100% 100%;
  }

  .header {
    width: 100%;
    height: 100px;
    background: url("/src/assets/images/map/titlebg.png") no-repeat top center;
    background-size: 100% 100%;
    position: absolute;

    .back {
      position: absolute;
      top: 0;
      left: 0;
      cursor: pointer;
    }

    .light {
      background-image: url("/src/assets/images/map/gunag.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      width: 619px;
      height: 55px;
      position: absolute;
      top: 50px;
      left: 50%;
      animation: scale 2s infinite;

      @keyframes scale {
        0% {
          transform: translateX(-50%) scale(1);
        }
        50% {
          transform: translateX(-50%) scale(0.5);
        }
        100% {
          transform: translateX(-50%) scale(1);
        }
      }
    }

    .title {
      width: 355px;
      height: 50px;
      text-align: center;
      position: absolute;
      left: 50%;
      top: 15%;
      transform: translate(-50%, 0%);
      background: url("/src/assets/images/map/title.png") no-repeat top center;
    }
  }

  .left_container {
    width: 435px;
    position: absolute;
    left: 20px;
    top: 100px;
  }
  .right_container {
    width: 435px;
    position: absolute;
    right: 20px;
    top: 100px;
  }

  .mid-container {
    width: 934px;
    height: 88px;
    background-image: url("/src/assets/images/map/bottombg.png");
    background-repeat: no-repeat;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  .right_ico {
    position: fixed;
    right: 20px;
    bottom: 50px;
  }
}
</style>