新用户信息收集

2026-02-04 15:30:33 +08:00
parent b526c249e8
commit ea01192068
18 changed files with 409 additions and 1 deletions
--- a/src/views/nuic/nuic-2.vue
+++ b/src/views/nuic/nuic-2.vue
@@ -0,0 +1,107 @@
+<template>
+	<div class="nuic-2">
+		<!-- <img src="@/assets/images/nuic/nuic-1-bg.png" /> -->
+		<p class="title">What's your dream <b>home vibe</b> ?</p>
+		<div class="list">
+			<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>Constructivism</span>
+				</div>
+			</div>
+		</div>
+		<div class="btns">
+			<button class="more" @click="onLoadMore">
+				<span>Load more</span>
+				<div><svg-icon name="refresh-single" size="24" /></div>
+			</button>
+			<button class="next" @click="emit('next')">Next</button>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { computed, ref } from 'vue'
+	import { useRouter } from 'vue-router'
+	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 }
+	])
+	const onLoadMore = () => {
+
+	}
+</script>
+
+<style lang="less" scoped>
+	.nuic-2 {
+		> .title {
+			font-weight: 500;
+			font-size: 4rem;
+			margin-bottom: 6rem;
+			> b {
+				font-size: 4.8rem;
+			}
+		}
+		> .list {
+			margin-bottom: 13rem;
+			display: grid;
+			grid-template-columns: repeat(4, 1fr);
+			user-select: none;
+			grid-gap: 3rem;
+			> div {
+				width: 21.9rem;
+				height: 21.9rem;
+				position: relative;
+				> img {
+					width: 100%;
+					height: 100%;
+					border-radius: 1.6rem;
+				}
+				> .active {
+					position: absolute;
+					z-index: 1;
+					width: 100%;
+					height: 100%;
+					top: 0;
+					left: 0;
+					border-radius: 1.6rem;
+					border: 0.4rem solid #ff945e;
+					background: linear-gradient(
+						180deg,
+						rgba(255, 255, 255, 0) 0%,
+						rgba(255, 138, 140, 0.09) 68.75%,
+						#f98848 100%
+					);
+					display: flex;
+					flex-direction: column-reverse;
+					> span {
+						font-weight: 600;
+						font-size: 2rem;
+						color: #fff;
+						margin-bottom: 1rem;
+						text-shadow: 1px 1px 4.7px #d9692b;
+					}
+				}
+			}
+		}
+		> .btns {
+			> .more {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				>span{
+					margin-right: 1.2rem;
+				}
+				
+			}
+		}
+	}
+</style>