diff --git a/api/customerServicePlatform/customerServicePlatform.js b/api/customerServicePlatform/customerServicePlatform.js
new file mode 100644
index 0000000..0f20be0
--- /dev/null
+++ b/api/customerServicePlatform/customerServicePlatform.js
@@ -0,0 +1,46 @@
+import { http } from '@/utils/http.js'
+
+const baseURL = "http://39.101.133.168:8828"
+//图片上传
+export const uploadImageApi = (data) => {
+  return http({
+    method: 'POST',
+    url: baseURL +'/hljw/api/aws/upload',
+	data
+  })
+}
+
+//问题回答
+export const getAnswerApi = (data) => {
+  return http({
+    method: 'POST',
+    url: 'http://pbb6edde.natappfree.cc' +'/api/customer/askQuestion',
+	data
+  })
+}
+
+//获取随机5条猜你想问问题
+export const getQuestionApi = (data) => {
+  return http({
+    method: 'GET',
+    url: 'http://pbb6edde.natappfree.cc' +'/api/customer/getQuestion',
+  })
+}
+
+
+//反馈添加
+export const addFeedbackRecordApi = (data) => {
+  return http({
+    method: 'POST',
+    url: baseURL +'/link/third/dcFeedBack/feedback/add',
+	data
+  })
+}
+//反馈历史记录
+export const getFeedbackRecordsApi = (data) => {
+  return http({
+    method: 'POST',
+    url: baseURL+'/link/third/dcFeedBack/feedback/select',
+	data
+  })
+}
\ No newline at end of file
diff --git a/api/home/mySelections.js b/api/home/mySelections.js
new file mode 100644
index 0000000..6801ebc
--- /dev/null
+++ b/api/home/mySelections.js
@@ -0,0 +1,185 @@
+/**
+ * 我的自选股相关API接口封装
+ * 使用utils/http.js中的拦截器封装请求方法
+ */
+
+import { http } from '../../utils/http.js'
+
+/**
+ * 我的自选股API接口类
+ */
+class MySelectionsAPI {
+    
+    /**
+     * 判断用户是否存在自选股分组
+     * @param {Function} successCallback - 成功回调函数
+     * @param {Function} failCallback - 失败回调函数
+     * @param {Object} data - 请求参数
+     * @returns {Promise}
+     */
+    static async checkExist(successCallback, failCallback = null, data = {}) {
+        const url = '/api/homePage/userStock/checkExist'
+        
+        try {
+            const response = await http({
+                url: url,
+                method: 'POST',
+                data: data
+            })
+            
+            console.log('检查用户自选股分组存在性 - 响应:', response)
+            if (successCallback && typeof successCallback === 'function') {
+                successCallback(response)
+            }
+            return response
+        } catch (error) {
+            console.error('检查用户自选股分组存在性 - 失败:', error)
+            if (failCallback && typeof failCallback === 'function') {
+                failCallback(error)
+            }
+            throw error
+        }
+    }
+
+    /**
+     * 查询用户所有自选股分组
+     * @param {Function} successCallback - 成功回调函数
+     * @param {Function} failCallback - 失败回调函数
+     * @param {Object} data - 请求参数
+     * @returns {Promise}
+     */
+    static async getUserStockGroupList(successCallback, failCallback = null, data = {}) {
+        const url = '/api/homePage/userStockGroup/list'
+        
+        try {
+            const response = await http({
+                url: url,
+                method: 'POST',
+                data: data
+            })
+            
+            console.log('查询用户自选股分组列表 - 响应:', response)
+            if (successCallback && typeof successCallback === 'function') {
+                successCallback(response)
+            }
+            return response
+        } catch (error) {
+            console.error('查询用户自选股分组列表 - 失败:', error)
+            if (failCallback && typeof failCallback === 'function') {
+                failCallback(error)
+            }
+            throw error
+        }
+    }
+
+    /**
+     * 分页查询某一个分组下的所有自选股
+     * @param {Function} successCallback - 成功回调函数
+     * @param {Function} failCallback - 失败回调函数
+     * @param {Object} data - 请求参数 {groupId, pageNum, pageSize, ...}
+     * @returns {Promise}
+     */
+    static async getUserStockList(successCallback, failCallback = null, data = {}) {
+        const url = '/api/homePage/userStock/list'
+        
+        // 设置默认分页参数
+        const requestData = {
+            pageNum: 1,
+            pageSize: 20,
+            ...data
+        }
+        
+        try {
+            const response = await http({
+                url: url,
+                method: 'POST',
+                data: requestData
+            })
+            
+            console.log('分页查询分组自选股 - 响应:', response)
+            if (successCallback && typeof successCallback === 'function') {
+                successCallback(response)
+            }
+            return response
+        } catch (error) {
+            console.error('分页查询分组自选股 - 失败:', error)
+            if (failCallback && typeof failCallback === 'function') {
+                failCallback(error)
+            }
+            throw error
+        }
+    }
+
+    /**
+     * 查询默认自选股
+     * @param {Function} successCallback - 成功回调函数
+     * @param {Function} failCallback - 失败回调函数
+     * @param {Object} data - 请求参数
+     * @returns {Promise}
+     */
+    static async getUserOrDefault(successCallback, failCallback = null, data = {}) {
+        const url = '/api/homePage/userStock/getUserOrDefault'
+        
+        try {
+            const response = await http({
+                url: url,
+                method: 'POST',
+                data: data
+            })
+            
+            console.log('查询默认自选股 - 响应:', response)
+            if (successCallback && typeof successCallback === 'function') {
+                successCallback(response)
+            }
+            return response
+        } catch (error) {
+            console.error('查询默认自选股 - 失败:', error)
+            if (failCallback && typeof failCallback === 'function') {
+                failCallback(error)
+            }
+            throw error
+        }
+    }
+
+    /**
+     * 游客查询默认自选股
+     * @param {Function} successCallback - 成功回调函数
+     * @param {Function} failCallback - 失败回调函数
+     * @returns {Promise}
+     */
+    static async getDefaultStocks(successCallback, failCallback = null) {
+        const url = '/api/homePage/userStock/getDefaultStocks'
+        
+        try {
+            const response = await http({
+                url: url,
+                method: 'POST',
+                data: {}
+            })
+            
+            console.log('游客查询默认自选股 - 响应:', response)
+            if (successCallback && typeof successCallback === 'function') {
+                successCallback(response)
+            }
+            return response
+        } catch (error) {
+            console.error('游客查询默认自选股 - 失败:', error)
+            if (failCallback && typeof failCallback === 'function') {
+                failCallback(error)
+            }
+            throw error
+        }
+    }
+}
+
+// 导出API类
+export default MySelectionsAPI
+
+// 也可以导出单个方法供直接使用
+export const {
+    checkExist,
+    getUserStockGroupList,
+    getUserStockList,
+    getUserOrDefault,
+    getDefaultStocks
+} = MySelectionsAPI
\ No newline at end of file
diff --git a/api/marketSituation/marketSituation.js b/api/marketSituation/marketSituation.js
new file mode 100644
index 0000000..9452062
--- /dev/null
+++ b/api/marketSituation/marketSituation.js
@@ -0,0 +1,70 @@
+/** @format */
+
+import { http } from "../../utils/http";
+
+export const getData = () => {
+  return http({
+    method: "GET",
+    url: "/ka",
+  });
+};
+
+/**
+ * 获取全球指数
+ * POST /api/global/getGlobalIndex
+ */
+export const getGlobalIndexAPI = (data) => {
+  return http({
+    method: "POST",
+    url: "/api/global/getGlobalIndex",
+    data,
+  });
+};
+
+/**
+ * 获取地区分组列表
+ * POST /api/global/regionalGroup
+ */
+export const getRegionalGroupAPI = (data) => {
+  return http({
+    method: "POST",
+    url: "/api/global/regionalGroup",
+    data,
+  });
+};
+
+/**
+ * 获取地区详情
+ * POST /api/global/regionalGroupList
+ */
+export const getRegionalGroupListAPI = (data) => {
+  return http({
+    method: "POST",
+    url: "/api/global/regionalGroupList",
+    data,
+  });
+};
+
+/**
+ * 一次性查询所有Tab栏父子结构
+ * POST /api/homework/tab/getAll
+ */
+export const getAllTabsAPI = (data) => {
+  return http({
+    method: "POST",
+    url: "/api/homework/tab/getAll",
+    data,
+  });
+};
+
+/**
+ * 通用市场数据分页查询接口（默认1页20条）
+ * POST /api/market/data/page/query
+ */
+export const queryStockDataAPI = (data) => {
+  return http({
+    method: "POST",
+    url: "/api/market/data/page/query",
+    data,
+  });
+};
diff --git a/api/start/login.js b/api/start/login.js
index aecf0cf..699a30f 100644
--- a/api/start/login.js
+++ b/api/start/login.js
@@ -67,6 +67,36 @@ export const registerApi = (data) => {
   })
 }
 
+
+
+/**
+ * 忘记密码校验验证码
+ */
+
+export const verifyCodeApi = (data) => {
+  return http({
+    method: 'POST',
+    url: '/UserLogin/verifyCode',
+    data: data,
+  })
+}
+
+
+
+/**
+ * 忘记密码输入新的密码
+ */
+
+export const forgetApi = (data) => {
+  return http({
+    method: 'POST',
+    url: '/UserLogin/forget',
+    data: data,
+  })
+}
+
+
+
 /**
  * 修改密码
  * 
diff --git a/components/FeedbackModal.vue b/components/FeedbackModal.vue
new file mode 100644
index 0000000..a4bc5e4
--- /dev/null
+++ b/components/FeedbackModal.vue
@@ -0,0 +1,196 @@
+<template>
+	<view>
+		<view v-if="internalVisible" class="fm-overlay"></view>
+
+		<view v-if="internalVisible" class="fm-wrap">
+			<view class="fm-card" :style="{ width: _width }">
+				<text class="fm-title">{{ _title }}</text>
+
+				<view class="fm-icon-wrap">
+					<image :src="imgSrcComputed" mode="aspectFit" class="fm-icon-img" />
+				</view>
+
+				<text class="fm-sub">{{ _subtitle }}</text>
+
+				<view class="fm-btn-wrap">
+					<button class="fm-btn" @click="onConfirm">{{ _buttonText }}</button>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'FeedbackModal',
+		props: {
+			title: {
+				type: String,
+				default: '提交成功'
+			},
+			subtitle: {
+				type: String,
+				default: '— 感谢您的反馈 —'
+			},
+			buttonText: {
+				type: String,
+				default: '确定'
+			},
+			status: {
+				type: String,
+				default: 'success'
+			},
+			lockScroll: {
+				type: Boolean,
+				default: true
+			},
+			width: {
+				type: String,
+				default: '600rpx'
+			}
+		},
+		data() {
+			return {
+				internalVisible: false,
+				_title: this.title,
+				_subtitle: this.subtitle,
+				_buttonText: this.buttonText,
+				_status: this.status,
+				_width: this.width,
+			};
+		},
+		computed: {
+			imgSrcComputed() {
+				return this._status === 'fail' ?
+					'/static/customer-service-platform/fail-icon.png' :
+					'/static/customer-service-platform/success-icon.png';
+			}
+		},
+		methods: {
+			show(options = {}) {
+				if (options.title) this._title = options.title;
+				if (options.subtitle) this._subtitle = options.subtitle;
+				if (options.buttonText) this._buttonText = options.buttonText;
+				if (options.status) this._status = options.status;
+				if (options.width) this._width = options.width;
+				if (this.lockScroll) this._lockScroll();
+
+				this.internalVisible = true;
+			},
+
+			hide() {
+				this.internalVisible = false;
+				if (this.lockScroll) this._unlockScroll();
+			},
+
+			onConfirm() {
+				this.hide();
+				this.$nextTick(() => {
+					this.$emit('confirm', {
+						status: this._status
+					});
+				});
+			},
+			//整个页面的滚动条被禁用，防止用户无法上下滚动页面
+			_lockScroll() {
+				try {
+					document.body.style.overflow = 'hidden';
+				} catch (e) {}
+			},
+			_unlockScroll() {
+				try {
+					document.body.style.overflow = '';
+				} catch (e) {}
+			}
+		},
+		beforeDestroy() {
+			if (this.lockScroll) this._unlockScroll();
+		}
+	};
+</script>
+
+<style scoped>
+	.fm-overlay {
+		position: fixed;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		background: rgba(0, 0, 0, 0.35);
+		z-index: 999;
+	}
+
+	.fm-wrap {
+		position: fixed;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 1000;
+		padding: 40rpx;
+		box-sizing: border-box;
+	}
+
+	.fm-card {
+		background: #fff;
+		border-radius: 24rpx;
+		padding: 40rpx;
+		box-sizing: border-box;
+		text-align: center;
+		box-shadow: 0 6rpx 30rpx rgba(0, 0, 0, 0.12);
+	}
+
+	.fm-title {
+		display: block;
+		font-size: 48rpx;
+		font-weight: 700;
+		color: #333333;
+		margin-bottom: 40rpx;
+	}
+
+	.fm-icon-wrap {
+		width: 200rpx;
+		height: 200rpx;
+		margin: 0 auto 40rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.fm-icon-img {
+		width: 100%;
+		height: 100%;
+	}
+
+	.fm-sub {
+		display: block;
+		color: #666666;
+		font-size: 32rpx;
+		margin-bottom: 40rpx;
+		font-weight: 500;
+	}
+
+	.fm-btn-wrap {
+		display: flex;
+		justify-content: center;
+	}
+
+	.fm-btn {
+		width: 220rpx;
+		height: 60rpx;
+		border-radius: 32rpx;
+		background: #000;
+		color: #ffffff;
+		font-weight: 700;
+		font-size: 32rpx;
+		 font-style: normal;
+		border: none;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-bottom: 20rpx;
+	}
+</style>
\ No newline at end of file
diff --git a/components/IndexCard.vue b/components/IndexCard.vue
index 24d0e7e..ad1ae69 100644
--- a/components/IndexCard.vue
+++ b/components/IndexCard.vue
@@ -1,190 +1,220 @@
+<!-- @format -->
+
 <template>
-	<view class="index-card">
-		<view class="card-header">
-			<view class="flag-container">
-				<image :src="flagIcon" class="flag-icon" mode="aspectFit"></image>
-			</view>
-			<text class="index-name">{{ stockName }}</text>
-		</view>
-		
-		<view class="price-info">
-			<text class="current-price" :style="{ color: priceColor }">{{ currentPrice }}</text>
-			<view class="change-info">
-				<text class="change-amount" :style="{ color: priceColor }">{{ changeAmount }}</text>
-				<text class="change-percent" :style="{ color: priceColor }">{{ changePercent }}</text>
-			</view>
-		</view>
-		
-		<view class="chart-container">
-			<view class="mini-chart" :style="{ backgroundColor: chartBgColor }">
-				<!-- 这里可以放置实际的图表组件，目前用简单的波浪线表示 -->
-				<view class="chart-line" :style="{ borderColor: priceColor }"></view>
-			</view>
-		</view>
-	</view>
+  <view class="index-card">
+    <view class="card-header">
+      <view class="flag-container">
+        <image :src="getMarketFlag(market)" class="flag-icon" mode="aspectFit"></image>
+      </view>
+      <text class="index-name">{{ stockName }}</text>
+    </view>
+
+    <view class="price-info">
+      <text class="current-price" :style="{ color: priceColor }">{{ currentPrice }}</text>
+      <view class="change-info">
+        <text class="change-amount" :style="{ color: priceColor }">{{ changeAmount }}</text>
+        <text class="change-percent" :style="{ color: priceColor }">{{ changePercent }}</text>
+      </view>
+    </view>
+
+    <view class="chart-container">
+      <view class="mini-chart" :style="{ backgroundColor: chartBgColor }">
+        <!-- 这里可以放置实际的图表组件，目前用简单的波浪线表示 -->
+        <view class="chart-line" :style="{ borderColor: priceColor }"></view>
+      </view>
+    </view>
+  </view>
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { computed } from "vue";
 
 // 定义组件属性
 const props = defineProps({
-	// 国旗图标路径
-	flagIcon: {
-		type: String,
-		required: true
-	},
-	// 指数名称
-	stockName: {
-		type: String,
-		required: true
-	},
-	// 当前价格
-	currentPrice: {
-		type: [String, Number],
-		required: true
-	},
-	// 涨跌金额
-	changeAmount: {
-		type: [String, Number],
-		required: true
-	},
-	// 涨跌幅
-	changePercent: {
-		type: [String, Number],
-		required: true
-	},
-	// 是否上涨
-	isRising: {
-		type: Boolean,
-		default: true
-	}
-})
+  // 国旗图标路径
+  market: {
+    type: String,
+    required: true,
+  },
+  // 指数名称
+  stockName: {
+    type: String,
+    required: true,
+  },
+  // 当前价格
+  currentPrice: {
+    type: [String, Number],
+    required: true,
+  },
+  // 涨跌金额
+  changeAmount: {
+    type: [String, Number],
+    required: true,
+  },
+  // 涨跌幅
+  changePercent: {
+    type: [String, Number],
+    required: true,
+  },
+  // 是否上涨
+  isRising: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const getMarketFlag = (market) => {
+  console.log("market", market);
+  let imagePath;
+
+  if (market === "cn") {
+    imagePath = "/static/marketSituation-image/country-flag/cn.png";
+  } else if (market === "hk") {
+    imagePath = "/static/marketSituation-image/country-flag/hk.png";
+  } else if (market === "can") {
+    imagePath = "/static/marketSituation-image/country-flag/can.png";
+  } else if (market === "my") {
+    imagePath = "/static/marketSituation-image/country-flag/my.png";
+  } else if (market === "sg") {
+    imagePath = "/static/marketSituation-image/country-flag/sg.png";
+  } else if (market === "th") {
+    imagePath = "/static/marketSituation-image/country-flag/th.png";
+  } else if (market === "vi") {
+    imagePath = "/static/marketSituation-image/country-flag/vi.png";
+  } else if (market === "us" || market === "usa") {
+    imagePath = "/static/marketSituation-image/country-flag/us.png";
+  } else {
+    imagePath = "/static/marketSituation-image/country-flag/global.png";
+  }
+
+  console.log("返回的图片路径:", imagePath);
+  return imagePath;
+};
 
 // 计算价格颜色
 const priceColor = computed(() => {
-	return props.isRising ? '#00C853' : '#FF1744'
-})
+  return props.isRising ? "#00C853" : "#FF1744";
+});
 
 // 计算图表背景色
 const chartBgColor = computed(() => {
-	return props.isRising ? '#E8F5E8' : '#FFEBEE'
-})
+  return props.isRising ? "#E8F5E8" : "#FFEBEE";
+});
 </script>
 
 <style scoped>
 .index-card {
-	background-color: #ffffff;
-	border-radius: 12rpx;
-	padding: 20rpx;
-	margin: 16rpx;
-	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
-	border: 1rpx solid #f0f0f0;
+  background-color: #ffffff;
+  border-radius: 12rpx;
+  padding: 20rpx;
+  margin: 16rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  border: 1rpx solid #f0f0f0;
 }
 
 .card-header {
-	display: flex;
-	align-items: center;
-	margin-bottom: 16rpx;
+  display: flex;
+  align-items: center;
+  margin-bottom: 16rpx;
 }
 
 .flag-container {
-	width: 48rpx;
-	height: 32rpx;
-	margin-right: 12rpx;
-	border-radius: 4rpx;
-	overflow: hidden;
+  width: 48rpx;
+  height: 32rpx;
+  margin-right: 12rpx;
+  border-radius: 4rpx;
+  overflow: hidden;
 }
 
 .flag-icon {
-	width: 100%;
-	height: 100%;
+  width: 100%;
+  height: 100%;
 }
 
 .index-name {
-	font-size: 28rpx;
-	font-weight: 500;
-	color: #333333;
-	flex: 1;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
+  font-size: 28rpx;
+  font-weight: 500;
+  color: #333333;
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .price-info {
-	margin-bottom: 20rpx;
+  margin-bottom: 20rpx;
 }
 
 .current-price {
-	font-size: 36rpx;
-	font-weight: bold;
-	display: block;
-	margin-bottom: 8rpx;
+  font-size: 36rpx;
+  font-weight: bold;
+  display: block;
+  margin-bottom: 8rpx;
 }
 
 .change-info {
-	display: flex;
-	align-items: center;
-	gap: 16rpx;
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
 }
 
 .change-amount {
-	font-size: 24rpx;
-	font-weight: 500;
+  font-size: 24rpx;
+  font-weight: 500;
 }
 
 .change-percent {
-	font-size: 24rpx;
-	font-weight: 500;
+  font-size: 24rpx;
+  font-weight: 500;
 }
 
 .chart-container {
-	height: 80rpx;
-	border-radius: 8rpx;
-	overflow: hidden;
+  height: 80rpx;
+  border-radius: 8rpx;
+  overflow: hidden;
 }
 
 .mini-chart {
-	width: 100%;
-	height: 100%;
-	position: relative;
-	border-radius: 8rpx;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  border-radius: 8rpx;
 }
 
 .chart-line {
-	position: absolute;
-	bottom: 20rpx;
-	left: 10rpx;
-	right: 10rpx;
-	height: 2rpx;
-	border-top: 2rpx solid;
-	border-style: solid;
+  position: absolute;
+  bottom: 20rpx;
+  left: 10rpx;
+  right: 10rpx;
+  height: 2rpx;
+  border-top: 2rpx solid;
+  border-style: solid;
 }
 
 /* 添加一些波浪效果 */
 .chart-line::before {
-	content: '';
-	position: absolute;
-	top: -10rpx;
-	left: 20%;
-	width: 20rpx;
-	height: 20rpx;
-	border: 2rpx solid;
-	border-color: inherit;
-	border-radius: 50%;
-	background: transparent;
+  content: "";
+  position: absolute;
+  top: -10rpx;
+  left: 20%;
+  width: 20rpx;
+  height: 20rpx;
+  border: 2rpx solid;
+  border-color: inherit;
+  border-radius: 50%;
+  background: transparent;
 }
 
 .chart-line::after {
-	content: '';
-	position: absolute;
-	top: -6rpx;
-	right: 30%;
-	width: 12rpx;
-	height: 12rpx;
-	border: 2rpx solid;
-	border-color: inherit;
-	border-radius: 50%;
-	background: transparent;
+  content: "";
+  position: absolute;
+  top: -6rpx;
+  right: 30%;
+  width: 12rpx;
+  height: 12rpx;
+  border: 2rpx solid;
+  border-color: inherit;
+  border-radius: 50%;
+  background: transparent;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/deepExploration_header.vue b/components/deepExploration_header.vue
index daae53c..cddab00 100644
--- a/components/deepExploration_header.vue
+++ b/components/deepExploration_header.vue
@@ -72,6 +72,7 @@
             <view class="history-main" @click="itemClick(item)">
               <text class="history-query">{{ item.stockName }}</text>
               <text class="history-query">（{{ item.stockCode }}）</text>
+              <text class="history-query">（{{ item.stockCode }}）</text>
             </view>
             <text class="history-time">{{
               formatTimeForHistory(item.createdTime)
@@ -98,6 +99,7 @@ const props = defineProps({
   },
 });
 const showHistoryDrawer = ref(false);
+const modelType = ref('');
 const drawerOffsetY = ref(0);
 // const handleHistory = () => {
 //   showHistoryDrawer.value = true;
diff --git a/components/login-prompt.vue b/components/login-prompt.vue
index 4d302be..23dd653 100644
--- a/components/login-prompt.vue
+++ b/components/login-prompt.vue
@@ -15,20 +15,40 @@
 </template>
 
 <script setup>
-import { ref, nextTick, onMounted } from "vue";
+import { ref, nextTick, onMounted, watch } from "vue";
 import { useUserStore } from "../stores/modules/userInfo";
 import { useDeviceStore } from "../stores/modules/deviceInfo";
+import { useLoginStore } from "../stores/modules/login";
 import { LoginApi } from "../api/start/login";
 const deviceId = ref("");
 
 const userStore = useUserStore();
 const deviceStore = useDeviceStore();
+const loginStore = useLoginStore();
 // 初始化
 onMounted(() => {
   if (!userStore.userInfo) {
     show();
   }
-});
+}),
+  // watch(
+  //   () => loginStore.loginInfo,
+  //   (newVal, oldVal) => {
+  //     console.log("登录状态改变");
+  //     if (newVal === "false") {
+  //       console.log("登录失败");
+  //       show();
+  //       loginStore.setLoginInfo("true");
+  //     }
+  //   }
+  // );
+
+  loginStore.$subscribe(() => {
+    if (loginStore.loginInfo === "false") {
+      console.log("登录失败");
+      show();
+    }
+  });
 
 // 定义响应式数据
 const showPrompt = ref(false);
@@ -84,7 +104,13 @@ const continueAsVisitor = async () => {
 
   if (res.code === 200) {
     userStore.setUserInfo(res.data);
+    console.log("0loginStore.loginInfo", loginStore.loginInfo);
     hide();
+    
+    // 发送游客登录成功事件，通知首页重新加载
+    uni.$emit('visitorLoginSuccess', {
+      userInfo: res.data
+    });
   }
 };
 
diff --git a/pages.json b/pages.json
index 299278f..c90736c 100644
--- a/pages.json
+++ b/pages.json
@@ -306,7 +306,35 @@
 			{
 				"navigationBarTitleText" : "创建密码"
 			}
+		},
+		{
+			"path": "pages/customerServicePlatform/csPlatformIndex",
+			"style": {
+				"navigationStyle": "custom",
+				"disableSwipeBack": true,
+				"titleNView": false,
+				"bounce": false
+			}
+		},
+		{
+			"path": "pages/customerServicePlatform/historyRecord",
+			"style": {
+				"navigationStyle": "custom",
+				"disableSwipeBack": true,
+				"titleNView": false,
+				"bounce": false
+			}
+		},
+		{
+			"path": "pages/customerServicePlatform/questionDetail",
+			"style": {
+				"navigationStyle": "custom",
+				"disableSwipeBack": true,
+				"titleNView": false,
+				"bounce": false
+			}
 		}
+		
 	],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
diff --git a/pages/customerServicePlatform/csPlatformIndex.vue b/pages/customerServicePlatform/csPlatformIndex.vue
new file mode 100644
index 0000000..d8cd7bc
--- /dev/null
+++ b/pages/customerServicePlatform/csPlatformIndex.vue
@@ -0,0 +1,687 @@
+<template>
+	<view class="main">
+		<view class="top" :style="{height:iSMT+'px'}"></view>
+
+		<!-- 头部导航 -->
+		<view class="header">
+			<view class="back-icon">
+				<image @click="onBack" src="/static/customer-service-platform/cs-platform-back.png"
+					class="header-icon-image"></image>
+			</view>
+			<view class="title">{{headerTitle}}</view>
+			<view class="notification-icon">
+				<image src="/static/customer-service-platform/message.png" class="header-icon-image"></image>
+			</view>
+		</view>
+		<!-- 内容区域 - 使用滚动视图 -->
+		<scroll-view scroll-y class="content-container">
+			<view class="content-header">
+				<view class="content-header-area">
+					<view class="logo">
+						<image mode="aspectFit" src="/static/customer-service-platform/ellipse-dc-img.png"></image>
+					</view>
+					<view class="greeting">
+						<text class="greet-title">嗨，我能为你做点什么？</text>
+						<text class="greet-sub">DeepChart随时为您提供服务</text>
+					</view>
+				</view>
+			</view>
+			<!--猜你想问卡片部分-->
+			<view class="card">
+				<view class="suggest-header">
+					<text class="suggest-title">猜你想问</text>
+					<view class="swap" @click="getQuestionList()">
+						<image class="swap-icon" src="/static/customer-service-platform/refresh-icon.png"></image>
+						<text class="swap-title">换一换</text>
+					</view>
+				</view>
+				<view class="card-line"></view>
+				<view class="suggest-list">
+					<view class="suggest-item" v-for="(q, idx) in showQuestions" :key="idx" @click="onQuestionClick(q)">
+						<view class="left">
+							<view :class="['num', 'num-' + ((idx % 5) + 1)]">{{ idx + 1 }}</view>
+							<text class="q-text">{{ q }}</text>
+						</view>
+						<view class="right">
+							<text class="arrow">›</text>
+						</view>
+					</view>
+				</view>
+			</view>
+			<!--反馈卡片部分-->
+			<text class="feedback-card-title">反馈中心</text>
+			<view class="card">
+				<view class="suggest-header">
+					<text class="feedback-title">填写反馈内容</text>
+				</view>
+				<view class="card-line"></view>
+				<textarea class="feedback-input" placeholder="请描述您想反馈的内容 最多可输入200字" maxlength="200"
+					v-model="feedbackText" />
+				<view class="meta-row">
+					<text class="char-count">{{ feedbackText.length }}/200</text>
+				</view>
+				<view class="suggest-header">
+					<text class="upload-img-tip">上传图片</text>
+				</view>
+				<view class="upload-row">
+					<view class="img-slot" v-for="(img, index) in images" :key="index">
+						<image :src="img" mode="scaleToFill" class="slot-img" />
+						<button v-if="img" class="remove" @click="removeImage(index)">×</button>
+					</view>
+					<view class="img-slot" v-if="images.length < 3">
+						<view class="slot-empty" @click="chooseImage()">
+							<image src="/static/customer-service-platform/camera.png" class="camera-icon" />
+						</view>
+					</view>
+					<text class="tip-text" v-if="images.length === 0">最多添加3张图片</text>
+				</view>
+
+				<button class="feedback-btn" @click="onSumbitFeedback()">提交</button>
+				<feedback-modal ref="feedback" @confirm="onConfirm" />
+			</view>
+			<!--历史反馈卡片部分-->
+			<view class="card">
+				<text class="feedback-title">历史反馈内容</text>
+				<view class="card-line"></view>
+				<button class="feedback-btn" @click="viewHistory">查看</button>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	import { useUserStore } from "../../stores/modules/userInfo.js"
+	import {
+		getQuestionApi,
+		addFeedbackRecordApi,
+		uploadImageApi
+	} from "../../api/customerServicePlatform/customerServicePlatform";
+
+	import FeedbackModal from '@/components/FeedbackModal.vue'
+	export default {
+		components: {
+			FeedbackModal
+		},
+		data() {
+			return {
+				headerTitle: '智能客服中台',
+				iSMT: 0,
+				questions: [
+					"DeepChart 有免费功能和付费功能的区分吗？具体有哪些？",
+					"如何参与平台的用户反馈活动？反馈的问题会被采纳吗？",
+					"我的自选股最多能添加多少只？能否按市场分类管理？",
+					"注册时必须提供手机号 / 邮箱吗？能否匿名使用？",
+					"忘记登录密码了，如何找回？",
+					'如何注册账号？',
+					'为什么无法注册账户？'
+				],
+				showQuestions: [],
+				feedbackText: '',
+				images: [],
+				token:''
+			}
+		},
+		mounted() {
+			// 状态栏高度
+			this.iSMT = uni.getSystemInfoSync().statusBarHeight;
+			this.getQuestionList()
+			const memberStore = useUserStore()
+			this.token = memberStore.userInfo?.token
+		},
+		methods: {
+			onSuccess() {
+				this.$refs.feedback.show({
+					status: 'success',
+					title: '提交成功',
+					subtitle: '— 感谢您的反馈 —',
+					buttonText: '确定',
+					width: '80%',
+				});
+			},
+			onFail() {
+				this.$refs.feedback.show({
+					status: 'fail',
+					title: '提交失败',
+					subtitle: '— 请重新提交 —',
+					buttonText: '确定',
+					width: '80%',
+				});
+			},
+			onBack() {
+				if (typeof uni !== 'undefined') uni.navigateBack();
+			},
+			async getQuestionList() {
+				const res = await getQuestionApi()
+				console.log(res)
+				if (res.code == 200) {
+					this.showQuestions = res.data
+				}
+
+			},
+			onQuestionClick(q) {
+				if (typeof uni !== 'undefined') uni.navigateTo({
+					url: `/pages/customerServicePlatform/questionDetail?question=${encodeURIComponent(q)}`
+				});
+			},
+			chooseImage() {
+				const that = this;
+				if (typeof uni === 'undefined' || !uni.chooseImage) return;
+
+				const remain = 3 - (that.images ? that.images.length : 0);
+				if (remain <= 0) {
+					if (typeof uni !== 'undefined') uni.showToast({
+						title: '最多只能上传3张',
+						icon: 'none'
+					});
+					return;
+				}
+
+				uni.chooseImage({
+					count: remain,
+					sizeType: ['original', 'compressed'],
+					sourceType: ['album', 'camera'],
+					success(res) {
+						const paths = res.tempFilePaths || (res.tempFiles && res.tempFiles.map(f => f.path)) || [];
+						for (let p of paths) {
+							if (that.images.length < 3) {
+								that.images.push(p);
+							}
+						}
+					},
+					fail(err) {
+						uni.showToast({
+							title: `选择图片失败`,
+							icon: 'none'
+						});
+					}
+				});
+			},
+
+			removeImage(index) {
+				// 删除并保持响应
+				this.images.splice(index, 1);
+			},
+			async onSumbitFeedback() {
+				if (!this.feedbackText.trim()) {
+					if (typeof uni !== 'undefined') uni.showToast({
+						title: '请填写反馈内容',
+						icon: 'none'
+					});
+					return;
+				}
+				if (typeof uni !== 'undefined') uni.showLoading({
+					title: '提交中...'
+				});
+				try {
+					let uploadedImages = [];
+					let imgFlag = true
+					for (let i = 0; i < this.images.length; i++) {
+						const f = this.images[i];
+						await new Promise((resolve, reject) => {
+							uni.getImageInfo({
+								src: f,
+								success: () => resolve(),
+								fail: reject
+							});
+						});
+						const uploadRes = await new Promise((resolve, reject) => {
+							uni.uploadFile({
+								url: 'http://39.101.133.168:8828/hljw/api/aws/upload',
+								filePath: f,
+								name: 'file',
+								formData: {
+									dir: 'deepchart'
+								},
+								success: (res) => {
+									try {
+										const data = JSON.parse(res.data);
+										if (data.code === 200) {
+											uploadedImages.push(data.data.url);
+											resolve(data);
+										} else {
+											uni.showToast({
+												title: `第${i + 1}张图片上传失败`,
+												icon: 'none'
+											});
+											imgFlag = false;
+											reject(data);
+										}
+									} catch (err) {
+										imgFlag = false;
+										reject(err);
+									}
+								},
+								fail: (err) => {
+									imgFlag = false;
+									uni.showToast({
+										title: `第${i + 1}张图片上传失败`,
+										icon: 'none'
+									});
+									reject(err);
+								}
+							});
+						});
+					}
+					if (!imgFlag) {
+						return
+					}
+					const [image1 = '', image2 = '', image3 = ''] = uploadedImages;
+					const res = await addFeedbackRecordApi({
+						token: this.token,
+						content: this.feedbackText,
+						image1,
+						image2,
+						image3
+					})
+					if (res.code == 200) {
+						this.onSuccess()
+					} else {
+						this.onFail()
+					}
+				} catch {
+					this.onFail()
+				} finally {
+					uni.hideLoading();
+					this.feedbackText = '';
+					this.images = [];
+				}
+			},
+			viewHistory() {
+				// 跳转到历史页
+				if (typeof uni !== 'undefined') uni.navigateTo({
+					url: '/pages/customerServicePlatform/historyRecord'
+				});
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.main {
+		display: flex;
+		flex-direction: column;
+		height: 100vh;
+		background-color: #ffffff;
+	}
+
+	.header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 20rpx 30rpx;
+		background-color: #ffffff;
+	}
+
+	.title {
+		color: #000000;
+		text-align: center;
+		font-size: 32rpx;
+		font-style: normal;
+		font-weight: 400;
+	}
+
+	.back-icon,
+	.notification-icon {
+		width: 40rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.header-icon-image {
+		width: 40rpx;
+		height: 40rpx;
+		object-fit: contain;
+	}
+
+	.content-container {
+		padding: 20rpx;
+		width: 100%;
+		box-sizing: border-box;
+		overflow-x: hidden;
+	}
+
+
+	.content-header {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 24rpx;
+		padding: 0 60rpx;
+		width: 100%;
+		box-sizing: border-box;
+		height: 188rpx;
+	}
+
+	.content-header-area {
+		display: flex;
+		gap: 20rpx;
+	}
+
+	.logo {
+		width: 120rpx;
+		height: 120rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex: 0 0 112rpx;
+	}
+
+	.greeting {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		flex: 1 1 auto;
+	}
+
+	.greet-title {
+		color: #000;
+		font-size: 40rpx;
+		font-style: normal;
+		font-weight: 500;
+		line-height: normal;
+		margin: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.greet-sub {
+		color: #838383;
+		font-size: 28rpx;
+		font-style: normal;
+		font-weight: 400;
+		line-height: normal;
+		margin-top: 12rpx;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.card {
+		width: 90%;
+		margin: 0 auto;
+		border-radius: 16rpx;
+		padding: 20rpx 40rpx;
+		box-sizing: border-box;
+		border-radius: 12rpx;
+		border: 4rpx solid #FCC8D4;
+		background: linear-gradient(180deg, #FCC8D3 0%, #FEF0F3 30%, #FFF 100%);
+		margin-bottom: 20rpx;
+	}
+
+	.suggest-header {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	.suggest-title {
+		color: #000000;
+		font-size: 32rpx;
+		font-style: normal;
+		font-weight: 400;
+		line-height: normal;
+	}
+
+	.swap {
+		display: flex;
+		align-items: center;
+		transition: transform 0.1s ease, background-color 0.1s ease;
+	}
+
+	.swap:active {
+		transform: scale(0.95);
+	}
+
+	.swap-icon {
+		width: 30rpx;
+		height: 30rpx;
+	}
+
+	.swap-title {
+		padding-left: 8rpx;
+		color: #000000;
+		font-size: 24rpx;
+		font-style: normal;
+		font-weight: 400;
+		line-height: normal;
+	}
+
+	.suggest-list {
+		margin-top: 20rpx;
+	}
+
+	.card-line {
+		margin-top: 20rpx;
+		width: 100%;
+		height: 2rpx;
+		border-radius: 2rpx;
+		background: #FFF;
+	}
+
+	.suggest-item {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding-top: 10rpx;
+		border-radius: 12rpx;
+		margin-bottom: 20rpx;
+		width: 100%;
+		box-sizing: border-box;
+	}
+
+	.left {
+		width: 90%;
+		display: flex;
+		align-items: center;
+	}
+
+	.num {
+		font-size: 40rpx;
+		font-style: normal;
+		font-weight: 700;
+		line-height: normal;
+	}
+
+	.num-1 {
+		color: #df5662;
+	}
+
+	.num-2 {
+		color: #ec6d4f;
+	}
+
+	.num-3 {
+		color: #f3ba40;
+	}
+
+	.num-4 {
+		color: #9296a0;
+	}
+
+	.num-5 {
+		color: #9296a0;
+	}
+
+	.q-text {
+		padding-left: 14rpx;
+		display: block;
+		color: #333;
+		font-size: 28rpx;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.right {
+		width: 48rpx;
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+	}
+
+	.arrow {
+		color: #cfcfcf;
+		font-size: 36rpx;
+	}
+
+	.suggest-item:active {
+		background: rgba(255, 77, 128, 0.06);
+	}
+
+	.feedback-card-title {
+		display: flex;
+		justify-content: center;
+		color: #000000;
+		font-size: 32rpx;
+		font-weight: 700;
+		line-height: 40rpx;
+		width: 100%;
+		margin-bottom: 20rpx;
+	}
+
+	.feedback-title {
+		color: #000000;
+		font-size: 32rpx;
+		font-style: normal;
+		font-weight: 400;
+		line-height: normal;
+	}
+
+	.feedback-input {
+		width: 100%;
+		display: flex;
+		padding: 20rpx;
+		flex-direction: column;
+		box-sizing: border-box;
+		align-items: flex-start;
+		gap: 12rpx;
+		align-self: stretch;
+		border-radius: 12rpx;
+		border: 2rpx solid #F0F1F1;
+		margin-top: 20rpx;
+		display: flex;
+		background: #FFF;
+		color: #8a8a8a;
+		font-size: 24rpx;
+		font-weight: 700;
+		line-height: normal;
+	}
+
+	.meta-row {
+		display: flex;
+		justify-content: flex-end;
+		margin-top: 12rpx;
+	}
+
+	.char-count {
+		color: #999
+	}
+
+	.upload-img-tip {
+		color: #000000;
+		font-size: 24rpx;
+		font-style: normal;
+		font-weight: 400;
+		line-height: normal;
+	}
+
+	.upload-row {
+		display: flex;
+		justify-content: flex-start;
+		align-items: flex-start;
+		align-content: flex-start;
+		flex-wrap: wrap;
+		gap: 20rpx;
+		margin-top: 20rpx;
+		width: 100%;
+	}
+
+	.img-slot {
+		width: calc((100% - 2 * 30rpx) / 3);
+		aspect-ratio: 1 / 1;
+		border-radius: 6px;
+		border: 1px solid #F0F1F1;
+		background: #FFF;
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		overflow: hidden;
+		transition: transform 0.2s ease;
+	}
+
+	.slot-empty {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.camera-icon {
+		width: 34rpx;
+		height: 34rpx;
+	}
+
+	.slot-img {
+		width: 100%;
+		height: 100%;
+		border-radius: 16rpx;
+	}
+
+	.remove {
+		position: absolute;
+		right: 6rpx;
+		top: 6rpx;
+		border-radius: 50%;
+		background: #fd5c58;
+		padding: 0;
+		color: #fff;
+		width: 36rpx;
+		height: 36rpx;
+		font-size: 28rpx;
+		line-height: 36rpx;
+		text-align: center;
+		border: none;
+		outline: none;
+		cursor: pointer;
+	}
+
+	.remove:active {
+		background: rgba(0, 0, 0, 0.75);
+	}
+
+	.image-upload-tip {
+		display: flex;
+		align-items: center;
+	}
+
+	.tip-text {
+		color: #999999;
+		font-size: 24rpx;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 40rpx;
+		padding-top: 64rpx;
+	}
+
+	.feedback-btn {
+		margin-top: 24rpx;
+		width: 180rpx;
+		height: 60rpx;
+		aspect-ratio: 89/30;
+		border-radius: 30rpx;
+		background: #090A08;
+		color: #ffffff;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		font-size: 32rpx;
+		font-style: normal;
+		font-weight: 700;
+		line-height: normal;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/customerServicePlatform/historyRecord.vue b/pages/customerServicePlatform/historyRecord.vue
new file mode 100644
index 0000000..5e5e61e
--- /dev/null
+++ b/pages/customerServicePlatform/historyRecord.vue
@@ -0,0 +1,358 @@
+<template>
+	<view class="main">
+		<view class="top" :style="{height:iSMT+'px'}"></view>
+		<!-- 头部导航 -->
+		<view class="header">
+			<view class="back-icon">
+				<image @click="goBack()" src="/static/customer-service-platform/cs-platform-back.png"
+					class="header-icon-image"></image>
+			</view>
+			<view class="title">智能客服中台</view>
+			<view class="notification-icon">
+				<image src="/static/customer-service-platform/message.png" class="header-icon-image"></image>
+			</view>
+		</view>
+		<!-- 内容区域 - 使用滚动视图 -->
+		<scroll-view scroll-y class="content-container">
+			<view class="list-wrapper" v-if="historyList.length > 0">
+				<view class="content-header">
+					<text class="content-title">历史反馈内容</text>
+				</view>
+				<view class="card-line"></view>
+				<view v-for="(item, idx) in historyList" :key="item.id" class="history-item card">
+					<view class="item-line" v-if="idx != 0"></view>
+					<view class="item-head">
+						<view class="dot-outer">
+							<view class="dot-inner"></view>
+						</view>
+
+						<text class="feedback-time">{{ formatTime(item.createdAt) }}</text>
+						<text class="feedback-status">
+							{{ statusText }}
+							<image class="smile-icon" src="/static/customer-service-platform/smile-icon.png"></image>
+						</text>
+					</view>
+
+					<view class="content-box">
+						<text class="content-text">{{ item.content }}</text>
+						<text class="count">{{ item.content.length }}/200</text>
+					</view>
+					<view v-if="item.images && item.images.length" class="thumb-row">
+						<view v-for="(img, i) in item.images" :key="i" class="thumb-slot"
+							@click="previewImage(item.images, i)">
+							<image :src="img" mode="scaleToFill" class="thumb-img" />
+						</view>
+					</view>
+				</view>
+			</view>
+
+			<!-- 如果没有历史，显示空态 -->
+			<view v-if="historyList.length === 0" class="empty">
+				<image mode="aspectFit" class="empty-img" src="/static/customer-service-platform/empty-content.png">
+				</image>
+				<text class="empty-tip">暂无内容~</text>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	import { useUserStore } from "../../stores/modules/userInfo.js"
+	import {
+		getFeedbackRecordsApi,
+	} from "../../api/customerServicePlatform/customerServicePlatform";
+	export default {
+		data() {
+			return {
+				iSMT: 0,
+				statusText: '反馈成功',
+				historyList: [],
+				token:''
+			};
+		},
+		mounted() {
+			this.iSMT = uni.getSystemInfoSync().statusBarHeight;
+			this.loadHistoryList()
+			const memberStore = useUserStore()
+			this.token = memberStore.userInfo?.token
+		},
+		methods: {
+			formatTime(str) {
+			  if (!str) return '';
+			  const d = new Date(str);
+			  const yyyy = d.getFullYear();
+			  const mm = String(d.getMonth() + 1).padStart(2, '0');
+			  const dd = String(d.getDate()).padStart(2, '0');
+			  const hh = String(d.getHours()).padStart(2, '0');
+			  const mi = String(d.getMinutes()).padStart(2, '0');
+			  return `${yyyy}-${mm}-${dd} ${hh}:${mi}`;
+			},
+			goBack() {
+				if (typeof uni !== 'undefined' && uni.navigateBack) {
+					uni.navigateBack();
+				} else {
+					window.history.back();
+				}
+			},
+			async loadHistoryList() {
+				const res = await getFeedbackRecordsApi({
+					token: this.token
+				})
+				console.log(res)
+				if (res.code == 200) {
+					this.historyList = res.data.map(item => {
+						const images = [item.image1, item.image2, item.image3].filter(img => !!img)
+						return {
+							id: item.id,
+							createdAt: item.createdAt,
+							content: item.content,
+							images,
+							dccode: item.dccode
+						}
+					})
+				}
+			},
+			previewImage(list, index) {
+				if (typeof uni !== 'undefined' && uni.previewImage) {
+					uni.previewImage({
+						current: list[index],
+						urls: list
+					});
+				} else {
+					window.open(list[index], '_blank');
+				}
+			}
+		}
+	};
+</script>
+
+<style scoped>
+	.main {
+		display: flex;
+		flex-direction: column;
+		height: 100vh;
+		background-color: #ffffff;
+	}
+
+	.header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 20rpx 30rpx;
+		background-color: #ffffff;
+	}
+
+	.title {
+		color: #000000;
+		text-align: center;
+		font-size: 32rpx;
+		font-style: normal;
+		font-weight: 400;
+	}
+
+	.back-icon,
+	.notification-icon {
+		width: 40rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.header-icon-image {
+		width: 40rpx;
+		height: 40rpx;
+		object-fit: contain;
+	}
+
+	.content-container {
+		padding: 20rpx;
+		padding-top: 0;
+		width: 100%;
+		box-sizing: border-box;
+		overflow-x: hidden;
+	}
+
+	/* 列表包装器，居中卡片 */
+	.list-wrapper {
+		width: 90%;
+		margin: 0 auto;
+		padding: 20rpx 40rpx;
+		flex-direction: column;
+		align-items: center;
+		gap: 20rpx;
+		box-sizing: border-box;
+		border-radius: 12rpx;
+		border: 4rpx solid #FCC8D4;
+		background: linear-gradient(180deg, #FCC8D3 0%, #FEF0F3 30%, #FFF 100%);
+	}
+
+	.content-header {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	.content-title {
+		color: #000000;
+		font-size: 32rpx;
+		font-style: normal;
+		font-weight: 400;
+		line-height: normal;
+	}
+
+	.card-line {
+		margin-top: 20rpx;
+		width: 100%;
+		height: 2rpx;
+		border-radius: 2rpx;
+		background: #FFF;
+	}
+
+	/* 每一条历史卡片 */
+	.history-item {
+		border-radius: 10rpx;
+		padding: 20rpx;
+		margin-bottom: 20rpx;
+		box-sizing: border-box;
+		box-shadow: 0 4rpx 12rpx rgba(255, 77, 128, 0.06);
+	}
+	.item-line{
+		margin-bottom: 20rpx;
+		width: 100%;
+		height: 2rpx;
+		border-radius: 2rpx;
+		background: #D9D9D9;
+	}
+	.item-head {
+		display: flex;
+		align-items: center;
+		gap: 12rpx;
+		margin-bottom: 12rpx;
+	}
+
+	.dot-outer {
+		width: 24rpx;
+		height: 24rpx;
+		border-radius: 50%;
+		background: rgba(255, 214, 230, 0.5);
+		/*粉色外圈*/
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		box-shadow: 0 0 0 4rpx #ffffff;
+		/* 最外层白色  */
+	}
+
+	.dot-inner {
+		width: 14rpx;
+		height: 14rpx;
+		border-radius: 50%;
+		background: #ff4150;
+		/* 中心红色 */
+	}
+
+
+	.feedback-time {
+		color: #000000;
+		flex: 1;
+		font-size: 22rpx;
+		font-style: normal;
+		font-weight: 400;
+		line-height: normal;
+		padding-left: 26rpx;
+	}
+
+	.feedback-status {
+		color: #ff4150;
+		font-size: 12rpx;
+		font-style: normal;
+		font-weight: 400;
+		line-height: normal;
+		display: flex;
+		align-items: center;
+	}
+
+	.smile-icon {
+		width: 32rpx;
+		height: 32rpx;
+	}
+
+	/* 内容框 */
+	.content-box {
+		border: 2rpx solid #f0e6ea;
+		background: #fff;
+		border-radius: 8rpx;
+		padding: 18rpx;
+		position: relative;
+		box-sizing: border-box;
+		min-height: 160rpx;
+	}
+
+	.content-text {
+		display: block;
+		white-space: pre-wrap;
+		word-break: break-word;
+		color: #8a8a8a;
+		font-size: 24rpx;
+		font-style: normal;
+		font-weight: 700;
+		line-height: normal;
+		padding-bottom: 26rpx;
+	}
+
+	.count {
+		position: absolute;
+		right: 14rpx;
+		bottom: 10rpx;
+		color: #000000;
+		font-size: 24rpx;
+		font-style: normal;
+		font-weight: 400;
+		line-height: normal;
+	}
+
+	.thumb-row {
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: flex-start;
+		align-items: flex-start;
+		align-content: flex-start;
+		width: 100%;
+		box-sizing: border-box;
+		gap: 20rpx;
+		margin-top: 14rpx;
+		background: #F9FAFE;
+		padding: 20rpx;
+	}
+
+	.thumb-slot {
+		width: calc((100% - 2 * 25rpx) / 3);
+		aspect-ratio: 1 / 1;
+		border-radius: 7rpx;
+		border: 1.2rpx solid #F0F1F1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		overflow: hidden;
+	}
+
+	.thumb-img {
+		width: 100%;
+		height: 100%;
+	}
+
+	.empty {
+		padding: 50rpx 0;
+		text-align: center;
+		color: #afafaf;
+		font-size: 32rpx;
+		font-style: normal;
+		font-weight: 500;
+		line-height: 48rpx;
+	}
+
+	.empty-img {
+		width: 100%;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/customerServicePlatform/questionDetail.vue b/pages/customerServicePlatform/questionDetail.vue
new file mode 100644
index 0000000..e1bdef5
--- /dev/null
+++ b/pages/customerServicePlatform/questionDetail.vue
@@ -0,0 +1,340 @@
+<template>
+	<view class="main">
+		<view class="top" :style="{ height: iSMT + 'px' }"></view>
+
+		<!-- 头部导航 -->
+		<view class="header">
+			<view class="back-icon">
+				<image @click="onBack" src="/static/customer-service-platform/cs-platform-back.png"
+					class="header-icon-image"></image>
+			</view>
+			<view class="title">{{ headerTitle }}</view>
+			<view class="notification-icon">
+				<image src="/static/customer-service-platform/message.png" class="header-icon-image"></image>
+			</view>
+		</view>
+
+		<scroll-view scroll-y class="content-container">
+
+			<view class="content-header">
+				<view class="content-header-area">
+					<view class="logo">
+						<image mode="aspectFit" src="/static/customer-service-platform/ellipse-dc-img.png"></image>
+					</view>
+					<view class="greeting">
+						<text class="greet-title">嗨，我能为你做点什么？</text>
+						<text class="greet-sub">DeepChart随时为您提供服务</text>
+					</view>
+				</view>
+			</view>
+
+			<!-- 卡片部分 -->
+			<view class="card">
+				<!-- 问题头部-->
+				<view class="question-header">
+					<view class="question-row">
+						<image class="question-avatar" src="/static/customer-service-platform/robot-head.png"
+							mode="aspectFill"></image>
+						<view class="question-title">{{ questionTitle }}</view>
+					</view>
+				</view>
+
+				<!-- 卡片内容区-->
+				<view class="card-body">
+					<image class="card-logo" src="/static/customer-service-platform/ellipse-dc-img.png"
+						mode="aspectFit"></image>
+
+					<view class="card-text">
+						<text class="card-paragraph">
+							{{answerContent}}
+						</text>
+					</view>
+				</view>
+
+			</view>
+
+			<view class="login-row" v-if="showLoginRegister">
+				<button class="login-btn" @click="toLogin">登录</button>
+				<button class="register-btn" @click="toRegistration">注册</button>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	import { useUserStore } from "../../stores/modules/userInfo.js"
+	import {
+		getAnswerApi
+	} from "../../api/customerServicePlatform/customerServicePlatform";
+	export default {
+		data() {
+			return {
+				headerTitle: '智能客服中台',
+				iSMT: 0,
+				questionTitle: '',
+				answerContent: '正在思考...',
+				showLoginRegister:false,
+				token:''
+			};
+		},
+		mounted() {
+			this.iSMT = uni.getSystemInfoSync().statusBarHeight || 0;
+			this.getAnswerContent()
+			const memberStore = useUserStore()
+			this.token = memberStore.userInfo?.token
+		},
+		onLoad(options) {
+			if (options.question) {
+				this.questionTitle = decodeURIComponent(options.question);
+				if (this.questionTitle.includes("如何注册")) {
+				   this.showLoginRegister = true
+				} else {
+				    this.showLoginRegister = false
+				}
+			}
+		},
+		methods: {
+			async getAnswerContent() {
+				let conversationId = '';
+				try {
+					const cache = uni.getStorageSync('conversationId');
+					if (cache) conversationId = cache;
+				} catch (e) {
+					conversationId = '';
+				}
+				
+				const res = await getAnswerApi({
+					question: this.questionTitle,
+					conversationId: conversationId,
+					token:this.token
+				})
+				console.log(res)
+				
+				if (res.code == 200) {
+					uni.setStorageSync('conversationId', res.data.conversationId);
+					const answer = res.data.answer
+					this.answerContent = '';
+					for (let i = 0; i < answer.length; i++) {
+						this.answerContent += answer[i];
+						await this.sleepTime(150);
+					}
+				} else {
+					this.answerContent = '获取回答失败，请重试';
+				}
+			},
+			  async sleepTime() {
+			      const ms = Math.floor(Math.random() * (300 - 30 + 1)) + 30;
+			      return new Promise(resolve => setTimeout(resolve, ms));
+			    },
+
+			toRegistration() {
+				uni.redirectTo({
+					url: "/pages/start/Registration/Registration",
+				});
+			},
+			toLogin() {
+				uni.redirectTo({
+					url: "/pages/start/login/login",
+				});
+			},
+			onBack() {
+				if (typeof uni !== 'undefined') uni.navigateBack();
+			}
+		}
+	};
+</script>
+
+<style scoped>
+	.main {
+		display: flex;
+		flex-direction: column;
+		height: 100vh;
+		background-color: #ffffff;
+	}
+
+	.header {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 20rpx 30rpx;
+		background-color: #ffffff;
+	}
+
+	.title {
+		color: #000000;
+		text-align: center;
+		font-size: 32rpx;
+		font-weight: 400;
+	}
+
+	.back-icon,
+	.notification-icon {
+		width: 40rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.header-icon-image {
+		width: 40rpx;
+		height: 40rpx;
+		object-fit: contain;
+	}
+
+	.content-container {
+		padding: 20rpx;
+		width: 100%;
+		box-sizing: border-box;
+		overflow-x: hidden;
+	}
+
+	.content-header {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 24rpx;
+		padding: 0 60rpx;
+		width: 100%;
+		box-sizing: border-box;
+		height: 188rpx;
+	}
+
+	.content-header-area {
+		display: flex;
+		gap: 20rpx;
+	}
+
+	.logo {
+		width: 120rpx;
+		height: 120rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex: 0 0 112rpx;
+	}
+
+	.greeting {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		flex: 1 1 auto;
+	}
+
+	.greet-title {
+		color: #000;
+		font-size: 40rpx;
+		font-style: normal;
+		font-weight: 500;
+		line-height: normal;
+		margin: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.greet-sub {
+		color: #838383;
+		font-size: 28rpx;
+		font-style: normal;
+		font-weight: 400;
+		line-height: normal;
+		margin-top: 12rpx;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.card {
+		width: 90%;
+		margin: 0 auto 20rpx;
+		padding: 28rpx;
+		box-sizing: border-box;
+		border-radius: 16rpx;
+		border: 4rpx solid #FF7C99;
+		background: #fff;
+	}
+
+	/* 问题头部 */
+	.question-header {
+		width: 100%;
+		margin-bottom: 48rpx;
+	}
+
+	.question-row {
+		display: flex;
+		align-items: center;
+	}
+
+	.question-avatar {
+		width: 52rpx;
+		height: 52rpx;
+		border-radius: 999rpx;
+		margin-right: 20rpx;
+		flex-shrink: 0;
+	}
+
+	.question-title {
+		color: #000000;
+		font-size: 34rpx;
+	}
+
+	/* 卡片内部布局 */
+	.card-body {
+		display: flex;
+		gap: 20rpx;
+		align-items: flex-start;
+	}
+
+	.card-logo {
+		width: 52rpx;
+		height: 52rpx;
+		flex: 0 0 52rpx;
+		border-radius: 8rpx;
+	}
+
+	.card-text {
+		flex: 1 1 auto;
+	}
+
+	.card-paragraph {
+		display: block;
+		color: #000000;
+		font-size: 28rpx;
+		margin-bottom: 14rpx;
+		font-style: normal;
+		font-weight: 500;
+	}
+
+	.login-row {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 100%;
+		margin-top: 100rpx;
+	}
+
+	.login-btn {
+		width: 260rpx;
+		height: 100rpx;
+		border-radius: 50rpx;
+		background: #F3F3F3;
+		color: #000000;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		font-size: 28rpx;
+		margin-right: 20rpx;
+	}
+
+	.register-btn {
+		width: 260rpx;
+		height: 100rpx;
+		border-radius: 60rpx;
+		background: #000;
+		color: #ffffff;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		font-size: 28rpx;
+	}
+</style>
\ No newline at end of file
diff --git a/pages/deepMate/deepMate.vue b/pages/deepMate/deepMate.vue
index 7ca432a..90e0f70 100644
--- a/pages/deepMate/deepMate.vue
+++ b/pages/deepMate/deepMate.vue
@@ -19,7 +19,8 @@
         <image
           src="https://d31zlh4on95l9h.cloudfront.net/images/d7c4e74201213a25dd9574e908233928.svg"
           class="icon"
-          @click="goToNotice" @tap="goToNotice"
+          @click="goToNotice"
+          @tap="goToNotice"
         >
         </image>
         <image
@@ -297,6 +298,11 @@ import {
   postHistory,
   postHistoryDetail,
 } from "../../api/deepMate/deepMate";
+
+const renderer = new marked.Renderer();
+renderer.heading = function (text, level) {
+  return `<p>${text}</p>`;
+};
 // 设置 marked 选项
 marked.setOptions({
   renderer: new marked.Renderer(),
@@ -621,13 +627,20 @@ const simulateBotResponse = async (userMessage) => {
   isSending.value = true;
 
   // 首先进行意图识别
-  const res = await postIntent({
-    content: userMessage,
-    language: "cn",
-    marketList: "hk,cn,usa,my,sg,vi,in,gb",
-    token:
-      "pCtw6AYK0EHAaIexoFHsbZjtsfEAIhcmwkCFm6uKko8VPfMvyDiODL9v9c0veic9fIpQbvT8zN4sH/Si6Q",
-  });
+  let res;
+  try {
+    res = await postIntent({
+      content: userMessage,
+      language: "cn",
+      marketList: "hk,cn,usa,my,sg,vi,in,gb",
+      token:
+        "pCtw6AYK0EHAaIexoFHsbZjtsfEAIhcmwkCFm6uKko8VPfMvyDiODL9v9c0veic9fIpQbvT8zN4sH/Si6Q",
+    });
+  } catch (error) {
+
+  } finally {
+    isSending.value = false;
+  }
 
   console.log("res" + res);
 
@@ -694,31 +707,39 @@ const simulateBotResponse = async (userMessage) => {
 
   // 获取股票信息
   const StockInfo = await postStock({
-    language: 'cn',
-    token: 'pCtw6AYK0EHAaIexoFHsbZjtsfEAIhcmwkCFm6uKko8VPfMvyDiODL9v9c0veic9fIpQbvT8zN4sH/Si6Q',
+    language: "cn",
+    token:
+      "pCtw6AYK0EHAaIexoFHsbZjtsfEAIhcmwkCFm6uKko8VPfMvyDiODL9v9c0veic9fIpQbvT8zN4sH/Si6Q",
     recordId: Number(recordId),
     parentId: Number(parentId),
     stockId: Number(stockId),
   });
-  console.log('postStock payload', { language: 'cn', token: '790750702588f1ea79f24dc56ccd5d8a', recordId, parentId, stockId });
-  console.log('StockInfo', StockInfo);
+  console.log("postStock payload", {
+    language: "cn",
+    token: "790750702588f1ea79f24dc56ccd5d8a",
+    recordId,
+    parentId,
+    stockId,
+  });
+  console.log("StockInfo", StockInfo);
 
   const cftl = StockInfo?.cftl || {};
-  const date = StockInfo?.date || '';
-  
+  const date = StockInfo?.date || "";
 
   if (StockInfo && StockInfo.code !== 200) {
-    const errMsg = `postStock失败(${StockInfo.code}): ${StockInfo.message || '未知错误'}`
-    console.warn(errMsg, StockInfo)
-    messages.value[messages.value.length - 1].isThinking = false
-    messages.value[messages.value.length - 1].isTyping = false
-    messages.value[messages.value.length - 1].content = errMsg
-    isSending.value = false
-    return
+    const errMsg = `postStock失败(${StockInfo.code}): ${
+      StockInfo.message || "未知错误"
+    }`;
+    console.warn(errMsg, StockInfo);
+    messages.value[messages.value.length - 1].isThinking = false;
+    messages.value[messages.value.length - 1].isTyping = false;
+    messages.value[messages.value.length - 1].content = errMsg;
+    isSending.value = false;
+    return;
   }
 
-  const markdown = StockInfo?.data?.markdown || '抱歉，未找到该股票';
-  console.log('StockInfo', StockInfo);
+  const markdown = StockInfo?.data?.markdown || "抱歉，未找到该股票";
+  console.log("StockInfo", StockInfo);
 
   // 添加请求延迟
   // const toDataInfo = await getData();
@@ -926,6 +947,8 @@ async function itemClick(item) {
       isTyping: false,
       isThinking: false,
     };
+
+    onDrawerBackClick();
     messages.value.push(botMsg);
   }
 }
diff --git a/pages/home/home.vue b/pages/home/home.vue
index 80337d5..f9c46a3 100644
--- a/pages/home/home.vue
+++ b/pages/home/home.vue
@@ -2,7 +2,8 @@
 	<view class="main">
 		<!-- 顶部状态栏占位 -->
 		<view class="top" :style="{height:iSMT+'px'}"></view>
-		
+		<!-- 登录的提示 -->
+		<LoginPrompt ref="loginPrompt"></LoginPrompt>
 		<!-- 头部导航 -->
 		<view class="header">
 			<view class="headphone-icon">
@@ -26,8 +27,8 @@
 			<view class="section welcome-section">
 				<!-- 轮播图 -->
 				<swiper class="welcome-swiper" circular autoplay interval="3000" duration="500" indicator-dots indicator-active-color="#4080ff">
-					<swiper-item v-for="(item, index) in 5" :key="index">
-						<image class="swiper-image" src="https://d31zlh4on95l9h.cloudfront.net/images/e4272cc034fa2a3d1ca588ef84e51ab0.png" mode="aspectFill"></image>
+					<swiper-item v-for="(imageUrl, index) in swiperImages" :key="index">
+						<image class="swiper-image" :src="imageUrl" mode="aspectFill"></image>
 					</swiper-item>
 				</swiper>
 			</view>
@@ -193,7 +194,8 @@ import MarketOverview from '../../components/MarketOverview.vue'
 import DeepMate from '../../components/DeepMate.vue'
 // import tcpConnection from '../../api/tcpConnection.js'
 import th from '../../static/language/th'
-
+import MySelectionsAPI from '../../api/home/mySelections.js'
+import { useUserStore } from '../../stores/modules/userInfo'
 export default {
 	components: {
 		footerBar,
@@ -205,6 +207,9 @@ export default {
 			type: 'home',
 			iSMT: 0,
 			
+			// 用户信息 store
+			userStore: null,
+			
 			// 深度探索数据
 			explorationItems: [
 				{ title: '主力追踪', icon: '/static/c1.png' },
@@ -213,6 +218,15 @@ export default {
 				{ title: '主力资金流', icon: '/static/c4.png' }
 			],
 			
+			// 轮播图片数据
+			swiperImages: [
+				'https://d31zlh4on95l9h.cloudfront.net/images/44ec37501cf3ecf5438d401c3d66fcd3.png',
+				'https://d31zlh4on95l9h.cloudfront.net/images/80274b6626bb403d717469b3672333c9.png',
+				'https://d31zlh4on95l9h.cloudfront.net/images/14481c76b09509977d3879ba3141ebc7.png',
+				'https://d31zlh4on95l9h.cloudfront.net/images/19e4c5542e5f974e1c6938897aa20ef9.png',
+				'https://d31zlh4on95l9h.cloudfront.net/images/d0bc1c1bb71917132865b82dab99831b.png'
+			],
+			
 			// 我的自选股票数据
 			myStocks: [
 				{ name: '特斯拉', code: 'TSLA', price: '482.00', change: 2.80, chartImg: '/static/c5.png' },
@@ -251,6 +265,9 @@ export default {
 				type: ''
 			},
 			
+			// 当前TCP使用的股票代码
+			currentStockCodes: ['SH.000001', 'SH.000002', 'SH.000003'],
+			
 			// 我的自选TCP股票数据存储
 			myStocksTcpData: {
 				count: 0,
@@ -319,6 +336,9 @@ export default {
 		// 状态栏高度
 		this.iSMT = uni.getSystemInfoSync().statusBarHeight;
 		
+		// 初始化用户信息 store
+		this.userStore = useUserStore();
+		
 		// 预加载图片资源
 		this.myStocks.forEach(stock => {
 			// 使用uni.getImageInfo替代Image对象
@@ -333,10 +353,25 @@ export default {
 				}
 			})
 		})
-		
+
+
+		// 检查用户登录状态，只有已登录并且不是游客才加载自选股数据
+		if (this.userStore.userInfo && !this.userStore.userInfo.isVisitor) {
+			console.log('是用户登录，加载自选股数据', this.userStore.userInfo)
+			this.loadMySelectionsData()
+		} else if (this.userStore.userInfo && this.userStore.userInfo.isVisitor){
+			console.log('是游客登录，加载默认自选股',this.userStore.userInfo)
+			this.loadGuestDefaultStocks()
+		}else {	
+			console.log('用户未登录',this.userStore.userInfo)
+		}
+
 		// 初始化TCP连接监听器
 		this.initTcpListeners()
 		
+		// 监听游客登录成功事件
+		uni.$on('visitorLoginSuccess', this.handleVisitorLoginSuccess)
+		
 		// 页面渲染完成后自动连接两个TCP连接
 		this.$nextTick(() => {
 			console.log('页面渲染完成，开始自动连接TCP服务器...')
@@ -389,9 +424,36 @@ export default {
 		
 		// 移除TCP监听器，防止内存泄漏
 		this.removeTcpListeners()
+		
+		// 移除游客登录成功事件监听器
+		uni.$off('visitorLoginSuccess', this.handleVisitorLoginSuccess)
 	},
 	
 	methods: {
+		// 处理游客登录成功事件
+		handleVisitorLoginSuccess(data) {
+			console.log('收到游客登录成功事件:', data)
+			// 重新加载页面数据
+			this.reloadPageData()
+		},
+		
+		// 重新加载页面数据
+		reloadPageData() {
+			console.log('重新加载页面数据...')
+			
+			// 更新用户信息store
+			this.userStore = useUserStore()
+			
+			// 根据新的用户状态加载相应的数据
+			if (this.userStore.userInfo && this.userStore.userInfo.isVisitor) {
+				console.log('游客登录成功，加载默认自选股')
+				this.loadGuestDefaultStocks()
+			} else if (this.userStore.userInfo && !this.userStore.userInfo.isVisitor) {
+				console.log('用户登录，加载自选股数据')
+				this.loadMySelectionsData()
+			}
+		},
+		
 		// 防抖函数
 		debounce(fn, delay = 300) {
 			if (this.debounceTimer) clearTimeout(this.debounceTimer)
@@ -401,6 +463,186 @@ export default {
 			}, delay)
 		},
 		
+		// 自选股数据加载相关方法
+		
+		// 加载自选股数据的主方法
+		async loadMySelectionsData() {
+			try {
+				console.log('开始加载自选股数据...')
+				
+				// 调用checkExist判断用户是否存在自选股
+				const checkResult = await MySelectionsAPI.checkExist()
+				console.log('检查用户自选股存在性结果:', checkResult)
+				
+				if (checkResult.code === 200) {
+					const isHave = checkResult.data.is_have
+					
+					if (isHave === 1) {
+						// 用户有自选股，查询所有分组
+						console.log('用户存在自选股，查询所有分组...')
+						await this.loadUserStockGroups()
+					} else {
+						// 用户没有自选股，查询默认自选股
+						console.log('用户不存在自选股，查询默认自选股...')
+						await this.loadDefaultStocks()
+					}
+				} else {
+					console.error('检查用户自选股存在性失败:', checkResult.message)
+					// 失败时也尝试加载默认自选股
+					// await this.loadDefaultStocks()
+				}
+			} catch (error) {
+				console.error('加载自选股数据失败:', error)
+				// 出错时尝试加载默认自选股
+				await this.loadDefaultStocks()
+			}
+		},
+		
+		// 加载用户自选股分组
+		async loadUserStockGroups() {
+			try {
+				const groupResult = await MySelectionsAPI.getUserStockGroupList()
+				console.log('查询用户自选股分组结果:', groupResult)
+				
+				if (groupResult.code === 200 && groupResult.data && groupResult.data.length > 0) {
+					// 找到id最小的分组
+					const minIdGroup = groupResult.data.reduce((min, current) => {
+						return current.id < min.id ? current : min
+					})
+					
+					console.log('找到最小id分组:', minIdGroup)
+					
+					// 查询该分组下的股票
+					await this.loadGroupStocks(minIdGroup.id)
+				} else {
+					console.log('没有找到用户自选股分组，加载默认自选股')
+					await this.loadDefaultStocks()
+				}
+			} catch (error) {
+				console.error('加载用户自选股分组失败:', error)
+				await this.loadDefaultStocks()
+			}
+		},
+		
+		// 加载指定分组下的股票
+		async loadGroupStocks(groupId) {
+			try {
+				const stockResult = await MySelectionsAPI.getUserStockList(null, null, {
+					groupId: groupId,
+					pageNum: 1,
+					pageSize: 20
+				})
+				
+				console.log('查询分组自选股结果:', stockResult)
+				
+				if (stockResult.code === 200 && stockResult.data) {
+					this.processStockData(stockResult.data)
+				} else {
+					console.log('分组下没有股票数据，加载默认自选股')
+					await this.loadDefaultStocks()
+				}
+			} catch (error) {
+				console.error('加载分组股票失败:', error)
+				await this.loadDefaultStocks()
+			}
+		},
+		
+		// 加载默认自选股
+		async loadDefaultStocks() {
+			try {
+				const defaultResult = await MySelectionsAPI.getUserOrDefault()
+				console.log('查询默认自选股结果:', defaultResult)
+				
+				if (defaultResult.code === 200 && defaultResult.data) {
+					this.processStockData(defaultResult.data)
+				} else {
+					console.log('没有默认自选股数据')
+				}
+			} catch (error) {
+				console.error('加载默认自选股失败:', error)
+			}
+		},
+		
+		// 游客加载默认自选股
+		async loadGuestDefaultStocks() {
+			try {
+				console.log('游客开始加载默认自选股...')
+				const guestResult = await MySelectionsAPI.getDefaultStocks()
+				console.log('游客查询默认自选股结果:', guestResult)
+				
+				if (guestResult.code === 200 && guestResult.data) {
+					this.processStockData(guestResult.data)
+				} else {
+					console.log('游客没有默认自选股数据')
+				}
+			} catch (error) {
+				console.error('游客加载默认自选股失败:', error)
+			}
+		},
+		
+		// 处理股票数据
+		processStockData(stockData) {
+			console.log('处理股票数据:', stockData)
+			
+			// 根据返回的数据结构更新myStocks数组
+			// 这里需要根据实际API返回的数据结构进行调整
+			if (Array.isArray(stockData)) {
+				// 如果是数组格式
+				this.myStocks = stockData.map(stock => ({
+					name: stock.name || stock.stock_name || '',
+					code: stock.code || stock.stock_code || '',
+					// price: stock.price || stock.current_price || '0.00',
+					// change: stock.change || stock.change_percent || 0,
+					chartImg: stock.chartImg || '/static/c5.png' // 默认图片
+				}))
+				//重新赋值机构动向简报
+				this.institutionalReports = stockData.map(stock => ({
+					stock: stock.name || stock.stock_name || '',
+					status: stock.code || stock.stock_code || '',
+
+				}))
+			} else if (stockData.list && Array.isArray(stockData.list)) {
+				// 如果是分页格式
+				this.myStocks = stockData.list.map(stock => ({
+					name: stock.name || stock.stock_name || '',
+					code: stock.code || stock.stock_code || '',
+					// price: stock.price || stock.current_price || '0.00',
+					// change: stock.change || stock.change_percent || 0,
+					chartImg: stock.chartImg || '/static/c5.png' // 默认图片
+				}))
+				//重新赋值机构动向简报
+				//重新赋值机构动向简报
+				this.institutionalReports = stockData.map(stock => ({
+					stock: stock.name || stock.stock_name || '',
+					status: stock.code || stock.stock_code || '',
+				}))
+			}
+			
+			console.log('更新后的自选股数据:', this.myStocks)
+			
+			// 更新TCP消息中的股票代码
+			this.updateTcpStockCodes()
+		},
+		
+		// 更新TCP消息中的股票代码
+		updateTcpStockCodes() {
+			// 从myStocks中提取前3个股票代码
+			const stockCodes = this.myStocks.slice(0, 3).map(stock => stock.code).filter(code => code)
+			console.log('更新TCP消息股票代码:', stockCodes)
+			
+			// 如果有股票代码，更新TCP消息
+			if (stockCodes.length > 0) {
+				// 补充到3个代码（如果不足3个，用默认代码补充）
+				while (stockCodes.length < 3) {
+					stockCodes.push('SH.000001') // 默认代码
+				}
+				
+				// 保存到组件数据中，供TCP方法使用
+				this.currentStockCodes = stockCodes
+				console.log('当前TCP使用的股票代码:', this.currentStockCodes)
+			}
+		},
+		
 		// TCP连接相关方法
 		
 		// 初始化TCP监听器
@@ -856,7 +1098,7 @@ export default {
 			// }
 			// {"command": "stock_list"}
 			// {"command": "batch_real_time", "stock_codes": ["SH.000001"]}
-			 {"command": "batch_real_time", "stock_codes": ["SH.000001","SH.000002","SH.000003"]}
+			 {"command": "batch_real_time", "stock_codes": this.currentStockCodes}
 			
 			// 发送消息
 			const success = tcpConnection.send(messageData)
@@ -873,7 +1115,7 @@ export default {
 		// 发送我的自选TCP消息
 		sendMyStocksTcpMessage() {
 			// 构造要发送的消息对象 - 我的自选股票数据请求
-			const messageData = {"command": "batch_real_time", "stock_codes": ["SH.000001","SH.000002","SH.000003"]}
+			const messageData = {"command": "batch_real_time", "stock_codes": this.currentStockCodes}
 			
 			// 发送消息到channel 2（我的自选TCP连接）
 			const success = tcpConnection.send(messageData, { channel: '2' })
@@ -1424,7 +1666,7 @@ export default {
 
 .welcome-swiper {
 	width: 100%;
-	height: 150px;
+	height: 110px;
 	border-radius: 0;
 	overflow: hidden;
 }
diff --git a/pages/marketSituation/countryMarket.vue b/pages/marketSituation/countryMarket.vue
index 9bb0a30..465e8e7 100644
--- a/pages/marketSituation/countryMarket.vue
+++ b/pages/marketSituation/countryMarket.vue
@@ -1,493 +1,498 @@
+<!-- @format -->
+
 <template>
-	<view class="content">
-		<!-- 市场子Tab -->
-		<view class="sub_tabs">
-			<view v-for="(tab, i) in marketTabs" :key="tab" :class="['tab_item', i === activeTabIndex ? 'active' : '']"
-				@click="switchTab(i)">
-				<text>{{ tab }}</text>
-			</view>
-		</view>
-
-		<!-- 大盘指数 -->
-		<view class="section">
-			<view class="section_header">
-				<text class="section_title">大盘指数</text>
-				<text class="section_action" @click="viewMore('indices')">查看更多 ></text>
-			</view>
-			<view class="indices_grid">
-				<view v-for="(index, i) in countryInfo.mainIndices" :key="i" class="index_item">
-					<IndexCard :flagIcon="countryInfo.flag" :indexName="index.name" :currentPrice="index.price"
-						:changeAmount="index.change" :changePercent="index.changePercent" :isRising="index.isRising" />
-				</view>
-			</view>
-
-			<!-- 今日市场情绪温度 -->
-			<view class="sentiment">
-				<view class="section_subtitle">
-					<text>今日市场情绪温度</text>
-				</view>
-				<view class="meters">
-					<view class="meter_item" v-for="(m, i) in sentimentMeters" :key="i">
-						<image class="meter_icon" :class="m.theme" :src="selectIcons[m.theme]" mode="aspectFit"></image>
-						<view class="meter_info">
-							<text class="meter_value" :class="m.theme">{{ m.value }}°C</text>
-							<text class="meter_label" :class="m.theme">{{ m.label }}</text>
-						</view>
-					</view>
-				</view>
-			</view>
-		</view>
-
-		<!-- 板块 -->
-		<view class="section">
-			<view class="section_header">
-				<text class="section_title">板块</text>
-				<text class="section_action" @click="viewMore('sectors')">查看更多 ></text>
-			</view>
-			<view class="sectors_grid">
-				<view v-for="(sec, i) in sectors" :key="i" class="sector_item">
-					<view class="sector_header">
-						<text class="sector_name">{{ sec.name }}</text>
-						<text :class="['sector_change', sec.isRising ? 'rising' : 'falling']">
-							{{ sec.change }}
-						</text>
-					</view>
-					<view class="sector_price">{{ sec.price }}</view>
-				</view>
-			</view>
-		</view>
-
-		<!-- 股票 -->
-		<view class="section">
-			<view class="section_header">
-				<text class="section_title">股票</text>
-				<text class="section_action" @click="viewMore('stocks')">查看更多 ></text>
-			</view>
-			<view class="table">
-				<view class="table_header">
-					<text class="cell name">名称</text>
-					<text class="cell price">最新</text>
-					<text class="cell change">涨幅</text>
-				</view>
-				<view class="table_row" v-for="(stk, i) in stocks" :key="i">
-					<view class="cell name">
-						<text class="stk_name">{{ stk.name }}</text>
-						<text class="stk_code">{{ stk.code }}</text>
-					</view>
-					<view class="cell price">
-						<text class="stk_price">{{ stk.price }}</text>
-					</view>
-					<view class="cell change">
-						<text :class="['stk_change', stk.isRising ? 'rising' : 'falling']">
-							{{ stk.change }}
-						</text>
-					</view>
-				</view>
-			</view>
-		</view>
-
-		<!-- 底部安全区域 -->
-		<view class="bottom_safe_area"></view>
-	</view>
+  <view class="content">
+    <!-- 市场子Tab -->
+    <view class="sub_tabs">
+      <view v-for="(tab, i) in marketTabs" :key="tab" :class="['tab_item', i === activeTabIndex ? 'active' : '']" @click="switchTab(i)">
+        <text>{{ tab }}</text>
+      </view>
+    </view>
+
+    <!-- 大盘指数 -->
+    <view class="section">
+      <view class="section_header">
+        <text class="section_title">大盘指数</text>
+        <text class="section_action" @click="viewMore('indices')">查看更多 ></text>
+      </view>
+      <view class="indices_grid">
+        <view v-for="(index, i) in countryInfo.mainIndices" :key="i" class="index_item">
+          <IndexCard :market="countryInfo.market" :indexName="index.name" :currentPrice="index.price" :changeAmount="index.change" :changePercent="index.changePercent" :isRising="index.isRising" />
+        </view>
+      </view>
+
+      <!-- 今日市场情绪温度 -->
+      <view class="sentiment">
+        <view class="section_subtitle">
+          <text>今日市场情绪温度</text>
+        </view>
+        <view class="meters">
+          <view class="meter_item" v-for="(m, i) in sentimentMeters" :key="i">
+            <image class="meter_icon" :class="m.theme" :src="selectIcons[m.theme]" mode="aspectFit"></image>
+            <view class="meter_info">
+              <text class="meter_value" :class="m.theme">{{ m.value }}°C</text>
+              <text class="meter_label" :class="m.theme">{{ m.label }}</text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 板块 -->
+    <view class="section">
+      <view class="section_header">
+        <text class="section_title">板块</text>
+        <text class="section_action" @click="viewMore('sectors')">查看更多 ></text>
+      </view>
+      <view class="sectors_grid">
+        <view v-for="(sec, i) in sectors" :key="i" class="sector_item">
+          <view class="sector_header">
+            <text class="sector_name">{{ sec.name }}</text>
+            <text :class="['sector_change', sec.isRising ? 'rising' : 'falling']">
+              {{ sec.change }}
+            </text>
+          </view>
+          <view class="sector_price">{{ sec.price }}</view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 股票 -->
+    <view class="section">
+      <view class="section_header">
+        <text class="section_title">股票</text>
+        <text class="section_action" @click="viewMore('stocks')">查看更多 ></text>
+      </view>
+      <view class="table">
+        <view class="table_header">
+          <text class="cell name">名称</text>
+          <text class="cell price">最新</text>
+          <text class="cell change">涨幅</text>
+        </view>
+        <view class="table_row" v-for="(stk, i) in stocks" :key="i">
+          <view class="cell name">
+            <text class="stk_name">{{ stk.name }}</text>
+            <text class="stk_code">{{ stk.code }}</text>
+          </view>
+          <view class="cell price">
+            <text class="stk_price">{{ stk.price }}</text>
+          </view>
+          <view class="cell change">
+            <text :class="['stk_change', stk.isRising ? 'rising' : 'falling']">
+              {{ stk.change }}
+            </text>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 底部安全区域 -->
+    <view class="bottom_safe_area"></view>
+  </view>
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue'
-import IndexCard from '../../components/IndexCard.vue'
+import { ref, computed, onMounted } from "vue";
+import IndexCard from "../../components/IndexCard.vue";
 
 // 子Tab与操作
-const marketTabs = ['全部', '美股', '纽交所', '纳斯达克']
-const activeTabIndex = ref(0)
+// const marketTabs = ["全部", "美股", "纽交所", "纳斯达克"];
+const activeTabIndex = ref(0);
 const switchTab = (i) => {
-	activeTabIndex.value = i
-}
+  activeTabIndex.value = i;
+};
 
 // 今日情绪温度示例数据
 const sentimentMeters = [
-	{ value: 90, label: '道琼斯', theme: 'hot' },
-	{ value: 60, label: '纳斯达克', theme: 'warm' },
-	{ value: 20, label: '标普500', theme: 'cool' }
-]
+  { value: 90, label: "道琼斯", theme: "hot" },
+  { value: 60, label: "纳斯达克", theme: "warm" },
+  { value: 20, label: "标普500", theme: "cool" },
+];
 
 // 图标映射
 const selectIcons = {
-	hot: '/static/marketSituation-image/hot.png',
-	warm: '/static/marketSituation-image/warm.png',
-	cool: '/static/marketSituation-image/cool.png'
-}
+  hot: "/static/marketSituation-image/hot.png",
+  warm: "/static/marketSituation-image/warm.png",
+  cool: "/static/marketSituation-image/cool.png",
+};
 
 // Props
 const props = defineProps({
-	countryId: {
-		type: Number,
-		required: true
-	}
-})
+  countryId: {
+    type: Number,
+    required: true,
+  },
+  marketTabs: {
+    type: Array,
+  },
+});
 
 // 国家/地区信息映射
 const countryInfoMap = {
-	2: { // 新加坡
-		name: '新加坡',
-		flag: '🇸🇬',
-		isMarketOpen: true,
-		mainIndices: [
-			{ name: '海峡时报指数', price: '3,234.56', change: '+12.34', changePercent: '+0.38%', isRising: true },
-			{ name: 'FTSE ST Mid Cap', price: '1,234.56', change: '-5.67', changePercent: '-0.46%', isRising: false }
-		],
-		hotStocks: [
-			{ name: '星展银行', code: 'D05.SI', price: '35.20', change: '+0.15', isRising: true },
-			{ name: '华侨银行', code: 'O39.SI', price: '13.45', change: '-0.05', isRising: false }
-		]
-	},
-	3: { // 马来西亚
-		name: '马来西亚',
-		flag: '🇲🇾',
-		isMarketOpen: false,
-		mainIndices: [
-			{ name: '富时大马KLCI指数', price: '1,567.89', change: '+8.90', changePercent: '+0.57%', isRising: true }
-		],
-		hotStocks: [
-			{ name: '马来亚银行', code: '1155.KL', price: '9.85', change: '+0.10', isRising: true },
-			{ name: '大众银行', code: '1295.KL', price: '4.32', change: '-0.02', isRising: false }
-		]
-	},
-	4: { // 印度尼西亚
-		name: '印度尼西亚',
-		flag: '🇮🇩',
-		isMarketOpen: true,
-		mainIndices: [
-			{ name: '雅加达综合指数', price: '7,234.56', change: '+45.67', changePercent: '+0.63%', isRising: true }
-		],
-		hotStocks: []
-	},
-	5: { // 美国
-		name: '美国',
-		flag: '🇺🇸',
-		isMarketOpen: false,
-		mainIndices: [
-			{ name: '道琼斯', price: '45,757.90', change: '-125.22', changePercent: '-0.27%', isRising: false },
-			{ name: '纳斯达克', price: '22,333.96', change: '+125.22', changePercent: '+0.47%', isRising: true },
-			{ name: '标普500', price: '6,606.08', change: '+125.22', changePercent: '+0.27%', isRising: true }
-		],
-		hotStocks: [
-			{ name: '苹果', code: 'AAPL', price: '195.89', change: '+2.34', isRising: true },
-			{ name: '微软', code: 'MSFT', price: '378.85', change: '-1.23', isRising: false }
-		]
-	}
-}
+  2: {
+    // 新加坡
+    name: "新加坡",
+    flag: "🇸🇬",
+    isMarketOpen: true,
+    mainIndices: [
+      { name: "海峡时报指数", price: "3,234.56", change: "+12.34", changePercent: "+0.38%", isRising: true },
+      { name: "FTSE ST Mid Cap", price: "1,234.56", change: "-5.67", changePercent: "-0.46%", isRising: false },
+    ],
+    hotStocks: [
+      { name: "星展银行", code: "D05.SI", price: "35.20", change: "+0.15", isRising: true },
+      { name: "华侨银行", code: "O39.SI", price: "13.45", change: "-0.05", isRising: false },
+    ],
+  },
+  3: {
+    // 马来西亚
+    name: "马来西亚",
+    flag: "🇲🇾",
+    isMarketOpen: false,
+    mainIndices: [{ name: "富时大马KLCI指数", price: "1,567.89", change: "+8.90", changePercent: "+0.57%", isRising: true }],
+    hotStocks: [
+      { name: "马来亚银行", code: "1155.KL", price: "9.85", change: "+0.10", isRising: true },
+      { name: "大众银行", code: "1295.KL", price: "4.32", change: "-0.02", isRising: false },
+    ],
+  },
+  4: {
+    // 印度尼西亚
+    name: "印度尼西亚",
+    flag: "🇮🇩",
+    isMarketOpen: true,
+    mainIndices: [{ name: "雅加达综合指数", price: "7,234.56", change: "+45.67", changePercent: "+0.63%", isRising: true }],
+    hotStocks: [],
+  },
+  5: {
+    // 美国
+    name: "美国",
+    flag: "🇺🇸",
+    isMarketOpen: false,
+    mainIndices: [
+      { name: "道琼斯", price: "45,757.90", change: "-125.22", changePercent: "-0.27%", isRising: false },
+      { name: "纳斯达克", price: "22,333.96", change: "+125.22", changePercent: "+0.47%", isRising: true },
+      { name: "标普500", price: "6,606.08", change: "+125.22", changePercent: "+0.27%", isRising: true },
+    ],
+    hotStocks: [
+      { name: "苹果", code: "AAPL", price: "195.89", change: "+2.34", isRising: true },
+      { name: "微软", code: "MSFT", price: "378.85", change: "-1.23", isRising: false },
+    ],
+  },
+};
 
 // 计算当前国家信息
 const countryInfo = computed(() => {
-	return countryInfoMap[props.countryId] || {
-		name: '未知地区',
-		flag: '🌍',
-		isMarketOpen: false,
-		mainIndices: [],
-		hotStocks: []
-	}
-})
+  return (
+    countryInfoMap[props.countryId] || {
+      name: "未知地区",
+      flag: "🌍",
+      isMarketOpen: false,
+      mainIndices: [],
+      hotStocks: [],
+    }
+  );
+});
 
 // 计算当前国家的板块与股票
 const sectors = computed(() => {
-	return countryInfoMap[props.countryId]?.sectors || []
-})
+  return countryInfoMap[props.countryId]?.sectors || [];
+});
 const stocks = computed(() => {
-	return countryInfoMap[props.countryId]?.stocks || []
-})
+  return countryInfoMap[props.countryId]?.stocks || [];
+});
 
 // 查看更多占位
 const viewMore = (type) => {
-	// 可根据 type 跳转到相应页面或加载更多
-	// 例如：indices/sectors/stocks
-	// uni.navigateTo({ url: `/pages/marketSituation/${type}List` })
-}
+  // 可根据 type 跳转到相应页面或加载更多
+  // 例如：indices/sectors/stocks
+  // uni.navigateTo({ url: `/pages/marketSituation/${type}List` })
+};
 </script>
 
 <style scoped>
 .content {
-	padding: 0 20rpx 20rpx 20rpx;
+  padding: 0 20rpx 20rpx 20rpx;
 }
 
 /* 子Tab */
 .sub_tabs {
-	display: flex;
-	gap: 16rpx;
-	padding: 0 20rpx 20rpx 20rpx;
+  display: flex;
+  gap: 16rpx;
+  padding: 0 20rpx 20rpx 20rpx;
 }
 
 .tab_item {
-	padding: 6rpx 20rpx;
-	border-radius: 5rpx;
-	background: #f5f5f5;
-	color: #666;
-	font-size: 24rpx;
+  padding: 6rpx 20rpx;
+  border-radius: 5rpx;
+  background: #f5f5f5;
+  color: #666;
+  font-size: 24rpx;
 }
 
 .tab_item.active {
-	background: #ff4444;
-	color: #fff;
+  background: #ff4444;
+  color: #fff;
 }
 
 .section {
-	padding: 20rpx;
-	border-radius: 16rpx;
+  padding: 20rpx;
+  border-radius: 16rpx;
 }
 
 .section_header {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	margin-bottom: 16rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16rpx;
 }
 
 .section_title {
-	font-size: 28rpx;
-	font-weight: bold;
-	color: #333;
+  font-size: 28rpx;
+  font-weight: bold;
+  color: #333;
 }
 
 .section_action {
-	font-size: 24rpx;
-	color: #999;
+  font-size: 24rpx;
+  color: #999;
 }
 
 .indices_grid {
-	padding: 20rpx;
-	display: grid;
-	grid-template-columns: repeat(3, 1fr);
-	gap: 20rpx;
-	background-color: #F6F6F6;
+  padding: 20rpx;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20rpx;
+  background-color: #f6f6f6;
 }
 
 /* 情绪温度 */
 .sentiment {
-	background-color: #F6F6F6;
-	padding: 0 20rpx 20rpx 20rpx;
+  background-color: #f6f6f6;
+  padding: 0 20rpx 20rpx 20rpx;
 }
 
 .section_subtitle {
-	font-size: 24rpx;
-	color: #000000;
-	padding: 20rpx 0;
+  font-size: 24rpx;
+  color: #000000;
+  padding: 20rpx 0;
 }
 
 .meters {
-	display: grid;
-	grid-template-columns: repeat(3, 1fr);
-	gap: 16rpx;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16rpx;
 }
 
 .meter_item {
-	display: flex;
-	align-items: center;
-	/* padding: 10rpx; */
-	background: #ffffff;
-	border-radius: 12rpx;
+  display: flex;
+  align-items: center;
+  /* padding: 10rpx; */
+  background: #ffffff;
+  border-radius: 12rpx;
 }
 
 .meter_item image {
-	width: 100rpx;
-	height: 100rpx;
+  width: 100rpx;
+  height: 100rpx;
 }
 
 .meter_info {
-	display: flex;
-	flex-direction: column;
+  display: flex;
+  flex-direction: column;
 }
 
 .meter_value {
-	font-size: 36rpx;
+  font-size: 36rpx;
 }
 
 .meter_value.hot {
-	color: #ff6b6b;
+  color: #ff6b6b;
 }
 
 .meter_value.warm {
-	color: #ffd166;
+  color: #ffd166;
 }
 
 .meter_value.cool {
-	color: #60a5fa;
+  color: #60a5fa;
 }
 
 .meter_label {
-	font-size: 22rpx;
+  font-size: 22rpx;
 }
 
 .meter_label.hot {
-	color: #ff6b6b;
+  color: #ff6b6b;
 }
 
 .meter_label.warm {
-	color: #ffd166;
+  color: #ffd166;
 }
 
 .meter_label.cool {
-	color: #60a5fa;
+  color: #60a5fa;
 }
 
 /* 板块 */
 .sectors_grid {
-	display: grid;
-	grid-template-columns: repeat(3, 1fr);
-	gap: 16rpx;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 16rpx;
 }
 
 .sector_item {
-	background: #fafafa;
-	border-radius: 12rpx;
-	padding: 16rpx;
+  background: #fafafa;
+  border-radius: 12rpx;
+  padding: 16rpx;
 }
 
 .sector_header {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	margin-bottom: 12rpx;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12rpx;
 }
 
 .sector_name {
-	font-size: 24rpx;
-	color: #333;
+  font-size: 24rpx;
+  color: #333;
 }
 
 .sector_change {
-	font-size: 22rpx;
+  font-size: 22rpx;
 }
 
 .sector_change.rising {
-	color: #e74c3c;
+  color: #e74c3c;
 }
 
 .sector_change.falling {
-	color: #27ae60;
+  color: #27ae60;
 }
 
 .sector_price {
-	font-size: 24rpx;
-	color: #666;
+  font-size: 24rpx;
+  color: #666;
 }
 
 /* 股票表 */
 .table {
-	background: #fff;
-	border-radius: 12rpx;
-	overflow: hidden;
+  background: #fff;
+  border-radius: 12rpx;
+  overflow: hidden;
 }
 
 .table_header,
 .table_row {
-	display: grid;
-	grid-template-columns: 2fr 1fr 1fr;
-	padding: 18rpx 20rpx;
-	border-bottom: 1rpx solid #f0f0f0;
+  display: grid;
+  grid-template-columns: 2fr 1fr 1fr;
+  padding: 18rpx 20rpx;
+  border-bottom: 1rpx solid #f0f0f0;
 }
 
 .table_header {
-	background: #fafafa;
+  background: #fafafa;
 }
 
 .cell.name {
-	display: flex;
-	flex-direction: column;
+  display: flex;
+  flex-direction: column;
 }
 
 .stk_name {
-	font-size: 26rpx;
-	color: #333;
+  font-size: 26rpx;
+  color: #333;
 }
 
 .stk_code {
-	font-size: 22rpx;
-	color: #999;
+  font-size: 22rpx;
+  color: #999;
 }
 
 .stk_price {
-	font-size: 26rpx;
-	color: #333;
+  font-size: 26rpx;
+  color: #333;
 }
 
 .stk_change {
-	font-size: 24rpx;
+  font-size: 24rpx;
 }
 
 .stk_change.rising {
-	color: #e74c3c;
+  color: #e74c3c;
 }
 
 .stk_change.falling {
-	color: #27ae60;
+  color: #27ae60;
 }
 
 .index_item {
-	background: #fff;
-	border-radius: 12rpx;
-	overflow: hidden;
+  background: #fff;
+  border-radius: 12rpx;
+  overflow: hidden;
 }
 
 .hot_stocks {
-	margin-bottom: 30rpx;
+  margin-bottom: 30rpx;
 }
 
 .stocks_list {
-	background: #fff;
-	border-radius: 12rpx;
-	overflow: hidden;
+  background: #fff;
+  border-radius: 12rpx;
+  overflow: hidden;
 }
 
 .stock_item {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	padding: 24rpx 20rpx;
-	border-bottom: 1rpx solid #f0f0f0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 24rpx 20rpx;
+  border-bottom: 1rpx solid #f0f0f0;
 }
 
 .stock_item:last-child {
-	border-bottom: none;
+  border-bottom: none;
 }
 
 .stock_info {
-	flex: 1;
+  flex: 1;
 }
 
 .stock_name {
-	font-size: 28rpx;
-	color: #333;
-	display: block;
-	margin-bottom: 8rpx;
+  font-size: 28rpx;
+  color: #333;
+  display: block;
+  margin-bottom: 8rpx;
 }
 
 .stock_code {
-	font-size: 24rpx;
-	color: #999;
+  font-size: 24rpx;
+  color: #999;
 }
 
 .stock_price {
-	text-align: right;
+  text-align: right;
 }
 
 .price {
-	font-size: 28rpx;
-	color: #333;
-	display: block;
-	margin-bottom: 8rpx;
+  font-size: 28rpx;
+  color: #333;
+  display: block;
+  margin-bottom: 8rpx;
 }
 
 .change {
-	font-size: 24rpx;
+  font-size: 24rpx;
 }
 
 .change.rising {
-	color: #e74c3c;
+  color: #e74c3c;
 }
 
 .change.falling {
-	color: #27ae60;
+  color: #27ae60;
 }
 
 .bottom_safe_area {
-	height: 120rpx;
+  height: 120rpx;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/pages/marketSituation/globalIndex.vue b/pages/marketSituation/globalIndex.vue
index beb2fc4..662c11d 100644
--- a/pages/marketSituation/globalIndex.vue
+++ b/pages/marketSituation/globalIndex.vue
@@ -1,586 +1,566 @@
+<!-- @format -->
+
 <template>
-    <view class="main">
-        <!-- 固定头部 -->
-        <view class="header_fixed" :style="{ top: iSMT + 'px' }">
-            <view class="header_content">
-                <view class="header_back" @click="goBack">
-                    <image src="/static/marketSituation-image/back.png" mode=""></image>
-                </view>
-                <view class="header_input_wrapper">
-                    <image class="search_icon" src="/static/marketSituation-image/search.png" mode=""
-                        @click="onSearchClick"></image>
-                    <input class="header_input" type="text" placeholder="搜索"
-                        placeholder-style="color: #A6A6A6; font-size: 22rpx;" v-model="searchValue"
-                        @input="onSearchInput" @confirm="onSearchConfirm" />
-                </view>
-                <view class="header_icons">
-                    <view class="header_icon" @click="selected">
-                        <image src="/static/marketSituation-image/mySeclected.png" mode=""></image>
-                    </view>
-                    <view class="header_icon" @click="history">
-                        <image src="/static/marketSituation-image/history.png" mode=""></image>
-                    </view>
-                </view>
-            </view>
-            <view class="warn">
-                <image src="/static/marketSituation-image/warn.png" mode="aspectFit"></image>
-                <view class="warn_text_container">
-                    <text :class="warnTextClass">{{ $t('marketSituation.warn') }}</text>
-                </view>
-            </view>
+  <view class="main">
+    <!-- 固定头部 -->
+    <view class="header_fixed" :style="{ top: iSMT + 'px' }">
+      <view class="header_content">
+        <view class="header_back" @click="goBack">
+          <image src="/static/marketSituation-image/back.png" mode=""></image>
         </view>
-
-        <!-- 内容区域 -->
-        <scroll-view class="content" :style="{ top: contentTopPosition + 'px' }" scroll-y="true">
-            <!-- 亚太-中华 -->
-            <view class="market-section">
-                <view class="market-header">
-                    <text class="market-title">亚太-中华</text>
-                    <view class="market-more" @click="viewMore('asia-china')">
-                        <text class="more-text">查看更多</text>
-                        <text class="more-arrow">></text>
-                    </view>
-                </view>
-                <view class="cards-grid-three">
-                    <view v-for="(item, index) in asiachinaIndexes" :key="index" class="card-item">
-                        <IndexCard :flagIcon="item.flagIcon" :stockName="item.stockName"
-                            :currentPrice="item.currentPrice" :changeAmount="item.changeAmount"
-                            :changePercent="item.changePercent" :isRising="item.isRising"
-                            @click="viewIndexDetail(item)" />
-                    </view>
-                </view>
-            </view>
-
-            <!-- 亚太 -->
-            <view class="market-section">
-                <view class="market-header">
-                    <text class="market-title">亚太</text>
-                    <view class="market-more" @click="viewMore('asia')">
-                        <text class="more-text">查看更多</text>
-                        <text class="more-arrow">></text>
-                    </view>
-                </view>
-                <view class="cards-grid-three">
-                    <view v-for="(item, index) in asiaIndexes" :key="index" class="card-item">
-                        <IndexCard :flagIcon="item.flagIcon" :stockName="item.stockName"
-                            :currentPrice="item.currentPrice" :changeAmount="item.changeAmount"
-                            :changePercent="item.changePercent" :isRising="item.isRising"
-                            @click="viewIndexDetail(item)" />
-                    </view>
-                </view>
-            </view>
-
-            <!-- 美洲 -->
-            <view class="market-section">
-                <view class="market-header">
-                    <text class="market-title">美洲</text>
-                    <view class="market-more" @click="viewMore('america')">
-                        <text class="more-text">查看更多</text>
-                        <text class="more-arrow">></text>
-                    </view>
-                </view>
-                <view class="cards-grid-three">
-                    <view v-for="(item, index) in americaIndexes" :key="index" class="card-item">
-                        <IndexCard :flagIcon="item.flagIcon" :stockName="item.stockName"
-                            :currentPrice="item.currentPrice" :changeAmount="item.changeAmount"
-                            :changePercent="item.changePercent" :isRising="item.isRising"
-                            @click="viewIndexDetail(item)" />
-                    </view>
-                </view>
-            </view>
-
-            <!-- 底部安全区域 -->
-            <view class="bottom-safe-area"></view>
-        </scroll-view>
+        <view class="header_input_wrapper">
+          <image class="search_icon" src="/static/marketSituation-image/search.png" mode="" @click="onSearchClick"></image>
+          <input class="header_input" type="text" placeholder="搜索" placeholder-style="color: #A6A6A6; font-size: 22rpx;" v-model="searchValue" @input="onSearchInput" @confirm="onSearchConfirm" />
+        </view>
+        <view class="header_icons">
+          <view class="header_icon" @click="selected">
+            <image src="/static/marketSituation-image/mySeclected.png" mode=""></image>
+          </view>
+          <view class="header_icon" @click="history">
+            <image src="/static/marketSituation-image/history.png" mode=""></image>
+          </view>
+        </view>
+      </view>
+      <view class="warn">
+        <image src="/static/marketSituation-image/warn.png" mode="aspectFit"></image>
+        <view class="warn_text_container">
+          <text :class="warnTextClass">{{ $t("marketSituation.warn") }}</text>
+        </view>
+      </view>
     </view>
 
-    <!-- 底部导航栏 -->
-    <footerBar class="static-footer" :type="'marketSituation'"></footerBar>
+    <!-- 内容区域 -->
+    <scroll-view class="content" :style="{ top: contentTopPosition + 'px' }" scroll-y="true">
+      <!-- 亚太-中华 -->
+      <view class="market-section" v-for="item in globalIndexArray" :key="item">
+        <view class="market-header">
+          <text class="market-title">{{ item.ac }}</text>
+          <view class="market-more" @click="viewMore(item.ac)">
+            <text class="more-text">查看更多</text>
+            <text class="more-arrow">></text>
+          </view>
+        </view>
+        <view class="cards-grid-three">
+          <view v-for="iitem in item.list" :key="iitem" class="card-item">
+            <IndexCard
+              :market="iitem.market"
+              :stockName="iitem.name"
+              :currentPrice="iitem.currentPrice"
+              :changeAmount="iitem.changeAmount"
+              :changePercent="iitem.changePercent"
+              :isRising="iitem.isRising"
+              @click="viewIndexDetail(iitem)"
+            />
+          </view>
+        </view>
+      </view>
+
+      <!-- 底部安全区域 -->
+      <view class="bottom-safe-area"></view>
+    </scroll-view>
+  </view>
+
+  <!-- 底部导航栏 -->
+  <footerBar class="static-footer" :type="'marketSituation'"></footerBar>
 </template>
 
 <script setup>
-import { ref, onMounted, computed, nextTick, watch } from 'vue'
-import footerBar from '../../components/footerBar.vue'
-import IndexCard from '../../components/IndexCard.vue'
+import { ref, onMounted, computed, nextTick, watch } from "vue";
+import footerBar from "../../components/footerBar.vue";
+import IndexCard from "../../components/IndexCard.vue";
+import { getRegionalGroupAPI } from "../../api/marketSituation/marketSituation.js";
 
 // 响应式数据
-const iSMT = ref(0) // 状态栏高度
-const contentHeight = ref(0)
-const headerHeight = ref(0) // 头部高度
-const searchValue = ref('') // 搜索值
-const isWarnTextOverflow = ref(false) // warn文字是否溢出
+const iSMT = ref(0); // 状态栏高度
+const contentHeight = ref(0);
+const headerHeight = ref(0); // 头部高度
+const searchValue = ref(""); // 搜索值
+const isWarnTextOverflow = ref(false); // warn文字是否溢出
 
 // warn文字的class计算属性
 const warnTextClass = computed(() => {
-    return isWarnTextOverflow.value ? 'warn_text scroll-active' : 'warn_text'
-})
+  return isWarnTextOverflow.value ? "warn_text scroll-active" : "warn_text";
+});
 
 // 检测warn文字是否溢出
 const checkWarnTextOverflow = () => {
-    nextTick(() => {
-        setTimeout(() => {
-            const query = uni.createSelectorQuery()
-
-            // 同时查询容器和文字元素
-            query.select('.warn_text_container').boundingClientRect()
-            query.select('.warn_text').boundingClientRect()
-            query.exec((res) => {
-                const containerRect = res[0]
-                const textRect = res[1]
-
-                if (!containerRect || !textRect) {
-                    return
-                }
-
-                // 判断文字是否超出容器（留一些余量）
-                const isOverflow = textRect.width > (containerRect.width - 10)
-
-                isWarnTextOverflow.value = isOverflow
-            })
-        }, 500)
-    })
-}
+  nextTick(() => {
+    setTimeout(() => {
+      const query = uni.createSelectorQuery();
+
+      // 同时查询容器和文字元素
+      query.select(".warn_text_container").boundingClientRect();
+      query.select(".warn_text").boundingClientRect();
+      query.exec((res) => {
+        const containerRect = res[0];
+        const textRect = res[1];
+
+        if (!containerRect || !textRect) {
+          return;
+        }
+
+        // 判断文字是否超出容器（留一些余量）
+        const isOverflow = textRect.width > containerRect.width - 10;
 
+        isWarnTextOverflow.value = isOverflow;
+      });
+    }, 500);
+  });
+};
+const globalIndexArray = ref([]);
 // 亚太-中华指数数据
 const asiachinaIndexes = ref([
-    {
-        flagIcon: '/static/c1.png',
-        stockName: '上证指数',
-        stockCode:'noCode',
-        currentPrice: '3933.96',
-        changeAmount: '+24.32',
-        changePercent: '+0.62%',
-        isRising: true
-    },
-    {
-        flagIcon: '/static/c2.png',
-        stockName: '深证成指',
-        stockCode:'noCode',
-        currentPrice: '45757.90',
-        changeAmount: '-123.45',
-        changePercent: '-0.27%',
-        isRising: false
-    },
-    {
-        flagIcon: '/static/c3.png',
-        stockName: '创业板指',
-        stockCode:'noCode',
-        currentPrice: '6606.08',
-        changeAmount: '+89.76',
-        changePercent: '+1.38%',
-        isRising: true
-    },
-    {
-        flagIcon: '/static/c4.png',
-        stockName: 'HSI50',
-        stockCode:'noCode',
-        currentPrice: '22333.96',
-        changeAmount: '+156.78',
-        changePercent: '+0.71%',
-        isRising: true
-    },
-    {
-        flagIcon: '/static/c5.png',
-        stockName: '沪深300',
-        stockCode:'noCode',
-        currentPrice: '45757.90',
-        changeAmount: '-89.12',
-        changePercent: '-0.19%',
-        isRising: false
-    },
-    {
-        flagIcon: '/static/c6.png',
-        stockName: '上证50',
-        stockCode:'noCode',
-        currentPrice: '45757.90',
-        changeAmount: '+234.56',
-        changePercent: '+0.52%',
-        isRising: true
-    }
-])
+  {
+    flagIcon: "/static/c1.png",
+    stockName: "上证指数",
+    stockCode: "noCode",
+    currentPrice: "3933.96",
+    changeAmount: "+24.32",
+    changePercent: "+0.62%",
+    isRising: true,
+  },
+  {
+    flagIcon: "/static/c2.png",
+    stockName: "深证成指",
+    stockCode: "noCode",
+    currentPrice: "45757.90",
+    changeAmount: "-123.45",
+    changePercent: "-0.27%",
+    isRising: false,
+  },
+  {
+    flagIcon: "/static/c3.png",
+    stockName: "创业板指",
+    stockCode: "noCode",
+    currentPrice: "6606.08",
+    changeAmount: "+89.76",
+    changePercent: "+1.38%",
+    isRising: true,
+  },
+  {
+    flagIcon: "/static/c4.png",
+    stockName: "HSI50",
+    stockCode: "noCode",
+    currentPrice: "22333.96",
+    changeAmount: "+156.78",
+    changePercent: "+0.71%",
+    isRising: true,
+  },
+  {
+    flagIcon: "/static/c5.png",
+    stockName: "沪深300",
+    stockCode: "noCode",
+    currentPrice: "45757.90",
+    changeAmount: "-89.12",
+    changePercent: "-0.19%",
+    isRising: false,
+  },
+  {
+    flagIcon: "/static/c6.png",
+    stockName: "上证50",
+    stockCode: "noCode",
+    currentPrice: "45757.90",
+    changeAmount: "+234.56",
+    changePercent: "+0.52%",
+    isRising: true,
+  },
+]);
 
 // 亚太指数数据
 const asiaIndexes = ref([
-    {
-        flagIcon: '/static/c7.png',
-        stockName: '日经225',
-        stockCode:'noCode',
-        currentPrice: '28456.78',
-        changeAmount: '+234.56',
-        changePercent: '+0.83%',
-        isRising: true
-    },
-    {
-        flagIcon: '/static/c8.png',
-        stockName: '韩国KOSPI',
-        stockCode:'noCode',
-        currentPrice: '2567.89',
-        changeAmount: '-12.34',
-        changePercent: '-0.48%',
-        isRising: false
-    },
-    {
-        flagIcon: '/static/c9.png',
-        stockName: '印度孟买',
-        stockCode:'noCode',
-        currentPrice: '65432.10',
-        changeAmount: '+456.78',
-        changePercent: '+0.70%',
-        isRising: true
-    }
-])
+  {
+    flagIcon: "/static/c7.png",
+    stockName: "日经225",
+    stockCode: "noCode",
+    currentPrice: "28456.78",
+    changeAmount: "+234.56",
+    changePercent: "+0.83%",
+    isRising: true,
+  },
+  {
+    flagIcon: "/static/c8.png",
+    stockName: "韩国KOSPI",
+    stockCode: "noCode",
+    currentPrice: "2567.89",
+    changeAmount: "-12.34",
+    changePercent: "-0.48%",
+    isRising: false,
+  },
+  {
+    flagIcon: "/static/c9.png",
+    stockName: "印度孟买",
+    stockCode: "noCode",
+    currentPrice: "65432.10",
+    changeAmount: "+456.78",
+    changePercent: "+0.70%",
+    isRising: true,
+  },
+]);
 
 // 美洲指数数据
 const americaIndexes = ref([
-    {
-        flagIcon: '/static/c7.png',
-        stockName: '道琼斯指数',
-        stockCode:'noCode',
-        currentPrice: '34567.89',
-        changeAmount: '+123.45',
-        changePercent: '+0.36%',
-        isRising: true
-    },
-    {
-        flagIcon: '/static/c8.png',
-        stockName: '纳斯达克',
-        stockCode:'noCode',
-        currentPrice: '13456.78',
-        changeAmount: '-67.89',
-        changePercent: '-0.50%',
-        isRising: false
-    },
-    {
-        flagIcon: '/static/c9.png',
-        stockName: '标普500',
-        stockCode:'noCode',
-        currentPrice: '4234.56',
-        changeAmount: '+23.45',
-        changePercent: '+0.56%',
-        isRising: true
-    }
-])
+  {
+    flagIcon: "/static/c7.png",
+    stockName: "道琼斯指数",
+    stockCode: "noCode",
+    currentPrice: "34567.89",
+    changeAmount: "+123.45",
+    changePercent: "+0.36%",
+    isRising: true,
+  },
+  {
+    flagIcon: "/static/c8.png",
+    stockName: "纳斯达克",
+    stockCode: "noCode",
+    currentPrice: "13456.78",
+    changeAmount: "-67.89",
+    changePercent: "-0.50%",
+    isRising: false,
+  },
+  {
+    flagIcon: "/static/c9.png",
+    stockName: "标普500",
+    stockCode: "noCode",
+    currentPrice: "4234.56",
+    changeAmount: "+23.45",
+    changePercent: "+0.56%",
+    isRising: true,
+  },
+]);
 
 // 计算属性：内容区域顶部位置
 const contentTopPosition = computed(() => {
-    const statusBarHeight = iSMT.value || 0
-    const currentHeaderHeight = headerHeight.value > 0 ? headerHeight.value : 100
-    return statusBarHeight + currentHeaderHeight
-})
+  const statusBarHeight = iSMT.value || 0;
+  const currentHeaderHeight = headerHeight.value > 0 ? headerHeight.value : 100;
+  return statusBarHeight + currentHeaderHeight;
+});
 
 // 方法：返回上一页
 const goBack = () => {
-    uni.navigateBack()
-}
+  uni.navigateBack();
+};
 
 // 方法：搜索输入
 const onSearchInput = (e) => {
-    searchValue.value = e.detail.value
-}
+  searchValue.value = e.detail.value;
+};
 
 // 方法：清除搜索
 const clearSearch = () => {
-    searchValue.value = ''
-}
+  searchValue.value = "";
+};
 
 // 方法：查看更多
 const viewMore = (market) => {
-	console.log('查看更多:', market)
-	uni.navigateTo({
-		url: `/pages/marketSituation/marketDetail?market=${market}`
-	})
-}
+  console.log("查看更多:", market);
+  uni.navigateTo({
+    url: `/pages/marketSituation/marketDetail?market=${market}`,
+  });
+};
 
 // 方法：查看指数详情
 const viewIndexDetail = (item) => {
-    console.log('查看指数详情:', item.stockName)
-    // uni.showToast({
-    //     title: `查看 ${item.stockName} 详情`,
-    //     icon: 'none',
-    //     duration: 2000
-    // })
-    // 这里可以跳转到具体的指数详情页面
-    uni.navigateTo({
-        url: `/pages/marketSituation/marketCondition?stockInformation=${encodeURIComponent(JSON.stringify(item))}`
-    })
-}
+  console.log("查看指数详情:", item.stockName);
+  // uni.showToast({
+  //     title: `查看 ${item.stockName} 详情`,
+  //     icon: 'none',
+  //     duration: 2000
+  // })
+  // 这里可以跳转到具体的指数详情页面
+  uni.navigateTo({
+    url: `/pages/marketSituation/marketCondition?stockInformation=${encodeURIComponent(JSON.stringify(item))}`,
+  });
+};
+
+const getRegionalGroup = async () => {
+  try {
+    const result = await getRegionalGroupAPI();
+    globalIndexArray.value = result.data;
+  } catch (e) {
+    console.log("获取区域指数失败", e);
+  }
+};
 
 // 生命周期：页面挂载
-onMounted(() => {
-    // 获取系统信息
-    const systemInfo = uni.getSystemInfoSync()
-    iSMT.value = systemInfo.statusBarHeight || 0
-
-    console.log('全球指数页面加载完成')
-    // 动态计算header实际高度
-    uni.createSelectorQuery().select('.header_fixed').boundingClientRect((rect) => {
-        if (rect) {
-            headerHeight.value = rect.height
-            console.log('Header实际高度:', headerHeight.value, 'px')
-        }
-    }).exec()
-    // 检测warn文字是否溢出
-    checkWarnTextOverflow()
-})
+onMounted(async () => {
+  await getRegionalGroup();
+  // 获取系统信息
+  const systemInfo = uni.getSystemInfoSync();
+  iSMT.value = systemInfo.statusBarHeight || 0;
+
+  console.log("全球指数页面加载完成");
+  // 动态计算header实际高度
+  uni
+    .createSelectorQuery()
+    .select(".header_fixed")
+    .boundingClientRect((rect) => {
+      if (rect) {
+        headerHeight.value = rect.height;
+        console.log("Header实际高度:", headerHeight.value, "px");
+      }
+    })
+    .exec();
+  // 检测warn文字是否溢出
+  checkWarnTextOverflow();
+});
 
 // 监听headerHeight变化，重新计算contentHeight
 watch(headerHeight, (newHeight) => {
-    if (newHeight > 0) {
-        const systemInfo = uni.getSystemInfoSync()
-        const windowHeight = systemInfo.windowHeight
-        const statusBarHeight = systemInfo.statusBarHeight || 0
-        const footerHeight = 100
-
-        contentHeight.value = windowHeight - statusBarHeight - newHeight - footerHeight
-        console.log('重新计算contentHeight:', contentHeight.value)
-    }
-})
+  if (newHeight > 0) {
+    const systemInfo = uni.getSystemInfoSync();
+    const windowHeight = systemInfo.windowHeight;
+    const statusBarHeight = systemInfo.statusBarHeight || 0;
+    const footerHeight = 100;
+
+    contentHeight.value = windowHeight - statusBarHeight - newHeight - footerHeight;
+    console.log("重新计算contentHeight:", contentHeight.value);
+  }
+});
 </script>
 
 <style lang="scss" scoped>
 .main {
-    position: relative;
-    height: 100vh;
-    overflow: hidden;
-    background-color: #f5f5f5;
+  position: relative;
+  height: 100vh;
+  overflow: hidden;
+  background-color: #f5f5f5;
 }
 
 /* 状态栏占位 */
 .top {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 1001;
-    background-color: #ffffff;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1001;
+  background-color: #ffffff;
 }
 
 /* 固定头部样式 */
 .header_fixed {
-    position: fixed;
-    left: 0;
-    right: 0;
-    z-index: 1000;
-    background-color: #ffffff;
-    padding: 20rpx 0 0 0;
-    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  position: fixed;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background-color: #ffffff;
+  padding: 20rpx 0 0 0;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
 }
 
 .header_content {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    height: 80rpx;
-    padding: 0 20rpx;
-    margin-bottom: 10rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 80rpx;
+  padding: 0 20rpx;
+  margin-bottom: 10rpx;
 }
 
 .header_back {
-    margin-right: 20rpx;
-    width: 25rpx;
-    height: 30rpx;
+  margin-right: 20rpx;
+  width: 25rpx;
+  height: 30rpx;
 }
 
 .header_back image {
-    width: 25rpx;
-    height: 30rpx;
+  width: 25rpx;
+  height: 30rpx;
 }
 
 .header_input_wrapper {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    margin: 0 20rpx 0 0;
-    height: 70rpx;
-    border-radius: 35rpx;
-    background-color: #ffffff;
-    border: 1rpx solid #e9ecef;
-    padding: 0 80rpx 0 30rpx;
-    font-size: 28rpx;
-    color: #5c5c5c;
-    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  width: 100%;
+  margin: 0 20rpx 0 0;
+  height: 70rpx;
+  border-radius: 35rpx;
+  background-color: #ffffff;
+  border: 1rpx solid #e9ecef;
+  padding: 0 80rpx 0 30rpx;
+  font-size: 28rpx;
+  color: #5c5c5c;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
 }
 
 .search_icon {
-    width: 40rpx;
-    height: 40rpx;
-    opacity: 0.6;
+  width: 40rpx;
+  height: 40rpx;
+  opacity: 0.6;
 }
 
 .header_input {
-    margin-left: 10rpx;
+  margin-left: 10rpx;
 }
 
 .header_icons {
-    display: flex;
-    align-items: center;
-    gap: 15rpx;
+  display: flex;
+  align-items: center;
+  gap: 15rpx;
 }
 
 .header_icon {
-    width: 40rpx;
-    height: 40rpx;
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  width: 40rpx;
+  height: 40rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .header_icon image {
-    width: 40rpx;
-    height: 40rpx;
+  width: 40rpx;
+  height: 40rpx;
 }
 
-
 .warn {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    gap: 10rpx;
-    font-size: 28rpx;
-    color: #666666;
-    padding: 20rpx;
-    max-width: 100%;
-    overflow: hidden;
-    position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 10rpx;
+  font-size: 28rpx;
+  color: #666666;
+  padding: 20rpx;
+  max-width: 100%;
+  overflow: hidden;
+  position: relative;
 }
 
 .warn image {
-    width: 40rpx;
-    height: 40rpx;
-    flex-shrink: 0;
-    /* 防止图片被压缩 */
-    position: relative;
-    z-index: 2;
-    /* 确保图片在最上层 */
+  width: 40rpx;
+  height: 40rpx;
+  flex-shrink: 0;
+  /* 防止图片被压缩 */
+  position: relative;
+  z-index: 2;
+  /* 确保图片在最上层 */
 }
 
 .warn_text_container {
-    flex: 1;
-    overflow: hidden;
-    position: relative;
-    min-width: 0;
-    /* 允许容器收缩 */
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+  min-width: 0;
+  /* 允许容器收缩 */
 }
 
 .warn_text {
-    display: block;
-    white-space: nowrap;
-    will-change: transform;
-    /* 优化动画性能 */
+  display: block;
+  white-space: nowrap;
+  will-change: transform;
+  /* 优化动画性能 */
 }
 
 /* 文字滚动动画 */
 @keyframes scrollText {
-    0% {
-        transform: translateX(0);
-    }
+  0% {
+    transform: translateX(0);
+  }
 
-    20% {
-        transform: translateX(0);
-    }
+  20% {
+    transform: translateX(0);
+  }
 
-    80% {
-        transform: translateX(-85%);
-    }
+  80% {
+    transform: translateX(-85%);
+  }
 
-    100% {
-        transform: translateX(-85%);
-    }
+  100% {
+    transform: translateX(-85%);
+  }
 }
 
 /* 当文字超长时启用滚动动画 */
 .warn_text.scroll-active {
-    animation: scrollText 12s linear infinite;
-    animation-delay: 2s;
-    /* 延迟2秒开始滚动，让用户先看到开头 */
+  animation: scrollText 12s linear infinite;
+  animation-delay: 2s;
+  /* 延迟2秒开始滚动，让用户先看到开头 */
 }
 
 /* 内容区域 */
 .content {
-    position: fixed;
-    left: 0;
-    right: 0;
-    bottom: 120rpx;
-    background-color: #f5f5f5;
-    padding: 0;
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 120rpx;
+  background-color: #f5f5f5;
+  padding: 0;
 }
 
 /* 市场分组 */
 .market-section {
-    background-color: white;
-    border-radius: 20rpx;
+  background-color: white;
+  border-radius: 20rpx;
 }
 
 .market-header {
-    margin: 20rpx 20rpx 0 20rpx;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 10rpx;
-    padding-bottom: 10rpx;
-    border-bottom: 2rpx solid #f0f0f0;
+  margin: 20rpx 20rpx 0 20rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10rpx;
+  padding-bottom: 10rpx;
+  border-bottom: 2rpx solid #f0f0f0;
 }
 
 .market-title {
-    font-size: 32rpx;
-    font-weight: 600;
-    color: #333;
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #333;
 }
 
 .market-more {
-    display: flex;
-    align-items: center;
-    gap: 8rpx;
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
 }
 
 .more-text {
-    font-size: 24rpx;
-    color: #666;
+  font-size: 24rpx;
+  color: #666;
 }
 
 .more-arrow {
-    font-size: 20rpx;
-    color: #666;
-    font-weight: bold;
+  font-size: 20rpx;
+  color: #666;
+  font-weight: bold;
 }
 
 /* 三列卡片网格 */
 .cards-grid-three {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
 }
 
 .card-item {
-    background-color: white;
-    border-radius: 16rpx;
-    overflow: hidden;
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
+  background-color: white;
+  border-radius: 16rpx;
+  overflow: hidden;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
 }
 
 .card-item:active {
-    transform: scale(0.98);
-    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.12);
+  transform: scale(0.98);
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.12);
 }
 
 /* 底部安全区域 */
 .bottom-safe-area {
-    height: 40rpx;
-    background-color: transparent;
+  height: 40rpx;
+  background-color: transparent;
 }
 
 /* 底部导航栏 */
 .static-footer {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 1000;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
 }
 
 /* 响应式设计 */
 @media (max-width: 400rpx) {
-    .cards-grid-three {
-        grid-template-columns: repeat(2, 1fr);
-    }
+  .cards-grid-three {
+    grid-template-columns: repeat(2, 1fr);
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/pages/marketSituation/marketCondition.vue b/pages/marketSituation/marketCondition.vue
index b244d26..5c29c5e 100644
--- a/pages/marketSituation/marketCondition.vue
+++ b/pages/marketSituation/marketCondition.vue
@@ -8,12 +8,12 @@
       <view class="title">
         <image class="back-homepage-btn" src="/static/marketSituation-image/back.png" mode="返回按钮" @click="backToHomepage()"> </image>
         <view class="mid-title">
-          <view class="arrow-left"> </view>
+          <view class="arrow-left" @click="toLeftPage()"> </view>
           <view class="stock-id">
             <view class="stock-name"> {{ stockInformation.stockName }} </view>
             <view class="stock-code"> {{ stockInformation.stockCode }} </view>
           </view>
-          <view class="arrow-right"> </view>
+          <view class="arrow-right" @click="toRightPage()"> </view>
         </view>
         <image class="search" src="/static/marketSituation-image/search.png" mode="搜索" @click="search()"> </image>
         <view class="more" @click="getMore()">···</view>
@@ -240,6 +240,10 @@ const tcpConnected = ref(false);
 const connectionListener = ref(null);
 const messageListener = ref(null);
 
+// 股票来源
+const currentStockFrom = ref();
+// 当前股票位置
+const currentStockIndex = ref(-1);
 // 股票信息栏变量
 const stockInformation = ref({
   stockName: "----", //股票名称
@@ -511,6 +515,35 @@ const backToHomepage = () => {
   }
 };
 
+const toLeftPage = () => {
+	if(currentStockFrom.value == "marketOverview"){
+		return;
+	}
+  if (currentStockIndex.value > 0) {
+    currentStockIndex.value--;
+    // updateStockInformation();
+  } else {
+    uni.showToast({
+      title: "没有更多股票了",
+      icon: "none",
+      duration: 1000,
+    });
+  }
+};
+
+const toRightPage = () => {
+  if (currentStockIndex.value < stockList.length - 1) {
+    currentStockIndex.value++;
+    // updateStockInformation();
+  } else {
+    uni.showToast({
+      title: "没有更多股票了",
+      icon: "none",
+      duration: 1000,
+    });
+  }
+};
+
 const openStockDetail = () => {
   isStockDetail.value = true;
 };
@@ -2136,10 +2169,10 @@ const startAddDataTimer = () => {
 onLoad((options) => {
   console.log("页面接收到的参数：", options);
 
-  // 处理通过data参数传递的复杂对象
-  if (options.data) {
+  // 处理通过stockInformation参数传递的复杂对象
+  if (options.stockInformation) {
     try {
-      const stockData = JSON.parse(decodeURIComponent(options.data));
+      const stockData = JSON.parse(decodeURIComponent(options.stockInformation));
       console.log("解析的股票数据：", stockData);
 
       // 更新stockInformation
@@ -2152,30 +2185,17 @@ onLoad((options) => {
     }
   }
 
-  // 处理通过stockInformation参数传递的数据（兼容globalIndex.vue的传参方式）
-  if (options.stockInformation) {
-    try {
-      const stockData = JSON.parse(decodeURIComponent(options.stockInformation));
-      console.log("解析的股票信息：", stockData);
-
-      // 更新stockInformation
-      if (stockData) {
-        stockInformation.value = {
-          ...stockInformation.value,
-          ...stockData,
-        };
-      }
-    } catch (error) {
-      console.error("解析股票信息失败：", error);
-    }
+  // 处理index参数（股票在列表中的位置）
+  if (options.index !== undefined) {
+    const stockIndex = parseInt(options.index);
+    console.log("股票在列表中的索引：", stockIndex);
+    // 将index保存到响应式变量中，用于后续的左右切换功能
+    currentStockIndex.value = stockIndex;
   }
 
-  // 处理简单参数
-  if (options.stockCode) {
-    stockInformation.value.stockCode = options.stockCode;
-  }
-  if (options.stockName) {
-    stockInformation.value.stockName = decodeURIComponent(options.stockName);
+  // 处理stockFrom参数（股票来源）
+  if (options.stockFrom) {
+    currentStockFrom.value = options.stockFrom;
   }
 });
 
diff --git a/pages/marketSituation/marketDetail.vue b/pages/marketSituation/marketDetail.vue
index 0252547..945d194 100644
--- a/pages/marketSituation/marketDetail.vue
+++ b/pages/marketSituation/marketDetail.vue
@@ -1,481 +1,481 @@
+<!-- @format -->
+
 <template>
-	<view class="main">
-		<!-- 自定义导航栏 -->
-		<view class="header_fixed" :style="{ top: iSMT + 'px' }">
-			<view class="header-content">
-				<view class="header-left" @click="goBack">
-					<text class="back-text">‹</text>
-				</view>
-				<view class="header-center">
-					<text class="header-title">{{ marketTitle }}</text>
-				</view>
-				<view class="header-right">
-					<image src="/static/marketSituation-image/search.png" class="header-icon" mode="aspectFit"></image>
-					<text class="more-text">···</text>
-				</view>
-			</view>
-			<!-- 表头 -->
-			<view class="table-header">
-				<view class="header-item name-column">
-					<text class="header-text">名称</text>
-				</view>
-				<view class="header-item price-column" @click="sortByPrice">
-					<text class="header-text">最新</text>
-					<text class="sort-icon">{{ sortType === 'price' ? (sortOrder === 'asc' ? '↑' : '↓') : '↕' }}</text>
-				</view>
-				<view class="header-item change-column" @click="sortByChange">
-					<text class="header-text">涨幅</text>
-					<text class="sort-icon">{{ sortType === 'change' ? (sortOrder === 'asc' ? '↑' : '↓') : '↕' }}</text>
-				</view>
-			</view>
-		</view>
-
-		<!-- 内容区域 -->
-		<scroll-view class="content" :style="{ top: contentTopPosition + 'px' }" scroll-y="true">
-			
-
-			<!-- 股票列表 -->
-			<view class="stock-list">
-				<view class="stock-row" v-for="(stock, index) in sortedStockList" :key="index"
-					@click="viewIndexDetail(stock)">
-					<view class="stock-cell name-column">
-						<view class="stock-name">{{ stock.stockName }}</view>
-						<view class="stock-code">{{ stock.stockCode }}</view>
-					</view>
-					<view class="stock-cell price-column">
-						<text class="stock-price"
-							:class="stock.isRising ? 'rising' : 'falling'">
-							{{ typeof stock.price === 'number' ? stock.price.toFixed(2) : stock.price }}
-						</text>
-					</view>
-					<view class="stock-cell change-column">
-						<text class="stock-change"
-							:class="stock.isRising ? 'rising' : 'falling'">
-							{{ stock.change || stock.changePercent }}
-						</text>
-					</view>
-				</view>
-			</view>
-
-			<!-- 底部安全区域 -->
-			<!-- <view class="bottom-safe-area"></view> -->
-		</scroll-view>
-	</view>
-
-	<!-- 底部导航栏 -->
-	<!-- <footerBar class="static-footer" :type="'marketSituation'"></footerBar> -->
+  <view class="main">
+    <!-- 自定义导航栏 -->
+    <view class="header_fixed" :style="{ top: iSMT + 'px' }">
+      <view class="header-content">
+        <view class="header-left" @click="goBack">
+          <text class="back-text">‹</text>
+        </view>
+        <view class="header-center">
+          <text class="header-title">{{ marketTitle }}</text>
+        </view>
+        <view class="header-right">
+          <image src="/static/marketSituation-image/search.png" class="header-icon" mode="aspectFit"></image>
+          <text class="more-text">···</text>
+        </view>
+      </view>
+      <!-- 表头 -->
+      <view class="table-header">
+        <view class="header-item name-column">
+          <text class="header-text">名称</text>
+        </view>
+        <view class="header-item price-column" @click="sortByPrice">
+          <text class="header-text">最新</text>
+          <text class="sort-icon">{{ sortType === "price" ? (sortOrder === "asc" ? "↑" : "↓") : "↕" }}</text>
+        </view>
+        <view class="header-item change-column" @click="sortByChange">
+          <text class="header-text">涨幅</text>
+          <text class="sort-icon">{{ sortType === "change" ? (sortOrder === "asc" ? "↑" : "↓") : "↕" }}</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- 内容区域 -->
+    <scroll-view class="content" :style="{ top: contentTopPosition + 'px' }" scroll-y="true">
+      <!-- 股票列表 -->
+      <view class="stock-list">
+        <view class="stock-row" v-for="(stock, index) in sortedStockList" :key="index" @click="viewIndexDetail(stock)">
+          <view class="stock-cell name-column">
+            <view class="stock-name">{{ stock.stockName }}</view>
+            <view class="stock-code">{{ stock.stockCode }}</view>
+          </view>
+          <view class="stock-cell price-column">
+            <text class="stock-price" :class="stock.isRising ? 'rising' : 'falling'">
+              {{ typeof stock.price === "number" ? stock.price.toFixed(2) : stock.price }}
+            </text>
+          </view>
+          <view class="stock-cell change-column">
+            <text class="stock-change" :class="stock.isRising ? 'rising' : 'falling'">
+              {{ stock.change || stock.changePercent }}
+            </text>
+          </view>
+        </view>
+      </view>
+
+      <!-- 底部安全区域 -->
+      <!-- <view class="bottom-safe-area"></view> -->
+    </scroll-view>
+  </view>
+
+  <!-- 底部导航栏 -->
+  <!-- <footerBar class="static-footer" :type="'marketSituation'"></footerBar> -->
 </template>
 
 <script setup>
-import { ref, computed, onMounted, watch } from 'vue'
-import { onLoad } from '@dcloudio/uni-app'
-import footerBar from '@/components/footerBar.vue'
-
+import { ref, computed, onMounted, watch } from "vue";
+import { onLoad } from "@dcloudio/uni-app";
+import footerBar from "@/components/footerBar.vue";
+import { getRegionalGroupListAPI } from "../../api/marketSituation/marketSituation.js";
 // 响应式数据
-const iSMT = ref(0)
-const contentHeight = ref(0)
-const headerHeight = ref(80)
-const marketType = ref('america')
-const marketTitle = ref('美洲')
-const sortType = ref('') // 排序类型：'price' 或 'change'
-const sortOrder = ref('desc') // 排序顺序：'asc' 或 'desc'
-
+const iSMT = ref(0);
+const contentHeight = ref(0);
+const headerHeight = ref(80);
+const marketTitle = ref();
+const sortType = ref(""); // 排序类型：'price' 或 'change'
+const sortOrder = ref("desc"); // 排序顺序：'asc' 或 'desc'
+
+const regionalGroupArray = ref([]);
 // 股票数据
 const stockList = ref([
-	{
-		stockName: 'Telecommunication',
-		stockCode: '888607',
-		price: 1349.47,
-		change: '+7.67%',
-		isRising: true
-	},
-	{
-		stockName: 'Other',
-		stockCode: '888607',
-		price: 1349.47,
-		change: '+6.67%',
-		isRising: true
-	},
-	{
-		stockName: 'Consumer Discretio...',
-		stockCode: '888610',
-		price: 1349.47,
-		change: '+5.67%',
-		isRising: true
-	},
-	{
-		stockName: 'Telecommunication',
-		stockCode: '888607',
-		price: 1349.47,
-		change: '+4.67%',
-		isRising: true
-	},
-	{
-		stockName: 'Other',
-		stockCode: '888611',
-		price: 1359.47,
-		change: '+3.67%',
-		isRising: true
-	},
-	{
-		stockName: 'Consumer Discretio...',
-		stockCode: '888610',
-		price: 1349.47,
-		change: '+2.67%',
-		isRising: true
-	},
-	{
-		stockName: 'Telecommunication',
-		stockCode: '888607',
-		price: 1349.47,
-		change: '+1.67%',
-		isRising: true
-	},
-	{
-		stockName: 'Other',
-		stockCode: '888611',
-		price: 1009.98,
-		change: '-1.67%',
-		isRising: false
-	},
-	{
-		stockName: 'Consumer Discretio...',
-		stockCode: '888610',
-		price: 1009.98,
-		change: '-0.67%',
-		isRising: false
-	},
-	{
-		stockName: 'Telecommunication',
-		stockCode: '888607',
-		price: 1009.98,
-		change: '-0.67%',
-		isRising: false
-	},
-	{
-		stockName: 'Other',
-		stockCode: '888611',
-		price: 1009.98,
-		change: '-1.67%',
-		isRising: false
-	},
-	{
-		stockName: 'Consumer Discretio...',
-		stockCode: '888610',
-		price: 1009.98,
-		change: '-4.67%',
-		isRising: false
-	},
-	{
-		stockName: 'Consumer Discretio...',
-		stockCode: '888610',
-		price: 1009.98,
-		change: '-3.67%',
-		isRising: false
-	},
-	{
-		stockName: 'Consumer Discretio...',
-		stockCode: '888610',
-		price: 1009.98,
-		change: '-3.67%',
-		isRising: false
-	}
-])
+  {
+    stockName: "Telecommunication",
+    stockCode: "888607",
+    price: 1349.47,
+    change: "+7.67%",
+    isRising: true,
+  },
+  {
+    stockName: "Other",
+    stockCode: "888607",
+    price: 1349.47,
+    change: "+6.67%",
+    isRising: true,
+  },
+  {
+    stockName: "Consumer Discretio...",
+    stockCode: "888610",
+    price: 1349.47,
+    change: "+5.67%",
+    isRising: true,
+  },
+  {
+    stockName: "Telecommunication",
+    stockCode: "888607",
+    price: 1349.47,
+    change: "+4.67%",
+    isRising: true,
+  },
+  {
+    stockName: "Other",
+    stockCode: "888611",
+    price: 1359.47,
+    change: "+3.67%",
+    isRising: true,
+  },
+  {
+    stockName: "Consumer Discretio...",
+    stockCode: "888610",
+    price: 1349.47,
+    change: "+2.67%",
+    isRising: true,
+  },
+  {
+    stockName: "Telecommunication",
+    stockCode: "888607",
+    price: 1349.47,
+    change: "+1.67%",
+    isRising: true,
+  },
+  {
+    stockName: "Other",
+    stockCode: "888611",
+    price: 1009.98,
+    change: "-1.67%",
+    isRising: false,
+  },
+  {
+    stockName: "Consumer Discretio...",
+    stockCode: "888610",
+    price: 1009.98,
+    change: "-0.67%",
+    isRising: false,
+  },
+  {
+    stockName: "Telecommunication",
+    stockCode: "888607",
+    price: 1009.98,
+    change: "-0.67%",
+    isRising: false,
+  },
+  {
+    stockName: "Other",
+    stockCode: "888611",
+    price: 1009.98,
+    change: "-1.67%",
+    isRising: false,
+  },
+  {
+    stockName: "Consumer Discretio...",
+    stockCode: "888610",
+    price: 1009.98,
+    change: "-4.67%",
+    isRising: false,
+  },
+  {
+    stockName: "Consumer Discretio...",
+    stockCode: "888610",
+    price: 1009.98,
+    change: "-3.67%",
+    isRising: false,
+  },
+  {
+    stockName: "Consumer Discretio...",
+    stockCode: "888610",
+    price: 1009.98,
+    change: "-3.67%",
+    isRising: false,
+  },
+]);
 
 // 计算属性
 const contentTopPosition = computed(() => {
-	return iSMT.value + headerHeight.value
-})
+  return iSMT.value + headerHeight.value;
+});
 
 const sortedStockList = computed(() => {
-	console.log('计算sortedStockList，原始数据长度:', stockList.value.length);
-	let list = [...stockList.value]
-	
-	if (sortType.value === 'price') {
-		list.sort((a, b) => {
-			return sortOrder.value === 'asc' ? a.price - b.price : b.price - a.price
-		})
-	} else if (sortType.value === 'change') {
-		list.sort((a, b) => {
-			const aChange = parseFloat(a.change.replace(/[+%-]/g, ''))
-			const bChange = parseFloat(b.change.replace(/[+%-]/g, ''))
-			return sortOrder.value === 'asc' ? aChange - bChange : bChange - aChange
-		})
-	}
-	
-	console.log('排序后数据长度:', list.length);
-	return list
-})
+  console.log("计算sortedStockList，原始数据长度:", stockList.value.length);
+  let list = [...stockList.value];
+
+  if (sortType.value === "price") {
+    list.sort((a, b) => {
+      return sortOrder.value === "asc" ? a.price - b.price : b.price - a.price;
+    });
+  } else if (sortType.value === "change") {
+    list.sort((a, b) => {
+      const aChange = parseFloat(a.change.replace(/[+%-]/g, ""));
+      const bChange = parseFloat(b.change.replace(/[+%-]/g, ""));
+      return sortOrder.value === "asc" ? aChange - bChange : bChange - aChange;
+    });
+  }
+
+  console.log("排序后数据长度:", list.length);
+  return list;
+});
+
+const getRegionalGroupList = async () => {
+  try {
+    const result = await getRegionalGroupListAPI({
+      name: marketTitle.value,
+    });
+    regionalGroupArray.value = result.data;
+  } catch (e) {
+    console.error("获取区域分组列表失败:", e);
+  }
+};
 
 // 页面加载时接收参数
-onLoad((options) => {
-	if (options && options.market) {
-		marketType.value = options.market
-		switch (options.market) {
-			case 'america':
-				marketTitle.value = '美洲'
-				break
-			case 'asia':
-				marketTitle.value = '亚太'
-				break
-			case 'asia-china':
-				marketTitle.value = '亚太-中华'
-				break
-			default:
-				marketTitle.value = '全球指数'
-		}
-	}
-})
+onLoad(async (options) => {
+  if (options && options.market) {
+    marketTitle.value = options.market;
+    await getRegionalGroupList();
+  }
+});
 
 // 方法
 const goBack = () => {
-	uni.navigateBack()
-}
+  uni.navigateBack();
+};
 
 // 方法：查看指数详情
 const viewIndexDetail = (item) => {
-    console.log('查看指数详情:', item.stockName)
-    // uni.showToast({
-    //     title: `查看 ${item.stockName} 详情`,
-    //     icon: 'none',
-    //     duration: 2000
-    // })
-    // 这里可以跳转到具体的指数详情页面
-    uni.navigateTo({
-        url: `/pages/marketSituation/marketCondition?stockInformation=${encodeURIComponent(JSON.stringify(item))}`
-    })
-}
+  console.log("查看指数详情:", item.stockName);
+  // uni.showToast({
+  //     title: `查看 ${item.stockName} 详情`,
+  //     icon: 'none',
+  //     duration: 2000
+  // })
+  // 这里可以跳转到具体的指数详情页面
+  uni.navigateTo({
+    url: `/pages/marketSituation/marketCondition?stockInformation=${encodeURIComponent(JSON.stringify(item))}`,
+  });
+};
 
 const sortByPrice = () => {
-	if (sortType.value === 'price') {
-		sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc'
-	} else {
-		sortType.value = 'price'
-		sortOrder.value = 'desc'
-	}
-}
+  if (sortType.value === "price") {
+    sortOrder.value = sortOrder.value === "asc" ? "desc" : "asc";
+  } else {
+    sortType.value = "price";
+    sortOrder.value = "desc";
+  }
+};
 
 const sortByChange = () => {
-	if (sortType.value === 'change') {
-		sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc'
-	} else {
-		sortType.value = 'change'
-		sortOrder.value = 'desc'
-	}
-}
+  if (sortType.value === "change") {
+    sortOrder.value = sortOrder.value === "asc" ? "desc" : "asc";
+  } else {
+    sortType.value = "change";
+    sortOrder.value = "desc";
+  }
+};
 
 onMounted(() => {
-	// 获取状态栏高度
-	iSMT.value = uni.getSystemInfoSync().statusBarHeight;
-	// 动态计算header实际高度
-    uni.createSelectorQuery().select('.header_fixed').boundingClientRect((rect) => {
-        if (rect) {
-            headerHeight.value = rect.height
-            console.log('Header实际高度:', headerHeight.value, 'px')
-        }
-    }).exec()
-})
+  // 获取状态栏高度
+  iSMT.value = uni.getSystemInfoSync().statusBarHeight;
+  // 动态计算header实际高度
+  uni
+    .createSelectorQuery()
+    .select(".header_fixed")
+    .boundingClientRect((rect) => {
+      if (rect) {
+        headerHeight.value = rect.height;
+        console.log("Header实际高度:", headerHeight.value, "px");
+      }
+    })
+    .exec();
+});
 
 // 监听headerHeight变化，重新计算contentHeight
 watch(headerHeight, (newHeight) => {
-    if (newHeight > 0) {
-        const systemInfo = uni.getSystemInfoSync()
-        const windowHeight = systemInfo.windowHeight
-        const statusBarHeight = systemInfo.statusBarHeight || 0
-        const footerHeight = 100
-
-        contentHeight.value = windowHeight - statusBarHeight - newHeight - footerHeight
-        console.log('重新计算contentHeight:', contentHeight.value)
-    }
-})
+  if (newHeight > 0) {
+    const systemInfo = uni.getSystemInfoSync();
+    const windowHeight = systemInfo.windowHeight;
+    const statusBarHeight = systemInfo.statusBarHeight || 0;
+    const footerHeight = 100;
+
+    contentHeight.value = windowHeight - statusBarHeight - newHeight - footerHeight;
+    console.log("重新计算contentHeight:", contentHeight.value);
+  }
+});
 </script>
 
 <style scoped>
 .main {
-	width: 100%;
-	height: 100vh;
-	background-color: #f5f5f5;
-	position: relative;
+  width: 100%;
+  height: 100vh;
+  background-color: #f5f5f5;
+  position: relative;
 }
 
 /* 自定义导航栏 */
 .header_fixed {
-	position: fixed;
-	top: 0;
-	left: 0;
-	right: 0;
-	z-index: 1000;
-	background-color: #ffffff;
-	border-bottom: 1px solid #f0f0f0;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background-color: #ffffff;
+  border-bottom: 1px solid #f0f0f0;
 }
 
 .header-content {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	height: 44px;
-	padding: 0 15px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 44px;
+  padding: 0 15px;
 }
 
 .header-left,
 .header-right {
-	width: 60px;
-	display: flex;
-	align-items: center;
+  width: 60px;
+  display: flex;
+  align-items: center;
 }
 
 .header-left {
-	justify-content: flex-start;
+  justify-content: flex-start;
 }
 
 .header-right {
-	justify-content: flex-end;
-	gap: 10px;
+  justify-content: flex-end;
+  gap: 10px;
 }
 
 .back-text {
-	font-size: 24px;
-	color: #333333;
-	font-weight: 500;
-	line-height: 1;
+  font-size: 24px;
+  color: #333333;
+  font-weight: 500;
+  line-height: 1;
 }
 
 .header-center {
-	flex: 1;
-	display: flex;
-	align-items: center;
-	justify-content: center;
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .header-title {
-	font-size: 18px;
-	font-weight: 600;
-	color: #333333;
+  font-size: 18px;
+  font-weight: 600;
+  color: #333333;
 }
 
 .header-icon {
-	width: 20px;
-	height: 20px;
+  width: 20px;
+  height: 20px;
 }
 
 .more-text {
-	font-size: 20px;
-	color: #666666;
-	font-weight: bold;
+  font-size: 20px;
+  color: #666666;
+  font-weight: bold;
 }
 
 /* 内容区域 */
 .content {
-	position: fixed;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	background-color: #ffffff;
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ffffff;
 }
 
 /* 表头样式 */
 .table-header {
-	display: flex;
-	padding: 12px 15px;
-	background-color: #f8f9fa;
-	border-bottom: 1px solid #e9ecef;
+  display: flex;
+  padding: 12px 15px;
+  background-color: #f8f9fa;
+  border-bottom: 1px solid #e9ecef;
 }
 
 .header-item {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
 }
 
 .header-item.name-column {
-	flex: 2;
-	justify-content: flex-start;
+  flex: 2;
+  justify-content: flex-start;
 }
 
 .header-item.price-column,
 .header-item.change-column {
-	flex: 1;
-	justify-content: center;
+  flex: 1;
+  justify-content: center;
 }
 
 .header-text {
-	font-size: 14px;
-	color: #666666;
-	font-weight: 500;
+  font-size: 14px;
+  color: #666666;
+  font-weight: 500;
 }
 
 .sort-icon {
-	margin-left: 4px;
-	font-size: 12px;
-	color: #999999;
+  margin-left: 4px;
+  font-size: 12px;
+  color: #999999;
 }
 
 /* 股票列表 */
 .stock-list {
-	background-color: #ffffff;
+  background-color: #ffffff;
 }
 
 .stock-row {
-	display: flex;
-	align-items: center;
-	padding: 12px 15px;
-	border-bottom: 1px solid #f5f5f5;
+  display: flex;
+  align-items: center;
+  padding: 12px 15px;
+  border-bottom: 1px solid #f5f5f5;
 }
 
 .stock-row:active {
-	background-color: #f8f8f8;
+  background-color: #f8f8f8;
 }
 
 .stock-cell {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .stock-cell.name-column {
-	flex: 2;
-	align-items: flex-start;
+  flex: 2;
+  align-items: flex-start;
 }
 
 .stock-cell.price-column,
 .stock-cell.change-column {
-	flex: 1;
-	align-items: center;
+  flex: 1;
+  align-items: center;
 }
 
 .stock-name {
-	font-size: 15px;
-	color: #333333;
-	font-weight: 500;
-	line-height: 1.2;
-	margin-bottom: 2px;
+  font-size: 15px;
+  color: #333333;
+  font-weight: 500;
+  line-height: 1.2;
+  margin-bottom: 2px;
 }
 
 .stock-code {
-	font-size: 11px;
-	color: #999999;
-	line-height: 1.2;
+  font-size: 11px;
+  color: #999999;
+  line-height: 1.2;
 }
 
 .stock-price {
-	font-size: 15px;
-	font-weight: 600;
-	line-height: 1.2;
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1.2;
 }
 
 .stock-change {
-	font-size: 13px;
-	font-weight: 500;
-	line-height: 1.2;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.2;
 }
 
 .rising {
-	color: #00C851;
+  color: #00c851;
 }
 
 .falling {
-	color: #FF4444;
+  color: #ff4444;
 }
 
 /* 底部安全区域 */
@@ -491,4 +491,4 @@ watch(headerHeight, (newHeight) => {
 	right: 0;
 	z-index: 1000;
 } */
-</style>
\ No newline at end of file
+</style>
diff --git a/pages/marketSituation/marketOverview.vue b/pages/marketSituation/marketOverview.vue
index b9da06d..fa68843 100644
--- a/pages/marketSituation/marketOverview.vue
+++ b/pages/marketSituation/marketOverview.vue
@@ -20,8 +20,16 @@
 
         <!-- 卡片网格 -->
         <view class="cards_grid">
-          <view v-for="(card, index) in cardData" :key="index" class="card_item">
-            <IndexCard :flagIcon="card.flagIcon" :stockName="card.stockName" :currentPrice="card.currentPrice" :changeAmount="card.changeAmount" :changePercent="card.changePercent" :isRising="card.isRising" @click="viewIndexDetail(card)" />
+          <view v-for="(card, index) in marketSituationStore.cardData" :key="index" class="card_item">
+            <IndexCard
+              :market="card.market"
+              :stockName="card.stockName"
+              :currentPrice="card.currentPrice"
+              :changeAmount="card.changeAmount"
+              :changePercent="card.changePercent"
+              :isRising="card.isRising"
+              @click="viewIndexDetail(card, index)"
+            />
           </view>
         </view>
         <view class="warn">
@@ -41,6 +49,9 @@
 import { ref, onMounted, watch, nextTick, computed } from "vue";
 import util from "../../common/util.js";
 import IndexCard from "../../components/IndexCard.vue";
+import { useMarketSituationStore } from "../../stores/modules/marketSituation.js";
+const marketSituationStore = useMarketSituationStore();
+import { getGlobalIndexAPI } from "../../api/marketSituation/marketSituation.js";
 
 const iSMT = ref(0);
 const searchValue = ref("");
@@ -63,95 +74,7 @@ const warnTextClass = computed(() => {
   return isWarnTextOverflow.value ? "warn_text scroll-active" : "warn_text";
 });
 
-// 弹窗相关数据
-const showCountryModal = ref(false);
-const selectedCountry = ref("概况");
-const countryList = ref(["概况", "新加坡", "马来西亚", "印度尼西亚", "美国", "中国香港", "泰国", "中国", "加拿大", "越南", "外汇", "贵金属"]);
-
-// 卡片数据
-const cardData = ref([
-  {
-    flagIcon: "🇺🇸",
-    stockName: "道琼斯",
-    stockCode: "noCode",
-    currentPrice: "45757.90",
-    changeAmount: "-125.22",
-    changePercent: "-0.27%",
-    isRising: false,
-  },
-  {
-    flagIcon: "🇺🇸",
-    stockName: "纳斯达克",
-    stockCode: "noCode",
-    currentPrice: "22333.96",
-    changeAmount: "+125.22",
-    changePercent: "+0.47%",
-    isRising: true,
-  },
-  {
-    flagIcon: "🇺🇸",
-    stockName: "标普500",
-    stockCode: "noCode",
-    currentPrice: "6606.08",
-    changeAmount: "+125.22",
-    changePercent: "+0.27%",
-    isRising: true,
-  },
-  {
-    flagIcon: "🇨🇳",
-    stockName: "上证指数",
-    stockCode: "noCode",
-    currentPrice: "3333.96",
-    changeAmount: "+125.22",
-    changePercent: "+0.27%",
-    isRising: true,
-  },
-  {
-    flagIcon: "🇨🇳",
-    stockName: "科创50",
-    stockCode: "noCode",
-    currentPrice: "757.90",
-    changeAmount: "-25.22",
-    changePercent: "-0.27%",
-    isRising: false,
-  },
-  {
-    flagIcon: "🇭🇰",
-    stockName: "恒生指数",
-    stockCode: "noCode",
-    currentPrice: "19757.90",
-    changeAmount: "-125.22",
-    changePercent: "-0.63%",
-    isRising: false,
-  },
-  {
-    flagIcon: "🇸🇬",
-    stockName: "道琼斯",
-    stockCode: "noCode",
-    currentPrice: "3757.90",
-    changeAmount: "+85.22",
-    changePercent: "+2.31%",
-    isRising: true,
-  },
-  {
-    flagIcon: "🇲🇾",
-    stockName: "纳斯达克",
-    stockCode: "noCode",
-    currentPrice: "1657.90",
-    changeAmount: "-15.22",
-    changePercent: "-0.91%",
-    isRising: false,
-  },
-  {
-    flagIcon: "🇹🇭",
-    stockName: "标普500",
-    stockCode: "noCode",
-    currentPrice: "1457.90",
-    changeAmount: "+35.22",
-    changePercent: "+2.48%",
-    isRising: true,
-  },
-]);
+const globalIndexArray = ref([]);
 
 // 搜索输入事件
 const onSearchInput = (e) => {
@@ -216,7 +139,7 @@ const checkWarnTextOverflow = () => {
 };
 
 // 方法：查看指数详情
-const viewIndexDetail = (item) => {
+const viewIndexDetail = (item, index) => {
   console.log("查看指数详情:", item.stockName);
   // uni.showToast({
   //     title: `查看 ${item.stockName} 详情`,
@@ -225,7 +148,7 @@ const viewIndexDetail = (item) => {
   // })
   // 这里可以跳转到具体的指数详情页面
   uni.navigateTo({
-    url: `/pages/marketSituation/marketCondition?stockInformation=${encodeURIComponent(JSON.stringify(item))}`,
+    url: `/pages/marketSituation/marketCondition?stockInformation=${encodeURIComponent(JSON.stringify(item))}&index=${index}&from=marketOverview`,
   });
 };
 
@@ -236,7 +159,17 @@ const goToGlobalIndex = () => {
   });
 };
 
-onMounted(() => {
+const getGlobalIndex = async () => {
+  try {
+    const result = await getGlobalIndexAPI();
+    globalIndexArray.value = result.data;
+  } catch (e) {
+    console.log("获取全球指数失败", e);
+  }
+};
+
+onMounted(async () => {
+  await getGlobalIndex();
   // 状态栏高度
   iSMT.value = uni.getSystemInfoSync().statusBarHeight;
 
diff --git a/pages/marketSituation/marketSituation.vue b/pages/marketSituation/marketSituation.vue
index e76aa2d..af09fdf 100644
--- a/pages/marketSituation/marketSituation.vue
+++ b/pages/marketSituation/marketSituation.vue
@@ -1,593 +1,589 @@
+<!-- @format -->
+
 <template>
-	<view>
-		<view class="main">
-			<!-- 固定头部 -->
-			<view class="header_fixed" :style="{ top: iSMT + 'px' }">
-				<view class="header_content">
-					<view class="header_input_wrapper">
-						<image class="search_icon" src="/static/marketSituation-image/search.png" mode=""
-							@click="onSearchClick"></image>
-						<input class="header_input" type="text" placeholder="搜索"
-							placeholder-style="color: #A6A6A6; font-size: 22rpx;" v-model="searchValue"
-							@input="onSearchInput" @confirm="onSearchConfirm" />
-					</view>
-					<view class="header_icons">
-						<view class="header_icon" @click="selected">
-							<image src="/static/marketSituation-image/mySeclected.png" mode=""></image>
-						</view>
-						<view class="header_icon" @click="history">
-							<image src="/static/marketSituation-image/history.png" mode=""></image>
-						</view>
-					</view>
-				</view>
-				<view class="channel_li" v-if="channelData.length > 0">
-					<scroll-view class="channel_wrap" scroll-x="true" :scroll-into-view="scrollToView"
-						:scroll-with-animation="true" show-scrollbar="false">
-						<view class="channel_innerWrap">
-							<view v-for="(item, index) in channelData" :key="item.id" :id="'nav' + item.id"
-								:class="['channel_item', index === pageIndex ? 'active' : '']" @click="navClick(index)">
-								<text class="channel_text">{{ item.title }}</text>
-								<view v-if="index === pageIndex" class="active_indicator"></view>
-							</view>
-						</view>
-					</scroll-view>
-					<view class="scroll_indicator" @click="channel_more">
-						<image src="/static/marketSituation-image/menu.png" mode="aspectFit"></image>
-					</view>
-				</view>
-			</view>
-
-			<!-- 可滚动内容区域 -->
-			<scroll-view class="content_scroll" scroll-y="true" :style="{ top: contentTopPosition + 'px' }">
-				<!-- 动态组件切换 -->
-				<component :is="currentComponent" :countryId="currentChannelId" />
-			</scroll-view>
-		</view>
-
-		<footerBar class="static-footer" :type="type"></footerBar>
-
-		<!-- 更多tab弹窗 -->
-		<view v-if="showCountryModal" class="modal_overlay" @click="closeModal">
-			<view class="modal_content" @click.stop>
-				<view class="modal_header">
-					<text class="modal_title">全部栏目</text>
-					<view class="modal_close" @click="closeModal">
-						<text>×</text>
-					</view>
-				</view>
-				<view class="modal_body">
-					<view class="country_grid">
-						<view v-for="(country, index) in countryList" :key="index"
-							:class="['country_item', selectedCountry === country ? 'selected' : '']"
-							@click="selectCountry(country)">
-							<text class="country_text">{{ country }}</text>
-						</view>
-					</view>
-				</view>
-			</view>
-		</view>
-	</view>
+  <view>
+    <view class="main">
+      <!-- 固定头部 -->
+      <view class="header_fixed" :style="{ top: iSMT + 'px' }">
+        <view class="header_content">
+          <view class="header_input_wrapper">
+            <image class="search_icon" src="/static/marketSituation-image/search.png" mode="" @click="onSearchClick"></image>
+            <input class="header_input" type="text" placeholder="搜索" placeholder-style="color: #A6A6A6; font-size: 22rpx;" v-model="searchValue" @input="onSearchInput" @confirm="onSearchConfirm" />
+          </view>
+          <view class="header_icons">
+            <view class="header_icon" @click="selected">
+              <image src="/static/marketSituation-image/mySeclected.png" mode=""></image>
+            </view>
+            <view class="header_icon" @click="history">
+              <image src="/static/marketSituation-image/history.png" mode=""></image>
+            </view>
+          </view>
+        </view>
+        <view class="channel_li" v-if="channelData.length > 0">
+          <scroll-view class="channel_wrap" scroll-x="true" :scroll-into-view="scrollToView" :scroll-with-animation="true" show-scrollbar="false">
+            <view class="channel_innerWrap">
+              <view v-for="(item, index) in channelData" :key="item.id" :id="'nav' + item.id" :class="['channel_item', index === pageIndex ? 'active' : '']" @click="navClick(index)">
+                <text class="channel_text">{{ item.title }}</text>
+                <view v-if="index === pageIndex" class="active_indicator"></view>
+              </view>
+            </view>
+          </scroll-view>
+          <view class="scroll_indicator" @click="channel_more">
+            <image src="/static/marketSituation-image/menu.png" mode="aspectFit"></image>
+          </view>
+        </view>
+      </view>
+
+      <!-- 可滚动内容区域 -->
+      <scroll-view class="content_scroll" scroll-y="true" :style="{ top: contentTopPosition + 'px' }">
+        <!-- 动态组件切换 -->
+        <component :is="currentComponent" :countryId="currentChannelId" :marketTabs="getChildMarketTabs(currentChannelId)" />
+      </scroll-view>
+    </view>
+
+    <footerBar class="static-footer" :type="type"></footerBar>
+
+    <!-- 更多tab弹窗 -->
+    <view v-if="showCountryModal" class="modal_overlay" @click="closeModal">
+      <view class="modal_content" @click.stop>
+        <view class="modal_header">
+          <text class="modal_title">全部栏目</text>
+          <view class="modal_close" @click="closeModal">
+            <text>×</text>
+          </view>
+        </view>
+        <view class="modal_body">
+          <view class="country_grid">
+            <view v-for="(item, index) in channelData" :key="index" :class="['country_item', selectedCountry === item.title ? 'selected' : '']" @click="selectCountry(item.title)">
+              <text class="country_text">{{ item.title }}</text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
 </template>
 
 <script setup>
-import { ref, onMounted, watch, nextTick, computed } from 'vue'
-import footerBar from '../../components/footerBar.vue'
-import forexMetals from './forexMetals.vue'
-import marketOverview from './marketOverview.vue'
-import countryMarket from './countryMarket.vue'
-
-const type = ref('marketSituation')
-const iSMT = ref(0)
-const searchValue = ref('')
-const contentHeight = ref(0)
-const headerHeight = ref(0) // 动态计算的header高度
+import { ref, onMounted, watch, nextTick, computed } from "vue";
+import footerBar from "../../components/footerBar.vue";
+import forexMetals from "./forexMetals.vue";
+import marketOverview from "./marketOverview.vue";
+import countryMarket from "./countryMarket.vue";
+import { getAllTabsAPI } from "../../api/marketSituation/marketSituation.js";
+const type = ref("marketSituation");
+const iSMT = ref(0);
+const searchValue = ref("");
+const contentHeight = ref(0);
+const headerHeight = ref(0); // 动态计算的header高度
 
 // Tab 栏相关数据
-const channelData = ref([
-	{ id: 1, title: '概况' },
-	{ id: 2, title: '新加坡' },
-	{ id: 3, title: '马来西亚' },
-	{ id: 4, title: '印度尼西亚' },
-	{ id: 5, title: '美国' },
-	{ id: 6, title: '中国香港' },
-	{ id: 7, title: '泰国' },
-	{ id: 8, title: '中国' },
-	{ id: 9, title: '加拿大' },
-	{ id: 10, title: '越南' },
-	{ id: 11, title: '外汇' },
-	{ id: 12, title: '贵金属' },
-])
-const pageIndex = ref(0)
-const scrollToView = ref('')
+const channelData = ref([{ id: 1, title: "概况" }]);
+const pageIndex = ref(0);
+const scrollToView = ref("");
 
 // 动态组件相关
 const currentChannelId = computed(() => {
-	return channelData.value[pageIndex.value]?.id || 1
-})
+  return channelData.value[pageIndex.value]?.id || 1;
+});
 
 const currentComponent = computed(() => {
-	const channelId = currentChannelId.value
-
-	// 概况页面使用 MarketOverview 组件
-	if (pageIndex.value === 0) {
-		return marketOverview
-	}
-	// 外汇(id=11)和贵金属(id=12)使用 ForexMetals 组件
-	else if (channelId === 11 || channelId === 12) {
-		return forexMetals
-	}
-	// 其他国家/地区页面使用 CountryMarket 组件
-	else {
-		return countryMarket
-	}
-})
+  const channelId = currentChannelId.value;
+
+  // 概况页面使用 MarketOverview 组件
+  if (pageIndex.value === 0) {
+    return marketOverview;
+  }
+  // 外汇(id=11)和贵金属(id=12)使用 ForexMetals 组件
+  else if (channelId === 11 || channelId === 12) {
+    return forexMetals;
+  }
+  // 其他国家/地区页面使用 CountryMarket 组件
+  else {
+    return countryMarket;
+  }
+});
 
 // 计算属性：精准计算content区域的top值
 const contentTopPosition = computed(() => {
-	const statusBarHeight = iSMT.value || 0
-	const currentHeaderHeight = headerHeight.value > 0 ? headerHeight.value : 140
-	return statusBarHeight + currentHeaderHeight
-})
+  const statusBarHeight = iSMT.value || 0;
+  const currentHeaderHeight = headerHeight.value > 0 ? headerHeight.value : 140;
+  return statusBarHeight + currentHeaderHeight;
+});
 
 // 弹窗相关数据
-const showCountryModal = ref(false)
-const selectedCountry = ref('概况')
-const countryList = ref([
-	'概况', '新加坡', '马来西亚', '印度尼西亚', '美国', '中国香港',
-	'泰国', '中国', '加拿大', '越南', '外汇', '贵金属'
-])
+const showCountryModal = ref(false);
+const selectedCountry = ref("概况");
+
+const getAllTabs = async () => {
+  try {
+    const result = await getAllTabsAPI();
+    channelData.value = result.data.map((item) => ({ ...item, id: item.id, title: item.tradeName }));
+  } catch (e) {
+    console.error("获取地区分组列表失败", e);
+  }
+};
+
+const getChildMarketTabs = (id) => {
+  return channelData.value.filter((item) => item.id === id)[0]?.children?.map((child) => child.tradeName);
+};
 
 // 搜索输入事件
 const onSearchInput = (e) => {
-	searchValue.value = e.detail.value
-}
+  searchValue.value = e.detail.value;
+};
 
 // 搜索确认事件
 const onSearchConfirm = (e) => {
-	console.log('搜索内容:', e.detail.value)
-	// 这里可以添加搜索逻辑
-	performSearch(e.detail.value)
-}
+  console.log("搜索内容:", e.detail.value);
+  // 这里可以添加搜索逻辑
+  performSearch(e.detail.value);
+};
 
 // 搜索图标点击事件
 const onSearchClick = () => {
-	if (searchValue.value.trim()) {
-		performSearch(searchValue.value)
-	}
-}
+  if (searchValue.value.trim()) {
+    performSearch(searchValue.value);
+  }
+};
 
 // 执行搜索
 const performSearch = (keyword) => {
-	if (!keyword.trim()) {
-		uni.showToast({
-			title: '请输入搜索内容',
-			icon: 'none'
-		})
-		return
-	}
-
-	uni.showToast({
-		title: `搜索: ${keyword}`,
-		icon: 'none'
-	})
-	// 这里添加实际的搜索逻辑
-}
+  if (!keyword.trim()) {
+    uni.showToast({
+      title: "请输入搜索内容",
+      icon: "none",
+    });
+    return;
+  }
+
+  uni.showToast({
+    title: `搜索: ${keyword}`,
+    icon: "none",
+  });
+  // 这里添加实际的搜索逻辑
+};
 
 // 我的收藏点击事件
 const selected = () => {
-	uni.showToast({
-		title: '我的收藏',
-		icon: 'none'
-	})
-	// 这里可以跳转到收藏页面
-}
+  uni.showToast({
+    title: "我的收藏",
+    icon: "none",
+  });
+  // 这里可以跳转到收藏页面
+};
 
 // 历史记录点击事件
 const history = () => {
-	uni.showToast({
-		title: '历史记录',
-		icon: 'none'
-	})
-	// 这里可以跳转到历史页面
-}
+  uni.showToast({
+    title: "历史记录",
+    icon: "none",
+  });
+  // 这里可以跳转到历史页面
+};
 
 // Tab 栏点击事件
 const navClick = (index) => {
-	pageIndex.value = index
-	const currentItem = channelData.value[index]
-	scrollToView.value = 'nav' + currentItem.id
+  pageIndex.value = index;
+  const currentItem = channelData.value[index];
+  scrollToView.value = "nav" + currentItem.id;
 
-	// 同步更新弹窗中的选中状态
-	selectedCountry.value = currentItem.title
+  // 同步更新弹窗中的选中状态
+  selectedCountry.value = currentItem.title;
 
-	uni.showToast({
-		title: `切换到: ${currentItem.title}`,
-		icon: 'none'
-	})
+  uni.showToast({
+    title: `切换到: ${currentItem.title}`,
+    icon: "none",
+  });
 
-	// 这里可以添加切换 tab 后的数据加载逻辑
-	console.log('当前选中的 tab:', currentItem)
-}
+  // 这里可以添加切换 tab 后的数据加载逻辑
+  console.log("当前选中的 tab:", currentItem);
+};
 
 // 更多选项点击事件
 const channel_more = () => {
-	showCountryModal.value = true
-}
+  showCountryModal.value = true;
+};
 
 // 选择国家
 const selectCountry = (country) => {
-	selectedCountry.value = country
-
-	// 查找对应的tab索引
-	const targetIndex = channelData.value.findIndex(item => item.title === country)
-
-	if (targetIndex !== -1) {
-		// 同步更新页面tab
-		pageIndex.value = targetIndex
-		const currentItem = channelData.value[targetIndex]
-		scrollToView.value = 'nav' + currentItem.id
-
-		console.log('选中了：' + country + '，同步到tab索引：' + targetIndex)
-		uni.showToast({
-			title: '已切换到：' + country,
-			icon: 'none',
-			duration: 2000
-		})
-	} else {
-		// 如果是"概况"或其他特殊选项，默认切换到第一个tab
-		if (country === '概况' || country === '全部') {
-			pageIndex.value = 0
-			scrollToView.value = 'nav' + channelData.value[0].id
-		}
-
-		console.log('选中了：' + country)
-		uni.showToast({
-			title: '已选择：' + country,
-			icon: 'none',
-			duration: 2000
-		})
-	}
-
-	// 这里可以添加切换到对应国家/地区数据的逻辑
-	// 例如：loadMarketData(country)
-	closeModal()
-}
+  selectedCountry.value = country;
+
+  // 查找对应的tab索引
+  const targetIndex = channelData.value.findIndex((item) => item.title === country);
+
+  if (targetIndex !== -1) {
+    // 同步更新页面tab
+    pageIndex.value = targetIndex;
+    const currentItem = channelData.value[targetIndex];
+    scrollToView.value = "nav" + currentItem.id;
+
+    console.log("选中了：" + country + "，同步到tab索引：" + targetIndex);
+    uni.showToast({
+      title: "已切换到：" + country,
+      icon: "none",
+      duration: 2000,
+    });
+  } else {
+    // 如果是"概况"或其他特殊选项，默认切换到第一个tab
+    if (country === "概况" || country === "全部") {
+      pageIndex.value = 0;
+      scrollToView.value = "nav" + channelData.value[0].id;
+    }
+
+    console.log("选中了：" + country);
+    uni.showToast({
+      title: "已选择：" + country,
+      icon: "none",
+      duration: 2000,
+    });
+  }
+
+  // 这里可以添加切换到对应国家/地区数据的逻辑
+  // 例如：loadMarketData(country)
+  closeModal();
+};
 
 // 关闭弹窗
 const closeModal = () => {
-	showCountryModal.value = false
-}
-
-onMounted(() => {
-	// 状态栏高度
-	iSMT.value = uni.getSystemInfoSync().statusBarHeight;
-
-	// 初始化 tab 栏
-	if (channelData.value.length > 0) {
-		pageIndex.value = 0
-		scrollToView.value = 'nav' + channelData.value[0].id
-	}
-
-	// 确保DOM渲染完成后再查询高度
-	nextTick(() => {
-		// 动态计算header实际高度
-		uni.createSelectorQuery().select('.header_fixed').boundingClientRect((rect) => {
-			if (rect) {
-				headerHeight.value = rect.height
-				console.log('Header实际高度:', headerHeight.value, 'px')
-			}
-		}).exec()
-	})
-})
+  showCountryModal.value = false;
+};
+
+onMounted(async () => {
+  await getAllTabs();
+  // 状态栏高度
+  iSMT.value = uni.getSystemInfoSync().statusBarHeight;
+
+  // 初始化 tab 栏
+  if (channelData.value.length > 0) {
+    pageIndex.value = 0;
+    scrollToView.value = "nav" + channelData.value[0].id;
+  }
+
+  // 确保DOM渲染完成后再查询高度
+  nextTick(() => {
+    // 动态计算header实际高度
+    uni
+      .createSelectorQuery()
+      .select(".header_fixed")
+      .boundingClientRect((rect) => {
+        if (rect) {
+          headerHeight.value = rect.height;
+          console.log("Header实际高度:", headerHeight.value, "px");
+        }
+      })
+      .exec();
+  });
+});
 
 // 监听headerHeight变化，重新计算contentHeight
 watch(headerHeight, (newHeight) => {
-	if (newHeight > 0) {
-		const systemInfo = uni.getSystemInfoSync()
-		const windowHeight = systemInfo.windowHeight
-		const statusBarHeight = systemInfo.statusBarHeight || 0
-		const footerHeight = 100
-
-		contentHeight.value = windowHeight - statusBarHeight - newHeight - footerHeight
-		console.log('重新计算contentHeight:', contentHeight.value)
-	}
-})
+  if (newHeight > 0) {
+    const systemInfo = uni.getSystemInfoSync();
+    const windowHeight = systemInfo.windowHeight;
+    const statusBarHeight = systemInfo.statusBarHeight || 0;
+    const footerHeight = 100;
+
+    contentHeight.value = windowHeight - statusBarHeight - newHeight - footerHeight;
+    console.log("重新计算contentHeight:", contentHeight.value);
+  }
+});
 </script>
 
 <style scoped>
 /* 主容器样式调整 */
 .main {
-	position: relative;
-	height: 100vh;
-	overflow: hidden;
-	background-color: white;
+  position: relative;
+  height: 100vh;
+  overflow: hidden;
+  background-color: white;
 }
 
 /* 状态栏占位 */
 .top {
-	position: fixed;
-	top: 0;
-	left: 0;
-	right: 0;
-	z-index: 1001;
-	background-color: #ffffff;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1001;
+  background-color: #ffffff;
 }
 
 /* 固定头部样式 */
 .header_fixed {
-	position: fixed;
-	left: 0;
-	right: 0;
-	z-index: 1000;
-	background-color: #ffffff;
-	padding: 20rpx 0 0 0;
-	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  position: fixed;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background-color: #ffffff;
+  padding: 20rpx 0 0 0;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
 }
 
 /* 可滚动内容区域 */
 .content_scroll {
-	position: fixed;
-	left: 0;
-	right: 0;
-	bottom: 100rpx;
-	/* 底部导航栏高度 */
-	overflow-y: auto;
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 100rpx;
+  /* 底部导航栏高度 */
+  overflow-y: auto;
 }
 
 .header_content {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	height: 80rpx;
-	padding: 0 20rpx;
-	margin-bottom: 10rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 80rpx;
+  padding: 0 20rpx;
+  margin-bottom: 10rpx;
 }
 
 .header_input_wrapper {
-	display: flex;
-	align-items: center;
-	width: 100%;
-	margin: 0 20rpx 0 0;
-	height: 70rpx;
-	border-radius: 35rpx;
-	background-color: #ffffff;
-	border: 1rpx solid #e9ecef;
-	padding: 0 80rpx 0 30rpx;
-	font-size: 28rpx;
-	color: #5c5c5c;
-	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  width: 100%;
+  margin: 0 20rpx 0 0;
+  height: 70rpx;
+  border-radius: 35rpx;
+  background-color: #ffffff;
+  border: 1rpx solid #e9ecef;
+  padding: 0 80rpx 0 30rpx;
+  font-size: 28rpx;
+  color: #5c5c5c;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
 }
 
 .search_icon {
-	width: 40rpx;
-	height: 40rpx;
-	opacity: 0.6;
+  width: 40rpx;
+  height: 40rpx;
+  opacity: 0.6;
 }
 
 .header_input {
-	margin-left: 10rpx;
+  margin-left: 10rpx;
 }
 
 .header_icons {
-	display: flex;
-	align-items: center;
-	gap: 15rpx;
+  display: flex;
+  align-items: center;
+  gap: 15rpx;
 }
 
 .header_icon {
-	width: 40rpx;
-	height: 40rpx;
-	display: flex;
-	align-items: center;
-	justify-content: center;
+  width: 40rpx;
+  height: 40rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .header_icon image {
-	width: 40rpx;
-	height: 40rpx;
+  width: 40rpx;
+  height: 40rpx;
 }
 
 /* Tab 栏样式 */
 .channel_li {
-	display: flex;
-	align-items: center;
-	height: 80rpx;
-	background-color: #ffffff;
-	border-bottom: 1rpx solid #f0f0f0;
+  display: flex;
+  align-items: center;
+  height: 80rpx;
+  background-color: #ffffff;
+  border-bottom: 1rpx solid #f0f0f0;
 }
 
 .channel_wrap {
-	width: calc(100% - 60rpx);
-	height: 100%;
-	overflow: hidden;
-	flex-shrink: 0;
+  width: calc(100% - 60rpx);
+  height: 100%;
+  overflow: hidden;
+  flex-shrink: 0;
 }
 
 .channel_innerWrap {
-	display: flex;
-	align-items: center;
-	height: 100%;
-	padding: 0 20rpx;
-	white-space: nowrap;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 20rpx;
+  white-space: nowrap;
 }
 
 .channel_item {
-	position: relative;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	height: 60rpx;
-	padding: 0 20rpx;
-	border-radius: 30rpx;
-	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-	cursor: pointer;
-	white-space: nowrap;
-	flex-shrink: 0;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 60rpx;
+  padding: 0 20rpx;
+  border-radius: 30rpx;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
+  white-space: nowrap;
+  flex-shrink: 0;
 }
 
 .channel_item:active {
-	transform: scale(0.98);
+  transform: scale(0.98);
 }
 
 .channel_item.active {
-	color: #333;
-	font-weight: bold;
+  color: #333;
+  font-weight: bold;
 }
 
 .channel_text {
-	font-size: 28rpx;
-	font-weight: 500;
-	color: #666666;
-	transition: color 0.3s ease;
-	white-space: nowrap;
+  font-size: 28rpx;
+  font-weight: 500;
+  color: #666666;
+  transition: color 0.3s ease;
+  white-space: nowrap;
 }
 
 .channel_item.active .channel_text {
-	color: #333333;
-	font-weight: 400;
-	z-index: 2;
+  color: #333333;
+  font-weight: 400;
+  z-index: 2;
 }
 
 .active_indicator {
-	position: absolute;
-	left: 50%;
-	top: 60%;
-	transform: translateX(-45%);
-	width: calc(100% - 20rpx);
-	min-width: 40rpx;
-	max-width: 120rpx;
-	height: 8rpx;
-	background-image: url('/static/marketSituation-image/bg.png');
-	background-size: cover;
-	background-position: center;
-	background-repeat: no-repeat;
-	animation: slideIn 0.1s ease;
-	border-radius: 8rpx;
-	z-index: 1;
+  position: absolute;
+  left: 50%;
+  top: 60%;
+  transform: translateX(-45%);
+  width: calc(100% - 20rpx);
+  min-width: 40rpx;
+  max-width: 120rpx;
+  height: 8rpx;
+  background-image: url("/static/marketSituation-image/bg.png");
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  animation: slideIn 0.1s ease;
+  border-radius: 8rpx;
+  z-index: 1;
 }
 
 @keyframes slideIn {
-	from {
-		width: 0;
-		opacity: 0;
-	}
+  from {
+    width: 0;
+    opacity: 0;
+  }
 
-	to {
-		width: 40rpx;
-		opacity: 1;
-	}
+  to {
+    width: 40rpx;
+    opacity: 1;
+  }
 }
 
 .scroll_indicator {
-	border-left: 1rpx solid #b6b6b6;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 60rpx;
-	height: 30rpx;
-	background-color: #ffffff;
-	flex-shrink: 0;
+  border-left: 1rpx solid #b6b6b6;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 60rpx;
+  height: 30rpx;
+  background-color: #ffffff;
+  flex-shrink: 0;
 }
 
 .scroll_indicator image {
-	width: 20rpx;
-	height: 20rpx;
-	opacity: 0.5;
+  width: 20rpx;
+  height: 20rpx;
+  opacity: 0.5;
 }
 
 .content {
-	margin-top: 20rpx;
-	background-color: white;
+  margin-top: 20rpx;
+  background-color: white;
 }
 
 .static-footer {
-	position: fixed;
-	bottom: 0;
+  position: fixed;
+  bottom: 0;
 }
 
 /* 弹窗样式 */
 .modal_overlay {
-	position: fixed;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	background-color: rgba(0, 0, 0, 0.5);
-	display: flex;
-	align-items: flex-end;
-	z-index: 1000;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: flex-end;
+  z-index: 1000;
 }
 
 .modal_content {
-	width: 100%;
-	background-color: #fff;
-	border-radius: 20rpx 20rpx 0 0;
-	max-height: 80vh;
-	overflow: hidden;
+  width: 100%;
+  background-color: #fff;
+  border-radius: 20rpx 20rpx 0 0;
+  max-height: 80vh;
+  overflow: hidden;
 }
 
 .modal_header {
-	position: relative;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	padding: 30rpx 40rpx;
-	border-bottom: 1rpx solid #f0f0f0;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 30rpx 40rpx;
+  border-bottom: 1rpx solid #f0f0f0;
 }
 
 .modal_title {
-	font-size: 32rpx;
-	font-weight: bold;
-	color: #333333;
-	text-align: center;
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #333333;
+  text-align: center;
 }
 
 .modal_close {
-	position: absolute;
-	right: 40rpx;
-	top: 50%;
-	transform: translateY(-50%);
-	width: 60rpx;
-	height: 60rpx;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	font-size: 40rpx;
-	color: #999;
+  position: absolute;
+  right: 40rpx;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 60rpx;
+  height: 60rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 40rpx;
+  color: #999;
 }
 
 .modal_body {
-	padding: 40rpx;
+  padding: 40rpx;
 }
 
 .country_grid {
-	display: grid;
-	grid-template-columns: 1fr 1fr;
-	gap: 20rpx;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20rpx;
 }
 
 .country_item {
-	padding: 24rpx 30rpx;
-	border-radius: 12rpx;
-	background-color: #f8f8f8;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	transition: all 0.3s ease;
+  padding: 24rpx 30rpx;
+  border-radius: 12rpx;
+  background-color: #f8f8f8;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
 }
 
 .country_item.selected {
-	background-color: #ff4444;
-	color: #fff;
+  background-color: #ff4444;
+  color: #fff;
 }
 
 .country_text {
-	font-size: 28rpx;
-	color: #333;
+  font-size: 28rpx;
+  color: #333;
 }
 
 .country_item.selected .country_text {
-	color: #fff;
+  color: #fff;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/pages/start/Registration/Registration.vue b/pages/start/Registration/Registration.vue
index fc07232..1e919e1 100644
--- a/pages/start/Registration/Registration.vue
+++ b/pages/start/Registration/Registration.vue
@@ -198,6 +198,7 @@ import {
   SendPhoneCodeApi,
 } from "../../../api/start/login";
 import { useDeviceStore} from "../../../stores/modules/deviceInfo"
+import { useUserStore} from "../../../stores/modules/userInfo"
 
 const type = ref("");
 const email = ref("");
diff --git a/pages/start/recoverPassword/recoverPassword.vue b/pages/start/recoverPassword/recoverPassword.vue
index 1bdca81..97530c5 100644
--- a/pages/start/recoverPassword/recoverPassword.vue
+++ b/pages/start/recoverPassword/recoverPassword.vue
@@ -209,10 +209,10 @@
     </text>
 
     <!-- 或者 -->
-    <text class="or-text" @click="goToLogin">已有账号？
-      <text class="link">登录 
-</text>
-      </text>
+    <text class="or-text" @click="goToLogin"
+      >已有账号？
+      <text class="link">登录 </text>
+    </text>
 
     <!-- 同意弹窗 -->
     <uniPopup ref="agreementPopup" type="dialog">
@@ -235,7 +235,12 @@ import countryList from "../login/list";
 import footerBar from "../../../components/footerBar";
 import uniPopup from "../../../uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
 import { verificationPhone, verificationEmail } from "../login/verification";
-import { SendEmailCodeApi, SendPhoneCodeApi } from "../../../api/start/login";
+import {
+  SendEmailCodeApi,
+  SendPhoneCodeApi,
+  verifyCodeApi,
+  forgetApi,
+} from "../../../api/start/login";
 
 const type = ref("");
 const email = ref("");
@@ -254,6 +259,7 @@ const verifyCode = ref("");
 const isRecovering = ref(false);
 const newPasswordLookFirst = ref(false);
 const newPasswordLookSecond = ref(false);
+const account = ref("");
 
 // 使用从list.js导入的完整国家列表数据
 const countries = ref(
@@ -301,7 +307,7 @@ function switchPhone() {
   verifyCode.value = "";
 }
 
-function register() {
+async function register() {
   if (isRecovering.value) {
     if (!newPasswordFirst.value || !newPasswordSecond.value) {
       uni.showToast({
@@ -319,6 +325,32 @@ function register() {
       return;
     }
 
+    const account = changeAccount();
+
+    const res = await forgetApi({
+      account: account,
+      password: newPasswordSecond.value,
+    });
+
+    console.log("res", res);
+
+    if (res.code !== 200) {
+      uni.showToast({
+        title: res.message,
+        icon: "none",
+      });
+      return;
+    }
+
+    uni.showToast({
+      title: res.message,
+      icon: "none",
+    });
+
+    uni.navigateTo({
+      url: "/pages/start/login/login",
+    });
+
     // 密码逻辑
     return;
   }
@@ -384,13 +416,54 @@ function register() {
     console.log("登录:", email.value);
   }
 
+  const account = changeAccount();
+  const loginType = changeLoginType();
+
+  const res = await verifyCodeApi({
+    loginType: loginType, //登录方式EMAIL,PHONE
+    account: account, //登陆账号  手机号/邮箱
+    verifyCode: verifyCode.value,
+  });
+
+  if (res.code !== 200) {
+    uni.showToast({
+      title: res.message,
+      icon: "none",
+    });
+    return;
+  }
+
   isRecovering.value = !isRecovering.value;
+}
 
-  // 如果已经同意，则继续登录流程
-  // uni.showToast({
-  //   title: "登录成功",
-  //   icon: "success",
-  // });
+// 请求账户
+function changeAccount() {
+  if (switchType.value === "User") {
+    account.value = deepChartID.value;
+  }
+
+  if (switchType.value === "Phone") {
+    account.value = `${country.value}${phone.value}`;
+  }
+  if (switchType.value === "Email") {
+    account.value = email.value;
+  }
+
+  return account.value;
+}
+
+// 改变请求时的type
+function changeLoginType() {
+  if (switchType.value === "User") {
+    return "DCCODE";
+  }
+
+  if (switchType.value === "Phone") {
+    return "PHONE";
+  }
+  if (switchType.value === "Email") {
+    return "EMAIL";
+  }
 }
 
 function goToLogin() {
diff --git a/static/customer-service-platform/camera.png b/static/customer-service-platform/camera.png
new file mode 100644
index 0000000..9988605
Binary files /dev/null and b/static/customer-service-platform/camera.png differ
diff --git a/static/customer-service-platform/cs-platform-back.png b/static/customer-service-platform/cs-platform-back.png
new file mode 100644
index 0000000..4af54c5
Binary files /dev/null and b/static/customer-service-platform/cs-platform-back.png differ
diff --git a/static/customer-service-platform/ellipse-dc-img.png b/static/customer-service-platform/ellipse-dc-img.png
new file mode 100644
index 0000000..195a4c4
Binary files /dev/null and b/static/customer-service-platform/ellipse-dc-img.png differ
diff --git a/static/customer-service-platform/empty-content.png b/static/customer-service-platform/empty-content.png
new file mode 100644
index 0000000..9c83ead
Binary files /dev/null and b/static/customer-service-platform/empty-content.png differ
diff --git a/static/customer-service-platform/fail-icon.png b/static/customer-service-platform/fail-icon.png
new file mode 100644
index 0000000..d6cb9db
Binary files /dev/null and b/static/customer-service-platform/fail-icon.png differ
diff --git a/static/customer-service-platform/message.png b/static/customer-service-platform/message.png
new file mode 100644
index 0000000..0cfce4b
Binary files /dev/null and b/static/customer-service-platform/message.png differ
diff --git a/static/customer-service-platform/refresh-icon.png b/static/customer-service-platform/refresh-icon.png
new file mode 100644
index 0000000..316687f
Binary files /dev/null and b/static/customer-service-platform/refresh-icon.png differ
diff --git a/static/customer-service-platform/robot-head.png b/static/customer-service-platform/robot-head.png
new file mode 100644
index 0000000..f741d09
Binary files /dev/null and b/static/customer-service-platform/robot-head.png differ
diff --git a/static/customer-service-platform/smile-icon.png b/static/customer-service-platform/smile-icon.png
new file mode 100644
index 0000000..1532095
Binary files /dev/null and b/static/customer-service-platform/smile-icon.png differ
diff --git a/static/customer-service-platform/success-icon.png b/static/customer-service-platform/success-icon.png
new file mode 100644
index 0000000..8c2cc8a
Binary files /dev/null and b/static/customer-service-platform/success-icon.png differ
diff --git a/static/marketSituation-image/country-flag/can.png b/static/marketSituation-image/country-flag/can.png
new file mode 100644
index 0000000..35fd6ca
Binary files /dev/null and b/static/marketSituation-image/country-flag/can.png differ
diff --git a/static/marketSituation-image/country-flag/cn.png b/static/marketSituation-image/country-flag/cn.png
new file mode 100644
index 0000000..f9337f6
Binary files /dev/null and b/static/marketSituation-image/country-flag/cn.png differ
diff --git a/static/marketSituation-image/country-flag/global.png b/static/marketSituation-image/country-flag/global.png
new file mode 100644
index 0000000..a9a008a
Binary files /dev/null and b/static/marketSituation-image/country-flag/global.png differ
diff --git a/static/marketSituation-image/country-flag/hk.png b/static/marketSituation-image/country-flag/hk.png
new file mode 100644
index 0000000..dc6c352
Binary files /dev/null and b/static/marketSituation-image/country-flag/hk.png differ
diff --git a/static/marketSituation-image/country-flag/my.png b/static/marketSituation-image/country-flag/my.png
new file mode 100644
index 0000000..2f1907f
Binary files /dev/null and b/static/marketSituation-image/country-flag/my.png differ
diff --git a/static/marketSituation-image/country-flag/sg.png b/static/marketSituation-image/country-flag/sg.png
new file mode 100644
index 0000000..18f5dba
Binary files /dev/null and b/static/marketSituation-image/country-flag/sg.png differ
diff --git a/static/marketSituation-image/country-flag/th.png b/static/marketSituation-image/country-flag/th.png
new file mode 100644
index 0000000..ad61536
Binary files /dev/null and b/static/marketSituation-image/country-flag/th.png differ
diff --git a/static/marketSituation-image/country-flag/us.png b/static/marketSituation-image/country-flag/us.png
new file mode 100644
index 0000000..5c20fee
Binary files /dev/null and b/static/marketSituation-image/country-flag/us.png differ
diff --git a/static/marketSituation-image/country-flag/vi.png b/static/marketSituation-image/country-flag/vi.png
new file mode 100644
index 0000000..5c52706
Binary files /dev/null and b/static/marketSituation-image/country-flag/vi.png differ
diff --git a/stores/index.js b/stores/index.js
index ada9fd8..56ec367 100644
--- a/stores/index.js
+++ b/stores/index.js
@@ -10,5 +10,6 @@ pinia.use(persist)
 export * from './modules/userInfo'
 export * from './modules/deviceInfo'
 export * from './modules/deepExploration'
+export * from './modules/login'
 // 默认导出，给 main.js 使用
 export default pinia
\ No newline at end of file
diff --git a/stores/modules/login.js b/stores/modules/login.js
new file mode 100644
index 0000000..b2041ea
--- /dev/null
+++ b/stores/modules/login.js
@@ -0,0 +1,44 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+// 定义 Store
+export const useLoginStore = defineStore(
+  'login',
+  () => {
+    // 会员信息
+    const loginInfo = ref("true")
+
+    // 保存会员信息，登录时使用
+    const setLoginInfo = (val) => {
+      loginInfo.value = val
+    }
+
+    // 清理会员信息，退出时使用
+    const clearLoginInfo = () => {
+      loginInfo.value = undefined
+    }
+
+    // 记得 return
+    return {
+      loginInfo,
+      setLoginInfo,
+      clearLoginInfo,
+    }
+  },
+  // TODO: 持久化
+  {
+    // 网页端持久化
+    // persist: true,
+    // 小程序端持久化
+    persist: {
+      storage: {
+        getItem(key) {
+          return uni.getStorageSync(key)
+        },
+        setItem(key, value) {
+          uni.setStorageSync(key, value)
+        },
+      },
+    },
+  },
+)
diff --git a/stores/modules/marketSituation.js b/stores/modules/marketSituation.js
new file mode 100644
index 0000000..1f85660
--- /dev/null
+++ b/stores/modules/marketSituation.js
@@ -0,0 +1,78 @@
+/** @format */
+
+import { defineStore } from "pinia";
+import { ref } from "vue";
+// 定义 Store
+export const useMarketSituationStore = defineStore(
+  "marketSituation",
+  () => {
+    const cardData = ref([
+      {
+        market: "usa",
+        stockName: "道琼斯",
+        stockCode: "noCode",
+        currentPrice: "45757.90",
+        changeAmount: "-125.22",
+        changePercent: "-0.27%",
+        isRising: false,
+      },
+      {
+        market: "usa",
+        stockName: "纳斯达克",
+        stockCode: "noCode",
+        currentPrice: "22333.96",
+        changeAmount: "+125.22",
+        changePercent: "+0.47%",
+        isRising: true,
+      },
+      {
+        market: "usa",
+        stockName: "标普500",
+        stockCode: "noCode",
+        currentPrice: "6606.08",
+        changeAmount: "+125.22",
+        changePercent: "+0.27%",
+        isRising: true,
+      },
+      {
+        market: "cn",
+        stockName: "上证指数",
+        stockCode: "noCode",
+        currentPrice: "3333.96",
+        changeAmount: "+125.22",
+        changePercent: "+0.27%",
+        isRising: true,
+      },
+      {
+        market: "cn",
+        stockName: "科创50",
+        stockCode: "noCode",
+        currentPrice: "757.90",
+        changeAmount: "-25.22",
+        changePercent: "-0.27%",
+        isRising: false,
+      },
+    ]);
+
+    // 记得 return
+    return {
+        cardData
+    };
+  },
+  // TODO: 持久化
+  {
+    // 网页端持久化
+    // persist: true,
+    // 小程序端持久化
+    persist: {
+      storage: {
+        getItem(key) {
+          return uni.getStorageSync(key);
+        },
+        setItem(key, value) {
+          uni.setStorageSync(key, value);
+        },
+      },
+    },
+  }
+);
diff --git a/utils/http.js b/utils/http.js
index bf57ee7..dcae7e5 100644
--- a/utils/http.js
+++ b/utils/http.js
@@ -1,8 +1,9 @@
 import { useUserStore } from "../stores/modules/userInfo"
 import { useDeviceStore } from "../stores/modules/deviceInfo"
+import { useLoginStore } from "../stores/modules/login"
+
+const baseURL = "https://dbqb.nfdxy.net/testApi"
 
-// const baseURL = "https://dbqb.nfdxy.net/testApi"
-const baseURL = "http://192.168.40.8:9000"
 
 const httpInterceptor = {
     // 拦截前触发
@@ -28,7 +29,7 @@ const httpInterceptor = {
         const sys = uni.getSystemInfoSync();
         // 为对齐后端文档示例，client 固定为 ios（如需按平台设置再改回）
 
-        const deviceInfo =useDeviceStore()
+        const deviceInfo = useDeviceStore()
 
 
         options.header = {
@@ -37,17 +38,18 @@ const httpInterceptor = {
             'content-type': 'application/json',
             'contentType': 'application/json',
             'version': uni.getSystemInfoSync().appVersion,
-            //'client':  uni.getSystemInfoSync().platform == 'ios' ? 'ios' : 'android',
-			'client':'android',
+            'client': uni.getSystemInfoSync().platform == 'ios' ? 'ios' : 'android',
             'deviceId': deviceInfo.deviceInfo.deviceId
         }
         //4 添加token，优先用store，没有则回退到body中的token，保持与Apifox一致
         const memberStore = useUserStore()
         const token = memberStore.userInfo?.token || options.data?.token
-        //const token = '9cd87893b9282b6a7a6cc9b780c905db'
+        // const token = '2d0b5654409646713cdd40ec0d0bb56c'
+        // const token = '1b3a58424c5324e40d4bf4d085e18047'
         if (token) {
             options.header.token = token
         }
+        console.log("最终请求参数：",options)
         // 避免误用 Authorization 头，后端要求的是 token 头
         // if (options.header.Authorization) delete options.header.Authorization
         return options
@@ -65,6 +67,14 @@ export const http = (options) => {
             success: (result) => {
                 if (result.statusCode >= 200 && result.statusCode < 300) {
                     if (result.data.code === 401) {
+
+                        const loginStore = useLoginStore()
+                        loginStore.setLoginInfo("true")
+                        console.log("1loginStore.loginInfo", loginStore.loginInfo);
+
+                        loginStore.setLoginInfo("false")
+                        console.log("2loginStore.loginInfo", loginStore.loginInfo);
+
                         uni.showToast({
                             title: '请先登录',
                             icon: 'none'