深度探索

components/deepExploration_header.vue

@@ -0,0 +1,97 @@
+<template>
+		<view class="titleContent">
+				<view class="left">
+					<uni-icons 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 class="history" src="/static/deepExploration-images/history.png" mode="aspectFill"></image>
+				</view>
+			</view>
+	
+			<view class="search">
+				<input class="searchInput" type="text" placeholder="请输入股票名称、股票代码"
+					placeholder-style="color: #A6A6A6; font-size: 22rpx;" />
+				<image class="seachIcon" src="/static/deepExploration-images/search.png" mode=""></image>
+			</view>
+</template>
+
+<script>
+
+</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: 30rpx;
+					align-items: center;
+				}
+			}
+		}
+
+		.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;
+			}
+		}
+
+</style>

pages/deepExploration/MainForceActions.vue

@@ -0,0 +1,287 @@
+<template>
+	<view class="main">
+		<!-- 顶部状态栏占位 -->
+		<view class="top" :style="{height:iSMT+'px'}"></view>
+		<deepExploration_header></deepExploration_header>
+
+		<view class="content">
+			<view class="select">
+				<image class="img" :src="navItems[currentIndex].icon" mode=""></image>
+				<view v-for="(item, index) in navItems" :key="index" class="selectItem"
+					:class="{ active: currentIndex === index }" @click="currentIndex = index">
+					<button class="btn"></button>
+				</view>
+			</view>
+
+			<view class="graphAndTxt">
+				<view class="graph">
+					<view class="graph_header">
+						<view class="left">TESA</view>
+						<view class="center">
+							<image class="last" src="/static/deepExploration-images/last.png" mode="aspectFill"></image>
+							<text>Taewlkj.sejssssssssf</text>
+							<image class="next" src="/static/deepExploration-images/next.png" mode="aspectFill"></image>
+						</view>
+						<view class="right">2025/10/26</view>
+					</view>
+					<view class="graph_data">
+						<text>435.900</text>
+						<text>22.410</text>
+						<text>5.120%</text>
+					</view>
+					<view class="graph_content"></view>
+				</view>
+				<view class="txt">
+					<view class="txtHeader">
+						<image src="/static/deepExploration-images/plus.png" mode="aspectFill"></image>
+						<text>主力追踪</text>
+					</view>
+					<view class="txtContent"></view>
+				</view>
+			</view>
+		</view>
+
+		<!-- 底部切换栏 -->
+		<footerBar class="static-footer" :type="type"></footerBar>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref,
+		onMounted
+	} from 'vue'
+	import deepExploration_header from '@/components/deepExploration_header.vue'
+	import footerBar from '@/components/footerBar.vue'
+	import {
+		onLoad
+	} from '@dcloudio/uni-app'
+
+	const type = ref('deepExploration')
+	const iSMT = ref(0)
+	const currentIndex = ref(0) // 新增：初始化选中索引，修复点击无效问题
+
+	const navItems = ref([{
+			name: '主力追踪',
+			icon: '/static/deepExploration-images/1.png',
+		},
+		{
+			name: '主力雷达',
+			icon: '/static/deepExploration-images/2.png',
+		},
+		{
+			name: '主力解码',
+			icon: '/static/deepExploration-images/3.png',
+		},
+		{
+			name: '主力资金流',
+			icon: '/static/deepExploration-images/4.png',
+		},
+	]);
+
+	onMounted(() => {
+		iSMT.value = uni.getSystemInfoSync().statusBarHeight;
+	})
+	onLoad((e) => {
+		if (e.index) {
+			currentIndex.value = e.index - 1
+			console.log('模块：', currentIndex.value);
+		}
+	})
+</script>
+
+<style scoped lang="scss">
+	.main {
+		width: 100%;
+		height: 100vh;
+		background-color: #fff;
+
+		.content {
+			margin-top: 30rpx;
+			padding-top: 30rpx;
+			background-color: rgb(248, 248, 248);
+
+			.select {
+				position: relative;
+				margin-bottom: -5rpx;
+
+				.img {
+					width: 750rpx;
+					height: 198rpx;
+				}
+
+				.selectItem {
+					.btn {
+						position: absolute;
+						width: 120rpx;
+						height: 150rpx;
+						background-color: transparent;
+
+						&::after {
+							border: none;
+						}
+
+					}
+
+					&:nth-of-type(1) .btn {
+						// 对应 index=0
+						top: 30rpx;
+						left: 60rpx;
+					}
+
+					&:nth-of-type(2) .btn {
+						// 对应 index=1
+						top: 30rpx; // 这里修改会影响 index=1 的按钮
+						left: 230rpx;
+					}
+
+					&:nth-of-type(3) .btn {
+						// 对应 index=2
+						top: 30rpx;
+						left: 400rpx;
+					}
+
+					&:nth-of-type(4) .btn {
+						// 对应 index=3
+						top: 30rpx;
+						left: 570rpx;
+					}
+				}
+			}
+
+			.graphAndTxt {
+				height: 300rpx;
+				background-color: #fff;
+				border-radius: 50rpx 50rpx 0 0;
+				padding: 68.6rpx 36.5rpx 0 36.5rpx;
+
+				.graph {
+					border: 1rpx solid #e2e2e2;
+					height: 600rpx;
+					border-radius: 30rpx 30rpx 0 0;
+
+					.graph_header {
+						padding: 32rpx 20.5rpx 0 24rpx;
+						display: flex;
+						align-items: center;
+
+						.left {
+							color: #333333;
+							font-family: "PingFang SC";
+							font-size: 15px;
+							font-style: normal;
+							font-weight: 400;
+							line-height: 15px;
+						}
+
+						.center {
+							margin-left: 105rpx;
+							display: flex;
+							align-items: center;
+
+							text {
+								width: 160rpx;
+								height: 36rpx;
+								padding-left: 10rpx;
+								color: #000000;
+								white-space: nowrap;
+								overflow: hidden;
+								text-overflow: ellipsis;
+								text-align: center;
+								font-family: "PingFang SC";
+								font-size: 18px;
+								font-style: normal;
+								font-weight: 500;
+								line-height: 18px;
+							}
+
+							.last {
+								width: 15rpx;
+								height: 20rpx;
+								margin-right: 30rpx;
+							}
+
+							.next {
+								width: 15rpx;
+								height: 20rpx;
+								margin-left: 30rpx;
+							}
+						}
+
+						.right {
+							margin-left: 50rpx;
+							color: #6a6a6a;
+							font-family: "PingFang SC";
+							font-size: 13px;
+							font-style: normal;
+							font-weight: 400;
+							line-height: 15px;
+						}
+					}
+
+					.graph_data {
+						display: flex;
+						padding: 48rpx 24rpx;
+
+						text {
+							display: flex;
+							color: #25ba5d;
+							font-family: "PingFang SC";
+							font-size: 17px;
+							line-height: 17px;
+						}
+
+						text:nth-child(2) {
+							margin-left: 120rpx;
+						}
+
+						text:nth-child(3) {
+							margin-left: 150rpx;
+						}
+					}
+
+					.graph_content {}
+
+				}
+
+				.txt {
+					background-color: #F3F3F3;
+					margin-top: 48rpx;
+					border-radius: 30rpx;
+
+					.txtHeader {
+						padding: 30rpx 24rpx;
+
+						image {
+							width: 20rpx;
+							height: 20rpx;
+						}
+
+						text {
+							background-color: #FFFFFF;
+							color: #000000;
+							padding: 0 22rpx;
+							border-radius: 22rpx;
+							font-size: 28rpx;
+							font-weight: 400;
+							line-height: 37rpx;
+						}
+					}
+
+					.txtContent {
+						min-height: 200rpx;
+
+					}
+				}
+
+			}
+
+		}
+
+		.static-footer {
+			position: fixed;
+			bottom: 0;
+			width: 100%; // 补充宽度，避免布局异常
+		}
+	}
+</style>

pages/deepExploration/stockSelectDetail.vue

@@ -0,0 +1,354 @@
+<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>

pages/home/deepExploration.vue

@@ -2,27 +2,389 @@
 	<view class="main">
 		<!-- 顶部状态栏占位 -->
 		<view class="top" :style="{height:iSMT+'px'}"></view>
-		<view>深度探索</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 {
+		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 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'
+			})
+		}
 
-onMounted(() => {
+	}
+	
+	//查看全部选股策略
+	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>
-.static-footer {
+<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>