deepChartVueApp/pages/deepExploration/stockSelectDetail.vue

<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>