123123

src/components/FooterNavigation.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+	import { computed } from 'vue'
+	import { useRouter } from 'vue-router'
+	const router = useRouter()
+	const currentRoute = computed(() => router.currentRoute.value.path)
+
+	defineProps({
+		/** 是否显示占位符 */
+		isPlaceholder: { type: Boolean, default: false }
+	})
+
+	const handleClickReturn = () => {
+		router.back()
+		// emit('clickReturn')
+	}
+	const navs = [
+		{ label: 'Home', icon: 'home', size: 73, path: '/home' },
+		{ label: 'Library', icon: 'library', size: 53, path: '/workshop/library' },
+		{ label: 'Profile', icon: 'profile', size: 55, path: '/workshop/creation' }
+	]
+	const onNavClick = (nav) => {
+		if (currentRoute.value !== nav.path) router.push(nav.path)
+	}
+</script>
+
+<template>
+	<div class="footer-navigation main">
+		<div
+			v-for="nav in navs"
+			:key="nav.path"
+			:class="{ active: currentRoute === nav.path }"
+			@click="onNavClick(nav)"
+		>
+			<SvgIcon :name="nav.icon" size="55" />
+			<span class="label">{{ nav.label }}</span>
+		</div>
+	</div>
+	<div class="footer-navigation placeholder" v-show="isPlaceholder"></div>
+</template>
+
+<style scoped lang="less">
+	.footer-navigation {
+		width: 100%;
+		height: var(--footer-navigation-height, 14.9rem);
+	}
+	.footer-navigation.main {
+		position: fixed;
+		bottom: 0;
+		z-index: var(--footer-navigation-z-index, 999);
+		background-color: var(--footer-navigation-background, #fff);
+		box-shadow: -2.6rem -1.4rem 3.47rem 0 rgba(0, 0, 0, 0.05);
+		display: flex;
+		align-items: center;
+		justify-content: space-evenly;
+		> div {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			&.active > * {
+				color: #0d99ff;
+			}
+			> .label {
+				margin-top: 1.6rem;
+				font-family: satoshiRegular;
+				font-weight: 500;
+				font-size: 2.4rem;
+				line-height: 89%;
+			}
+		}
+	}
+</style>