first commit

2025-09-12 17:23:03 +08:00
parent a36ae8503a
commit 78f7c3b999
197 changed files with 34011 additions and 0 deletions
--- a/components/Tabbar/Tabbar.vue
+++ b/components/Tabbar/Tabbar.vue
@@ -0,0 +1,128 @@
+<template>
+	<view class="tabbar-list">
+		<view class="tabbar-item" :class="currentBg==1?'tabbar-item-active':''" @click="chanRoute(1)">
+			<image :src="currentBg==1?`/static/tabbar/1-active.png`:`/static/tabbar/1.png`" alt="消息"
+				:class="currentBg==1?'item-image-active':'item-image'" />
+			<div class="item-text item-text-active"><span>消息</span></div>
+		</view>
+		<view class="tabbar-item" :class="currentBg==2?'tabbar-item-active':''" @click="chanRoute(2)">
+			<image :src="currentBg==2?`/static/tabbar/2-active.png`:`/static/tabbar/2.png`" alt="项目"
+				:class="currentBg==2?'item-image-active':'item-image'" />
+			<div class="item-text"><span>项目</span></div>
+		</view>
+		<view class="tabbar-item" :class="currentBg==3?'tabbar-item-active':''" @click="chanRoute(3)">
+			<image :src="currentBg==3?`/static/tabbar/3-active.png`:`/static/tabbar/3.png`" alt="主页"
+				:class="currentBg==3?'item-image-active':'item-image'" />
+			<div class="item-text"><span>主页</span></div>
+		</view>
+		<view class="tabbar-item" :class="currentBg==4?'tabbar-item-active':''" @click="chanRoute(4)">
+			<image :src="currentBg==4?`/static/tabbar/4-active.png`:`/static/tabbar/4.png`" alt="金融"
+				:class="currentBg==4?'item-image-active':'item-image'" />
+			<div class="item-text"><span>金融</span></div>
+		</view>
+		<view class="tabbar-item" :class="currentBg==5?'tabbar-item-active':''" @click="chanRoute(5)">
+			<image :src="currentBg==5?`/static/tabbar/5-active.png`:`/static/tabbar/5.png`" alt="我的"
+				:class="currentBg==5?'item-image-active':'item-image'" />
+			<div class="item-text"><span>我的</span></div>
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+	import { ref, reactive } from 'vue';
+	
+	interface Props{
+		currentTab : number
+	}
+	
+	// 图片列表
+	const currentBg = ref(1);
+
+	const chanRoute = (val : number) => {
+		currentBg.value = val
+		switch (val) {
+			case 1:
+				uni.navigateTo({
+					url: '/pages/message/message'
+				})
+				break;
+			case 2:
+				uni.navigateTo({
+					url: '/pages/program/program'
+				})
+				break;
+			case 3:
+				uni.navigateTo({
+					url: '/pages/home/index'
+				})
+				break;
+			case 4:
+				uni.navigateTo({
+					url: '/pages/finance/finance'
+				})
+				break;
+			case 5:
+				uni.navigateTo({
+					url: '/pages/my/my'
+				})
+				break;
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.tabbar-list {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		background-size: cover;
+		background-position: center;
+		background-repeat: no-repeat;
+		display: flex;
+		justify-content: space-around;
+		align-items: center;
+		z-index: 1000;
+		padding-bottom: env(safe-area-inset-bottom);
+		height: 140rpx;
+		background-size: 100% 100%;
+		padding: 10rpx 0;
+		background-color: #4873ff;
+
+
+		.tabbar-item {
+			display: flex;
+			width: 20%;
+			height: 100%;
+			position: relative;
+			flex-direction: column;
+			align-items: center;
+			justify-content: space-between;
+
+			.item-image {
+				width: 100rpx;
+				height: 100rpx;
+			}
+
+			.item-image-active {
+				width: 120rpx;
+				height: 130rpx;
+				border-radius: 50%;
+				padding: 10rpx;
+				background-color: #4873ff;
+			}
+
+			.item-text {
+				text-wrap: nowrap;
+				font-size: 25rpx;
+				font-weight: 700;
+				color: white;
+			}
+		}
+
+		.tabbar-item-active {
+			height: 150rpx;
+			transform: translateY(-50rpx);
+		}
+	}
+</style>