no99
4 weeks ago
5 changed files with 1492 additions and 1417 deletions
-
4components/IndexCard.vue
-
839pages/home/globalIndex.vue
-
54pages/home/marketCondition.vue
-
682pages/home/marketDetail.vue
-
1324pages/home/marketSituation.vue
@ -1,574 +1,579 @@ |
|||||
|
<!-- @format --> |
||||
|
|
||||
<template> |
<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> |
</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 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> |
</view> |
||||
|
|
||||
<!-- 底部导航栏 --> |
|
||||
<footerBar class="static-footer" :type="'marketSituation'"></footerBar> |
|
||||
|
<!-- 内容区域 --> |
||||
|
<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> |
||||
|
|
||||
|
<!-- 底部导航栏 --> |
||||
|
<footerBar class="static-footer" :type="'marketSituation'"></footerBar> |
||||
</template> |
</template> |
||||
|
|
||||
<script setup> |
<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"; |
||||
|
|
||||
// 响应式数据 |
// 响应式数据 |
||||
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计算属性 |
// warn文字的class计算属性 |
||||
const warnTextClass = computed(() => { |
const warnTextClass = computed(() => { |
||||
return isWarnTextOverflow.value ? 'warn_text scroll-active' : 'warn_text' |
|
||||
}) |
|
||||
|
return isWarnTextOverflow.value ? "warn_text scroll-active" : "warn_text"; |
||||
|
}); |
||||
|
|
||||
// 检测warn文字是否溢出 |
// 检测warn文字是否溢出 |
||||
const checkWarnTextOverflow = () => { |
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 asiachinaIndexes = ref([ |
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 |
|
||||
} |
|
||||
]) |
|
||||
|
{ |
||||
|
flagIcon: "/static/c1.png", |
||||
|
stockName: "上证指数", |
||||
|
stockCode: "1A0001", |
||||
|
currentPrice: "3933.96", |
||||
|
changeAmount: "+24.32", |
||||
|
changePercent: "+0.62%", |
||||
|
isRising: true, |
||||
|
}, |
||||
|
{ |
||||
|
flagIcon: "/static/c2.png", |
||||
|
stockName: "深证成指", |
||||
|
stockCode: "2A01", |
||||
|
currentPrice: "45757.90", |
||||
|
changeAmount: "-123.45", |
||||
|
changePercent: "-0.27%", |
||||
|
isRising: false, |
||||
|
}, |
||||
|
{ |
||||
|
flagIcon: "/static/c3.png", |
||||
|
stockName: "创业板指", |
||||
|
stockCode: "399006", |
||||
|
currentPrice: "6606.08", |
||||
|
changeAmount: "+89.76", |
||||
|
changePercent: "+1.38%", |
||||
|
isRising: true, |
||||
|
}, |
||||
|
{ |
||||
|
flagIcon: "/static/c4.png", |
||||
|
stockName: "沪深300", |
||||
|
stockCode: "1B0300", |
||||
|
currentPrice: "45757.90", |
||||
|
changeAmount: "-89.12", |
||||
|
changePercent: "-0.19%", |
||||
|
isRising: false, |
||||
|
}, |
||||
|
{ |
||||
|
flagIcon: "/static/c5.png", |
||||
|
stockName: "上证50", |
||||
|
stockCode: "1B0011", |
||||
|
currentPrice: "45757.90", |
||||
|
changeAmount: "+234.56", |
||||
|
changePercent: "+0.52%", |
||||
|
isRising: true, |
||||
|
}, |
||||
|
{ |
||||
|
flagIcon: "/static/c6.png", |
||||
|
stockName: "科创50", |
||||
|
stockCode: "1B0688", |
||||
|
currentPrice: "22333.96", |
||||
|
changeAmount: "+156.78", |
||||
|
changePercent: "+0.71%", |
||||
|
isRising: true, |
||||
|
}, |
||||
|
]); |
||||
|
|
||||
// 亚太指数数据 |
// 亚太指数数据 |
||||
const asiaIndexes = ref([ |
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 |
|
||||
} |
|
||||
]) |
|
||||
|
{ |
||||
|
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([ |
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 |
|
||||
} |
|
||||
]) |
|
||||
|
{ |
||||
|
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 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 = () => { |
const goBack = () => { |
||||
uni.navigateBack() |
|
||||
} |
|
||||
|
uni.navigateBack(); |
||||
|
}; |
||||
|
|
||||
// 方法：搜索输入 |
// 方法：搜索输入 |
||||
const onSearchInput = (e) => { |
const onSearchInput = (e) => { |
||||
searchValue.value = e.detail.value |
|
||||
} |
|
||||
|
searchValue.value = e.detail.value; |
||||
|
}; |
||||
|
|
||||
// 方法：清除搜索 |
// 方法：清除搜索 |
||||
const clearSearch = () => { |
const clearSearch = () => { |
||||
searchValue.value = '' |
|
||||
} |
|
||||
|
searchValue.value = ""; |
||||
|
}; |
||||
|
|
||||
// 方法：查看更多 |
// 方法：查看更多 |
||||
const viewMore = (market) => { |
const viewMore = (market) => { |
||||
console.log('查看更多:', market) |
|
||||
uni.navigateTo({ |
|
||||
url: `/pages/home/marketDetail?market=${market}` |
|
||||
}) |
|
||||
} |
|
||||
|
console.log("查看更多:", market); |
||||
|
uni.navigateTo({ |
||||
|
url: `/pages/home/marketDetail?market=${market}`, |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
// 方法：查看指数详情 |
// 方法：查看指数详情 |
||||
const viewIndexDetail = (item) => { |
const viewIndexDetail = (item) => { |
||||
console.log('查看指数详情:', item.indexName) |
|
||||
// uni.showToast({ |
|
||||
// title: `查看 ${item.indexName} 详情`, |
|
||||
// icon: 'none', |
|
||||
// duration: 2000 |
|
||||
// }) |
|
||||
// 这里可以跳转到具体的指数详情页面 |
|
||||
uni.navigateTo({ |
|
||||
url: `/pages/home/marketCondition` |
|
||||
}) |
|
||||
} |
|
||||
|
console.log("查看指数详情:", item.stockName); |
||||
|
// uni.showToast({ |
||||
|
// title: `查看 ${item.stockName} 详情`, |
||||
|
// icon: 'none', |
||||
|
// duration: 2000 |
||||
|
// }) |
||||
|
// 这里可以跳转到具体的指数详情页面 |
||||
|
uni.navigateTo({ |
||||
|
url: `/pages/home/marketCondition?stockInformation=${encodeURIComponent(JSON.stringify(item))}`, |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
// 生命周期：页面挂载 |
// 生命周期：页面挂载 |
||||
onMounted(() => { |
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() |
|
||||
}) |
|
||||
|
// 获取系统信息 |
||||
|
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 |
// 监听headerHeight变化，重新计算contentHeight |
||||
watch(headerHeight, (newHeight) => { |
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> |
</script> |
||||
|
|
||||
<style lang="scss" scoped> |
<style lang="scss" scoped> |
||||
.main { |
.main { |
||||
position: relative; |
|
||||
height: 100vh; |
|
||||
overflow: hidden; |
|
||||
background-color: #f5f5f5; |
|
||||
|
position: relative; |
||||
|
height: 100vh; |
||||
|
overflow: hidden; |
||||
|
background-color: #f5f5f5; |
||||
} |
} |
||||
|
|
||||
/* 状态栏占位 */ |
/* 状态栏占位 */ |
||||
.top { |
.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 { |
.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 { |
.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 { |
.header_back { |
||||
margin-right: 20rpx; |
|
||||
width: 25rpx; |
|
||||
height: 30rpx; |
|
||||
|
margin-right: 20rpx; |
||||
|
width: 25rpx; |
||||
|
height: 30rpx; |
||||
} |
} |
||||
|
|
||||
.header_back image { |
.header_back image { |
||||
width: 25rpx; |
|
||||
height: 30rpx; |
|
||||
|
width: 25rpx; |
||||
|
height: 30rpx; |
||||
} |
} |
||||
|
|
||||
.header_input_wrapper { |
.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 { |
.search_icon { |
||||
width: 40rpx; |
|
||||
height: 40rpx; |
|
||||
opacity: 0.6; |
|
||||
|
width: 40rpx; |
||||
|
height: 40rpx; |
||||
|
opacity: 0.6; |
||||
} |
} |
||||
|
|
||||
.header_input { |
.header_input { |
||||
margin-left: 10rpx; |
|
||||
|
margin-left: 10rpx; |
||||
} |
} |
||||
|
|
||||
.header_icons { |
.header_icons { |
||||
display: flex; |
|
||||
align-items: center; |
|
||||
gap: 15rpx; |
|
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 15rpx; |
||||
} |
} |
||||
|
|
||||
.header_icon { |
.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 { |
.header_icon image { |
||||
width: 40rpx; |
|
||||
height: 40rpx; |
|
||||
|
width: 40rpx; |
||||
|
height: 40rpx; |
||||
} |
} |
||||
|
|
||||
|
|
||||
.warn { |
.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 { |
.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 { |
.warn_text_container { |
||||
flex: 1; |
|
||||
overflow: hidden; |
|
||||
position: relative; |
|
||||
min-width: 0; |
|
||||
/* 允许容器收缩 */ |
|
||||
|
flex: 1; |
||||
|
overflow: hidden; |
||||
|
position: relative; |
||||
|
min-width: 0; |
||||
|
/* 允许容器收缩 */ |
||||
} |
} |
||||
|
|
||||
.warn_text { |
.warn_text { |
||||
display: block; |
|
||||
white-space: nowrap; |
|
||||
will-change: transform; |
|
||||
/* 优化动画性能 */ |
|
||||
|
display: block; |
||||
|
white-space: nowrap; |
||||
|
will-change: transform; |
||||
|
/* 优化动画性能 */ |
||||
} |
} |
||||
|
|
||||
/* 文字滚动动画 */ |
/* 文字滚动动画 */ |
||||
@keyframes scrollText { |
@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 { |
.warn_text.scroll-active { |
||||
animation: scrollText 12s linear infinite; |
|
||||
animation-delay: 2s; |
|
||||
/* 延迟2秒开始滚动，让用户先看到开头 */ |
|
||||
|
animation: scrollText 12s linear infinite; |
||||
|
animation-delay: 2s; |
||||
|
/* 延迟2秒开始滚动，让用户先看到开头 */ |
||||
} |
} |
||||
|
|
||||
/* 内容区域 */ |
/* 内容区域 */ |
||||
.content { |
.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 { |
.market-section { |
||||
background-color: white; |
|
||||
border-radius: 20rpx; |
|
||||
|
background-color: white; |
||||
|
border-radius: 20rpx; |
||||
} |
} |
||||
|
|
||||
.market-header { |
.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 { |
.market-title { |
||||
font-size: 32rpx; |
|
||||
font-weight: 600; |
|
||||
color: #333; |
|
||||
|
font-size: 32rpx; |
||||
|
font-weight: 600; |
||||
|
color: #333; |
||||
} |
} |
||||
|
|
||||
.market-more { |
.market-more { |
||||
display: flex; |
|
||||
align-items: center; |
|
||||
gap: 8rpx; |
|
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 8rpx; |
||||
} |
} |
||||
|
|
||||
.more-text { |
.more-text { |
||||
font-size: 24rpx; |
|
||||
color: #666; |
|
||||
|
font-size: 24rpx; |
||||
|
color: #666; |
||||
} |
} |
||||
|
|
||||
.more-arrow { |
.more-arrow { |
||||
font-size: 20rpx; |
|
||||
color: #666; |
|
||||
font-weight: bold; |
|
||||
|
font-size: 20rpx; |
||||
|
color: #666; |
||||
|
font-weight: bold; |
||||
} |
} |
||||
|
|
||||
/* 三列卡片网格 */ |
/* 三列卡片网格 */ |
||||
.cards-grid-three { |
.cards-grid-three { |
||||
display: grid; |
|
||||
grid-template-columns: repeat(3, 1fr); |
|
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(3, 1fr); |
||||
} |
} |
||||
|
|
||||
.card-item { |
.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 { |
.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 { |
.bottom-safe-area { |
||||
height: 40rpx; |
|
||||
background-color: transparent; |
|
||||
|
height: 40rpx; |
||||
|
background-color: transparent; |
||||
} |
} |
||||
|
|
||||
/* 底部导航栏 */ |
/* 底部导航栏 */ |
||||
.static-footer { |
.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) { |
@media (max-width: 400rpx) { |
||||
.cards-grid-three { |
|
||||
grid-template-columns: repeat(2, 1fr); |
|
||||
} |
|
||||
|
.cards-grid-three { |
||||
|
grid-template-columns: repeat(2, 1fr); |
||||
|
} |
||||
} |
} |
||||
</style> |
</style> |
||||
1324
pages/home/marketSituation.vue
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
Write
Preview
Loading…
Cancel
Save
Reference in new issue