Commit d8d79ed6 authored by 罗超's avatar 罗超

修改白名单,修复动画样式问题

parent 51e1659c
...@@ -9,7 +9,7 @@ const router = createRouter({ ...@@ -9,7 +9,7 @@ const router = createRouter({
}) })
const whiteList = ['/autoLogin','/login','/notfound','/regist'] const whiteList = ['/autoLogin','/login','/notfound','/regist','/']
const managerMenu = ['/market','/editor_admin'] const managerMenu = ['/market','/editor_admin']
let loadingInstance:any = null let loadingInstance:any = null
......
<template> <template>
<div class="window-height overflow-hide" ref="firstCard" @wheel="onChange"> <div class="window-height overflow-hide" ref="firstCard" @wheel="onChange">
<div class="column items-center" :class="{'welcomes-hide':top>0}"> <div :class="{'hide':top>0}">
<div class="animate__animated animate__fadeInDown logo"> <div class="column items-center" ref="firstScreen" :class="{'welcomes-hide':top>0}">
<div class="logo" :class="{'animate__animated animate__fadeInDown':top==0}">
<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_1.png" alt=""> <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_1.png" alt="">
</div> </div>
<div class="animate__animated animate__fadeInUp" style="margin-top: 2.343vw"> <div :class="{'animate__animated animate__fadeInUp':top==0}" style="margin-top: 2.343vw">
<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_838.png" style="width: 17.8vw;"> <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_838.png" style="width: 17.8vw;">
</div> </div>
<div class="animate__animated animate__fadeInUp text-center q-mt-xl text-info" style="width: 23.38vw;font-size: 0.9375vw;"> <div class="text-center q-mt-xl text-info" :class="{'animate__animated animate__fadeInUp':top==0}" style="width: 23.38vw;font-size: 0.9375vw;">
可云端编辑的专业级行程设计工具,为旅游行业量身打造打开网页就可以做出精美行程。 可云端编辑的专业级行程设计工具,为旅游行业量身打造打开网页就可以做出精美行程。
</div> </div>
<div class="animate__animated animate__fadeInUp linkToSpace cusor-pointer" @click="forwardLogin"> <div class="linkToSpace cusor-pointer" :class="{'animate__animated animate__fadeInUp':top==0}" @click="forwardLogin">
<div class="column items-center flex-center"> <div class="column items-center flex-center">
<span>立即使用</span> <span>立即使用</span>
</div> </div>
</div> </div>
</div> </div>
<div class="column items-center full-height two-card" :class="{'flex-center':top>0,'step-2':top>2}"> </div>
<div class="column items-center window-height two-card" :class="{'flex-center animate__animated animate__backInUp':top>0,'step-2':top>2}">
<div class="row items-center"> <div class="row items-center">
<div class="left-box step-2" v-show="top>2" :class="{'step-3':top>3}"> <div class="left-box step-2" v-show="top>2" :class="{'step-3':top>3}">
<div class="row items-center"> <div class="row items-center">
...@@ -46,6 +48,7 @@ ...@@ -46,6 +48,7 @@
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { styleType } from 'element-plus/es/components/table-v2/src/common';
import { onBeforeUnmount, onMounted, ref, watch } from 'vue'; import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
const props = defineProps({ const props = defineProps({
...@@ -57,6 +60,7 @@ const props = defineProps({ ...@@ -57,6 +60,7 @@ const props = defineProps({
const canCount = ref(true) const canCount = ref(true)
const top = ref(0) const top = ref(0)
const firstCard = ref<HTMLElement>() const firstCard = ref<HTMLElement>()
const firstScreen = ref<HTMLElement>()
const onChange = (e:WheelEvent)=>{ const onChange = (e:WheelEvent)=>{
...@@ -72,6 +76,7 @@ const onChange = (e:WheelEvent)=>{ ...@@ -72,6 +76,7 @@ const onChange = (e:WheelEvent)=>{
canCount.value=false canCount.value=false
top.value += e.deltaY>0?1:-1 top.value += e.deltaY>0?1:-1
setTimeout(() => { setTimeout(() => {
canCount.value=true canCount.value=true
}, 50); }, 50);
...@@ -124,24 +129,24 @@ const forwardLogin = ()=>{ ...@@ -124,24 +129,24 @@ const forwardLogin = ()=>{
position: static !important; position: static !important;
} }
.website .welcomes-hide{ .website .welcomes-hide{
animation: spinner-welcomes 0.2s linear both animation: backOutUp; /* referring directly to the animation's @keyframe declaration */
animation-duration: 0.5s;
animation-fill-mode: both;
}
.website .hide{
animation: spinner-welcomes .5s linear forwards
} }
@keyframes spinner-welcomes { @keyframes spinner-welcomes {
0% {
opacity: 1;
/* transform: scale(1); */
}
100% { 100% {
opacity: 0; display: none !important;
display: none; height: 0px;
/* transform: scale(0.1); */ overflow: hidden;
margin-top: 26.04vw;
} }
} }
.website .flex-center .img-change{ /* .website .flex-center .img-change{
animation: spinner-welcomes-two-img .5s linear both animation: spinner-welcomes-two-img .5s linear both
} } */
@keyframes spinner-welcomes-two-img { @keyframes spinner-welcomes-two-img {
0% { 0% {
width: 62vw; width: 62vw;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment