✨ feat:图标展示

.gitignore

@@ -0,0 +1 @@
+/unpackage/dist/

App.vue

@@ -14,15 +14,15 @@
 </script>
 
 <style lang="scss">
-	*{
+	view,scroll-view {
 		margin: 0;
 		padding: 0;
 		box-sizing: border-box;
 	}
-	
-	
+
 	/*每个页面公共 css */
 	@import '@/uni_modules/uni-scss/index.scss';
+
 	/* #ifndef APP-NVUE */
 	// 设置整个项目的背景色
 	page {
@@ -35,4 +35,4 @@
 		color: #333;
 		padding: 10px;
 	}
-</style>
+</style>

components/nav-bar/index.vue

@@ -0,0 +1,161 @@
+<template>
+	<view class="tab" :style="{ 
+			'--barheight': barHeight + 'px', 
+			'--color': color,
+			'--bgcolor': bg,
+			height: fixedHeight 
+		}">
+		<view class="heads">
+			<image class="bgImg" v-if="bgImg" :src="bgImg" mode=""></image>
+			<slot name="left">
+				<up-icon name="photo" color="#2979ff" size="28" v-if="show_back" :color="color" @click="back"></up-icon>
+				<!-- <uni-icons v-if="show_back" type="left" size="30" :color="color" @click="back"></uni-icons> -->
+			</slot>
+			<slot name="title">
+				<text class="title" :style="{'--size': titlesize}">{{ title }}</text>
+			</slot>
+			<slot name="right">
+				<!-- <uni-icons type="left" size="30" color="transparent"></uni-icons> -->
+			</slot>
+		</view>
+		<slot name="bottom"></slot>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref,
+		computed,
+		onMounted,
+		defineProps,
+		defineEmits
+	} from 'vue';
+
+	const props = defineProps({
+		title: { //标题
+			type: String,
+			default: ""
+		},
+		show_back: { //显示返回按钮
+			type: Boolean,
+			default: true
+		},
+		back_type: { //是否使用组件的返回
+			type: Boolean,
+			default: false
+		},
+		bg: { //背景
+			type: String,
+			default: '#fff'
+		},
+		color: { //标题的字体颜色
+			type: String,
+			default: 'white'
+		},
+		//背景图片
+		bgImg: {
+			default: ""
+		},
+		// 文字大小
+		titlesize: {
+			type: String,
+			default: "36rpx"
+		},
+		bottomHeight: {
+			type: String,
+			default: "80rpx"
+		},
+		fixed: {
+			type: Boolean,
+			default: true
+		}
+	});
+
+	const emit = defineEmits(['right']);
+
+	// 状态栏高度
+	const barHeight = ref(0);
+	const rpxToPx = (rpx) => {
+		const systemInfo = uni.getSystemInfoSync();
+		return (rpx / 750) * systemInfo.windowWidth;
+	};
+	const fixedHeight = computed(() => {
+		if (!props.fixed) return '0';
+		// 将80rpx转换为px
+		const navHeightPx = rpxToPx(80);
+		return `${barHeight.value + navHeightPx}px`;
+	});
+
+	onMounted(() => {
+		// 获取状态栏高度
+		const systemInfo = uni.getSystemInfoSync();
+		barHeight.value = systemInfo.statusBarHeight || 0;
+	});
+
+	// 返回按钮图片
+	const back_image = computed(() => {
+		return props.color == 'white' ? require('./down.png') : require('./back.png');
+	});
+
+	const back = () => {
+		if (!props.show_back) return;
+		uni.navigateBack({
+			fail: () => {
+				uni.reLaunch({
+					url: uni.getStorageSync('userType') == 4 ?
+						'/pages/index/dispose/index' : '/pages/index/index'
+				});
+			}
+		});
+	};
+
+	const right = () => {
+		emit('right');
+	};
+</script>
+
+<style lang="scss" scoped>
+	.tab {
+		position: sticky;
+		top: 0;
+		left: 0;
+		width: 100%;
+		z-index: 999;
+	}
+
+	.heads {
+		z-index: 100;
+		width: 100%;
+		height: calc(var(--barheight) + 80rpx);
+		justify-content: space-between;
+		display: flex;
+		align-items: center;
+		padding-top: var(--barheight);
+		padding-left: 20rpx;
+		padding-right: 20rpx;
+		padding-bottom: 10rpx;
+		background: var(--bgcolor);
+		box-sizing: border-box;
+
+		.bgImg {
+			width: 100%;
+			height: 100%;
+			position: absolute;
+			top: 0;
+			left: 0;
+			z-index: -1;
+		}
+
+		.title {
+			width: 100%;
+			text-align: center;
+			font-size: var(--size);
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: var(--color);
+			position: absolute;
+			left: 0;
+			pointer-events: none;
+		}
+	}
+</style>

components/status-bar-placeholder/index.vue

@@ -0,0 +1,14 @@
+<template>
+	<view :style="{ height: barHeight + 'px' }"></view>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+
+const barHeight = ref(0)
+
+onMounted(() => {
+	const systemInfo = uni.getSystemInfoSync()
+	barHeight.value = systemInfo.statusBarHeight || 0
+})
+</script>

pages.json

@@ -1,6 +1,13 @@
 {
-	"pages": [
-		{
+
+	"easycom": {
+		"autoscan": true,
+		"custom": {
+			"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue",
+			"^StatusBarPlaceholder": "@/components/status-bar-placeholder/index.vue"
+		}
+	},
+	"pages": [{
 			"path": "pages/splash/splash",
 			"style": {
 				"navigationBarTitleText": "",
@@ -19,32 +26,36 @@
 		{
 			"path": "pages/index/index",
 			"style": {
-				"navigationBarTitleText": "首页",
+				"navigationBarTitleText": "布尔销销乐",
 				"navigationStyle": "custom"
 			}
 		},
 		{
-			"path": "pages/customer/list",
+			"path": "pages/todos/index",
 			"style": {
-				"navigationBarTitleText": "客户管理"
+				"navigationBarTitleText": "待办",
+				"navigationStyle": "custom"
 			}
 		},
 		{
-			"path": "pages/message/list",
+			"path": "pages/message/index",
 			"style": {
-				"navigationBarTitleText": "消息"
+				"navigationBarTitleText": "消息",
+				"backgroundColor": "#fff",
+				"navigationBarBackgroundColor": "#fff"
 			}
 		},
 		{
 			"path": "pages/stats/index",
 			"style": {
-				"navigationBarTitleText": "数据统计"
+				"navigationBarTitleText": "统计"
 			}
 		},
 		{
 			"path": "pages/mine/index",
 			"style": {
-				"navigationBarTitleText": "我的"
+				"navigationBarTitleText": "我的",
+				"navigationStyle": "custom"
 			}
 		},
 		{
@@ -52,6 +63,13 @@
 			"style": {
 				"navigationBarTitleText": "调试工具"
 			}
+		},
+		{
+			"path": "pages/test/navbar",
+			"style": {
+				"navigationBarTitleText": "导航栏测试",
+				"navigationStyle": "custom"
+			}
 		}
 	],
 	"globalStyle": {
@@ -62,5 +80,46 @@
 		"app-plus": {
 			"background": "#efeff4"
 		}
+	},
+	"tabBar": {
+		"color": "#7A7E83",
+		"selectedColor": "#4080FF",
+		"borderStyle": "black",
+		"backgroundColor": "#ffffff",
+		"height": "50px",
+		"fontSize": "10px",
+		"iconWidth": "24px",
+		"spacing": "3px",
+		"list": [{
+				"pagePath": "pages/index/index",
+				"text": "首页",
+				"iconPath": "static/tabbar/tabbar-home.png",
+				"selectedIconPath": "static/tabbar/tabbar-home-active.png"
+			},
+			{
+				"pagePath": "pages/todos/index",
+				"text": "待办",
+				"iconPath": "static/tabbar/tabbar-todo.png",
+				"selectedIconPath": "static/tabbar/tabbar-todo-active.png"
+			},
+			{
+				"pagePath": "pages/message/index",
+				"text": "消息",
+				"iconPath": "static/tabbar/tabbar-message.png",
+				"selectedIconPath": "static/tabbar/tabbar-message-active.png"
+			},
+			{
+				"pagePath": "pages/stats/index",
+				"text": "统计",
+				"iconPath": "static/tabbar/tabbar-stats.png",
+				"selectedIconPath": "static/tabbar/tabbar-stats-active.png"
+			},
+			{
+				"pagePath": "pages/mine/index",
+				"text": "我的",
+				"iconPath": "static/tabbar/tabbar-mine.png",
+				"selectedIconPath": "static/tabbar/tabbar-mine-active.png"
+			}
+		]
 	}
-}
+}

pages/index/components/card-preview.vue

@@ -0,0 +1,457 @@
+<template>
+	<view v-if="visible" class="card-preview-modal" @click="closeModal">
+		<view class="modal-mask"></view>
+		<view class="modal-content" @click.stop>
+			<!-- 顶部用户信息卡片 -->
+			<view class="user-card-header">
+				<view class="user-info">
+					<view class="avatar-wrapper">
+						<image class="avatar" src="/static/avatar-default.png" mode="aspectFill" />
+					</view>
+					<view class="user-details">
+						<view class="name-row">
+							<text class="user-name">赵建平</text>
+							<text class="user-role">销售经理</text>
+						</view>
+						<text class="company-name">杭州臻迹网络技术有限公司</text>
+						<view class="contact-row" @click="makeCall">
+							<text class="contact-icon">📞</text>
+							<text class="contact-text">138-0000-0000 (点击拨打电话)</text>
+						</view>
+						<view class="contact-row">
+							<text class="contact-icon">✉️</text>
+							<text class="contact-text">zhao.jp@subote.com</text>
+						</view>
+						<view class="contact-row">
+							<text class="contact-icon">📍</text>
+							<text class="contact-text">上海市静安区江宁路 168 号</text>
+						</view>
+					</view>
+				</view>
+			</view>
+
+			<!-- 二维码区域 -->
+			<view class="qr-code-section">
+				<view class="qr-code-wrapper">
+					<image class="qr-code" src="/static/qr-code-default.png" mode="aspectFill" />
+				</view>
+			</view>
+
+			<!-- 操作按钮 -->
+			<view class="action-buttons">
+				<view class="btn share-btn" @click="shareCard">
+					<text class="btn-icon">🔗</text>
+					<text class="btn-text">分享名片</text>
+				</view>
+				<view class="btn save-btn" @click="saveCard">
+					<text class="btn-icon">⬇️</text>
+					<text class="btn-text">保存名片</text>
+				</view>
+			</view>
+
+			<!-- 标签页切换 -->
+			<view class="tab-bar">
+				<view 
+				  class="tab-item" 
+				  :class="{ active: activeTab === 'products' }"
+				  @click="switchTab('products')"
+				>
+					<text class="tab-icon">📦</text>
+					<text class="tab-text">产品列表</text>
+				</view>
+				<view 
+				  class="tab-item" 
+				  :class="{ active: activeTab === 'company' }"
+				  @click="switchTab('company')"
+				>
+					<text class="tab-text">企业简介</text>
+					<text class="tab-icon">🏢</text>
+				</view>
+			</view>
+
+			<!-- 内容区域 -->
+			<scroll-view class="content-area" scroll-y>
+				<!-- 产品列表 -->
+				<view v-if="activeTab === 'products'" class="product-list">
+					<view class="product-item" v-for="(item, index) in products" :key="index">
+						<view class="product-image">
+							<image :src="item.image" mode="aspectFill" />
+						</view>
+						<view class="product-info">
+							<text class="product-name">{{ item.name }}</text>
+							<text class="product-desc">{{ item.category }} | {{ item.brand }}</text>
+						</view>
+					</view>
+				</view>
+
+				<!-- 企业简介 -->
+				<view v-if="activeTab === 'company'" class="company-intro">
+					<text class="intro-text">
+						杭州臻迹膜技术有限公司 成立于 2015 年，是一家致力于为废水资源循环利用提供更高效、更经济、更简单的特种膜产品及其工艺技术的国家高新技术企业，集研发、设计、生产、销售、服务为一体。
+					</text>
+					<text class="intro-text">
+						通过国际合作及自主研发结合的模式，现有主营产品 DTRO、STRO、TUF 管式软化膜、CTUF 半软化膜等多种特种膜组件及其撬装设备，推出了垃圾渗滤液 3.0 工艺、工业循环排污水 4.0 工艺等技术包，广泛应用于垃圾渗滤液、矿井废水、电镀废水、工业循环冷却水、半导体废水等行业。
+					</text>
+				</view>
+			</scroll-view>
+
+			<!-- 退出按钮 -->
+			<view class="exit-btn" @click="closeModal">
+				<text>退出预览</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue'
+
+// Props
+defineProps({
+	visible: {
+		type: Boolean,
+		default: false
+	}
+})
+
+// Emits
+const emit = defineEmits(['close', 'share', 'save'])
+
+// 当前激活的标签页
+const activeTab = ref('products')
+
+// 产品列表
+const products = reactive([
+	{
+		name: '惠普黑白激光打印机 选配小白盒巴',
+		category: '打印机',
+		brand: '惠普',
+		image: '/static/product-printer.png'
+	},
+	{
+		name: '惠普黑白激光打印机 选配小白盒巴',
+		category: '打印机',
+		brand: '惠普',
+		image: '/static/product-printer.png'
+	},
+	{
+		name: '惠普黑白激光打印机 选配小白盒巴',
+		category: '打印机',
+		brand: '惠普',
+		image: '/static/product-printer.png'
+	}
+])
+
+// 切换标签页
+const switchTab = (tab) => {
+	activeTab.value = tab
+}
+
+// 关闭弹窗
+const closeModal = () => {
+	emit('close')
+}
+
+// 拨打电话
+const makeCall = () => {
+	uni.makePhoneCall({
+		phoneNumber: '13800000000'
+	})
+}
+
+// 分享名片
+const shareCard = () => {
+	emit('share')
+}
+
+// 保存名片
+const saveCard = () => {
+	uni.showToast({
+		title: '已保存到手机相册',
+		icon: 'success'
+	})
+	emit('save')
+}
+</script>
+
+<style lang="scss" scoped>
+.card-preview-modal {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	z-index: 9999;
+	
+	.modal-mask {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background: rgba(0, 0, 0, 0.5);
+	}
+	
+	.modal-content {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		background: #ffffff;
+		border-radius: 32rpx 32rpx 0 0;
+		max-height: 85vh;
+		overflow-y: auto;
+		animation: slideUp 0.3s ease-out;
+	}
+}
+
+@keyframes slideUp {
+	from {
+		transform: translateY(100%);
+	}
+	to {
+		transform: translateY(0);
+	}
+}
+
+// 用户信息卡片头部
+.user-card-header {
+	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+	padding: 40rpx;
+	border-radius: 32rpx 32rpx 0 0;
+	
+	.user-info {
+		display: flex;
+		align-items: flex-start;
+		
+		.avatar-wrapper {
+			flex-shrink: 0;
+			margin-right: 24rpx;
+			
+			.avatar {
+				width: 120rpx;
+				height: 120rpx;
+				border-radius: 50%;
+				border: 4rpx solid rgba(255, 255, 255, 0.3);
+			}
+		}
+		
+		.user-details {
+			flex: 1;
+			
+			.name-row {
+				display: flex;
+				align-items: center;
+				margin-bottom: 12rpx;
+				
+				.user-name {
+					font-size: 36rpx;
+					font-weight: 600;
+					color: #ffffff;
+				}
+				
+				.user-role {
+					font-size: 22rpx;
+					color: rgba(255, 255, 255, 0.9);
+					background: rgba(255, 255, 255, 0.2);
+					padding: 4rpx 12rpx;
+					border-radius: 20rpx;
+					margin-left: 12rpx;
+				}
+			}
+			
+			.company-name {
+				font-size: 26rpx;
+				color: rgba(255, 255, 255, 0.9);
+				display: block;
+				margin-bottom: 16rpx;
+			}
+			
+			.contact-row {
+				display: flex;
+				align-items: center;
+				margin-bottom: 8rpx;
+				
+				.contact-icon {
+					font-size: 24rpx;
+					margin-right: 8rpx;
+				}
+				
+				.contact-text {
+					font-size: 22rpx;
+					color: rgba(255, 255, 255, 0.85);
+				}
+			}
+		}
+	}
+}
+
+// 二维码区域
+.qr-code-section {
+	padding: 40rpx;
+	display: flex;
+	justify-content: center;
+	
+	.qr-code-wrapper {
+		width: 300rpx;
+		height: 300rpx;
+		background: #f5f6f8;
+		border-radius: 16rpx;
+		padding: 20rpx;
+		
+		.qr-code {
+			width: 100%;
+			height: 100%;
+		}
+	}
+}
+
+// 操作按钮
+.action-buttons {
+	display: flex;
+	padding: 0 40rpx 32rpx;
+	gap: 24rpx;
+	
+	.btn {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 24rpx;
+		border-radius: 32rpx;
+		font-size: 28rpx;
+		
+		.btn-icon {
+			margin-right: 8rpx;
+			font-size: 32rpx;
+		}
+	}
+	
+	.share-btn {
+		background: linear-gradient(135deg, #f0f4ff 0%, #e6ecff 100%);
+		color: #667eea;
+	}
+	
+	.save-btn {
+		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+		color: #ffffff;
+	}
+}
+
+// 标签页切换
+.tab-bar {
+	display: flex;
+	border-bottom: 2rpx solid #f0f0f0;
+	
+	.tab-item {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 28rpx 0;
+		font-size: 28rpx;
+		color: #999999;
+		position: relative;
+		
+		.tab-icon {
+			margin: 0 8rpx;
+			font-size: 32rpx;
+		}
+		
+		&.active {
+			color: #667eea;
+			font-weight: 600;
+			
+			&::after {
+				content: '';
+				position: absolute;
+				bottom: 0;
+				left: 50%;
+				transform: translateX(-50%);
+				width: 60rpx;
+				height: 6rpx;
+				background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+				border-radius: 3rpx;
+			}
+		}
+	}
+}
+
+// 内容区域
+.content-area {
+	padding: 32rpx;
+	min-height: 400rpx;
+	overflow-y: auto;
+}
+
+// 产品列表
+.product-list {
+	.product-item {
+		display: flex;
+		padding: 24rpx;
+		background: #f8f9fa;
+		border-radius: 16rpx;
+		margin-bottom: 20rpx;
+		
+		.product-image {
+			width: 160rpx;
+			height: 160rpx;
+			border-radius: 12rpx;
+			background: #ffffff;
+			margin-right: 24rpx;
+			flex-shrink: 0;
+			
+			image {
+				width: 100%;
+				height: 100%;
+				border-radius: 12rpx;
+			}
+		}
+		
+		.product-info {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			
+			.product-name {
+				font-size: 28rpx;
+				color: #333333;
+				font-weight: 500;
+				margin-bottom: 12rpx;
+				line-height: 1.5;
+			}
+			
+			.product-desc {
+				font-size: 24rpx;
+				color: #999999;
+			}
+		}
+	}
+}
+
+// 企业简介
+.company-intro {
+	.intro-text {
+		display: block;
+		font-size: 28rpx;
+		color: #666666;
+		line-height: 1.8;
+		margin-bottom: 24rpx;
+		text-align: justify;
+	}
+}
+
+// 退出按钮
+.exit-btn {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 32rpx;
+	margin: 0 40rpx 40rpx;
+	background: #f8f9fa;
+	border-radius: 32rpx;
+	font-size: 28rpx;
+	color: #666666;
+}
+</style>

pages/index/index.vue

@@ -1,199 +1,246 @@
 <template>
 	<view class="index-container">
 		<!-- 顶部用户信息卡片 -->
-		<view class="page-top">
-			<view class="user-card">
-				<view class="user-info">
-					<view class="avatar-wrapper">
-						<image class="avatar" src="/static/avatar-default.png" mode="aspectFill" />
-					</view>
-					<view class="user-details">
-						<view class="name-row">
-							<text class="user-name">赵建平</text>
-							<text class="user-role">销售经理</text>
+		<view class="top-bg">
+
+		</view>
+		<NavBar title="" color="#020202" :fixed="true" :bg="'transparent'">
+			<template #left>
+				<view class="left-title">实践活动</view>
+			</template>
+		</NavBar>
+		<view class="page-warp">
+			<view class="page-top">
+				<view class="user-card">
+					<view class="user-info">
+						<view class="avatar-wrapper">
+							<image class="avatar" src="/static/avatar-default.png" mode="aspectFill" />
+						</view>
+						<view class="user-details">
+							<view class="name-row">
+								<text class="user-name">赵建平</text>
+								<text class="user-role">销售经理</text>
+							</view>
+							<text class="company-name">杭州臻迹网络技术有限公司</text>
 						</view>
-						<text class="company-name">杭州臻迹网络技术有限公司</text>
-					</view>
-				</view>
-				<view class="user-address">
-					<view class="row" @click="makeCall">
-						<text class="contact-icon">📞</text>
-						<text class="contact-text">400-0000-0000 (点击拨打电话)</text>
-					</view>
-					<view class="row">
-						<text class="contact-icon">✉️</text>
-						<text class="contact-text">zhao.jp@subote.com</text>
 					</view>
-					<view class="row">
-						<text class="contact-icon">📍</text>
-						<text class="contact-text">上海市静安区江宁路 168 号</text>
+					<view class="user-address">
+						<view class="row" @click="makeCall">
+							<text class="contact-icon">📞</text>
+							<text class="contact-text">400-0000-0000 (点击拨打电话)</text>
+						</view>
+						<view class="row">
+							<text class="contact-icon">✉️</text>
+							<text class="contact-text">zhao.jp@subote.com</text>
+						</view>
+						<view class="row">
+							<text class="contact-icon">📍</text>
+							<text class="contact-text">上海市静安区江宁路 168 号</text>
+						</view>
 					</view>
-				</view>
 
-				<view class="share-btn" @click="shareCard">
-					<text class="share-icon">📇</text>
-					<text class="share-text">分享名片</text>
+					<view class="share-btn" @click="shareCard">
+						<text class="share-icon">📇</text>
+						<text class="share-text">分享名片</text>
+					</view>
 				</view>
 			</view>
-		</view>
 
-		<!-- 最近访客模块 -->
-		<view class="recent-visitors">
-			<view class="section-header">
-				<text class="section-title">最近访客</text>
-				<view class="visitor-count">
-					<image class="visitor-icon" src="/static/visitor-icon.png" mode="aspectFit" />
-					<text class="visitor-number">258 人</text>
-				</view>
-				<text class="view-more" @click="viewAllVisitors">查看更多</text>
-			</view>
-			<view class="visitor-list">
-				<view class="visitor-item">
-					<view class="visitor-avatar">
-						<image src="/static/avatar-1.png" mode="aspectFill" />
+			<!-- 最近访客模块 -->
+			<view class="recent-visitors">
+				<view class="section-header">
+					<text class="section-title">最近访客</text>
+					<view class="visitor-count">
+						<view class="avatar-group">
+							<image class="group-avatar" src="/static/avatar-1.png" mode="aspectFill" />
+							<image class="group-avatar" src="/static/avatar-2.png" mode="aspectFill" />
+							<image class="group-avatar" src="/static/avatar-3.png" mode="aspectFill" />
+						</view>
+						<text class="visitor-number">255 人</text>
 					</view>
-					<view class="visitor-info">
-						<view class="visitor-name-row">
-							<text class="visitor-name">惠誉黑白激光打印机</text>
-							<text class="visitor-tag">待跟进</text>
+				</view>
+				<view class="visitor-list">
+					<view class="visitor-item">
+						<view class="visitor-left">
+							<view class="visitor-top">
+								<view class="visitor-avatar">
+									<image src="/static/avatar-default.png" mode="aspectFill" />
+								</view>
+								<view class="visitor-name-row">
+									<text class="visitor-name">匿名用户</text>
+									<text class="visitor-tag pending">待跟进</text>
+								</view>
+								<view class="view-more-btn" @click="viewAllVisitors">查看更多</view>
+							</view>
+							<view class="visitor-meta">
+								<text class="meta-item">
+									<text class="meta-label">来源：</text>
+									<text class="meta-value">微信小程序</text>
+								</text>
+								<text class="meta-item">
+									<text class="meta-label">手机：</text>
+									<text class="meta-value">13822255555</text>
+								</text>
+							</view>
+						</view>
+						<view class="visitor-product">
+							<image class="product-image" src="/static/product-printer.png" mode="aspectFit" />
+							<view class="product-info">
+								<text class="product-name">惠普黑白激光打印机 选配小白盒巴</text>
+								<view>
+									<text class="product-tag">打印机</text>
+									<text class="product-brand">惠普</text>
+								</view>
+							</view>
 						</view>
-						<text class="visitor-source">来源：微信小程序 手机：13622255856</text>
-						<text class="visitor-action">打印机 | 惠普</text>
 					</view>
 				</view>
+				<!-- 底部拖动条 -->
+				<view class="drag-handle"></view>
 			</view>
-		</view>
 
-		<!-- 功能菜单网格 -->
-		<view class="function-grid">
-			<view class="grid-item" @click="navigateTo('clue')">
-				<view class="grid-icon clue-icon">
-					<text class="icon-text">📋</text>
+			<!-- 功能菜单网格 -->
+			<view class="function-grid">
+				<view class="grid-item" @click="navigateTo('clue')">
+					<view class="grid-icon clue-icon">
+						<text class="icon-text">📋</text>
+					</view>
+					<text class="grid-label">线索管理</text>
 				</view>
-				<text class="grid-label">线索管理</text>
-			</view>
-			<view class="grid-item" @click="navigateTo('customer')">
-				<view class="grid-icon customer-icon">
-					<text class="icon-text">🏢</text>
+				<view class="grid-item" @click="navigateTo('customer')">
+					<view class="grid-icon customer-icon">
+						<text class="icon-text">🏢</text>
+					</view>
+					<text class="grid-label">客户管理</text>
 				</view>
-				<text class="grid-label">客户管理</text>
-			</view>
-			<view class="grid-item" @click="navigateTo('contact')">
-				<view class="grid-icon contact-icon">
-					<text class="icon-text">👥</text>
+				<view class="grid-item" @click="navigateTo('contact')">
+					<view class="grid-icon contact-icon">
+						<text class="icon-text">👥</text>
+					</view>
+					<text class="grid-label">联系人管理</text>
 				</view>
-				<text class="grid-label">联系人管理</text>
-			</view>
-			<view class="grid-item" @click="navigateTo('public-pool')">
-				<view class="grid-icon pool-icon">
-					<text class="icon-text">🌊</text>
+				<view class="grid-item" @click="navigateTo('public-pool')">
+					<view class="grid-icon pool-icon">
+						<text class="icon-text">🌊</text>
+					</view>
+					<text class="grid-label">客户公海</text>
 				</view>
-				<text class="grid-label">客户公海</text>
-			</view>
-			<view class="grid-item" @click="navigateTo('opportunity')">
-				<view class="grid-icon opportunity-icon">
-					<text class="icon-text">💼</text>
+				<view class="grid-item" @click="navigateTo('opportunity')">
+					<view class="grid-icon opportunity-icon">
+						<text class="icon-text">💼</text>
+					</view>
+					<text class="grid-label">商机管理</text>
 				</view>
-				<text class="grid-label">商机管理</text>
-			</view>
-			<view class="grid-item" @click="navigateTo('payment')">
-				<view class="grid-icon payment-icon">
-					<text class="icon-text">💰</text>
+				<view class="grid-item" @click="navigateTo('payment')">
+					<view class="grid-icon payment-icon">
+						<text class="icon-text">💰</text>
+					</view>
+					<text class="grid-label">回款管理</text>
 				</view>
-				<text class="grid-label">回款管理</text>
-			</view>
-			<view class="grid-item" @click="navigateTo('product')">
-				<view class="grid-icon product-icon">
-					<text class="icon-text">📦</text>
+				<view class="grid-item" @click="navigateTo('product')">
+					<view class="grid-icon product-icon">
+						<text class="icon-text">📦</text>
+					</view>
+					<text class="grid-label">产品管理</text>
 				</view>
-				<text class="grid-label">产品管理</text>
-			</view>
-			<view class="grid-item" @click="navigateTo('all')">
-				<view class="grid-icon all-icon">
-					<text class="icon-text">📊</text>
+				<view class="grid-item" @click="navigateTo('all')">
+					<view class="grid-icon all-icon">
+						<text class="icon-text">📊</text>
+					</view>
+					<text class="grid-label">全部</text>
 				</view>
-				<text class="grid-label">全部</text>
-			</view>
-		</view>
-
-		<!-- 业务日历模块 -->
-		<view class="business-calendar">
-			<view class="section-header">
-				<text class="section-title">业务日历</text>
-				<text class="view-more" @click="viewAllCalendar">查看更多</text>
-			</view>
-
-			<!-- 日历头部 -->
-			<view class="calendar-header">
-				<text class="calendar-month">2026 年 4 月</text>
-			</view>
-
-			<!-- 星期 -->
-			<view class="calendar-weekdays">
-				<text class="weekday">日</text>
-				<text class="weekday">一</text>
-				<text class="weekday">二</text>
-				<text class="weekday">三</text>
-				<text class="weekday">四</text>
-				<text class="weekday">五</text>
-				<text class="weekday">六</text>
 			</view>
 
-			<!-- 日期网格 -->
-			<view class="calendar-dates">
-				<view class="date-cell">
-					<text class="date-num">15</text>
+			<!-- 业务日历模块 -->
+			<view class="business-calendar">
+				<view class="section-header">
+					<text class="section-title">业务日历</text>
+					<text class="view-more" @click="viewAllCalendar">查看更多</text>
 				</view>
-				<view class="date-cell">
-					<text class="date-num">16</text>
-				</view>
-				<view class="date-cell">
-					<text class="date-num">17</text>
-				</view>
-				<view class="date-cell today">
-					<text class="date-num current">18</text>
-				</view>
-				<view class="date-cell has-event">
-					<text class="date-num">19</text>
-					<view class="event-dot"></view>
-				</view>
-				<view class="date-cell">
-					<text class="date-num">20</text>
+
+				<!-- 日历头部 -->
+				<view class="calendar-header">
+					<text class="calendar-month">2026 年 4 月</text>
 				</view>
-				<view class="date-cell">
-					<text class="date-num">21</text>
+
+				<!-- 星期 -->
+				<view class="calendar-weekdays">
+					<text class="weekday">日</text>
+					<text class="weekday">一</text>
+					<text class="weekday">二</text>
+					<text class="weekday">三</text>
+					<text class="weekday">四</text>
+					<text class="weekday">五</text>
+					<text class="weekday">六</text>
 				</view>
-			</view>
 
-			<!-- 今日日程 -->
-			<view class="today-schedule">
-				<view class="schedule-item">
-					<view class="schedule-time">
-						<text class="time-period">下午</text>
-						<text class="time-value">3:00</text>
+				<!-- 日期网格 -->
+				<view class="calendar-dates">
+					<view class="date-cell">
+						<text class="date-num">15</text>
+					</view>
+					<view class="date-cell">
+						<text class="date-num">16</text>
+					</view>
+					<view class="date-cell">
+						<text class="date-num">17</text>
+					</view>
+					<view class="date-cell today">
+						<text class="date-num current">18</text>
 					</view>
-					<view class="schedule-content">
-						<text class="schedule-title">与李总沟通合同细节</text>
+					<view class="date-cell has-event">
+						<text class="date-num">19</text>
+						<view class="event-dot"></view>
+					</view>
+					<view class="date-cell">
+						<text class="date-num">20</text>
+					</view>
+					<view class="date-cell">
+						<text class="date-num">21</text>
 					</view>
 				</view>
-				<view class="schedule-item tomorrow">
-					<view class="schedule-time">
-						<text class="time-period">明天</text>
-						<text class="time-value">10:00</text>
+
+				<!-- 今日日程 -->
+				<view class="today-schedule">
+					<view class="schedule-item">
+						<view class="schedule-time">
+							<text class="time-period">下午</text>
+							<text class="time-value">3:00</text>
+						</view>
+						<view class="schedule-content">
+							<text class="schedule-title">与李总沟通合同细节</text>
+						</view>
 					</view>
-					<view class="schedule-content">
-						<text class="schedule-title">拜访新客户 - 科技公司</text>
+					<view class="schedule-item tomorrow">
+						<view class="schedule-time">
+							<text class="time-period">明天</text>
+							<text class="time-value">10:00</text>
+						</view>
+						<view class="schedule-content">
+							<text class="schedule-title">拜访新客户 - 科技公司</text>
+						</view>
 					</view>
 				</view>
 			</view>
-		</view>
 
+		</view>
+		
 		<!-- 底部留白，避免被 TabBar 遮挡 -->
 		<view class="bottom-spacer"></view>
+		
+		<!-- 名片预览弹窗 -->
+		<CardPreview 
+		  :visible="showPreview"
+		  @close="closePreview"
+		  @share="handleShareCard"
+		  @save="handleSaveCard"
+		/>
 	</view>
 </template>
 
 <script setup>
+	import NavBar from '@/components/nav-bar/index.vue'
+	import CardPreview from './components/card-preview.vue'
 	import {
 		ref,
 		onMounted
@@ -222,12 +269,33 @@
 		})
 	}
 
+	// 控制名片预览弹窗
+	const showPreview = ref(false)
+
 	const shareCard = () => {
+		showPreview.value = true
+	}
+
+	// 关闭预览弹窗
+	const closePreview = () => {
+		showPreview.value = false
+	}
+
+	// 分享名片
+	const handleShareCard = () => {
 		uni.showShareMenu({
 			withShareTicket: true
 		})
 	}
 
+	// 保存名片
+	const handleSaveCard = () => {
+		uni.showToast({
+			title: '已保存到手机相册',
+			icon: 'success'
+		})
+	}
+
 	const viewAllVisitors = () => {
 		uni.navigateTo({
 			url: '/pages/visitors/list'
@@ -255,12 +323,35 @@
 		padding-bottom: 120rpx;
 	}
 
-	/* 用户信息卡片 */
-	.page-top {
+	.left-title {
+		font-size: 44rpx;
+		font-weight: bold;
+		color: #ffffff;
+		text-shadow: 2px 2px 0 black;
+	}
+
+	.top-bg {
 		width: 750rpx;
+		height: 634rpx;
 		background: linear-gradient(180deg, #abc7ff 44%, #f4f5f9 100%);
-		margin-bottom: 20rpx;
+		position: fixed;
+		top: 0;
+		left: 0;
+	}
+
+	.page-warp {
+		position: relative;
+		z-index: 2;
 		padding: 20px;
+	}
+
+	/* 用户信息卡片 */
+	.page-top {
+		margin-bottom: 20rpx;
+
+		.page-title {
+			height: var(--status-bar-height);
+		}
 
 		.user-card {
 			background: linear-gradient(180deg, rgba(255, 255, 255, 0.20) 51%, rgba(255, 255, 255, 0.80) 100%), rgba(255, 255, 255, 0.20);
@@ -268,6 +359,7 @@
 			border-radius: 28rpx;
 			padding: 20px;
 			position: relative;
+
 			.user-info {
 				display: flex;
 				align-items: flex-start;
@@ -317,9 +409,8 @@
 
 					.company-name {
 						font-size: 26rpx;
-						color: rgba(255, 255, 255, 0.9);
-						display: block;
-						margin-bottom: 16rpx;
+						font-weight: 500;
+						color: #202020;
 					}
 
 					.contact-row,
@@ -341,21 +432,25 @@
 					}
 				}
 			}
-			.user-address{
+
+			.user-address {
 				display: grid;
 				gap: 10rpx;
-				.row{
+
+				.row {
 					display: grid;
 					grid-template-columns: 24px 1fr;
 					gap: 6rpx;
 					align-items: center;
 					font-size: 24rpx;
-					.contact-text{
+
+					.contact-text {
 						font-weight: 500;
 						color: #666666;
 					}
 				}
 			}
+
 			.share-btn {
 				display: flex;
 				align-items: center;
@@ -370,6 +465,7 @@
 				position: absolute;
 				top: -2rpx;
 				right: -2rpx;
+
 				.share-icon {
 					font-size: 28rpx;
 					margin-right: 8rpx;
@@ -386,11 +482,10 @@
 
 	/* 最近访客模块 */
 	.recent-visitors {
-		background: #ffffff;
-		margin: 20rpx;
-		padding: 32rpx;
-		border-radius: 24rpx;
-		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
+		padding: 20rpx;
+		background: #f2f6ff;
+		border: 2rpx solid rgba(255, 255, 255, 0.80);
+		border-radius: 28rpx;
 
 		.section-header {
 			display: flex;
@@ -407,11 +502,23 @@
 			.visitor-count {
 				display: flex;
 				align-items: center;
+				margin-left: 20rpx;
 
-				.visitor-icon {
-					width: 32rpx;
-					height: 32rpx;
-					margin-right: 8rpx;
+				.avatar-group {
+					display: flex;
+					margin-right: 12rpx;
+
+					.group-avatar {
+						width: 48rpx;
+						height: 48rpx;
+						border-radius: 50%;
+						border: 4rpx solid #ffffff;
+						margin-left: -16rpx;
+
+						&:first-child {
+							margin-left: 0;
+						}
+					}
 				}
 
 				.visitor-number {
@@ -423,66 +530,143 @@
 			.view-more {
 				font-size: 24rpx;
 				color: #667eea;
+				margin-left: auto;
 			}
 		}
 
 		.visitor-list {
+			background: #ffffff;
+			border: 2rpx solid #ffffff;
+			border-radius: 28rpx;
+
 			.visitor-item {
-				display: flex;
-				align-items: flex-start;
+				padding: 20rpx;
 
-				.visitor-avatar {
-					width: 80rpx;
-					height: 80rpx;
-					border-radius: 50%;
-					margin-right: 20rpx;
-					flex-shrink: 0;
+				.visitor-left {
+					display: grid;
 
-					image {
-						width: 100%;
-						height: 100%;
-						border-radius: 50%;
+					.visitor-top {
+						display: grid;
+						grid-template-columns: auto 1fr auto;
+						gap: 6rpx;
 					}
-				}
-
-				.visitor-info {
-					flex: 1;
 
 					.visitor-name-row {
 						display: flex;
 						align-items: center;
-						margin-bottom: 8rpx;
 
 						.visitor-name {
-							font-size: 28rpx;
-							color: #333333;
+							font-size: 24rpx;
 							font-weight: 500;
+							color: #8390b1;
+							margin: 0 10rpx;
 						}
 
 						.visitor-tag {
-							font-size: 20rpx;
-							color: #ff6b6b;
-							background: rgba(255, 107, 107, 0.1);
-							padding: 4rpx 12rpx;
-							border-radius: 16rpx;
-							margin-left: 12rpx;
+							width: 92rpx;
+							height: 40rpx;
+							text-align: center;
+							line-height: 40rpx;
+							border: 1.2rpx solid #ff9230;
+							border-radius: 12rpx;
+							font-size: 24rpx;
+							font-weight: 500;
+							color: #ff9230;
 						}
 					}
 
-					.visitor-source {
-						font-size: 22rpx;
+					.view-more-btn {
+						font-size: 24rpx;
 						color: #999999;
-						display: block;
-						margin-bottom: 8rpx;
 					}
 
-					.visitor-action {
-						font-size: 22rpx;
-						color: #666666;
+					.visitor-avatar {
+						width: 40rpx;
+						height: 40rpx;
+						border-radius: 50%;
+						background: #ffffff;
+						padding: 4rpx;
+						box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
+
+						image {
+							width: 100%;
+							height: 100%;
+							border-radius: 50%;
+						}
+					}
+				}
+
+
+
+				.visitor-meta {
+					display: flex;
+					align-items: flex-start;
+					margin-bottom: 16rpx;
+					gap: 32rpx;
+
+					.meta-item {
+						display: flex;
+						align-items: flex-start;
+
+						.meta-label {
+							font-size: 22rpx;
+							color: #999999;
+						}
+
+						.meta-value {
+							font-size: 22rpx;
+							color: #666666;
+						}
+					}
+				}
+
+				.visitor-product {
+					display: flex;
+					align-items: flex-start;
+					background: #ffffff;
+					border-radius: 16rpx;
+					padding: 16rpx;
+					box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+
+					.product-image {
+						width: 72rpx;
+						height: 72rpx;
+						border-radius: 12rpx;
+						background-color: #30cfd0;
+						margin-right: 16rpx;
+					}
+
+					.product-info {
+						flex: 1;
+						display: flex;
+						flex-direction: column;
+						justify-content: center;
+
+						.product-name {
+							font-size: 24rpx;
+							font-weight: 500;
+							color: #08105c;
+						}
+
+						.product-tag,
+						.product-brand {
+							font-size: 20rpx;
+							color: #999999;
+							margin-right: 12rpx;
+						}
 					}
 				}
+
 			}
 		}
+
+		.drag-handle {
+			width: 80rpx;
+			height: 8rpx;
+			background: rgba(0, 0, 0, 0.2);
+			border-radius: 4rpx;
+			margin: 24rpx auto 0;
+		}
 	}
 
 	/* 功能菜单网格 */
@@ -490,11 +674,13 @@
 		display: grid;
 		grid-template-columns: repeat(4, 1fr);
 		gap: 24rpx;
-		background: #ffffff;
-		margin: 20rpx;
+		margin-top: 20rpx;
 		padding: 32rpx 24rpx;
-		border-radius: 24rpx;
-		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
+		height: 322rpx;
+		background: linear-gradient(180deg, #eff6ff, #ffffff 42%);
+		border: 2rpx solid #ffffff;
+		border-radius: 28rpx;
+		box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(178, 194, 208, 0.10);
 
 		.grid-item {
 			display: flex;
@@ -502,8 +688,8 @@
 			align-items: center;
 
 			.grid-icon {
-				width: 96rpx;
-				height: 96rpx;
+				width: 54rpx;
+				height: 54rpx;
 				border-radius: 28rpx;
 				display: flex;
 				align-items: center;

pages/message/index.vue

@@ -0,0 +1,152 @@
+<template>
+	<view class="message-container">
+		<view class="top-tabs">
+			<view class="tab-item" :class="{ active: currentTab === 'system' }" @click="switchTab('system')">
+				<text class="tab-text">系统消息</text>
+			</view>
+			<view class="tab-item" :class="{ active: currentTab === 'business' }" @click="switchTab('business')">
+				<text class="tab-text">业务消息</text>
+			</view>
+		</view>
+
+		<scroll-view class="message-list" scroll-y>
+			<view class="message-item" v-for="(item, index) in messageList" :key="index" @click="viewDetail">
+				<view class="message-icon">
+					<uni-icons type="bell" size="24" color="#1890ff"></uni-icons>
+				</view>
+				<view class="message-content">
+					<view class="message-header">
+						<text class="message-title">{{ item.title }}</text>
+						<text class="message-time">{{ item.time }}</text>
+					</view>
+					<text class="message-desc">{{ item.content }}</text>
+				</view>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref,
+		reactive
+	} from 'vue'
+
+	const currentTab = ref('system')
+
+	const messageList = reactive([{
+			title: '撒东方大厦发多少',
+			time: '2025/12/20 13:28:10',
+			content: '按时分秒,电脑风扇,啊没法弄收到,麻烦你什么,能否打撒,你吗,收到能否,的描述'
+		},
+
+	])
+
+	const switchTab = (tab) => {
+		currentTab.value = tab
+	}
+
+	const viewDetail = () => {
+		uni.showToast({
+			title: '阿斯顿发的是',
+			icon: 'none'
+		})
+	}
+</script>
+<style lang="scss" scoped>
+	.message-container {
+		background: #f5f6f8;
+	}
+
+	.top-tabs {
+		display: flex;
+		align-items: center;
+		padding: 20rpx 32rpx;
+		margin-bottom: 20rpx;
+
+		.tab-item {
+			width: 182rpx;
+			height: 72rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			border-radius: 20rpx;
+			background: #ffffff;
+
+			.tab-text {
+				font-size: 28rpx;
+				color: #666666;
+			}
+
+			&.active {
+				background: linear-gradient(90deg, #5B86F5 0%, #36D1DC 100%);
+
+				.tab-text {
+					color: #ffffff;
+					font-weight: 600;
+				}
+			}
+
+			&:not(:last-child) {
+				margin-right: 24rpx;
+			}
+		}
+	}
+
+	.message-list {
+		padding: 0 20rpx;
+
+		.message-item {
+			display: flex;
+			background: #ffffff;
+			border-radius: 16rpx;
+			padding: 28rpx;
+			margin-bottom: 20rpx;
+
+			.message-icon {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				width: 60rpx;
+				height: 60rpx;
+				background: #e6f7ff;
+				border-radius: 50%;
+				margin-right: 20rpx;
+				flex-shrink: 0;
+			}
+
+			.message-content {
+				flex: 1;
+
+				.message-header {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					margin-bottom: 12rpx;
+
+					.message-title {
+						font-size: 30rpx;
+						font-weight: 600;
+						color: #333333;
+					}
+
+					.message-time {
+						font-size: 22rpx;
+						color: #999999;
+						flex-shrink: 0;
+						margin-left: 16rpx;
+					}
+				}
+
+				.message-desc {
+					display: block;
+					font-size: 26rpx;
+					color: #666666;
+					line-height: 1.6;
+					overflow: hidden;
+					text-overflow: ellipsis;
+				}
+			}
+		}
+	}
+</style>

pages/message/list.vue

@@ -1,46 +0,0 @@
-<template>
-	<view class="message-container">
-		<view class="placeholder">
-			<text class="icon">💬</text>
-			<text class="text">消息列表页</text>
-			<text class="subtext">功能开发中...</text>
-		</view>
-	</view>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-</script>
-
-<style lang="scss" scoped>
-.message-container {
-	min-height: 100vh;
-	background: #f5f6f8;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	
-	.placeholder {
-		text-align: center;
-		
-		.icon {
-			font-size: 120rpx;
-			display: block;
-			margin-bottom: 24rpx;
-		}
-		
-		.text {
-			font-size: 36rpx;
-			color: #333333;
-			font-weight: 600;
-			display: block;
-			margin-bottom: 12rpx;
-		}
-		
-		.subtext {
-			font-size: 26rpx;
-			color: #999999;
-		}
-	}
-}
-</style>

pages/mine/index.vue

@@ -1,46 +1,275 @@
 <template>
 	<view class="mine-container">
-		<view class="placeholder">
-			<text class="icon">👤</text>
-			<text class="text">我的页</text>
-			<text class="subtext">功能开�中...</text>
+	
+		<view class="user-header">
+			<StatusBarPlaceholder></StatusBarPlaceholder> 
+			<view class="header-content">
+				<view class="user-info">
+					<view class="avatar-wrapper">
+						<image class="avatar" src="/static/avatar-default.png" mode="aspectFill" />
+					</view>
+					<view class="user-details">
+						<view class="name-row">
+							<text class="user-name">Àƽ</text>
+							<text class="user-role">123dasfjsal </text>
+						</view>
+						<text class="company-name">浙江舒å�šç‰¹ç½‘络科æŠæœ‰é™�å…¬å�¸</text>
+					</view>
+				</view>
+				<view class="qr-btn">
+					<uni-icons type="qrcode" size="24" color="#ffffff"></uni-icons>
+					<text class="qr-text">我的�片</text>
+				</view>
+			</view>
+		</view>
+
+		<!-- 线索数� -->
+		<view class="data-card">
+			<view class="card-title">线索数�</view>
+			<view class="data-row">
+				<view class="data-item">
+					<text class="data-value">1,266</text>
+					<text class="data-label">线索总数</text>
+				</view>
+				<view class="data-item highlight">
+					<text class="data-value orange">65</text>
+					<text class="data-label">本月新增</text>
+				</view>
+				<view class="data-item">
+					<text class="data-value">126</text>
+					<text class="data-label">我的线索</text>
+				</view>
+			</view>
+		</view>
+
+		<!-- 客户数� -->
+		<view class="data-card">
+			<view class="card-title">客户数�</view>
+			<view class="data-row">
+				<view class="data-item">
+					<text class="data-value">1,088</text>
+					<text class="data-label">客户总数</text>
+				</view>
+				<view class="data-item highlight">
+					<text class="data-value orange">123</text>
+					<text class="data-label">本月新增</text>
+				</view>
+				<view class="data-item">
+					<text class="data-value">235</text>
+					<text class="data-label">我的客户</text>
+				</view>
+			</view>
+		</view>
+
+		<!-- 商机数� -->
+		<view class="data-card">
+			<view class="card-title">商机数�</view>
+			<view class="data-row">
+				<view class="data-item">
+					<text class="data-value">1,366</text>
+					<text class="data-label">商机总数</text>
+				</view>
+				<view class="data-item highlight">
+					<text class="data-value orange">63</text>
+					<text class="data-label">本月新增</text>
+				</view>
+				<view class="data-item">
+					<text class="data-value">86</text>
+					<text class="data-label">我的商机</text>
+				</view>
+			</view>
+		</view>
+
+		<!-- 功能�� -->
+		<view class="menu-card">
+			<view class="menu-item" @click="navigateTo('guide')">
+				<uni-icons type="help" size="20" color="#667eea"></uni-icons>
+				<text class="menu-text">使用指�</text>
+				<uni-icons type="right" size="16" color="#cccccc"></uni-icons>
+			</view>
+			<view class="menu-divider"></view>
+			<view class="menu-item" @click="navigateTo('service')">
+				<uni-icons type="paperclip" size="20" color="#667eea"></uni-icons>
+				<text class="menu-text">�系客�</text>
+				<uni-icons type="right" size="16" color="#cccccc"></uni-icons>
+			</view>
+			<view class="menu-divider"></view>
+			<view class="menu-item" @click="navigateTo('about')">
+				<uni-icons type="gear" size="20" color="#667eea"></uni-icons>
+				<text class="menu-text">关于我们</text>
+				<uni-icons type="right" size="16" color="#cccccc"></uni-icons>
+			</view>
 		</view>
 	</view>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref ,onMounted} from 'vue'
+import  StatusBarPlaceholder from "@/components/status-bar-placeholder/index.vue"
+
+const navigateTo = (page) => {
+	uni.showToast({
+		title: `功能å¼å�‘中ï¼{page}`,
+		icon: 'none'
+	})
+}
 </script>
 
 <style lang="scss" scoped>
 .mine-container {
 	min-height: 100vh;
 	background: #f5f6f8;
-	display: flex;
-	align-items: center;
-	justify-content: center;
+}
+
+// 顶部用户信��片
+.user-header {
+	background: linear-gradient(180deg, #5B86F5 0%, #36D1DC 100%);
+	padding: 40rpx;
+	padding-top: calc(var(--status-bar-height) + 20rpx);
+	position: relative;
 	
-	.placeholder {
-		text-align: center;
+	.header-content {
+		position: relative;
+		z-index: 2;
+	}
+	
+	.user-info {
+		display: flex;
+		align-items: center;
+		margin-bottom: 32rpx;
 		
-		.icon {
-			font-size: 120rpx;
-			display: block;
-			margin-bottom: 24rpx;
+		.avatar-wrapper {
+			flex-shrink: 0;
+			margin-right: 24rpx;
+			
+			.avatar {
+				width: 120rpx;
+				height: 120rpx;
+				border-radius: 50%;
+				border: 4rpx solid rgba(255, 255, 255, 0.3);
+			}
 		}
 		
-		.text {
-			font-size: 36rpx;
-			color: #333333;
-			font-weight: 600;
-			display: block;
-			margin-bottom: 12rpx;
+		.user-details {
+			flex: 1;
+			
+			.name-row {
+				display: flex;
+				align-items: center;
+				margin-bottom: 12rpx;
+				
+				.user-name {
+					font-size: 36rpx;
+					font-weight: 600;
+					color: #ffffff;
+				}
+				
+				.user-role {
+					font-size: 22rpx;
+					color: rgba(255, 255, 255, 0.9);
+					background: rgba(255, 255, 255, 0.2);
+					padding: 4rpx 12rpx;
+					border-radius: 20rpx;
+					margin-left: 12rpx;
+				}
+			}
+			
+			.company-name {
+				font-size: 24rpx;
+				color: rgba(255, 255, 255, 0.8);
+				display: block;
+			}
 		}
+	}
+	
+	.qr-btn {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: rgba(255, 255, 255, 0.2);
+		padding: 12rpx 24rpx;
+		border-radius: 24rpx;
+		align-self: flex-start;
 		
-		.subtext {
-			font-size: 26rpx;
-			color: #999999;
+		.qr-text {
+			font-size: 22rpx;
+			color: #ffffff;
+			margin-left: 8rpx;
 		}
 	}
 }
+
+// 数��片
+.data-card {
+	background: #ffffff;
+	margin: 20rpx;
+	padding: 32rpx;
+	border-radius: 24rpx;
+	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
+	
+	.card-title {
+		font-size: 28rpx;
+		color: #666666;
+		margin-bottom: 24rpx;
+	}
+	
+	.data-row {
+		display: flex;
+		justify-content: space-between;
+		
+		.data-item {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			flex: 1;
+			
+			.data-value {
+				font-size: 40rpx;
+				font-weight: 600;
+				color: #333333;
+				margin-bottom: 12rpx;
+			}
+			
+			.data-label {
+				font-size: 24rpx;
+				color: #999999;
+			}
+			
+			&.highlight .data-value {
+				color: #ff6b35;
+			}
+			
+			&:not(:last-child) {
+				border-right: 1rpx solid #f0f0f0;
+			}
+		}
+	}
+}
+
+// 功能��
+.menu-card {
+	background: #ffffff;
+	margin: 20rpx;
+	padding: 0 32rpx;
+	border-radius: 24rpx;
+	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
+	
+	.menu-item {
+		display: flex;
+		align-items: center;
+		padding: 32rpx 0;
+		
+		.menu-text {
+			flex: 1;
+			font-size: 28rpx;
+			color: #333333;
+			margin-left: 20rpx;
+		}
+	}
+	
+	.menu-divider {
+		height: 1rpx;
+		background: #f0f0f0;
+	}
+}
 </style>

pages/stats/index.vue

@@ -1,15 +1,17 @@
 <template>
 	<view class="stats-container">
 		<view class="placeholder">
-			<text class="icon">📊</text>
-			<text class="text">统计页</text>
-			<text class="subtext">功能开发中...</text>
+			<text class="icon"></text>
+			<text class="text">统计阿斯达DSDSAFSAD </text>
 		</view>
 	</view>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+	import {
+		ref,
+		onMounted
+	} from 'vue'
 </script>
 
 <style lang="scss" scoped>
@@ -30,15 +32,7 @@ import { ref } from 'vue'
 		}
 		
 		.text {
-			font-size: 36rpx;
-			color: #333333;
-			font-weight: 600;
-			display: block;
-			margin-bottom: 12rpx;
-		}
-		
-		.subtext {
-			font-size: 26rpx;
+			font-size: 32rpx;
 			color: #999999;
 		}
 	}

pages/test/navbar.vue

@@ -0,0 +1,151 @@
+<template>
+	<view class="test-container">
+		<!-- 自定义导航栏 -->
+		<NavBar title="导航栏测试" :show-back="true" />
+		
+		<view class="content" :style="{ paddingTop: navBarHeight + 'px' }">
+			<view class="info-card">
+				<text class="title">胶囊按钮信息</text>
+				
+				<view class="info-item" v-if="capsuleInfo">
+					<text class="label">Top:</text>
+					<text class="value">{{ capsuleInfo.top }} px</text>
+				</view>
+				<view class="info-item" v-if="capsuleInfo">
+					<text class="label">Height:</text>
+					<text class="value">{{ capsuleInfo.height }} px</text>
+				</view>
+				<view class="info-item" v-if="capsuleInfo">
+					<text class="label">Width:</text>
+					<text class="value">{{ capsuleInfo.width }} px</text>
+				</view>
+				<view class="info-item" v-if="capsuleInfo">
+					<text class="label">Left:</text>
+					<text class="value">{{ capsuleInfo.left }} px</text>
+				</view>
+				<view class="info-item" v-if="capsuleInfo">
+					<text class="label">Right:</text>
+					<text class="value">{{ capsuleInfo.right }} px</text>
+				</view>
+				
+				<text class="title" style="margin-top: 32rpx;">状态栏信息</text>
+				<view class="info-item">
+					<text class="label">状态栏高度:</text>
+					<text class="value">{{ statusBarHeight }} px</text>
+				</view>
+				
+				<text class="title" style="margin-top: 32rpx;">导航栏信息</text>
+				<view class="info-item">
+					<text class="label">导航栏总高度:</text>
+					<text class="value">{{ navBarHeight }} px</text>
+				</view>
+			</view>
+			
+			<view class="tips">
+				<text class="tips-title">💡 提示信息</text>
+				<text class="tips-text">1. 如果看不到胶囊信息，请检查是否在微信小程序中运行</text>
+				<text class="tips-text">2. H5 端不会显示胶囊按钮</text>
+				<text class="tips-text">3. 检查 pages.json 中是否设置了 navigationStyle: custom</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import NavBar from '@/components/nav-bar/index.vue'
+
+const capsuleInfo = ref(null)
+const statusBarHeight = ref(0)
+
+const navBarHeight = computed(() => {
+	if (!capsuleInfo.value) return 44
+	return statusBarHeight.value + capsuleInfo.value.height
+})
+
+onMounted(() => {
+	// #ifdef MP-WEIXIN
+	const menuInfo = uni.getMenuButtonBoundingClientRect()
+	capsuleInfo.value = menuInfo
+	
+	const systemInfo = uni.getSystemInfoSync()
+	statusBarHeight.value = systemInfo.statusBarHeight || 0
+	
+	console.log('✅ 胶囊信息获取成功:', menuInfo)
+	console.log('✅ 状态栏高度:', statusBarHeight.value)
+	// #endif
+	
+	// #ifndef MP-WEIXIN
+	console.log('⚠️ 非微信小程序环境，无法获取胶囊信息')
+	// #endif
+})
+</script>
+
+<style lang="scss" scoped>
+.test-container {
+	min-height: 100vh;
+	background: #f5f6f8;
+}
+
+.content {
+	padding: 20rpx;
+	
+	.info-card {
+		background: #ffffff;
+		border-radius: 16rpx;
+		padding: 32rpx;
+		margin-bottom: 20rpx;
+		
+		.title {
+			font-size: 32rpx;
+			font-weight: 600;
+			color: #333333;
+			display: block;
+			margin-bottom: 24rpx;
+		}
+		
+		.info-item {
+			display: flex;
+			justify-content: space-between;
+			padding: 16rpx 0;
+			border-bottom: 1rpx solid #f0f0f0;
+			
+			&:last-child {
+				border-bottom: none;
+			}
+			
+			.label {
+				font-size: 28rpx;
+				color: #999999;
+			}
+			
+			.value {
+				font-size: 28rpx;
+				color: #333333;
+				font-weight: 500;
+			}
+		}
+	}
+	
+	.tips {
+		background: linear-gradient(135deg, #fff5e6 0%, #ffe8cc 100%);
+		border-radius: 16rpx;
+		padding: 32rpx;
+		
+		.tips-title {
+			font-size: 28rpx;
+			font-weight: 600;
+			color: #ff9500;
+			display: block;
+			margin-bottom: 16rpx;
+		}
+		
+		.tips-text {
+			font-size: 24rpx;
+			color: #666666;
+			display: block;
+			line-height: 1.8;
+		}
+	}
+}
+</style>

pages/todos/index.vue

@@ -0,0 +1,680 @@
+<template>
+	<view class="leads-container">
+		<NavBar title="" color="#020202" :fixed="true" :bg="'#fff'">
+			<template #left>
+				<uni-search-bar placeholder="请输入" style="width: 70%" bgColor="#EEEEEE" clearButton="none"
+					cancelButton="none" @confirm="" />
+			</template>
+			<template #bottom>
+				<view class="top-tabs">
+					<scroll-view class="tab-scroll" scroll-x show-scrollbar="false">
+						<view class="tab-list">
+							<view class="tab-item" :class="{ active: currentTab === 'leads' }" @click="switchTab('leads')">
+								<text class="tab-text">线索</text>
+								<uni-badge v-if="tabCounts.leads > 0" :text="tabCounts.leads" type="error"
+									size="small"></uni-badge>
+							</view>
+							<view class="tab-item" :class="{ active: currentTab === 'customer' }"
+								@click="switchTab('customer')">
+								<text class="tab-text">客户</text>
+								<uni-badge v-if="tabCounts.customer > 0" :text="tabCounts.customer" type="error"
+									size="small"></uni-badge>
+							</view>
+							<view class="tab-item" :class="{ active: currentTab === 'opportunity' }"
+								@click="switchTab('opportunity')">
+								<text class="tab-text">商机</text>
+								<uni-badge v-if="tabCounts.opportunity > 0" :text="tabCounts.opportunity" type="error"
+									size="small"></uni-badge>
+							</view>
+							<view class="tab-item" :class="{ active: currentTab === 'contract' }"
+								@click="switchTab('contract')">
+								<text class="tab-text">合同</text>
+								<uni-badge v-if="tabCounts.contract > 0" :text="tabCounts.contract" type="error"
+									size="small"></uni-badge>
+							</view>
+							<view class="tab-item" :class="{ active: currentTab === 'payment' }" @click="switchTab('payment')">
+								<text class="tab-text">回款</text>
+								<uni-badge v-if="tabCounts.payment > 0" :text="tabCounts.payment" type="error"
+									size="small"></uni-badge>
+							</view>
+						</view>
+					</scroll-view>
+					<view class="menu-btn">
+						<uni-icons type="bars" size="22" color="#333333"></uni-icons>
+					</view>
+				</view>
+					
+					
+			</template>
+		</NavBar>
+		
+	
+		<scroll-view v-if="currentTab === 'leads'" class="content-scroll" scroll-y>
+			<view class="leads-list">
+				<view class="leads-item" v-for="(item, index) in leadsList" :key="index" @click="viewDetail">
+					<view class="row-title">
+						<text class="title-text">{{ item.title }}</text>
+						<text class="source-tag" :class="item.sourceType">{{ item.sourceName }}</text>
+					</view>
+
+					<view class="row-user">
+						<image class="user-avatar" src="/static/avatar-default.png" mode="aspectFill" />
+						<text class="user-name">啊啊啊啊</text>
+					</view>
+
+					<view class="row-info">
+						<text class="info-item phone">手机:{{ item.phone }}</text>
+						<text class="info-item follow">上次跟进:{{ item.lastFollow }}</text>
+						<text v-if="item.overdue" class="info-item overdue"> {{ item.overdueTime }}</text>
+						<uni-icons class="arrow-icon" type="right" size="14" color="#cccccc"></uni-icons>
+					</view>
+				</view>
+			</view>
+		</scroll-view>
+
+		<scroll-view v-else-if="currentTab === 'customer'" class="content-scroll" scroll-y>
+			<view class="customer-list">
+				<view class="company-group" v-for="(company, index) in customerList" :key="index">
+					<view class="company-header" @click="viewDetail">
+						<text class="company-name">{{ company.name }}</text>
+						<uni-icons type="right" size="14" color="#cccccc"></uni-icons>
+					</view>
+					<view class="contact-item" v-for="(contact, cIndex) in company.contacts" :key="cIndex">
+						<image class="contact-avatar" src="/static/avatar-default.png" mode="aspectFill" />
+						<view class="contact-info">
+							<text class="contact-name">{{ contact.name }}</text>
+							<text class="contact-intent">{{ contact.intent }}</text>
+						</view>
+						<text class="contact-follow">{{ contact.lastFollow }}</text>
+						<uni-icons type="phone-filled" size="20" color="#ff6b35"></uni-icons>
+					</view>
+				</view>
+			</view>
+		</scroll-view>
+
+		<scroll-view v-else-if="currentTab === 'opportunity'" class="content-scroll" scroll-y>
+			<view class="opportunity-list">
+				<view class="opportunity-item" v-for="(item, index) in opportunityList" :key="index"
+					@click="viewDetail">
+					<view class="opp-header">
+						<text class="opp-title">{{ item.title }}</text>
+						<text class="stage-tag" :class="item.stageType">{{ item.stageName }}</text>
+					</view>
+					<view class="opp-company">
+						<uni-icons type="shop" size="16" color="#999999"></uni-icons>
+						<text class="company-name">{{ item.companyName }}</text>
+						<uni-icons type="right" size="14" color="#cccccc"></uni-icons>
+					</view>
+					<view class="opp-contact">
+						<uni-icons type="person" size="16" color="#999999"></uni-icons>
+						<text class="contact-name">{{ item.contactName }}</text>
+						<uni-icons type="phone-filled" size="16" color="#ff6b35"></uni-icons>
+					</view>
+				</view>
+			</view>
+		</scroll-view>
+
+		<scroll-view v-else-if="currentTab === 'contract'" class="content-scroll" scroll-y>
+			<view class="contract-list">
+				<view class="contract-item" v-for="(item, index) in contractList" :key="index" @click="viewDetail">
+					<view class="contract-header">
+						<text class="contract-title">{{ item.title }}</text>
+						<text class="status-tag" :class="item.statusType">{{ item.statusName }}</text>
+					</view>
+					<view class="contract-company">
+						<uni-icons type="shop" size="16" color="#999999"></uni-icons>
+						<text class="company-name">{{ item.companyName }}</text>
+					</view>
+					<view class="contract-no">
+						<uni-icons type="paperclip" size="16" color="#999999"></uni-icons>
+						<text class="no-text">{{ item.contractNo }}</text>
+					</view>
+				</view>
+			</view>
+		</scroll-view>
+
+		<scroll-view v-else-if="currentTab === 'payment'" class="content-scroll" scroll-y>
+			<view class="payment-list">
+				<view class="payment-item" v-for="(item, index) in paymentList" :key="index" @click="viewDetail">
+					<view class="payment-header">
+						<text class="payment-title">{{ item.title }}</text>
+						<text class="status-tag" :class="item.statusType">{{ item.statusName }}</text>
+					</view>
+					<view class="payment-company">
+						<uni-icons type="shop" size="16" color="#999999"></uni-icons>
+						<text class="company-name">{{ item.companyName }}</text>
+					</view>
+					<view class="payment-footer">
+						<view class="payment-left">
+							<uni-icons type="calendar" size="16" color="#999999"></uni-icons>
+							<text class="date-text">{{ item.date }}</text>
+						</view>
+						<text class="payment-amount" :class="item.statusType">{{ item.amount }}</text>
+					</view>
+				</view>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+
+<script setup>
+	import NavBar from '@/components/nav-bar/index.vue'
+	import {
+		ref,
+		reactive
+	} from 'vue'
+
+	const currentTab = ref('leads')
+
+	const tabCounts = reactive({
+		leads: 12,
+		customer: 2,
+		opportunity: 4,
+		contract: 0,
+		payment: 0
+	})
+
+	const leadsList = reactive([])
+
+	const customerList = reactive([])
+
+	const opportunityList = reactive([{
+		title: '独守空房几十块雷锋精神',
+		stageType: 'negotiating',
+		stageName: '独守空房几',
+		companyName: '独守空房几十块',
+		contactName: '几十块雷锋精'
+	}, ])
+	const contractList = reactive([{
+		title: '独守空房几十块雷锋精神',
+		statusType: 'overdue',
+		statusName: '撒方方达',
+		companyName: '是的范德萨范德萨',
+		contractNo: 'NO741852960122'
+	}])
+
+	const paymentList = reactive([{
+		title: '独守空房几十块雷锋精神',
+		statusType: 'overdue',
+		statusName: '独守',
+		companyName: '独守空房几十块雷锋精神独守空房几十块雷锋精神',
+		date: '2026-03-06',
+		amount: '3680.9'
+	}, ])
+
+	const switchTab = (tab) => {
+		currentTab.value = tab
+	}
+
+	const viewDetail = () => {
+		uni.showToast({
+			title: '',
+			icon: 'none'
+		})
+	}
+</script>
+
+<style lang="scss" scoped>
+	scroll-view {
+		box-sizing: border-box;
+	}
+
+	.leads-container {
+		height: 100vh;
+		background: #f5f6f8;
+	}
+
+	.top-tabs {
+		display: flex;
+		align-items: center;
+		background: #ffffff;
+		padding: 0 20rpx;
+		position: sticky;
+		top: 0;
+
+		.tab-scroll {
+			flex: 1;
+			white-space: nowrap;
+
+			.tab-list {
+				display: inline-flex;
+				align-items: center;
+				height: 88rpx;
+			}
+
+			.tab-item {
+				display: inline-flex;
+				align-items: center;
+				padding: 0 20rpx;
+				position: relative;
+
+				.tab-text {
+					font-size: 28rpx;
+					color: #999999;
+				}
+
+				&.active .tab-text {
+					font-size: 30rpx;
+					font-weight: 600;
+					color: #333333;
+				}
+			}
+		}
+
+		.menu-btn {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			padding: 20rpx;
+			flex-shrink: 0;
+		}
+	}
+
+	.content-scroll {
+		flex: 1;
+		overflow-y: auto;
+		padding: 20rpx;
+		box-sizing: border-box;
+	}
+
+	.leads-list {
+		.leads-item {
+			background: #ffffff;
+			border-radius: 16rpx;
+			padding: 24rpx 28rpx;
+			margin-bottom: 20rpx;
+
+			.row-title {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				margin-bottom: 16rpx;
+
+				.title-text {
+					font-size: 30rpx;
+					font-weight: 600;
+					color: #333333;
+					flex: 1;
+				}
+
+				.source-tag {
+					font-size: 22rpx;
+					padding: 4rpx 12rpx;
+					border-radius: 8rpx;
+					flex-shrink: 0;
+					margin-left: 16rpx;
+
+					&.official {
+						color: #ff6b35;
+						background: rgba(255, 107, 53, 0.08);
+					}
+
+					&.miniapp {
+						color: #52c41a;
+						background: rgba(82, 196, 26, 0.08);
+					}
+				}
+			}
+
+			.row-user {
+				display: flex;
+				align-items: center;
+				margin-bottom: 16rpx;
+
+				.user-avatar {
+					width: 48rpx;
+					height: 48rpx;
+					border-radius: 50%;
+					margin-right: 12rpx;
+					flex-shrink: 0;
+				}
+
+				.user-name {
+					font-size: 26rpx;
+					color: #666666;
+				}
+			}
+
+			.row-info {
+				display: flex;
+				align-items: center;
+				flex-wrap: wrap;
+
+				.info-item {
+					font-size: 24rpx;
+					color: #999999;
+					margin-right: 24rpx;
+
+					&.phone {
+						color: #666666;
+					}
+
+					&.overdue {
+						color: #ff4d4f;
+					}
+				}
+
+				.arrow-icon {
+					margin-left: auto;
+					flex-shrink: 0;
+				}
+			}
+		}
+	}
+
+	.customer-list {
+		.company-group {
+			background: #ffffff;
+			border-radius: 16rpx;
+			margin-bottom: 20rpx;
+			overflow: hidden;
+
+			.company-header {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				padding: 24rpx 28rpx;
+				background: #f8f9fa;
+
+				.company-name {
+					font-size: 30rpx;
+					font-weight: 600;
+					color: #333333;
+				}
+			}
+
+			.contact-item {
+				display: flex;
+				align-items: center;
+				padding: 24rpx 28rpx;
+				border-bottom: 1rpx solid #f0f0f0;
+
+				&:last-child {
+					border-bottom: none;
+				}
+
+				.contact-avatar {
+					width: 60rpx;
+					height: 60rpx;
+					border-radius: 50%;
+					margin-right: 16rpx;
+					flex-shrink: 0;
+				}
+
+				.contact-info {
+					flex: 1;
+
+					.contact-name {
+						display: block;
+						font-size: 28rpx;
+						color: #333333;
+						margin-bottom: 8rpx;
+					}
+
+					.contact-intent {
+						display: block;
+						font-size: 24rpx;
+						color: #999999;
+					}
+				}
+
+				.contact-follow {
+					font-size: 24rpx;
+					color: #999999;
+					margin: 0 24rpx;
+				}
+			}
+		}
+	}
+
+	.opportunity-list {
+		.opportunity-item {
+			background: #ffffff;
+			border-radius: 16rpx;
+			padding: 24rpx 28rpx;
+			margin-bottom: 20rpx;
+
+			.opp-header {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				margin-bottom: 16rpx;
+
+				.opp-title {
+					font-size: 30rpx;
+					font-weight: 600;
+					color: #333333;
+					flex: 1;
+				}
+
+				.stage-tag {
+					font-size: 22rpx;
+					padding: 4rpx 12rpx;
+					border-radius: 8rpx;
+					flex-shrink: 0;
+					margin-left: 16rpx;
+
+					&.negotiating {
+						color: #ff6b35;
+						background: rgba(255, 107, 53, 0.08);
+					}
+
+					&.preliminary {
+						color: #ff9500;
+						background: rgba(255, 149, 0, 0.08);
+					}
+
+					&.demand {
+						color: #1890ff;
+						background: rgba(24, 144, 255, 0.08);
+					}
+				}
+			}
+
+			.opp-company {
+				display: flex;
+				align-items: center;
+				margin-bottom: 12rpx;
+
+				uni-icons {
+					margin-right: 8rpx;
+				}
+
+				.company-name {
+					flex: 1;
+					font-size: 26rpx;
+					color: #666666;
+				}
+			}
+
+			.opp-contact {
+				display: flex;
+				align-items: center;
+
+				uni-icons {
+					margin-right: 8rpx;
+				}
+
+				.contact-name {
+					flex: 1;
+					font-size: 24rpx;
+					color: #999999;
+				}
+			}
+		}
+	}
+
+	.contract-list {
+		.contract-item {
+			background: #ffffff;
+			border-radius: 16rpx;
+			padding: 24rpx 28rpx;
+			margin-bottom: 20rpx;
+
+			.contract-header {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				margin-bottom: 16rpx;
+
+				.contract-title {
+					font-size: 30rpx;
+					font-weight: 600;
+					color: #333333;
+					flex: 1;
+				}
+
+				.status-tag {
+					font-size: 22rpx;
+					padding: 4rpx 12rpx;
+					border-radius: 8rpx;
+					flex-shrink: 0;
+					margin-left: 16rpx;
+
+					&.overdue {
+						color: #ff4d4f;
+						background: rgba(255, 77, 79, 0.08);
+					}
+
+					&.warning {
+						color: #ff9500;
+						background: rgba(255, 149, 0, 0.08);
+					}
+
+					&.normal {
+						color: #52c41a;
+						background: rgba(82, 196, 26, 0.08);
+					}
+				}
+			}
+
+			.contract-company {
+				display: flex;
+				align-items: center;
+				margin-bottom: 12rpx;
+
+				uni-icons {
+					margin-right: 8rpx;
+				}
+
+				.company-name {
+					font-size: 26rpx;
+					color: #666666;
+				}
+			}
+
+			.contract-no {
+				display: flex;
+				align-items: center;
+
+				uni-icons {
+					margin-right: 8rpx;
+				}
+
+				.no-text {
+					font-size: 24rpx;
+					color: #999999;
+				}
+			}
+		}
+	}
+
+	.payment-list {
+		.payment-item {
+			background: #ffffff;
+			border-radius: 16rpx;
+			padding: 24rpx 28rpx;
+			margin-bottom: 20rpx;
+
+			.payment-header {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				margin-bottom: 16rpx;
+
+				.payment-title {
+					font-size: 30rpx;
+					font-weight: 600;
+					color: #333333;
+					flex: 1;
+				}
+
+				.status-tag {
+					font-size: 22rpx;
+					padding: 4rpx 12rpx;
+					border-radius: 8rpx;
+					flex-shrink: 0;
+					margin-left: 16rpx;
+
+					&.overdue {
+						color: #ff4d4f;
+						background: rgba(255, 77, 79, 0.08);
+					}
+
+					&.warning {
+						color: #ff9500;
+						background: rgba(255, 149, 0, 0.08);
+					}
+
+					&.normal {
+						color: #52c41a;
+						background: rgba(82, 196, 26, 0.08);
+					}
+				}
+			}
+
+			.payment-company {
+				display: flex;
+				align-items: center;
+				margin-bottom: 16rpx;
+
+				uni-icons {
+					margin-right: 8rpx;
+				}
+
+				.company-name {
+					font-size: 26rpx;
+					color: #666666;
+				}
+			}
+
+			.payment-footer {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+
+				.payment-left {
+					display: flex;
+					align-items: center;
+
+					uni-icons {
+						margin-right: 8rpx;
+					}
+
+					.date-text {
+						font-size: 24rpx;
+						color: #999999;
+					}
+				}
+
+				.payment-amount {
+					font-size: 32rpx;
+					font-weight: 600;
+
+					&.overdue {
+						color: #ff4d4f;
+					}
+
+					&.warning {
+						color: #ff9500;
+					}
+
+					&.normal {
+						color: #ff6b35;
+					}
+				}
+			}
+		}
+	}
+</style>