FiDA_Front/src/views/nuic/index.vue

<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>