diff --git a/api/finnancial.js b/api/finnancial.js
new file mode 100644
index 0000000..c0729f5
--- /dev/null
+++ b/api/finnancial.js
@@ -0,0 +1,16 @@
+import {
+	http
+} from "../util/api"
+
+const baseURL = "http://192.168.0.15:3008"
+
+// 项目相关API
+export const financeAPI = {
+	// 列表
+	getList: (params) => http.get(baseURL + '/financial/list', params),
+	getProgram: (id) => http.get(baseURL + "/financial/" + id),
+}
+
+export default {
+	financeAPI
+}
\ No newline at end of file
diff --git a/pages.json b/pages.json
index ad1b144..55f025e 100644
--- a/pages.json
+++ b/pages.json
@@ -53,6 +53,14 @@
 			}
 		},
 		
+		{
+					"path":"pages/finance/service",
+					"style": {
+						"navigationBarTitleText": "客服中心",
+						"navigationStyle": "custom"
+					}
+				},
+		
 		{
 			"path": "pages/register/register",
 			"style": {
@@ -111,6 +119,7 @@
 				}
 			}
 		}
+	
 		
 		
 		
diff --git a/pages/finance/finance.vue b/pages/finance/finance.vue
index fadfd61..4e13c26 100644
--- a/pages/finance/finance.vue
+++ b/pages/finance/finance.vue
@@ -22,7 +22,7 @@
 							</view>
 						
 						<view class="product-intro">
-							产品简介：{{item.introduction}}
+							产品简介：{{item.introduction }}
 						</view>
 						<view class="product-detail-link" @click="handleproduction" >
 							查看详情
@@ -44,13 +44,10 @@
 
 <script setup lang="ts">
 	import { ref, computed, getCurrentInstance, onMounted } from 'vue';
-	import {
-		onReady
-	} from '@dcloudio/uni-app';
-	import { onReady as onUniReady, onPullDownRefresh } from '@dcloudio/uni-app';
+	import { onReady, onPullDownRefresh } from '@dcloudio/uni-app';
+	import { financeAPI } from '../../api/finnancial';
 
 	const instance = getCurrentInstance();
-
 	const height = ref(0)
 	const scrollHeight = ref(0)
 
@@ -58,64 +55,60 @@
 		uni.getSystemInfo({
 			success(res) {
 				let screenHeight = res.screenHeight
-				uni.createSelectorQuery().in(instance.proxy).select("#tabbarId").boundingClientRect((data : any) => {
+				uni.createSelectorQuery().in(instance?.proxy).select("#tabbarId").boundingClientRect((data: any) => {
 					height.value = screenHeight - data.height
 				}).exec()
-				uni.createSelectorQuery().in(instance.proxy).select("#searchFilterId").boundingClientRect((data : any) => {
+				uni.createSelectorQuery().in(instance?.proxy).select("#searchFilterId").boundingClientRect((data: any) => {
 					scrollHeight.value = height.value - data.height
 				}).exec()
 			}
 		})
 	}
-	
-	
 
-	// 列表
-	const productList = ref([
-		{
-			id: 1,
-			name: '理财产品名称',
-			rate: '3.5',
-			introduction: '这是一款稳健型理财产品，适合中长期投资，风险较低，收益稳定。'
-		},
-		{
-			id: 2,
-			name: '理财产品名称',
-			rate: '4.2',
-			introduction: '这是一款成长型理财产品，适合有一定风险承受能力的投资者。'
-		},
-		{
-			id: 3,
-			name: '理财产品名称',
-			rate: '2.8',
-			introduction: '这是一款保本型理财产品，适合保守型投资者，资金安全有保障。'
-		}
-	])
-	const defaultSize = 5
+	// 产品列表
+	const productList = ref<any[]>([])
+	const defaultSize = 10
 	const params = ref({
 		page: 1,
 		size: defaultSize,
 		keyword: ''
 	})
 	const status = ref('loadmore')
-	const maxPage = ref()
 
 	// 加载数据
 	const loadData = () => {
 		if (status.value == 'nomore') return
-		// 模拟API调用
-		setTimeout(() => {
+		
+		financeAPI.getList(params.value).then(res => {
+			console.log('API返回数据:', res)
+			
+			if (res.data && res.data.list) {
+				// 检查数据结构并映射字段
+				const mappedList = res.data.list.map((item: any) => ({
+					name: item.productName || item.name || '未知产品',
+					rate: item.interestRate || item.rate || '0',
+					introduction: item.desc || item.introduction || item.productDesc || '暂无简介'
+				}))
+				
+				productList.value = productList.value.concat(mappedList)
+				console.log('当前产品列表:', productList.value)
+			}
 			
 			status.value = 'nomore'
 			uni.stopPullDownRefresh()
-		}, 500)
+		}).catch(err => {
+			console.error('API调用失败:', err)
+			status.value = 'nomore'
+			uni.stopPullDownRefresh()
+		})
 	}
 
 	// 查看详情
-	const handleproduction = () =>{
+	const handleproduction = (item: any) => {
+		console.log('查看产品详情:', item)
 		uni.navigateTo({
-			url: '/pages/finance/production'
-		});
+			url: `/pages/finance/production?name=${encodeURIComponent(item.name)}&rate=${item.rate}&intro=${encodeURIComponent(item.introduction)}`
+		})
 	}
 
 	// 查询
@@ -131,7 +124,6 @@
 
 	// 刷新
 	onPullDownRefresh(async () => {
-		// 全局刷新
 		params.value = {
 			page: 1,
 			size: defaultSize,
@@ -145,7 +137,7 @@
 		loadData()
 	})
 
-	onUniReady(() => {
+	onReady(() => {
 		loadHeight()
 	})
 </script>
@@ -222,4 +214,4 @@
 
 		
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/pages/finance/production.vue b/pages/finance/production.vue
index 8fe3a05..8f0fa8d 100644
--- a/pages/finance/production.vue
+++ b/pages/finance/production.vue
@@ -7,13 +7,13 @@
 		<!-- 产品头部信息 -->
 		<view class="product-header">
 			<view class="product-name">
-				{{productInfo.name}}
+				理财产品名称
 			</view>
 			<view class="product-date">
-				开始时间：{{productInfo.startDate}}
+				开始时间：2025/09/13
 			</view>
 			<view class="profit-info">
-				近期盈亏：{{productInfo.recentProfit}}
+				近期盈亏：XXXX
 			</view>
 		</view>
 
@@ -21,23 +21,23 @@
 		<view class="card">
 			<u-row class="u-m-b-20">
 				<u-col span="6" class="card-name">所在地</u-col>
-				<u-col span="6" class="card-value">{{productInfo.location}}</u-col>
+				<u-col span="6" class="card-value">浙江-宁波</u-col>
 			</u-row>
 			<u-row class="u-m-b-20">
 				<u-col span="6" class="card-name">详细地址</u-col>
-				<u-col span="6" class="card-value">{{productInfo.detailAddress}}</u-col>
+				<u-col span="6" class="card-value">xx区xx路xxx号</u-col>
 			</u-row>
 			<u-row class="u-m-b-20">
 				<u-col span="6" class="card-name">联系人</u-col>
-				<u-col span="6" class="card-value">{{productInfo.contactPerson}}</u-col>
+				<u-col span="6" class="card-value">XXX</u-col>
 			</u-row>
 			<u-row class="u-m-b-20">
 				<u-col span="6" class="card-name">结算方式</u-col>
-				<u-col span="6" class="card-value">{{productInfo.settlementMethod}}</u-col>
+				<u-col span="6" class="card-value">按月结算，次月支付50%</u-col>
 			</u-row>
 			<u-row>
 				<u-col span="6" class="card-name">产品企业</u-col>
-				<u-col span="6" class="card-value">{{productInfo.company}}</u-col>
+				<u-col span="6" class="card-value">xxxx公司</u-col>
 			</u-row>
 		</view>
 
@@ -77,11 +77,11 @@
 			<view class="card-body">
 				<u-row class="u-m-b-20">
 					<u-col span="6" text-align="left" class="card-name">发布时间</u-col>
-					<u-col span="6" class="card-value">{{productInfo.publishDate}}</u-col>
+					<u-col span="6" class="card-value">2025-09-13</u-col>
 				</u-row>
 				<u-row>
 					<u-col span="6" text-align="left" class="card-name">年化增长</u-col>
-					<u-col span="6" class="card-value">{{productInfo.annualGrowth}}%</u-col>
+					<u-col span="6" class="card-value">xxx%</u-col>
 				</u-row>
 			</view>
 		</view>
@@ -94,29 +94,20 @@
 </template>
 
 <script setup lang="ts">
-	import { ref, onMounted } from 'vue';
+
+	import { onMounted, ref } from 'vue';
+	import { getUserInfo } from '../../util/common';
+	import { programAPI } from '../../api/program';
 	import { onLoad } from '@dcloudio/uni-app'
+	import { groupAPI } from '../../api/group';
 
-	// 产品信息
-	const productInfo = ref({
-		name: '理财产品名称',
-		startDate: '2025/09/13',
-		recentProfit: 'XXXX',
-		location: '浙江-宁波',
-		detailAddress: 'xx区xx路xxx号',
-		contactPerson: 'XXX',
-		settlementMethod: '按月结算，次月支付50%',
-		company: 'xxxx公司',
-		publishDate: '2025-09-13',
-		annualGrowth: 'x.x' // 注意：图片中是 %0x，这里调整为更合理的格式
-	})
 
-	// 立即咨询
+
+	// 立即咨询 - 跳转到客服中心页面
 	const handleConsult = () => {
-		uni.showToast({
-			title: '客服即将联系您',
-			icon: 'success'
-		})
+		uni.navigateTo({
+			url: '/pages/finance/service'
+		});
 	}
 
 	onLoad((val) => {
@@ -125,10 +116,6 @@
 			// loadProductData(val.productId)
 		}
 	})
-
-	onMounted(() => {
-		// 组件挂载后的逻辑
-	})
 </script>
 
 <style scoped lang="scss">
@@ -142,7 +129,7 @@
 		.product-header {
 			background: transparent;
 			color: #fff;
-			padding: 40rpx 30rpx 30rpx;
+			margin: 0 80rpx;
 			
 			.product-name {
 				font-size: 36rpx;
@@ -163,13 +150,13 @@
 			}
 		}
 
-		// 卡片样式
+		// 卡片样式 - 调整为白色背景
 		.card {
 			margin: 20rpx 30rpx;
-			background-color: #eeeeee;
+			background-color: #ffffff;
 			padding: 30rpx;
 			border-radius: 16rpx;
-			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
+			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
 
 			.card-title {
 				font-size: 32rpx;
@@ -187,12 +174,17 @@
 			}
 
 			.card-body {
+				background: #f8f9fa;
+				border-radius: 12rpx;
+				padding: 25rpx;
+				
 				.sub-title {
 					font-size: 28rpx;
 					font-weight: 600;
 					color: #333;
 					padding-bottom: 15rpx;
 					border-bottom: 1rpx solid #e8e8e8;
+					margin-bottom: 20rpx;
 				}
 			}
 
@@ -210,7 +202,7 @@
 			}
 		}
 
-		// 底部按钮
+		// 底部按钮 - 调整为深蓝色
 		.bottom-actions {
 			position: fixed;
 			bottom: 0;
@@ -219,15 +211,22 @@
 			background: #fff;
 			padding: 20rpx 30rpx;
 			border-top: 1rpx solid #f0f0f0;
+			box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
 			
 			.consult-btn {
-				background: linear-gradient(270deg, #65A7FF 0%, #458CF9 100%);
+				background: #1a5fd8;
 				color: #fff;
 				border: none;
-				height: 80rpx;
-				border-radius: 40rpx;
+				height: 88rpx;
+				border-radius: 44rpx;
 				font-size: 32rpx;
 				font-weight: 500;
+				box-shadow: 0 4rpx 12rpx rgba(26, 95, 216, 0.3);
+				
+				&:active {
+					background: #164db3;
+					transform: translateY(1rpx);
+				}
 			}
 		}
 	}
@@ -236,4 +235,4 @@
 	.u-m-b-20 {
 		margin-bottom: 20rpx;
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/pages/finance/service.vue b/pages/finance/service.vue
new file mode 100644
index 0000000..e0299c3
--- /dev/null
+++ b/pages/finance/service.vue
@@ -0,0 +1,587 @@
+<template>
+	<view class="customer-service-container">
+		<u-navbar title="客服中心" :background="{ background: '#458CF9' }" title-color="#FFFFFF"></u-navbar>
+		
+		<view class="content">
+			<!-- 快速服务区域 -->
+			<view class="quick-service">
+				<view class="section-title">快速服务</view>
+				<view class="service-grid">
+					<view class="service-item" v-for="item in quickServices" :key="item.id" @click="handleServiceClick(item)">
+						<view class="service-icon">
+							<text class="icon">{{ item.icon }}</text>
+						</view>
+						<text class="service-name">{{ item.name }}</text>
+					</view>
+				</view>
+			</view>
+
+			<!-- 常见问题区域 -->
+			<view class="faq-section">
+				<view class="section-title">常见问题</view>
+				
+				<!-- 分类标签 -->
+				<view class="category-tabs">
+					<view 
+						class="tab-item" 
+						v-for="(tab, index) in categories" 
+						:key="tab.id"
+						:class="{ active: activeCategory === tab.id }"
+						@click="switchCategory(tab.id)"
+					>
+						{{ tab.name }}
+					</view>
+				</view>
+
+				<!-- 四列网格 -->
+				<view class="grid-section">
+					<view class="grid-container">
+						<view 
+							class="grid-item" 
+							v-for="item in gridItems" 
+							:key="item.id"
+							@click="handleGridItemClick(item)"
+						>
+							<text class="grid-text">{{ item.title }}</text>
+						</view>
+					</view>
+				</view>
+
+				<!-- 问题列表 -->
+				<view class="question-list">
+					<view 
+						class="question-item" 
+						v-for="question in currentQuestions" 
+						:key="question.id"
+						@click="handleQuestionClick(question)"
+					>
+						<view class="question-content">
+							<text class="question-text">{{ question.title }}</text>
+							<u-icon name="arrow-right" color="#999" size="24"></u-icon>
+						</view>
+					</view>
+				</view>
+			</view>
+
+			<!-- 人工客服区域 -->
+			<view class="human-service">
+				<!-- 输入框模式 -->
+				<view class="input-mode" v-if="isInputMode">
+					<view class="input-container">
+						<u-input
+							v-model="inputText"
+							placeholder="请在这里输入文字"
+							:border="false"
+							:clearable="false"
+							class="custom-input"
+							:custom-style="{
+								backgroundColor: '#fff',
+								borderRadius: '44rpx',
+								padding: '0 30rpx',
+								height: '88rpx',
+								fontSize: '28rpx'
+							}"
+						></u-input>
+						<view class="switch-icon" @click="toggleInputMode">
+							<u-icon name="chat" color="#458CF9" size="40"></u-icon>
+						</view>
+					</view>
+					<u-button 
+						class="send-btn"
+						@click="handleSendMessage"
+						:custom-style="{
+							background: 'linear-gradient(270deg, #65A7FF 0%, #458CF9 100%)',
+							color: '#fff',
+							border: 'none',
+							height: '60rpx',
+							borderRadius: '30rpx',
+							fontSize: '26rpx',
+							fontWeight: '500',
+							marginTop: '20rpx'
+						}"
+					>
+						发送
+					</u-button>
+				</view>
+
+				<!-- 按钮模式 -->
+				<view class="button-mode" v-else>
+					<view class="switch-icon" @click="toggleInputMode">
+						<u-icon name="keyboard" color="#458CF9" size="40"></u-icon>
+					</view>
+					<u-button 
+						class="consult-btn" 
+						@click="handleHumanService"
+						:custom-style="{
+							background: 'linear-gradient(270deg, #65A7FF 0%, #458CF9 100%)',
+							color: '#fff',
+							border: 'none',
+							height: '88rpx',
+							borderRadius: '44rpx',
+							fontSize: '32rpx',
+							fontWeight: '500',
+							flex: 1,
+							marginLeft: '20rpx'
+						}"
+					>
+						<u-icon name="server-fill" color="#fff" size="36" class="btn-icon"></u-icon>
+						咨询人工客服
+					</u-button>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue';
+
+// 快速服务数据
+const quickServices = ref([
+	{ id: 1, name: '问题反馈', icon: '💬' },
+	{ id: 2, name: '投资理财', icon: '💰' },
+	{ id: 3, name: '项目咨询', icon: '📋' },
+	{ id: 4, name: '余额查询', icon: '🏦' },
+	{ id: 5, name: '催促发货', icon: '🚚' },
+	{ id: 6, name: '退款', icon: '↩️' },
+	{ id: 7, name: '购买咨询', icon: '🛒' }
+]);
+
+// 分类数据
+const categories = ref([
+	{ id: 'guess', name: '猜你想问' },
+	{ id: 'hot', name: '热门活动' },
+	{ id: 'intro', name: '商城介绍' },
+	{ id: 'after-sale', name: '售后问题' }
+]);
+
+// 四列网格数据
+const gridItems = ref([
+	{ id: 1, title: '融豆获取' },
+	{ id: 2, title: '物流信息' },
+	{ id: 3, title: '版本信息' },
+	{ id: 4, title: '项目介绍' }
+]);
+
+// 所有问题数据 - 为每个分类都添加问题
+const allQuestions = ref([
+	// 猜你想问
+	{ id: 1, category: 'guess', title: '系统版本更新有哪些内容？' },
+	{ id: 2, category: 'guess', title: '普通会员体验有哪些内容？如何成为正式会员？' },
+	{ id: 3, category: 'guess', title: '如何参与项目？如何成为代理？' },
+	
+	// 热门活动
+	{ id: 4, category: 'hot', title: '最新投资活动有哪些？' },
+	{ id: 5, category: 'hot', title: '如何参与限时优惠理财？' },
+	{ id: 6, category: 'hot', title: '会员专享福利包含哪些内容？' },
+	{ id: 7, category: 'hot', title: '新用户专享优惠如何获取？' },
+	
+	// 商城介绍
+	{ id: 8, category: 'intro', title: '平台的主要服务有哪些？' },
+	{ id: 9, category: 'intro', title: '如何保障投资安全？' },
+	{ id: 10, category: 'intro', title: '平台的资质和认证情况？' },
+	{ id: 11, category: 'intro', title: '用户资金如何管理？' },
+	
+	// 售后问题
+	{ id: 12, category: 'after-sale', title: '投资后如何申请退款？' },
+	{ id: 13, category: 'after-sale', title: '遇到问题如何投诉？' },
+	{ id: 14, category: 'after-sale', title: '售后服务流程是怎样的？' },
+	{ id: 15, category: 'after-sale', title: '投资纠纷如何处理？' }
+]);
+
+// 当前激活的分类
+const activeCategory = ref('guess');
+
+// 输入模式状态
+const isInputMode = ref(false);
+const inputText = ref('');
+
+// 计算当前分类的问题列表
+const currentQuestions = computed(() => {
+	return allQuestions.value.filter(question => question.category === activeCategory.value);
+});
+
+// 切换输入模式
+const toggleInputMode = () => {
+	isInputMode.value = !isInputMode.value;
+	if (!isInputMode.value) {
+		inputText.value = ''; // 切换回按钮模式时清空输入内容
+	}
+};
+
+// 发送消息
+const handleSendMessage = () => {
+	if (!inputText.value.trim()) {
+		uni.showToast({
+			title: '请输入内容',
+			icon: 'none'
+		});
+		return;
+	}
+	
+	console.log('发送消息:', inputText.value);
+	uni.showToast({
+		title: '消息已发送',
+		icon: 'success'
+	});
+	
+	// 模拟发送消息后的处理
+	setTimeout(() => {
+		inputText.value = '';
+		isInputMode.value = false;
+	}, 1500);
+};
+
+// 切换分类
+const switchCategory = (categoryId: string) => {
+	activeCategory.value = categoryId;
+	console.log('切换到分类:', categoryId, '问题数量:', currentQuestions.value.length);
+};
+
+// 处理网格项点击
+const handleGridItemClick = (item: any) => {
+	console.log('点击网格项:', item.title);
+	
+	// 显示对应问题的答案
+	const answers: any = {
+		1: '融豆可以通过以下方式获取：\n\n• 每日签到获得融豆奖励\n• 完成投资任务获得融豆\n• 参与平台活动赢取融豆\n• 邀请好友注册获得融豆\n• 首次投资赠送融豆',
+		2: '物流信息查询：\n\n• 在"我的订单"中查看物流状态\n• 联系客服查询具体物流信息\n• 物流一般3-7个工作日内送达\n• 如有延迟可联系客服催促',
+		3: '版本信息：\n\n当前版本：V2.5.1\n\n更新内容：\n• 优化投资理财功能\n• 新增融豆奖励系统\n• 改善用户体验\n• 修复已知问题',
+		4: '项目介绍：\n\n我们平台提供多种投资项目：\n• 短期理财产品（1-3个月）\n• 中长期投资项目（6-12个月）\n• 高风险高收益项目\n• 稳健保本型项目'
+	};
+	
+	uni.showModal({
+		title: item.title,
+		content: answers[item.id] || '相关信息正在完善中，如需详细了解请咨询人工客服。',
+		confirmText: '知道了',
+		showCancel: false
+	});
+};
+
+// 处理快速服务点击
+const handleServiceClick = (service: any) => {
+	console.log('点击服务:', service.name);
+	uni.showToast({
+		title: `进入${service.name}`,
+		icon: 'none'
+	});
+};
+
+// 处理问题点击
+const handleQuestionClick = (question: any) => {
+	console.log('点击问题:', question.title);
+	
+	// 显示问题答案
+	uni.showModal({
+		title: question.title,
+		content: getAnswerByQuestion(question),
+		confirmText: '知道了',
+		showCancel: false
+	});
+};
+
+// 根据问题获取答案（为所有分类的问题都添加答案）
+const getAnswerByQuestion = (question: any) => {
+	const answers: any = {
+		// 猜你想问
+		1: '本次系统版本更新主要包含以下内容：\n\n1. 优化了用户界面设计\n2. 新增了投资理财功能\n3. 修复了已知的系统问题\n4. 提升了系统性能和稳定性\n5. 增加了融豆奖励系统',
+		2: '普通会员可以体验基础的投资理财服务，查看部分项目信息。\n\n成为正式会员需要：\n• 完成实名认证\n• 满足投资条件\n• 通过风险评估\n• 具体请查看会员升级页面',
+		3: '参与项目流程：\n\n1. 在平台完成实名认证\n2. 通过风险评估测试\n3. 选择适合的投资项目\n4. 确认投资金额\n\n成为代理：\n• 联系客服申请\n• 满足相关条件\n• 开通代理权限',
+		
+		// 热门活动
+		4: '最新投资活动包括：\n\n• 新用户专享高收益理财\n• 限时加息活动（年化+1%）\n• 投资返现优惠\n• 邀请好友得奖励活动\n• 节假日特别活动',
+		5: '参与限时优惠理财：\n\n1. 登录平台查看活动页面\n2. 选择限时优惠产品\n3. 确认投资金额\n4. 享受额外优惠收益\n* 活动期间投资可享受额外奖励',
+		6: '会员专享福利：\n\n• 专属高收益理财产品\n• 优先参与新项目投资\n• 专属客服服务\n• 投资手续费优惠\n• 定期投资分析报告',
+		7: '新用户专享优惠：\n\n1. 注册即送融豆奖励\n2. 首次投资享受额外收益\n3. 新手专享理财产品\n4. 邀请好友获得更多奖励',
+		
+		// 商城介绍
+		8: '平台主要服务：\n\n• 理财产品投资\n• 项目融资服务\n• 财富管理咨询\n• 风险评估服务\n• 资产配置建议',
+		9: '投资安全保障：\n\n• 银行级资金存管\n• 多重风险控制体系\n• 专业风控团队\n• 合规运营监管\n• 投资者保护机制',
+		10: '平台资质认证：\n\n• 金融监管部门备案\n• 信息安全等级保护\n• 第三方审计认证\n• 合法经营许可\n• 行业协会会员',
+		11: '用户资金管理：\n\n• 资金第三方存管\n• 实时资金流向监控\n• 多重身份验证\n• 交易密码保护\n• 资金变动实时通知',
+		
+		// 售后问题
+		12: '退款申请流程：\n\n1. 提交退款申请\n2. 客服审核处理（1-3个工作日）\n3. 退款到账（3-7个工作日）\n4. 如有问题联系客服',
+		13: '投诉渠道：\n\n• 在线客服即时沟通\n• 客服热线400-123-4567\n• 官方邮箱投诉\n• 在线留言反馈\n• 工作时间：9:00-18:00',
+		14: '售后服务流程：\n\n1. 问题反馈\n2. 客服受理\n3. 问题处理\n4. 结果反馈\n5. 满意度调查',
+		15: '投资纠纷处理：\n\n• 首先联系客服协商解决\n• 提供相关证据材料\n• 平台调解处理\n• 必要时转交监管部门\n• 法律途径解决'
+	};
+	
+	return answers[question.id] || '相关问题解答正在完善中，如需详细了解请咨询人工客服。';
+};
+
+// 处理人工客服咨询
+const handleHumanService = () => {
+	console.log('咨询人工客服');
+	
+	uni.showModal({
+		title: '联系人工客服',
+		content: '您即将联系人工客服，客服工作时间：9:00-18:00',
+		confirmText: '立即联系',
+		cancelText: '取消',
+		success: (res) => {
+			if (res.confirm) {
+				// 模拟拨打客服电话
+				uni.makePhoneCall({
+					phoneNumber: '400-123-4567'
+				});
+			}
+		}
+	});
+};
+</script>
+
+<style lang="scss" scoped>
+.customer-service-container {
+	background: #f5f5f5;
+	min-height: 100vh;
+	
+	.content {
+		padding: 30rpx;
+	}
+	
+	.section-title {
+		font-size: 32rpx;
+		font-weight: 600;
+		color: #333;
+		margin-bottom: 30rpx;
+		padding-left: 10rpx;
+		border-left: 6rpx solid #458CF9;
+	}
+	
+	// 快速服务样式
+	.quick-service {
+		background: #fff;
+		border-radius: 20rpx;
+		padding: 30rpx;
+		margin-bottom: 30rpx;
+		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
+		
+		.service-grid {
+			display: grid;
+			grid-template-columns: repeat(4, 1fr);
+			gap: 30rpx;
+			
+			.service-item {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				padding: 20rpx 0;
+				
+				.service-icon {
+					width: 80rpx;
+					height: 80rpx;
+					background: linear-gradient(135deg, #65A7FF 0%, #458CF9 100%);
+					border-radius: 20rpx;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					margin-bottom: 15rpx;
+					
+					.icon {
+						font-size: 36rpx;
+					}
+				}
+				
+				.service-name {
+					font-size: 24rpx;
+					color: #333;
+					text-align: center;
+					line-height: 1.4;
+				}
+			}
+		}
+	}
+	
+	// 常见问题样式
+	.faq-section {
+		background: #fff;
+		border-radius: 20rpx;
+		padding: 30rpx;
+		margin-bottom: 20rpx;
+		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+		
+		.category-tabs {
+			display: grid;
+			grid-template-columns: repeat(4, 1fr);
+			gap: 10rpx;
+			margin-bottom: 30rpx;
+			border-bottom: 1rpx solid #e8e8e8;
+			padding-bottom: 20rpx;
+			
+			.tab-item {
+				text-align: center;
+				padding: 20rpx 0;
+				font-size: 28rpx;
+				color: #666;
+				border-radius: 8rpx;
+				background: #f8f9fa;
+				border: 1rpx solid #e8e8e8;
+				transition: all 0.3s;
+				
+				&.active {
+					background: #458CF9;
+					color: #fff;
+					font-weight: 500;
+					border-color: #458CF9;
+					transform: scale(1.05);
+				}
+				
+				&:active {
+					transform: scale(0.95);
+				}
+			}
+		}
+		
+		// 四列网格样式
+		.grid-section {
+			margin-bottom: 30rpx;
+			padding-bottom: 20rpx;
+			border-bottom: 1rpx solid #e8e8e8;
+			
+			.grid-container {
+				display: grid;
+				grid-template-columns: repeat(4, 1fr);
+				gap: 15rpx;
+				
+				.grid-item {
+					background: #f8f9fa;
+					border-radius: 12rpx;
+					padding: 25rpx 10rpx;
+					text-align: center;
+					border: 1rpx solid #e8e8e8;
+					transition: all 0.3s;
+					
+					&:active {
+						background: #e9ecef;
+						transform: scale(0.98);
+					}
+					
+					.grid-text {
+						font-size: 26rpx;
+						color: #333;
+						font-weight: 500;
+						line-height: 1.4;
+					}
+				}
+			}
+		}
+		
+		.question-list {
+			.question-item {
+				padding: 25rpx 0;
+				border-bottom: 1rpx solid #f0f0f0;
+				transition: all 0.3s;
+				
+				&:last-child {
+					border-bottom: none;
+				}
+				
+				&:active {
+					background: #f8f9fa;
+				}
+				
+				.question-content {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					
+					.question-text {
+						flex: 1;
+						font-size: 28rpx;
+						color: #333;
+						line-height: 1.5;
+					}
+				}
+			}
+		}
+	}
+	
+	// 人工客服区域样式
+	.human-service {
+		padding: 20rpx 0 40rpx;
+		
+		// 输入框模式
+		.input-mode {
+			.input-container {
+				display: flex;
+				align-items: center;
+				gap: 20rpx;
+				
+				.custom-input {
+					flex: 1;
+					box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+				}
+				
+				.switch-icon {
+					width: 80rpx;
+					height: 80rpx;
+					background: #fff;
+					border-radius: 50%;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+					transition: all 0.3s;
+					
+					&:active {
+						transform: scale(0.95);
+					}
+				}
+			}
+			
+			.send-btn {
+				width: 200rpx;
+				align-self: flex-end;
+			}
+		}
+		
+		// 按钮模式
+		.button-mode {
+			display: flex;
+			align-items: center;
+			gap: 20rpx;
+			
+			.switch-icon {
+				width: 80rpx;
+				height: 80rpx;
+				background: #fff;
+				border-radius: 50%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+				transition: all 0.3s;
+				
+				&:active {
+					transform: scale(0.95);
+				}
+			}
+			
+			.consult-btn {
+				.btn-icon {
+					margin-right: 15rpx;
+				}
+			}
+		}
+	}
+}
+
+// 响应式调整
+@media (max-width: 750rpx) {
+	.quick-service .service-grid {
+		grid-template-columns: repeat(4, 1fr);
+		gap: 15rpx;
+	}
+	
+	.faq-section .category-tabs {
+		grid-template-columns: repeat(4, 1fr);
+		gap: 8rpx;
+	}
+	
+	.faq-section .grid-section .grid-container {
+		grid-template-columns: repeat(4, 1fr);
+		gap: 10rpx;
+	}
+}
+</style>
\ No newline at end of file