From dee827ecb7a916135c9ca74d7caaead04c6c7eee Mon Sep 17 00:00:00 2001
From: zhaowenkang <z13306486998@126.com>
Date: Fri, 24 Oct 2025 16:44:26 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B0=81=E8=A3=85=E8=AF=B7=E6=B1=82=EF=BC=8C?=
 =?UTF-8?q?=E8=A1=8C=E6=83=85=E9=A1=B5=E9=9D=A2=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 common/util.js                        |  29 ++
 pages.json                            |  18 ++
 pages/home/globalIndex.vue            | 574 ++++++++++++++++++++++++++++++++++
 pages/home/marketDetail.vue           | 484 ++++++++++++++++++++++++++++
 pages/home/marketSituation.vue        | 180 +++++++++--
 static/language/en.js                 |   1 +
 static/language/ms.js                 |   1 +
 static/language/th.js                 |   1 +
 static/language/vi.js                 |   1 +
 static/language/zh_CN.js              |   7 +
 static/language/zh_HK.js              |   1 +
 static/marketSituation-image/back.png | Bin 0 -> 576 bytes
 12 files changed, 1266 insertions(+), 31 deletions(-)
 create mode 100644 common/util.js
 create mode 100644 pages/home/globalIndex.vue
 create mode 100644 pages/home/marketDetail.vue
 create mode 100644 static/marketSituation-image/back.png

diff --git a/common/util.js b/common/util.js
new file mode 100644
index 0000000..ec2a8f1
--- /dev/null
+++ b/common/util.js
@@ -0,0 +1,29 @@
+var util = {}
+util.data = {}
+util.data.base_url = 'http://39.101.133.168:8828/'
+// util.data.base_url = 'https://dbqb.nfdxy.net/prodApi'
+
+// AJAX 请求方法
+util.request = (url, callback, data = {}, failCallback) => {
+	url = util.data.base_url + url
+	// if (uni.getStorageSync('token') && !data.token && data.token !='') data.token = uni.getStorageSync('token')
+	// data.app_from = uni.getStorageSync('ajax_app_from')
+	console.log('请求该接口->', url,'请求参数为->',data);
+	uni.request({
+		url: url, //仅为示例，并非真实接口地址。
+		data,
+		method: 'post',
+		header: {
+			'content-type': 'application/x-www-form-urlencoded', //自定义请求头信息
+			// 'version': uni.getSystemInfoSync().appVersion,
+			// 'platform': 2,
+			// 'client': uni.getSystemInfoSync().platform == 'ios' ? 'ios' : 'android',
+			// 'app_from': uni.getStorageSync('ajax_app_from')
+		},
+		sslVerify: false,
+		success: callback,
+		fail: failCallback
+	});
+}
+
+export default util
\ No newline at end of file
diff --git a/pages.json b/pages.json
index bb7702d..4558c9f 100644
--- a/pages.json
+++ b/pages.json
@@ -51,6 +51,24 @@
 			{
 				"navigationBarTitleText" : ""
 			}
+		},
+		{
+			"path": "pages/home/globalIndex",
+			"style": {
+				"navigationStyle": "custom",
+				"disableSwipeBack": true,
+				"titleNView": false,
+				"bounce": false
+			}
+		},
+		{
+			"path": "pages/home/marketDetail",
+			"style": {
+				"navigationStyle": "custom",
+				"disableSwipeBack": true,
+				"titleNView": false,
+				"bounce": false
+			}
 		}
 	],
 	"globalStyle": {
diff --git a/pages/home/globalIndex.vue b/pages/home/globalIndex.vue
new file mode 100644
index 0000000..065fc1d
--- /dev/null
+++ b/pages/home/globalIndex.vue
@@ -0,0 +1,574 @@
+<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>
+
+        <!-- 内容区域 -->
+        <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" :indexName="item.indexName"
+                            :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" :indexName="item.indexName"
+                            :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" :indexName="item.indexName"
+                            :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>
+
+    <!-- 底部导航栏 -->
+    <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'
+
+// 响应式数据
+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'
+})
+
+// 检测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)
+    })
+}
+
+// 亚太-中华指数数据
+const asiachinaIndexes = ref([
+    {
+        flagIcon: '/static/c1.png',
+        indexName: '上证指数',
+        currentPrice: '3933.96',
+        changeAmount: '+24.32',
+        changePercent: '+0.62%',
+        isRising: true
+    },
+    {
+        flagIcon: '/static/c2.png',
+        indexName: '深证成指',
+        currentPrice: '45757.90',
+        changeAmount: '-123.45',
+        changePercent: '-0.27%',
+        isRising: false
+    },
+    {
+        flagIcon: '/static/c3.png',
+        indexName: '创业板指',
+        currentPrice: '6606.08',
+        changeAmount: '+89.76',
+        changePercent: '+1.38%',
+        isRising: true
+    },
+    {
+        flagIcon: '/static/c4.png',
+        indexName: 'HSI50',
+        currentPrice: '22333.96',
+        changeAmount: '+156.78',
+        changePercent: '+0.71%',
+        isRising: true
+    },
+    {
+        flagIcon: '/static/c5.png',
+        indexName: '沪深300',
+        currentPrice: '45757.90',
+        changeAmount: '-89.12',
+        changePercent: '-0.19%',
+        isRising: false
+    },
+    {
+        flagIcon: '/static/c6.png',
+        indexName: '上证50',
+        currentPrice: '45757.90',
+        changeAmount: '+234.56',
+        changePercent: '+0.52%',
+        isRising: true
+    }
+])
+
+// 亚太指数数据
+const asiaIndexes = ref([
+    {
+        flagIcon: '/static/c7.png',
+        indexName: '日经225',
+        currentPrice: '28456.78',
+        changeAmount: '+234.56',
+        changePercent: '+0.83%',
+        isRising: true
+    },
+    {
+        flagIcon: '/static/c8.png',
+        indexName: '韩国KOSPI',
+        currentPrice: '2567.89',
+        changeAmount: '-12.34',
+        changePercent: '-0.48%',
+        isRising: false
+    },
+    {
+        flagIcon: '/static/c9.png',
+        indexName: '印度孟买',
+        currentPrice: '65432.10',
+        changeAmount: '+456.78',
+        changePercent: '+0.70%',
+        isRising: true
+    }
+])
+
+// 美洲指数数据
+const americaIndexes = ref([
+    {
+        flagIcon: '/static/c7.png',
+        indexName: '道琼斯指数',
+        currentPrice: '34567.89',
+        changeAmount: '+123.45',
+        changePercent: '+0.36%',
+        isRising: true
+    },
+    {
+        flagIcon: '/static/c8.png',
+        indexName: '纳斯达克',
+        currentPrice: '13456.78',
+        changeAmount: '-67.89',
+        changePercent: '-0.50%',
+        isRising: false
+    },
+    {
+        flagIcon: '/static/c9.png',
+        indexName: '标普500',
+        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 goBack = () => {
+    uni.navigateBack()
+}
+
+// 方法：搜索输入
+const onSearchInput = (e) => {
+    searchValue.value = e.detail.value
+}
+
+// 方法：清除搜索
+const clearSearch = () => {
+    searchValue.value = ''
+}
+
+// 方法：查看更多
+const viewMore = (market) => {
+	console.log('查看更多:', market)
+	uni.navigateTo({
+		url: `/pages/home/marketDetail?market=${market}`
+	})
+}
+
+// 方法：查看指数详情
+const viewIndexDetail = (item) => {
+    console.log('查看指数详情:', item.indexName)
+    uni.showToast({
+        title: `查看 ${item.indexName} 详情`,
+        icon: 'none',
+        duration: 2000
+    })
+    // 这里可以跳转到具体的指数详情页面
+    // uni.navigateTo({
+    //     url: `/pages/detail/indexDetail?id=${item.id}`
+    // })
+}
+
+// 生命周期：页面挂载
+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()
+})
+
+// 监听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)
+    }
+})
+</script>
+
+<style lang="scss" scoped>
+.main {
+    position: relative;
+    height: 100vh;
+    overflow: hidden;
+    background-color: #f5f5f5;
+}
+
+/* 状态栏占位 */
+.top {
+    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);
+}
+
+.header_content {
+    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;
+}
+
+.header_back image {
+    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);
+}
+
+.search_icon {
+    width: 40rpx;
+    height: 40rpx;
+    opacity: 0.6;
+}
+
+.header_input {
+    margin-left: 10rpx;
+}
+
+.header_icons {
+    display: flex;
+    align-items: center;
+    gap: 15rpx;
+}
+
+.header_icon {
+    width: 40rpx;
+    height: 40rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.header_icon image {
+    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;
+}
+
+.warn image {
+    width: 40rpx;
+    height: 40rpx;
+    flex-shrink: 0;
+    /* 防止图片被压缩 */
+    position: relative;
+    z-index: 2;
+    /* 确保图片在最上层 */
+}
+
+.warn_text_container {
+    flex: 1;
+    overflow: hidden;
+    position: relative;
+    min-width: 0;
+    /* 允许容器收缩 */
+}
+
+.warn_text {
+    display: block;
+    white-space: nowrap;
+    will-change: transform;
+    /* 优化动画性能 */
+}
+
+/* 文字滚动动画 */
+@keyframes scrollText {
+    0% {
+        transform: translateX(0);
+    }
+
+    20% {
+        transform: translateX(0);
+    }
+
+    80% {
+        transform: translateX(-85%);
+    }
+
+    100% {
+        transform: translateX(-85%);
+    }
+}
+
+/* 当文字超长时启用滚动动画 */
+.warn_text.scroll-active {
+    animation: scrollText 12s linear infinite;
+    animation-delay: 2s;
+    /* 延迟2秒开始滚动，让用户先看到开头 */
+}
+
+/* 内容区域 */
+.content {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 120rpx;
+    background-color: #f5f5f5;
+    padding: 0;
+}
+
+/* 市场分组 */
+.market-section {
+    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;
+}
+
+.market-title {
+    font-size: 32rpx;
+    font-weight: 600;
+    color: #333;
+}
+
+.market-more {
+    display: flex;
+    align-items: center;
+    gap: 8rpx;
+}
+
+.more-text {
+    font-size: 24rpx;
+    color: #666;
+}
+
+.more-arrow {
+    font-size: 20rpx;
+    color: #666;
+    font-weight: bold;
+}
+
+/* 三列卡片网格 */
+.cards-grid-three {
+    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;
+}
+
+.card-item:active {
+    transform: scale(0.98);
+    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.12);
+}
+
+/* 底部安全区域 */
+.bottom-safe-area {
+    height: 40rpx;
+    background-color: transparent;
+}
+
+/* 底部导航栏 */
+.static-footer {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+}
+
+/* 响应式设计 */
+@media (max-width: 400rpx) {
+    .cards-grid-three {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+</style>
\ No newline at end of file
diff --git a/pages/home/marketDetail.vue b/pages/home/marketDetail.vue
new file mode 100644
index 0000000..a23162a
--- /dev/null
+++ b/pages/home/marketDetail.vue
@@ -0,0 +1,484 @@
+<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="viewStockDetail(stock)">
+					<view class="stock-cell name-column">
+						<view class="stock-name">{{ stock.name }}</view>
+						<view class="stock-code">{{ stock.code }}</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'
+
+// 响应式数据
+const iSMT = 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 stockList = ref([
+	{
+		name: 'Telecommunication',
+		code: '888607',
+		price: 1349.47,
+		change: '+7.67%',
+		isRising: true
+	},
+	{
+		name: 'Other',
+		code: '888607',
+		price: 1349.47,
+		change: '+6.67%',
+		isRising: true
+	},
+	{
+		name: 'Consumer Discretio...',
+		code: '888610',
+		price: 1349.47,
+		change: '+5.67%',
+		isRising: true
+	},
+	{
+		name: 'Telecommunication',
+		code: '888607',
+		price: 1349.47,
+		change: '+4.67%',
+		isRising: true
+	},
+	{
+		name: 'Other',
+		code: '888611',
+		price: 1359.47,
+		change: '+3.67%',
+		isRising: true
+	},
+	{
+		name: 'Consumer Discretio...',
+		code: '888610',
+		price: 1349.47,
+		change: '+2.67%',
+		isRising: true
+	},
+	{
+		name: 'Telecommunication',
+		code: '888607',
+		price: 1349.47,
+		change: '+1.67%',
+		isRising: true
+	},
+	{
+		name: 'Other',
+		code: '888611',
+		price: 1009.98,
+		change: '-1.67%',
+		isRising: false
+	},
+	{
+		name: 'Consumer Discretio...',
+		code: '888610',
+		price: 1009.98,
+		change: '-0.67%',
+		isRising: false
+	},
+	{
+		name: 'Telecommunication',
+		code: '888607',
+		price: 1009.98,
+		change: '-0.67%',
+		isRising: false
+	},
+	{
+		name: 'Other',
+		code: '888611',
+		price: 1009.98,
+		change: '-1.67%',
+		isRising: false
+	},
+	{
+		name: 'Consumer Discretio...',
+		code: '888610',
+		price: 1009.98,
+		change: '-4.67%',
+		isRising: false
+	},
+	{
+		name: 'Consumer Discretio...',
+		code: '888610',
+		price: 1009.98,
+		change: '-3.67%',
+		isRising: false
+	},
+	{
+		name: 'Consumer Discretio...',
+		code: '888610',
+		price: 1009.98,
+		change: '-3.67%',
+		isRising: false
+	}
+])
+
+// 计算属性
+const contentTopPosition = computed(() => {
+	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
+})
+
+// 页面加载时接收参数
+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 = '全球指数'
+		}
+	}
+})
+
+// 方法
+const goBack = () => {
+	uni.navigateBack()
+}
+
+const sortByPrice = () => {
+	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'
+	}
+}
+
+const viewStockDetail = (stock) => {
+	console.log('查看股票详情:', stock)
+	// 这里可以跳转到股票详情页面
+}
+
+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()
+})
+
+// 监听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)
+    }
+})
+</script>
+
+<style scoped>
+.main {
+	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;
+}
+
+.header-content {
+	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;
+}
+
+.header-left {
+	justify-content: flex-start;
+}
+
+.header-right {
+	justify-content: flex-end;
+	gap: 10px;
+}
+
+.back-text {
+	font-size: 24px;
+	color: #333333;
+	font-weight: 500;
+	line-height: 1;
+}
+
+.header-center {
+	flex: 1;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.header-title {
+	font-size: 18px;
+	font-weight: 600;
+	color: #333333;
+}
+
+.header-icon {
+	width: 20px;
+	height: 20px;
+}
+
+.more-text {
+	font-size: 20px;
+	color: #666666;
+	font-weight: bold;
+}
+
+/* 内容区域 */
+.content {
+	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;
+}
+
+.header-item {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+}
+
+.header-item.name-column {
+	flex: 2;
+	justify-content: flex-start;
+}
+
+.header-item.price-column,
+.header-item.change-column {
+	flex: 1;
+	justify-content: center;
+}
+
+.header-text {
+	font-size: 14px;
+	color: #666666;
+	font-weight: 500;
+}
+
+.sort-icon {
+	margin-left: 4px;
+	font-size: 12px;
+	color: #999999;
+}
+
+/* 股票列表 */
+.stock-list {
+	background-color: #ffffff;
+}
+
+.stock-row {
+	display: flex;
+	align-items: center;
+	padding: 12px 15px;
+	border-bottom: 1px solid #f5f5f5;
+}
+
+.stock-row:active {
+	background-color: #f8f8f8;
+}
+
+.stock-cell {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.stock-cell.name-column {
+	flex: 2;
+	align-items: flex-start;
+}
+
+.stock-cell.price-column,
+.stock-cell.change-column {
+	flex: 1;
+	align-items: center;
+}
+
+.stock-name {
+	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;
+}
+
+.stock-price {
+	font-size: 15px;
+	font-weight: 600;
+	line-height: 1.2;
+}
+
+.stock-change {
+	font-size: 13px;
+	font-weight: 500;
+	line-height: 1.2;
+}
+
+.rising {
+	color: #00C851;
+}
+
+.falling {
+	color: #FF4444;
+}
+
+/* 底部安全区域 */
+/* .bottom-safe-area {
+	height: 20px;
+} */
+
+/* 底部导航栏 */
+/* .static-footer {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	z-index: 1000;
+} */
+</style>
\ No newline at end of file
diff --git a/pages/home/marketSituation.vue b/pages/home/marketSituation.vue
index 170a481..0fe28ee 100644
--- a/pages/home/marketSituation.vue
+++ b/pages/home/marketSituation.vue
@@ -1,13 +1,11 @@
 <template>
 	<view class="main">
-		<!-- 顶部状态栏占位 -->
-		<view class="top" :style="{ height: iSMT + 'px' }"></view>
-		
 		<!-- 固定头部 -->
 		<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>
+					<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" />
@@ -37,7 +35,7 @@
 				</view>
 			</view>
 		</view>
-		
+
 		<!-- 可滚动内容区域 -->
 		<scroll-view class="content_scroll" scroll-y="true" :style="{ top: contentTopPosition + 'px' }">
 			<view class="content">
@@ -48,26 +46,26 @@
 					<view class="global_index_title">
 						{{ $t('marketSituation.globalIndex') }}
 					</view>
-					<view class="global_index_more">
+					<view class="global_index_more" @click="goToGlobalIndex">
 						<text>{{ $t('marketSituation.globalIndexMore') }}</text>
 						<image src="/static/marketSituation-image/more.png" mode="aspectFit"></image>
 					</view>
 				</view>
-				
+
 				<!-- 卡片网格 -->
 				<view class="cards_grid">
 					<view v-for="(card, index) in cardData" :key="index" class="card_item">
-						<IndexCard 
-							:flagIcon="card.flagIcon"
-							:indexName="card.indexName"
-							:currentPrice="card.currentPrice"
-							:changeAmount="card.changeAmount"
-							:changePercent="card.changePercent"
-							:isRising="card.isRising"
-						/>
+						<IndexCard :flagIcon="card.flagIcon" :indexName="card.indexName"
+							:currentPrice="card.currentPrice" :changeAmount="card.changeAmount"
+							:changePercent="card.changePercent" :isRising="card.isRising" />
+					</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="bottom_safe_area"></view>
 			</view>
@@ -100,6 +98,7 @@
 
 <script setup>
 import { ref, onMounted, watch, nextTick, computed } from 'vue'
+import util from '../../common/util.js'
 import footerBar from '../../components/footerBar.vue'
 import IndexCard from '../../components/IndexCard.vue'
 
@@ -108,6 +107,7 @@ const iSMT = ref(0)
 const searchValue = ref('')
 const contentHeight = ref(0)
 const headerHeight = ref(0) // 动态计算的header高度
+const isWarnTextOverflow = ref(false) // warn文字是否溢出
 
 // Tab 栏相关数据
 const channelData = ref([
@@ -134,11 +134,16 @@ const contentTopPosition = computed(() => {
 	return statusBarHeight + currentHeaderHeight
 })
 
+// warn文字的class计算属性
+const warnTextClass = computed(() => {
+	return isWarnTextOverflow.value ? 'warn_text scroll-active' : 'warn_text'
+})
+
 // 弹窗相关数据
 const showCountryModal = ref(false)
 const selectedCountry = ref('概况')
 const countryList = ref([
-	'概况', '新加坡', '马来西亚', '印度尼西亚', '美国', '中国香港', 
+	'概况', '新加坡', '马来西亚', '印度尼西亚', '美国', '中国香港',
 	'泰国', '中国', '加拿大', '越南', '外汇', '贵金属'
 ])
 
@@ -298,16 +303,16 @@ const channel_more = () => {
 // 选择国家
 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,
@@ -320,7 +325,7 @@ const selectCountry = (country) => {
 			pageIndex.value = 0
 			scrollToView.value = 'nav' + channelData.value[0].id
 		}
-		
+
 		console.log('选中了：' + country)
 		uni.showToast({
 			title: '已选择：' + country,
@@ -328,7 +333,7 @@ const selectCountry = (country) => {
 			duration: 2000
 		})
 	}
-	
+
 	// 这里可以添加切换到对应国家/地区数据的逻辑
 	// 例如：loadMarketData(country)
 	closeModal()
@@ -339,16 +344,57 @@ const closeModal = () => {
 	showCountryModal.value = false
 }
 
+// 检测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)
+	})
+}
+
+// 跳转到全球指数页面
+const goToGlobalIndex = () => {
+	uni.navigateTo({
+		url: '/pages/home/globalIndex'
+	})
+}
+
 onMounted(() => {
 	// 状态栏高度
 	iSMT.value = uni.getSystemInfoSync().statusBarHeight;
-	
+
 	// 初始化 tab 栏
 	if (channelData.value.length > 0) {
 		pageIndex.value = 0
 		scrollToView.value = 'nav' + channelData.value[0].id
 	}
-	
+
+	util.request('link/api/brain/privilege', (res) => {
+			console.log(res)
+	},{
+		'token': '9ior41AF0xTIbIG2pRnnbZi0+fEeMx8pywnIlrmTwo5FbqJ9lWrSWOxp9MkpKiNtedtUafqvzIwpFKrwuMs'
+	}, (err) => {
+		console.log(err)
+	})
+
 	// 确保DOM渲染完成后再查询高度
 	nextTick(() => {
 		// 动态计算header实际高度
@@ -358,6 +404,9 @@ onMounted(() => {
 				console.log('Header实际高度:', headerHeight.value, 'px')
 			}
 		}).exec()
+
+		// 检测warn文字是否溢出
+		checkWarnTextOverflow()
 	})
 })
 
@@ -368,7 +417,7 @@ watch(headerHeight, (newHeight) => {
 		const windowHeight = systemInfo.windowHeight
 		const statusBarHeight = systemInfo.statusBarHeight || 0
 		const footerHeight = 100
-		
+
 		contentHeight.value = windowHeight - statusBarHeight - newHeight - footerHeight
 		console.log('重新计算contentHeight:', contentHeight.value)
 	}
@@ -402,7 +451,8 @@ watch(headerHeight, (newHeight) => {
 	position: fixed;
 	left: 0;
 	right: 0;
-	bottom: 100rpx; /* 底部导航栏高度 */
+	bottom: 100rpx;
+	/* 底部导航栏高度 */
 	overflow-y: auto;
 }
 
@@ -708,26 +758,29 @@ watch(headerHeight, (newHeight) => {
 	color: #fff;
 }
 
-.global_index{
+.global_index {
 	margin: 30rpx 20rpx 0 20rpx;
 	display: flex;
 	justify-content: space-between;
 }
-.global_index_title{
+
+.global_index_title {
 	margin-left: 20rpx;
 	font-size: 40rpx;
 	font-weight: 100;
 	color: #333333;
 	align-items: center;
 }
-.global_index_more{
+
+.global_index_more {
 	display: flex;
 	gap: 10rpx;
 	font-size: 28rpx;
 	color: #333333;
 	align-items: center;
 }
-.global_index_more image{
+
+.global_index_more image {
 	width: 40rpx;
 	height: 40rpx;
 	align-items: center;
@@ -745,7 +798,8 @@ watch(headerHeight, (newHeight) => {
 .card_item {
 	width: 100%;
 	box-sizing: border-box;
-	min-width: 0; /* 防止内容溢出 */
+	min-width: 0;
+	/* 防止内容溢出 */
 }
 
 /* 响应式布局 - 小屏幕时改为两列 */
@@ -764,6 +818,70 @@ watch(headerHeight, (newHeight) => {
 	}
 }
 
+.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;
+}
+
+.warn image {
+	width: 40rpx;
+	height: 40rpx;
+	flex-shrink: 0;
+	/* 防止图片被压缩 */
+	position: relative;
+	z-index: 2;
+	/* 确保图片在最上层 */
+}
+
+.warn_text_container {
+	flex: 1;
+	overflow: hidden;
+	position: relative;
+	min-width: 0;
+	/* 允许容器收缩 */
+}
+
+.warn_text {
+	display: block;
+	white-space: nowrap;
+	will-change: transform;
+	/* 优化动画性能 */
+}
+
+/* 文字滚动动画 */
+@keyframes scrollText {
+	0% {
+		transform: translateX(0);
+	}
+
+	20% {
+		transform: translateX(0);
+	}
+
+	80% {
+		transform: translateX(-85%);
+	}
+
+	100% {
+		transform: translateX(-85%);
+	}
+}
+
+/* 当文字超长时启用滚动动画 */
+.warn_text.scroll-active {
+	animation: scrollText 12s linear infinite;
+	animation-delay: 2s;
+	/* 延迟2秒开始滚动，让用户先看到开头 */
+}
+
 /* 底部安全区域 */
 .bottom_safe_area {
 	height: 40rpx;
diff --git a/static/language/en.js b/static/language/en.js
index a0b3df8..e92df1d 100644
--- a/static/language/en.js
+++ b/static/language/en.js
@@ -14,5 +14,6 @@ export default {
 	marketSituation: {
 		globalIndex: 'Global Index',
 		globalIndexMore: 'View more',
+		warn: 'Global Index is still in testing phase, free to use, but has some limitations, please bear with us',
 	},
 }
\ No newline at end of file
diff --git a/static/language/ms.js b/static/language/ms.js
index 6cddb6e..387f75e 100644
--- a/static/language/ms.js
+++ b/static/language/ms.js
@@ -14,5 +14,6 @@ export default {
 	marketSituation: {
 		globalIndex: 'Indeks Global',
 		globalIndexMore: 'Lihat lebih banyak',
+		warn: 'Indeks Global masih dalam tahap uji coba, terbuka secara gratis, tetapi memiliki beberapa batasan, mohon maaf',
 	},
 }
\ No newline at end of file
diff --git a/static/language/th.js b/static/language/th.js
index fb11230..94530cf 100644
--- a/static/language/th.js
+++ b/static/language/th.js
@@ -14,5 +14,6 @@ export default {
 	marketSituation: {
 		globalIndex: 'Chỉ số toàn cầu',
 		globalIndexMore: 'Xem thêm',
+		warn: 'Chỉ số toàn cầu đang trong giai đoạn thử nghiệm, miễn phí mở rộng, có nhiều hạn chế xin lỗi',
 	},
 }
diff --git a/static/language/vi.js b/static/language/vi.js
index 3172318..e6464e9 100644
--- a/static/language/vi.js
+++ b/static/language/vi.js
@@ -14,5 +14,6 @@ export default {
 	marketSituation: {
 		globalIndex: 'Chỉ số toàn cầu',
 		globalIndexMore: 'Xem thêm',
+		warn: 'Chỉ số toàn cầu đang trong giai đoạn thử nghiệm, miễn phí mở rộng, có nhiều hạn chế xin lỗi',
 	},
 }
\ No newline at end of file
diff --git a/static/language/zh_CN.js b/static/language/zh_CN.js
index 292119f..6996584 100644
--- a/static/language/zh_CN.js
+++ b/static/language/zh_CN.js
@@ -15,5 +15,12 @@ export default {
 	marketSituation: {
 		globalIndex: '全球指数',
 		globalIndexMore: '查看更多',
+		warn: '全球指数为试运行，免费开放，有诸多不足请见谅111111111111111111122222222222222222222222222222222222222222223333',
+	},
+	globalIndex: {
+		title: '全球指数',
+		searchPlaceholder: '搜索指数名称',
+		indexList: '指数列表',
+		noData: '暂无数据',
 	},
 }
diff --git a/static/language/zh_HK.js b/static/language/zh_HK.js
index d00c6b2..71b17aa 100644
--- a/static/language/zh_HK.js
+++ b/static/language/zh_HK.js
@@ -15,5 +15,6 @@ export default {
 	marketSituation: {
 		globalIndex: '全球指数',
 		globalIndexMore: '查看更多',
+		warn: '全球指数为试运行，免费开放，有诸多不足请见谅',
 	},
 }
\ No newline at end of file
diff --git a/static/marketSituation-image/back.png b/static/marketSituation-image/back.png
new file mode 100644
index 0000000000000000000000000000000000000000..a85210719a726194aa9bc2c1bf29b293f7188891
GIT binary patch
literal 576
zcmV-G0>Ax<P)<h;3K|Lk000e1NJLTq000sI001Be1^@s6AABhB00001b5ch_0Itp)
z=>Px$`bk7VR7gvu)jenwK^O+$_nRLC19n%~q|hRLD!YhLECdlj3p*_q#&wIxAt({H
z5+S4-cK1XZIng3wVP|QjU?*5u3IXBl<hGEzoloW<$K{f{-Pvrt`|!^9GfOzZlO)Oc
zs;aI^Dc?|ACywKF=iDw4tpj)%45ewR27|!`03QH!0PIOA!=X5iH<>vDum<3(l=7Cf
zcE53=D2g-@U6fM32XLC1Un`{^TWkOL@-&8wF*k^47r^Q~(g^ByyDMc`-Xo$N{{b^U
z9S(<izuzxs8&#Xg7_%*e*ka}t=UlF}_Q&}*-|dA^k|bwFqtTWSA_Y)7=bmV-UmS-l
zJ(@A*84<;kmxy*cozC+#O~;Go?nt62iq0yfwgKD+@Y^|ex7X`^svF!xP?994s;YVm
z;2Hqm)<=1szpFzI9nBcCMnrzlHUaDt(d{hDzBECmkS}aiRet0*nE99AouVi{Hbo|o
zG3J~Q;w3X*0`Q%P?qpf^BLta1Q53BzrCtHJ!pz^4QkSi@e}f_a!R*nTbDw?Ni=y}$
zf=#<NQ|t|oX{~RDB%5#lwCJJ9jtpemWXJAWo0=_L+R$W6uaS^sP41(E)mhrjTBzxq
zHG(`=SF^@YU9uo(S+ZbgQL<LhTr&Ure$W~^NH!jiuPdeYP6W+fGyehccpuklq%SxC
O0000<MNUMnLSTZzegj+p

literal 0
HcmV?d00001