初始化参股

前端/components/nav-bar/nav-bar.uvue

@@ -0,0 +1,105 @@
+<template>
+	<view class="nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
+		<view class="nav-content" :style="{ height: navBarHeight + 'px' }">
+			<!-- 左侧返回按钮 -->
+			<view class="nav-left" v-if="showBack" @click="handleBack">
+				<text class="nav-back-icon">←</text>
+			</view>
+			<view class="nav-left" v-else></view>
+			
+			<!-- 标题 -->
+			<view class="nav-center">
+				<text class="nav-title" :style="{ color: titleColor }">{{ title }}</text>
+			</view>
+			
+			<!-- 右侧插槽 -->
+			<view class="nav-right">
+				<slot name="right"></slot>
+			</view>
+		</view>
+	</view>
+	
+	<!-- 占位高度 -->
+	<view :style="{ height: (statusBarHeight + navBarHeight) + 'px' }"></view>
+</template>
+
+<script setup lang="uts">
+	const props = defineProps<{
+		title ?: string
+		showBack ?: boolean
+		titleColor ?: string
+		bgColor ?: string
+	}>()
+	
+	// 状态栏高度
+	const statusBarHeight = ref(20)
+	// 导航栏高度
+	const navBarHeight = ref(44)
+	
+	onMounted(() => {
+		const sysInfo = uni.getSystemInfoSync()
+		statusBarHeight.value = sysInfo.statusBarHeight
+		// #ifdef MP-WEIXIN
+		const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
+		navBarHeight.value = (menuButtonInfo.top - sysInfo.statusBarHeight) * 2 + menuButtonInfo.height
+		// #endif
+	})
+	
+	const handleBack = () => {
+		uni.navigateBack({
+			fail: () => {
+				uni.switchTab({
+					url: '/pages/index/index'
+				})
+			}
+		})
+	}
+</script>
+
+<style lang="scss">
+	.nav-bar {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		background-color: #ffffff;
+		z-index: 999;
+	}
+	
+	.nav-content {
+		flex-direction: row;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0 24rpx;
+	}
+	
+	.nav-left {
+		width: 80rpx;
+		flex-direction: row;
+		align-items: center;
+	}
+	
+	.nav-back-icon {
+		font-size: 40rpx;
+		color: #333333;
+	}
+	
+	.nav-center {
+		flex: 1;
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.nav-title {
+		font-size: 34rpx;
+		font-weight: 600;
+		color: #333333;
+	}
+	
+	.nav-right {
+		width: 80rpx;
+		flex-direction: row;
+		align-items: center;
+		justify-content: flex-end;
+	}
+</style>