55 lines
950 B
Vue
55 lines
950 B
Vue
|
<template>
|
||
|
|
<div class="homePage relative bg-white flex justify-start items-start">
|
||
|
|
<RouterView></RouterView>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<style lang="scss">
|
||
|
|
.homePage {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
overflow-y: auto;
|
||
|
|
overflow-x: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.slide-enter-active,
|
||
|
|
.slide-leave-active {
|
||
|
|
transition: transform 1s ease, opacity 1s ease;
|
||
|
|
will-change: transform, opacity;
|
||
|
|
}
|
||
|
|
|
||
|
|
.slide-enter-from {
|
||
|
|
// position: absolute;
|
||
|
|
// top: 0;
|
||
|
|
// bottom: 0;
|
||
|
|
// left: 100%;
|
||
|
|
transform: translateX(100%);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
.slide-enter-to {
|
||
|
|
// position: absolute;
|
||
|
|
// top: 0;
|
||
|
|
// bottom: 0;
|
||
|
|
// left: 0%;
|
||
|
|
transform: translateX(0%);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.slide-leave-from {
|
||
|
|
// position: absolute;
|
||
|
|
// top: 0;
|
||
|
|
// bottom: 0;
|
||
|
|
// left: 0%;
|
||
|
|
transform: translateX(0%);
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
.slide-leave-to {
|
||
|
|
// position: absolute;
|
||
|
|
// overflow: hidden;
|
||
|
|
// top: 0;
|
||
|
|
// bottom: 0;
|
||
|
|
// left: -100%;
|
||
|
|
transform: translateX(-100%);
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
</style>
|