index.vue 24 KB

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