修改导航栏

components/footerBar.vue

@@ -1,37 +1,37 @@
 <template>
 	<view class="static-footer-bar" :style="{ 'padding-bottom': safeAreaInsets.bottom + 'px' }">
-		<view class="static-footer-li ellipsis" @click="tabChange(1)">
-			<image src="../static/footBar-image/c1.png" class="static-footer-li-icon" v-if="type != 'home'"></image>
-			<image src="../static/footBar-image/logo.png" class="static-footer-li-icon" v-if="type == 'home'"></image>
+		<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 ellipsis" @click="tabChange(2)">
-			<image src="../static/footBar-image/c2.png" class="static-footer-li-icon" v-if="type != 'marketSituation'">
+		<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/logo.png" class="static-footer-li-icon"
+			<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 ellipsis" @click="tabChange(3)">
-			<image src="../static/footBar-image/logo.png" class="static-footer-li-icon" v-if="type != 'deepMate'"></image>
-			<image src="../static/footBar-image/logo.png" class="static-footer-li-icon" v-if="type == 'deepMate'">
+		<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 ellipsis" @click="tabChange(4)">
-			<image src="../static/footBar-image/c4.png" class="static-footer-li-icon" v-if="type != 'deepExploration'">
+		<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/logo.png" class="static-footer-li-icon"
+			<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 ellipsis" @click="tabChange(5)">
-			<image src="../static/footBar-image/c5.png" class="static-footer-li-icon" v-if="type != 'member'"></image>
-			<image src="../static/footBar-image/logo.png" class="static-footer-li-icon" v-if="type == 'member'"></image>
+		<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>
@@ -100,9 +100,10 @@ onMounted(() => {
 <style scoped>
 .static-footer-bar {
 	width: 100%;
-	height: 100rpx;
+	height: 120rpx;
 	border-top: 1px solid #E2E2E2;
 	background: #fff;
+	position: relative;
 }
 
 .static-footer-li {
@@ -111,6 +112,7 @@ onMounted(() => {
 	height: 100%;
 	text-align: center;
 	position: relative;
+	transform: translateY(-12rpx);
 }
 
 .static-footer-li-icon {
@@ -119,6 +121,22 @@ onMounted(() => {
 	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;