+
+
+
+
+
+
+
+
+ 
-
+
diff --git a/src/views/nuic/index.vue b/src/views/nuic/index.vue
index 6b787db..8d453c9 100644
--- a/src/views/nuic/index.vue
+++ b/src/views/nuic/index.vue
@@ -1,7 +1,7 @@
-
+
- ![]()
@@ -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 = () => {}
diff --git a/src/views/nuic/nuic-3.vue b/src/views/nuic/nuic-3.vue
index 906044c..a7a4241 100644
--- a/src/views/nuic/nuic-3.vue
+++ b/src/views/nuic/nuic-3.vue
@@ -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;
}
}
}
-
+
-
- 
- 
+
@@ -49,7 +52,7 @@
loading.value = true
setTimeout(() => {
router.push({ name: 'mainInput' })
- }, 1000)
+ }, 5000)
}
}
@@ -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);
}
}
}
diff --git a/src/views/nuic/nuic-2.vue b/src/views/nuic/nuic-2.vue
index 63717d8..d461e78 100644
--- a/src/views/nuic/nuic-2.vue
+++ b/src/views/nuic/nuic-2.vue
@@ -5,7 +5,7 @@
- {{ $t('Nuic.loadingTip') }}
+
+
+
+
+
+ {{ $t('Nuic.loadingTip') }}
- 这是一段文字
+ {{ v.title }}