deepChartVueApp/components/footerBar.vue

<template>
<!-- #ifdef H5 -->
	<view class="static-footer-bar" :style="{ 'padding-bottom': safeAreaInsets.bottom + 'px' }">
		<view class="static-footer-li" @click="tabChange(1)">
			<image src="../static/footBar-image/home.png" class="static-footer-li-icon" v-if="type != 'home'"></image>
			<image src="../static/footBar-image/home-selected.png" class="static-footer-li-icon" v-if="type == 'home'"></image>
			<view :class="type == 'home' ? 'static-footer-li-title1' : 'static-footer-li-title'">
				首页</view>
		</view>
		<view class="static-footer-li" @click="tabChange(2)">
			<image src="../static/footBar-image/marketSituation.png" class="static-footer-li-icon" v-if="type != 'marketSituation'">
			</image>
			<image src="../static/footBar-image/marketSituation-selected.png" class="static-footer-li-icon"
				v-if="type == 'marketSituation'"></image>
			<view :class="type == 'marketSituation' ? 'static-footer-li-title1' : 'static-footer-li-title'">
				行情</view>
		</view>
		<view class="static-footer-li static-footer-li-special" @click="tabChange(3)">
			<image src="../static/footBar-image/deepMate.png" class="static-footer-li-icon static-footer-li-icon-special" v-if="type != 'deepMate'"></image>
			<image src="../static/footBar-image/deepMate-selected.png" class="static-footer-li-icon static-footer-li-icon-special" v-if="type == 'deepMate'">
			</image>
			<view :class="type == 'deepMate' ? 'static-footer-li-title1' : 'static-footer-li-title'">
				DeepMate</view>
		</view>
		<view class="static-footer-li" @click="tabChange(4)">
			<image src="../static/footBar-image/deepExploration.png" class="static-footer-li-icon" v-if="type != 'deepExploration'">
			</image>
			<image src="../static/footBar-image/deepExploration-selected.png" class="static-footer-li-icon"
				v-if="type == 'deepExploration'"></image>
			<view :class="type == 'deepExploration' ? 'static-footer-li-title1' : 'static-footer-li-title'">
				深度探索</view>
		</view>
		<view class="static-footer-li" @click="tabChange(5)">
			<image src="../static/footBar-image/member.png" class="static-footer-li-icon" v-if="type != 'member'"></image>
			<image src="../static/footBar-image/member-selected.png" class="static-footer-li-icon" v-if="type == 'member'"></image>
			<view :class="type == 'member' ? 'static-footer-li-title1' : 'static-footer-li-title'">
				我的</view>
		</view>
	</view>
<!-- #endif -->
 
 <!-- #ifndef H5 -->
	<view class="static-footer-bar" :style="{ 'padding-bottom': safeAreaInsets.bottom + 'px' }">
		<view class="static-footer-li" @click="tabChange(1)">
			<image src="../static/footBar-image/home.png" class="static-footer-li-icon" v-if="type != 'home'"></image>
			<image src="../static/footBar-image/home-selected.png" class="static-footer-li-icon" v-if="type == 'home'"></image>
			<view :class="type == 'home' ? 'static-footer-li-title1' : 'static-footer-li-title'">
				{{ $t('components.footerBar.homepage') }}</view>
		</view>
		<view class="static-footer-li" @click="tabChange(2)">
			<image src="../static/footBar-image/marketSituation.png" class="static-footer-li-icon" v-if="type != 'marketSituation'">
			</image>
			<image src="../static/footBar-image/marketSituation-selected.png" class="static-footer-li-icon"
				v-if="type == 'marketSituation'"></image>
			<view :class="type == 'marketSituation' ? 'static-footer-li-title1' : 'static-footer-li-title'">
				{{ $t('components.footerBar.marketSituation') }}</view>
		</view>
		<view class="static-footer-li static-footer-li-special" @click="tabChange(3)">
			<image src="../static/footBar-image/deepMate.png" class="static-footer-li-icon static-footer-li-icon-special" v-if="type != 'deepMate'"></image>
			<image src="../static/footBar-image/deepMate-selected.png" class="static-footer-li-icon static-footer-li-icon-special" v-if="type == 'deepMate'">
			</image>
			<view :class="type == 'deepMate' ? 'static-footer-li-title1' : 'static-footer-li-title'">
				{{ $t('components.footerBar.deepMate') }}</view>
		</view>
		<view class="static-footer-li" @click="tabChange(4)">
			<image src="../static/footBar-image/deepExploration.png" class="static-footer-li-icon" v-if="type != 'deepExploration'">
			</image>
			<image src="../static/footBar-image/deepExploration-selected.png" class="static-footer-li-icon"
				v-if="type == 'deepExploration'"></image>
			<view :class="type == 'deepExploration' ? 'static-footer-li-title1' : 'static-footer-li-title'">
				{{ $t('components.footerBar.deepExploration') }}</view>
		</view>
		<view class="static-footer-li" @click="tabChange(5)">
			<image src="../static/footBar-image/member.png" class="static-footer-li-icon" v-if="type != 'member'"></image>
			<image src="../static/footBar-image/member-selected.png" class="static-footer-li-icon" v-if="type == 'member'"></image>
			<view :class="type == 'member' ? 'static-footer-li-title1' : 'static-footer-li-title'">
				{{ $t('components.footerBar.member') }}</view>
		</view>
	</view>
	<!-- #endif -->

</template>

<script setup>
import { computed, onMounted } from 'vue'

// 定义 props
const props = defineProps({
	type: {
		type: String,
		default: ''
	}
})

// 计算属性：获取安全区域
const safeAreaInsets = computed(() => {
	// 获取系统信息中的安全区域
	const systemInfo = uni.getSystemInfoSync()
	return {
		bottom: systemInfo.safeAreaInsets?.bottom || 0
	}
})

// 方法：标签切换
const tabChange = (value) => {
	// console.log(value)
	if (value == 1) { //首页
		uni.redirectTo({
			url: '/pages/home/home',
			animationType: 'fade-in'
		})
	} else if (value == 2) { //行情
		uni.redirectTo({
			url: '/pages/marketSituation/marketSituation',
			animationType: 'fade-in'
		})
	} else if (value == 3) { //DeepMate
		uni.redirectTo({
			url: '/pages/deepMate/deepMate',
			animationType: 'fade-in'
		})
	} else if (value == 4) { //深度探索
		if (props.type == 'deepExploration') return;
		uni.redirectTo({
			url: '/pages/deepExploration/deepExploration',
			animationType: 'fade-in'
		})
	} else if (value == 5) { //我的
		if (props.type == 'member') return;
		uni.redirectTo({
			url: '/pages/home/member',
			animationType: 'fade-in'
		})
	}
}

// 生命周期
onMounted(() => {
	// 组件挂载后的逻辑
})
</script>

<style scoped>
.static-footer-bar {
	width: 100%;
	height: 120rpx;
	border-top: 1px solid #E2E2E2;
	background: #fff;
	position: relative;
}

.static-footer-li {
	display: inline-block;
	width: 20%;
	height: 100%;
	text-align: center;
	position: relative;
	transform: translateY(-12rpx);
}

.static-footer-li-icon {
	width: 46rpx;
	height: 46rpx;
	margin: 12rpx 0;
}

/* 中间导航项的特殊样式 */
.static-footer-li-special {
	position: relative;
	z-index: 10;
}

.static-footer-li-icon-special {
	width: 95rpx !important;
	height: 95rpx !important;
	margin: 0rpx 0 !important;
	border-radius: 50rpx;
	box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.2);
	transform: translateY(-12rpx);
	transition: all 0.3s ease;
}

.static-footer-li-title {
	width: 100%;
	height: 40rpx;
	line-height: 40rpx;
	font-size: 24rpx;
	text-align: center;
	margin-top: -20rpx;
	color: gray;
}

.static-footer-li-title1 {
	width: 100%;
	height: 40rpx;
	line-height: 40rpx;
	font-size: 24rpx;
	text-align: center;
	margin-top: -20rpx;
	color: black;
}

.unreadNum {
	position: absolute;
	right: 15%;
	background-color: #f00;
	color: #fff;
	font-size: 24rpx;
	padding: 0 6rpx;
	height: 36rpx;
	line-height: 36rpx;
	min-width: 36rpx;
	border-radius: 18rpx;
	z-index: 9;
}

.taskNew {
	position: absolute;
	right: 15%;
	height: 30rpx;
	z-index: 9;
}

.homeWorkUnRead {
	position: absolute;
	right: 30%;
	top: 10%;
	background-color: #f00;
	color: #fff;
	height: 12rpx;
	width: 12rpx;
	border-radius: 6rpx;
	z-index: 9;
}
</style>