61 lines
1.5 KiB
Vue
61 lines
1.5 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<transition
|
||
|
|
enter-active-class="animate__animated animate__fadeInLeft"
|
||
|
|
leave-active-class="animate__animated animate__fadeOutLeft"
|
||
|
|
>
|
||
|
|
<div v-if="animationKey !== 0" :key="animationKey" class="left_content">
|
||
|
|
<left-content />
|
||
|
|
</div>
|
||
|
|
</transition>
|
||
|
|
<transition
|
||
|
|
enter-active-class="animate__animated animate__fadeInRight"
|
||
|
|
leave-active-class="animate__animated animate__fadeOutRight"
|
||
|
|
>
|
||
|
|
<div v-if="animationKey !== 0" :key="animationKey" class="right_content">
|
||
|
|
<right-content />
|
||
|
|
</div>
|
||
|
|
</transition>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { onMounted, ref } from "vue";
|
||
|
|
import LeftContent from "./left_content.vue";
|
||
|
|
import RightContent from "./right_content.vue";
|
||
|
|
|
||
|
|
const animationKey = ref(0);
|
||
|
|
onMounted(() => {
|
||
|
|
animationKey.value = Math.random();
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.left_content {
|
||
|
|
width: 480px;
|
||
|
|
position: absolute;
|
||
|
|
left: 0;
|
||
|
|
top: 64px;
|
||
|
|
background-image: url("/src/assets/images/map/leftbg.png");
|
||
|
|
background-size: 450px 100%;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
padding-top: 15px;
|
||
|
|
padding-left: 15px;
|
||
|
|
padding-bottom: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.right_content {
|
||
|
|
width: 480px;
|
||
|
|
position: absolute;
|
||
|
|
right: 0;
|
||
|
|
top: 64px;
|
||
|
|
background-image: url("/src/assets/images/map/rightbg.png");
|
||
|
|
background-size: 450px 100%;
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-position: right center;
|
||
|
|
padding-top: 15px;
|
||
|
|
padding-right: 15px;
|
||
|
|
padding-bottom: 15px;
|
||
|
|
}
|
||
|
|
</style>
|