diff --git a/components/DeepMate.vue b/components/DeepMate.vue
new file mode 100644
index 0000000..e8cb349
--- /dev/null
+++ b/components/DeepMate.vue
@@ -0,0 +1,198 @@
+<template>
+	<view class="deepmate">
+		<view class="deepmate-container">
+			<view class="deepmate-header">
+				<view class="title-container">
+					<view class="title-left">
+						<text class="deepmate-title">DeepMate</text>
+						<text class="deepmate-subtitle">您的市场最佳顾问~</text>
+					</view>
+					<view class="title-right">
+						<image class="deepmate-icon" src="https://d31zlh4on95l9h.cloudfront.net/images/7faa683450cc071bcc746fea8191ff6b.png" mode="aspectFit"></image>
+					</view>
+				</view>
+			</view>
+			<view class="deepmate-content">
+				<view class="deepmate-hotspots">
+					<view class="deepmate-question">
+						<text class="question-text">今日股票策略晨报</text>
+					</view>
+					<view class="hotspot-item">
+						<text>热门股票分析</text>
+					</view>
+					<view class="hotspot-item">
+						<text>行业趋势预测</text>
+					</view>
+					<view class="hotspot-item">
+						<text>市场风险提示</text>
+					</view>
+					<view class="hotspot-item">
+						<text>投资策略建议</text>
+					</view>
+					<view class="hotspot-item">
+						<text>财经新闻解读</text>
+					</view>
+				</view>
+				<view class="deepmate-action">
+					<input class="stock-input" type="text" placeholder="请输入股票代码/名称，获取AI洞察" />
+					<view class="send-button-container">
+						<image class="send-button" src="https://d31zlh4on95l9h.cloudfront.net/images/3da018821a5c82b06a1d6ddc81b960ac.png" mode="aspectFit"></image>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'DeepMate',
+		data() {
+			return {
+				
+			}
+		}
+	}
+</script>
+
+<style>
+/* DeepMate样式 */
+.deepmate-container {
+	background-color: #ffe6e6;
+	border-radius: 10px;
+	padding: 15px 15px 15px 15px;
+	margin: 0;
+	width: 100%;
+	box-sizing: border-box;
+	overflow: hidden;
+}
+
+.deepmate-header {
+	margin-bottom: 10px;
+}
+
+.title-container {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	width: 100%;
+}
+
+.title-left {
+	width: 50%;
+	display: flex;
+	flex-direction: column;
+}
+
+.title-right {
+	width: 50%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.deepmate-title {
+	font-size: 18px;
+	font-weight: bold;
+	color: #ff4d4f;
+	display: block;
+}
+
+.deepmate-icon {
+	width: 50px;
+	height: 50px;
+	margin-left: 0;
+}
+
+.deepmate-subtitle {
+	font-size: 12px;
+	color: #666;
+	display: block;
+	margin-top: 5px;
+}
+
+.deepmate-hotspots {
+	margin: 10px 0;
+	background-color: #ffffff;
+	border-radius: 10px;
+	padding: 10px;
+}
+
+.deepmate-question {
+	display: flex;
+	align-items: center;
+	margin-bottom: 10px;
+	padding-left: 10px;
+	position: relative;
+}
+
+.deepmate-question:before {
+	content: "";
+	position: absolute;
+	left: 0;
+	top: 0;
+	bottom: 0;
+	width: 4px;
+	background-color: #ff4d4f;
+	border-radius: 2px;
+}
+
+.question-text {
+	font-size: 16px;
+	font-weight: bold;
+	color: #333;
+}
+
+.hotspot-item {
+	background-color: #f5f5f5;
+	padding: 8px 12px;
+	border-radius: 6px;
+	margin-bottom: 8px;
+}
+
+.hotspot-item text {
+	font-size: 14px;
+	color: #333;
+}
+
+.deepmate-action {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	background-color: #ff4d4f;
+	padding: 8px 15px;
+	border-radius: 25px;
+	margin-top: 10px;
+	border: none;
+}
+
+.stock-input {
+	flex: 1;
+	height: 36px;
+	font-size: 14px;
+	color: #ffffff;
+	padding: 0 10px;
+	border: none;
+	background-color: transparent;
+}
+
+.stock-input::placeholder {
+	color: rgba(255, 255, 255, 0.8);
+}
+
+.send-button-container {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 36px;
+	height: 36px;
+	background-color: #ffffff;
+	border-radius: 50%;
+	margin-left: 10px;
+}
+
+.send-button {
+	width: 20px;
+	height: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/components/MarketOverview.vue b/components/MarketOverview.vue
new file mode 100644
index 0000000..743b365
--- /dev/null
+++ b/components/MarketOverview.vue
@@ -0,0 +1,385 @@
+<template>
+  <view>
+    <!-- 第一行：白色背景，标题和按钮 -->
+    <view class="market-header">
+      <text class="section-title">今日市场概览</text>
+      <text class="more-btn" @click="showMarketSelector">{{ buttonText }}</text>
+    </view>
+    
+    <!-- 第二行：灰色圆角背景，市场数据 -->
+    <view class="market-content">
+      <!-- 默认显示图片 -->
+      <view class="selected-market" v-if="!showForexMarket">
+        <image class="market-image" src="https://d31zlh4on95l9h.cloudfront.net/images/dee46373b5593d5f315d91675a38fb61.png" mode="widthFix"></image>
+      </view>
+      
+      <!-- 外汇市场样式 -->
+      <view class="selected-market" v-if="showForexMarket">
+        <view class="forex-market">
+          <!-- 上部分：三个汇率容器 -->
+          <view class="forex-rates">
+            <view class="forex-rate-item up">
+              <text class="forex-pair">美元/日元</text>
+              <text class="forex-value">151.13</text>
+              <text class="forex-change">+1.62%</text>
+            </view>
+            <view class="forex-rate-item down">
+              <text class="forex-pair">美元/韩元</text>
+              <text class="forex-value">1424.900</text>
+              <text class="forex-change">-2.92%</text>
+            </view>
+            <view class="forex-rate-item up">
+              <text class="forex-pair">美元/英镑</text>
+              <text class="forex-value">0.730</text>
+              <text class="forex-change">+2.92%</text>
+            </view>
+          </view>
+          
+          <!-- 中部分：智能解读标题 -->
+          <view class="forex-analysis-title">
+            <text class="analysis-title">智能解读</text>
+          </view>
+          
+          <!-- 下部分：智能解读内容 -->
+          <view class="forex-analysis-content">
+            <view class="analysis-icon-container">
+              <image class="analysis-brain-icon" src="https://d31zlh4on95l9h.cloudfront.net/images/8f35e54c52412467101370aa70d8fdb2.png" mode="aspectFit"></image>
+            </view>
+            <view class="analysis-items">
+              <view class="analysis-item">
+                <text class="analysis-dot orange"></text>
+                <text class="analysis-text">今日市场情报: 偏乐观</text>
+              </view>
+              <view class="analysis-item">
+                <text class="analysis-dot blue"></text>
+                <text class="analysis-text">市场风险评级: 需警惕潜在风险</text>
+              </view>
+              <view class="analysis-item">
+                <text class="analysis-dot green"></text>
+                <text class="analysis-text">早盘解析: 今日高开, 芯片、稀土、公共</text>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    
+    <!-- 市场选择对话框 -->
+    <uni-popup ref="marketPopup" type="center" :mask-click="true" @change="popupChange">
+      <view class="market-dialog">
+        <view class="dialog-title">
+          <text>选择市场</text>
+        </view>
+        <view class="market-list">
+          <view class="market-option" v-for="(market, index) in marketOptions" :key="index" @click="selectMarket(market.id)">
+            <view class="market-flag">
+              <image :src="market.flag" mode="aspectFit" class="flag-image"></image>
+            </view>
+            <view class="market-name-container">
+              <text class="market-option-name">{{ market.name }}</text>
+            </view>
+            <view class="market-checkbox">
+              <radio :checked="selectedMarket === market.id" color="#4080ff" />
+            </view>
+          </view>
+        </view>
+        <view class="dialog-buttons">
+          <button class="confirm-btn" @click="confirmMarketSelection">确认</button>
+        </view>
+      </view>
+    </uni-popup>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'MarketOverview',
+  data() {
+    return {
+      selectedMarket: 'forex',
+      tempSelectedMarket: 'forex', // 临时选择，确认后才会应用
+      previousMarket: null,
+      buttonText: '切换市场',
+      showSelector: false,
+      showForexMarket: false, // 默认不显示外汇市场内容
+      marketOptions: [
+        { id: 'forex', name: '外汇市场', flag: '/static/c2.png', value: '+1.62%', trend: 'up' }
+      ],
+      marketData: {
+        'forex': {
+          name: '外汇市场',
+          value: '+1.62%',
+          trend: 'up',
+          indicators: [
+            { name: '美元/日元', value: '151.13 +1.62%', trend: 'up' },
+            { name: '美元/韩元', value: '1424.900 -2.92%', trend: 'down' },
+            { name: '美元/英镑', value: '0.79 +2.92%', trend: 'up' }
+          ]
+        }
+      }
+    }
+  },
+  methods: {
+    showMarketSelector() {
+      // 切换显示外汇市场内容
+      this.showForexMarket = !this.showForexMarket;
+      // 更新按钮文本
+      this.buttonText = this.showForexMarket ? '外汇市场' : '切换市场';
+    },
+    popupChange(e) {
+      // 对话框关闭时，如果没有确认，则恢复原来的选择
+      if (!e.show && this.tempSelectedMarket !== this.selectedMarket) {
+        this.tempSelectedMarket = this.selectedMarket;
+      }
+    },
+    selectMarket(marketId) {
+      // 临时选择市场，不立即应用
+      this.tempSelectedMarket = marketId;
+    },
+    confirmMarketSelection() {
+      // 确认选择，应用市场选择并关闭对话框
+      this.selectedMarket = this.tempSelectedMarket;
+      this.showSelector = false;
+      this.$refs.marketPopup.close();
+    },
+    getSelectedMarketName() {
+      if (!this.selectedMarket) return '';
+      return this.marketData[this.selectedMarket].name;
+    },
+    getSelectedMarketValue() {
+      if (!this.selectedMarket) return '';
+      return this.marketData[this.selectedMarket].value;
+    },
+    getSelectedMarketTrend() {
+      if (!this.selectedMarket) return '';
+      return this.marketData[this.selectedMarket].trend;
+    },
+    getSelectedMarketIndicators() {
+      if (!this.selectedMarket) return [];
+      return this.marketData[this.selectedMarket].indicators;
+    }
+  }
+}
+</script>
+
+<style>
+/* 市场概览样式 */
+.market-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 15px;
+  background-color: #ffffff;
+}
+
+.section-title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+}
+
+.more-btn {
+  font-size: 14px;
+  color: #4080ff;
+}
+
+.market-content {
+  margin: 0 0 15px;
+  background-color: #f5f7fa;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+/* 外汇市场样式 */
+.forex-market {
+  padding: 15px;
+}
+
+.forex-rates {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 15px;
+}
+
+.forex-rate-item {
+  width: 30%;
+  padding: 10px;
+  border-radius: 6px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.forex-rate-item.up {
+  background-color: rgba(82, 196, 26, 0.1);
+  border: 1px solid #52c41a;
+}
+
+.forex-rate-item.down {
+  background-color: rgba(245, 34, 45, 0.1);
+  border: 1px solid #f5222d;
+}
+
+.forex-pair {
+  font-size: 12px;
+  color: #666;
+  margin-bottom: 5px;
+}
+
+.forex-value {
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 5px;
+}
+
+.forex-change {
+  font-size: 12px;
+  color: #52c41a;
+}
+
+.forex-rate-item.down .forex-change {
+  color: #f5222d;
+}
+
+.forex-analysis-title {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  border-left: 3px solid #f5222d;
+  padding-left: 8px;
+}
+
+
+.analysis-title {
+  font-size: 14px;
+  font-weight: bold;
+  color: #333;
+}
+
+.forex-analysis-content {
+  display: flex;
+  background-color: #fff;
+  border-radius: 6px;
+  padding: 12px;
+}
+
+.analysis-icon-container {
+  width: 40px;
+  height: 40px;
+  margin-right: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+}
+
+.analysis-brain-icon {
+  width: 100%;
+  height: 100%;
+}
+
+.analysis-items {
+  flex: 1;
+}
+
+.analysis-item {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.analysis-item:last-child {
+  margin-bottom: 0;
+}
+
+.analysis-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-right: 8px;
+}
+
+.analysis-dot.orange {
+  background-color: #fa8c16;
+}
+
+.analysis-dot.blue {
+  background-color: #1890ff;
+}
+
+.analysis-dot.green {
+  background-color: #52c41a;
+}
+
+.analysis-text {
+  font-size: 12px;
+  color: #333;
+  line-height: 1.4;
+}
+
+/* 市场选择对话框样式 */
+.market-dialog {
+  width: 300px;
+  background-color: #fff;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.dialog-title {
+  padding: 15px;
+  text-align: center;
+  border-bottom: 1px solid #eee;
+}
+
+.market-list {
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.market-option {
+  display: flex;
+  align-items: center;
+  padding: 12px 15px;
+  border-bottom: 1px solid #f5f5f5;
+}
+
+.market-flag {
+  width: 24px;
+  height: 24px;
+  margin-right: 10px;
+}
+
+.flag-image {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+}
+
+.market-name-container {
+  flex: 1;
+}
+
+.market-option-name {
+  font-size: 14px;
+  color: #333;
+}
+
+.dialog-buttons {
+  padding: 10px 15px 15px;
+  display: flex;
+  justify-content: center;
+}
+
+.confirm-btn {
+  width: 80%;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  background-color: #4080ff;
+  color: #fff;
+  border-radius: 20px;
+  font-size: 14px;
+}
+</style>
\ No newline at end of file
diff --git a/components/footerBar.vue b/components/footerBar.vue
index d9b88bf..21f703a 100644
--- a/components/footerBar.vue
+++ b/components/footerBar.vue
@@ -1,37 +1,37 @@
 <template>
 	<view class="static-footer-bar" :style="{ 'padding-bottom': safeAreaInsets.bottom + 'px' }">
-		<view class="static-footer-li ellipsis" @click="tabChange(1)">
-			<image src="../static/footBar-image/c1.png" class="static-footer-li-icon" v-if="type != 'home'"></image>
-			<image src="../static/footBar-image/logo.png" class="static-footer-li-icon" v-if="type == 'home'"></image>
+		<view class="static-footer-li" @click="tabChange(1)">
+			<image src="../static/footBar-image/home.png" class="static-footer-li-icon" v-if="type != 'home'"></image>
+			<image src="../static/footBar-image/home-selected.png" class="static-footer-li-icon" v-if="type == 'home'"></image>
 			<view :class="type == 'home' ? 'static-footer-li-title1' : 'static-footer-li-title'">
 				{{ $t('components.footerBar.homepage') }}</view>
 		</view>
-		<view class="static-footer-li ellipsis" @click="tabChange(2)">
-			<image src="../static/footBar-image/c2.png" class="static-footer-li-icon" v-if="type != 'marketSituation'">
+		<view class="static-footer-li" @click="tabChange(2)">
+			<image src="../static/footBar-image/marketSituation.png" class="static-footer-li-icon" v-if="type != 'marketSituation'">
 			</image>
-			<image src="../static/footBar-image/logo.png" class="static-footer-li-icon"
+			<image src="../static/footBar-image/marketSituation-selected.png" class="static-footer-li-icon"
 				v-if="type == 'marketSituation'"></image>
 			<view :class="type == 'marketSituation' ? 'static-footer-li-title1' : 'static-footer-li-title'">
 				{{ $t('components.footerBar.marketSituation') }}</view>
 		</view>
-		<view class="static-footer-li ellipsis" @click="tabChange(3)">
-			<image src="../static/footBar-image/logo.png" class="static-footer-li-icon" v-if="type != 'deepMate'"></image>
-			<image src="../static/footBar-image/logo.png" class="static-footer-li-icon" v-if="type == 'deepMate'">
+		<view class="static-footer-li static-footer-li-special" @click="tabChange(3)">
+			<image src="../static/footBar-image/deepMate.png" class="static-footer-li-icon static-footer-li-icon-special" v-if="type != 'deepMate'"></image>
+			<image src="../static/footBar-image/deepMate-selected.png" class="static-footer-li-icon static-footer-li-icon-special" v-if="type == 'deepMate'">
 			</image>
 			<view :class="type == 'deepMate' ? 'static-footer-li-title1' : 'static-footer-li-title'">
 				{{ $t('components.footerBar.deepMate') }}</view>
 		</view>
-		<view class="static-footer-li ellipsis" @click="tabChange(4)">
-			<image src="../static/footBar-image/c4.png" class="static-footer-li-icon" v-if="type != 'deepExploration'">
+		<view class="static-footer-li" @click="tabChange(4)">
+			<image src="../static/footBar-image/deepExploration.png" class="static-footer-li-icon" v-if="type != 'deepExploration'">
 			</image>
-			<image src="../static/footBar-image/logo.png" class="static-footer-li-icon"
+			<image src="../static/footBar-image/deepExploration-selected.png" class="static-footer-li-icon"
 				v-if="type == 'deepExploration'"></image>
 			<view :class="type == 'deepExploration' ? 'static-footer-li-title1' : 'static-footer-li-title'">
 				{{ $t('components.footerBar.deepExploration') }}</view>
 		</view>
-		<view class="static-footer-li ellipsis" @click="tabChange(5)">
-			<image src="../static/footBar-image/c5.png" class="static-footer-li-icon" v-if="type != 'member'"></image>
-			<image src="../static/footBar-image/logo.png" class="static-footer-li-icon" v-if="type == 'member'"></image>
+		<view class="static-footer-li" @click="tabChange(5)">
+			<image src="../static/footBar-image/member.png" class="static-footer-li-icon" v-if="type != 'member'"></image>
+			<image src="../static/footBar-image/member-selected.png" class="static-footer-li-icon" v-if="type == 'member'"></image>
 			<view :class="type == 'member' ? 'static-footer-li-title1' : 'static-footer-li-title'">
 				{{ $t('components.footerBar.member') }}</view>
 		</view>
@@ -100,9 +100,10 @@ onMounted(() => {
 <style scoped>
 .static-footer-bar {
 	width: 100%;
-	height: 100rpx;
+	height: 120rpx;
 	border-top: 1px solid #E2E2E2;
 	background: #fff;
+	position: relative;
 }
 
 .static-footer-li {
@@ -111,6 +112,7 @@ onMounted(() => {
 	height: 100%;
 	text-align: center;
 	position: relative;
+	transform: translateY(-12rpx);
 }
 
 .static-footer-li-icon {
@@ -119,6 +121,22 @@ onMounted(() => {
 	margin: 12rpx 0;
 }
 
+/* 中间导航项的特殊样式 */
+.static-footer-li-special {
+	position: relative;
+	z-index: 10;
+}
+
+.static-footer-li-icon-special {
+	width: 95rpx !important;
+	height: 95rpx !important;
+	margin: 0rpx 0 !important;
+	border-radius: 50rpx;
+	box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.2);
+	transform: translateY(-12rpx);
+	transition: all 0.3s ease;
+}
+
 .static-footer-li-title {
 	width: 100%;
 	height: 40rpx;
diff --git a/pages/home/home.vue b/pages/home/home.vue
index 986e8f6..3e0d7ff 100644
--- a/pages/home/home.vue
+++ b/pages/home/home.vue
@@ -2,27 +2,708 @@
 	<view class="main">
 		<!-- 顶部状态栏占位 -->
 		<view class="top" :style="{height:iSMT+'px'}"></view>
-		<view>首页</view>
+		
+		<!-- 头部导航 -->
+		<view class="header">
+			<view class="headphone-icon">
+				<image src="https://d31zlh4on95l9h.cloudfront.net/images/bef2edba6cc0c85671fde07cfab5270d.png" class="header-icon-image"></image>
+			</view>
+			<view class="title">DeepChart</view>
+			<view class="notification-icon">
+				<image src="https://d31zlh4on95l9h.cloudfront.net/images/2554c84b91712d2a6cb6b00380e63bac.png" class="header-icon-image"></image>
+			</view>
+		</view>
+		
+		<!-- 内容区域 - 使用滚动视图 -->
+		<scroll-view scroll-y class="content-container">
+			<!-- 1. 今日市场概览 -->
+			<market-overview></market-overview>
+			
+			<!-- 间隔 -->
+			<view class="section-gap"></view>
+			
+			<!-- 新增欢迎部分 -->
+			<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>
+				</swiper>
+			</view>
+			
+			<!-- 2. DeepMate -->
+			<view class="section deepmate-section">
+				<DeepMate />
+			</view>
+			
+			<!-- 3. 深度探索 -->
+			<view class="section deep-exploration">
+				<!-- 上部分：标题和查看更多按钮 -->
+				<view class="section-header-container">
+					<view class="section-header">
+						<view class="header-left">
+							<text class="section-title">深度探索</text>
+						</view>
+						<view class="header-right">
+							<text class="more-btn">查看更多</text>
+						</view>
+					</view>
+				</view>
+				
+				<!-- 下部分：四个图标 -->
+				<view class="exploration-container">
+					<view class="exploration-content">
+						<view class="exploration-item">
+							<image class="exploration-icon" src="https://d31zlh4on95l9h.cloudfront.net/images/199472b0ee90a1c897f7c87b85accd84.png" mode="aspectFit" lazy-load="true"></image>
+							<text class="exploration-text">主力追踪</text>
+						</view>
+						<view class="exploration-item">
+							<image class="exploration-icon" src="https://d31zlh4on95l9h.cloudfront.net/images/c25ca5e176efc961dabfa5d0d1b486b0.png" mode="aspectFit" lazy-load="true"></image>
+							<text class="exploration-text">主力资达</text>
+						</view>
+						<view class="exploration-item">
+							<image class="exploration-icon" src="https://d31zlh4on95l9h.cloudfront.net/images/c064d7066dc8129a7df7b052762f82cf.png" mode="aspectFit" lazy-load="true"></image>
+							<text class="exploration-text">主力解码</text>
+						</view>
+						<view class="exploration-item">
+							<image class="exploration-icon" src="https://d31zlh4on95l9h.cloudfront.net/images/9d69cceee9c515911477078af6f68d88.png" mode="aspectFit" lazy-load="true"></image>
+							<text class="exploration-text">主力资金流</text>
+						</view>
+					</view>
+				</view>
+			</view>
+			
+			<!-- 4. 我的自选 -->
+			<view class="section my-selection">
+				<!-- 上部分：标题和查看更多按钮 -->
+				<view class="section-header-container">
+					<view class="section-header">
+						<text class="section-title">我的自选</text>
+						<text class="more-btn">添加自选股</text>
+					</view>
+				</view>
+				
+				<!-- 下部分：股票列表 -->
+				<view class="stock-container">
+					<view class="stock-list">
+						<view class="stock-item" v-for="(item, index) in myStocks" :key="item.code">
+							<view class="stock-info">
+								<view class="name-container">
+									<text class="stock-name">{{item.name}}</text>
+									<text class="stock-code-label">{{item.code}}</text>
+								</view>
+								<view class="price-container">
+									<text class="stock-price">{{item.price}}</text>
+									<text class="stock-change" :class="{'stock-up': item.change > 0, 'stock-down': item.change < 0}">{{item.change > 0 ? '+' : ''}}{{item.change}}%</text>
+								</view>
+							</view>
+							<view class="stock-chart">
+								<image :src="item.chartImg" mode="aspectFit" class="chart-image"></image>
+							</view>
+						</view>
+					</view>
+					
+					<!-- 机构动向简报数据 -->
+					<view class="institutional-reports">
+						<view class="section-title-container">
+							<text class="section-title-text">机构动向简报</text>
+						</view>
+						<view class="text-gap"></view>
+						<view class="report-item" v-for="(report, index) in institutionalReports" :key="index">
+							<view class="report-stock">{{report.stock}}</view>
+							<view class="report-status">{{report.status}}</view>
+						</view>
+						<view class="view-more">
+							<text>查看更多 >></text>
+						</view>
+					</view>
+				</view>
+			</view>
+			
+			<!-- 5. 今日市场看点 -->
+			<view class="section-header highlights-title-container">
+				<text class="section-title">今日市场核心看点</text>
+			</view>
+			<view class="highlights-image-container">
+				<image src="https://d31zlh4on95l9h.cloudfront.net/images/8d5365af968402a18cedb120c09460b0.png" mode="aspectFit" class="highlights-image"></image>
+			</view>
+			
+			<!-- 底部空间 - 为底部导航腾出空间 -->
+			<view class="bottom-space"></view>
+		</scroll-view>
+		
+		<!-- 底部导航 -->
 		<footerBar class="static-footer" :type="type"></footerBar>
 	</view>
 </template>
 
-<script setup>
-import { ref,onMounted } from 'vue'
+<script>
 import footerBar from '../../components/footerBar.vue'
+import MarketOverview from '../../components/MarketOverview.vue'
+import DeepMate from '../../components/DeepMate.vue'
 
-const type = ref('home')
-const iSMT = ref(0)
+export default {
+	components: {
+		footerBar,
+		MarketOverview,
+		DeepMate
+	},
+	data() {
+		return {
+			type: 'home',
+			iSMT: 0,
+			
+			// 深度探索数据
+			explorationItems: [
+				{ title: '主力追踪', icon: '/static/c1.png' },
+				{ title: '主力资金', icon: '/static/c2.png' },
+				{ title: '主力解码', icon: '/static/c3.png' },
+				{ title: '主力资金流', icon: '/static/c4.png' }
+			],
+			
+			// 我的自选股票数据
+			myStocks: [
+				{ name: '特斯拉', code: 'TSLA', price: '482.00', change: 2.80, chartImg: '/static/c5.png' },
+				{ name: '英伟达', code: 'NVDA', price: '189.800', change: -2.92, chartImg: '/static/c6.png' },
+				{ name: '苹果', code: 'AAPL', price: '256.430', change: 2.60, chartImg: '/static/c7.png' }
+			],
+			
+			// 机构动向简报数据
+			institutionalReports: [
+				{ stock: '特斯拉', status: '当前市场多头资金占比，且多头资金持续流入。' },
+				{ stock: '英伟达', status: '当前市场多头资金占比，且多头资金持续流入。' },
+				{ stock: '苹果', status: '当前市场多头资金占比，且多头资金持续流入。' }
+			],
+			
+			// 防抖定时器
+			debounceTimer: null
+		}
+	},
 
-onMounted(() => {
-	// 状态栏高度
-	iSMT.value = uni.getSystemInfoSync().statusBarHeight;
-})
+	// Vue 2生命周期方法
+	mounted() {
+		// 状态栏高度
+		this.iSMT = uni.getSystemInfoSync().statusBarHeight;
+		
+		// 预加载图片资源
+		this.myStocks.forEach(stock => {
+			// 使用uni.getImageInfo替代Image对象
+			uni.getImageInfo({
+				src: stock.chartImg,
+				success: function(res) {
+					// 图片加载成功
+					console.log('图片预加载成功:', stock.name)
+				},
+				fail: function(err) {
+					console.log('图片预加载失败:', err)
+				}
+			})
+		})
+	},
+	
+	methods: {
+		// 防抖函数
+		debounce(fn, delay = 300) {
+			if (this.debounceTimer) clearTimeout(this.debounceTimer)
+			this.debounceTimer = setTimeout(() => {
+				fn()
+				this.debounceTimer = null
+			}, delay)
+		}
+	}
+}
 </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: 10px 15px;
+	background-color: #ffffff;
+}
+
+.title {
+	font-size: 22px;
+	font-weight: bold;
+	text-align: center;
+	flex: 1;
+}
+
+.headphone-icon, .notification-icon {
+	width: 40px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.header-icon-image {
+	width: 24px;
+	height: 24px;
+	object-fit: contain;
+}
+
+.content-container {
+	flex: 1;
+	padding: 10px;
+	width: 100%;
+	box-sizing: border-box;
+	overflow-x: hidden;
+}
+
+.section {
+	margin-bottom: 15px;
+	/* background-color: #f5f5f5; */
+	background-color: #ffffff;
+	border-radius: 8px;
+	padding: 15px;
+}
+
+.section-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 15px;
+	padding-bottom: 10px;
+}
+
+.section-title {
+	font-size: 18px;
+	font-weight: bold;
+	color: #000000;
+}
+.section-title-text{
+	font-size: 14px;
+
+}
+
+.text-gap{
+	height: 10px;
+}
+
+.more-btn {
+	font-size: 12px;
+	font-weight: bold;
+	color: #ffffff;
+	background-color: #000000;
+	padding: 4px 8px;
+	border-radius: 4px;
+}
+
+/* 市场概览样式 */
+.market-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 10px 15px;
+	background-color: #ffffff;
+	margin-bottom: 10px;
+}
+
+.market-content {
+	background-color: #f5f5f5;
+	border-radius: 8px;
+	padding: 15px;
+	margin: 0 15px;
+}
+
+.market-image {
+	margin-bottom: 15px;
+	display: flex;
+	justify-content: center;
+}
+
+.overview-image {
+	width: 100%;
+	border-radius: 8px;
+}
+
+.market-data {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+}
+
+/* 间隔样式 */
+.section-gap {
+	height: 20px;
+}
+
+.market-item {
+	display: flex;
+	justify-content: space-between;
+	padding: 8px 0;
+	border-bottom: 1px solid #f0f0f0;
+}
+
+.down {
+	color: #ff4d4f;
+}
+
+.up {
+	color: #52c41a;
+}
+
+/* DeepMate样式 */
+.deepmate-container {
+	background-color: #ffe6e6;
+	border-radius: 10px;
+	padding: 15px;
+	margin: 0 15px;
+}
+
+.deepmate-header {
+	margin-bottom: 10px;
+}
+
+.title-container {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	width: 100%;
+}
+
+.title-left {
+	width: 50%;
+}
+
+.title-right {
+	width: 50%;
+	display: flex;
+	justify-content: flex-end;
+}
+
+.deepmate-title {
+	font-size: 18px;
+	font-weight: bold;
+	color: #ff4d4f;
+}
+
+.deepmate-icon {
+	width: 60px;
+	height: 60px;
+	margin-left: 0;
+}
+
+.deepmate-subtitle {
+	font-size: 12px;
+	color: #666;
+	margin-left: 5px;
+}
+
+.deepmate-hotspots {
+	margin: 10px 0;
+}
+
+.hotspot-item {
+	background-color: #f5f5f5;
+	padding: 8px 12px;
+	border-radius: 6px;
+	margin-bottom: 8px;
+}
+
+.hotspot-item text {
+	font-size: 14px;
+	color: #333;
+}
+
+.deepmate-action {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background-color: #ffffff;
+	border-radius: 20px;
+	padding: 10px;
+	margin-top: 10px;
+}
+
+/* 欢迎部分样式 */
+.welcome-section {
+	margin-bottom: 15px;
+	padding: 0;
+}
+
+.welcome-swiper {
+	width: 100%;
+	height: 150px;
+	border-radius: 0;
+	overflow: hidden;
+}
+
+.deepmate-section {
+	padding: 0;
+}
+
+.swiper-image {
+	width: 100%;
+	height: 100%;
+	border-radius: 8px;
+	object-fit: contain;
+}
+
+/* 深度探索样式 */
+.deep-exploration {
+	margin-top: 15px;
+	padding: 0; /* 移除内边距，让子容器自己控制 */
+}
+
+.section-header-container {
+	margin-bottom: 10px;
+}
+
+.section-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 10px 15px;
+	background-color: #ffffff;
+}
+
+.header-left {
+	display: flex;
+	align-items: center;
+}
+
+.header-right {
+	display: flex;
+	align-items: center;
+}
+
+.section-title {
+	font-size: 16px;
+	font-weight: bold;
+	color: #333;
+}
+
+.more-btn {
+	font-size: 12px;
+	color: #ffffff;
+}
+
+.exploration-container {
+	border-radius: 8px;
+	overflow: hidden;
+}
+
+.exploration-content {
+	display: flex;
+	justify-content: space-between;
+	padding: 15px;
+	background-color: #f5f5f5;
+	border-radius: 8px;
+}
+
+.exploration-item {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	width: 22%;
+	background-color: #ffffff;
+	border-radius: 8px;
+	padding: 10px 0;
+}
+
+.exploration-icon {
+	width: 50px;
+	height: 50px;
+	margin-bottom: 8px;
+}
+
+.exploration-text {
+	font-size: 12px;
+	color: #333;
+}
+
+.icon-text {
+	font-size: 12px;
+}
+
+/* 我的自选样式 */
+.my-selection {
+	padding: 0; /* 移除内边距，让子容器自己控制 */
+}
+
+.stock-container {
+	border-radius: 8px;
+	overflow: hidden;
+	background-color: #f5f5f5;
+	padding: 15px;
+	box-sizing: border-box;
+}
+
+.stock-list {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	background-color: #f8f8f8;
+	border-radius: 8px;
+	padding: 15px;
+	gap: 10px; /* 添加卡片之间的间距 */
+}
+
+.stock-item {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	padding: 3px;
+	background-color: #ffffff;
+	border-radius: 8px;
+	width: 30%;
+	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+	will-change: transform;
+	transform: translateZ(0);
+}
+
+.stock-info {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	margin-bottom: 5px;
+}
+
+.stock-chart {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.name-container {
+	display: flex;
+	align-items: center;
+	gap: 5px;
+}
+
+.stock-name {
+	font-size: 12px;
+	font-weight: bold;
+	color: #333;
+}
+
+.stock-code-label {
+	font-size: 12px;
+	color: #666;
+	background-color: #f5f5f5;
+	padding: 0 4px;
+	border-radius: 3px;
+}
+
+.stock-price {
+	font-size: 12px;
+	color: #666;
+}
+
+.price-container {
+	display: flex;
+	align-items: center;
+	gap: 5px;
+}
+
+.stock-change {
+	font-size: 12px;
+}
+
+.stock-up {
+	color: #4cd964;
+}
+
+.stock-down {
+	color: #ff3b30;
+}
+
+.chart-image {
+	width: 100px;
+	height: 40px;
+}
+
+
+
+/* 市场看点样式 */
+.highlights-title-container {
+	background-color: #ffffff;
+	margin-bottom: 10px;
+}
+
+.highlights-image-container {
+	background-color: #f5f5f5;
+	border-radius: 8px;
+	padding: 10px;
+	margin-bottom: 15px;
+}
+
+.highlights-image {
+	width: 100%;
+	height: 150px;
+	border-radius: 4px;
+}
+
+/* 机构动向简报样式 */
+.institutional-reports {
+	margin-top: 15px;
+	background-color: #f8f8f8;
+	border-radius: 8px;
+	padding: 10px;
+}
+
+.section-title-container {
+	position: relative;
+	padding-left: 10px;
+	margin-bottom: 5px;
+}
+
+.section-title-container:before {
+	content: "";
+	position: absolute;
+	left: 0;
+	top: 0;
+	bottom: 0;
+	width: 4px;
+	background-color: #ff4d4f;
+	border-radius: 2px;
+}
+
+.report-item {
+	background-color: #ffffff;
+	border-radius: 8px;
+	padding: 10px;
+	margin-bottom: 8px;
+}
+
+.report-stock {
+	font-size: 14px;
+	font-weight: bold;
+	color: #e74c3c;
+	margin-bottom: 5px;
+}
+
+.report-status {
+	font-size: 12px;
+	color: #333;
+}
+
+.view-more {
+	text-align: center;
+	color: #1890ff;
+	font-size: 12px;
+	padding: 5px;
+}
+
+/* 底部空间 */
+.bottom-space {
+	height: 60px;
+}
+
+/* 底部导航 */
 .static-footer {
 	position: fixed;
 	bottom: 0;
+	width: 100%;
 }
 </style>
\ No newline at end of file
diff --git a/static/footBar-image/c1.png b/static/footBar-image/c1.png
deleted file mode 100644
index 9d38fdc..0000000
Binary files a/static/footBar-image/c1.png and /dev/null differ
diff --git a/static/footBar-image/c2.png b/static/footBar-image/c2.png
deleted file mode 100644
index ce956d7..0000000
Binary files a/static/footBar-image/c2.png and /dev/null differ
diff --git a/static/footBar-image/c4.png b/static/footBar-image/c4.png
deleted file mode 100644
index fb8b477..0000000
Binary files a/static/footBar-image/c4.png and /dev/null differ
diff --git a/static/footBar-image/c5.png b/static/footBar-image/c5.png
deleted file mode 100644
index 310bfb1..0000000
Binary files a/static/footBar-image/c5.png and /dev/null differ
diff --git a/static/footBar-image/deepExploration-selected.png b/static/footBar-image/deepExploration-selected.png
new file mode 100644
index 0000000..709dead
Binary files /dev/null and b/static/footBar-image/deepExploration-selected.png differ
diff --git a/static/footBar-image/deepExploration.png b/static/footBar-image/deepExploration.png
new file mode 100644
index 0000000..793c12a
Binary files /dev/null and b/static/footBar-image/deepExploration.png differ
diff --git a/static/footBar-image/deepmate-selected.png b/static/footBar-image/deepmate-selected.png
new file mode 100644
index 0000000..7f6fb77
Binary files /dev/null and b/static/footBar-image/deepmate-selected.png differ
diff --git a/static/footBar-image/deepmate.png b/static/footBar-image/deepmate.png
new file mode 100644
index 0000000..631a9ee
Binary files /dev/null and b/static/footBar-image/deepmate.png differ
diff --git a/static/footBar-image/home-selected.png b/static/footBar-image/home-selected.png
new file mode 100644
index 0000000..e9bc40d
Binary files /dev/null and b/static/footBar-image/home-selected.png differ
diff --git a/static/footBar-image/home.png b/static/footBar-image/home.png
new file mode 100644
index 0000000..619dd66
Binary files /dev/null and b/static/footBar-image/home.png differ
diff --git a/static/footBar-image/logo.png b/static/footBar-image/logo.png
deleted file mode 100644
index b5771e2..0000000
Binary files a/static/footBar-image/logo.png and /dev/null differ
diff --git a/static/footBar-image/marketSituation-selected.png b/static/footBar-image/marketSituation-selected.png
new file mode 100644
index 0000000..521db50
Binary files /dev/null and b/static/footBar-image/marketSituation-selected.png differ
diff --git a/static/footBar-image/marketSituation.png b/static/footBar-image/marketSituation.png
new file mode 100644
index 0000000..29749d4
Binary files /dev/null and b/static/footBar-image/marketSituation.png differ
diff --git a/static/footBar-image/member-selected.png b/static/footBar-image/member-selected.png
new file mode 100644
index 0000000..808bdda
Binary files /dev/null and b/static/footBar-image/member-selected.png differ
diff --git a/static/footBar-image/member.png b/static/footBar-image/member.png
new file mode 100644
index 0000000..cb56c5e
Binary files /dev/null and b/static/footBar-image/member.png differ