102 lines
2.0 KiB
Vue
102 lines
2.0 KiB
Vue
<template>
|
|
<div class="home">
|
|
<Index v-if="showIndex" @IndexPage="indexFn"></Index>
|
|
<Question v-if="showQuestion" @QuestionPage="questionFn"></Question>
|
|
<Loading v-if="showLoad" @LoadPage="loadFn"></Loading>
|
|
</div>
|
|
<div id="transition" class="transition">
|
|
<div class="t-i" v-for="i in 8">
|
|
<div class="i" :class="'i-' + i % 2">LOADING</div>
|
|
<div class="i" :class="'i-' + i % 2">LOADING</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import gsap from 'gsap'
|
|
import Loading from "@/components/Loading";
|
|
import Index from "@/components/Index";
|
|
import Question from "@/components/Question";
|
|
|
|
const showLoad = ref(false);
|
|
const loadFn = (item) => {
|
|
if (item.action == "hide") {
|
|
showLoad.value = false;
|
|
showIndex.value = true;
|
|
}
|
|
};
|
|
|
|
const showIndex = ref(false);
|
|
const indexFn = (item) => {
|
|
if (item.action == "hide") {
|
|
showIndex.value = false;
|
|
}
|
|
};
|
|
|
|
const showQuestion = ref(true);
|
|
const questionFn = (item) => {
|
|
if (item.action == "hide") {
|
|
showQuestion.value = false;
|
|
}
|
|
};
|
|
|
|
|
|
onMounted(() => {
|
|
gsap.to('.i-0', { duration: 5, x: "100%", repeat: -1 })
|
|
gsap.to('.i-1', { duration: 5, x: "-100%", repeat: -1 })
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" >
|
|
#app {
|
|
overflow: hidden;
|
|
background-color: rgb(255, 255, 255);
|
|
}
|
|
|
|
.home {
|
|
@include box(750px, 100vh);
|
|
// position: relative;
|
|
overflow: hidden;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
#transition {
|
|
@include fixed();
|
|
background-color: rgba($color: #000000, $alpha: .7);
|
|
display: flex;
|
|
flex-direction: column;
|
|
pointer-events: none;
|
|
// transform: rotate(-45deg);
|
|
// transform: translateX(-25%) translateY(15%) rotate(-45deg);
|
|
|
|
.t-i {
|
|
width: 100%;
|
|
height: calc(100% / 8);
|
|
text-align: center;
|
|
font-size: 120px;
|
|
display: flex;
|
|
align-items: center;
|
|
font-weight: 700;
|
|
|
|
.i {
|
|
width: 750px;
|
|
margin-left: 5%;
|
|
}
|
|
}
|
|
|
|
.t-i:nth-child(odd) {
|
|
background-color: #feed01;
|
|
color: #07b8ba;
|
|
}
|
|
|
|
.t-i:nth-child(even) {
|
|
background-color: #07b8ba;
|
|
color: #feed01;
|
|
|
|
.i {
|
|
transform: translateX(-80%);
|
|
}
|
|
}
|
|
}
|
|
</style>
|