62 lines
1.1 KiB
SCSS
62 lines
1.1 KiB
SCSS
#app,
|
|
html,
|
|
body {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
user-select: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
font-family: 'siyuan';
|
|
color: rgba(255, 255, 255, 1);
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.more {
|
|
display: inline-block;
|
|
background-size: 100% 100%;
|
|
background-image: url("@/assets/images/home/more.png");
|
|
cursor: pointer;
|
|
width: vw(52);
|
|
height: vh(24);
|
|
}
|
|
.left-enter-from {
|
|
transform: translateX(-100%);
|
|
opacity: 0;
|
|
}
|
|
.right-enter-from{
|
|
transform: translateX(100%);
|
|
opacity: 0;
|
|
}
|
|
|
|
.left-enter-active,
|
|
.left-leave-active,
|
|
.right-enter-active,
|
|
.right-leave-active{
|
|
transition: transform 600ms ease-in-out, opacity 600ms ease-in-out;
|
|
}
|
|
|
|
.left-enter-to,.right-enter-to {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
.left-leave-from,.right-leave-from{
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
.left-leave-to {
|
|
transform: translateX(100%);
|
|
opacity: 0;
|
|
}
|
|
.right-leave-to {
|
|
transform: translateX(-100%);
|
|
opacity: 0;
|
|
}
|