nuic home动画
This commit is contained in:
@@ -1,6 +1,12 @@
|
||||
<template>
|
||||
<div class="view-404">
|
||||
<p>404 Not Found</p>
|
||||
<!-- <p>404 Not Found</p> -->
|
||||
|
||||
<div class="demo">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -10,6 +16,8 @@
|
||||
|
||||
<style lang="less">
|
||||
.view-404 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
> p {
|
||||
margin-top: 5rem;
|
||||
@@ -17,5 +25,68 @@
|
||||
font-size: 3rem;
|
||||
color: #0094ff;
|
||||
}
|
||||
> .demo {
|
||||
position: absolute;
|
||||
width: 127rem;
|
||||
height: 72.6rem;
|
||||
opacity: 0.8;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%) translateY(80%);
|
||||
> div {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
}
|
||||
> div:nth-child(1) {
|
||||
width: 48.4rem;
|
||||
height: 57.2rem;
|
||||
top: 2.3rem;
|
||||
left: 0rem;
|
||||
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%
|
||||
);
|
||||
transform: matrix(-0.16, -0.99, 0.97, -0.24, 0, 0);
|
||||
filter: blur(11.5rem);
|
||||
}
|
||||
> div:nth-child(2) {
|
||||
width: 44.6rem;
|
||||
height: 56.8rem;
|
||||
left: 56.6rem;
|
||||
top: 0rem;
|
||||
|
||||
background: conic-gradient(
|
||||
from 94.36deg at 71.77% 41.01%,
|
||||
#f2abb4 0deg,
|
||||
#ff6175 100.75deg,
|
||||
#fe3b53 179.32deg,
|
||||
#ff6175 252deg,
|
||||
#f2abb4 360deg
|
||||
);
|
||||
transform: matrix(0.75, -0.66, 0.65, 0.76, 0, 0);
|
||||
filter: blur(12.927rem);
|
||||
}
|
||||
> div:nth-child(3) {
|
||||
width: 79.958rem;
|
||||
height: 28.1rem;
|
||||
left: 11.724rem;
|
||||
top: 12.353rem;
|
||||
|
||||
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%
|
||||
);
|
||||
transform: matrix(-1, 0.05, -0.03, -1, 0, 0);
|
||||
filter: blur(13.17rem);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -26,7 +26,6 @@
|
||||
import To3DModel from './to-3d-model.vue'
|
||||
import AddPrint from './add-print.vue'
|
||||
import ToCAD from './to-cad.vue'
|
||||
|
||||
import EditMaterial from './edit-material.vue'
|
||||
const components = [
|
||||
{
|
||||
|
||||
@@ -1,5 +1,14 @@
|
||||
<template>
|
||||
<div class="home background-pink">
|
||||
<div class="bg bg-1">
|
||||
<div class="topright"></div>
|
||||
<div class="bottomleft"></div>
|
||||
</div>
|
||||
<div class="bg bg-2">
|
||||
<div class="bottom-1"></div>
|
||||
<div class="bottom-2"></div>
|
||||
<div class="bottom-3"></div>
|
||||
</div>
|
||||
<div class="home">
|
||||
<left-nav />
|
||||
<div class="right-main">
|
||||
<top-nav />
|
||||
@@ -38,4 +47,150 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
.bg-1 {
|
||||
z-index: -1;
|
||||
}
|
||||
.bg-2 {
|
||||
@keyframes bg-2 {
|
||||
0% {
|
||||
z-index: 10;
|
||||
}
|
||||
100% {
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
animation: bg-2 0.5s ease-in-out 1 both;
|
||||
}
|
||||
.bg {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// background-color: rgba(248, 247, 245, 1);
|
||||
> * {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
}
|
||||
> .topright {
|
||||
width: 174.7rem;
|
||||
height: 42.1rem;
|
||||
top: -15.7rem;
|
||||
right: -70rem;
|
||||
|
||||
background: linear-gradient(
|
||||
86.85deg,
|
||||
rgba(244, 147, 116, 0.6) 13.62%,
|
||||
rgba(241, 193, 145, 0.6) 25.57%,
|
||||
rgba(255, 178, 91, 0.582) 41.03%,
|
||||
rgba(242, 173, 126, 0.6) 59.37%,
|
||||
rgba(255, 232, 200, 0.6) 75.27%
|
||||
);
|
||||
opacity: 0.2;
|
||||
filter: blur(20.7656rem);
|
||||
transform: rotate(178.95deg);
|
||||
}
|
||||
> .bottomleft {
|
||||
// border-radius: 0;
|
||||
// border: 1px solid #000;
|
||||
width: 62.418rem;
|
||||
height: 68.245rem;
|
||||
left: -30rem;
|
||||
bottom: 0;
|
||||
|
||||
background: linear-gradient(
|
||||
161.16deg,
|
||||
rgba(132, 230, 255, 0.2) 14.98%,
|
||||
rgba(255, 223, 142, 0.2) 68.79%
|
||||
);
|
||||
filter: blur(8.263rem);
|
||||
transform: rotate(-25.36deg);
|
||||
}
|
||||
> .bottom-1 {
|
||||
animation: bottom-1 0.5s ease-in-out 1 both;
|
||||
background: linear-gradient(
|
||||
87.58deg,
|
||||
rgba(241, 193, 145, 0.8) 23.02%,
|
||||
rgba(255, 178, 91, 0.776) 35.36%,
|
||||
rgba(244, 147, 116, 0.8) 56.32%,
|
||||
rgba(242, 173, 126, 0.8) 67.34%,
|
||||
rgba(255, 232, 200, 0.8) 82.74%
|
||||
);
|
||||
filter: blur(13.17rem);
|
||||
transform: matrix(-1, 0.03, -0.05, -1, 0, 0);
|
||||
}
|
||||
> .bottom-2 {
|
||||
animation: bottom-2 0.5s ease-in-out 1 both;
|
||||
|
||||
background: conic-gradient(
|
||||
from 94.36deg at 71.77% 41.01%,
|
||||
rgba(242, 171, 180, 0.2) 0deg,
|
||||
rgba(255, 105, 117, 0.2) 100.75deg,
|
||||
rgba(254, 59, 83, 0.2) 179.32deg,
|
||||
rgba(255, 105, 117, 0.2) 252deg,
|
||||
rgba(242, 171, 180, 0.2) 360deg
|
||||
);
|
||||
filter: blur(12.927rem);
|
||||
transform: matrix(-0.05, 1, -1, -0.03, 0, 0);
|
||||
}
|
||||
> .bottom-3 {
|
||||
animation: bottom-3 0.5s ease-in-out 1 both;
|
||||
background: linear-gradient(
|
||||
130.72deg,
|
||||
rgba(242, 171, 180, 0.24) 29.52%,
|
||||
rgba(234, 133, 200, 0.24) 39.73%,
|
||||
rgba(238, 64, 173, 0.24) 55.81%,
|
||||
rgba(234, 133, 158, 0.24) 69.59%,
|
||||
rgba(242, 171, 180, 0.24) 82.61%
|
||||
);
|
||||
filter: blur(11.5411rem);
|
||||
transform: matrix(-0.26, -0.97, 0.99, -0.15, 0, 0);
|
||||
}
|
||||
@keyframes bottom-1 {
|
||||
0% {
|
||||
width: 15rem;
|
||||
height: 15rem;
|
||||
left: 50%;
|
||||
bottom: 50%;
|
||||
transform: translate(0, 50%);
|
||||
}
|
||||
100% {
|
||||
width: 138.014rem;
|
||||
height: 29.323rem;
|
||||
left: 32.123rem;
|
||||
bottom: -21rem;
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
@keyframes bottom-2 {
|
||||
0% {
|
||||
width: 15rem;
|
||||
height: 15rem;
|
||||
left: 50%;
|
||||
bottom: 50%;
|
||||
transform: translate(0, 50%);
|
||||
}
|
||||
100% {
|
||||
width: 42.215rem;
|
||||
height: 98.009rem;
|
||||
left: 150rem;
|
||||
bottom: -65rem;
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
@keyframes bottom-3 {
|
||||
0% {
|
||||
width: 15rem;
|
||||
height: 15rem;
|
||||
left: 50%;
|
||||
bottom: 50%;
|
||||
transform: translate(0, 50%);
|
||||
}
|
||||
100% {
|
||||
width: 51.936rem;
|
||||
height: 97.139rem;
|
||||
left: 40rem;
|
||||
bottom: -65rem;
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
<img src="@/assets/images/logo-1.png" class="logo" />
|
||||
<p class="split"></p>
|
||||
<button class="login" @click="onLogin">{{ $t('Login.login') }}</button>
|
||||
<button class="register" @click="onRegister">{{ $t('Login.signUp') }}</button>
|
||||
<button class="register" @click="onRegister">{{ $t('Login.register') }}</button>
|
||||
</div>
|
||||
<img src="@/assets/images/login/index-title.png" class="title" draggable="false" />
|
||||
<img src="@/assets/images/login/index-zhuangshi.png" class="zhuangshi" draggable="false" />
|
||||
|
||||
@@ -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