新用户信息收集

src/views/nuic/index.vue

@@ -0,0 +1,149 @@
+<template>
+	<div class="nuic background-pink">
+		<div class="logo">
+			<img src="@/assets/images/logo.png" />
+			<span>FiDA</span>
+		</div>
+		<div class="header">
+			<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="view" :is="list[active]" @next="onNext" />
+	</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 onClose = () => {
+		router.push({ name: 'home' })
+	}
+	const onNext = () => {
+		const index = active.value + 1
+		if (index < list.length) {
+			router.push({ query: { index } })
+		} else {
+			router.push({ name: 'home' })
+		}
+	}
+</script>
+
+<style lang="less" scoped>
+	.nuic {
+		width: 100%;
+		height: 100%;
+		overflow: hidden;
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		// align-items: center;
+		// justify-content: center;
+		> .logo {
+			position: absolute;
+			top: 3.8rem;
+			left: 3.8rem;
+
+			> img {
+				width: 6rem;
+				height: auto;
+			}
+
+			> span {
+				font-weight: 600;
+				font-size: 3.3rem;
+			}
+		}
+		> .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;
+				}
+			}
+		}
+		&::v-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;
+					&:last-child {
+						margin-right: 0;
+					}
+					&.skip {
+						color: #8d8d8d;
+					}
+					&:active {
+						opacity: 0.8;
+					}
+				}
+			}
+		}
+	}
+</style>