个股中心

pages/geGuCenter/detail.vue

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