357 lines
6.7 KiB
SCSS
357 lines
6.7 KiB
SCSS
html {
|
|
font-size: 13.33333vw
|
|
}
|
|
|
|
|
|
a:active {
|
|
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
|
|
-webkit-user-select: none;
|
|
-moz-user-focus: none;
|
|
-moz-user-select: none;
|
|
}
|
|
|
|
@media screen and (max-width: 320px) {
|
|
html {
|
|
font-size: 42.667PX;
|
|
font-size: 13.33333vw
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 321px) and (max-width:360px) {
|
|
html {
|
|
font-size: 48PX;
|
|
font-size: 13.33333vw
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 361px) and (max-width:375px) {
|
|
html {
|
|
font-size: 50PX;
|
|
font-size: 13.33333vw
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 376px) and (max-width:393px) {
|
|
html {
|
|
font-size: 52.4PX;
|
|
font-size: 13.33333vw
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 394px) and (max-width:412px) {
|
|
html {
|
|
font-size: 54.93PX;
|
|
font-size: 13.33333vw
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 413px) and (max-width:414px) {
|
|
html {
|
|
font-size: 55.2PX;
|
|
font-size: 13.33333vw
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 415px) and (max-width:480px) {
|
|
html {
|
|
font-size: 64PX;
|
|
font-size: 13.33333vw
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 481px) and (max-width:540px) {
|
|
html {
|
|
font-size: 72PX;
|
|
font-size: 13.33333vw
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 541px) and (max-width:640px) {
|
|
html {
|
|
font-size: 85.33PX;
|
|
font-size: 13.33333vw
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 641px) and (max-width:720px) {
|
|
html {
|
|
font-size: 96PX;
|
|
font-size: 13.33333vw
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 721px) and (max-width:768px) {
|
|
html {
|
|
font-size: 102.4PX;
|
|
font-size: 13.33333vw
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 769px) {
|
|
html {
|
|
font-size: 102.4PX;
|
|
|
|
#app {
|
|
width: 768PX;
|
|
margin: 0 auto
|
|
}
|
|
}
|
|
}
|
|
|
|
.clearfix:after {
|
|
display: block;
|
|
clear: both;
|
|
content: "";
|
|
visibility: hidden;
|
|
height: 0
|
|
}
|
|
|
|
input,
|
|
button,
|
|
select,
|
|
textarea,
|
|
a {
|
|
border: none;
|
|
outline: none
|
|
}
|
|
|
|
/* page change */
|
|
$--transition-time: 350ms;
|
|
|
|
.back-enter-active,
|
|
.back-leave-active,
|
|
.forward-enter-active,
|
|
.forward-leave-active {
|
|
will-change: transform;
|
|
transition: all $--transition-time;
|
|
position: absolute;
|
|
height: 100%;
|
|
backface-visibility: hidden;
|
|
perspective: 1000;
|
|
}
|
|
|
|
.back-enter {
|
|
opacity: 0.75;
|
|
transform: translate3d(-35%, 0, 0) !important;
|
|
}
|
|
|
|
.back-enter-active {
|
|
z-index: -1 !important;
|
|
transition: all $--transition-time linear;
|
|
}
|
|
|
|
.back-leave-active {
|
|
transform: translate3d(100%, 0, 0) !important;
|
|
transition: all $--transition-time linear;
|
|
}
|
|
|
|
.forward-enter {
|
|
transform: translate3d(100%, 0, 0) !important;
|
|
}
|
|
|
|
.forward-enter-active {
|
|
transition: all $--transition-time linear;
|
|
}
|
|
|
|
.forward-leave-active {
|
|
z-index: -1;
|
|
opacity: 0.65;
|
|
transform: translate3d(-35%, 0, 0) !important;
|
|
transition: all $--transition-time linear;
|
|
}
|
|
|
|
.slide-left-leave-active,
|
|
.slide-right-leave-active,
|
|
.slide-left-enter-active,
|
|
.slide-right-enter-active {
|
|
// transition: all 3S;
|
|
transition: all $--transition-time;
|
|
}
|
|
|
|
.slide-right-enter {
|
|
transform: translate(-100%, 0);
|
|
}
|
|
|
|
.slide-right-leave-active {
|
|
transform: translate(100%, 0);
|
|
}
|
|
|
|
.slide-left-enter {
|
|
transform: translate(100%, 0);
|
|
}
|
|
|
|
.slide-left-leave-active {
|
|
transform: translate(-100%, 0);
|
|
}
|
|
|
|
|
|
$easeInSine: cubic-bezier(0.47, 0, 0.745, 0.715);
|
|
$easeOutSine: cubic-bezier(0.39, 0.575, 0.565, 1);
|
|
$easeInOutSine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
|
|
$easeInQuad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
|
|
$easeOutQuad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
$easeInOutQuad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
|
|
$easeInCubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
|
|
$easeOutCubic: cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
$easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
$easeInQuart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
|
|
$easeOutQuart: cubic-bezier(0.165, 0.84, 0.44, 1);
|
|
$easeInOutQuart: cubic-bezier(0.77, 0, 0.175, 1);
|
|
$easeInQuint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
|
$easeOutQuint: cubic-bezier(0.23, 1, 0.32, 1);
|
|
$easeInOutQuint: cubic-bezier(0.86, 0, 0.07, 1);
|
|
$easeInExpo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
|
|
$easeOutExpo: cubic-bezier(0.19, 1, 0.22, 1);
|
|
$easeInOutExpo: cubic-bezier(1, 0, 0, 1);
|
|
$easeInCirc: cubic-bezier(0.6, 0.04, 0.98, 0.335);
|
|
$easeOutCirc: cubic-bezier(0.075, 0.82, 0.165, 1);
|
|
$easeInOutCirc: cubic-bezier(0.785, 0.135, 0.15, 0.86);
|
|
$easeInBack: cubic-bezier(0.6, -0.28, 0.735, 0.045);
|
|
$easeOutBack: cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
$easeInOutBack: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
|
|
|
|
|
|
.fade-enter-active {
|
|
transition: all 0.5s $easeOutCirc;
|
|
|
|
.catalogue {
|
|
transition: all 0.35s $easeOutCubic;
|
|
}
|
|
}
|
|
|
|
.fade-leave-active {
|
|
transition: all 0.35s $easeInOutQuart;
|
|
|
|
.catalogue {
|
|
transition: all 0.35s;
|
|
}
|
|
}
|
|
|
|
.fade-enter,
|
|
.fade-leave-to {
|
|
opacity: 0;
|
|
|
|
.catalogue {
|
|
transform: scale(0.2);
|
|
|
|
// .closeBtn {
|
|
// transform: scale(0.2);
|
|
// }
|
|
|
|
}
|
|
|
|
}
|
|
|
|
html .bscroll-vertical-scrollbar {
|
|
background-color: rgb(239, 171, 63);
|
|
width: 7px !important;
|
|
bottom: 30px !important;
|
|
top: 40px !important;
|
|
right: 13px !important;
|
|
// overflow-x: visible;
|
|
|
|
// .bscroll-indicator {
|
|
// box-sizing: border-box;
|
|
// position: absolute;
|
|
// border: none !important;
|
|
|
|
// border-radius: 50% !important;
|
|
// background-color: # !important;
|
|
// width: 16px !important;
|
|
// height: 16px !important;
|
|
|
|
// }
|
|
}
|
|
|
|
|
|
|
|
.miniScreen {
|
|
|
|
// transform: translateY(60px);
|
|
.catalogue {
|
|
transform-origin: 50% 50% !important;
|
|
transform: scale(0.97);
|
|
|
|
// .closeBtn {
|
|
// transform: scale(0.2);
|
|
// }
|
|
|
|
}
|
|
|
|
.catalogue2 {
|
|
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.sharePop .catalogue {
|
|
|
|
transform: scale(0.92);
|
|
}
|
|
|
|
.winCon {
|
|
|
|
transform: scale(0.77) !important;
|
|
}
|
|
|
|
.failCon {
|
|
|
|
transform: scale(0.9) !important;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.btn-ani {
|
|
transition: all 0.15s linear;
|
|
}
|
|
|
|
.btn-ani-right {
|
|
animation: btn-ani-right 0.3s ease-in-out;
|
|
}
|
|
|
|
.btn-ani-left {
|
|
animation: btn-ani-left 0.3s ease-in-out;
|
|
}
|
|
|
|
.btn-ani-up {
|
|
animation: btn-ani-up 0.3s ease-in-out;
|
|
}
|
|
|
|
.btn-ani-down {
|
|
animation: btn-ani-down 0.3s ease-in-out;
|
|
}
|
|
|
|
.btn-ani-big {
|
|
animation: btn-ani-big 0.3s ease-in-out;
|
|
}
|
|
|
|
@keyframes btn-ani-right {
|
|
50% {
|
|
transform: translateX(10px);
|
|
}
|
|
}
|
|
|
|
@keyframes btn-ani-left {
|
|
50% {
|
|
transform: translateX(-10px);
|
|
}
|
|
}
|
|
|
|
@keyframes btn-ani-up {
|
|
50% {
|
|
transform: translateY(10px);
|
|
}
|
|
}
|
|
|
|
@keyframes btn-ani-down {
|
|
50% {
|
|
transform: translateY(-10px);
|
|
}
|
|
}
|
|
|
|
@keyframes btn-ani-big {
|
|
50% {
|
|
transform: scale(0.92);
|
|
}
|
|
} |