1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366 |
- <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">{{ leverTrade.caution_money }}</text>
- </view>
- <view class="account-item">
- <view class="account-title">
- <text class="text">可用保证金(USDT)</text>
- </view>
- <text class="account-num">{{ leverTrade.origin_caution_money_all }}</text>
- </view>
- <view class="account-item">
- <view class="account-title">
- <text class="text">未实现亏盈(USDT)</text>
- </view>
- <text class="account-num">{{ leverTrade.profits_all }}</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">{{ leverTrade.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"></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"></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"></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"></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">
- <view class="right-input-icon">
- <text v-show="restrictProfitStatus === 2" class="input-item input-item-text">%</text>
- <text v-show="restrictProfitStatus === 1">USDT</text>
- <text class="icon-link">|</text>
- <text class="switch-icon iconfont"
- @click.stop="restrictProfitStatus === 1 ? restrictProfitStatus = 2 : restrictProfitStatus = 1 "></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">
- <view class="right-input-icon">
- <text v-show="restrictLossStatus === 2" class="input-item input-item-text">%</text>
- <text v-show="restrictLossStatus === 1">USDT</text>
- <text class="icon-link">|</text>
- <text class="switch-icon iconfont"
- @click.stop="restrictLossStatus === 1 ? restrictLossStatus = 2 : restrictLossStatus = 1 "></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">{{ cost || '--'}}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"></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' : '' ]">持仓({{ leverTrade && leverTrade.tradesList ? leverTrade.tradesList.length : 0 }})</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()"></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 : 比例止损
- cost: '', // 成本
- };
- },
- 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) {
- const nums = maxNums * newNums / 100;
- console.log('nums = ' , nums)
- this.calculateCost(nums)
- }
-
- },
- share(nums) {
- this.calculateCost(nums)
- },
- // percent(num){
- // if(num){
- // const nums = pagesInfo.lever_share_limit.max
-
- // }
- // }
- },
- computed: {
- ...mapGetters([
- "stocksColor",
- 'bids',
- 'asks',
- 'daymarket',
- 'tabBarHeight',
- 'PageContentHeight',
- 'currencyVal',
- 'contractAccount',
- 'leverTrade'
- ])
- },
- 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: {
- // 成本计算
- calculateCost(nus) {
- // $decimalNum
- // // 加法
- // add: (a, b) => {
- // return new Decimal(a).add(new Decimal(b))
- // },
- // // 减法
- // sub: (a, b) => {
- // return new Decimal(a).sub(new Decimal(b))
- // },
- // // 乘法
- // mul: (a, b) => {
- // return new Decimal(a).mul(new Decimal(b))
- // },
- // // 除法
- // div: (a, b) => {
- // return new Decimal(a).div(new Decimal(b))
- // },
- try {
- // 成本 = 价格*张数*每张折合数量*(1+保证金百分比)/逐仓倍数
- const t1 = this.$decimalNum.mul(this.daymarket.now_price, nus); // 价格*张数
- const t2 = this.$decimalNum.mul(t1, this.pagesInfo.lever_share_num) // 价格*张数*每张折合数量
- const t3 = this.$decimalNum.add(1, this.pagesInfo.lever_trade_fee) // 1+保证金百分比
- const t4 = this.$decimalNum.mul(t2, t3) // 价格*张数*每张折合数量*(1+保证金百分比)
- const t5 = this.$decimalNum.div(t4, this.multiple) // 价格*张数*每张折合数量*(1+保证金百分比)/逐仓倍数
- // * this.pagesInfo.lever_share_num *(1+ this.pagesInfo.lever_trade_fee)/ this.multiple
- this.cost = t5 ? t5.toFixed(2) : '--'
- } catch(err) {
- console.log('计算错误' , err)
- this.cost = '--'
- }
- },
- 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) {
- // restrictProfitVal: '',
- // restrictProfitStatus: 1, // 按价格止盈 , 2 : 比例止盈
- // restrictType: 1, // 1 普通输入 , 2 市价(禁止输入,只能通过高级设置)
- // // 止损
- // restrictLossVal: '',
- // restrictLossStatus: 1, // 按价格止损 , 2 : 比例止损
- setData.target_profit_price = this.restrictProfitStatus === 1 ? this.restrictProfitVal :
- `${this.restrictProfitVal}%` // 【5-18】止盈,选填
- setData.stop_loss_price = this.restrictLossStatus === 1 ? this.restrictLossVal :
- `${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}¤cy_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')
- },
- // 切换张数
- 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"></text>
- // </view>
- // <view class="select-box">
- // <text class="select-text">限价委托</text>
- // <text class="iconfont"></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: 24rpx;
- font-family: PingFang SC, PingFang SC-Bold;
- // font-weight: 700;
- color: #808080;
- line-height: 40rpx;
- display: flex;
- align-items: center;
- text {
- &:first-child {
- font-size: 24rpx;
- }
- }
- .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>
|