地图市场

pages/marketSituation/marketOverview.vue

@@ -6,10 +6,10 @@
     <scroll-view class="content_scroll" scroll-y="true" :style="{ top: contentTopPosition + 'px' }">
       <view class="content">
         <view class="map">
-          <view class="INDU">道琼斯{{ judgeSymbol(INDU.value) }}</view>
-          <view class="NDX">纳斯达克{{ judgeSymbol(NDX.value) }}</view>
-          <view class="HSI">恒生指数{{ judgeSymbol(HSI.value) }}</view>
-          <view class="CN">上证指数{{ judgeSymbol(CN.value) }}</view>
+          <view class="INDU">道琼斯<view :class="getSignClass(INDU.value)">{{ judgeSymbol(INDU.value) }}</view></view>
+          <view class="NDX">纳斯达克<view :class="getSignClass(NDX.value)">{{ judgeSymbol(NDX.value) }}</view></view>
+          <view class="HSI">恒生指数<view :class="getSignClass(HSI.value)">{{ judgeSymbol(HSI.value) }}</view></view>
+          <view class="CN">上证指数<view :class="getSignClass(CN.value)">{{ judgeSymbol(CN.value) }}</view></view>
           <image src="/static/marketSituation-image/map.png" mode="widthFix"></image>
         </view>
         <view class="global_index">
@@ -90,6 +90,16 @@ const judgeSymbol = (num) => {
   return num[0] === "-" ? num : "+" + num;
 };
 
+function getSignClass(value) {
+  const s = typeof value === 'string' ? value : String(value ?? '');
+  const trimmed = s.trim();
+  if (trimmed.startsWith('-')) return 'index-down';
+  if (trimmed.startsWith('+')) return 'index-up';
+  const n = parseFloat(trimmed);
+  if (!isNaN(n)) return n >= 0 ? 'index-up' : 'index-down';
+  return '';
+}
+
 // 搜索输入事件
 const onSearchInput = (e) => {
   searchValue.value = e.detail.value;
@@ -785,6 +795,9 @@ watch(headerHeight, (newHeight) => {
   border-radius: 10rpx;
   background-color: #ffffff;
   z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .INDU {
   position: absolute;
@@ -797,11 +810,14 @@ watch(headerHeight, (newHeight) => {
   border-radius: 10rpx;
   background-color: #ffffff;
   z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .HSI {
   position: absolute;
   top: 30%;
-  right: 13%;
+  right: 4%;
   transform: translate(-50%, -50%);
   font-size: 11rpx;
   color: #000000;
@@ -809,11 +825,14 @@ watch(headerHeight, (newHeight) => {
   border-radius: 10rpx;
   background-color: #ffffff;
   z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .CN {
   position: absolute;
   top: 23%;
-  right: 16%;
+  right: 8%;
   transform: translate(-50%, -50%);
   font-size: 11rpx;
   color: #000000;
@@ -821,6 +840,9 @@ watch(headerHeight, (newHeight) => {
   border-radius: 10rpx;
   background-color: #ffffff;
   z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .map image {
@@ -1081,4 +1103,12 @@ watch(headerHeight, (newHeight) => {
   overflow: hidden;
   background-color: white;
 }
+
+.index-up {
+  color: #2fc25b !important;
+}
+
+.index-down {
+  color: #f04864 !important;
+}
 </style>