|
@@ -1,41 +1,48 @@
|
|
|
<template>
|
|
<template>
|
|
|
<view class="page-container">
|
|
<view class="page-container">
|
|
|
|
|
+ <!-- 遮罩层 -->
|
|
|
|
|
+ <view v-if="showDropdown && suggestions.length > 0" class="mask" @click="closeDropdown"></view>
|
|
|
|
|
+
|
|
|
<scroll-view class="scroll-view" scroll-y>
|
|
<scroll-view class="scroll-view" scroll-y>
|
|
|
<view class="content-wrapper">
|
|
<view class="content-wrapper">
|
|
|
|
|
|
|
|
<!-- 顶部查询卡片 -->
|
|
<!-- 顶部查询卡片 -->
|
|
|
- <view class="card search-card" style="position: relative; z-index: 100;">
|
|
|
|
|
|
|
+ <view class="card search-card">
|
|
|
<text class="card-title">量化分数实时查询 & 历史数据</text>
|
|
<text class="card-title">量化分数实时查询 & 历史数据</text>
|
|
|
|
|
|
|
|
- <view class="search-row">
|
|
|
|
|
- <input
|
|
|
|
|
- class="search-input"
|
|
|
|
|
- type="text"
|
|
|
|
|
- placeholder="请输入股票代码/名称 (如: 600030)"
|
|
|
|
|
- placeholder-class="search-placeholder"
|
|
|
|
|
- confirm-type="search"
|
|
|
|
|
- v-model="keyword"
|
|
|
|
|
- @input="onKeywordChange"
|
|
|
|
|
- @confirm="handleSearchClick"
|
|
|
|
|
- @blur="onInputBlur"
|
|
|
|
|
- />
|
|
|
|
|
- <!-- 搜索按钮(统一处理登录检查) -->
|
|
|
|
|
- <view class="search-button" @click="handleSearchClick">
|
|
|
|
|
- <image class="search-icon" src="/static/images/tab_search.png" mode="aspectFit"></image>
|
|
|
|
|
|
|
+ <view class="search-box">
|
|
|
|
|
+ <view class="search-input-wrap">
|
|
|
|
|
+ <input
|
|
|
|
|
+ class="search-input"
|
|
|
|
|
+ type="text"
|
|
|
|
|
+ placeholder="请输入股票代码/名称 (如: 600030)"
|
|
|
|
|
+ v-model="keyword"
|
|
|
|
|
+ @input="onKeywordChange"
|
|
|
|
|
+ @confirm="handleSearchClick"
|
|
|
|
|
+ @focus="onInputFocus"
|
|
|
|
|
+ />
|
|
|
|
|
+ <view class="search-button" @click="handleSearchClick">
|
|
|
|
|
+ <image class="search-icon" src="/static/images/tab_search.png" mode="aspectFit"></image>
|
|
|
|
|
+ </view>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
- <!-- 模糊搜索下拉列表 -->
|
|
|
|
|
- <view class="search-dropdown" v-if="showDropdown && suggestions && suggestions.length > 0">
|
|
|
|
|
|
|
+ <!-- 搜索建议下拉 -->
|
|
|
|
|
+ <view v-if="showDropdown && suggestions.length > 0" class="suggestions-dropdown">
|
|
|
<view
|
|
<view
|
|
|
v-for="(item, index) in suggestions"
|
|
v-for="(item, index) in suggestions"
|
|
|
:key="index"
|
|
:key="index"
|
|
|
- class="dropdown-item"
|
|
|
|
|
- hover-class="dropdown-item-hover"
|
|
|
|
|
- @tap.stop="onSelectSuggestion(item)"
|
|
|
|
|
|
|
+ class="suggestion-item"
|
|
|
|
|
+ @click="onSelectSuggestion(item)"
|
|
|
>
|
|
>
|
|
|
- <text class="item-name">{{item.name}}</text>
|
|
|
|
|
- <text class="item-code">{{item.code}}</text>
|
|
|
|
|
|
|
+ <text class="suggestion-name">{{ item.name }}</text>
|
|
|
|
|
+ <text class="suggestion-code">{{ item.code }}</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <view v-if="showDropdown && searching" class="suggestions-dropdown">
|
|
|
|
|
+ <view class="suggestion-loading">
|
|
|
|
|
+ <text>搜索中...</text>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
@@ -51,7 +58,6 @@
|
|
|
<text class="result-error">{{errorMsg}}</text>
|
|
<text class="result-error">{{errorMsg}}</text>
|
|
|
</view>
|
|
</view>
|
|
|
<view v-else-if="result">
|
|
<view v-else-if="result">
|
|
|
- <!-- 头部:名称 / 代码 / 实时价格 -->
|
|
|
|
|
<view class="detail-header">
|
|
<view class="detail-header">
|
|
|
<view class="stock-info-left">
|
|
<view class="stock-info-left">
|
|
|
<view class="detail-name">{{result.stockName}}</view>
|
|
<view class="detail-name">{{result.stockName}}</view>
|
|
@@ -67,7 +73,6 @@
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
- <!-- 实时行情数据 -->
|
|
|
|
|
<view class="quote-section" v-if="result.currentPrice">
|
|
<view class="quote-section" v-if="result.currentPrice">
|
|
|
<view class="quote-grid">
|
|
<view class="quote-grid">
|
|
|
<view class="quote-item">
|
|
<view class="quote-item">
|
|
@@ -97,7 +102,6 @@
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
- <!-- 量化评分(如果有) -->
|
|
|
|
|
<view class="section" v-if="result.score">
|
|
<view class="section" v-if="result.score">
|
|
|
<view class="section-title">量化系统评分</view>
|
|
<view class="section-title">量化系统评分</view>
|
|
|
<view class="score-display">
|
|
<view class="score-display">
|
|
@@ -105,10 +109,9 @@
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
- <!-- 历史评分趋势 -->
|
|
|
|
|
<view class="section" v-if="result.history && result.history.length > 0">
|
|
<view class="section" v-if="result.history && result.history.length > 0">
|
|
|
<view class="section-title">历史评分趋势</view>
|
|
<view class="section-title">历史评分趋势</view>
|
|
|
- <view class="history-row" v-for="(item, index) in result.history" :key="index">
|
|
|
|
|
|
|
+ <view class="history-row" v-for="(item, idx) in result.history" :key="idx">
|
|
|
<text class="history-date">{{item.date}} 的量化评分:</text>
|
|
<text class="history-date">{{item.date}} 的量化评分:</text>
|
|
|
<text :class="['history-score', item.score >= 90 ? 'tag-danger' : (item.score >= 80 ? 'tag-success' : 'tag-info')]">
|
|
<text :class="['history-score', item.score >= 90 ? 'tag-danger' : (item.score >= 80 ? 'tag-success' : 'tag-info')]">
|
|
|
{{item.score}}
|
|
{{item.score}}
|
|
@@ -117,10 +120,9 @@
|
|
|
<text class="history-note">(注意:此为模拟历史数据,仅供展示。)</text>
|
|
<text class="history-note">(注意:此为模拟历史数据,仅供展示。)</text>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
- <!-- 评分因子构成 -->
|
|
|
|
|
<view class="section" v-if="result.factors && result.factors.length > 0">
|
|
<view class="section" v-if="result.factors && result.factors.length > 0">
|
|
|
<view class="section-title">评分因子构成</view>
|
|
<view class="section-title">评分因子构成</view>
|
|
|
- <view class="factor-row" v-for="(item, index) in result.factors" :key="index">
|
|
|
|
|
|
|
+ <view class="factor-row" v-for="(item, idx) in result.factors" :key="idx">
|
|
|
<text class="factor-name">{{item.name}}</text>
|
|
<text class="factor-name">{{item.name}}</text>
|
|
|
<text class="factor-score">{{item.value}}</text>
|
|
<text class="factor-score">{{item.value}}</text>
|
|
|
</view>
|
|
</view>
|
|
@@ -136,7 +138,6 @@
|
|
|
</view>
|
|
</view>
|
|
|
<text class="card-header-title">量化投资的优势</text>
|
|
<text class="card-header-title">量化投资的优势</text>
|
|
|
</view>
|
|
</view>
|
|
|
-
|
|
|
|
|
<view class="advantage-item">
|
|
<view class="advantage-item">
|
|
|
<text class="advantage-label">客观纪律性:</text>
|
|
<text class="advantage-label">客观纪律性:</text>
|
|
|
<text class="advantage-desc">排除情绪干扰,严格执行预设的交易信号。</text>
|
|
<text class="advantage-desc">排除情绪干扰,严格执行预设的交易信号。</text>
|
|
@@ -147,7 +148,7 @@
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
- <!-- 风险提示(免责声明) -->
|
|
|
|
|
|
|
+ <!-- 风险提示 -->
|
|
|
<view class="card risk-card">
|
|
<view class="card risk-card">
|
|
|
<view class="card-header">
|
|
<view class="card-header">
|
|
|
<view class="icon-warning">
|
|
<view class="icon-warning">
|
|
@@ -155,14 +156,12 @@
|
|
|
</view>
|
|
</view>
|
|
|
<text class="card-header-title">风险提示(免责声明)</text>
|
|
<text class="card-header-title">风险提示(免责声明)</text>
|
|
|
</view>
|
|
</view>
|
|
|
-
|
|
|
|
|
<text class="risk-text">
|
|
<text class="risk-text">
|
|
|
本系统的量化分数和股票池信息均基于历史数据和特定模型计算,并非对未来市场的保证或预测。市场环境瞬息万变,
|
|
本系统的量化分数和股票池信息均基于历史数据和特定模型计算,并非对未来市场的保证或预测。市场环境瞬息万变,
|
|
|
量化模型可能存在失效或回撤风险。请勿将本系统数据作为投资决策的唯一依据,请您充分理解股票投资风险,并独立做出投资判断。
|
|
量化模型可能存在失效或回撤风险。请勿将本系统数据作为投资决策的唯一依据,请您充分理解股票投资风险,并独立做出投资判断。
|
|
|
</text>
|
|
</text>
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
- <!-- 预留底部空间,避免被 tabBar 遮挡 -->
|
|
|
|
|
<view class="bottom-safe-area"></view>
|
|
<view class="bottom-safe-area"></view>
|
|
|
</view>
|
|
</view>
|
|
|
</scroll-view>
|
|
</scroll-view>
|
|
@@ -173,9 +172,7 @@
|
|
|
import { ref, onMounted } from 'vue'
|
|
import { ref, onMounted } from 'vue'
|
|
|
import { getSuggestions, searchStocks } from '../../utils/api.js'
|
|
import { getSuggestions, searchStocks } from '../../utils/api.js'
|
|
|
import { isLoggedIn as checkLoginStatus } from '../../utils/auth.js'
|
|
import { isLoggedIn as checkLoginStatus } from '../../utils/auth.js'
|
|
|
-
|
|
|
|
|
-// 引入 onShow 生命周期
|
|
|
|
|
-import { onShow } from '@dcloudio/uni-app'
|
|
|
|
|
|
|
+import { onShow, onHide } from '@dcloudio/uni-app'
|
|
|
|
|
|
|
|
const keyword = ref('')
|
|
const keyword = ref('')
|
|
|
const loading = ref(false)
|
|
const loading = ref(false)
|
|
@@ -184,120 +181,105 @@ const errorMsg = ref('')
|
|
|
const result = ref(null)
|
|
const result = ref(null)
|
|
|
const suggestions = ref([])
|
|
const suggestions = ref([])
|
|
|
const showDropdown = ref(false)
|
|
const showDropdown = ref(false)
|
|
|
|
|
+const searching = ref(false)
|
|
|
const isLoggedIn = ref(false)
|
|
const isLoggedIn = ref(false)
|
|
|
-let timer = null
|
|
|
|
|
|
|
+let searchTimer = null
|
|
|
|
|
|
|
|
-/**
|
|
|
|
|
- * 页面加载时检查登录状态
|
|
|
|
|
- */
|
|
|
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
|
isLoggedIn.value = checkLoginStatus()
|
|
isLoggedIn.value = checkLoginStatus()
|
|
|
- console.log('[首页] 登录状态:', isLoggedIn.value)
|
|
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
-/**
|
|
|
|
|
- * 页面显示时检查登录状态(从登录页返回时会触发)
|
|
|
|
|
- */
|
|
|
|
|
onShow(() => {
|
|
onShow(() => {
|
|
|
isLoggedIn.value = checkLoginStatus()
|
|
isLoggedIn.value = checkLoginStatus()
|
|
|
- // 设置导航栏标题
|
|
|
|
|
uni.setNavigationBarTitle({ title: '量化交易大师' })
|
|
uni.setNavigationBarTitle({ title: '量化交易大师' })
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
-/**
|
|
|
|
|
- * 处理搜索按钮点击(统一登录校验UI)
|
|
|
|
|
- */
|
|
|
|
|
-const handleSearchClick = async () => {
|
|
|
|
|
- console.log('=== 点击搜索按钮 ===')
|
|
|
|
|
- console.log('当前登录状态:', isLoggedIn.value)
|
|
|
|
|
-
|
|
|
|
|
- // 检查登录状态
|
|
|
|
|
- if (!isLoggedIn.value) {
|
|
|
|
|
- console.log('未登录,跳转到登录页')
|
|
|
|
|
- uni.showModal({
|
|
|
|
|
- title: '登录提示',
|
|
|
|
|
- content: '此功能需要登录后使用,是否前往登录?',
|
|
|
|
|
- confirmText: '去登录',
|
|
|
|
|
- cancelText: '取消',
|
|
|
|
|
- success: (res) => {
|
|
|
|
|
- if (res.confirm) {
|
|
|
|
|
- uni.navigateTo({
|
|
|
|
|
- url: '/pages/login/login'
|
|
|
|
|
- })
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- })
|
|
|
|
|
- return
|
|
|
|
|
|
|
+onHide(() => {
|
|
|
|
|
+ showDropdown.value = false
|
|
|
|
|
+})
|
|
|
|
|
+
|
|
|
|
|
+const onInputFocus = () => {
|
|
|
|
|
+ if (suggestions.value.length > 0) {
|
|
|
|
|
+ showDropdown.value = true
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
- console.log('已登录,执行搜索')
|
|
|
|
|
- // 已登录,执行搜索
|
|
|
|
|
- onSearch()
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
const onKeywordChange = (e) => {
|
|
const onKeywordChange = (e) => {
|
|
|
const value = e.detail.value
|
|
const value = e.detail.value
|
|
|
keyword.value = value
|
|
keyword.value = value
|
|
|
- console.log('输入关键词:', value)
|
|
|
|
|
|
|
|
|
|
- if (timer) {
|
|
|
|
|
- clearTimeout(timer)
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ if (searchTimer) clearTimeout(searchTimer)
|
|
|
|
|
|
|
|
- timer = setTimeout(() => {
|
|
|
|
|
- doSearchSuggestions(value)
|
|
|
|
|
- }, 500)
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-const doSearchSuggestions = async (kw) => {
|
|
|
|
|
- if (!kw || !kw.trim()) {
|
|
|
|
|
|
|
+ if (!value || !value.trim()) {
|
|
|
suggestions.value = []
|
|
suggestions.value = []
|
|
|
showDropdown.value = false
|
|
showDropdown.value = false
|
|
|
return
|
|
return
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+ searching.value = true
|
|
|
|
|
+ showDropdown.value = true
|
|
|
|
|
+
|
|
|
|
|
+ searchTimer = setTimeout(async () => {
|
|
|
|
|
+ try {
|
|
|
|
|
+ const response = await getSuggestions(value.trim())
|
|
|
|
|
+ if (response.code === 200 && response.data) {
|
|
|
|
|
+ suggestions.value = Array.isArray(response.data) ? response.data : []
|
|
|
|
|
+ } else {
|
|
|
|
|
+ suggestions.value = []
|
|
|
|
|
+ }
|
|
|
|
|
+ } catch (err) {
|
|
|
|
|
+ console.error('搜索建议错误:', err)
|
|
|
|
|
+ suggestions.value = []
|
|
|
|
|
+ } finally {
|
|
|
|
|
+ searching.value = false
|
|
|
|
|
+ }
|
|
|
|
|
+ }, 300)
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
- try {
|
|
|
|
|
- // getSuggestions 返回完整响应对象 {code, message, data}
|
|
|
|
|
- const response = await getSuggestions(kw.trim())
|
|
|
|
|
- console.log('模糊查询返回数据:', response)
|
|
|
|
|
-
|
|
|
|
|
- // 从响应中提取 data 数组
|
|
|
|
|
- const list = (response.code === 200 && response.data) ? response.data : []
|
|
|
|
|
- suggestions.value = Array.isArray(list) ? list : []
|
|
|
|
|
- showDropdown.value = suggestions.value.length > 0
|
|
|
|
|
- console.log('下拉框状态:', { showDropdown: showDropdown.value, suggestionsLength: suggestions.value.length })
|
|
|
|
|
- } catch (err) {
|
|
|
|
|
- console.error('模糊查询错误:', err)
|
|
|
|
|
- suggestions.value = []
|
|
|
|
|
- showDropdown.value = false
|
|
|
|
|
- }
|
|
|
|
|
|
|
+const closeDropdown = () => {
|
|
|
|
|
+ showDropdown.value = false
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
const onSelectSuggestion = (item) => {
|
|
const onSelectSuggestion = (item) => {
|
|
|
- const searchText = `${item.name} (${item.code})`
|
|
|
|
|
- keyword.value = searchText
|
|
|
|
|
|
|
+ keyword.value = `${item.name} (${item.code})`
|
|
|
suggestions.value = []
|
|
suggestions.value = []
|
|
|
showDropdown.value = false
|
|
showDropdown.value = false
|
|
|
-
|
|
|
|
|
doSearch(item.code)
|
|
doSearch(item.code)
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+const handleSearchClick = () => {
|
|
|
|
|
+ if (!isLoggedIn.value) {
|
|
|
|
|
+ uni.showModal({
|
|
|
|
|
+ title: '登录提示',
|
|
|
|
|
+ content: '此功能需要登录后使用,是否前往登录?',
|
|
|
|
|
+ confirmText: '去登录',
|
|
|
|
|
+ cancelText: '取消',
|
|
|
|
|
+ success: (res) => {
|
|
|
|
|
+ if (res.confirm) {
|
|
|
|
|
+ uni.navigateTo({ url: '/pages/login/login' })
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+ onSearch()
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
const onSearch = () => {
|
|
const onSearch = () => {
|
|
|
const kw = (keyword.value || '').trim()
|
|
const kw = (keyword.value || '').trim()
|
|
|
if (!kw) {
|
|
if (!kw) {
|
|
|
- uni.showToast({
|
|
|
|
|
- title: '请输入股票代码或名称',
|
|
|
|
|
- icon: 'none'
|
|
|
|
|
- })
|
|
|
|
|
|
|
+ uni.showToast({ title: '请输入股票代码或名称', icon: 'none' })
|
|
|
return
|
|
return
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
|
|
+ showDropdown.value = false
|
|
|
|
|
+ suggestions.value = []
|
|
|
|
|
+
|
|
|
let searchCode = kw
|
|
let searchCode = kw
|
|
|
const codeMatch = kw.match(/\((\d{6})\)/)
|
|
const codeMatch = kw.match(/\((\d{6})\)/)
|
|
|
if (codeMatch) {
|
|
if (codeMatch) {
|
|
|
searchCode = codeMatch[1]
|
|
searchCode = codeMatch[1]
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
doSearch(searchCode)
|
|
doSearch(searchCode)
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -306,8 +288,8 @@ const doSearch = async (queryCode) => {
|
|
|
hasSearched.value = true
|
|
hasSearched.value = true
|
|
|
errorMsg.value = ''
|
|
errorMsg.value = ''
|
|
|
result.value = null
|
|
result.value = null
|
|
|
- suggestions.value = []
|
|
|
|
|
showDropdown.value = false
|
|
showDropdown.value = false
|
|
|
|
|
+ suggestions.value = []
|
|
|
|
|
|
|
|
try {
|
|
try {
|
|
|
const res = await searchStocks(queryCode)
|
|
const res = await searchStocks(queryCode)
|
|
@@ -323,16 +305,6 @@ const doSearch = async (queryCode) => {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-const onInputBlur = () => {
|
|
|
|
|
- // 延迟关闭,给点击下拉项留出时间
|
|
|
|
|
- setTimeout(() => {
|
|
|
|
|
- showDropdown.value = false
|
|
|
|
|
- }, 300)
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-/**
|
|
|
|
|
- * 根据涨跌幅返回样式类
|
|
|
|
|
- */
|
|
|
|
|
const getPriceClass = (changePercent) => {
|
|
const getPriceClass = (changePercent) => {
|
|
|
if (!changePercent) return ''
|
|
if (!changePercent) return ''
|
|
|
if (changePercent.startsWith('+')) return 'price-up'
|
|
if (changePercent.startsWith('+')) return 'price-up'
|
|
@@ -341,9 +313,7 @@ const getPriceClass = (changePercent) => {
|
|
|
}
|
|
}
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
-<style>
|
|
|
|
|
-/** 首页量化查询界面样式 **/
|
|
|
|
|
-
|
|
|
|
|
|
|
+<style scoped>
|
|
|
.page-container {
|
|
.page-container {
|
|
|
height: 100vh;
|
|
height: 100vh;
|
|
|
display: flex;
|
|
display: flex;
|
|
@@ -360,18 +330,30 @@ const getPriceClass = (changePercent) => {
|
|
|
padding: 32rpx 32rpx 48rpx;
|
|
padding: 32rpx 32rpx 48rpx;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+/* 遮罩层 */
|
|
|
|
|
+.mask {
|
|
|
|
|
+ position: fixed;
|
|
|
|
|
+ top: 0;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ right: 0;
|
|
|
|
|
+ bottom: 0;
|
|
|
|
|
+ background: rgba(0, 0, 0, 0.3);
|
|
|
|
|
+ z-index: 99;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
.card {
|
|
.card {
|
|
|
background: #ffffff;
|
|
background: #ffffff;
|
|
|
border-radius: 24rpx;
|
|
border-radius: 24rpx;
|
|
|
padding: 32rpx 32rpx 36rpx;
|
|
padding: 32rpx 32rpx 36rpx;
|
|
|
box-shadow: 0 16rpx 40rpx rgba(37, 52, 94, 0.08);
|
|
box-shadow: 0 16rpx 40rpx rgba(37, 52, 94, 0.08);
|
|
|
margin-bottom: 32rpx;
|
|
margin-bottom: 32rpx;
|
|
|
- position: relative;
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+/* 搜索卡片 - 关键:设置 z-index 和 position */
|
|
|
.search-card {
|
|
.search-card {
|
|
|
margin-top: 16rpx;
|
|
margin-top: 16rpx;
|
|
|
- z-index: 10;
|
|
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ z-index: 100;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.card-title {
|
|
.card-title {
|
|
@@ -382,7 +364,11 @@ const getPriceClass = (changePercent) => {
|
|
|
margin-bottom: 32rpx;
|
|
margin-bottom: 32rpx;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-.search-row {
|
|
|
|
|
|
|
+.search-box {
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.search-input-wrap {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
background: #f7f8fc;
|
|
background: #f7f8fc;
|
|
@@ -398,10 +384,6 @@ const getPriceClass = (changePercent) => {
|
|
|
color: #222222;
|
|
color: #222222;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-.search-placeholder {
|
|
|
|
|
- color: #b4b8c6;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
.search-button {
|
|
.search-button {
|
|
|
width: 96rpx;
|
|
width: 96rpx;
|
|
|
height: 80rpx;
|
|
height: 80rpx;
|
|
@@ -425,46 +407,53 @@ const getPriceClass = (changePercent) => {
|
|
|
color: #9ca2b5;
|
|
color: #9ca2b5;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-/* 下拉列表样式 */
|
|
|
|
|
-.search-dropdown {
|
|
|
|
|
|
|
+/* 搜索建议下拉 - 关键样式 */
|
|
|
|
|
+.suggestions-dropdown {
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
- top: 100%; /* 相对于父元素定位,在搜索框下方 */
|
|
|
|
|
|
|
+ top: 100%;
|
|
|
left: 0;
|
|
left: 0;
|
|
|
right: 0;
|
|
right: 0;
|
|
|
- margin-top: 8rpx;
|
|
|
|
|
background: #ffffff;
|
|
background: #ffffff;
|
|
|
border-radius: 16rpx;
|
|
border-radius: 16rpx;
|
|
|
- box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.15);
|
|
|
|
|
- max-height: 400rpx;
|
|
|
|
|
|
|
+ margin-top: 12rpx;
|
|
|
|
|
+ box-shadow: 0 12rpx 40rpx rgba(0, 0, 0, 0.15);
|
|
|
|
|
+ max-height: 480rpx;
|
|
|
overflow-y: auto;
|
|
overflow-y: auto;
|
|
|
- z-index: 1000; /* 提高层级,确保在最上层 */
|
|
|
|
|
- border: 1rpx solid #f0f0f0;
|
|
|
|
|
|
|
+ z-index: 101;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-.dropdown-item {
|
|
|
|
|
- padding: 24rpx 32rpx;
|
|
|
|
|
- border-bottom: 1rpx solid #f5f6fb;
|
|
|
|
|
|
|
+.suggestion-item {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
|
|
+ padding: 28rpx 24rpx;
|
|
|
|
|
+ border-bottom: 1rpx solid #f5f6fb;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-.dropdown-item:last-child {
|
|
|
|
|
|
|
+.suggestion-item:last-child {
|
|
|
border-bottom: none;
|
|
border-bottom: none;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-.dropdown-item-hover {
|
|
|
|
|
- background-color: #f7f8fc;
|
|
|
|
|
|
|
+.suggestion-item:active {
|
|
|
|
|
+ background: #f9f9fb;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-.item-name {
|
|
|
|
|
|
|
+.suggestion-name {
|
|
|
font-size: 28rpx;
|
|
font-size: 28rpx;
|
|
|
- color: #333;
|
|
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ color: #222222;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-.item-code {
|
|
|
|
|
|
|
+.suggestion-code {
|
|
|
font-size: 24rpx;
|
|
font-size: 24rpx;
|
|
|
- color: #999;
|
|
|
|
|
|
|
+ color: #9ca2b5;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.suggestion-loading {
|
|
|
|
|
+ padding: 48rpx;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ color: #9ca2b5;
|
|
|
|
|
+ font-size: 28rpx;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.result-card {
|
|
.result-card {
|
|
@@ -506,12 +495,6 @@ const getPriceClass = (changePercent) => {
|
|
|
color: #9da3b5;
|
|
color: #9da3b5;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-.detail-sub {
|
|
|
|
|
- margin-top: 8rpx;
|
|
|
|
|
- font-size: 24rpx;
|
|
|
|
|
- color: #9da3b5;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
.stock-price-right {
|
|
.stock-price-right {
|
|
|
text-align: right;
|
|
text-align: right;
|
|
|
}
|
|
}
|
|
@@ -527,15 +510,9 @@ const getPriceClass = (changePercent) => {
|
|
|
font-size: 26rpx;
|
|
font-size: 26rpx;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-.price-up {
|
|
|
|
|
- color: #e74c3c;
|
|
|
|
|
-}
|
|
|
|
|
|
|
+.price-up { color: #e74c3c; }
|
|
|
|
|
+.price-down { color: #27ae60; }
|
|
|
|
|
|
|
|
-.price-down {
|
|
|
|
|
- color: #27ae60;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-/* 实时行情网格 */
|
|
|
|
|
.quote-section {
|
|
.quote-section {
|
|
|
margin-bottom: 24rpx;
|
|
margin-bottom: 24rpx;
|
|
|
}
|
|
}
|
|
@@ -582,7 +559,7 @@ const getPriceClass = (changePercent) => {
|
|
|
color: #ffffff;
|
|
color: #ffffff;
|
|
|
font-size: 40rpx;
|
|
font-size: 40rpx;
|
|
|
font-weight: 700;
|
|
font-weight: 700;
|
|
|
- text-align: right;
|
|
|
|
|
|
|
+ text-align: center;
|
|
|
box-shadow: 0 10rpx 24rpx rgba(241, 101, 101, 0.35);
|
|
box-shadow: 0 10rpx 24rpx rgba(241, 101, 101, 0.35);
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -624,17 +601,9 @@ const getPriceClass = (changePercent) => {
|
|
|
color: #ffffff;
|
|
color: #ffffff;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-.tag-danger {
|
|
|
|
|
- background: #f16565;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-.tag-success {
|
|
|
|
|
- background: #3abf81;
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
-.tag-info {
|
|
|
|
|
- background: #4c86ff;
|
|
|
|
|
-}
|
|
|
|
|
|
|
+.tag-danger { background: #f16565; }
|
|
|
|
|
+.tag-success { background: #3abf81; }
|
|
|
|
|
+.tag-info { background: #4c86ff; }
|
|
|
|
|
|
|
|
.history-note {
|
|
.history-note {
|
|
|
display: block;
|
|
display: block;
|