Browse Source
Merge branch 'milestone-20251031-简版功能开发' of http://39.101.133.168:8807/qimaohong/deepChartVueApp into hongxilin/feature-20251023103318-行情数据及页面
lihuilin/feature-20251024095243-我的
Merge branch 'milestone-20251031-简版功能开发' of http://39.101.133.168:8807/qimaohong/deepChartVueApp into hongxilin/feature-20251023103318-行情数据及页面
lihuilin/feature-20251024095243-我的
15 changed files with 1197 additions and 843 deletions
-
100api/deepExploration/deepExploration.js
-
3api/tcpConnection.js
-
2common/util.js
-
901components/deepExploration_header.vue
-
79pages/deepExploration/MainForceActions.vue
-
871pages/deepExploration/deepExploration.vue
-
2pages/deepMate/deepMate.vue
-
5pages/setting/account.vue
-
6pages/start/Registration/Registration.vue
-
7pages/start/login/login.vue
-
2pages/start/recoverPassword/recoverPassword.vue
-
2pages/start/select/select.vue
-
1stores/index.js
-
44stores/modules/deepExploration.js
-
13utils/http.js
@ -1 +1,101 @@ |
|||
import { http } from '@/utils/http.js' |
|||
|
|||
|
|||
//主力追踪意图
|
|||
export const getModel1First = (data) => { |
|||
return http({ |
|||
method: 'POST', |
|||
url: '/api/coze/trackingFirst', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
//主力追踪意图
|
|||
export const getModel1Second = (data) => { |
|||
return http({ |
|||
method: 'POST', |
|||
url: '/api/coze/trackingSecond', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
|
|||
//主力追踪意图
|
|||
export const getModel2First = (data) => { |
|||
return http({ |
|||
method: 'POST', |
|||
url: '/api/coze/radarFirst', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
//主力追踪意图
|
|||
export const getModel2Second = (data) => { |
|||
return http({ |
|||
method: 'POST', |
|||
url: '/api/coze/radarSecond', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
//主力追踪意图
|
|||
export const getModel3First = (data) => { |
|||
return http({ |
|||
method: 'POST', |
|||
url: '/api/coze/decodingFirst', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
//主力追踪意图
|
|||
export const getModel3Second = (data) => { |
|||
return http({ |
|||
method: 'POST', |
|||
url: '/api/coze/decodingSecond', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
//主力追踪意图
|
|||
export const getModel4First = (data) => { |
|||
return http({ |
|||
method: 'POST', |
|||
url: '/api/coze/fundsFirst', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
//主力追踪意图
|
|||
export const getModel4Second = (data) => { |
|||
return http({ |
|||
method: 'POST', |
|||
url: '/api/coze/fundsSecond', |
|||
data |
|||
}) |
|||
} |
|||
|
|||
|
|||
|
|||
//历史记录列表
|
|||
export const RecordListApi = (data) => { |
|||
return http({ |
|||
method: 'POST', |
|||
url: '/api/coze/mainForceList', |
|||
data:data |
|||
}) |
|||
} |
|||
|
|||
|
|||
|
|||
|
|||
//历史记录详情
|
|||
export const RecordInfoApi = (data) => { |
|||
return http({ |
|||
method: 'POST', |
|||
url: '/api/coze/clickRecord', |
|||
data:data |
|||
}) |
|||
} |
|||
|
|||
|
|||
|
|||
@ -1,409 +1,508 @@ |
|||
<template> |
|||
<view class="titleContent"> |
|||
<view class="left"> |
|||
<uni-icons @click="handleBack" type="back" size="23" color="#111"></uni-icons> |
|||
</view> |
|||
<view class="title">深度探索</view> |
|||
<view class="right"> |
|||
<image class="notice" src="/static/deepExploration-images/notice.png" mode="aspectFill"></image> |
|||
<image @click="handleHistory" class="history" src="/static/deepExploration-images/history.png" |
|||
mode="aspectFill"></image> |
|||
</view> |
|||
</view> |
|||
|
|||
|
|||
|
|||
<view class="drawer-overlay" v-show="showHistoryDrawer"></view> |
|||
|
|||
<view class="drawer-panel" v-show="showHistoryDrawer" @click.stop @touchmove.stop.prevent |
|||
:style="{ transform: 'translateY(' + drawerOffsetY + 'px)' }"> |
|||
<view class="drawer-header"> |
|||
<text class="drawer-title">历史对话</text> |
|||
<view class="drawer-actions"> |
|||
<view class="delete-all-container"> |
|||
<image class="delete-icon" src="/static/deepExploration-images/delete.png"></image> |
|||
<text class="delete-all" @click="clearAllHistory">删除全部</text> |
|||
</view> |
|||
<view class="drawer-close" @click="closeHistoryDrawer"> |
|||
<image src="/static/deepExploration-images/close.png" mode="aspectFill"></image> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<scroll-view scroll-y="true" class="drawer-content"> |
|||
<view class="drawer-inner"> |
|||
<view v-if="historyList.length === 0" class="empty-history"> |
|||
<text>暂无历史记录</text> |
|||
</view> |
|||
<view v-for="(section, sIdx) in historyList" :key="sIdx" class="history-section"> |
|||
<text class="section-title">{{ section.title }}</text> |
|||
<view v-for="(item, idx) in section.items" :key="idx" class="history-item"> |
|||
<view class="history-left"> |
|||
<view class="flag-circle"> |
|||
<image :src="item.icon" mode="aspectFill"></image> |
|||
</view> |
|||
</view> |
|||
<view class="history-main" @click="itemClick(item)"> |
|||
<text class="history-query">{{ item.stockName }}</text> |
|||
<text class="history-query">({{ item.stockCode }})</text> |
|||
</view> |
|||
<text class="history-time">{{ item.createdTime }}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
<view class="titleContent"> |
|||
<view class="left"> |
|||
<uni-icons |
|||
@click="handleBack" |
|||
type="back" |
|||
size="23" |
|||
color="#111" |
|||
></uni-icons> |
|||
</view> |
|||
<view class="title">深度探索</view> |
|||
<view class="right"> |
|||
<image |
|||
class="notice" |
|||
src="/static/deepExploration-images/notice.png" |
|||
mode="aspectFill" |
|||
></image> |
|||
<image |
|||
@click="openHistoryDrawer" |
|||
class="history" |
|||
src="/static/deepExploration-images/history.png" |
|||
mode="aspectFill" |
|||
></image> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="drawer-overlay" v-show="showHistoryDrawer"></view> |
|||
|
|||
<view |
|||
class="drawer-panel" |
|||
v-show="showHistoryDrawer" |
|||
@click.stop |
|||
@touchmove.stop.prevent |
|||
:style="{ transform: 'translateY(' + drawerOffsetY + 'px)' }" |
|||
> |
|||
<view class="drawer-header"> |
|||
<text class="drawer-title">历史对话</text> |
|||
<view class="drawer-actions"> |
|||
<view class="delete-all-container"> |
|||
<image |
|||
class="delete-icon" |
|||
src="/static/icons/Group_48095481.svg" |
|||
></image> |
|||
<text class="delete-all" @click="clearAllHistory">删除全部</text> |
|||
</view> |
|||
<view class="drawer-close" @click="onDrawerBackClick" |
|||
><text class="drawer-close-icon"></text |
|||
></view> |
|||
</view> |
|||
</view> |
|||
<scroll-view scroll-y="true" class="drawer-content"> |
|||
<view class="drawer-inner"> |
|||
<view v-if="groupedHistory.length === 0" class="empty-history"> |
|||
<text>暂无历史记录</text> |
|||
</view> |
|||
<view |
|||
v-for="(section, sIdx) in groupedHistory" |
|||
:key="sIdx" |
|||
class="history-section" |
|||
> |
|||
<text class="section-title">{{ section.title }}</text> |
|||
<view |
|||
v-for="(item, idx) in section.items" |
|||
:key="idx" |
|||
class="history-item" |
|||
> |
|||
<view class="history-left"> |
|||
<view class="flag-circle" |
|||
><text class="flag-emoji">🇺🇸</text></view |
|||
> |
|||
</view> |
|||
<view class="history-main" @click="itemClick(item)"> |
|||
<text class="history-query">{{ item.stockName }}</text> |
|||
<text class="history-query">({{ item.stockCode }})</text> |
|||
</view> |
|||
<text class="history-time">{{ |
|||
formatTimeForHistory(item.createdTime) |
|||
}}</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { |
|||
ref, |
|||
onMounted |
|||
} from 'vue' |
|||
|
|||
const props = defineProps({ |
|||
name: { |
|||
type: String, |
|||
default: '' |
|||
} |
|||
}) |
|||
const showHistoryDrawer = ref(false) |
|||
const drawerOffsetY = ref(0); |
|||
const handleHistory = () => { |
|||
showHistoryDrawer.value = true |
|||
} |
|||
|
|||
const clearAllHistory = () => { |
|||
uni.setStorageSync("search_history", []); |
|||
}; |
|||
|
|||
|
|||
|
|||
//返回上一页 |
|||
const handleBack = ()=>{ |
|||
uni.navigateBack() |
|||
} |
|||
|
|||
const closeHistoryDrawer = () => { |
|||
showHistoryDrawer.value = false; |
|||
}; |
|||
// const onDrawerBackClick = () => { |
|||
// const hideDistance = uni.upx2px(900); |
|||
// drawerOffsetY.value = hideDistance; |
|||
// setTimeout(() => { |
|||
// closeHistoryDrawer(); |
|||
// drawerOffsetY.value = 0; |
|||
// }, 180); |
|||
// }; |
|||
|
|||
// 历史记录详情 |
|||
async function itemClick(item) { |
|||
// const res = await postHistoryDetail({ |
|||
// recordId: item.id, |
|||
// parentId: item.parentId, |
|||
// model: 5, |
|||
// }); |
|||
|
|||
// if (res.code == 200) { |
|||
// const message = res.data.wokeFlowData.One.markdown; |
|||
// messages.value = []; |
|||
// const botMsg = { |
|||
// content: message, |
|||
// isUser: false, |
|||
// isTyping: false, |
|||
// isThinking: false, |
|||
// }; |
|||
// messages.value.push(botMsg); |
|||
// } |
|||
} |
|||
const historyList = ref([{ |
|||
title: "今天", // 分组标题(如“今天”“昨天”“更早”) |
|||
items: [{ |
|||
|
|||
icon: '/static/deepExploration-images/Americle.png', |
|||
stockName: "TechCore", // 股票名称 |
|||
stockCode: "600001", // 6位数字股票代码 |
|||
createdTime: "14:35" // 时间格式(时:分) |
|||
}, |
|||
{ |
|||
icon: '/static/deepExploration-images/Americle.png', |
|||
stockName: "MediaLink", |
|||
stockCode: "600002", |
|||
createdTime: "10:12" |
|||
} |
|||
] |
|||
}, |
|||
{ |
|||
title: "昨天", |
|||
items: [{ |
|||
icon: '/static/deepExploration-images/Americle.png', |
|||
stockName: "FinServ", |
|||
stockCode: "600003", |
|||
createdTime: "09:48" |
|||
}] |
|||
} |
|||
]); |
|||
|
|||
onMounted(() => { |
|||
|
|||
}) |
|||
import { |
|||
RecordListApi, |
|||
RecordInfoApi, |
|||
} from "../api/deepExploration/deepExploration"; |
|||
import { ref, onMounted, computed } from "vue"; |
|||
import { useDeepExplorationStore } from "../stores/modules/deepExploration"; |
|||
|
|||
const props = defineProps({ |
|||
name: { |
|||
type: String, |
|||
default: "", |
|||
}, |
|||
}); |
|||
const showHistoryDrawer = ref(false); |
|||
const drawerOffsetY = ref(0); |
|||
// const handleHistory = () => { |
|||
// showHistoryDrawer.value = true; |
|||
// }; |
|||
|
|||
// 历史记录 |
|||
const openHistoryDrawer = async () => { |
|||
const res = await RecordListApi({ |
|||
model: 1, |
|||
}); |
|||
|
|||
if (res.code === 200) { |
|||
historyList.value = res.data; |
|||
} |
|||
|
|||
console.log("historyList.value", historyList.value); |
|||
|
|||
const hideDistance = uni.upx2px(900); |
|||
drawerOffsetY.value = hideDistance; |
|||
showHistoryDrawer.value = true; |
|||
setTimeout(() => { |
|||
drawerOffsetY.value = 0; |
|||
}, 10); |
|||
}; |
|||
|
|||
const clearAllHistory = () => { |
|||
searchHistory.value = []; |
|||
|
|||
// uni.setStorageSync("search_history", []); |
|||
}; |
|||
|
|||
//返回上一页 |
|||
const handleBack = () => { |
|||
uni.navigateBack(); |
|||
}; |
|||
|
|||
const closeHistoryDrawer = () => { |
|||
showHistoryDrawer.value = false; |
|||
}; |
|||
const onDrawerBackClick = () => { |
|||
const hideDistance = uni.upx2px(900); |
|||
drawerOffsetY.value = hideDistance; |
|||
setTimeout(() => { |
|||
closeHistoryDrawer(); |
|||
drawerOffsetY.value = 0; |
|||
}, 180); |
|||
}; |
|||
|
|||
// 历史记录详情 |
|||
async function itemClick(item) { |
|||
const res = await RecordInfoApi({ |
|||
recordId: item.id, |
|||
parentId: item.parentId, |
|||
model: 5, |
|||
}); |
|||
if (res.code == 200) { |
|||
const message = res.data; |
|||
const deepExplorationStore = useDeepExplorationStore(); |
|||
deepExplorationStore.setDeepExplorationInfo(message); |
|||
onDrawerBackClick(); |
|||
console.log(deepExplorationStore.deepExplorationInfo); |
|||
|
|||
} |
|||
} |
|||
const historyList = ref([]); |
|||
|
|||
// 为历史记录格式化时间:YYYY-MM-DD HH:mm |
|||
const formatTimeForHistory = (timeString) => { |
|||
// 假设 timeString 格式为 "YYYY-MM-DD HH:mm:ss" |
|||
const parts = timeString.split(" "); |
|||
if (parts.length >= 2) { |
|||
const datePart = parts[0]; |
|||
const timePart = parts[1]; |
|||
const timeParts = timePart.split(":"); |
|||
if (timeParts.length >= 2) { |
|||
return `${datePart} ${timeParts[0]}:${timeParts[1]}`; |
|||
} |
|||
} |
|||
return timeString; |
|||
}; |
|||
|
|||
// 历史分组(今天/昨天/近一周/按月) |
|||
const groupedHistory = computed(() => { |
|||
const sections = []; |
|||
|
|||
// 从缓存获取今天日期,如果没有则使用当前日期 |
|||
const now = new Date(); |
|||
|
|||
const startOfDay = (d) => |
|||
new Date(d.getFullYear(), d.getMonth(), d.getDate()); |
|||
const isSameDay = (a, b) => |
|||
startOfDay(a).getTime() === startOfDay(b).getTime(); |
|||
const isYesterday = (d) => { |
|||
const y = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1); |
|||
return isSameDay(d, y); |
|||
}; |
|||
const isToday = (d) => isSameDay(d, now); |
|||
const withinLast7Days = (d) => { |
|||
const seven = new Date( |
|||
now.getFullYear(), |
|||
now.getMonth(), |
|||
now.getDate() - 7 |
|||
); |
|||
return d >= seven && !isToday(d) && !isYesterday(d); |
|||
}; |
|||
const monthLabel = (d) => `${d.getMonth() + 1}月`; |
|||
|
|||
const today = []; |
|||
const yesterday = []; |
|||
const last7 = []; |
|||
const byMonth = new Map(); |
|||
|
|||
// 使用 historyList.value 替代 searchHistory.value |
|||
historyList.value.forEach((item) => { |
|||
// 根据你的数据结构,使用 createdTime 字段 |
|||
const dt = new Date(item.createdTime); |
|||
if (isToday(dt)) { |
|||
today.push(item); |
|||
} else if (isYesterday(dt)) { |
|||
yesterday.push(item); |
|||
} else if (withinLast7Days(dt)) { |
|||
last7.push(item); |
|||
} else { |
|||
const year = dt.getFullYear(); |
|||
const month = dt.getMonth() + 1; |
|||
const key = `${year}-${month}`; |
|||
if (!byMonth.has(key)) |
|||
byMonth.set(key, { |
|||
title: `${year}年${month}月`, |
|||
year, |
|||
month, |
|||
items: [], |
|||
}); |
|||
byMonth.get(key).items.push(item); |
|||
} |
|||
}); |
|||
|
|||
if (today.length) sections.push({ title: "今天", items: today }); |
|||
if (yesterday.length) sections.push({ title: "昨天", items: yesterday }); |
|||
if (last7.length) sections.push({ title: "近一周", items: last7 }); |
|||
|
|||
const monthSections = Array.from(byMonth.values()).sort((a, b) => { |
|||
if (a.year !== b.year) return b.year - a.year; |
|||
return b.month - a.month; // 月份倒序,如 10月 在 9月 之前 |
|||
}); |
|||
sections.push(...monthSections); |
|||
|
|||
return sections; |
|||
}); |
|||
|
|||
onMounted(() => {}); |
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
* { |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.titleContent { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 30rpx 60rpx 40rpx 35rpx; |
|||
box-shadow: 2rpx 2rpx 8rpx rgba(0, 0, 0, 0.1); |
|||
|
|||
.left { |
|||
display: flex; |
|||
align-items: center; |
|||
width: 36rpx; |
|||
height: 36rpx; |
|||
} |
|||
|
|||
.title { |
|||
position: absolute; |
|||
left: 50%; |
|||
transform: translateX(-50%); |
|||
color: #000000; |
|||
font-family: "PingFang SC"; |
|||
font-size: 19px; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
line-height: 25px; |
|||
|
|||
} |
|||
|
|||
.right { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 20rpx; |
|||
|
|||
.notice { |
|||
width: 35rpx; |
|||
height: 35rpx; |
|||
gap: 20rpx; |
|||
} |
|||
|
|||
.history { |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
align-items: center; |
|||
} |
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
/* 搜索历史侧拉框样式 */ |
|||
.drawer-overlay { |
|||
position: fixed; |
|||
left: 0; |
|||
top: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background-color: rgba(0, 0, 0, 0.35); |
|||
z-index: 900; |
|||
} |
|||
|
|||
.drawer-panel { |
|||
position: fixed; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
height: 75vh; |
|||
max-height: 80vh; |
|||
width: 100%; |
|||
background: #ffffff; |
|||
box-shadow: 0 -8rpx 20rpx rgba(0, 0, 0, 0.06); |
|||
z-index: 1000; |
|||
display: flex; |
|||
flex-direction: column; |
|||
border-top-left-radius: 20rpx; |
|||
border-top-right-radius: 20rpx; |
|||
transition: transform 0.22s ease; |
|||
} |
|||
|
|||
.drawer-back { |
|||
position: absolute; |
|||
left: 50%; |
|||
top: -14px; |
|||
transform: translateX(-50%); |
|||
width: 28px; |
|||
height: 48px; |
|||
border-radius: 12px; |
|||
background: #fff; |
|||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.drawer-back-icon { |
|||
font-size: 16px; |
|||
color: #8a8a8a; |
|||
} |
|||
|
|||
.drawer-actions { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 40rpx; |
|||
} |
|||
|
|||
.delete-all-container { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 14rpx; |
|||
} |
|||
|
|||
.delete-icon { |
|||
width: 28rpx; |
|||
height: 32rpx; |
|||
} |
|||
|
|||
.delete-all { |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.drawer-close { |
|||
width: 48rpx; |
|||
height: 48rpx; |
|||
border-radius: 24rpx; |
|||
/* background: #f5f5f5; */ |
|||
/* box-shadow: 0 2px 8px rgba(0,0,0,0.08); */ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
image { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
|
|||
|
|||
.drawer-header { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 52rpx 28rpx 0rpx 28rpx; |
|||
/* border-bottom: 2rpx solid #f0f0f0; */ |
|||
} |
|||
|
|||
.drawer-title { |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
color: #333333; |
|||
} |
|||
|
|||
.drawer-content { |
|||
flex: 1; |
|||
min-height: 0; |
|||
/* 让 flex 子元素可在容器内收缩以启用滚动 */ |
|||
height: 100%; |
|||
overscroll-behavior-y: contain; |
|||
/* 防止滚动串联到页面 */ |
|||
-webkit-overflow-scrolling: touch; |
|||
/* iOS 惯性滚动 */ |
|||
touch-action: pan-y; |
|||
/* 优化触控滚动,仅垂直 */ |
|||
} |
|||
|
|||
.drawer-inner { |
|||
padding: 20rpx 24rpx 20rpx 24rpx; |
|||
} |
|||
|
|||
.history-section { |
|||
margin-bottom: 20rpx; |
|||
/* margin: 0 24rpx; */ |
|||
} |
|||
|
|||
.section-title { |
|||
font-size: 26rpx; |
|||
color: #888; |
|||
margin: 10rpx 6rpx 16rpx; |
|||
} |
|||
|
|||
.history-item { |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 19rpx 18rpx; |
|||
background-color: #f6f7f9; |
|||
border-radius: 12rpx; |
|||
margin-bottom: 12rpx; |
|||
} |
|||
|
|||
.history-left { |
|||
margin-right: 20rpx; |
|||
width: 50rpx; |
|||
height: 50rpx; |
|||
} |
|||
|
|||
.flag-circle { |
|||
width: 50rpx; |
|||
height: 50rpx; |
|||
border-radius: 50%; |
|||
background: #fff; |
|||
border: 2rpx solid #eee; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
image{ |
|||
width: 50rpx; |
|||
height: 50rpx; |
|||
border-radius: 50%; |
|||
} |
|||
} |
|||
|
|||
|
|||
.history-main { |
|||
flex: 1; |
|||
} |
|||
|
|||
.history-query { |
|||
color: #000000; |
|||
text-align: center; |
|||
font-size: 24rpx; |
|||
font-weight: 400; |
|||
line-height: 40rpx; |
|||
} |
|||
|
|||
.history-time { |
|||
font-size: 22rpx; |
|||
color: #999; |
|||
} |
|||
|
|||
.history-card { |
|||
background-color: #fff; |
|||
border: 2rpx solid #f2f2f2; |
|||
border-left: 8rpx solid rgb(220, 31, 29); |
|||
border-radius: 12rpx; |
|||
padding: 18rpx 20rpx; |
|||
margin-bottom: 16rpx; |
|||
box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.03); |
|||
} |
|||
|
|||
.history-query { |
|||
font-size: 28rpx; |
|||
color: #333333; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.history-time { |
|||
margin-top: 8rpx; |
|||
font-size: 22rpx; |
|||
color: #888888; |
|||
} |
|||
|
|||
.empty-history { |
|||
padding: 40rpx; |
|||
color: #999999; |
|||
text-align: center; |
|||
} |
|||
* { |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.titleContent { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 30rpx 60rpx 40rpx 35rpx; |
|||
box-shadow: 2rpx 2rpx 8rpx rgba(0, 0, 0, 0.1); |
|||
|
|||
.left { |
|||
display: flex; |
|||
align-items: center; |
|||
width: 36rpx; |
|||
height: 36rpx; |
|||
} |
|||
|
|||
.title { |
|||
position: absolute; |
|||
left: 50%; |
|||
transform: translateX(-50%); |
|||
color: #000000; |
|||
font-family: "PingFang SC"; |
|||
font-size: 19px; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
line-height: 25px; |
|||
} |
|||
|
|||
.right { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 20rpx; |
|||
|
|||
.notice { |
|||
width: 35rpx; |
|||
height: 35rpx; |
|||
gap: 20rpx; |
|||
} |
|||
|
|||
.history { |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
align-items: center; |
|||
} |
|||
} |
|||
} |
|||
|
|||
/* 搜索历史侧拉框样式 */ |
|||
.drawer-overlay { |
|||
position: fixed; |
|||
left: 0; |
|||
top: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background-color: rgba(0, 0, 0, 0.35); |
|||
z-index: 900; |
|||
} |
|||
|
|||
.drawer-panel { |
|||
position: fixed; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
height: 75vh; |
|||
max-height: 80vh; |
|||
width: 100%; |
|||
background: #ffffff; |
|||
box-shadow: 0 -8rpx 20rpx rgba(0, 0, 0, 0.06); |
|||
z-index: 1000; |
|||
display: flex; |
|||
flex-direction: column; |
|||
border-top-left-radius: 20rpx; |
|||
border-top-right-radius: 20rpx; |
|||
transition: transform 0.22s ease; |
|||
} |
|||
|
|||
.drawer-back { |
|||
position: absolute; |
|||
left: 50%; |
|||
top: -14px; |
|||
transform: translateX(-50%); |
|||
width: 28px; |
|||
height: 48px; |
|||
border-radius: 12px; |
|||
background: #fff; |
|||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08); |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.drawer-back-icon { |
|||
font-size: 16px; |
|||
color: #8a8a8a; |
|||
} |
|||
|
|||
.drawer-actions { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 40rpx; |
|||
} |
|||
|
|||
.delete-all-container { |
|||
display: flex; |
|||
align-items: center; |
|||
gap: 14rpx; |
|||
} |
|||
|
|||
.delete-icon { |
|||
width: 28rpx; |
|||
height: 32rpx; |
|||
} |
|||
|
|||
.delete-all { |
|||
font-size: 28rpx; |
|||
} |
|||
|
|||
.drawer-close { |
|||
background: url("../static/icons/关闭2.svg"); |
|||
width: 48rpx; |
|||
height: 48rpx; |
|||
border-radius: 24rpx; |
|||
/* background: #f5f5f5; */ |
|||
/* box-shadow: 0 2px 8px rgba(0,0,0,0.08); */ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
image { |
|||
width: 100%; |
|||
height: 100%; |
|||
} |
|||
} |
|||
|
|||
.drawer-header { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
padding: 52rpx 28rpx 0rpx 28rpx; |
|||
/* border-bottom: 2rpx solid #f0f0f0; */ |
|||
} |
|||
|
|||
.drawer-title { |
|||
font-size: 32rpx; |
|||
font-weight: 600; |
|||
color: #333333; |
|||
} |
|||
|
|||
.drawer-content { |
|||
flex: 1; |
|||
min-height: 0; |
|||
/* 让 flex 子元素可在容器内收缩以启用滚动 */ |
|||
height: 100%; |
|||
overscroll-behavior-y: contain; |
|||
/* 防止滚动串联到页面 */ |
|||
-webkit-overflow-scrolling: touch; |
|||
/* iOS 惯性滚动 */ |
|||
touch-action: pan-y; |
|||
/* 优化触控滚动,仅垂直 */ |
|||
} |
|||
|
|||
.drawer-inner { |
|||
padding: 20rpx 24rpx 20rpx 24rpx; |
|||
} |
|||
|
|||
.history-section { |
|||
margin-bottom: 20rpx; |
|||
/* margin: 0 24rpx; */ |
|||
} |
|||
|
|||
.section-title { |
|||
font-size: 26rpx; |
|||
color: #888; |
|||
margin: 10rpx 6rpx 16rpx; |
|||
} |
|||
|
|||
.history-item { |
|||
display: flex; |
|||
align-items: center; |
|||
padding: 19rpx 18rpx; |
|||
background-color: #f6f7f9; |
|||
border-radius: 12rpx; |
|||
margin-bottom: 12rpx; |
|||
} |
|||
|
|||
.history-left { |
|||
margin-right: 20rpx; |
|||
width: 50rpx; |
|||
height: 50rpx; |
|||
} |
|||
|
|||
.flag-circle { |
|||
width: 50rpx; |
|||
height: 50rpx; |
|||
border-radius: 50%; |
|||
background: #fff; |
|||
border: 2rpx solid #eee; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
image { |
|||
width: 50rpx; |
|||
height: 50rpx; |
|||
border-radius: 50%; |
|||
} |
|||
} |
|||
|
|||
.history-main { |
|||
flex: 1; |
|||
} |
|||
|
|||
.history-query { |
|||
color: #000000; |
|||
text-align: center; |
|||
font-size: 24rpx; |
|||
font-weight: 400; |
|||
line-height: 40rpx; |
|||
} |
|||
|
|||
.history-time { |
|||
font-size: 22rpx; |
|||
color: #999; |
|||
} |
|||
|
|||
.history-card { |
|||
background-color: #fff; |
|||
border: 2rpx solid #f2f2f2; |
|||
border-left: 8rpx solid rgb(220, 31, 29); |
|||
border-radius: 12rpx; |
|||
padding: 18rpx 20rpx; |
|||
margin-bottom: 16rpx; |
|||
box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.03); |
|||
} |
|||
|
|||
.history-query { |
|||
font-size: 28rpx; |
|||
color: #333333; |
|||
font-weight: 500; |
|||
} |
|||
|
|||
.history-time { |
|||
margin-top: 8rpx; |
|||
font-size: 22rpx; |
|||
color: #888888; |
|||
} |
|||
|
|||
.empty-history { |
|||
padding: 40rpx; |
|||
color: #999999; |
|||
text-align: center; |
|||
} |
|||
</style> |
|||
@ -1,427 +1,460 @@ |
|||
<template> |
|||
<view class="main"> |
|||
<!-- 顶部状态栏占位 --> |
|||
<view class="top" :style="{height:iSMT+'px'}"></view> |
|||
<!-- 标题图标部分 --> |
|||
<deepExploration_header></deepExploration_header> |
|||
<view class="search"> |
|||
<input v-model="stockName" class="searchInput" type="text" placeholder="请输入股票名称、股票代码" |
|||
placeholder-style="color: #A6A6A6; font-size: 22rpx;" /> |
|||
<image @click="searchStock" class="seachIcon" src="/static/deepExploration-images/search.png" |
|||
mode="aspectFill"></image> |
|||
</view> |
|||
|
|||
<!-- 四大功能模块 --> |
|||
<view class="select"> |
|||
<view class="selectItem" @click="toMain('主力追踪')"> |
|||
<image class="img" src="/static/deepExploration-images/icon3.png" mode="aspectFill"></image> |
|||
<view class="txt">主力追踪</view> |
|||
</view> |
|||
<view class="selectItem" @click="toMain('主力雷达')"> |
|||
<image class="img" src="/static/deepExploration-images/icon2.png" mode="aspectFill"></image> |
|||
<view class="txt">主力雷达</view> |
|||
</view> |
|||
<view class="selectItem" @click="toMain('主力解码')"> |
|||
<image class="img" src="/static/deepExploration-images/icon1.png" mode="aspectFill"></image> |
|||
<view class="txt">主力解码</view> |
|||
</view> |
|||
<view class="selectItem" @click="toMain('主力资金流')"> |
|||
<image class="img" src="/static/deepExploration-images/icon4.png" mode="aspectFill"></image> |
|||
<view class="txt">主力资金流</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 灰色间隔 --> |
|||
<view class="gap"></view> |
|||
<!-- 选股策略 --> |
|||
<view class="stockSelection"> |
|||
<view class="stockSelection_top"> |
|||
<view class="txt"> |
|||
<text>选股策略</text> |
|||
</view> |
|||
<view class="viewAll" @click='viewAll'> |
|||
<text>查看全部</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="stockSelection_content"> |
|||
<view class="selectionItem"> |
|||
<view class="header"> |
|||
<view class="left"> |
|||
<image src="/static/deepExploration-images/plus.png" mode="aspectFill"></image> |
|||
<text>抄底卖顶</text> |
|||
</view> |
|||
<view class="right"> |
|||
<image src="/static/deepExploration-images/Americle.png" mode="aspectFill"></image> |
|||
<text>美股</text> |
|||
</view> |
|||
|
|||
</view> |
|||
<view class="content"> |
|||
<view class="contentTitle"> |
|||
<view class="contentTitle_name">股票名称</view> |
|||
<view class="contentTitle_close">最新收盘价</view> |
|||
<view class="contentTitle_price">选股价格</view> |
|||
</view> |
|||
<view class="contentItem"> |
|||
<view class="row" v-for="(item,index) in stockData" :key="index"> |
|||
<view class="nameItem">{{item.name}}</view> |
|||
<view class="closeItem">{{item.close}}</view> |
|||
<view class="priceItem">{{item.select}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="stockSelection_content"> |
|||
<view class="selectionItem"> |
|||
<view class="header"> |
|||
<view class="left"> |
|||
<image src="/static/deepExploration-images/plus.png" mode="aspectFill"></image> |
|||
<text>抄底卖顶</text> |
|||
</view> |
|||
<view class="right"> |
|||
<image src="/static/deepExploration-images/Americle.png" mode="aspectFill"></image> |
|||
<text>美股</text> |
|||
</view> |
|||
</view> |
|||
<view class="content"> |
|||
<view class="contentTitle"> |
|||
<view class="contentTitle_name">股票名称</view> |
|||
<view class="contentTitle_close">最新收盘价</view> |
|||
<view class="contentTitle_price">选股价格</view> |
|||
</view> |
|||
<view class="contentItem"> |
|||
<view class="row" v-for="(item,index) in stockData" :key="index"> |
|||
<view class="nameItem">{{item.name}}</view> |
|||
<view class="closeItem">{{item.close}}</view> |
|||
<view class="priceItem">{{item.select}}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<footerBar class="static-footer" :type="type"></footerBar> |
|||
</view> |
|||
<view class="main"> |
|||
<!-- 顶部状态栏占位 --> |
|||
<view class="top" :style="{ height: iSMT + 'px' }"></view> |
|||
<!-- 标题图标部分 --> |
|||
<deepExploration_header |
|||
></deepExploration_header> |
|||
<view class="search"> |
|||
<input |
|||
v-model="stockName" |
|||
class="searchInput" |
|||
type="text" |
|||
placeholder="请输入股票名称、股票代码" |
|||
placeholder-style="color: #A6A6A6; font-size: 22rpx;" |
|||
/> |
|||
<image |
|||
@click="searchStock" |
|||
class="seachIcon" |
|||
src="/static/deepExploration-images/search.png" |
|||
mode="aspectFill" |
|||
></image> |
|||
</view> |
|||
|
|||
<!-- 四大功能模块 --> |
|||
<view class="select"> |
|||
<view class="selectItem" @click="toMain('主力追踪')"> |
|||
<image |
|||
class="img" |
|||
src="/static/deepExploration-images/icon3.png" |
|||
mode="aspectFill" |
|||
></image> |
|||
<view class="txt">主力追踪</view> |
|||
</view> |
|||
<view class="selectItem" @click="toMain('主力雷达')"> |
|||
<image |
|||
class="img" |
|||
src="/static/deepExploration-images/icon2.png" |
|||
mode="aspectFill" |
|||
></image> |
|||
<view class="txt">主力雷达</view> |
|||
</view> |
|||
<view class="selectItem" @click="toMain('主力解码')"> |
|||
<image |
|||
class="img" |
|||
src="/static/deepExploration-images/icon1.png" |
|||
mode="aspectFill" |
|||
></image> |
|||
<view class="txt">主力解码</view> |
|||
</view> |
|||
<view class="selectItem" @click="toMain('主力资金流')"> |
|||
<image |
|||
class="img" |
|||
src="/static/deepExploration-images/icon4.png" |
|||
mode="aspectFill" |
|||
></image> |
|||
<view class="txt">主力资金流</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<!-- 灰色间隔 --> |
|||
<view class="gap"></view> |
|||
<!-- 选股策略 --> |
|||
<view class="stockSelection"> |
|||
<view class="stockSelection_top"> |
|||
<view class="txt"> |
|||
<text>选股策略</text> |
|||
</view> |
|||
<view class="viewAll" @click="viewAll"> |
|||
<text>查看全部</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="stockSelection_content"> |
|||
<view class="selectionItem"> |
|||
<view class="header"> |
|||
<view class="left"> |
|||
<image |
|||
src="/static/deepExploration-images/plus.png" |
|||
mode="aspectFill" |
|||
></image> |
|||
<text>抄底卖顶</text> |
|||
</view> |
|||
<view class="right"> |
|||
<image |
|||
src="/static/deepExploration-images/Americle.png" |
|||
mode="aspectFill" |
|||
></image> |
|||
<text>美股</text> |
|||
</view> |
|||
</view> |
|||
<view class="content"> |
|||
<view class="contentTitle"> |
|||
<view class="contentTitle_name">股票名称</view> |
|||
<view class="contentTitle_close">最新收盘价</view> |
|||
<view class="contentTitle_price">选股价格</view> |
|||
</view> |
|||
<view class="contentItem"> |
|||
<view class="row" v-for="(item, index) in stockData" :key="index"> |
|||
<view class="nameItem">{{ item.name }}</view> |
|||
<view class="closeItem">{{ item.close }}</view> |
|||
<view class="priceItem">{{ item.select }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="stockSelection_content"> |
|||
<view class="selectionItem"> |
|||
<view class="header"> |
|||
<view class="left"> |
|||
<image |
|||
src="/static/deepExploration-images/plus.png" |
|||
mode="aspectFill" |
|||
></image> |
|||
<text>抄底卖顶</text> |
|||
</view> |
|||
<view class="right"> |
|||
<image |
|||
src="/static/deepExploration-images/Americle.png" |
|||
mode="aspectFill" |
|||
></image> |
|||
<text>美股</text> |
|||
</view> |
|||
</view> |
|||
<view class="content"> |
|||
<view class="contentTitle"> |
|||
<view class="contentTitle_name">股票名称</view> |
|||
<view class="contentTitle_close">最新收盘价</view> |
|||
<view class="contentTitle_price">选股价格</view> |
|||
</view> |
|||
<view class="contentItem"> |
|||
<view class="row" v-for="(item, index) in stockData" :key="index"> |
|||
<view class="nameItem">{{ item.name }}</view> |
|||
<view class="closeItem">{{ item.close }}</view> |
|||
<view class="priceItem">{{ item.select }}</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<footerBar class="static-footer" :type="type"></footerBar> |
|||
</view> |
|||
</template> |
|||
|
|||
<script setup> |
|||
import { |
|||
ref, |
|||
onMounted |
|||
} from 'vue' |
|||
import footerBar from '@/components/footerBar.vue' |
|||
import deepExploration_header from '@/components/deepExploration_header.vue' |
|||
|
|||
const type = ref('deepExploration') |
|||
const iSMT = ref(0) |
|||
|
|||
//查看全部选股策略 |
|||
const toMain = (val) => { |
|||
if (val == '主力追踪') { |
|||
uni.navigateTo({ |
|||
url: '/pages/deepExploration/MainForceActions?index=1' |
|||
}) |
|||
} else if (val == '主力雷达') { |
|||
uni.navigateTo({ |
|||
url: '/pages/deepExploration/MainForceActions?index=2' |
|||
}) |
|||
} else if (val == '主力解码') { |
|||
uni.navigateTo({ |
|||
url: '/pages/deepExploration/MainForceActions?index=3' |
|||
}) |
|||
} else if (val == '主力资金流') { |
|||
uni.navigateTo({ |
|||
url: '/pages/deepExploration/MainForceActions?index=4' |
|||
}) |
|||
} |
|||
|
|||
} |
|||
|
|||
const stockName = ref('') |
|||
//搜索股票 |
|||
const searchStock = () => { |
|||
console.log('搜索参数:', stockName.value); |
|||
uni.navigateTo({ |
|||
url: `/pages/deepExploration/MainForceActions?stockName=${stockName.value}` |
|||
}) |
|||
} |
|||
|
|||
//查看全部选股策略 |
|||
const viewAll = () => { |
|||
uni.navigateTo({ |
|||
url: '/pages/deepExploration/stockSelectDetail' |
|||
}) |
|||
} |
|||
//选股策略数据 |
|||
const stockData = [{ |
|||
name: "(MKTW)MarketWise Inc", |
|||
close: "$14.190", |
|||
select: "$13.180" |
|||
}, |
|||
{ |
|||
name: "(MTCH)Match Group Inc", |
|||
close: "$32.120", |
|||
select: "$28.120" |
|||
}, |
|||
{ |
|||
name: "(MKTW)MarketWise Inc", |
|||
close: "$14.190", |
|||
select: "$13.180" |
|||
} |
|||
]; |
|||
onMounted(() => { |
|||
// 状态栏高度 |
|||
iSMT.value = uni.getSystemInfoSync().statusBarHeight; |
|||
}) |
|||
import { ref, onMounted } from "vue"; |
|||
import footerBar from "@/components/footerBar.vue"; |
|||
import deepExploration_header from "@/components/deepExploration_header.vue"; |
|||
|
|||
const type = ref("deepExploration"); |
|||
const iSMT = ref(0); |
|||
|
|||
//查看全部选股策略 |
|||
const toMain = (val) => { |
|||
if (val == "主力追踪") { |
|||
uni.navigateTo({ |
|||
url: "/pages/deepExploration/MainForceActions?index=1", |
|||
}); |
|||
} else if (val == "主力雷达") { |
|||
uni.navigateTo({ |
|||
url: "/pages/deepExploration/MainForceActions?index=2", |
|||
}); |
|||
} else if (val == "主力解码") { |
|||
uni.navigateTo({ |
|||
url: "/pages/deepExploration/MainForceActions?index=3", |
|||
}); |
|||
} else if (val == "主力资金流") { |
|||
uni.navigateTo({ |
|||
url: "/pages/deepExploration/MainForceActions?index=4", |
|||
}); |
|||
} |
|||
}; |
|||
|
|||
const stockName = ref(""); |
|||
//搜索股票 |
|||
const searchStock = () => { |
|||
console.log("搜索参数:", stockName.value); |
|||
uni.navigateTo({ |
|||
url: `/pages/deepExploration/MainForceActions?stockName=${stockName.value}`, |
|||
}); |
|||
}; |
|||
|
|||
//查看全部选股策略 |
|||
const viewAll = () => { |
|||
uni.navigateTo({ |
|||
url: "/pages/deepExploration/stockSelectDetail", |
|||
}); |
|||
}; |
|||
//选股策略数据 |
|||
const stockData = [ |
|||
{ |
|||
name: "(MKTW)MarketWise Inc", |
|||
close: "$14.190", |
|||
select: "$13.180", |
|||
}, |
|||
{ |
|||
name: "(MTCH)Match Group Inc", |
|||
close: "$32.120", |
|||
select: "$28.120", |
|||
}, |
|||
{ |
|||
name: "(MKTW)MarketWise Inc", |
|||
close: "$14.190", |
|||
select: "$13.180", |
|||
}, |
|||
]; |
|||
onMounted(() => { |
|||
// 状态栏高度 |
|||
iSMT.value = uni.getSystemInfoSync().statusBarHeight; |
|||
}); |
|||
|
|||
|
|||
</script> |
|||
|
|||
<style scoped lang="scss"> |
|||
.main { |
|||
width: 100%; |
|||
height: 100vh; |
|||
background-color: #fff; |
|||
|
|||
.search { |
|||
position: relative; |
|||
display: flex; |
|||
align-items: center; |
|||
background-color: #F3F3F3; |
|||
width: calc(100% - 60rpx); |
|||
height: 80rpx; |
|||
border-radius: 50rpx; |
|||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); |
|||
padding: 0 40rpx; |
|||
margin: 15rpx 30rpx 0 30rpx; |
|||
|
|||
.seachIcon { |
|||
position: absolute; |
|||
right: 50rpx; |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
} |
|||
|
|||
.searchInput { |
|||
color: #111; |
|||
} |
|||
} |
|||
|
|||
.select { |
|||
display: flex; |
|||
padding: 60rpx 10rpx 30rpx 30rpx; |
|||
gap: 70rpx; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
.selectItem { |
|||
.img { |
|||
width: 80rpx; |
|||
height: 80rpx; |
|||
display: block; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
.txt { |
|||
color: #6a6a6a; |
|||
font-family: "PingFang SC"; |
|||
font-size: 11px; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
line-height: 14.5px; |
|||
margin-top: 13rpx; |
|||
white-space: nowrap; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.gap { |
|||
width: 100%; |
|||
height: 15rpx; |
|||
background-color: #F3F3F3; |
|||
} |
|||
|
|||
.stockSelection { |
|||
width: 100%; |
|||
padding: 32rpx 15rpx; |
|||
|
|||
.stockSelection_top { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
|
|||
.txt { |
|||
color: #000000; |
|||
font-family: "PingFang SC"; |
|||
font-size: 38rpx; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
line-height: 50rpx; |
|||
} |
|||
|
|||
.viewAll { |
|||
background-color: #000000; |
|||
border-radius: 10rpx; |
|||
padding: 6rpx 20rpx; |
|||
color: #ffffff; |
|||
font-family: "PingFang SC"; |
|||
font-size: 10rpx; |
|||
font-style: normal; |
|||
font-weight: 100; |
|||
line-height: 29rpx; |
|||
height: 40rpx; |
|||
} |
|||
} |
|||
|
|||
.stockSelection_content { |
|||
.selectionItem { |
|||
background-color: #F3F3F3; |
|||
padding: 30rpx 15rpx 17rpx 30rpx; |
|||
border-radius: 30rpx; |
|||
margin-top: 30rpx; |
|||
|
|||
.header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
.left { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
image { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
width: 15rpx; |
|||
height: 15rpx; |
|||
} |
|||
|
|||
text { |
|||
margin-left: 15rpx; |
|||
color: #000000; |
|||
font-family: "PingFang SC"; |
|||
font-size: 28rpx; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
line-height: 18.5px; |
|||
} |
|||
} |
|||
|
|||
.right { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
border-radius: 15rpx; |
|||
background-color: #FFFFFF; |
|||
padding: 6rpx 20rpx; |
|||
|
|||
image { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
width: 40rpx; |
|||
height: 26.5rpx; |
|||
} |
|||
|
|||
text { |
|||
margin-left: 10rpx; |
|||
color: #6a6a6a; |
|||
font-family: "PingFang SC"; |
|||
font-size: 18rpx; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
line-height: 24rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.content { |
|||
.contentTitle { |
|||
display: flex; |
|||
color: #6a6a6a; |
|||
font-family: "PingFang SC"; |
|||
font-size: 11px; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
line-height: 14.5px; |
|||
margin-top: 24rpx; |
|||
margin-bottom: 20rpx; |
|||
|
|||
.contentTitle_name { |
|||
width: 100rpx; |
|||
} |
|||
|
|||
.contentTitle_close { |
|||
width: 130rpx; |
|||
margin-left: 260rpx; |
|||
} |
|||
|
|||
.contentTitle_price { |
|||
width: 120rpx; |
|||
margin-left: 60rpx; |
|||
} |
|||
|
|||
} |
|||
|
|||
.contentItem { |
|||
.row { |
|||
display: flex; |
|||
box-shadow: 0 -2rpx 5rpx rgba(0, 0, 0, 0.05); |
|||
padding: 10rpx 0; |
|||
margin-bottom: 10rpx; |
|||
|
|||
.nameItem { |
|||
width: 260rpx; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
color: #000000; |
|||
font-family: "PingFang SC"; |
|||
font-size: 13px; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
line-height: 17.5px; |
|||
} |
|||
|
|||
.closeItem { |
|||
width: 120rpx; |
|||
margin-left: 100rpx; |
|||
color: #25ba5d; |
|||
font-family: "PingFang SC"; |
|||
font-size: 13px; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
line-height: 17.5px; |
|||
} |
|||
|
|||
.priceItem { |
|||
width: 120rpx; |
|||
margin-left: 73rpx; |
|||
color: #25ba5d; |
|||
font-family: "PingFang SC"; |
|||
font-size: 13px; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
line-height: 17.5px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
} |
|||
|
|||
.static-footer { |
|||
position: fixed; |
|||
bottom: 0; |
|||
} |
|||
} |
|||
|
|||
* { |
|||
box-sizing: border-box; |
|||
} |
|||
.main { |
|||
width: 100%; |
|||
height: 100vh; |
|||
background-color: #fff; |
|||
|
|||
.search { |
|||
position: relative; |
|||
display: flex; |
|||
align-items: center; |
|||
background-color: #f3f3f3; |
|||
width: calc(100% - 60rpx); |
|||
height: 80rpx; |
|||
border-radius: 50rpx; |
|||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); |
|||
padding: 0 40rpx; |
|||
margin: 15rpx 30rpx 0 30rpx; |
|||
|
|||
.seachIcon { |
|||
position: absolute; |
|||
right: 50rpx; |
|||
width: 32rpx; |
|||
height: 32rpx; |
|||
} |
|||
|
|||
.searchInput { |
|||
color: #111; |
|||
} |
|||
} |
|||
|
|||
.select { |
|||
display: flex; |
|||
padding: 60rpx 10rpx 30rpx 30rpx; |
|||
gap: 70rpx; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
.selectItem { |
|||
.img { |
|||
width: 80rpx; |
|||
height: 80rpx; |
|||
display: block; |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
.txt { |
|||
color: #6a6a6a; |
|||
font-family: "PingFang SC"; |
|||
font-size: 11px; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
line-height: 14.5px; |
|||
margin-top: 13rpx; |
|||
white-space: nowrap; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.gap { |
|||
width: 100%; |
|||
height: 15rpx; |
|||
background-color: #f3f3f3; |
|||
} |
|||
|
|||
.stockSelection { |
|||
width: 100%; |
|||
padding: 32rpx 15rpx; |
|||
|
|||
.stockSelection_top { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
|
|||
.txt { |
|||
color: #000000; |
|||
font-family: "PingFang SC"; |
|||
font-size: 38rpx; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
line-height: 50rpx; |
|||
} |
|||
|
|||
.viewAll { |
|||
background-color: #000000; |
|||
border-radius: 10rpx; |
|||
padding: 6rpx 20rpx; |
|||
color: #ffffff; |
|||
font-family: "PingFang SC"; |
|||
font-size: 10rpx; |
|||
font-style: normal; |
|||
font-weight: 100; |
|||
line-height: 29rpx; |
|||
height: 40rpx; |
|||
} |
|||
} |
|||
|
|||
.stockSelection_content { |
|||
.selectionItem { |
|||
background-color: #f3f3f3; |
|||
padding: 30rpx 15rpx 17rpx 30rpx; |
|||
border-radius: 30rpx; |
|||
margin-top: 30rpx; |
|||
|
|||
.header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
.left { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
|
|||
image { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
width: 15rpx; |
|||
height: 15rpx; |
|||
} |
|||
|
|||
text { |
|||
margin-left: 15rpx; |
|||
color: #000000; |
|||
font-family: "PingFang SC"; |
|||
font-size: 28rpx; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
line-height: 18.5px; |
|||
} |
|||
} |
|||
|
|||
.right { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
border-radius: 15rpx; |
|||
background-color: #ffffff; |
|||
padding: 6rpx 20rpx; |
|||
|
|||
image { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
width: 40rpx; |
|||
height: 26.5rpx; |
|||
} |
|||
|
|||
text { |
|||
margin-left: 10rpx; |
|||
color: #6a6a6a; |
|||
font-family: "PingFang SC"; |
|||
font-size: 18rpx; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
line-height: 24rpx; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.content { |
|||
.contentTitle { |
|||
display: flex; |
|||
color: #6a6a6a; |
|||
font-family: "PingFang SC"; |
|||
font-size: 11px; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
line-height: 14.5px; |
|||
margin-top: 24rpx; |
|||
margin-bottom: 20rpx; |
|||
|
|||
.contentTitle_name { |
|||
width: 100rpx; |
|||
} |
|||
|
|||
.contentTitle_close { |
|||
width: 130rpx; |
|||
margin-left: 260rpx; |
|||
} |
|||
|
|||
.contentTitle_price { |
|||
width: 120rpx; |
|||
margin-left: 60rpx; |
|||
} |
|||
} |
|||
|
|||
.contentItem { |
|||
.row { |
|||
display: flex; |
|||
box-shadow: 0 -2rpx 5rpx rgba(0, 0, 0, 0.05); |
|||
padding: 10rpx 0; |
|||
margin-bottom: 10rpx; |
|||
|
|||
.nameItem { |
|||
width: 260rpx; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
color: #000000; |
|||
font-family: "PingFang SC"; |
|||
font-size: 13px; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
line-height: 17.5px; |
|||
} |
|||
|
|||
.closeItem { |
|||
width: 120rpx; |
|||
margin-left: 100rpx; |
|||
color: #25ba5d; |
|||
font-family: "PingFang SC"; |
|||
font-size: 13px; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
line-height: 17.5px; |
|||
} |
|||
|
|||
.priceItem { |
|||
width: 120rpx; |
|||
margin-left: 73rpx; |
|||
color: #25ba5d; |
|||
font-family: "PingFang SC"; |
|||
font-size: 13px; |
|||
font-style: normal; |
|||
font-weight: 400; |
|||
line-height: 17.5px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.static-footer { |
|||
position: fixed; |
|||
bottom: 0; |
|||
} |
|||
} |
|||
|
|||
* { |
|||
box-sizing: border-box; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,44 @@ |
|||
import { defineStore } from 'pinia' |
|||
import { ref } from 'vue' |
|||
|
|||
// 定义 Store
|
|||
export const useDeepExplorationStore = defineStore( |
|||
'deepExploration', |
|||
() => { |
|||
// 会员信息
|
|||
const deepExplorationInfo = ref() |
|||
|
|||
// 保存会员信息,登录时使用
|
|||
const setDeepExplorationInfo = (val) => { |
|||
deepExplorationInfo.value = val |
|||
} |
|||
|
|||
// 清理会员信息,退出时使用
|
|||
const clearDeepExplorationInfo = () => { |
|||
deepExplorationInfo.value = undefined |
|||
} |
|||
|
|||
// 记得 return
|
|||
return { |
|||
deepExplorationInfo, |
|||
setDeepExplorationInfo, |
|||
clearDeepExplorationInfo, |
|||
} |
|||
}, |
|||
// TODO: 持久化
|
|||
{ |
|||
// 网页端持久化
|
|||
// persist: true,
|
|||
// 小程序端持久化
|
|||
persist: { |
|||
storage: { |
|||
getItem(key) { |
|||
return uni.getStorageSync(key) |
|||
}, |
|||
setItem(key, value) { |
|||
uni.setStorageSync(key, value) |
|||
}, |
|||
}, |
|||
}, |
|||
}, |
|||
) |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue