index.vue 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260
  1. <template>
  2. <view class="contract-box" :rise-fall="stocksColor">
  3. <view class="contract-title">
  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-item">
  14. <text class="title-ratio">资金费率:{{ rateProfitsTotal.profits_total }}%</text>
  15. <image class="ratio-icon" @click.stop="lookDetails" src="../../../static/images/icon_05.png"
  16. mode="aspectFit"></image>
  17. <image class="ratio-icon" @click.stop="setContract" src="../../../static/images/icon_06.png"
  18. mode="aspectFit"></image>
  19. </view>
  20. </view>
  21. <view class="account-box">
  22. <view class="account-item">
  23. <view class="account-title">
  24. <text class="text">持仓保证金USDT)</text>
  25. </view>
  26. <text class="account-num">{{ contractAccount.usdt_totle }}</text>
  27. </view>
  28. <view class="account-item">
  29. <view class="account-title">
  30. <text class="text">可用保证金(USDT)</text>
  31. </view>
  32. <text class="account-num">{{ contractAccount.totle }}</text>
  33. </view>
  34. <view class="account-item">
  35. <view class="account-title">
  36. <text class="text">未实现亏盈(USDT)</text>
  37. </view>
  38. <text class="account-num">{{ rateProfitsTotal.hazard_rate }}</text>
  39. </view>
  40. <view class="account-item">
  41. <view class="account-title">
  42. <text class="text">净值(USDT</text>
  43. </view>
  44. <text class="account-num">{{ contractAccount.usdt_totle }}</text>
  45. </view>
  46. <view class="account-item">
  47. <view class="account-title">
  48. <text class="text">风险率</text>
  49. </view>
  50. <text class="account-num">{{ contractAccount.totle }}</text>
  51. </view>
  52. <view class="account-item">
  53. <view class="account-title">
  54. <text class="text">账户余额(USDT)</text>
  55. </view>
  56. <text class="account-num">{{ rateProfitsTotal.hazard_rate }}</text>
  57. </view>
  58. </view>
  59. <view class="data-box">
  60. <view class="data-left">
  61. <view class="nums-title">
  62. <view class="left-title flex">
  63. <text>价格</text>
  64. <text>数量</text>
  65. </view>
  66. <view class="subhead-title flex">
  67. <text>(USDT)</text>
  68. <text>(张)</text>
  69. </view>
  70. </view>
  71. <view class="nums-list">
  72. <template v-for="(item , indx) in bids" v-if="indx < marketNum">
  73. <market-depth :type="1" :val="item"></market-depth>
  74. </template>
  75. <!-- <view class="nums-item die" v-for="(item , indx) in bids" :key="`bids_${indx}`" v-if="indx < 7">
  76. <text class="nums-item-bg pankoubgcolor" :style="{'width': item[2] + '%' }"></text>
  77. <view class="item-num">
  78. <text class="color">{{ item[1] }}</text>
  79. <text>{{ item[0] }}</text>
  80. </view>
  81. </view> -->
  82. </view>
  83. <view class="index-num-box">
  84. <view class=" index-num-title ">
  85. <text>{{ daymarket.now_price }}</text>
  86. <text>{{ daymarket.change }}%</text>
  87. </view>
  88. <view class=" index-title ">
  89. <text>指数{{ daymarket.high }}</text>
  90. <text>标记{{ daymarket.open }}</text>
  91. </view>
  92. </view>
  93. <view class="nums-list" style="padding-top: 6.5rpx;">
  94. <!-- <template v-for="(item , indx) in asks" v-if="indx < 7"> -->
  95. <template v-for="(item , indx) in asks" v-if="indx < marketNum">
  96. <market-depth :type="2" :val="item"></market-depth>
  97. </template>
  98. </view>
  99. </view>
  100. <view class="data-right">
  101. <view class="right-select">
  102. <view class="select-box position-select" @click.stop="selectList = !selectList">
  103. <text class="select-text">{{ status == 1 ? '市价委托' : '限价委托' }}</text>
  104. <text class="iconfont">&#xeb6d;</text>
  105. <view class="select-list" v-show="selectList">
  106. <text @click.stop="setType(item)"
  107. :class="['select-list-item' , status === item.value ? 'active-select-item' : '']"
  108. v-for="(item , index) in range" :key="`range_${index}`">{{ item.text }}</text>
  109. </view>
  110. </view>
  111. <view class="select-box" @click.stop="adjustLever()">
  112. <text class="select-text">{{ leverName }}{{ multiple }}x</text>
  113. <text class="iconfont">&#xeb6d;</text>
  114. </view>
  115. <!-- <uni-data-select :localdata="range" class="select-item" v-model="value"
  116. @change="change"></uni-data-select>
  117. <uni-data-select class="select-item" v-model="value" @change="change"></uni-data-select> -->
  118. </view>
  119. <view class="right-input input-item-p">
  120. <template v-if="status === 1">
  121. 市价
  122. </template>
  123. <template v-if="status === 0">
  124. <view class="target-price">
  125. <text class="target-price-tag" @click.stop="setNum(1 , target_price)">-</text>
  126. <input class="input-item" v-model="target_price" type="number">
  127. <text class="target-price-tag" @click.stop="setNum(2 , target_price)">+</text>
  128. </view>
  129. </template>
  130. <!-- target_price -->
  131. </view>
  132. <!-- 下单数量 -->
  133. <view class="right-input">
  134. <input v-show="!percent" class="input-item" @focus="percent = 0" v-model="share" type="number">
  135. <text @click.stop="percent = 0" v-show="percent"
  136. class="input-item input-item-text">{{ percent }}%</text>
  137. <view class="right-input-icon">
  138. <text>张</text>
  139. <text class="icon-link">|</text>
  140. <text class="switch-icon iconfont">&#xe672;</text>
  141. </view>
  142. </view>
  143. <view class="step-content">
  144. <step :percent.sync="percent" />
  145. <!-- <cu-progress width="100%" @dragging="dragging"> </cu-progress> -->
  146. </view>
  147. <view class="set-node">
  148. <view class="set-node-box">
  149. <view @click.stop="setNodePrice = !setNodePrice"
  150. :class="['set-node-status' , setNodePrice ? 'active-set' : '']">
  151. <text class="iconfont" v-show="setNodePrice">&#xe6c5;</text>
  152. </view>
  153. <text class="set-node-text">设置止盈止损</text>
  154. </view>
  155. <text v-show="setNodePrice" class="set-node-high">高级</text>
  156. </view>
  157. <template v-if="setNodePrice">
  158. <view class="right-input">
  159. <input placeholder-class="placeholder-class" :placeholder="`按${ restrictProfitStatus == 1 ? '价格' : '比例' }止盈`" class="input-item"
  160. v-model="restrictProfitVal" type="number">
  161. <text v-show="restrictProfitStatus === 2" class="input-item input-item-text">%</text>
  162. <view class="right-input-icon">
  163. <text>USDT</text>
  164. <text class="icon-link">|</text>
  165. <text class="switch-icon iconfont">&#xe672;</text>
  166. </view>
  167. </view>
  168. <view class="right-input">
  169. <input :placeholder="`按${ restrictLossStatus == 1 ? '价格' : '比例' }止损`" class="input-item"
  170. v-model="restrictLossVal" type="number">
  171. <text v-show="restrictLossStatus === 2" class="input-item input-item-text">%</text>
  172. <view class="right-input-icon">
  173. <text>USDT</text>
  174. <text class="icon-link">|</text>
  175. <text class="switch-icon iconfont">&#xe672;</text>
  176. </view>
  177. </view>
  178. </template>
  179. <view class="info-item">
  180. <text class="info-item-lable">成本</text>
  181. <view class="info-item-val">0.00 USDT</view>
  182. </view>
  183. <view class="info-item">
  184. <text class="info-item-lable">可用</text>
  185. <view class="info-item-val">
  186. <text>{{ pagesInfo.user_lever }}USDT</text>
  187. <text class="info-item-icon iconfont">&#xe672;</text>
  188. </view>
  189. </view>
  190. <view class="info-btns">
  191. <view class="info-btn-info">
  192. <text class="info-btn-lable">可做多</text>
  193. <text
  194. class="info-btn-val">{{ pagesInfo.lever_share_limit ? pagesInfo.lever_share_limit.max : '--' }}张</text>
  195. <!-- {{ pagesInfo.lever_share_limit ? pagesInfo.lever_share_limit?.max : '--' }} -->
  196. </view>
  197. <view class="info-btn" @click.stop="setSubmitLever(2)">
  198. 买入/做多
  199. </view>
  200. </view>
  201. <view class="info-btns err-btns">
  202. <view class="info-btn-info">
  203. <text class="info-btn-lable">可做空</text>
  204. <text
  205. class="info-btn-val">{{ pagesInfo.lever_share_limit ? pagesInfo.lever_share_limit.max : '--' }}张</text>
  206. </view>
  207. <view class="info-btn" @click.stop="setSubmitLever(1)">
  208. 卖出/做空
  209. </view>
  210. </view>
  211. </view>
  212. </view>
  213. <gap height="10rpx" />
  214. <view class="lable-title">
  215. <view class="lable-text">
  216. <text @click.stop="freightSpaceIndex = 1"
  217. :class="['lable-text-item' , freightSpaceIndex == 1 ? 'active-text-item' : '' ]">持仓({{ leverTransaction.length }})</text>
  218. <text @click.stop="freightSpaceIndex = 2"
  219. :class="['lable-text-item' , freightSpaceIndex == 2 ? 'active-text-item' : '' ]">当前委托({{ entrustList.length }})</text>
  220. </view>
  221. <view class="iconfont" style="color: #878592;" @click.stop="getHistory()">&#xe613;</view>
  222. </view>
  223. <swiper class="swiper-content" :current="freightSpaceIndex - 1"
  224. :style="{'height': scrollHeight ? `${scrollHeight}px` : '' }" disable-touch>
  225. <swiper-item class="swiper-item-box">
  226. <u-list class="swiper-list" :style="{'height': scrollHeight ? `${scrollHeight}px` : '' }">
  227. <freightSpace ref="freightSpaceRef" :leverTransaction="leverTransaction"
  228. @closeLeverSuccess="closeLeverSuccess" @setDepot="setDepot" :currency="currencyVal"
  229. v-bind="$attrs" v-on="$listeners" />
  230. </u-list>
  231. </swiper-item>
  232. <swiper-item>
  233. <u-list class="swiper-list" :style="{'height': scrollHeight ? `${scrollHeight}px` : '' }">
  234. <entrust :entrustlist="entrustList" @closeLeverSuccess="closeLeverSuccess" />
  235. </u-list>
  236. </swiper-item>
  237. </swiper>
  238. <!-- <template v-if="freightSpaceIndex === 1">
  239. </template>
  240. <template v-if="freightSpaceIndex === 2">
  241. </template> -->
  242. <!-- 侧边抽屉 -->
  243. <drawer ref="drawerRef" />
  244. <!-- 调整杠杆 -->
  245. <lever ref="leverRef" :lever-num.sync="multiple" :leverName.sync="leverName" />
  246. <unopen ref="unopenRef" @confirm="confirm" textAlign="left" :title="title" cancelBtn
  247. :content="closeLeverContent" />
  248. <unopen ref="placeOrderRef" @confirm="confirmPlaceOrder" title="下单确认" cancelBtn content="确定要下单吗?" />
  249. </view>
  250. </template>
  251. <script>
  252. import drawer from "./../modules/drawer.vue"
  253. import lever from "./lever.vue"
  254. import freightSpace from "./freight-space.vue"
  255. import entrust from "./entrust.vue"
  256. import {
  257. Api_setSubmitLever,
  258. Api_getLeverDeal,
  259. Api_getRegister
  260. } from "@/api/index.js"
  261. import {
  262. mapGetters
  263. } from 'vuex'
  264. export default {
  265. components: {
  266. drawer,
  267. lever,
  268. freightSpace,
  269. entrust
  270. },
  271. props: {
  272. leverTransaction: {
  273. type: Array,
  274. default: () => {
  275. return []
  276. }
  277. },
  278. pagesInfo: {
  279. type: Object,
  280. default: () => {
  281. return {}
  282. }
  283. },
  284. rateProfitsTotal: {
  285. type: Object,
  286. default: () => {
  287. return {}
  288. }
  289. },
  290. },
  291. data() {
  292. return {
  293. selectList: false,
  294. value: '市价委托',
  295. range: [{
  296. value: 1,
  297. text: '市价委托'
  298. },
  299. {
  300. value: 0,
  301. text: '限价委托'
  302. },
  303. // {
  304. // value: '计划委托',
  305. // text: '计划委托'
  306. // },
  307. ],
  308. leverName: '全仓',
  309. freightSpaceIndex: 1,
  310. marketNum:7,
  311. entrustList: [],
  312. scrollHeight: '',
  313. percent: 0,
  314. // 下单参数
  315. multiple: 100, // 逐仓倍数
  316. share: '', // 张数
  317. status: 1, // 状态,填1. 1市价交易,为0则是挂单交易
  318. target_price: '',
  319. // 平仓 - 反向开仓
  320. closeLeverContent: '',
  321. title: '平仓',
  322. restrict: '',
  323. setNodePrice: false,
  324. // 止盈
  325. restrictProfitVal: '',
  326. restrictProfitStatus: 1, // 按价格止盈 , 2 : 比例止盈
  327. // 止损
  328. restrictLossVal: '',
  329. restrictLossStatus: 1, // 按价格止损 , 2 : 比例止损
  330. };
  331. },
  332. watch: {
  333. setNodePrice:{
  334. handler(newStatus){
  335. if(newStatus){
  336. this.marketNum = 9
  337. }else{
  338. this.marketNum = 7
  339. }
  340. }
  341. },
  342. PageContentHeight: {
  343. handler(newHeigth) {
  344. this.scrollHeight = newHeigth - uni.upx2px(100) - this.tabBarHeight;
  345. },
  346. immediate: true
  347. },
  348. percent(newNums) {
  349. // const maxNums = this.pagesInfo?.lever_share_limit?.max
  350. // if (newNums >= 0 && maxNums) {
  351. // this.share = this.$decimalNum.mul(maxNums, newNums / 100);
  352. // console.log('this.share = ', this.share)
  353. // }
  354. //
  355. },
  356. },
  357. computed: {
  358. ...mapGetters([
  359. "stocksColor",
  360. 'bids',
  361. 'asks',
  362. 'daymarket',
  363. 'tabBarHeight',
  364. 'PageContentHeight',
  365. 'currencyVal',
  366. 'contractAccount'
  367. ])
  368. },
  369. created() {
  370. },
  371. methods: {
  372. getData() {
  373. this.closeLeverSuccess();
  374. },
  375. setNum(type) {
  376. if (this.status === 0) {
  377. // 只有限价才去计算
  378. if (!this.target_price) {
  379. this.target_price = 0
  380. };
  381. switch (type) {
  382. case 1:
  383. this.target_price = this.$decimalNum.sub(this.target_price, 0.01);
  384. break;
  385. case 2:
  386. this.target_price = this.$decimalNum.add(this.target_price, 0.01);
  387. break;
  388. }
  389. }
  390. },
  391. setType(item) {
  392. this.status = item.value;
  393. this.selectList = false
  394. if (this.status === 0) {
  395. this.target_price = this.daymarket.now_price;
  396. } else {
  397. this.target_price = ''
  398. }
  399. },
  400. // 平仓成功
  401. closeLeverSuccess() {
  402. this.$emit('refreshData')
  403. // this.getLeverDeal()
  404. this.getRegister()
  405. },
  406. openDrawer() {
  407. this.$refs.drawerRef.open();
  408. },
  409. change(e) {
  410. console.log("e:", e);
  411. },
  412. adjustLever() {
  413. this.$nextTick(() => {
  414. this.$refs.leverRef.open()
  415. })
  416. },
  417. // getLeverDeal() {
  418. // Api_getLeverDeal({
  419. // legal_id: this.currencyVal.legal_id,
  420. // currency_id: this.currencyVal.currency_id
  421. // }).then(res => {
  422. // this.pagesInfo = res
  423. // this.lever_transaction = res.lever_transaction?.in || []
  424. // })
  425. // },
  426. // 获取委托记录
  427. getRegister() {
  428. Api_getRegister({
  429. status: 0,
  430. legal_id: this.currencyVal.legal_id,
  431. currency_id: this.currencyVal.currency_id,
  432. page: 1,
  433. limit: 10000
  434. }).then(res => {
  435. const data = res.message;
  436. this.entrustList = data.data
  437. })
  438. },
  439. // Api_setSubmitLever
  440. // 下单确认
  441. setSubmitLever(type) {
  442. this.$nextTick(() => {
  443. this.$refs.placeOrderRef.open(type)
  444. })
  445. },
  446. // 确认下单
  447. confirmPlaceOrder(type) {
  448. const setData = {
  449. status: this.status,
  450. legal_id: this.currencyVal.legal_id,
  451. currency_id: this.currencyVal.currency_id,
  452. multiple: this.multiple,
  453. share: this.share,
  454. type: type
  455. }
  456. if (this.status === 0) {
  457. setData.target_price = this.target_price
  458. }
  459. Api_setSubmitLever(setData).then(res => {
  460. // this.getLeverDeal()
  461. })
  462. },
  463. // 查看合约历史
  464. getHistory() {
  465. uni.navigateTo({
  466. url: `/pages/contract/history/index?legal_id=${this.currencyVal.legal_id}&currency_id=${this.currencyVal.currency_id}`
  467. })
  468. },
  469. // 平仓 - 反向开仓
  470. setDepot(obj) {
  471. this.closeLeverContent = obj.closeLeverContent;
  472. this.title = obj.title;
  473. this.$nextTick(() => {
  474. this.$refs.unopenRef.open()
  475. })
  476. },
  477. confirm() {
  478. this.$nextTick(() => {
  479. this.$refs.freightSpaceRef.confirm();
  480. })
  481. },
  482. lookDetails() {
  483. if (this.currencyVal && this.currencyVal.currency_id && this.currencyVal.legal_id) {
  484. uni.navigateTo({
  485. url: '/pages/contract/sustainability/details'
  486. })
  487. }
  488. },
  489. // 合约设置
  490. setContract() {
  491. this.$emit('setContract')
  492. }
  493. },
  494. }
  495. </script>
  496. <style lang="scss" scoped>
  497. .contract-box {
  498. .contract-title {
  499. padding: 5rpx $pages-padding 0;
  500. min-height: 78rpx;
  501. display: flex;
  502. align-items: center;
  503. justify-content: space-between;
  504. .contract-item {
  505. display: flex;
  506. align-items: center;
  507. flex-shrink: 0;
  508. .title-iocn {
  509. width: 28rpx;
  510. height: 24rpx;
  511. display: flex;
  512. flex-direction: column;
  513. // align-items: center;
  514. justify-content: space-between;
  515. .title-iocn-item {
  516. width: 100%;
  517. height: 4rpx;
  518. border-radius: 2rpx;
  519. background: #111111;
  520. &:first-child {
  521. width: 50%;
  522. }
  523. }
  524. }
  525. .title-text {
  526. font-size: 37rpx;
  527. font-family: PingFang SC, PingFang SC-Bold;
  528. font-weight: 700;
  529. text-align: left;
  530. color: #141213;
  531. line-height: 1.2;
  532. letter-spacing: 0.74rpx;
  533. padding-left: 19rpx;
  534. }
  535. .title-ratio {
  536. font-size: 24rpx;
  537. font-family: PingFang SC, PingFang SC-Regular;
  538. font-weight: 400;
  539. color: #808080;
  540. line-height: 33rpx;
  541. }
  542. .ratio-icon {
  543. width: 31rpx;
  544. height: 33rpx;
  545. margin-left: 22rpx;
  546. }
  547. }
  548. }
  549. .account-box {
  550. width: 100%;
  551. padding: 21rpx $pages-padding;
  552. display: flex;
  553. flex-wrap: wrap;
  554. background-color: #F6F6F6;
  555. .account-item {
  556. display: flex;
  557. flex-direction: column;
  558. flex-shrink: 0;
  559. &:nth-child(3n) {
  560. width: 40%;
  561. text-align: right;
  562. }
  563. &:nth-child(3n - 1) {
  564. width: 30%;
  565. text-align: right;
  566. }
  567. &:nth-child(3n - 2) {
  568. width: 30%;
  569. }
  570. &:nth-child(n + 4) {
  571. margin-top: 20rpx;
  572. }
  573. .account-title {
  574. font-size: 20rpx;
  575. font-family: PingFang SC, PingFang SC-Bold;
  576. font-weight: 600;
  577. color: #807e89;
  578. line-height: 30rpx;
  579. .text {
  580. border-bottom: 2rpx dashed #707070;
  581. }
  582. }
  583. .account-num {
  584. font-size: 22rpx;
  585. font-family: PingFang SC, PingFang SC-Bold;
  586. font-weight: 700;
  587. color: #1a1a1a;
  588. line-height: 33rpx;
  589. margin-top: 11rpx;
  590. }
  591. }
  592. }
  593. }
  594. .data-box {
  595. width: 100%;
  596. padding: 25rpx $pages-padding 20rpx;
  597. display: flex;
  598. justify-content: space-between;
  599. align-items: stretch;
  600. .data-left {
  601. width: 303rpx;
  602. .nums-title {
  603. width: 100%;
  604. height: 67rpx;
  605. .flex {
  606. display: flex;
  607. justify-content: space-between;
  608. align-items: center;
  609. line-height: 33rpx;
  610. font-size: 24rpx;
  611. font-family: PingFang SC, PingFang SC-Bold;
  612. font-weight: 700;
  613. color: #807e89;
  614. }
  615. }
  616. // .<view class="nums-title">
  617. // <view class="left-title flex">
  618. // <text>价格</text>
  619. // <text>数量</text>
  620. // </view>
  621. // <view class="subhead-title flex">
  622. // <text>(USDT)</text>
  623. // <text>(张)</text>
  624. // </view>
  625. // </view>
  626. // .left-title {
  627. // font-size: 24rpx;
  628. // font-family: PingFang SC, PingFang SC-Bold;
  629. // font-weight: 700;
  630. // color: #807e89;
  631. // line-height: 33rpx;
  632. // }
  633. // .subhead-title {
  634. // font-size: 24rpx;
  635. // font-family: PingFang SC, PingFang SC-Bold;
  636. // font-weight: 700;
  637. // color: #807e89;
  638. // line-height: 33rpx;
  639. // }
  640. .nums-list {
  641. width: 100%;
  642. padding: 10rpx 0 4rpx;
  643. min-height: 318rpx;
  644. .nums-item {
  645. width: 100%;
  646. position: relative;
  647. height: 40rpx;
  648. margin-bottom: 4rpx;
  649. .nums-item-bg {
  650. position: absolute;
  651. top: 0;
  652. right: 0;
  653. z-index: 1;
  654. height: 100%;
  655. }
  656. .item-num {
  657. width: 100%;
  658. height: 100%;
  659. position: absolute;
  660. top: 0;
  661. right: 0;
  662. z-index: 2;
  663. display: flex;
  664. justify-content: space-between;
  665. align-items: center;
  666. font-size: 22rpx;
  667. font-family: PingFang SC, PingFang SC-Bold;
  668. font-weight: 700;
  669. line-height: 33rpx;
  670. color: #1a1a1a;
  671. text+text {
  672. font-weight: 700;
  673. line-height: 33rpx;
  674. }
  675. }
  676. }
  677. }
  678. // <view class="nums-list">
  679. // <view class="nums-item">
  680. // <text class="nums-item-bg"></text>
  681. // <text class="item-num">28516.8</text>
  682. // <text class="item-num">28516.8</text>
  683. // </view>
  684. // </view>
  685. }
  686. .data-right {
  687. width: 365rpx;
  688. // background-color: green;
  689. .right-select {
  690. width: 100%;
  691. display: flex;
  692. justify-content: space-between;
  693. align-items: center;
  694. .select-box {
  695. width: 175rpx;
  696. height: 50rpx;
  697. display: flex;
  698. justify-content: space-between;
  699. align-items: center;
  700. background-color: #f1f1f1;
  701. padding: 0 3px;
  702. border-radius: 8rpx;
  703. .select-text {
  704. font-size: 26rpx;
  705. font-weight: 700;
  706. }
  707. .iconfont {
  708. font-size: 20rpx;
  709. color: $Theme-Color;
  710. }
  711. }
  712. .position-select {
  713. position: relative;
  714. .select-list {
  715. position: absolute;
  716. left: 0;
  717. top: 50rpx;
  718. width: 185rpx;
  719. display: flex;
  720. flex-direction: column;
  721. background-color: #fff;
  722. z-index: 1;
  723. .select-list-item {
  724. width: 100%;
  725. height: 70rpx;
  726. line-height: 70rpx;
  727. padding: 0 30rpx;
  728. font-size: 22rpx;
  729. font-weight: bold;
  730. color: #c1c1c1;
  731. }
  732. .active-select-item {
  733. background-color: #f1f1f1;
  734. color: #000;
  735. }
  736. }
  737. }
  738. // <view class="select-box">
  739. // <text class="select-text">限价委托</text>
  740. // <text class="iconfont">&#xe601;</text>
  741. // </view>
  742. // <view class="select-box">
  743. // <text class="select-text">限价委托</text>
  744. // <text class="iconfont">&#xe601;</text>
  745. // </view>
  746. // .select-item {
  747. // width: 175rpx !important;
  748. // height: 50rpx;
  749. // flex: 0;
  750. // ::v-deep .uni-stat-box {
  751. // width: 175rpx !important;
  752. // height: 48rpx;
  753. // .uni-select {
  754. // width: 175rpx !important;
  755. // height: 48rpx;
  756. // .uni-select__input-box {
  757. // width: 100%;
  758. // height: 48rpx !important;
  759. // }
  760. // .uniui-clear{
  761. // display: none;
  762. // }
  763. // }
  764. // }
  765. // }
  766. }
  767. .right-input {
  768. width: 100%;
  769. height: 76rpx;
  770. background: #efefef;
  771. border-radius: 10rpx;
  772. margin-top: 30rpx;
  773. display: flex;
  774. justify-content: space-between;
  775. align-items: center;
  776. padding: 0 20rpx;
  777. font-size: 24rpx;
  778. font-family: PingFang SC, PingFang SC-Bold;
  779. font-weight: 700;
  780. color: #808080;
  781. line-height: 40rpx;
  782. .input-item {
  783. height: 100%;
  784. font-size: 24rpx;
  785. flex: 1;
  786. }
  787. .placeholder-class{
  788. font-size: 24rpx;
  789. }
  790. .input-item-text {
  791. display: flex;
  792. align-items: center;
  793. }
  794. .input-item-p {
  795. font-size: 24rpx;
  796. font-family: PingFang SC, PingFang SC-Bold;
  797. font-weight: 700;
  798. color: #808080;
  799. line-height: 40rpx;
  800. opacity: 0.3;
  801. }
  802. .right-input-icon {
  803. flex-shrink: 0;
  804. font-size: 26rpx;
  805. font-family: PingFang SC, PingFang SC-Bold;
  806. // font-weight: 700;
  807. color: #808080;
  808. line-height: 40rpx;
  809. display: flex;
  810. align-items: center;
  811. .icon-link {
  812. font-size: 20rpx;
  813. margin: 0 15rpx;
  814. color: $Theme-Color;
  815. }
  816. .icon {
  817. width: 30rpx;
  818. height: 26rpx;
  819. font-size: 18rpx;
  820. }
  821. }
  822. // <view class="target-price">
  823. // <text class="target-price-tag">-</text>
  824. // <input class="input-item" v-model="target_price" type="number">
  825. // <text class="target-price-tag">+</text>
  826. // </view>
  827. .target-price {
  828. width: 100%;
  829. height: 100%;
  830. display: flex;
  831. justify-content: space-between;
  832. align-items: stretch;
  833. .target-price-tag {
  834. flex-shrink: 0;
  835. width: 50rpx;
  836. height: 100%;
  837. text-align: center;
  838. font-size: 26rpx;
  839. color: $Theme-Color;
  840. display: flex;
  841. align-items: center;
  842. &:last-child {
  843. justify-content: flex-end;
  844. }
  845. }
  846. .input-item {
  847. flex: 1;
  848. height: 100%;
  849. font-size: 24rpx;
  850. text-align: center;
  851. // .nums-inp {
  852. // width: 100%;
  853. // height: 100%;
  854. // text-align: center;
  855. // font-size: 28rpx;
  856. // font-weight: bold;
  857. // }
  858. // .nums-t {
  859. // position: absolute;
  860. // left: 0;
  861. // top: 0;
  862. // width: 100%;
  863. // height: 100%;
  864. // }
  865. // <input class="nums-inp" type="text" v-model="leverNum">
  866. // <text class="nums-inp-tag">X</text>
  867. }
  868. }
  869. }
  870. .step-content {
  871. padding: 24rpx 0 35rpx;
  872. }
  873. .set-node {
  874. width: 100%;
  875. display: flex;
  876. align-items: center;
  877. justify-content: space-between;
  878. .set-node-box {
  879. display: flex;
  880. align-items: center;
  881. }
  882. .set-node-high {
  883. font-size: 24rpx;
  884. font-family: PingFang SC, PingFang SC-Regular;
  885. font-weight: 400;
  886. color: $Theme-Color;
  887. line-height: 1.1;
  888. }
  889. .set-node-status {
  890. width: 27rpx;
  891. height: 27rpx;
  892. background: #e6e6e8;
  893. border-radius: 2rpx;
  894. }
  895. .active-set {
  896. background-color: $Theme-Color;
  897. display: flex;
  898. justify-content: center;
  899. align-items: center;
  900. .iconfont {
  901. font-size: 26rpx;
  902. color: #fff;
  903. }
  904. }
  905. .set-node-text {
  906. font-size: 24rpx;
  907. font-family: PingFang SC, PingFang SC-Regular;
  908. font-weight: 400;
  909. color: #808080;
  910. line-height: 1.1;
  911. margin-left: 14rpx;
  912. border-bottom: 2rpx dashed #707070;
  913. }
  914. }
  915. .info-item {
  916. width: 100%;
  917. display: flex;
  918. justify-content: space-between;
  919. align-items: center;
  920. font-size: 26rpx;
  921. padding: 32rpx 0 0;
  922. line-height: 1.1;
  923. .info-item-lable {
  924. color: $SizeColor3;
  925. border-bottom: 1rpx dashed #707070;
  926. }
  927. .info-item-val {
  928. font-size: 22rpx;
  929. font-weight: bold;
  930. display: flex;
  931. align-items: center;
  932. .info-item-icon {
  933. font-size: 20rpx;
  934. margin-left: 20rpx;
  935. width: 30rpx;
  936. height: 30rpx;
  937. background-color: $Theme-Color;
  938. color: #fff;
  939. text-align: center;
  940. line-height: 30rpx;
  941. border-radius: 6rpx;
  942. }
  943. }
  944. }
  945. .info-btns {
  946. width: 100%;
  947. padding-top: 16rpx;
  948. .info-btn-info {
  949. display: flex;
  950. justify-content: space-between;
  951. font-size: 24rpx;
  952. padding-bottom: 10rpx;
  953. .info-btn-lable {
  954. color: $SizeColor3;
  955. }
  956. .info-btn-val {
  957. font-weight: bold;
  958. }
  959. // <view class="info-btn-info">
  960. // <text class="info-btn-lable">可做多</text>
  961. // <text class="info-btn-val">33719张</text>
  962. // </view>
  963. }
  964. .info-btn {
  965. width: 100%;
  966. height: 80rpx;
  967. background-color: $Theme-Color;
  968. text-align: center;
  969. line-height: 80rpx;
  970. font-size: 30rpx;
  971. color: #fff;
  972. border-radius: 10rpx;
  973. font-weight: bold;
  974. }
  975. }
  976. .err-btns {
  977. .info-btn {
  978. background-color: $Theme-Color3;
  979. }
  980. }
  981. }
  982. }
  983. .switch-icon {
  984. color: $Theme-Color;
  985. font-size: 26rpx;
  986. }
  987. .lable-title {
  988. width: 100%;
  989. height: 100rpx;
  990. border-bottom: 1rpx solid $border-color;
  991. padding: 0 $pages-padding;
  992. display: flex;
  993. justify-content: space-between;
  994. align-items: center;
  995. .lable-text {
  996. height: 100%;
  997. display: flex;
  998. align-items: stretch;
  999. .lable-text-item {
  1000. height: 100%;
  1001. display: flex;
  1002. align-items: center;
  1003. font-size: 28rpx;
  1004. &:first-child {
  1005. margin-right: 40rpx;
  1006. }
  1007. }
  1008. .active-text-item {
  1009. font-size: 34rpx;
  1010. font-weight: bold;
  1011. color: $Theme-Color;
  1012. position: relative;
  1013. &::before {
  1014. content: '';
  1015. position: absolute;
  1016. left: 50%;
  1017. bottom: 0;
  1018. width: 40rpx;
  1019. height: 8rpx;
  1020. background-color: $Theme-Color;
  1021. transform: translateX(-50%);
  1022. border-radius: 4rpx;
  1023. }
  1024. }
  1025. }
  1026. }
  1027. // <view class="left-title index-num-title flex">
  1028. // <text>{{ daymarket.now_price }}</text>
  1029. // <text>{{ daymarket.change }}%</text>
  1030. // </view>
  1031. // <view class="subhead-title index-title flex">
  1032. // <text>指数{{ daymarket.high }}</text>
  1033. // <text>标记{{ daymarket.open }}</text>
  1034. // </view>
  1035. .index-num-box {
  1036. height: 115rpx;
  1037. width: 100%;
  1038. border: 1rpx solid $border-color;
  1039. border-left: none;
  1040. border-right: none;
  1041. display: flex;
  1042. flex-direction: column;
  1043. justify-content: center;
  1044. .index-num-title {
  1045. height: 50rpx;
  1046. line-height: 50rpx;
  1047. display: flex;
  1048. justify-content: space-between;
  1049. font-family: PingFang SC, PingFang SC-Bold;
  1050. font-weight: 700;
  1051. color: #20b482;
  1052. text {
  1053. &:first-child {
  1054. font-size: 36rpx;
  1055. }
  1056. &:last-child {
  1057. font-size: 28rpx;
  1058. }
  1059. }
  1060. }
  1061. .index-title {
  1062. height: 28rpx;
  1063. display: flex;
  1064. justify-content: space-between;
  1065. font-family: PingFang SC, PingFang SC-Bold;
  1066. font-weight: 700;
  1067. text {
  1068. font-size: 20rpx;
  1069. line-height: 28rpx;
  1070. color: #808080;
  1071. border-bottom: 1px solid #808080;
  1072. }
  1073. }
  1074. // .index-num-title {
  1075. // font-size: 36rpx;
  1076. // font-family: PingFang SC, PingFang SC-Bold;
  1077. // font-weight: 700;
  1078. // color: #20b482;
  1079. // line-height: 50rpx;
  1080. // text+text {
  1081. // font-size: 28rpx;
  1082. // font-family: PingFang SC, PingFang SC-Bold;
  1083. // font-weight: 700;
  1084. // color: #20b482;
  1085. // line-height: 40rpx;
  1086. // }
  1087. // }
  1088. // .index-title {
  1089. // font-size: 20rpx;
  1090. // color: #808080;
  1091. // line-height: 1.2;
  1092. // text {
  1093. // border-bottom: 2rpx dashed #707070;
  1094. // display: flex;
  1095. // align-items: center;
  1096. // }
  1097. // padding-bottom: 18rpx;
  1098. // border-bottom: 1px solid #f2f2f2;
  1099. // // &:first-child{
  1100. // // text-align: right;
  1101. // // }
  1102. // }
  1103. }
  1104. </style>