qimaohong
/
deepChartVueApp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
37 Commits
10 Branches
0 Tags
30 MiB
 
 
 
 
 
Tree: 1152a57609
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '1152a57609'
${ noResults }
deepChartVueApp/pages/home/deepExploration.vue

390 lines
8.9 KiB
Raw Blame History

<template>
<view class="main">
<!-- 顶部状态栏占位 -->
<view class="top" :style="{height:iSMT+'px'}"></view>
<!-- 标题图标部分 -->
<deepExploration_header></deepExploration_header>
<!-- 四大功能模块 -->
<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 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;
.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>