uniapp自定义tabbar

<view class="footer">
			<view class="list" @click="tar(1,'/pages/home/home')">
				<image
					:src="page == 1 ?url+'/uploads/20231103/590a63312af28aded880a609c1b0f316.png':url+'/uploads/20231103/58b703f125cb0cdcd4ea87665fe6c5db.png'"
					mode=""></image>
				<p :class="page == 1 ? 'page' :'pages'">首页</p>
			</view>
			<view class="list" @click="tar(2,'/intro/intro')">
				<image
					:src="page == 2 ?url+'/uploads/20231103/e50897e71cd469f4833b7669007265ec.png':url+'/uploads/20231103/7f70268dc88242e4e3ae574d84a3cb6e.png'"
					mode=""></image>
				<p :class="page == 2 ? 'page' :'pages'">攻略</p>
			</view>
			<view class="lists">
				<view class="arount">
					<view class="rount">
						<image :class="status == true ? 'rockets' : 'rocket' " @click="rocket"
							:src="url+'/uploads/20231103/e774ff4e386bf2f88b4d2ac96c963250.png'" mode=""></image>
					</view>
					<p>发布</p>
				</view>
			</view>
			<view class="list" @click="tar(3,'/charts/charts')">
				<image
					:src="page == 3 ?url+'/uploads/20231103/06b506537b3d6e23441278555f51a4c9.png':url+'/uploads/20231103/8fc440c437908095de05c1b069f2b264.png'"
					mode=""></image>
				<p :class="page == 3 ? 'page' :'pages'">排行榜</p>
			</view>
			<view class="list" @click="tar(4,'/charts/charts')">
				<image
					:src="page == 4 ?url+'/uploads/20231103/852882a6a3dc026029085419860a6e59.png':url+'/uploads/20231103/2fd39d16812070f766c13e07422d7720.png'"
					mode=""></image>
				<p :class="page == 4 ? 'page' :'pages'">我的</p>
			</view>
		</view>

export default {
		data() {
			return {
				page: getApp().globalData.page,
			}
		}
	}

/* 底部导航栏 */
	.footer {
		width: 100%;
		display: flex;
		justify-content: space-between;
		background-color: #ffffff;
		height: 100rpx;
		position: fixed;
		bottom: 0px;
		align-items: center;
	}

	.list {
		width: 23%;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		flex-wrap: wrap;
	}

	.pages {
		width: 100%;
		text-align: center;
		font-size: 10px;
	}

	.page {
		width: 100%;
		text-align: center;
		color: red;
		font-size: 10px;
	}

	.list image {
		width: 40rpx;
		height: 40rpx;
	}

	.rount {
		width: 120rpx;
		height: 120rpx;
		border-radius: 100px;
		background-color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 1px 1px 2px 1px #f9f9f9, -1px -1px 2px 1px #f9f9f9;
	}

	.rocket {
		width: 80%;
		height: 6vh;
		margin-bottom: 10rpx;
		transition: all 1s;
	}

	.rockets {
		width: 80%;
		height: 6vh;
		margin-bottom: 200vh;
		transition: all 1s;
	}

	.arount {
		margin-bottom: 90rpx;
		text-align: center;
	}

	.arount p {
		margin-top: 10rpx;
	}