BiKing/pages/contract/sustainability/index.vue

<template>
	<view class="contract-box" :rise-fall="stocksColor">
		<view class="contract-title">
			<view class="contract-item" @click.stop="openDrawer">
				<view class="title-iocn">
					<text class="title-iocn-item"></text>
					<text class="title-iocn-item"></text>
					<text class="title-iocn-item"></text>
				</view>
				<!-- <image class="title-iocn" src="../../../static/logo.png" mode="aspectFit"></image> -->
				<text class="title-text">{{ currencyVal.currency_name }}/{{ currencyVal.legal_name }}</text>
			</view>
			<view class="contract-item">
				<!-- <text class="title-ratio">资金费率:{{ rateProfitsTotal.profits_total }}%</text> -->
				<image class="ratio-icon" @click.stop="lookDetails" src="../../../static/images/icon_05.png"
					mode="aspectFit"></image>
				<image class="ratio-icon" @click.stop="setContract" src="../../../static/images/icon_06.png"
					mode="aspectFit"></image>
			</view>
		</view>

		<view class="account-box">
			<view class="account-item">
				<view class="account-title">
					<text class="text">持仓保证金USDT)</text>
				</view>
				<text class="account-num">{{ pagesInfo.caution_money_total }}</text>
			</view>
			<view class="account-item">
				<view class="account-title">
					<text class="text">可用保证金(USDT)</text>
				</view>
				<text class="account-num">{{ pagesInfo.available_caution_money_total }}</text>
			</view>
			<view class="account-item">
				<view class="account-title">
					<text class="text">未实现亏盈(USDT)</text>
				</view>
				<text class="account-num">{{ pagesInfo.profits_total }}</text>
			</view>
			<view class="account-item">
				<view class="account-title">
					<text class="text">净值(USDT</text>
				</view>
				<text class="account-num">{{ pagesInfo.user_net_value }}</text>
			</view>
			<view class="account-item">
				<view class="account-title">
					<text class="text">风险率(%)</text>
				</view>
				<text class="account-num">{{ pagesInfo.hazard_rate }}</text>
			</view>
			<view class="account-item">
				<view class="account-title">
					<text class="text">账户余额(USDT)</text>
				</view>
				<text class="account-num">{{ pagesInfo.user_lever }}</text>
			</view>
		</view>

		<view class="data-box">
			<view class="data-left">
				<view class="nums-title">
					<view class="left-title flex">
						<text>价格</text>
						<text>数量</text>
					</view>
					<view class="subhead-title flex">
						<text>(USDT)</text>
						<text>(张)</text>
					</view>
				</view>

				<view class="nums-list">
					<template v-for="(item , indx) in bids" v-if="indx < marketNum">
						<market-depth :type="1" :val="item"></market-depth>
					</template>
					<!-- <view class="nums-item die" v-for="(item , indx) in bids" :key="`bids_${indx}`" v-if="indx < 7">
						<text class="nums-item-bg pankoubgcolor" :style="{'width': item[2] + '%' }"></text>
						<view class="item-num">
							<text class="color">{{ item[1] }}</text>
							<text>{{ item[0] }}</text>
						</view>
					</view> -->
				</view>

				<view class="index-num-box">
					<view class="index-num-title">
						<text>{{ daymarket.now_price }}</text>
						<text>{{ daymarket.change }}%</text>
					</view>
					<view class="index-title">
						<text>指数{{ daymarket.high }}</text>
						<text>标记{{ daymarket.open }}</text>
					</view>
				</view>

				<view class="nums-list" style="padding-top: 6.5rpx;">
					<!-- <template  v-for="(item , indx) in asks" v-if="indx < 7"> -->
					<template v-for="(item , indx) in asks" v-if="indx < marketNum">
						<market-depth :type="2" :val="item"></market-depth>
					</template>

				</view>
			</view>

			<view class="data-right">
				<view class="right-select">
					<view class="select-box position-select" @click.stop="selectList = !selectList">
						<text class="select-text">{{ status == 1 ? '市价委托' : '限价委托'  }}</text>
						<text class="iconfont">&#xeb6d;</text>
						<view class="select-list" v-show="selectList">
							<text @click.stop="setType(item)"
								:class="['select-list-item' , status === item.value ? 'active-select-item' : '']"
								v-for="(item , index) in range" :key="`range_${index}`">{{ item.text }}</text>
						</view>
					</view>
					<view class="select-box" @click.stop="adjustLever()">
						<text class="select-text">{{ leverName }}{{ multiple }}x</text>
						<text class="iconfont">&#xeb6d;</text>
					</view>
					<!-- <uni-data-select :localdata="range" class="select-item" v-model="value"
						@change="change"></uni-data-select>
					<uni-data-select class="select-item" v-model="value" @change="change"></uni-data-select> -->
				</view>
				<view class="right-input input-item-p">
					<template v-if="status === 1">
						市价
					</template>
					<template v-if="status === 0">
						<view class="target-price">
							<text class="target-price-tag" @click.stop="setNum(1 , target_price)">-</text>
							<input class="input-item" v-model="target_price" type="number">
							<text class="target-price-tag" @click.stop="setNum(2 , target_price)">+</text>
						</view>
					</template>
					<!-- target_price -->
				</view>
				<!-- 下单数量 -->
				<view class="right-input">
					<input ref="shareRef" :focus="isShareFocus" v-show="!percent" class="input-item" @focus="percent = 0" v-model="share"
						type="number">
					<text @click.stop="switchShare" v-show="percent"
						class="input-item input-item-text">{{ percent }}%</text>
					<view class="right-input-icon">
						<text>张</text>
						<text class="icon-link">|</text>
						<text class="switch-icon iconfont">&#xe672;</text>
					</view>
				</view>
				<view class="step-content">
					<step :percent.sync="percent" />
				</view>

				<view class="set-node">
					<view class="set-node-box">
						<view @click.stop="setNodePrice = !setNodePrice"
							:class="['set-node-status' , setNodePrice ? 'active-set' : '']">
							<text class="iconfont" v-show="setNodePrice">&#xe6c5;</text>
						</view>
						<text class="set-node-text">设置止盈止损</text>
					</view>
					<text v-show="setNodePrice" class="set-node-high" @click="$emit('setHighInfo')">高级</text>
				</view>

				<!-- 止盈 -->
				<view class="right-input" v-show="setNodePrice && restrictType === 1">
					<input placeholder-class="placeholder-class"
						:placeholder="`按${ restrictProfitStatus == 1 ? '价格' : '比例' }止盈`" class="input-item"
						v-model="restrictProfitVal" type="number">
					<text v-show="restrictProfitStatus === 2" class="input-item input-item-text">%</text>
					<view class="right-input-icon">
						<text>USDT</text>
						<text class="icon-link">|</text>
						<text class="switch-icon iconfont">&#xe672;</text>
					</view>
				</view>
				<view class="right-input" v-show="setNodePrice && restrictType === 2 && restrictProfitVal >= 0">
					<view class="right-input-icon">
						<text>市价止盈</text>
					</view>
					<view class="input-item input-item-val">
						{{ restrictProfitVal }}
					</view>
				</view>

				<!-- 止损 -->
				<view class="right-input" v-show="setNodePrice && restrictType === 1">
					<input :placeholder="`按${ restrictLossStatus == 1 ? '价格' : '比例' }止损`" class="input-item"
						v-model="restrictLossVal" type="number">
					<text v-show="restrictLossStatus === 2" class="input-item input-item-text">%</text>
					<view class="right-input-icon">
						<text>USDT</text>
						<text class="icon-link">|</text>
						<text class="switch-icon iconfont">&#xe672;</text>
					</view>
				</view>
				<view class="right-input" v-show="setNodePrice && restrictType === 2 && restrictLossVal >= 0">
					<view class="right-input-icon">
						<text>市价止损</text>
					</view>
					<view class="input-item input-item-val">
						{{ restrictLossVal }}
					</view>
				</view>


				<view class="info-item">
					<text class="info-item-lable">成本</text>
					<view class="info-item-val">0.00 USDT</view>
				</view>

				<view class="info-item">
					<text class="info-item-lable">可用</text>
					<view class="info-item-val">
						<text>{{ pagesInfo.user_lever }}USDT</text>
						<text class="info-item-icon iconfont">&#xe672;</text>
					</view>
				</view>
				<view class="info-btns">
					<view class="info-btn-info">
						<text class="info-btn-lable">可做多</text>
						<text
							class="info-btn-val">{{ pagesInfo.lever_share_limit ? pagesInfo.lever_share_limit.max : '--' }}张</text>
						<!-- {{ pagesInfo.lever_share_limit ? pagesInfo.lever_share_limit?.max : '--' }} -->
					</view>
					<view class="info-btn" @click.stop="setSubmitLever(2)">
						买入/做多
					</view>
				</view>
				<view class="info-btns err-btns">
					<view class="info-btn-info">
						<text class="info-btn-lable">可做空</text>
						<text
							class="info-btn-val">{{ pagesInfo.lever_share_limit ? pagesInfo.lever_share_limit.max : '--' }}张</text>
					</view>
					<view class="info-btn" @click.stop="setSubmitLever(1)">
						卖出/做空
					</view>
				</view>
			</view>
		</view>
		<gap height="10rpx" />
		<view class="lable-title">
			<view class="lable-text">
				<text @click.stop="freightSpaceIndex = 1"
					:class="['lable-text-item' , freightSpaceIndex == 1 ? 'active-text-item' : '' ]">持仓({{ myTransaction.length }})</text>
				<text @click.stop="freightSpaceIndex = 2"
					:class="['lable-text-item' , freightSpaceIndex == 2 ? 'active-text-item' : '' ]">当前委托({{ myPedingTransaction.length }})</text>
			</view>
			<view class="iconfont" style="color: #878592;" @click.stop="getHistory()">&#xe613;</view>
		</view>

		<swiper class="swiper-content" :current="freightSpaceIndex - 1"
			:style="{'height': scrollHeight ? `${scrollHeight}px` : '' }" disable-touch>
			<swiper-item class="swiper-item-box">
				<u-list class="swiper-list" :style="{'height': scrollHeight ? `${scrollHeight}px` : '' }">
					<freightSpace ref="freightSpaceRef" :myTransaction="myTransaction"
						@closeLeverSuccess="closeLeverSuccess" @setDepot="setDepot" :currency="currencyVal"
						v-bind="$attrs" v-on="$listeners" />
				</u-list>
			</swiper-item>
			<swiper-item>
				<u-list class="swiper-list" :style="{'height': scrollHeight ? `${scrollHeight}px` : '' }">
					<entrust :myPedingTransaction="myPedingTransaction" @closeLeverSuccess="closeLeverSuccess" />
				</u-list>
			</swiper-item>
		</swiper>
		<!-- <template v-if="freightSpaceIndex === 1">
			
		</template>
		<template v-if="freightSpaceIndex === 2">
			
		</template> -->

		<!-- 侧边抽屉 -->
		<drawer ref="drawerRef" />

		<!-- 调整杠杆 -->
		<lever ref="leverRef" :lever-num.sync="multiple" :leverName.sync="leverName" />

		<unopen ref="unopenRef" @confirm="confirm" textAlign="left" :title="title" cancelBtn
			:content="closeLeverContent" />
		<unopen ref="placeOrderRef" @confirm="confirmPlaceOrder" title="下单确认" cancelBtn content="确定要下单吗？" />
	</view>
</template>

<script>
	import drawer from "./../modules/drawer.vue"
	import lever from "./lever.vue"
	import freightSpace from "./freight-space.vue"
	import entrust from "./entrust.vue"
	import {
		Api_setSubmitLever,
	} from "@/api/index.js"
	import {
		mapGetters
	} from 'vuex'
	export default {
		components: {
			drawer,
			lever,
			freightSpace,
			entrust
		},
		props: {
			myTransaction: {
				type: Array,
				default: () => {
					return []
				}
			},
			pagesInfo: {
				type: Object,
				default: () => {
					return {}
				}
			},
			myPedingTransaction: {
				type: Array,
				default: () => {
					return []
				}
			},
		},
		data() {
			return {
				selectList: false,
				value: '市价委托',
				range: [{
						value: 1,
						text: '市价委托'
					},
					{
						value: 0,
						text: '限价委托'
					},
					// {
					// 	value: '计划委托',
					// 	text: '计划委托'
					// },
				],

				leverName: '全仓',


				freightSpaceIndex: 1,
				marketNum: 7,

				entrustList: [],
				scrollHeight: '',
				percent: 0,
				// 下单参数
				multiple: 100, // 	逐仓倍数
				isShareFocus:false,	//是否自动获取焦点
				share: '', // 张数
				status: 1, // 状态，填1. 1市价交易,为0则是挂单交易
				target_price: '',

				// 平仓 - 反向开仓
				closeLeverContent: '',
				title: '平仓',
				restrict: '',
				setNodePrice: false,
				// 止盈
				restrictProfitVal: '',
				restrictProfitStatus: 1, // 按价格止盈 ， 2 ： 比例止盈
				restrictType: 1, // 1 普通输入 ， 2 市价（禁止输入，只能通过高级设置）
				// 止损
				restrictLossVal: '',
				restrictLossStatus: 1, // 按价格止损 ， 2 ： 比例止损

			};
		},
		watch: {

			setNodePrice: {
				handler(newStatus) {
					if (newStatus) {
						this.marketNum = 9
					} else {
						this.marketNum = 7
					}
				}
			},
			PageContentHeight: {
				handler(newHeigth) {
					this.scrollHeight = newHeigth - uni.upx2px(100) - this.tabBarHeight;
				},
				immediate: true
			},
			percent(newNums) {
				// const maxNums = this.pagesInfo?.lever_share_limit?.max
				// if (newNums >= 0 && maxNums) {
				// 	this.share = this.$decimalNum.mul(maxNums, newNums / 100);
				// 	console.log('this.share = ', this.share)
				// }
				// 
			},

		},
		computed: {
			...mapGetters([
				"stocksColor",
				'bids',
				'asks',
				'daymarket',
				'tabBarHeight',
				'PageContentHeight',
				'currencyVal',
				'contractAccount'
			])
		},
		created() {

		},
		mounted() {
			this.$eventBus.$on('placeOrder', (val) => {
				// 止盈
				this.restrictProfitVal = val.target_profit_price;
				this.restrictProfitStatus = 1
				// 止损
				this.restrictLossVal = val.stop_loss_price;
				// restrictLossStatus: 1, // 按价格止损 ， 2 ： 比例止损
				if (this.restrictProfitVal || this.restrictLossVal) {
					this.restrictType = 2 // 按价格止盈 ， 2 ： 比例止盈
				} else {
					this.restrictType = 1
				}
			});
		},
		methods: {



			getData() {
				this.closeLeverSuccess();

			},
			setNum(type) {
				if (this.status === 0) {
					// 只有限价才去计算
					if (!this.target_price) {
						this.target_price = 0
					};
					switch (type) {
						case 1:
							this.target_price = this.$decimalNum.sub(this.target_price, 0.01);
							break;
						case 2:
							this.target_price = this.$decimalNum.add(this.target_price, 0.01);
							break;
					}
				}

			},
			setType(item) {
				this.status = item.value;
				this.selectList = false
				if (this.status === 0) {
					this.target_price = this.daymarket.now_price;
				} else {
					this.target_price = ''
				}
			},
			// 平仓成功
			closeLeverSuccess() {
				this.$emit('refreshData')
				// this.getLeverDeal()

			},
			openDrawer() {
				this.$refs.drawerRef.open();
			},
			change(e) {
				console.log("e:", e);
			},
			adjustLever() {
				this.$nextTick(() => {
					this.$refs.leverRef.open()
				})
			},


			// 下单确认
			setSubmitLever(type) {
				this.$nextTick(() => {
					this.$refs.placeOrderRef.open(type)
				})

			},
			// 确认下单
			confirmPlaceOrder(type) {
				const setData = {
					status: this.status,
					legal_id: this.currencyVal.legal_id,
					currency_id: this.currencyVal.currency_id,
					multiple: this.multiple,
					share: this.percent ? `${this.percent}%` : this.share,
					type: type
				}
				if (this.setNodePrice) {
					setData.target_profit_price = this.restrictProfitVal // 【5-18】止盈,选填
					setData.stop_loss_price = this.restrictLossVal //  5-18】止损,选填
				};
				if (this.status === 0) {
					setData.target_price = this.target_price
				}
				uni.showLoading({
					title: '',
					mask: true
				})
				Api_setSubmitLever(setData).then(res => {
					// this.getLeverDeal()
					uni.showToast({
						icon: 'none',
						title: '下单成功'
					})
					setTimeout(() => {
						uni.hideToast()
						this.$emit('refreshData')
					}, 500)
				}).finally(() => {
					uni.hideLoading()
				})
			},

			// 查看合约历史
			getHistory() {
				uni.navigateTo({
					url: `/pages/contract/history/index?legal_id=${this.currencyVal.legal_id}&currency_id=${this.currencyVal.currency_id}`
				})
			},

			// 平仓 - 反向开仓
			setDepot(obj) {
				this.closeLeverContent = obj.closeLeverContent;
				this.title = obj.title;
				this.$nextTick(() => {
					this.$refs.unopenRef.open()
				})
			},

			confirm() {
				this.$nextTick(() => {
					this.$refs.freightSpaceRef.confirm();
				})
			},

			lookDetails() {
				if (this.currencyVal && this.currencyVal.currency_id && this.currencyVal.legal_id) {
					uni.navigateTo({
						url: '/pages/contract/sustainability/details'
					})
				}
			},
			// 合约设置
			setContract() {
				this.$emit('setContract')
			},

			// 切换张数
			// <input ref="shareRef" v-show="!percent" class="input-item" @focus="percent = 0" v-model="share" type="number">
			// <text @click.stop="switchShare" v-show="percent" class="input-item input-item-text">{{ percent }}%</text>
			switchShare() {
				this.percent = 0
				this.isShareFocus = false;
				this.$nextTick(() => {
					this.isShareFocus = true;
				});
			}


		},
	}
</script>
<style lang="scss" scoped>
	.contract-box {
		.contract-title {
			padding: 5rpx $pages-padding 0;
			min-height: 78rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.contract-item {
				display: flex;
				align-items: center;
				flex-shrink: 0;

				.title-iocn {
					width: 28rpx;
					height: 24rpx;
					display: flex;
					flex-direction: column;
					// align-items: center;
					justify-content: space-between;

					.title-iocn-item {
						width: 100%;
						height: 4rpx;
						border-radius: 2rpx;
						background: #111111;

						&:first-child {
							width: 50%;
						}
					}
				}

				.title-text {
					font-size: 37rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					text-align: left;
					color: #141213;
					line-height: 1.2;
					letter-spacing: 0.74rpx;
					padding-left: 19rpx;
				}

				.title-ratio {
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					color: #808080;
					line-height: 33rpx;
				}

				.ratio-icon {
					width: 31rpx;
					height: 33rpx;
					margin-left: 22rpx;
				}

			}


		}

		.account-box {
			width: 100%;
			padding: 21rpx $pages-padding;
			display: flex;
			flex-wrap: wrap;
			background-color: #F6F6F6;


			.account-item {

				display: flex;
				flex-direction: column;
				flex-shrink: 0;

				&:nth-child(3n) {
					width: 40%;
					text-align: right;
				}

				&:nth-child(3n - 1) {
					width: 30%;
					text-align: right;
				}

				&:nth-child(3n - 2) {
					width: 30%;
				}

				&:nth-child(n + 4) {
					margin-top: 20rpx;
				}

				.account-title {

					font-size: 20rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 600;
					color: #807e89;
					line-height: 30rpx;
					height: 30rpx;

					.text {
						border-bottom: 2rpx dashed #707070;
					}
				}

				.account-num {
					font-size: 22rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					color: #1a1a1a;
					height: 33rpx;
					line-height: 33rpx;
					margin-top: 11rpx;
				}
			}


		}

	}

	.data-box {
		width: 100%;
		padding: 25rpx $pages-padding 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: stretch;

		.data-left {
			width: 303rpx;

			.nums-title {
				width: 100%;
				height: 67rpx;

				.flex {
					display: flex;
					justify-content: space-between;
					align-items: center;
					line-height: 33rpx;

					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					color: #807e89;
				}
			}

			// .<view class="nums-title">
			// 		<view class="left-title flex">
			// 			<text>价格</text>
			// 			<text>数量</text>
			// 		</view>
			// 		<view class="subhead-title flex">
			// 			<text>(USDT)</text>
			// 			<text>(张)</text>
			// 		</view>
			// 	</view>
			// .left-title {
			// 	font-size: 24rpx;
			// 	font-family: PingFang SC, PingFang SC-Bold;
			// 	font-weight: 700;
			// 	color: #807e89;
			// 	line-height: 33rpx;
			// }

			// .subhead-title {
			// 	font-size: 24rpx;
			// 	font-family: PingFang SC, PingFang SC-Bold;
			// 	font-weight: 700;
			// 	color: #807e89;
			// 	line-height: 33rpx;
			// }


			.nums-list {
				width: 100%;
				padding: 10rpx 0 4rpx;
				min-height: 318rpx;

				.nums-item {
					width: 100%;
					position: relative;
					height: 40rpx;
					margin-bottom: 4rpx;

					.nums-item-bg {
						position: absolute;
						top: 0;
						right: 0;
						z-index: 1;
						height: 100%;
					}

					.item-num {
						width: 100%;
						height: 100%;
						position: absolute;
						top: 0;
						right: 0;
						z-index: 2;
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 22rpx;
						font-family: PingFang SC, PingFang SC-Bold;
						font-weight: 700;
						line-height: 33rpx;
						color: #1a1a1a;

						text+text {

							font-weight: 700;
							line-height: 33rpx;
						}
					}
				}
			}

			// <view class="nums-list">
			// 	<view class="nums-item">
			// 		<text class="nums-item-bg"></text>
			// 		<text class="item-num">28516.8</text>
			// 		<text class="item-num">28516.8</text>
			// 	</view>
			// </view>

		}

		.data-right {
			width: 365rpx;

			// background-color: green;
			.right-select {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.select-box {
					width: 175rpx;
					height: 50rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					background-color: #f1f1f1;
					padding: 0 3px;
					border-radius: 8rpx;

					.select-text {
						font-size: 26rpx;
						font-weight: 700;
					}

					.iconfont {
						font-size: 20rpx;
						color: $Theme-Color;
					}
				}

				.position-select {
					position: relative;

					.select-list {
						position: absolute;
						left: 0;
						top: 50rpx;
						width: 185rpx;
						display: flex;
						flex-direction: column;
						background-color: #fff;
						z-index: 1;

						.select-list-item {
							width: 100%;
							height: 70rpx;
							line-height: 70rpx;
							padding: 0 30rpx;
							font-size: 22rpx;
							font-weight: bold;
							color: #c1c1c1;
						}

						.active-select-item {
							background-color: #f1f1f1;
							color: #000;
						}
					}
				}

				// <view class="select-box">
				// 	<text class="select-text">限价委托</text>
				// 	<text class="iconfont">&#xe601;</text>
				// </view>
				// <view class="select-box">
				// 	<text class="select-text">限价委托</text>
				// 	<text class="iconfont">&#xe601;</text>
				// </view>
				// .select-item {
				// 	width: 175rpx !important;
				// 	height: 50rpx;
				// 	flex: 0;

				// 	::v-deep .uni-stat-box {
				// 		width: 175rpx !important;
				// 		height: 48rpx;

				// 		.uni-select {

				// 			width: 175rpx !important;
				// 			height: 48rpx;

				// 			.uni-select__input-box {
				// 				width: 100%;
				// 				height: 48rpx !important;
				// 			}
				// 			.uniui-clear{
				// 				display: none;
				// 			}
				// 		}
				// 	}

				// }
			}

			.right-input {
				width: 100%;
				height: 76rpx;
				background: #efefef;
				border-radius: 10rpx;
				margin-top: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 20rpx;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC-Bold;
				font-weight: 700;
				color: #808080;
				line-height: 40rpx;

				.input-item {
					height: 100%;
					font-size: 24rpx;
					flex: 1;
					color: #000;
				}

				.input-item-val {
					display: flex;
					justify-content: flex-end;
					align-items: center;
				}

				.placeholder-class {
					font-size: 24rpx;
				}

				.input-item-text {
					display: flex;
					align-items: center;
				}

				.input-item-p {
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					color: #808080;
					line-height: 40rpx;
					opacity: 0.3;
				}

				.right-input-icon {
					flex-shrink: 0;
					font-size: 26rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					// font-weight: 700;
					color: #808080;
					line-height: 40rpx;
					display: flex;
					align-items: center;

					.icon-link {
						font-size: 20rpx;
						margin: 0 15rpx;
						color: $Theme-Color;
					}

					.icon {
						width: 30rpx;
						height: 26rpx;
						font-size: 18rpx;
					}
				}

				// <view class="target-price">
				// 	<text class="target-price-tag">-</text>
				// 	<input class="input-item" v-model="target_price" type="number">
				// 	<text class="target-price-tag">+</text>
				// </view>
				.target-price {
					width: 100%;
					height: 100%;
					display: flex;
					justify-content: space-between;
					align-items: stretch;


					.target-price-tag {
						flex-shrink: 0;
						width: 50rpx;
						height: 100%;
						text-align: center;
						font-size: 26rpx;
						color: $Theme-Color;
						display: flex;
						align-items: center;


						&:last-child {
							justify-content: flex-end;
						}
					}

					.input-item {
						flex: 1;
						height: 100%;
						font-size: 24rpx;
						text-align: center;
						// 		.nums-inp {
						// 			width: 100%;
						// 			height: 100%;
						// 			text-align: center;
						// 			font-size: 28rpx;
						// 			font-weight: bold;
						// 		}

						// 		.nums-t {
						// 			position: absolute;
						// 			left: 0;
						// 			top: 0;
						// 			width: 100%;
						// 			height: 100%;
						// 		}

						// <input class="nums-inp" type="text" v-model="leverNum">
						// <text class="nums-inp-tag">X</text>
					}
				}
			}

			.step-content {
				padding: 24rpx 0 35rpx;
			}

			.set-node {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.set-node-box {
					display: flex;
					align-items: center;
				}

				.set-node-high {
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					color: $Theme-Color;
					line-height: 1.1;
				}

				.set-node-status {
					width: 27rpx;
					height: 27rpx;
					background: #e6e6e8;
					border-radius: 2rpx;
				}

				.active-set {
					background-color: $Theme-Color;
					display: flex;
					justify-content: center;
					align-items: center;

					.iconfont {
						font-size: 26rpx;
						color: #fff;
					}
				}

				.set-node-text {

					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC-Regular;
					font-weight: 400;
					color: #808080;
					line-height: 1.1;
					margin-left: 14rpx;

					border-bottom: 2rpx dashed #707070;
				}
			}

			.info-item {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 26rpx;
				padding: 32rpx 0 0;
				line-height: 1.1;

				.info-item-lable {
					color: $SizeColor3;
					border-bottom: 1rpx dashed #707070;
				}

				.info-item-val {
					font-size: 22rpx;
					font-weight: bold;
					display: flex;
					align-items: center;

					.info-item-icon {
						font-size: 20rpx;
						margin-left: 20rpx;
						width: 30rpx;
						height: 30rpx;
						background-color: $Theme-Color;
						color: #fff;
						text-align: center;
						line-height: 30rpx;
						border-radius: 6rpx;
					}
				}
			}

			.info-btns {
				width: 100%;
				padding-top: 16rpx;

				.info-btn-info {
					display: flex;
					justify-content: space-between;
					font-size: 24rpx;
					padding-bottom: 10rpx;

					.info-btn-lable {
						color: $SizeColor3;
					}

					.info-btn-val {
						font-weight: bold;
					}

					// <view class="info-btn-info">
					// 	<text class="info-btn-lable">可做多</text>
					// 	<text class="info-btn-val">33719张</text>
					// </view>
				}

				.info-btn {
					width: 100%;
					height: 80rpx;
					background-color: $Theme-Color;
					text-align: center;
					line-height: 80rpx;
					font-size: 30rpx;
					color: #fff;
					border-radius: 10rpx;
					font-weight: bold;
				}
			}

			.err-btns {
				.info-btn {
					background-color: $Theme-Color3;
				}
			}

		}
	}

	.switch-icon {
		color: $Theme-Color;
		font-size: 26rpx;
	}


	.lable-title {
		width: 100%;
		height: 100rpx;
		border-bottom: 1rpx solid $border-color;
		padding: 0 $pages-padding;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.lable-text {
			height: 100%;
			display: flex;
			align-items: stretch;

			.lable-text-item {
				height: 100%;
				display: flex;
				align-items: center;
				font-size: 28rpx;

				&:first-child {
					margin-right: 40rpx;
				}
			}

			.active-text-item {
				font-size: 34rpx;
				font-weight: bold;
				color: $Theme-Color;
				position: relative;

				&::before {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					width: 40rpx;
					height: 8rpx;
					background-color: $Theme-Color;
					transform: translateX(-50%);
					border-radius: 4rpx;
				}
			}
		}
	}

	.index-num-box {
		height: 115rpx;
		width: 100%;
		border: 1rpx solid $border-color;
		border-left: none;
		border-right: none;
		display: flex;
		flex-direction: column;
		justify-content: center;

		.index-num-title {
			height: 50rpx;
			line-height: 50rpx;
			display: flex;
			justify-content: space-between;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			color: #20b482;


			text {
				&:first-child {
					font-size: 36rpx;
				}

				&:last-child {
					font-size: 28rpx;
				}
			}
		}

		.index-title {
			height: 28rpx;
			display: flex;
			justify-content: space-between;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;

			text {
				font-size: 20rpx;
				line-height: 28rpx;
				color: #808080;
				border-bottom: 1px dashed #808080;
			}
		}

		// .index-num-title {

		// 	font-size: 36rpx;
		// 	font-family: PingFang SC, PingFang SC-Bold;
		// 	font-weight: 700;
		// 	color: #20b482;
		// 	line-height: 50rpx;

		// 	text+text {
		// 		font-size: 28rpx;
		// 		font-family: PingFang SC, PingFang SC-Bold;
		// 		font-weight: 700;
		// 		color: #20b482;
		// 		line-height: 40rpx;
		// 	}
		// }

		// .index-title {
		// 	font-size: 20rpx;
		// 	color: #808080;
		// 	line-height: 1.2;

		// 	text {
		// 		border-bottom: 2rpx dashed #707070;
		// 		display: flex;
		// 		align-items: center;
		// 	}

		// 	padding-bottom: 18rpx;
		// 	border-bottom: 1px solid #f2f2f2;
		// 	// &:first-child{
		// 	// 	text-align: right;
		// 	// }
		// }

	}
</style>