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.
221 lines
5.7 KiB
221 lines
5.7 KiB
<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;
|
|
}
|
|
|
|
.indicator-icons {
|
|
display: flex;
|
|
gap: 100rpx;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.icon {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
}
|
|
</style>
|