longcai/JiaZhiQianYan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

个股中心

Browse Source
This commit is contained in:
zw199166
2026-01-26 15:34:26 +08:00
parent 30d2ec5823
commit 08db2fd33b
82 changed files with 1741 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
pages/geGuCenter/detail.vue Normal file
View File

@@ -0,0 +1,130 @@
<template>
<view>
<navBar leftText="详情" hideNavBg></navBar>
<image class="topBg absolute" src="/static/image/index/conceptTopBg.png" mode="widthFix"></image>
<view class="searchC fixed flex" :style="'top:'+navH+'px;'">
<image class="icon" src="/static/icon/home/conceptCenter/search.png" mode="widthFix"></image>
<input class="flex1" type="text" v-model="keywords" placeholder="输入股票代码或名称"
placeholder-style="color:#eeeeee" confirm-type="search" @confirm="clickSearch()" />
</view>
<scroll-view scroll-y class="stockDetailsC fixed" :style="'top:'+contentTop+'px;'">
<view>
<view style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16rpx; margin: 0 20rpx;">
<view @click="list2Index = index" v-for="(item,index) in topLists" :key="index"
style="padding: 12rpx;"
:style="{'border-bottom': (list2Index == index ? '1rpx solid #F2C369' : 'none')}">
<view style="font-size: 24rpx; color: #070707; font-weight: bold; text-align: center;"
:style="{color: (list2Index == index ? '#BB8520' : '#070707')}">
{{item.title}}
</view>
<view style="font-size: 20rpx; font-weight: 400; text-align: center;"
:style="{color: (list2Index == index ? '#BB8520' : '#070707')}">{{item.value}}</view>
</view>
</view>
<view style="height: 1rpx; margin: 0 20rpx; background-color: #E7E7E7;"></view>
<!-- '股票名称', '涨跌幅', '市值', '成交额', '行业' -->
<view
style="display: grid; grid-template-columns: repeat(5, 1fr); gap: 10rpx; background-color: #FAFAFC; line-height: 60rpx; margin: 0 20rpx; margin-top: 20rpx;">
<view v-for="(item,index) in ['股票名称', '涨跌幅', '市值', '成交额', '行业']" :key="index"
style="color: #666666; font-size: 20rpx; font-weight: 500; text-align: center;">
{{item}}
</view>
</view>
<!-- '股票名称', '涨跌幅', '市值', '成交额', '行业' 的 内容 -->
<view v-for="(obj, j) in 10"
style="display: grid; grid-template-columns: repeat(5, 1fr); gap: 10rpx; min-height: 60rpx; margin: 0 20rpx;"
:style="{'background-color': (j % 2 == 0 ? '#fff' : '#FAFAFC')}">
<view v-for="(item,index) in ['云南白药', '+0.04%', '996.85 亿元', '4.44 亿元', '医药生物']" :key="index"
style="padding: 10rpx 0; color: #666666; font-size: 20rpx; font-weight: 500; text-align: center; display: flex; justify-content: center; align-items: center; flex-direction: column;" :style="{color: (index == 0 ? '#222222' : index == 1 ? '#EC3440' : '#666666')}">
<view>{{item}}</view>
<view v-if="index == 0" style="color: #666666; font-size: 20rpx; font-weight: 500;">000768</view>
</view>
</view>
<view style="height: 25rpx;"></view>
</view>
</scroll-view>
</view>
</template>
<script>
import {
inject
} from 'vue'
export default {
data() {
return {
navH: inject('navHeight'),
contentTop: '',
topLists: [{
title: '超大盘股',
value: '（>1000亿）',
},
{
title: '大盘股',
value: '（500-1000亿）',
},
{
title: '中盘股',
value: '（100-500亿）',
}
],
list2Index: 0
}
},
onLoad(e) {
this.activeIndex = e.index
this.contentTop = this.navH + (20 + 70 + 25) / 750 * inject('windowWidth')
},
methods: {
}
}
</script>
<style lang="less">
page {
background-color: #070707;
}
.topBg {
top: 0;
left: 0;
width: 100%;
height: auto;
}
.searchC {
background-color: #292929B3;
left: 0;
right: 0;
margin: 20rpx 25rpx 0;
padding: 0 25rpx;
height: 70rpx;
border-radius: 35rpx;
font-size: 22rpx;
font-weight: 500;
.icon {
margin-right: 12rpx;
width: 25rpx;
height: auto;
}
input {
height: 100%;
color: white;
}
}
.stockDetailsC {
left: 25rpx;
width: calc(100vw - 50rpx);
bottom: env(safe-area-inset-bottom);
background-color: white;
border-radius: 10rpx;
}
</style>

356
pages/geGuCenter/geGuCenter.vue
View File

@@ -2,11 +2,225 @@
<view>
<navBar leftText="个股中心" hideNavBg hideBack></navBar>
<image class="topBg absolute" src="/static/image/index/conceptTopBg.png" mode="widthFix"></image>
<view class="searchC fixed flex" :style="'top:'+navH+'px;'">
<image class="icon" src="/static/icon/home/conceptCenter/search.png" mode="widthFix"></image>
<input class="flex1" type="text" v-model="keywords" placeholder="输入股票代码或名称"
placeholder-style="color:#eeeeee" confirm-type="search" @confirm="clickSearch()" />
</view>
<scroll-view scroll-y class="stockDetailsC fixed" :style="'top:'+contentTop+'px;'">
<view>
<view style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16rpx; padding: 20rpx;">
<view v-for="(item,index) in topLists" :key="index"
style="padding: 20rpx 26rpx 26rpx 35rpx; border: 1rpx dashed #777777; overflow: hidden; position: relative;">
<image
style="position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%;"
:src="item.backIcon" mode="aspectFill"></image>
<view style="position: relative; z-index: 1;">
<view style="font-size: 24rpx; color: #777777; font-weight: 500;">{{item.title}}</view>
<view style="font-size: 30rpx; margin-top: 10rpx; font-weight: bold;"
:style="{color: item.color}">{{item.value}}</view>
</view>
</view>
</view>
<view style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16rpx; margin: 0 20rpx;">
<view @click="list2Index = index" v-for="(item,index) in topLists2" :key="index"
style="border: 1rpx solid #D2D2D2; padding: 12rpx;"
:style="{border: `1rpx solid ${list2Index == index ? '#F2C369' : '#D2D2D2'}`}">
<view style="font-size: 24rpx; color: #070707; font-weight: bold; text-align: center;"
:style="{color: (list2Index == index ? '#BB8520' : '#070707'), 'background-color': (list2Index == index ? '#FFFAF1' : '#FFFFFF')}">
{{item.title}}
</view>
<view style="font-size: 20rpx; font-weight: 400; text-align: center;"
:style="{color: (list2Index == index ? '#BB8520' : '#070707')}">{{item.value}}</view>
</view>
</view>
<!-- '股票名称', '涨跌幅', '市值', '成交额', '行业' -->
<view
style="display: grid; grid-template-columns: repeat(5, 1fr); gap: 10rpx; background-color: #FAFAFC; line-height: 60rpx; margin: 0 20rpx; margin-top: 20rpx;">
<view v-for="(item,index) in ['股票名称', '涨跌幅', '市值', '成交额', '行业']" :key="index"
style="color: #666666; font-size: 20rpx; font-weight: 500; text-align: center;">
{{item}}
</view>
</view>
<!-- '股票名称', '涨跌幅', '市值', '成交额', '行业' 的 内容 -->
<view v-for="(obj, j) in 10"
style="display: grid; grid-template-columns: repeat(5, 1fr); gap: 10rpx; min-height: 60rpx; margin: 0 20rpx;"
:style="{'background-color': (j % 2 == 0 ? '#fff' : '#FAFAFC')}">
<view v-for="(item,index) in ['云南白药', '+0.04%', '996.85 亿元', '4.44 亿元', '医药生物']" :key="index"
style="padding: 10rpx 0; color: #666666; font-size: 20rpx; font-weight: 500; text-align: center; display: flex; justify-content: center; align-items: center; flex-direction: column;"
:style="{color: (index == 0 ? '#222222' : index == 1 ? '#EC3440' : '#666666')}">
<view>{{item}}</view>
<view v-if="index == 0" style="color: #666666; font-size: 20rpx; font-weight: 500;">000768
</view>
</view>
</view>
<view @click="moreAction"
style="display: flex;align-items: center;justify-content: center; height: 80rpx;">
<view style="font-size: 24rpx; color: #3D455C; font-weight: 500;">查看更多</view>
<image style="width: 10rpx; height: 19rpx; margin-left: 20rpx;"
src="/static/icon/home/conceptCenter/next.png" mode="widthFix"></image>
</view>
<view style="height: 1rpx; margin: 0 20rpx; background-color: #E7E7E7;"></view>
<view style="height: 78rpx; display: flex; align-items: center; margin: 0 20rpx;">
<image style="width: 40rpx; height: 40rpx;" src="/pages/geGuCenter/icon/ydjk-icon.png"
mode="widthFix"></image>
<view style="font-size: 28rpx; color: #2B2B2B; font-weight: bold; flex: 1; margin-left: 10rpx;">异动监控
</view>
<view @click="allAction(1)"
style="border: 1rpx solid #DCDCDC; border-radius: 5rpx; padding: 2rpx 10rpx; display: flex; align-items: center; justify-content: center; margin: 0 10rpx;">
<view style="color: #888888; font-size: 22rpx; font-weight: 500;">全部</view>
<image style="width: 11rpx; height: 6rpx; margin-left: 40rpx;"
src="/static/icon/invest/downArrow.png" mode="widthFix"></image>
</view>
<view @click="allAction(2)"
style="border: 1rpx solid #DCDCDC; border-radius: 5rpx; padding: 2rpx 10rpx; display: flex; align-items: center; justify-content: center;">
<view style="color: #888888; font-size: 22rpx; font-weight: 500;">2026/01/20</view>
<image style="width: 11rpx; height: 6rpx; margin-left: 20rpx;"
src="/static/icon/invest/downArrow.png" mode="widthFix"></image>
</view>
</view>
<view
style="height: 400rpx; display: flex; align-items: center; justify-content: center; background-color: red;">
折线图占位 </view>
<view style="height: 1rpx; margin: 0 20rpx; background-color: #E7E7E7;"></view>
<view style="height: 88rpx; display: flex; align-items: center; margin: 0 20rpx;">
<image style="width: 40rpx; height: 40rpx;" src="/pages/geGuCenter/icon/ydjk-icon.png"
mode="widthFix"></image>
<view style="font-size: 28rpx; color: #2B2B2B; font-weight: bold; flex: 1; margin-left: 10rpx;">
板块异动明细
</view>
</view>
<view v-for="(item,index) in 10" :key="index" @click="bkydAction(item)"
style="margin: 20rpx; margin-top: 0; background-color: #FAFAFC; border-radius: 10rpx; overflow: hidden; padding: 20rpx 30rpx; font-weight: 500;">
<view style="color: #888888; font-size: 20rpx;">09:54</view>
<view style="display: flex; align-items: center; margin-top: 10rpx;">
<view style="color: #2B2B2B; font-weight: bold; font-size: 26rpx; margin-right: 10rpx;">数据交易所
</view>
<view
style="color: #EC3440; font-size: 20rpx; border: 1rpx solid #EC3440; border-radius: 15rpx; height: 30rpx; display: flex; align-items: center; justify-content: center; padding: 0 10rpx; box-sizing: border-box;">
<image style="width: 18rpx; height: auto;" src="/pages/geGuCenter/icon/ydjk-zs.png"
mode="widthFix"></image>
<view style="margin-left: 10rpx;">异动</view>
</view>
<view style="flex: 1; font-size: 22rpx; text-align: right;">
<text style="color: #71675D;">板块均涨</text>
<text
style="color: #EC3440; font-weight: bold; margin-left: 10rpx; margin-right: 20rpx;">+6.64%</text>
<text style="color: #EC3440; font-weight: bold;">14涨</text>
<text style="color: #888888; margin: 0 5rpx;">/</text>
<text style="color: #01AB5D; font-weight: bold;">5跌</text>
</view>
</view>
<view
style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 20rpx; font-size: 22rpx; color: #71675D; font-weight: 500; margin-top: 15rpx;">
<view style="text-align: left;">
<text>评分</text>
<text style="color: #EC3440; font-weight: bold; margin-left: 10rpx;">56</text>
</view>
<view style="text-align: center;">
<text>超额收益</text>
<text style="color: #EC3440; font-weight: bold; margin-left: 10rpx;">+9.28%</text>
</view>
<view style="text-align: right;">
<text>涨停比</text>
<text style="color: #EC3440; font-weight: bold; margin-left: 10rpx;">19%</text>
</view>
</view>
</view>
<view style="height: 25rpx;"></view>
</view>
</scroll-view>
<uni-popup ref="typePopup" type="bottom" :safeArea="false">
<view class="detailPopup">
<view
style="height: 120rpx; display: flex; align-items: center; justify-content: center; font-size: 28rpx; font-weight: 500;">
<view style="color: #727A8E; padding: 0 25rpx;" @click="closeAction(1)">取消</view>
<view style="flex: 1; text-align: center; color: #333333; font-size: 36rpx; font-weight: bold;">选择分类
</view>
<view style="color: #D79412; padding: 0 25rpx;" @click="confirmAction(1)">确定</view>
</view>
<view v-for="(item,index) in typeList" :key="index">
<view style="height: 1rpx; background-color: #EAEAEA; margin: 0 20rpx;"></view>
<view style="display: flex; align-items: center; justify-content: center; height: 80rpx;">
<image style="width: 26rpx; height: 26rpx; margin-right: 18rpx;" :src="item.backIcon" mode="aspectFit"></image>
<view style="min-width: 100rpx; text-align: center; font-size: 24rpx; font-weight: 500; color: #070707;">{{item.title}}</view>
</view>
</view>
</view>
</uni-popup>
<uni-popup ref="datePopup" type="bottom" :safeArea="false">
<view class="detailPopup">
<view
style="height: 120rpx; display: flex; align-items: center; justify-content: center; font-size: 28rpx; font-weight: 500;">
<view style="color: #727A8E; padding: 0 25rpx;" @click="closeAction(2)">取消</view>
<view style="flex: 1; text-align: center; color: #333333; font-size: 36rpx; font-weight: bold;">选择日期
</view>
<view style="color: #D79412; padding: 0 25rpx;" @click="confirmAction(2)">确定</view>
</view>
<view style="margin: 0 38rpx; padding-bottom: 38rpx;">
<LCCalendar2></LCCalendar2>
</view>
</view>
</uni-popup>
<uni-popup ref="detailPopup" type="bottom" :safeArea="false">
<view class="detailPopup">
<view
style="height: 120rpx; display: flex; align-items: center; justify-content: center; font-size: 28rpx; font-weight: 500;">
<view style="color: #727A8E; width: 60rpx;"></view>
<view style="flex: 1; text-align: center; color: #333333; font-size: 36rpx; font-weight: bold;">详情
</view>
<view style="color: #D79412; width: 60rpx; display: flex; align-items: center; justify-content: center;" @click="closeAction(3)">
<image style="width: 20rpx; height: 20rpx;" src="/static/icon/home/close.png" mode="widthFix"></image>
</view>
</view>
<view style="height: 1rpx; margin: 0 20rpx; background-color: #E7E7E7;"></view>
<view style="padding: 0 25rpx; box-sizing: border-box; height: 45rpx; margin: 0 45rpx; margin-top: 15rpx; background-color: #FAFAFC;">
<view style="display: flex; align-items: center; height: 100%;">
<view style="color: #666666; font-weight: 500; font-size: 24rpx; margin-right: 10rpx;">相关股票
</view>
<view style="flex: 1; font-size: 22rpx; text-align: right;">
<text style="color: #71675D;">板块均涨</text>
<text
style="color: #EC3440; font-weight: bold; margin-left: 10rpx; margin-right: 20rpx;">+6.64%</text>
<text style="color: #EC3440; font-weight: bold;">14涨</text>
<text style="color: #888888; margin: 0 5rpx;">/</text>
<text style="color: #01AB5D; font-weight: bold;">5跌</text>
<text style="color: #71675D; margin-left: 20rpx;">涨停比</text>
<text style="color: #EC3440; font-weight: bold; margin-left: 10rpx;">19%</text>
</view>
</view>
</view>
<view v-for="(item, index) in 10" style="padding: 0 25rpx; box-sizing: border-box; height: 45rpx; margin: 0 45rpx; display: flex; align-items: center; font-weight: 500;"
:style="{ 'background-color': (index % 2 == 0 ? '#fff' : '#FAFAFC')}">
<view style="color: #222222; font-size: 24rpx; font-weight: bold;">科泰电源</view>
<view style="flex: 1; color: #888888; font-size: 20rpx; margin: 0 20rpx;">000880</view>
<view style="color: #EC3440; font-size: 22rpx; font-weight: bold;">+11.02%</view>
</view>
</view>
</uni-popup>
</view>
</template>
@@ -20,14 +234,115 @@
return {
navH: inject('navHeight'),
contentTop: '',
topLists: [{
title: '大盘涨跌幅',
value: '+0.31%',
color: '#EC3440',
backIcon: '/static/icon/gegu/gg-top-0.png'
},
{
title: '涨停/跌停',
value: '+0.31%',
color: '#070707',
backIcon: '/static/icon/gegu/gg-top-1.png'
},
{
title: '多空对比',
value: '3572/1855',
color: '#070707',
backIcon: '/static/icon/gegu/gg-top-2.png'
},
{
title: '今日成交额',
value: '1.5万亿',
color: '#070707',
backIcon: '/static/icon/gegu/gg-top-3.png'
},
{
title: 'A股总市值',
value: '113.8万亿',
color: '#070707',
backIcon: '/static/icon/gegu/gg-top-4.png'
},
{
title: '连板龙头',
value: '10只',
color: '#F59B38',
backIcon: '/static/icon/gegu/gg-top-5.png'
}
],
topLists2: [{
title: '超大盘股',
value: '（>1000亿）',
},
{
title: '大盘股',
value: '（500-1000亿）',
},
{
title: '中盘股',
value: '（100-500亿）',
}
],
list2Index: 0,
typeList: [{
title: '缩量急涨',
backIcon: '/static/icon/gegu/cate-0.png'
},
{
title: '异动',
backIcon: '/static/icon/gegu/cate-1.png'
},
{
title: '急跌',
backIcon: '/static/icon/gegu/cate-2.png'
},
{
title: '急涨',
backIcon: '/static/icon/gegu/cate-3.png'
},
{
title: '放量震荡',
backIcon: '/static/icon/gegu/cate-4.png'
}]
}
},
onLoad(e) {
this.activeIndex = e.index
this.contentTop = this.navH + 20 / 750 * inject('windowWidth')
this.contentTop = this.navH + (20 + 70 + 25) / 750 * inject('windowWidth')
},
methods: {
moreAction() {
uni.navigateTo({
url: '/pages/geGuCenter/detail'
})
},
allAction(index) {
if (index == 1) {
this.$refs["typePopup"].open()
}else if (index == 2) {
this.$refs["datePopup"].open()
}
},
closeAction(index) {
if (index == 1) {
this.$refs["typePopup"].close()
}else if (index == 2) {
this.$refs["datePopup"].close()
}else if (index == 3) {
this.$refs["detailPopup"].close()
}
},
confirmAction(index) {
if (index == 1) {
this.$refs["typePopup"].close()
}else if (index == 2) {
this.$refs["datePopup"].close()
}
},
bkydAction(item) {
this.$refs["detailPopup"].open()
}
}
}
</script>
@@ -44,9 +359,42 @@
height: auto;
}
.stockDetailsC {
.searchC {
background-color: #292929B3;
left: 0;
right: 0;
margin: 20rpx 25rpx 0;
padding: 0 25rpx;
height: 70rpx;
border-radius: 35rpx;
font-size: 22rpx;
font-weight: 500;
.icon {
margin-right: 12rpx;
width: 25rpx;
height: auto;
}
input {
height: 100%;
color: white;
}
}
.stockDetailsC {
left: 25rpx;
width: calc(100vw - 50rpx);
bottom: calc(55px + env(safe-area-inset-bottom));
background-color: white;
border-radius: 10rpx;
}
.detailPopup {
max-height: 70%;
background-color: white;
color: red;
border-radius: 20rpx 20rpx 0 0;
padding-bottom: env(safe-area-inset-bottom);
}
</style>

BIN
pages/geGuCenter/icon/ydjk-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
pages/geGuCenter/icon/ydjk-zs.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 457 B