1

components/ie-bottom-tab/ie-bottom-tab.vue

@@ -0,0 +1,155 @@
+<template>
+	<view>
+		<view class="safe-tip" v-if="showTip">请勿发送涉黄、涉暴、反动、侮辱等内容，违规会被封禁</view>
+		<view class="bottom-actions">
+			<view class="bottom-item" :class="{ active: active === 'index' }" @tap="goTab('index')">
+				<text class="tab-icon">🪐</text>
+				<text>此刻</text>
+			</view>
+			<view class="bottom-item message-tab" :class="{ active: active === 'messages' }" @tap="goTab('messages')">
+				<text class="tab-icon">💬</text>
+				<text>消息</text>
+				<text class="unread-badge" v-if="displayUnreadCount > 0">{{ unreadText }}</text>
+			</view>
+			<view class="bottom-item" :class="{ active: active === 'universe' }" @tap="goTab('universe')">
+				<text class="tab-icon">🌙</text>
+				<text>我的</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	const TAB_PATHS = {
+		index: '/package1/ieBrowser/index',
+		messages: '/package1/ieBrowser/messages',
+		universe: '/package1/ieBrowser/universe'
+	}
+
+	export default {
+		name: 'IeBottomTab',
+		props: {
+			active: {
+				type: String,
+				default: 'index'
+			},
+			unreadCount: {
+				type: Number,
+				default: 0
+			},
+			showTip: {
+				type: Boolean,
+				default: true
+			}
+		},
+		computed: {
+			displayUnreadCount() {
+				return Number(this.unreadCount) || 0
+			},
+			unreadText() {
+				return this.displayUnreadCount > 99 ? '99+' : String(this.displayUnreadCount)
+			}
+		},
+		methods: {
+			goTab(tab) {
+				if (tab === this.active) return
+				const path = TAB_PATHS[tab]
+				if (!path) return
+				uni.redirectTo({
+					url: path + '?unreadCount=' + encodeURIComponent(String(this.displayUnreadCount))
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.safe-tip {
+		position: fixed;
+		left: 36rpx;
+		right: 36rpx;
+		bottom: 142rpx;
+		z-index: 10;
+		padding: 12rpx 18rpx;
+		border-radius: 22rpx;
+		text-align: center;
+		color: rgba(22, 27, 46, .5);
+		background: rgba(255, 255, 255, .74);
+		border: 1rpx solid rgba(255, 255, 255, .9);
+		backdrop-filter: blur(18rpx);
+		box-shadow: 0 14rpx 38rpx rgba(96, 112, 160, .1);
+		font-size: 20rpx;
+		line-height: 28rpx;
+		font-weight: 700;
+	}
+
+	.bottom-actions {
+		position: fixed;
+		left: 30rpx;
+		right: 30rpx;
+		bottom: 30rpx;
+		z-index: 10;
+		display: flex;
+		padding: 12rpx;
+		border: 1rpx solid rgba(255, 255, 255, .92);
+		border-radius: 999rpx;
+		overflow: hidden;
+		background: rgba(255, 255, 255, .92);
+		backdrop-filter: blur(24rpx);
+		box-shadow: 0 24rpx 80rpx rgba(96, 112, 160, .18);
+	}
+
+	.bottom-item {
+		position: relative;
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		height: 80rpx;
+		border-radius: 999rpx;
+		color: rgba(22, 27, 46, .4);
+		font-size: 21rpx;
+		font-weight: 700;
+		transition: transform .16s ease, background .24s ease;
+	}
+
+	.bottom-item:active {
+		transform: scale(.94);
+	}
+
+	.bottom-item.active {
+		color: #161b2e;
+		background: linear-gradient(135deg, #eafff8, #a9ffe7);
+		box-shadow: 0 12rpx 30rpx rgba(169, 255, 231, .34), inset 0 1rpx 0 rgba(255, 255, 255, .95);
+	}
+
+	.tab-icon {
+		margin-bottom: 4rpx;
+		font-size: 30rpx;
+		filter: grayscale(1);
+		opacity: .55;
+	}
+
+	.bottom-item.active .tab-icon {
+		filter: none;
+		opacity: 1;
+	}
+
+	.unread-badge {
+		position: absolute;
+		right: 16rpx;
+		top: 2rpx;
+		min-width: 30rpx;
+		height: 30rpx;
+		line-height: 30rpx;
+		padding: 0 8rpx;
+		border-radius: 999rpx;
+		text-align: center;
+		color: #fff;
+		background: linear-gradient(135deg, #ff8ba0, #e85d75);
+		box-shadow: 0 8rpx 20rpx rgba(232, 93, 117, .28);
+		font-size: 18rpx;
+		font-weight: 900;
+	}
+</style>