index.vue 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951
  1. <template>
  2. <view>
  3. <view class="contract-title" :rise-fall="stocksColor">
  4. <view class="contract-item" @click.stop="openDrawer">
  5. <view class="title-iocn">
  6. <text class="title-iocn-item"></text>
  7. <text class="title-iocn-item"></text>
  8. <text class="title-iocn-item"></text>
  9. </view>
  10. <!-- <image class="title-iocn" src="../../../static/logo.png" mode="aspectFit"></image> -->
  11. <text class="title-text">{{currencyVal.currency_name}}/{{currencyVal.legal_name}}</text>
  12. </view>
  13. <view class="contract-price" :class="$setColor(daymarket.now_price)">
  14. <text class="color">{{ daymarket.now_price }}</text>
  15. <text class="color" v-show="daymarket.change">{{ daymarket.change }}%</text>
  16. </view>
  17. <view class="contract-item">
  18. <text class="iconfont">&#xe625;</text>
  19. </view>
  20. </view>
  21. <view class="iframe-box">
  22. <template v-if="currencyVal.legal_id">
  23. <iframe
  24. :src="`https://doc.okenx.com/biking/kline.html?legal_id=${currencyVal.legal_id}&currency_id=${currencyVal.currency_id}&symbol=${currencyVal.currency_name}/${currencyVal.legal_name}`"
  25. frameborder="0"></iframe>
  26. </template>
  27. </view>
  28. <gap />
  29. <view class="swiper-title">
  30. <view class="swiper-lable">
  31. <template v-for="(item , index) in lableList">
  32. <text @click.stop="lableIndex = index"
  33. :class="['swiper-item', lableIndex === index ? 'active-swiper-item' : '' ]">{{ item }}</text>
  34. </template>
  35. </view>
  36. <view class="iconfont" @click.stop="getHistory()">&#xe613;</view>
  37. </view>
  38. <!-- {{ pagesInfo }} -->
  39. <view class="shortcut">
  40. <swiper class="swiper-content" :current="lableIndex"
  41. :style="{'height': scrollHeight ? `${scrollHeight}px` : '' }">
  42. <swiper-item class="swiper-item-box">
  43. <u-list>
  44. <view class="shortcut-open">
  45. <view class="shortcut-type">
  46. <view class="type-box">
  47. <text class="type-item active-type-item">市价委托</text>
  48. <text class="type-item">计划委托</text>
  49. </view>
  50. <view class="type-times" @click.stop="adjustLever()">
  51. {{leverName}}{{ multiple }}x
  52. <text class="iconfont">&#xeb6d;</text>
  53. </view>
  54. </view>
  55. <view class="shortcut-price">
  56. <view class="price-box">
  57. <text class="price-lable">价格</text>
  58. <view class="price-info">
  59. <text class="price-num">{{ daymarket.now_price }}</text>
  60. <text class="price-tag">USDT</text>
  61. </view>
  62. </view>
  63. <view class="price-box">
  64. <text class="price-lable">保证金</text>
  65. <input class="price-inp" type="number" v-model="caution_money">
  66. <view class="price-info">
  67. USDT
  68. </view>
  69. </view>
  70. </view>
  71. <view class="shortcut-usable">
  72. <view class="usable-info">
  73. 可用:{{ pagesInfo.user_lever }} USDT
  74. </view>
  75. <view class="usable-btn" @click.stop="PayCurrency()">
  76. 充值
  77. </view>
  78. </view>
  79. <view class="shortcut-btns">
  80. <view class="shortcut-btn" @click.stop="setSubmitLever(2)">
  81. 买入/做多
  82. </view>
  83. <view class="shortcut-btn" @click.stop="setSubmitLever(1)">
  84. 卖出/做空
  85. </view>
  86. </view>
  87. </view>
  88. </u-list>
  89. </swiper-item>
  90. <swiper-item>
  91. <u-list class="swiper-list" :style="{'height': scrollHeight ? `${scrollHeight}px` : '' }">
  92. <template v-if="leverTransaction && leverTransaction.length > 0">
  93. <view class="lable-title">
  94. <text class="lable-title-text">仓位信息</text>
  95. <text class="lable-title-btn" @click.stop="setCloseLeverAll()">全部平仓</text>
  96. </view>
  97. <view class="account-box">
  98. <view class="account-item">
  99. <view class="account-title">
  100. <text class="text">持仓保证金USDT)</text>
  101. </view>
  102. <text class="account-num">{{ contractAccount.usdt_totle || '--' }}</text>
  103. </view>
  104. <view class="account-item">
  105. <view class="account-title">
  106. <text class="text">可用保证金(USDT)</text>
  107. </view>
  108. <text class="account-num">{{ contractAccount.totle || '--' }}</text>
  109. </view>
  110. <view class="account-item" :class="[$setColor(rateProfitsTotal.hazard_rate || '0.00')]">
  111. <view class="account-title">
  112. <text class="text">未实现亏盈(USDT)</text>
  113. </view>
  114. <text class="account-num color">{{ rateProfitsTotal.hazard_rate }}</text>
  115. </view>
  116. </view>
  117. <template v-for="item in leverTransaction">
  118. <view class="content-box" :rise-fall="stocksColor">
  119. <view class="content-top">
  120. <view class="top-left">
  121. <view class="top-left-title">
  122. <text>{{ item.symbol }}</text>
  123. <text v-if="item.settled == 0">永续</text>
  124. <text v-else-if="item.settled == 9">快捷合约</text>
  125. </view>
  126. <view class="top-left-b">
  127. <text>{{ item.multiple }}倍杠杆</text>
  128. <text class="top-left-b-tag">{{ item.type_name }}</text>
  129. </view>
  130. </view>
  131. <view class="top-right">
  132. <text>{{ item.profits }}</text>
  133. <text
  134. class="top-right-float"><text>浮动盈亏</text>{{ item.fact_profits }}%</text>
  135. </view>
  136. </view>
  137. <view class="content-info">
  138. <view class="info-item">
  139. <text class="info-item-lable">保证金(USDT)</text>
  140. <text class="info-item-val">{{ item.caution_money }}</text>
  141. </view>
  142. <view class="info-item">
  143. <text class="info-item-lable">开仓价格(USDT)</text>
  144. <text class="info-item-val">{{ item.price }}</text>
  145. </view>
  146. <view class="info-item">
  147. <text class="info-item-lable">预估平仓价格(USDT)</text>
  148. <text class="info-item-val">{{item.update_price}}</text>
  149. </view>
  150. <view class="info-item">
  151. <text class="info-item-lable">过夜费</text>
  152. <text class="info-item-val">{{item.overnight_money}}</text>
  153. </view>
  154. <view class="info-item">
  155. <text class="info-item-lable">风险率(%)</text>
  156. <text class="info-item-val">0%</text>
  157. <!-- {{ item.caution_money }} -->
  158. </view>
  159. <!-- <view class="info-item">
  160. <text class="info-item-lable">预计止损(USDT)</text>
  161. <text class="info-item-val"
  162. @click.stop="setRestrict(item)">{{ item.stop_loss_price || '--' }} <text
  163. class="iconfont">&#xe610;</text></text>
  164. </view>
  165. <view class="info-item">
  166. <text class="info-item-lable">预计止盈(USDT)</text>
  167. <text class="info-item-val"
  168. @click.stop="setRestrict(item)">{{ item.target_profit_price || '--' }} <text
  169. class="iconfont">&#xe610;</text> </text>
  170. </view> -->
  171. <view class="info-item">
  172. <text class="info-item-lable">创建时间</text>
  173. <text class="info-item-val">{{ $getData_(item.create_time , false) }}</text>
  174. </view>
  175. </view>
  176. <view class="content-btns">
  177. <view class="content-btn-item" @click.stop="setCloseLever(item)">
  178. 平仓
  179. </view>
  180. <view class="content-btn-item" @click.stop="setInversion(item)">
  181. 反向开仓
  182. </view>
  183. <!-- <view class="content-btn-item">
  184. 加仓
  185. </view> -->
  186. </view>
  187. <view class="set-stop">
  188. <view class="stop-left" @click.stop="setRestrict(item)">
  189. <text>止盈/止损</text>
  190. <text
  191. class="stop-num">{{ item.target_profit_price || '--' }}/{{ item.stop_loss_price || '--'}}</text>
  192. <text class="iconfont">&#xe610;</text>
  193. </view>
  194. <view class="stop-right">
  195. <text class="icon-size iconfont">&#xe8b0;</text>
  196. <text class="icon-size">分享</text>
  197. </view>
  198. </view>
  199. </view>
  200. <gap />
  201. </template>
  202. </template>
  203. </u-list>
  204. </swiper-item>
  205. </swiper>
  206. </view>
  207. <drawer ref="drawerRef" />
  208. <restrictPopup ref="restrictRef" @setSuccess="setSuccess" />
  209. <lever ref="leverRef" :leverNum.sync="multiple" :leverName.sync="leverName" />
  210. <unopen ref="placeOrderRef" @confirm="confirmPlaceOrder" title="下单确认" cancelBtn content="确定要下单吗?" />
  211. <unopen ref="unopenRef" @confirm="confirm" textAlign="left" :title="unopenSolt.title" cancelBtn
  212. :content="unopenSolt.closeLeverContent" />
  213. <popupHint ref="hintRef" title="快捷合约">
  214. <template #hintContent>
  215. <view class="">
  216. 快捷合约是币王交易所为用户带来的新型区块链合约衍生品,有闪电开平仓、持仓稳定、抗市场干扰的优势,主要特点如下:
  217. </view>
  218. <!-- <view class="">
  219. 赠金获取方式:
  220. </view> -->
  221. <view class="content-list">
  222. <text>1. 开仓/平仓流程及功能与永续一致</text>
  223. <text>2. 五交割期</text>
  224. <text>3. 市价开仓100%快速成交</text>
  225. <text>4. 开平仓价即为预估成交价</text>
  226. <text>5. 每天4:00(UTC+8)收取0.02%过夜费</text>
  227. </view>
  228. <view class="">
  229. 更多内容请点击<text class="explain" @click.stop="readPactInfo(189)">《快捷合约》</text>
  230. </view>
  231. <view class="hite-box" @click.stop="readPact = !readPact">
  232. <text class="box">
  233. <text v-show="readPact" class="iconfont2">&#xe6c5;</text>
  234. </text>
  235. <text>不在提示</text>
  236. </view>
  237. <view class="confirm-btn" @click.stop="confirmHiteBtn">
  238. 确定
  239. </view>
  240. </template>
  241. </popupHint>
  242. </view>
  243. </template>
  244. <script>
  245. import {
  246. mapGetters
  247. } from 'vuex'
  248. import {
  249. Api_setSubmitLever,
  250. Api_getLeverDeal,
  251. Api_getRegister,
  252. Api_setBatchClose,
  253. Api_setCloseLever
  254. } from "@/api/index.js"
  255. import lever from "../sustainability/lever.vue"
  256. import drawer from "./../modules/drawer.vue"
  257. import popupHint from "../modules/popup-hint.vue"
  258. import restrictPopup from "./../modules/restrict.vue"
  259. export default {
  260. name: 'shortcut',
  261. components: {
  262. lever,
  263. drawer,
  264. restrictPopup,
  265. popupHint
  266. },
  267. data() {
  268. return {
  269. readPact: false,
  270. closeLeverItem: null,
  271. lableList: [
  272. '开仓',
  273. '当前持仓'
  274. ],
  275. lableIndex: 0,
  276. leverName: '逐仓',
  277. multiple: 100, // 逐仓倍数
  278. caution_money: '',
  279. status: 1, // 状态,填1. 1市价交易,为0则是挂单交易
  280. scrollHeight: 0,
  281. unopenSolt: {
  282. title: '',
  283. content: ''
  284. }
  285. };
  286. },
  287. props: {
  288. leverTransaction: {
  289. type: Array,
  290. default: () => {
  291. return []
  292. }
  293. },
  294. pagesInfo: {
  295. type: Object,
  296. default: () => {
  297. return {}
  298. }
  299. },
  300. rateProfitsTotal: {
  301. type: Object,
  302. default: () => {
  303. return {}
  304. }
  305. },
  306. },
  307. computed: {
  308. ...mapGetters([
  309. 'currencyVal',
  310. 'daymarket',
  311. 'stocksColor',
  312. 'PageContentHeight',
  313. 'tabBarHeight',
  314. 'contractAccount'
  315. ]),
  316. },
  317. mounted() {
  318. },
  319. watch: {
  320. currencyVal: {
  321. handler(newCurrency) {
  322. if (newCurrency && newCurrency?.legal_id) {
  323. this.init()
  324. }
  325. },
  326. deep: true,
  327. immediate: true
  328. },
  329. PageContentHeight: {
  330. handler(newHeigth) {
  331. if (newHeigth) {
  332. console.log('newHeigth = ', newHeigth)
  333. this.scrollHeight = newHeigth - uni.upx2px(100) - this.tabBarHeight;
  334. }
  335. },
  336. deep: true,
  337. immediate: true
  338. },
  339. },
  340. created() {
  341. this.openPactPopup()
  342. },
  343. methods: {
  344. init() {
  345. // this.getLeverDeal()
  346. // this.getRegister()
  347. },
  348. // getRegister() {
  349. // Api_getRegister({
  350. // status: 1,
  351. // legal_id: this.currencyVal.legal_id,
  352. // currency_id: this.currencyVal.currency_id,
  353. // settled: 9,
  354. // limit: 1000
  355. // }).then(res => {
  356. // console.log('Api_getRegister = ', res)
  357. // })
  358. // },
  359. confirmBtn() {
  360. },
  361. openDrawer() {
  362. this.$nextTick(() => {
  363. this.$refs.drawerRef.open();
  364. })
  365. },
  366. setSubmitLever() {
  367. this.$nextTick(() => {
  368. this.$refs.placeOrderRef.open()
  369. })
  370. },
  371. // 确认下单
  372. confirmPlaceOrder(type) {
  373. const obj = {
  374. legal_id: this.currencyVal.legal_id,
  375. currency_id: this.currencyVal.currency_id,
  376. multiple: this.multiple,
  377. caution_money: this.caution_money,
  378. status: this.status
  379. }
  380. Api_setSubmitLever(obj).then(res => {
  381. this.setSuccess()
  382. })
  383. },
  384. // 设置止盈止损
  385. setRestrict(item) {
  386. this.$nextTick(() => {
  387. this.$refs.restrictRef.open(item)
  388. })
  389. },
  390. setSuccess() {
  391. this.$emit('refreshData')
  392. },
  393. setCloseLever(item) {
  394. this.closeLeverItem = item;
  395. this.unopenSolt = {
  396. title: '平仓',
  397. closeLeverContent: '如果存在平仓挂单(限价止盈止损),将会在全平前被撤单,确定平仓吗?'
  398. }
  399. this.setDepot();
  400. },
  401. setInversion() {
  402. this.closeLeverItem = -1;
  403. this.unopenSolt = {
  404. title: '反向开仓',
  405. closeLeverContent: '如果存在平仓挂单(限价止盈止损),将会在全平前被撤单,确定反向开仓吗?',
  406. }
  407. this.setDepot();
  408. },
  409. setCloseLeverAll() {
  410. this.closeLeverItem = null;
  411. this.unopenSolt = {
  412. title: '全部平仓',
  413. closeLeverContent: '如果存在平仓挂单(限价止盈止损),将会在全平前被撤单,确定全部平仓吗?',
  414. }
  415. this.setDepot();
  416. // this.title = '全部平仓';
  417. // this.closeLeverContent = '';
  418. // this.closeLeverItem = null;
  419. // this.$refs.unopenRef.open();
  420. },
  421. // 平仓 - 反向开仓
  422. setDepot(obj) {
  423. this.$nextTick(() => {
  424. this.$refs.unopenRef.open()
  425. })
  426. },
  427. confirm() {
  428. if (this.leverTransaction.length > 0) {
  429. if (this.closeLeverItem && this.closeLeverItem !== -1) {
  430. // 平仓
  431. Api_setCloseLever({
  432. id: this.closeLeverItem.id
  433. }).then(res => {
  434. this.setSuccess()
  435. })
  436. } else if (this.closeLeverItem == -1) {
  437. // 反向开仓
  438. } else {
  439. // 全部平仓
  440. Api_setBatchClose({
  441. type: 0,
  442. currency_id: this.currencyVal.currency_id
  443. }).then(res => {
  444. this.setSuccess()
  445. })
  446. }
  447. }
  448. },
  449. adjustLever() {
  450. this.$nextTick(() => {
  451. this.$refs.leverRef.open()
  452. })
  453. },
  454. openPactPopup() {
  455. const readPactObj = this.$getStorageSync('contractReadPact');
  456. if (!readPactObj || !readPactObj.rapidPact) {
  457. this.readPact = false
  458. this.$nextTick(() => {
  459. this.$refs.hintRef.open()
  460. })
  461. }
  462. },
  463. // 提示弹框确认按钮
  464. confirmHiteBtn() {
  465. // t.readPact
  466. const readPactObj = this.$getStorageSync('contractReadPact') || {}
  467. readPactObj.rapidPact = this.readPact
  468. this.$setStorageSync('contractReadPact', readPactObj)
  469. this.$refs.hintRef.close();
  470. },
  471. // 阅读合约
  472. readPactInfo(id) {
  473. this.$readArticleInfo(id)
  474. },
  475. // 充值
  476. PayCurrency() {
  477. uni.navigateTo({
  478. url: '/pages/content/select-currency?type=recharge'
  479. })
  480. },
  481. // 获取历史
  482. getHistory(){
  483. uni.navigateTo({
  484. url: '/pages/contract/history/fast-history'
  485. })
  486. }
  487. }
  488. }
  489. </script>
  490. <style lang="scss" scoped>
  491. @import "~../sustainability/index.scss";
  492. .contract-title {
  493. padding: 5rpx $pages-padding 0;
  494. min-height: 90rpx;
  495. display: flex;
  496. align-items: center;
  497. justify-content: space-between;
  498. border-bottom: 1rpx solid $border-color;
  499. .contract-price {
  500. flex: 1;
  501. display: flex;
  502. justify-content: space-between;
  503. align-items: center;
  504. padding: 0 30rpx 0 20rpx;
  505. font-size: 28rpx;
  506. }
  507. .contract-item {
  508. flex-shrink: 0;
  509. display: flex;
  510. align-items: center;
  511. .title-iocn {
  512. width: 28rpx;
  513. height: 24rpx;
  514. display: flex;
  515. flex-direction: column;
  516. // align-items: center;
  517. justify-content: space-between;
  518. .title-iocn-item {
  519. width: 100%;
  520. height: 5rpx;
  521. border-radius: 3rpx;
  522. background: #111111;
  523. &:first-child {
  524. width: 50%;
  525. }
  526. }
  527. }
  528. .title-text {
  529. font-size: 34rpx;
  530. font-family: PingFang SC, PingFang SC-Bold;
  531. font-weight: 700;
  532. text-align: left;
  533. color: #141213;
  534. line-height: 1.2;
  535. letter-spacing: 0.74rpx;
  536. padding-left: 19rpx;
  537. }
  538. .title-ratio {
  539. font-size: 24rpx;
  540. font-family: PingFang SC, PingFang SC-Regular;
  541. font-weight: 400;
  542. color: #808080;
  543. line-height: 33rpx;
  544. }
  545. .ratio-icon {
  546. width: 31rpx;
  547. height: 33rpx;
  548. margin-left: 22rpx;
  549. }
  550. }
  551. }
  552. // <view class="lable-title">
  553. // <template v-for="(item , index) in lableList">
  554. // <text class="lable-item">{{ item }}</text>
  555. // </template>
  556. // </view>
  557. .swiper-title {
  558. padding: 0 $pages-padding;
  559. width: 100%;
  560. height: 100rpx;
  561. border-bottom: 1rpx solid $border-color;
  562. display: flex;
  563. align-items: center;
  564. justify-content: space-between;
  565. // width: 100%;
  566. // height: 100rpx;
  567. // border-bottom: 1rpx solid $border-color;
  568. // padding: 0 $pages-padding;
  569. // display: flex;
  570. // justify-content: space-between;
  571. // align-items: center;
  572. .swiper-lable {
  573. height: 100%;
  574. display: flex;
  575. align-items: center;
  576. justify-content: space-between;
  577. }
  578. .swiper-item {
  579. height: 100%;
  580. font-size: 28rpx;
  581. display: flex;
  582. align-items: center;
  583. &:nth-child(n + 2) {
  584. margin-left: 60rpx;
  585. }
  586. }
  587. .active-swiper-item {
  588. font-size: 34rpx;
  589. color: $Theme-Color;
  590. position: relative;
  591. &::before {
  592. content: '';
  593. position: absolute;
  594. left: 50%;
  595. bottom: 0;
  596. width: 30rpx;
  597. height: 5rpx;
  598. background-color: $Theme-Color;
  599. border-radius: 3rpx;
  600. transform: translateX(-50%);
  601. }
  602. }
  603. .iconfont{
  604. font-size: 30rpx;
  605. color: $SizeColor1;
  606. }
  607. }
  608. .shortcut {
  609. .shortcut-open {
  610. padding: 30rpx $pages-padding;
  611. }
  612. .shortcut-type {
  613. width: 100%;
  614. display: flex;
  615. align-items: stretch;
  616. justify-content: space-between;
  617. .type-box {
  618. flex: 1;
  619. display: flex;
  620. align-items: stretch;
  621. border-radius: 6rpx;
  622. overflow: hidden;
  623. .type-item {
  624. font-size: 24rpx;
  625. flex-shrink: 0;
  626. flex: 1;
  627. text-align: center;
  628. display: flex;
  629. align-items: center;
  630. justify-content: center;
  631. border: 1rpx solid $border-color6;
  632. color: $SizeColor;
  633. }
  634. .active-type-item {
  635. color: #fff;
  636. background-color: $Theme-Color;
  637. border: 1rpx solid $Theme-Color;
  638. }
  639. }
  640. .type-times {
  641. margin-left: 20rpx;
  642. width: 230rpx;
  643. height: 50rpx;
  644. line-height: 50rpx;
  645. border: 1rpx solid red;
  646. text-align: center;
  647. font-size: 26rpx;
  648. position: relative;
  649. color: $SizeColor;
  650. border: 1rpx solid $border-color6;
  651. border-radius: 6rpx;
  652. .iconfont {
  653. position: absolute;
  654. right: 10rpx;
  655. top: 50%;
  656. transform: translateY(-50%);
  657. font-size: 20rpx;
  658. color: $Theme-Color;
  659. }
  660. }
  661. }
  662. }
  663. .shortcut-price {
  664. width: 100%;
  665. padding-top: 60rpx;
  666. .price-box {
  667. width: 100%;
  668. height: 80rpx;
  669. border-radius: 10rpx;
  670. display: flex;
  671. justify-content: space-between;
  672. align-items: center;
  673. padding: 0 20rpx;
  674. background-color: $box-bg;
  675. font-size: 24rpx;
  676. color: $SizeColor2;
  677. .price-lable,
  678. .price-info {
  679. flex-shrink: 0;
  680. }
  681. .price-info {
  682. .price-num {
  683. color: #000;
  684. padding-right: 20rpx;
  685. }
  686. }
  687. .price-inp {
  688. flex: 1;
  689. height: 100%;
  690. padding: 0 10rpx;
  691. font-size: 24rpx;
  692. color: #000;
  693. text-align: right;
  694. }
  695. // <view class="price-box">
  696. // <text class="price-lable">价格</text>
  697. // <input class="price-inp" type="number">
  698. // <view class="price-info">
  699. // USDT
  700. // </view>
  701. // </view>
  702. }
  703. .price-box+.price-box {
  704. background-color: #fff;
  705. margin-top: 20rpx;
  706. border: 1rpx solid $box-bg;
  707. }
  708. }
  709. // <view class="shortcut-usable">
  710. // <view class="usable-info">
  711. // 可用:2927.81 USDT
  712. // </view>
  713. // <view class="usable-btn">
  714. // 充值
  715. // </view>
  716. // </view>
  717. .shortcut-usable {
  718. width: 100%;
  719. display: flex;
  720. justify-content: space-between;
  721. align-items: center;
  722. font-size: 24rpx;
  723. color: $SizeColor2;
  724. padding: 20rpx 0 40rpx;
  725. .usable-btn {
  726. color: $Theme-Color;
  727. }
  728. }
  729. // <view class="shortcut-btns">
  730. // <view class="shortcut-btn">
  731. // 买入/做多
  732. // </view>
  733. // <view class="shortcut-btn">
  734. // 卖出做空
  735. // </view>
  736. // </view>
  737. .shortcut-btns {
  738. display: flex;
  739. align-items: center;
  740. .shortcut-btn {
  741. flex: 1;
  742. height: 70rpx;
  743. line-height: 70rpx;
  744. text-align: center;
  745. font-size: 28rpx;
  746. color: #fff;
  747. background-color: $Theme-Color;
  748. &:nth-child(n + 2) {
  749. margin-left: 30rpx;
  750. background-color: $Theme-Color2;
  751. }
  752. }
  753. }
  754. .iframe-box {
  755. width: 100%;
  756. height: 50vh;
  757. iframe {
  758. width: 100%;
  759. height: 100%;
  760. }
  761. }
  762. // <view class="set-stop">
  763. // <view class="stop-left">
  764. // <text>止盈/止损</text>
  765. // <text class="stop-num">{{ item.target_profit_price || '--' }}/{{ item.stop_loss_price || '--'}}</text>
  766. // <text class="iconfont">&#xe610;</text>
  767. // </view>
  768. // <view class="stop-right">
  769. // <text class="icon-size iconfont">&#xe8b0;</text>
  770. // <text class="icon-size">分享</text>
  771. // </view>
  772. // </view>
  773. .set-stop {
  774. width: 100%;
  775. display: flex;
  776. align-items: center;
  777. justify-content: space-between;
  778. font-size: 26rpx;
  779. padding: 30rpx $pages-padding 0;
  780. .stop-left {
  781. font-size: 24rpx;
  782. color: $SizeColor2;
  783. .stop-num {
  784. padding: 0 10rpx;
  785. }
  786. .iconfont {
  787. color: $Theme-Color;
  788. }
  789. }
  790. .stop-right {
  791. color: $Theme-Color;
  792. font-size: 26rpx;
  793. .iconfont {
  794. margin-right: 6rpx;
  795. }
  796. }
  797. }
  798. // <view class="account-box">
  799. // <view class="account-item">
  800. // <view class="account-title">
  801. // <text class="text">持仓保证金USDT)</text>
  802. // </view>
  803. // <text class="account-num">{{ contractAccount.usdt_totle }}</text>
  804. // </view>
  805. // <view class="account-item">
  806. // <view class="account-title">
  807. // <text class="text">可用保证金(USDT)</text>
  808. // </view>
  809. // <text class="account-num">{{ contractAccount.totle }}</text>
  810. // </view>
  811. // <view class="account-item">
  812. // <view class="account-title">
  813. // <text class="text">未实现亏盈(USDT)</text>
  814. // </view>
  815. // <text class="account-num">{{ rateProfitsTotal.hazard_rate }}</text>
  816. // </view>
  817. // </view>
  818. .account-box {
  819. width: 100%;
  820. min-height: 120rpx;
  821. display: flex;
  822. align-items: stretch;
  823. width: 100%;
  824. padding: 30rpx $pages-padding;
  825. border-bottom: 1rpx solid $border-color4;
  826. .account-item {
  827. display: flex;
  828. flex-direction: column;
  829. flex-shrink: 0;
  830. flex: 1;
  831. &:nth-child(3n) {
  832. text-align: right;
  833. }
  834. // &:nth-child(3n - 1) {
  835. // width: 35%;
  836. // }
  837. // &:nth-child(3n - 2) {
  838. // width: 30%;
  839. // }
  840. // &:nth-child(n + 4) {
  841. // margin-top: 20rpx;
  842. // }
  843. .account-title {
  844. font-size: 24rpx;
  845. font-family: PingFang SC, PingFang SC-Bold;
  846. font-weight: 600;
  847. color: #807e89;
  848. line-height: 30rpx;
  849. }
  850. .account-num {
  851. font-size: 22rpx;
  852. font-family: PingFang SC, PingFang SC-Bold;
  853. font-weight: 700;
  854. color: #1a1a1a;
  855. line-height: 33rpx;
  856. margin-top: 11rpx;
  857. }
  858. }
  859. }
  860. </style>