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.
354 lines
7.6 KiB
354 lines
7.6 KiB
<template>
|
|
<view class="main">
|
|
<view class="table">
|
|
<view class="tableHeader">
|
|
<scroll-view class="tabs" scroll-x="true">
|
|
<view v-for="(item,index) in tabsData" :key="index" class="tabItem" @click="handleTab(item)">
|
|
{{item}}
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<view class="tableContent">
|
|
<image class="showAll" src="/static/deepExploration-images/showAll.png" mode="aspectFill"></image>
|
|
<scroll-view scroll-x="true" show-scrollbar="false">
|
|
<view class="tableBox">
|
|
<view class="box_header">
|
|
<view class="name">名称</view>
|
|
<view class="other" v-for="(item,index) in tableContentHeaderData" :key="index">
|
|
<text>{{item}}</text>
|
|
<image v-show="ifASC" src="/static/deepExploration-images/ASC.png" mode="aspectFill">
|
|
</image>
|
|
<image v-show="!ifASC" src="/static/deepExploration-images/DESC.png" mode="aspectFill">
|
|
</image>
|
|
</view>
|
|
</view>
|
|
<view class="box_content">
|
|
<view class="row" v-for="(item,index) in fakeData" :key="index" :class="{ 'increase-positive': item.increase.startsWith('+'),
|
|
'increase-negative': item.increase.startsWith('-')}">
|
|
<view class="name_colum">
|
|
<text class="stockName">{{item.name}}</text>
|
|
<text class="stockCode">{{item.stockCode}}</text>
|
|
</view>
|
|
<view class="other_colum">{{item.latest}}</view>
|
|
<view class="other_colum">{{item.increase}}</view>
|
|
<view class="other_colum">{{item.decrease}}</view>
|
|
<view class="other_colum">{{item.previousClose}}</view>
|
|
<view class="other_colum">{{item.volume}}</view>
|
|
<view class="other_colum">{{item.turnover}}</view>
|
|
<view class="other_colum">{{item.openingPrice}}</view>
|
|
<view class="other_colum">{{item.highestPrice}}</view>
|
|
<view class="other_colum">{{item.lowestPrice}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref
|
|
} from 'vue'
|
|
|
|
const tabsData = ref(['全部', '抄底卖顶', '波段行情', '价值投资', '资金及仓位管理', '价值投资', '价值投资', '价值投资', ])
|
|
const handleTab = (item) => {
|
|
uni.showToast({
|
|
title: `查看 ${item} 详情`,
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
}
|
|
//表头是否升序
|
|
const ifASC = ref(true)
|
|
//表头数据
|
|
const tableContentHeaderData = ref(['最新', '涨幅', '跌幅', '昨收', '成交量', '成交额', '开盘价', '最高价', '最低价'])
|
|
const fakeData = [{
|
|
name: "TechCore",
|
|
stockCode: "600001",
|
|
latest: 1315.00,
|
|
increase: "+5.2%",
|
|
decrease: "+5.2%",
|
|
previousClose: 1250.00,
|
|
volume: 12000,
|
|
turnover: "15780K",
|
|
openingPrice: 1237.50,
|
|
highestPrice: 1320.00,
|
|
lowestPrice: 1230.00
|
|
},
|
|
{
|
|
name: "MediaLink",
|
|
stockCode: "600002",
|
|
latest: 1138.70,
|
|
increase: "-3.5%",
|
|
decrease: "-3.5%",
|
|
previousClose: 1180.00,
|
|
volume: 8500,
|
|
turnover: "967.9K",
|
|
openingPrice: 1191.80,
|
|
highestPrice: 1195.00,
|
|
lowestPrice: 1130.00
|
|
},
|
|
{
|
|
name: "FinServ",
|
|
stockCode: "600003",
|
|
latest: 1413.72,
|
|
increase: "+7.1%",
|
|
decrease: "+7.1%",
|
|
previousClose: 1320.00,
|
|
volume: 15000,
|
|
turnover: "2120.6K",
|
|
openingPrice: 1293.60,
|
|
highestPrice: 1420.00,
|
|
lowestPrice: 1290.00
|
|
},
|
|
{
|
|
name: "AutoDrive",
|
|
stockCode: "600004",
|
|
latest: 1080.40,
|
|
increase: "+2.8%",
|
|
decrease: "+2.8%",
|
|
previousClose: 1050.00,
|
|
volume: 9000,
|
|
turnover: "972.4K",
|
|
openingPrice: 1055.25,
|
|
highestPrice: 1085.00,
|
|
lowestPrice: 1050.00
|
|
},
|
|
{
|
|
name: "EduSmart",
|
|
stockCode: "600005",
|
|
latest: 968.24,
|
|
increase: "-1.2%",
|
|
decrease: "-1.2%",
|
|
previousClose: 980.00,
|
|
volume: 7000,
|
|
turnover: "677.8K",
|
|
openingPrice: 975.10,
|
|
highestPrice: 978.00,
|
|
lowestPrice: 965.00
|
|
},
|
|
{
|
|
name: "HealthPlusqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq",
|
|
stockCode: "600006",
|
|
latest: 1463.00,
|
|
increase: "+4.5%",
|
|
decrease: "+4.5%",
|
|
previousClose: 1400.00,
|
|
volume: 13000,
|
|
turnover: "1901.9K",
|
|
openingPrice: 1393.00,
|
|
highestPrice: 1470.00,
|
|
lowestPrice: 1385.00
|
|
},
|
|
{
|
|
name: "AgriTech",
|
|
stockCode: "600007",
|
|
latest: 1038.36,
|
|
increase: "+1.8%",
|
|
decrease: "+1.8%",
|
|
previousClose: 1020.00,
|
|
volume: 6500,
|
|
turnover: "674.9K",
|
|
openingPrice: 1028.16,
|
|
highestPrice: 1040.00,
|
|
lowestPrice: 1025.00
|
|
},
|
|
{
|
|
name: "LogiFlow",
|
|
stockCode: "600008",
|
|
latest: 1094.24,
|
|
increase: "-2.3%",
|
|
decrease: "-2.3%",
|
|
previousClose: 1120.00,
|
|
volume: 8000,
|
|
turnover: "875.4K",
|
|
openingPrice: 1122.24,
|
|
highestPrice: 1125.00,
|
|
lowestPrice: 1090.00
|
|
},
|
|
{
|
|
name: "EnergySol",
|
|
stockCode: "600009",
|
|
latest: 1435.05,
|
|
increase: "+6.3%",
|
|
decrease: "+6.3%",
|
|
previousClose: 1350.00,
|
|
volume: 14000,
|
|
turnover: "2009.1K",
|
|
openingPrice: 1339.75,
|
|
highestPrice: 1440.00,
|
|
lowestPrice: 1335.00
|
|
},
|
|
{
|
|
name: "RealEstate",
|
|
stockCode: "600010",
|
|
latest: 995.00,
|
|
increase: "-0.5%",
|
|
decrease: "-0.5%",
|
|
previousClose: 1000.00,
|
|
volume: 7500,
|
|
turnover: "746.3K",
|
|
openingPrice: 1003.00,
|
|
highestPrice: 1005.00,
|
|
lowestPrice: 990.00
|
|
}
|
|
];
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.main {
|
|
width: 100%;
|
|
height: 100vh;
|
|
background-color: #fff;
|
|
|
|
|
|
.table {
|
|
margin-top: 10rpx;
|
|
box-shadow: 0 -2rpx 3rpx -1rpx rgba(0, 0, 0, 0.5);
|
|
|
|
.tableHeader {
|
|
.tabs {
|
|
white-space: nowrap;
|
|
padding-top: 20rpx;
|
|
padding-left: 40rpx;
|
|
|
|
::-webkit-scrollbar {
|
|
//隐藏 滚动条
|
|
display: none;
|
|
}
|
|
|
|
.tabItem {
|
|
display: inline-block;
|
|
color: rgb(175, 175, 175);
|
|
border-radius: 10rpx;
|
|
padding: 5rpx 30rpx;
|
|
margin-right: 20rpx;
|
|
font-size: 28rpx;
|
|
background-color: rgb(243, 243, 243);
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.tableContent {
|
|
width: 100%;
|
|
|
|
position: relative;
|
|
|
|
.showAll {
|
|
position: absolute;
|
|
top: 35rpx;
|
|
right: 20rpx;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
z-index: 100;
|
|
}
|
|
|
|
scroll-view {
|
|
width: 100%;
|
|
white-space: nowrap;
|
|
|
|
::-webkit-scrollbar {
|
|
//隐藏 滚动条
|
|
display: none;
|
|
}
|
|
|
|
}
|
|
|
|
.tableBox {
|
|
padding-left: 40rpx;
|
|
|
|
.box_header {
|
|
margin-bottom: 19rpx;
|
|
display: flex;
|
|
width: max-content;
|
|
margin-top: 40rpx;
|
|
color: rgb(109, 109, 109);
|
|
border-radius: 10rpx;
|
|
margin-right: 20rpx;
|
|
font-size: 23rpx;
|
|
|
|
|
|
.name {
|
|
flex: 0 0 375rpx;
|
|
}
|
|
|
|
.other {
|
|
flex: 0 0 195rpx;
|
|
|
|
text {
|
|
margin-right: 5rpx;
|
|
}
|
|
|
|
image {
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.box_content {
|
|
width: max-content;
|
|
|
|
.row {
|
|
padding: 5rpx;
|
|
display: flex;
|
|
border-top: 1rpx dashed #eee;
|
|
width: 210%;
|
|
|
|
&.increase-positive {
|
|
.other_colum {
|
|
color: #2DD357;
|
|
font-weight: 200;
|
|
}
|
|
}
|
|
|
|
&.increase-negative {
|
|
.other_colum {
|
|
color: #FF4150;
|
|
font-weight: 200;
|
|
}
|
|
}
|
|
|
|
.name_colum {
|
|
flex: 0 0 375rpx;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4rpx;
|
|
|
|
.stockName {
|
|
color: #333333;
|
|
width: 100%;
|
|
max-width: 305rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
line-height: 36rpx;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.stockCode {
|
|
color: #c5c5c5;
|
|
;
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
line-height: 30rpx;
|
|
}
|
|
}
|
|
|
|
.other_colum {
|
|
flex: 0 0 195rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|