增加晶全app静态页面

components/custom-navbar/custom-navbar.vue

@@ -0,0 +1,131 @@
+<template>
+	<view class="custom-navbar" :style="{ 
+	paddingTop: statusBarHeight + 'px',
+	color: color
+	}">
+		<!-- 左侧按钮 -->
+		<view class="navbar-left">
+			<slot name="left">
+				<!-- 返回按钮（独立点击事件） -->
+				<uni-icons type="left" v-if="showBack" size="26" color="rgba(255, 255, 255, 0.9)"
+					@click="handleBack"></uni-icons>
+			</slot>
+		</view>
+		<!-- 标题 -->
+		<view class="navbar-title" :style="{ color: color }">
+			<slot>{{ title }}</slot>
+		</view>
+		<!-- 右侧按钮 -->
+		<view class="navbar-right">
+			<slot name="right">
+				<!-- 默认显示文字 -->
+				<text v-if="rightText" :style="{ color: rightColor }" @click="handleRightClick">
+					{{ rightText }}
+				</text>
+				<!-- 或显示图标 -->
+				<image v-if="rightIcon" @click="handleRightClick" src="/static/images/path.png" mode="" class="pathIMG">
+				</image>
+			</slot>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			title: String,
+			showBack: {
+				type: Boolean,
+				default: false
+			},
+
+			backgroundColor: {
+				type: String,
+				default: '#FFFFFF' // 修改默认背景色为白色
+			},
+			color: {
+				type: String,
+				default: '#333333' // 修改默认文字色为深灰
+			},
+			rightText: String, // 右侧文字
+			rightIcon: {
+				type: Boolean,
+				default: false
+			},
+			rightColor: { // 右侧内容颜色
+				type: String,
+				default: '#FFFFFF'
+			},
+			rightIconSize: { // 图标大小
+				type: Number,
+				default: 24
+			}
+		},
+		data() {
+			return {
+				statusBarHeight: 0
+			}
+		},
+		created() {
+			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
+		},
+		methods: {
+			handleBack() {
+				uni.navigateBack()
+			},
+			handleRightClick() {
+				this.$emit('right-click'); // 触发右侧点击事件
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.custom-navbar {
+		display: flex;
+		align-items: center;
+		height: 70px;
+		position: fixed;
+		top: 0px;
+		left: 0;
+		right: 0;
+		z-index: 999;
+		line-height: 44px;
+		background-color: #121212 !important;
+	}
+
+	.navbar-left,
+	.navbar-right {
+		min-width: 100rpx;
+		/* 增大最小宽度 */
+		padding: 0 15px;
+		display: flex;
+		align-items: center;
+		gap: 10px;
+		/* 图标间距 */
+	}
+
+	.navbar-left {
+		justify-content: flex-start;
+	}
+
+	.navbar-right {
+		justify-content: flex-end;
+	}
+
+	.navbar-title {
+		flex: 1;
+		text-align: center;
+		font-size: 16px;
+	}
+
+	.icon {
+		width: 34px;
+		height: 34px;
+	}
+
+	.pathIMG {
+		width: 40rpx;
+		height: 40rpx;
+	}
+</style>