|
|
@ -6,6 +6,10 @@ |
|
|
<scroll-view class="content_scroll" scroll-y="true" :style="{ top: contentTopPosition + 'px' }"> |
|
|
<scroll-view class="content_scroll" scroll-y="true" :style="{ top: contentTopPosition + 'px' }"> |
|
|
<view class="content"> |
|
|
<view class="content"> |
|
|
<view class="map"> |
|
|
<view class="map"> |
|
|
|
|
|
<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> |
|
|
<image src="/static/marketSituation-image/map.png" mode="widthFix"></image> |
|
|
</view> |
|
|
</view> |
|
|
<view class="global_index"> |
|
|
<view class="global_index"> |
|
|
@ -60,6 +64,11 @@ const contentHeight = ref(0); |
|
|
const headerHeight = ref(0); // 动态计算的header高度 |
|
|
const headerHeight = ref(0); // 动态计算的header高度 |
|
|
const isWarnTextOverflow = ref(false); // warn文字是否溢出 |
|
|
const isWarnTextOverflow = ref(false); // warn文字是否溢出 |
|
|
|
|
|
|
|
|
|
|
|
const INDU = ref({ stockName: "道琼斯", stockCode: "INDU", value: "" }); |
|
|
|
|
|
const NDX = ref({ stockName: "纳斯达克", stockCode: "513300", value: "" }); |
|
|
|
|
|
const HSI = ref({ stockName: "恒生指数", stockCode: "HSI", value: "" }); |
|
|
|
|
|
const CN = ref({ stockName: "上证指数", stockCode: "1A0001", value: "" }); |
|
|
|
|
|
|
|
|
const pageIndex = ref(0); |
|
|
const pageIndex = ref(0); |
|
|
const scrollToView = ref(""); |
|
|
const scrollToView = ref(""); |
|
|
|
|
|
|
|
|
@ -77,6 +86,20 @@ const warnTextClass = computed(() => { |
|
|
|
|
|
|
|
|
const globalIndexArray = ref([]); |
|
|
const globalIndexArray = ref([]); |
|
|
|
|
|
|
|
|
|
|
|
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) => { |
|
|
const onSearchInput = (e) => { |
|
|
searchValue.value = e.detail.value; |
|
|
searchValue.value = e.detail.value; |
|
|
@ -360,6 +383,27 @@ const parseStockData = (message) => { |
|
|
changePercent: ((100 * (stockDataArray[item.stockCode][0].current_price - stockDataArray[item.stockCode][0].pre_close)) / stockDataArray[item.stockCode][0].pre_close).toFixed(2) + "%", |
|
|
changePercent: ((100 * (stockDataArray[item.stockCode][0].current_price - stockDataArray[item.stockCode][0].pre_close)) / stockDataArray[item.stockCode][0].pre_close).toFixed(2) + "%", |
|
|
isRising: stockDataArray[item.stockCode][0].current_price - stockDataArray[item.stockCode][0].pre_close >= 0, |
|
|
isRising: stockDataArray[item.stockCode][0].current_price - stockDataArray[item.stockCode][0].pre_close >= 0, |
|
|
})); |
|
|
})); |
|
|
|
|
|
|
|
|
|
|
|
if (stockDataArray[INDU.value.stockCode][0]) { |
|
|
|
|
|
INDU.value.value = ((100 * (stockDataArray[INDU.value.stockCode][0].current_price - stockDataArray[INDU.value.stockCode][0].pre_close)) / stockDataArray[INDU.value.stockCode][0].pre_close).toFixed(2) + "%"; |
|
|
|
|
|
} else { |
|
|
|
|
|
console.log("INDU不存在"); |
|
|
|
|
|
} |
|
|
|
|
|
if (stockDataArray[NDX.value.stockCode][0]) { |
|
|
|
|
|
NDX.value.value = ((100 * (stockDataArray[NDX.value.stockCode][0].current_price - stockDataArray[NDX.value.stockCode][0].pre_close)) / stockDataArray[NDX.value.stockCode][0].pre_close).toFixed(2) + "%"; |
|
|
|
|
|
} else { |
|
|
|
|
|
console.log("NDX不存在"); |
|
|
|
|
|
} |
|
|
|
|
|
if (stockDataArray[HSI.value.stockCode][0]) { |
|
|
|
|
|
HSI.value.value = ((100 * (stockDataArray[HSI.value.stockCode][0].current_price - stockDataArray[HSI.value.stockCode][0].pre_close)) / stockDataArray[HSI.value.stockCode][0].pre_close).toFixed(2) + "%"; |
|
|
|
|
|
} else { |
|
|
|
|
|
console.log("HSI不存在"); |
|
|
|
|
|
} |
|
|
|
|
|
if (stockDataArray[CN.value.stockCode][0]) { |
|
|
|
|
|
CN.value.value = ((100 * (stockDataArray[CN.value.stockCode][0].current_price - stockDataArray[CN.value.stockCode][0].pre_close)) / stockDataArray[CN.value.stockCode][0].pre_close).toFixed(2) + "%"; |
|
|
|
|
|
} else { |
|
|
|
|
|
console.log("CN不存在"); |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} else if ((typeof message === "string" && message.includes('{"count')) || isMorePacket.batch_real_time) { |
|
|
} else if ((typeof message === "string" && message.includes('{"count')) || isMorePacket.batch_real_time) { |
|
|
if (typeof message === "string" && message.includes('{"count')) { |
|
|
if (typeof message === "string" && message.includes('{"count')) { |
|
|
@ -406,6 +450,27 @@ const parseStockData = (message) => { |
|
|
changePercent: ((100 * (stockDataArray[item.stockCode][0].current_price - stockDataArray[item.stockCode][0].pre_close)) / stockDataArray[item.stockCode][0].pre_close).toFixed(2) + "%", |
|
|
changePercent: ((100 * (stockDataArray[item.stockCode][0].current_price - stockDataArray[item.stockCode][0].pre_close)) / stockDataArray[item.stockCode][0].pre_close).toFixed(2) + "%", |
|
|
isRising: stockDataArray[item.stockCode][0].current_price - stockDataArray[item.stockCode][0].pre_close >= 0, |
|
|
isRising: stockDataArray[item.stockCode][0].current_price - stockDataArray[item.stockCode][0].pre_close >= 0, |
|
|
})); |
|
|
})); |
|
|
|
|
|
|
|
|
|
|
|
if (stockDataArray[INDU.value.stockCode][0]) { |
|
|
|
|
|
INDU.value.value = ((100 * (stockDataArray[INDU.value.stockCode][0].current_price - stockDataArray[INDU.value.stockCode][0].pre_close)) / stockDataArray[INDU.value.stockCode][0].pre_close).toFixed(2) + "%"; |
|
|
|
|
|
} else { |
|
|
|
|
|
console.log("INDU不存在"); |
|
|
|
|
|
} |
|
|
|
|
|
if (stockDataArray[NDX.value.stockCode][0]) { |
|
|
|
|
|
NDX.value.value = ((100 * (stockDataArray[NDX.value.stockCode][0].current_price - stockDataArray[NDX.value.stockCode][0].pre_close)) / stockDataArray[NDX.value.stockCode][0].pre_close).toFixed(2) + "%"; |
|
|
|
|
|
} else { |
|
|
|
|
|
console.log("NDX不存在"); |
|
|
|
|
|
} |
|
|
|
|
|
if (stockDataArray[HSI.value.stockCode][0]) { |
|
|
|
|
|
HSI.value.value = ((100 * (stockDataArray[HSI.value.stockCode][0].current_price - stockDataArray[HSI.value.stockCode][0].pre_close)) / stockDataArray[HSI.value.stockCode][0].pre_close).toFixed(2) + "%"; |
|
|
|
|
|
} else { |
|
|
|
|
|
console.log("HSI不存在"); |
|
|
|
|
|
} |
|
|
|
|
|
if (stockDataArray[CN.value.stockCode][0]) { |
|
|
|
|
|
CN.value.value = ((100 * (stockDataArray[CN.value.stockCode][0].current_price - stockDataArray[CN.value.stockCode][0].pre_close)) / stockDataArray[CN.value.stockCode][0].pre_close).toFixed(2) + "%"; |
|
|
|
|
|
} else { |
|
|
|
|
|
console.log("CN不存在"); |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} else { |
|
|
} else { |
|
|
// 没有通过JSON解析判断,说明不是需要的数据 |
|
|
// 没有通过JSON解析判断,说明不是需要的数据 |
|
|
@ -719,6 +784,67 @@ watch(headerHeight, (newHeight) => { |
|
|
min-height: 200rpx; |
|
|
min-height: 200rpx; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.NDX { |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
top: 30%; |
|
|
|
|
|
left: 17%; |
|
|
|
|
|
transform: translate(-50%, -50%); |
|
|
|
|
|
font-size: 11rpx; |
|
|
|
|
|
color: #000000; |
|
|
|
|
|
padding: 5rpx 10rpx; |
|
|
|
|
|
border-radius: 10rpx; |
|
|
|
|
|
background-color: #ffffff; |
|
|
|
|
|
z-index: 10; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
justify-content: center; |
|
|
|
|
|
} |
|
|
|
|
|
.INDU { |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
top: 22%; |
|
|
|
|
|
left: 35%; |
|
|
|
|
|
transform: translate(-50%, -50%); |
|
|
|
|
|
font-size: 11rpx; |
|
|
|
|
|
color: #000000; |
|
|
|
|
|
padding: 5rpx 10rpx; |
|
|
|
|
|
border-radius: 10rpx; |
|
|
|
|
|
background-color: #ffffff; |
|
|
|
|
|
z-index: 10; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
justify-content: center; |
|
|
|
|
|
} |
|
|
|
|
|
.HSI { |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
top: 30%; |
|
|
|
|
|
right: 4%; |
|
|
|
|
|
transform: translate(-50%, -50%); |
|
|
|
|
|
font-size: 11rpx; |
|
|
|
|
|
color: #000000; |
|
|
|
|
|
padding: 5rpx 10rpx; |
|
|
|
|
|
border-radius: 10rpx; |
|
|
|
|
|
background-color: #ffffff; |
|
|
|
|
|
z-index: 10; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
justify-content: center; |
|
|
|
|
|
} |
|
|
|
|
|
.CN { |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
top: 23%; |
|
|
|
|
|
right: 8%; |
|
|
|
|
|
transform: translate(-50%, -50%); |
|
|
|
|
|
font-size: 11rpx; |
|
|
|
|
|
color: #000000; |
|
|
|
|
|
padding: 5rpx 10rpx; |
|
|
|
|
|
border-radius: 10rpx; |
|
|
|
|
|
background-color: #ffffff; |
|
|
|
|
|
z-index: 10; |
|
|
|
|
|
display: flex; |
|
|
|
|
|
align-items: center; |
|
|
|
|
|
justify-content: center; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
.map image { |
|
|
.map image { |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
height: auto; |
|
|
height: auto; |
|
|
@ -848,8 +974,8 @@ watch(headerHeight, (newHeight) => { |
|
|
.global_index_title { |
|
|
.global_index_title { |
|
|
margin-left: 20rpx; |
|
|
margin-left: 20rpx; |
|
|
font-size: 40rpx; |
|
|
font-size: 40rpx; |
|
|
font-weight: 100; |
|
|
|
|
|
color: #333333; |
|
|
|
|
|
|
|
|
font-weight: bold; |
|
|
|
|
|
color: black; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@ -977,4 +1103,12 @@ watch(headerHeight, (newHeight) => { |
|
|
overflow: hidden; |
|
|
overflow: hidden; |
|
|
background-color: white; |
|
|
background-color: white; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.index-up { |
|
|
|
|
|
color: #2fc25b !important; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.index-down { |
|
|
|
|
|
color: #f04864 !important; |
|
|
|
|
|
} |
|
|
</style> |
|
|
</style> |