391 lines
7.8 KiB
Vue
391 lines
7.8 KiB
Vue
<template>
|
|
<div class="nuic">
|
|
<img class="logo" src="@/assets/images/logo-2.png" />
|
|
<div class="header" :class="{ loading }">
|
|
<div class="close" @click="onClose">
|
|
<svg-icon name="close-border" size="33" />
|
|
</div>
|
|
|
|
<div
|
|
class="item"
|
|
v-for="(v, i) in list"
|
|
:key="i"
|
|
:state="active === i ? 1 : active > i ? 0 : 2"
|
|
>
|
|
<img
|
|
v-show="i === active"
|
|
src="@/assets/images/nuic/nav-active.png"
|
|
draggable="false"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<component :class="{ loading }" class="view" :is="list[active]" @next="onNext" />
|
|
<div class="bg" :class="{ loading }">
|
|
<div class="bg-3"></div>
|
|
<div class="bg-2"></div>
|
|
<div class="bg-1"></div>
|
|
</div>
|
|
<img class="loading-img" :class="{ loading }" src="@/assets/images/nuic/xiang.png" />
|
|
<div class="loading-tip" :class="{ loading }">{{ $t('Nuic.loadingTip') }}</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, ref, markRaw } from 'vue'
|
|
import nuic1 from './nuic-1.vue'
|
|
import nuic2 from './nuic-2.vue'
|
|
import nuic3 from './nuic-3.vue'
|
|
import { useRouter, useRoute } from 'vue-router'
|
|
const router = useRouter()
|
|
const route = useRoute()
|
|
const active = computed(() => Number(route.query.index || 0))
|
|
const list = markRaw([nuic1, nuic2, nuic3])
|
|
const loading = ref(false)
|
|
const onClose = () => {
|
|
router.push({ name: 'mainInput' })
|
|
}
|
|
const onNext = () => {
|
|
const index = active.value + 1
|
|
if (index < list.length) {
|
|
router.push({ query: { index } })
|
|
} else {
|
|
loading.value = true
|
|
setTimeout(() => {
|
|
router.push({ name: 'mainInput' })
|
|
}, 5000)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.nuic {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
// background-color: #f8f7f5;
|
|
// align-items: center;
|
|
// justify-content: center;
|
|
> * {
|
|
transition: opacity 0.5s ease-in-out;
|
|
}
|
|
> *:not(.bg):not(.loading-img):not(.loading-tip) {
|
|
z-index: 10;
|
|
opacity: 1;
|
|
&.loading {
|
|
opacity: 0;
|
|
z-index: -1;
|
|
}
|
|
}
|
|
> .logo {
|
|
position: absolute;
|
|
top: 2.7rem;
|
|
left: 3.6rem;
|
|
width: auto;
|
|
height: 2.4rem;
|
|
}
|
|
> .header {
|
|
margin-top: 5rem;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: flex-end;
|
|
height: 11.2rem;
|
|
> * {
|
|
margin-right: 3rem;
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
> .close {
|
|
margin-bottom: -0.65rem;
|
|
cursor: pointer;
|
|
}
|
|
> .item {
|
|
width: 30.2rem;
|
|
&[state='1'] {
|
|
height: 100%;
|
|
}
|
|
&[state='2'],
|
|
&[state='0'] {
|
|
height: 2rem;
|
|
border-radius: 2rem;
|
|
}
|
|
&[state='0'] {
|
|
background: linear-gradient(90deg, #ff8ca2 0%, #ffa497 49.04%, #ff8d55 100%);
|
|
}
|
|
&[state='2'] {
|
|
background-color: #dfdfdf;
|
|
}
|
|
> img {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
}
|
|
}
|
|
&:deep(.view) {
|
|
margin-top: 5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
color: #252727;
|
|
text-align: center;
|
|
> .btns {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
> button {
|
|
width: 29.6rem;
|
|
height: 6rem;
|
|
border-radius: 6rem;
|
|
border: none;
|
|
outline: none;
|
|
font-size: 2.4rem;
|
|
font-weight: 600;
|
|
color: #252727;
|
|
cursor: pointer;
|
|
margin-right: 3.4rem;
|
|
background-color: #fff;
|
|
font-family: SemiBold;
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
&.skip {
|
|
color: #8d8d8d;
|
|
}
|
|
&:active {
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
> .loading-img {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 14.4rem;
|
|
height: auto;
|
|
opacity: 0;
|
|
&.loading {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
> .loading-tip {
|
|
position: absolute;
|
|
width: 100%;
|
|
left: 0;
|
|
bottom: 25.2rem;
|
|
text-align: center;
|
|
font-family: Regular;
|
|
font-size: 3rem;
|
|
color: #585858;
|
|
|
|
opacity: 0;
|
|
&.loading {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
> .bg {
|
|
position: absolute;
|
|
// border: 1px solid #000;
|
|
&,
|
|
& > * {
|
|
transition: all 0.5s ease-in-out;
|
|
animation-delay: 0.5s;
|
|
animation-duration: 6s;
|
|
animation-timing-function: linear;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
> div {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
}
|
|
> div.bg-1 {
|
|
background: linear-gradient(
|
|
130.72deg,
|
|
rgba(242, 171, 180, 0.2) 29.52%,
|
|
rgba(234, 133, 200, 0.2) 39.73%,
|
|
rgba(238, 64, 173, 0.2) 55.81%,
|
|
rgba(234, 133, 158, 0.2) 69.59%,
|
|
rgba(242, 171, 180, 0.2) 82.61%
|
|
);
|
|
}
|
|
> div.bg-2 {
|
|
background: conic-gradient(
|
|
from 94.36deg at 71.77% 41.01%,
|
|
rgba(242, 171, 180, 0.2) 0deg,
|
|
rgba(255, 97, 117, 0.2) 100.75deg,
|
|
rgba(254, 59, 83, 0.2) 179.32deg,
|
|
rgba(255, 97, 117, 0.2) 252deg,
|
|
rgba(242, 171, 180, 0.2) 360deg
|
|
);
|
|
}
|
|
> div.bg-3 {
|
|
background: linear-gradient(
|
|
87.58deg,
|
|
#f1c191 23.02%,
|
|
rgba(255, 178, 91, 0.97) 35.36%,
|
|
#ff8e69 56.32%,
|
|
#f2ad7e 67.34%,
|
|
#ffe8c8 82.74%
|
|
);
|
|
}
|
|
}
|
|
> .bg.loading {
|
|
width: 47.873rem;
|
|
height: 46.704rem;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translateX(-50%) translateY(-50%);
|
|
animation-name: bg;
|
|
> img {
|
|
opacity: 1;
|
|
}
|
|
> div.bg-1 {
|
|
animation-name: bg_1;
|
|
width: 34.164rem;
|
|
height: 34.92rem;
|
|
left: 2rem;
|
|
top: 5rem;
|
|
filter: blur(11.5rem);
|
|
transform: matrix(-0.16, -0.99, 0.97, -0.24, 0, 0);
|
|
}
|
|
> div.bg-2 {
|
|
animation-name: bg_2;
|
|
width: 25.8rem;
|
|
height: 25.8rem;
|
|
left: 17rem;
|
|
top: 4rem;
|
|
filter: blur(5.48507rem);
|
|
transform: matrix(0.4, -0.92, 0.91, 0.42, 0, 0);
|
|
}
|
|
> div.bg-3 {
|
|
animation-name: bg_3;
|
|
width: 25.8rem;
|
|
height: 25.8rem;
|
|
left: 10.4rem;
|
|
top: 17.7rem;
|
|
filter: blur(5.48507rem);
|
|
transform: matrix(-0.97, -0.23, 0.25, -0.97, 0, 0);
|
|
}
|
|
}
|
|
> .bg:not(.loading) {
|
|
width: 127rem;
|
|
height: 72.6rem;
|
|
left: 50%;
|
|
bottom: 0;
|
|
transform: translateX(-50%) translateY(80%);
|
|
> div.bg-1 {
|
|
width: 48.4rem;
|
|
height: 57.2rem;
|
|
top: 2.3rem;
|
|
left: 0rem;
|
|
transform: matrix(-0.16, -0.99, 0.97, -0.24, 0, 0);
|
|
filter: blur(11.5rem);
|
|
}
|
|
> div.bg-2 {
|
|
width: 44.6rem;
|
|
height: 56.8rem;
|
|
left: 56.6rem;
|
|
top: 0rem;
|
|
transform: matrix(0.75, -0.66, 0.65, 0.76, 0, 0);
|
|
filter: blur(12.927rem);
|
|
}
|
|
> div.bg-3 {
|
|
width: 79.958rem;
|
|
height: 28.1rem;
|
|
left: 11.724rem;
|
|
top: 12.353rem;
|
|
transform: matrix(-1, 0.05, -0.03, -1, 0, 0);
|
|
filter: blur(13.17rem);
|
|
}
|
|
}
|
|
|
|
@keyframes bg {
|
|
15% {
|
|
width: 56.647rem;
|
|
height: 51.794rem;
|
|
}
|
|
50% {
|
|
width: 46.179rem;
|
|
height: 36.712rem;
|
|
}
|
|
75% {
|
|
width: 52.947rem;
|
|
height: 46.894rem;
|
|
}
|
|
}
|
|
|
|
@keyframes bg_1 {
|
|
15% {
|
|
width: 34.2rem;
|
|
height: 34.9rem;
|
|
left: 3rem;
|
|
top: 12.7rem;
|
|
}
|
|
50% {
|
|
width: 27.321rem;
|
|
height: 27.926rem;
|
|
left: 16.7rem;
|
|
top: 3.6rem;
|
|
}
|
|
75% {
|
|
width: 34.164rem;
|
|
height: 34.92rem;
|
|
left: 2.5rem;
|
|
top: 8rem;
|
|
}
|
|
}
|
|
@keyframes bg_2 {
|
|
15% {
|
|
width: 25.8rem;
|
|
height: 25.8rem;
|
|
left: 25.5rem;
|
|
top: 5rem;
|
|
transform: matrix(0.75, -0.66, 0.65, 0.76, 0, 0);
|
|
}
|
|
50% {
|
|
width: 25.8rem;
|
|
height: 25.8rem;
|
|
left: 4rem;
|
|
top: 4rem;
|
|
transform: matrix(0.75, -0.66, 0.65, 0.76, 0, 0);
|
|
}
|
|
75% {
|
|
width: 25.8rem;
|
|
height: 25.8rem;
|
|
left: 21.8rem;
|
|
top: 5rem;
|
|
transform: matrix(0.75, -0.66, 0.65, 0.76, 0, 0);
|
|
}
|
|
}
|
|
@keyframes bg_3 {
|
|
15% {
|
|
width: 25.8rem;
|
|
height: 25.8rem;
|
|
left: 14.603rem;
|
|
top: 11.784rem;
|
|
transform: matrix(-1, 0.05, -0.03, -1, 0, 0);
|
|
}
|
|
50% {
|
|
width: 25.8rem;
|
|
height: 25.8rem;
|
|
left: 10.701rem;
|
|
top: 5.283rem;
|
|
transform: matrix(-1, 0.05, -0.03, -1, 0, 0);
|
|
}
|
|
75% {
|
|
width: 25.8rem;
|
|
height: 25.8rem;
|
|
left: 12.303rem;
|
|
top: 6.884rem;
|
|
transform: matrix(-1, 0.05, -0.03, -1, 0, 0);
|
|
}
|
|
}
|
|
}
|
|
</style>
|