deepChartVueApp/pages/setting/market.vue

<template>
	<view class="main">
		<view :style="{height:iSMT+'px'}"></view>

		<view class="time-share-title">
			<text>分时设计</text>
		</view>
		<view style="height:57.5vh;background-color: white;">
			<view class="title">A股竞价</view>
			<view class="top-options">
				<view class="option-btn" :class="{ 'active': aStockBid === 0 }" @click="aStockBid = 0">
					<text>智能开启</text>
					<view class="active-dot" v-if="aStockBid === 0"></view>
				</view>
				<view class="option-btn" :class="{ 'active': aStockBid === 1 }" @click="aStockBid = 1">
					<text>保持开启</text>
					<view class="active-dot" v-if="aStockBid === 1"></view>
				</view>

				<view class="option-btn" :class="{ 'active': aStockBid === 2 }" @click="aStockBid = 2">
					<text>保持关闭</text>
					<view class="active-dot" v-if="aStockBid === 2"></view>
				</view>
			</view>

			<view class="title">K线样式</view>
			<view class="top-options">
				<view class="option-btn" :class="{ 'active': kStyle === 0 }" @click="kStyle = 0">
					<img src="/static/my/common.png" class="kline-icon" />
					<text>普通</text>
					<view class="active-dot" v-if="kStyle === 0"></view>
				</view>
				<view class="option-btn" :class="{ 'active': kStyle === 1 }" @click="kStyle = 1">
					<img src="/static/my/outline.png" class="kline-icon" />
					<text>轮廓图</text>
					<view class="active-dot" v-if="kStyle === 1"></view>
				</view>
				<view class="option-btn" :class="{ 'active': kStyle === 2 }" @click="kStyle = 2">
					<img src="/static/my/polylines.png" class="kline-icon" />
					<text>折线图</text>
					<view class="active-dot" v-if="kStyle === 2"></view>
				</view>
			</view>

			<view class="title">除权类型</view>
			<view class="top-options">
				<view class="option-btn" :class="{ 'active': exRights === 0 }" @click="exRights = 0">
					<text>除权</text>
					<view class="active-dot" v-if="exRights === 0"></view>
				</view>
				<view class="option-btn" :class="{ 'active': exRights === 1 }" @click="exRights = 1">
					<text>普通</text>
					<view class="active-dot" v-if="exRights === 1"></view>
				</view>
				<view class="option-btn" :class="{ 'active': exRights === 2 }" @click="exRights = 2">
					<text>加权</text>
					<view class="active-dot" v-if="exRights === 2"></view>
				</view>
			</view>

			<view class="title">涨跌颜色</view>
			<view class="top-options">
				<view class="option-btn" :class="{ 'active': rfColor === 0 }" @click="rfColor = 0">
					<view class="color-icon">
						<img src="/static/my/greenRise.png" class="kline-icon" />
					</view>
					<text>绿涨红跌</text>
					<view class="active-dot" v-if="rfColor === 0"></view>
				</view>
				<view class="option-btn" :class="{ 'active': rfColor === 1 }" @click="rfColor = 1">
					<view class="color-icon">
						<img src="/static/my/redRise.png" class="kline-icon" />
					</view>
					<text>红涨绿跌</text>
					<view class="active-dot" v-if="rfColor === 1"></view>
				</view>
			</view>

			<view class="title">副图指标个数</view>
			<view class="top-options">
				<view class="option-btn" :class="{ 'active': indexCount === 0 }" @click="indexCount = 0">
					<text>1</text>
				</view>
				<view class="option-btn" :class="{ 'active': indexCount === 1 }" @click="indexCount = 1">
					<text>2</text>
				</view>
				<view class="option-btn" :class="{ 'active': indexCount === 2 }" @click="indexCount = 2">
					<text>3</text>
				</view>
			</view>
		</view>

		<view class="indicator-title">
			<text>指标设置</text>
		</view>
		<view class="indicator-list">
			<view class="indicator-item" v-for="(item, index) in indicatorList" :key="index">
				<text class="indicator-text">{{ item }}</text>
				<view class="indicator-icons">
					<img src="/static/my/setting.png" class="icon" />
					<img src="/static/my/menu.png" class="icon" />
				</view>
			</view>
			<view style="height:10vh;background-color: white;"></view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	const iSMT = ref(0)
	const aStockBid = ref(0) // 股票竞价：Stock bidding
	const kStyle = ref(0) // k线样式
	const exRights = ref(0) // 除权类型 除权：Ex-rights
	const rfColor = ref(0) // 涨跌颜色 rise-fall
	const indexCount = ref(0) // 副图指标个数
	const indicatorList = ref(['K线', '均线', '成交量', 'KDJ', 'MACD', 'RSI'])

	onMounted(() => {
		iSMT.value = uni.getSystemInfoSync().statusBarHeight;
	})
</script>

<style scoped>
	.time-share-title {
		height: 4.5vh;
		padding: 0 40rpx;
		display: flex;
		align-items: center;
	}

	.title {
		height: 5.5vh;
		padding: 0 40rpx;
		display: flex;
		align-items: center;
		font-size: 26rpx;
		color: #666;
	}

	.top-options {
		height: 5.5vh;
		display: flex;
		padding: 0 40rpx;
	}

	.option-btn {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1rpx solid #ddd;
		border-radius: 8rpx;
		margin: 0 10rpx;
		padding: 15rpx 0;
		font-size: 28rpx;
	}

	.option-btn.active {
		border-color: red;
	}

	.active-dot {
		width: 16rpx;
		height: 16rpx;
		background-color: red;
		border-radius: 50%;
		margin-left: 10rpx;
	}

	.kline-icon {
		margin-right: 10rpx;
		font-size: 32rpx;
	}

	.color-icon {
		margin-right: 10rpx;
		display: flex;
		gap: 4rpx;
	}

	.indicator-title {
		height: 6vh;
		padding: 0 40rpx;
		display: flex;
		align-items: center;
	}

	.indicator-list {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0 40rpx;
		background-color: white;
	}

	.indicator-item {
		display: flex;
		align-items: center;
		height: 7.5vh;
		border-bottom: 1rpx solid #eee;
	}

	.indicator-text {
		font-size: 28rpx;
		flex:1;
	}

	.indicator-icons {
		display: flex;
		gap: 100rpx;
		margin-left: auto;
	}

	.icon {
		width: 28rpx;
		height: 28rpx;
	}
</style>