yjdp-web/src/views/routineCommandMap/MiddleSection.vue

<template>
  <div class="middle-section">
    <GlobalMap is-component width="3894" height="2140" />
  </div>
</template>

<script lang="ts" setup>
import GlobalMap from '../globalMap/index.vue';
</script>

<style lang="scss" scoped>
.middle-section {
  margin: 0 91px;
  flex: 1;
  height: 2140px;
  animation: slideAndFade 1.5s;
}

@keyframes slideAndFade {
  0% {
    transform: translateY(218px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
</style>