BiKing/pages/contract/shortcut/index.vue

<template>
	<view>
		<view class="contract-title" :rise-fall="stocksColor">
			<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-price" :class="$setColor(daymarket.now_price)">
				<text class="color">{{ daymarket.now_price }}</text>
				<text class="color" v-show="daymarket.change">{{ daymarket.change }}%</text>
			</view>
			<view class="contract-item">
				<text class="iconfont">&#xe625;</text>
			</view>
		</view>

		<view class="iframe-box">
			<template v-if="currencyVal.legal_id">
					<k-line ></k-line>
			</template>
		</view>
		<gap />

		<view class="swiper-title">
			<view class="swiper-lable">
				<template v-for="(item , index) in lableList">
					<text @click.stop="lableIndex = index"
						:class="['swiper-item', lableIndex === index ? 'active-swiper-item' : '' ]">{{ item }}</text>
				</template>
			</view>
			<view class="iconfont" @click.stop="getHistory()">&#xe613;</view>
		</view>
		<!-- {{  pagesInfo }} -->
		<view class="shortcut">
			<swiper class="swiper-content" :current="lableIndex"
				:style="{'height': scrollHeight ? `${scrollHeight}px` : '' }" disable-touch>
				<swiper-item class="swiper-item-box">
					<u-list>
						<view class="shortcut-open">
							<view class="shortcut-type">
								<view class="type-box">
									<text class="type-item active-type-item">市价委托</text>
									<text class="type-item">计划委托</text>
								</view>
								<view class="type-times" @click.stop="adjustLever()">
									{{leverName}}{{ multiple }}x
									<text class="iconfont">&#xeb6d;</text>
								</view>
							</view>

							<view class="shortcut-price">
								<view class="price-box">
									<text class="price-lable">价格</text>
									<view class="price-info">
										<text class="price-num">{{ daymarket.now_price }}</text>
										<text class="price-tag">USDT</text>
									</view>
								</view>
								<view class="price-box">
									<text class="price-lable">保证金</text>
									<text @click.stop="switchShare" class="price-inp price-inp-text"
										v-show="percent">{{ percent }}%</text>
									<input v-show="!percent" :focus="isShareFocus" class="price-inp" type="number"
										v-model="caution_money">
									<view class="price-info">
										USDT
									</view>
								</view>
								<view class="step-content">
									<step :percent.sync="percent" />
								</view>
							</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>
							</view>

							<view class="set-profit-loss" v-show="setNodePrice">
								<!-- 止盈 -->
								<view class="set-profit-loss-title">
									<text class="title-name">止盈</text>
									<view class="title-btn" @click.stop="() => {
										restrictProfitVal = ''
										restrictProfitStatus === 1 ? restrictProfitStatus = 2 : restrictProfitStatus = 1;
									}">
										<text class="iconfont">&#xe672;</text>
										<text>按{{ restrictProfitStatus === 1 ? '价格' : '比例' }}设置</text>
									</view>
								</view>
								<view class="profit-loss-input">
									<text>请输入止盈价格</text>
									<input class="input-item" v-model="restrictProfitVal" type="number">
									<text>{{ restrictProfitStatus === 1 ? 'USDT' : '%' }}</text>
								</view>
								<!-- 止损 -->
								<view class="set-profit-loss-title">
									<text class="title-name">止盈</text>
									<view class="title-btn" @click.stop="() => {
											restrictLossVal = ''
											restrictLossStatus === 1 ? restrictLossStatus = 2 : restrictLossStatus = 1;
										}">
										<text class=" iconfont">&#xe672;</text>
										<text>按{{ restrictLossStatus === 1 ? '价格' : '比例' }}设置</text>
									</view>
								</view>
								<view class="profit-loss-input">
									<text>请输入止损价格</text>
									<input class="input-item" v-model="restrictLossVal" type="number">
									<text>{{ restrictLossStatus === 1 ? 'USDT' : '%' }}</text>
								</view>
							</view>


							<view class="shortcut-usable">
								<view class="usable-info">
									可用：{{ pagesInfo.user_lever }} USDT
								</view>
								<view class="usable-btn" @click.stop="PayCurrency()">
									充值
								</view>
							</view>

							<view class="shortcut-btns">
								<view class="shortcut-btn" @click.stop="setSubmitLever(2)">
									买入/做多
								</view>
								<view class="shortcut-btn" @click.stop="setSubmitLever(1)">
									卖出/做空
								</view>
							</view>
						</view>

					</u-list>
				</swiper-item>
				<swiper-item>
					<u-list class="swiper-list" :style="{'height': scrollHeight ? `${scrollHeight}px` : '' }">
						<template v-if="myFast && myFast.length > 0">
							<view class="lable-title">
								<text class="lable-title-text">仓位信息</text>
								<text class="lable-title-btn" @click.stop="setCloseLeverAll()">全部平仓</text>
							</view>
							<view class="account-box" :rise-fall="stocksColor">
								<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" :class="[$setColor(pagesInfo.profits_total || '0.00')]">
									<view class="account-title">
										<text class="text">未实现亏盈(USDT)</text>
									</view>
									<text class="account-num color">{{ pagesInfo.profits_total }}</text>
								</view>
							</view>


							<template v-for="item in myFast">
								<view class="content-box" :rise-fall="stocksColor">
									<view class="content-top">
										<view class="top-left">
											<view class="top-left-title">
												<text>{{ item.symbol }}</text>
												<text v-if="item.settled == 0">永续</text>
												<text v-else-if="item.settled == 9">快捷合约</text>

											</view>
											<view class="top-left-b">
												<text>{{ item.multiple }}倍杠杆</text>
												<text class="top-left-b-tag">{{ item.type_name }}</text>
											</view>
										</view>

										<view class="top-right" :class="[$setColor(item.profits || '0.00')]">
											<text class="color">{{ item.profits }}</text>
											<text
												class="top-right-float color"><text>浮动盈亏</text>{{ $getChange(item , 4) }}%</text>
										</view>
									</view>
									<view class="content-info">
										<view class="info-item">
											<text class="info-item-lable">保证金(USDT)</text>
											<text class="info-item-val">{{ item.caution_money }}</text>
										</view>
										<view class="info-item">
											<text class="info-item-lable">开仓价格(USDT)</text>
											<text class="info-item-val">{{ item.origin_price }}</text>
										</view>
										<view class="info-item">
											<text class="info-item-lable">预估平仓价格(USDT)</text>
											<text class="info-item-val">{{item.update_price}}</text>
										</view>
										<view class="info-item">
											<text class="info-item-lable">过夜费</text>
											<text class="info-item-val">{{item.overnight_money}}</text>
										</view>
										<view class="info-item">
											<text class="info-item-lable">风险率(%)</text>
											<text class="info-item-val">{{ $getChange(item , 2) }}%</text>
											<!-- {{ item.caution_money }} -->
										</view>

										<!-- <view class="info-item">
											<text class="info-item-lable">预计止损(USDT)</text>
											<text class="info-item-val"
												@click.stop="setRestrict(item)">{{ item.stop_loss_price || '--' }} <text
													class="iconfont">&#xe610;</text></text>
										</view>
										<view class="info-item">
											<text class="info-item-lable">预计止盈(USDT)</text>
											<text class="info-item-val"
												@click.stop="setRestrict(item)">{{ item.target_profit_price || '--' }} <text
													class="iconfont">&#xe610;</text> </text>
										</view> -->
										<view class="info-item">
											<text class="info-item-lable">创建时间</text>
											<text class="info-item-val">{{ item.transaction_time }}</text>
										</view>
									</view>
									<view class="content-btns">
										<view class="content-btn-item" @click.stop="setCloseLever(item)">
											平仓
										</view>
										<!-- @click.stop="setInversion(item)" -->
										<view class="content-btn-item">
											反向开仓
										</view>
									<!-- 	<view class="content-btn-item">
											加仓
										</view> -->
									</view>
									<view class="set-stop">
										<view class="stop-left" @click.stop="setRestrict(item)">
											<text>止盈/止损</text>
											<text
												class="stop-num">{{ item.target_profit_price || '--' }}/{{ item.stop_loss_price || '--'}}</text>
											<text class="iconfont">&#xe610;</text>
										</view>
										<view class="stop-right" @click.stop="$emit('shareContent' , item)">
											<text class="icon-size iconfont">&#xe8b0;</text>
											<text class="icon-size">分享</text>
										</view>
									</view>
								</view>
								<gap />
							</template>
						</template>
					</u-list>
				</swiper-item>
			</swiper>



		</view>

		<drawer ref="drawerRef" />
		<restrictPopup ref="restrictRef" @setSuccess="setSuccess" />
		<lever ref="leverRef" :leverNum.sync="multiple" :leverName.sync="leverName" />
		<unopen ref="placeOrderRef" @confirm="confirmPlaceOrder" title="下单确认" cancelBtn content="确定要下单吗？" />
		<unopen ref="unopenRef" @confirm="confirm" textAlign="left" :title="unopenSolt.title" cancelBtn
			:content="unopenSolt.closeLeverContent" />

		<popupHint ref="hintRef" title="快捷合约">
			<template #hintContent>
				<view class="">
					快捷合约是币王交易所为用户带来的新型区块链合约衍生品，有闪电开平仓、持仓稳定、抗市场干扰的优势，主要特点如下：
				</view>
				<!-- <view class="">
					赠金获取方式:
				</view> -->

				<view class="content-list">
					<text>1. 开仓/平仓流程及功能与永续一致</text>
					<text>2. 五交割期</text>
					<text>3. 市价开仓100%快速成交</text>
					<text>4. 开平仓价即为预估成交价</text>
					<text>5. 每天4：00（UTC+8）收取0.02%过夜费</text>
				</view>
				<view class="">
					更多内容请点击<text class="explain" @click.stop="readPactInfo(189)">《快捷合约》</text>
				</view>

				<view class="hite-box" @click.stop="readPact = !readPact">
					<text class="box">
						<text v-show="readPact" class="iconfont2">&#xe6c5;</text>
					</text>
					<text>不在提示</text>
				</view>
				<view class="confirm-btn" @click.stop="confirmHiteBtn">
					确定
				</view>
			</template>
		</popupHint>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import {
		Api_setSubmitLever,
		Api_getLeverDeal,
		Api_getRegister,
		Api_setBatchClose,
		Api_setCloseLever
	} from "@/api/index.js"

	import lever from "../sustainability/lever.vue"
	import drawer from "./../modules/drawer.vue"
	import popupHint from "../modules/popup-hint.vue"

	import restrictPopup from "./../modules/restrict.vue"
	export default {
		name: 'shortcut',
		components: {
			lever,
			drawer,
			restrictPopup,
			popupHint
		},
		data() {
			return {
				readPact: false,
				closeLeverItem: null,
				lableList: [
					'开仓',
					'当前持仓'
				],
				lableIndex: 0,
				leverName: '逐仓',
				multiple: 100, // 逐仓倍数
				caution_money: '',

				status: 1, // 状态，填1. 1市价交易,为0则是挂单交易
				scrollHeight: 0,
				unopenSolt: {
					title: '',
					content: ''
				},

				percent: 0,
				isShareFocus: false,


				// 止盈止损
				setNodePrice: false,
				// 止盈
				restrictProfitVal: '',
				restrictProfitStatus: 1, // 按价格止盈 ， 2 ： 比例止盈
				// 止损
				restrictLossVal: '',
				restrictLossStatus: 1, // 按价格止损 ， 2 ： 比例止损
			};
		},
		props: {
			myFast: {
				type: Array,
				default: () => {
					return []
				}
			},
			pagesInfo: {
				type: Object,
				default: () => {
					return {}
				}
			},

			rateProfitsTotal: {
				type: Object,
				default: () => {
					return {}
				}
			},
		},
		computed: {
			...mapGetters([
				'currencyVal',
				'daymarket',
				'stocksColor',
				'PageContentHeight',
				'tabBarHeight',
				'contractAccount'
			]),
		},
		mounted() {

		},
		watch: {
			currencyVal: {
				handler(newCurrency) {
					if (newCurrency && newCurrency?.legal_id) {
						this.init()
					}
				},
				deep: true,
				immediate: true
			},
			PageContentHeight: {
				handler(newHeigth) {
					if (newHeigth) {
						console.log('newHeigth = ', newHeigth)
						this.scrollHeight = newHeigth - uni.upx2px(100) - this.tabBarHeight;
					}
				},
				deep: true,
				immediate: true
			},
		},
		created() {
			this.openPactPopup()
		},
		methods: {
			init() {
				// this.getLeverDeal()
				// this.getRegister()
			},
			// 切换张数
			switchShare() {
				this.percent = 0
				this.isShareFocus = false;
				this.$nextTick(() => {
					this.isShareFocus = true;
				});
			},
			// getRegister() {
			// 	Api_getRegister({
			// 		status: 1,
			// 		legal_id: this.currencyVal.legal_id,
			// 		currency_id: this.currencyVal.currency_id,
			// 		settled: 9,
			// 		limit: 1000
			// 	}).then(res => {
			// 		console.log('Api_getRegister = ', res)
			// 	})
			// },
			confirmBtn() {

			},
			openDrawer() {
				this.$nextTick(() => {
					this.$refs.drawerRef.open();
				})
			},
			setSubmitLever() {
				this.$nextTick(() => {
					this.$refs.placeOrderRef.open()
				})
			},
			// 确认下单
			confirmPlaceOrder(type) {
				const obj = {
					legal_id: this.currencyVal.legal_id,
					currency_id: this.currencyVal.currency_id,
					multiple: this.multiple,
					caution_money: this.percent ? `${this.percent}%` : this.caution_money,
					status: this.status
				}
				if (this.setNodePrice) {
					// 设置止盈止损
					// // 止盈
					// restrictProfitVal: '',
					// restrictProfitStatus: 1, // 按价格止盈 ， 2 ： 比例止盈
					// // 止损
					// restrictLossVal: '',
					// restrictLossStatus: 1, // 按价格止损 ， 2 ： 比例止损
					obj.target_profit_price = this.restrictProfitStatus === 1 ? this.restrictProfitVal :
						`${restrictProfitVal}%`;
					obj.stop_loss_price = this.restrictLossStatus === 1 ? this.restrictLossVal : `${restrictLossVal}%`;


				}
				uni.showLoading({
					title: '',
					mask: true
				})
				Api_setSubmitLever(obj).then(res => {
					setTimeout(() => {
						uni.showToast({
							title: '下单成功',
							icon: 'none'
						})
						setTimeout(() => {
							uni.hideToast()
							this.setSuccess()
						}, 300)
					}, 201)
				}).finally(() => {
					setTimeout(() => {
						uni.hideLoading()
					}, 200)
				})
			},
			// 设置止盈止损
			setRestrict(item) {
				this.$nextTick(() => {
					this.$refs.restrictRef.open(item)
				})
			},
			setSuccess() {
				this.$emit('refreshData')
			},
			setCloseLever(item) {
				// this.closeLeverItem = item;
				// this.unopenSolt = {
				// 	title: '平仓',
				// 	closeLeverContent: '如果存在平仓挂单(限价止盈止损)，将会在全平前被撤单,确定平仓吗？'
				// }
				// this.setDepot();
				this.$emit('setCloseLever', item)
			},
			setInversion() {

				this.closeLeverItem = -1;
				this.unopenSolt = {
					title: '反向开仓',
					closeLeverContent: '如果存在平仓挂单(限价止盈止损)，将会在全平前被撤单,确定反向开仓吗？',
				}
				this.setDepot();
			},
			setCloseLeverAll() {
				this.closeLeverItem = null;
				this.unopenSolt = {
					title: '全部平仓',
					closeLeverContent: '如果存在平仓挂单(限价止盈止损)，将会在全平前被撤单,确定全部平仓吗？',
				}
				this.setDepot();
				// this.setDepot();
				// this.title = '全部平仓';
				// this.closeLeverContent = '';
				// this.closeLeverItem = null;
				// this.$refs.unopenRef.open();
			},
			// 平仓 - 反向开仓
			setDepot() {
				this.$nextTick(() => {
					this.$refs.unopenRef.open()
				})
			},

			confirm() {
				if (this.myFast.length > 0) {
					if (this.closeLeverItem && this.closeLeverItem !== -1) {
						// 平仓
						Api_setCloseLever({
							id: this.closeLeverItem.id
						}).then(res => {
							setTimeout(() => {
								uni.showToast({
									title: '平仓成功',
									icon: 'none'
								})
								setTimeout(() => {
									uni.hideToast();
									this.setSuccess()
								}, 300)
							}, 201)
						}).finally(() => {
							setTimeout(() => {
								uni.hideLoading()
							}, 200)
						})
					} else if (this.closeLeverItem == -1) {
						// 反向开仓

					} else {
						// 全部平仓
						Api_setBatchClose({
							type: 0,
							currency_id: this.currencyVal.currency_id
						}).then(res => {
							setTimeout(() => {
								uni.showToast({
									title: '平仓成功',
									icon: 'none'
								})
								setTimeout(() => {
									uni.hideToast();
									this.setSuccess()
								}, 300)
							}, 201)
						}).finally(() => {
							setTimeout(() => {
								uni.hideLoading()
							}, 200)
						})
					}

				}
			},
			adjustLever() {
				this.$nextTick(() => {
					this.$refs.leverRef.open()
				})
			},
			openPactPopup() {
				const readPactObj = this.$getStorageSync('contractReadPact');
				if (!readPactObj || !readPactObj.rapidPact) {
					this.readPact = false
					this.$nextTick(() => {
						this.$refs.hintRef.open()
					})
				}

			},
			// 提示弹框确认按钮
			confirmHiteBtn() {
				// t.readPact
				const readPactObj = this.$getStorageSync('contractReadPact') || {}

				readPactObj.rapidPact = this.readPact
				this.$setStorageSync('contractReadPact', readPactObj)
				this.$refs.hintRef.close();
			},
			// 阅读合约
			readPactInfo(id) {
				this.$readArticleInfo(id)
			},
			// 充值
			PayCurrency() {
				uni.navigateTo({
					url: '/pages/content/select-currency?type=recharge'
				})
			},
			// 获取历史
			getHistory() {
				uni.navigateTo({
					url: '/pages/contract/history/fast-history'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "~../sustainability/index.scss";

	.contract-title {
		padding: 5rpx $pages-padding 0;
		min-height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid $border-color;

		.contract-price {
			flex: 1;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx 0 20rpx;
			font-size: 28rpx;
		}

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

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

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

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

			.title-text {
				font-size: 34rpx;
				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;
			}
		}
	}

	// <view class="lable-title">
	// 	<template v-for="(item , index) in lableList">
	// 		<text class="lable-item">{{ item }}</text>
	// 	</template>
	// </view>
	.swiper-title {
		padding: 0 $pages-padding;
		width: 100%;
		height: 100rpx;
		border-bottom: 1rpx solid $border-color;
		display: flex;
		align-items: center;
		justify-content: space-between;

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

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

			&:nth-child(n + 2) {
				margin-left: 60rpx;
			}
		}

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

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

		.iconfont {
			font-size: 30rpx;
			color: #878592;
		}
	}

	.shortcut {

		.shortcut-open {
			padding: 30rpx $pages-padding;
		}

		.shortcut-type {
			width: 100%;
			display: flex;
			align-items: stretch;
			justify-content: space-between;

			.type-box {
				flex: 1;
				display: flex;
				align-items: stretch;
				border-radius: 6rpx;
				overflow: hidden;

				.type-item {
					font-size: 24rpx;
					flex-shrink: 0;
					flex: 1;
					text-align: center;
					display: flex;
					align-items: center;
					justify-content: center;
					border: 1rpx solid $border-color6;
					color: $SizeColor;
				}

				.active-type-item {
					color: #fff;
					background-color: $Theme-Color;
					border: 1rpx solid $Theme-Color;
				}
			}

			.type-times {
				margin-left: 20rpx;
				width: 230rpx;
				height: 50rpx;
				line-height: 50rpx;
				border: 1rpx solid red;
				text-align: center;
				font-size: 26rpx;
				position: relative;
				color: $SizeColor;
				border: 1rpx solid $border-color6;
				border-radius: 6rpx;

				.iconfont {
					position: absolute;
					right: 10rpx;
					top: 50%;
					transform: translateY(-50%);
					font-size: 20rpx;
					color: $Theme-Color;
				}
			}
		}
	}

	.shortcut-price {
		width: 100%;
		padding-top: 60rpx;

		.price-box {
			width: 100%;
			height: 80rpx;
			border-radius: 10rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20rpx;
			background-color: $box-bg;
			font-size: 24rpx;
			color: $SizeColor2;

			.price-lable,
			.price-info {
				flex-shrink: 0;
			}

			.price-info {
				.price-num {
					color: #000;
					padding-right: 20rpx;
				}
			}

			.price-inp {
				flex: 1;
				height: 100%;
				padding: 0 10rpx;
				font-size: 24rpx;
				color: #000;
				text-align: right;
			}

			.price-inp-text {
				display: flex;
				align-items: center;
				justify-content: flex-end;
			}

		}

		.price-box+.price-box {
			background-color: #fff;
			margin-top: 20rpx;
			border: 1rpx solid $box-bg;
		}
	}

	.step-content {
		padding: 26rpx 0;
	}

	// <view class="shortcut-usable">
	// 	<view class="usable-info">
	// 		可用：2927.81 USDT
	// 	</view>
	// 	<view class="usable-btn">
	// 		充值
	// 	</view>
	// </view>
	.shortcut-usable {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 24rpx;
		color: $SizeColor2;
		padding: 20rpx 0 40rpx;

		.usable-btn {
			color: $Theme-Color;
		}
	}

	// <view class="shortcut-btns">
	// 	<view class="shortcut-btn">
	// 		买入/做多
	// 	</view>
	// 	<view class="shortcut-btn">
	// 		卖出做空
	// 	</view>
	// </view>
	.shortcut-btns {
		display: flex;
		align-items: center;

		.shortcut-btn {
			flex: 1;
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;
			font-size: 28rpx;
			color: #fff;
			background-color: $Theme-Color;

			&:nth-child(n + 2) {
				margin-left: 30rpx;
				background-color: $Theme-Color2;
			}
		}
	}

	.iframe-box {
		width: 100%;
		height: 50vh;
	}

	// <view class="set-stop">
	// 	<view class="stop-left">
	// 		<text>止盈/止损</text>
	// 		<text class="stop-num">{{ item.target_profit_price || '--' }}/{{ item.stop_loss_price || '--'}}</text>
	// 		<text class="iconfont">&#xe610;</text>
	// 	</view>
	// 	<view class="stop-right">
	// 		<text class="icon-size iconfont">&#xe8b0;</text>
	// 		<text class="icon-size">分享</text>
	// 	</view>
	// </view>
	.set-stop {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 26rpx;
		padding: 30rpx $pages-padding 0;

		.stop-left {
			font-size: 24rpx;
			color: $SizeColor2;

			.stop-num {
				padding: 0 10rpx;
			}

			.iconfont {
				color: $Theme-Color;
			}
		}

		.stop-right {

			color: $Theme-Color;
			font-size: 26rpx;

			.iconfont {
				margin-right: 6rpx;
			}
		}
	}

	.account-box {
		width: 100%;
		min-height: 120rpx;
		display: flex;
		align-items: stretch;

		width: 100%;
		padding: 30rpx $pages-padding;
		border-bottom: 1rpx solid $border-color4;

		.account-item {

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

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

			.account-title {

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

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

	.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;
		}
	}


	.set-profit-loss {
		width: 100%;

		// <view class="set-profit-loss-title">
		// 	<text class="title-name">止盈</text>
		// 	<view class="title-btn">
		// 		<text class="iconfont">&#xe672;</text>
		// 		<text>按价格设置</text>
		// 	</view>
		// </view>
		.set-profit-loss-title {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 26rpx;
			padding: 30rpx 0;

			.title-btn {
				.iconfont {
					font-size: 20rpx;
					color: $Theme-Color;
					margin-right: 4px;
				}
			}
		}

		.profit-loss-input {
			width: 100%;
			height: 76rpx;
			border-radius: 8rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border: 1rpx solid $border-color6;

			padding: 0 20rpx;
			font-size: 24rpx;

			text {
				flex-shrink: 0;
				color: $SizeColor3;
			}

			.input-item {
				flex: 1;
				height: 100%;
				font-size: 24rpx;
				text-align: right;
				padding: 0 16rpx;
			}
		}


	}
</style>