nuic home动画
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="nuic background-pink">
|
||||
<div class="nuic">
|
||||
<img class="logo" src="@/assets/images/logo-2.png" />
|
||||
<div class="header" v-show="!loading">
|
||||
<div class="header" :class="{ loading }">
|
||||
<div class="close" @click="onClose">
|
||||
<svg-icon name="close-border" size="33" />
|
||||
</div>
|
||||
@@ -19,11 +19,14 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<component v-show="!loading" class="view" :is="list[active]" @next="onNext" />
|
||||
<div class="loading" v-show="loading">
|
||||
<img src="@/assets/images/nuic/loading.png" />
|
||||
<p class="tip">{{ $t('Nuic.loadingTip') }}</p>
|
||||
<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>
|
||||
|
||||
@@ -49,7 +52,7 @@
|
||||
loading.value = true
|
||||
setTimeout(() => {
|
||||
router.push({ name: 'mainInput' })
|
||||
}, 1000)
|
||||
}, 5000)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -62,8 +65,20 @@
|
||||
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;
|
||||
@@ -147,18 +162,228 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
> .loading {
|
||||
> .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%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #f8f7f5;
|
||||
> .tip {
|
||||
font-family: Regular;
|
||||
font-size: 3rem;
|
||||
color: #585858;
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<div v-for="v in list" :key="v.id" @click="v.active = !v.active">
|
||||
<img :src="v.url" draggable="false" />
|
||||
<div class="active" v-show="v.active">
|
||||
<span>这是一段文字</span>
|
||||
<span>{{ v.title }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -25,14 +25,14 @@
|
||||
const router = useRouter()
|
||||
const emit = defineEmits(['next'])
|
||||
const list = ref([
|
||||
{ id: 1, url: '/image/nuic/style-1.png', active: false },
|
||||
{ id: 2, url: '/image/nuic/style-2.png', active: false },
|
||||
{ id: 3, url: '/image/nuic/style-3.png', active: false },
|
||||
{ id: 4, url: '/image/nuic/style-4.png', active: false },
|
||||
{ id: 5, url: '/image/nuic/style-5.png', active: false },
|
||||
{ id: 6, url: '/image/nuic/style-6.png', active: false },
|
||||
{ id: 7, url: '/image/nuic/style-7.png', active: false },
|
||||
{ id: 8, url: '/image/nuic/style-8.png', active: false }
|
||||
{ id: 1, url: '/image/nuic/style-1.png', title: '凳子', active: false },
|
||||
{ id: 2, url: '/image/nuic/style-2.png', title: '沙发', active: false },
|
||||
{ id: 3, url: '/image/nuic/style-3.png', title: '凳子', active: false },
|
||||
{ id: 4, url: '/image/nuic/style-4.png', title: '桌子', active: false },
|
||||
{ id: 5, url: '/image/nuic/style-5.png', title: '桌子', active: false },
|
||||
{ id: 6, url: '/image/nuic/style-6.png', title: '桌子', active: false },
|
||||
{ id: 7, url: '/image/nuic/style-7.png', title: '沙发', active: false },
|
||||
{ id: 8, url: '/image/nuic/style-8.png', title: '桌子', active: false }
|
||||
])
|
||||
const onLoadMore = () => {}
|
||||
</script>
|
||||
|
||||
@@ -77,17 +77,16 @@
|
||||
color: #252727;
|
||||
font-family: LBold;
|
||||
}
|
||||
> .el-select {
|
||||
&:deep(> .el-select) {
|
||||
width: 100%;
|
||||
--el-border-radius-base: 0.8rem;
|
||||
&:deep {
|
||||
font-family: Regular;
|
||||
.el-select__wrapper {
|
||||
min-height: auto;
|
||||
height: 6rem;
|
||||
font-size: 2rem;
|
||||
padding: 0 1.8rem;
|
||||
}
|
||||
|
||||
font-family: Regular;
|
||||
.el-select__wrapper {
|
||||
min-height: auto;
|
||||
height: 6rem;
|
||||
font-size: 2rem;
|
||||
padding: 0 1.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user