1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081 |
- <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">{{ contractAccount.usdt_totle }}</text>
- </view>
- <view class="account-item">
- <view class="account-title">
- <text class="text">可用保证金(USDT)</text>
- </view>
- <text class="account-num">{{ contractAccount.totle }}</text>
- </view>
- <view class="account-item">
- <view class="account-title">
- <text class="text">未实现亏盈(USDT)</text>
- </view>
- <text class="account-num">{{ rateProfitsTotal.hazard_rate }}</text>
- </view>
- </view>
- <view class="data-box">
- <view class="data-left">
- <view class="left-title flex">
- <text>价格</text>
- <text>数量</text>
- </view>
- <view class="subhead-title flex">
- <text>(USDT)</text>
- <text>(张)</text>
- </view>
- <view class="nums-list">
- <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="left-title index-num-title flex">
- <text>{{ daymarket.now_price }}</text>
- <text>{{ daymarket.change }}%</text>
- </view>
- <view class="subhead-title index-title flex">
- <text>指数{{ daymarket.high }}</text>
- <text>标记{{ daymarket.open }}</text>
- </view>
- <view class="nums-list" style="padding-top: 6.5rpx;">
- <view class="nums-item zhang" v-for="(item , indx) in asks" :key="`asks_${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>
- <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 class="input-item" v-model="share" type="number">
- <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 :width="365" :percent.sync="percent" />
- </view>
- <view class="set-node">
- <view class="set-node-status"></view>
- <text class="set-node-text">设置止盈止损</text>
- </view>
- <view class="info-item">
- <text class="info-item-lable">成本</text>
- <view class="info-item-val">0.00 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' : '' ]">持仓({{ leverTransaction.length }})</text>
- <text @click.stop="freightSpaceIndex = 2"
- :class="['lable-text-item' , freightSpaceIndex == 2 ? 'active-text-item' : '' ]">当前委托({{ entrustList.length }})</text>
- </view>
- <view class="iconfont" @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" :leverTransaction="leverTransaction"
- @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 :entrustlist="entrustList" @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,
- Api_getLeverDeal,
- Api_getRegister
- } from "@/api/index.js"
- import {
- mapGetters
- } from 'vuex'
- export default {
- components: {
- drawer,
- lever,
- freightSpace,
- entrust
- },
- props: {
- leverTransaction: {
- type: Array,
- default: () => {
- return []
- }
- },
- pagesInfo: {
- type: Object,
- default: () => {
- return {}
- }
- },
- rateProfitsTotal: {
- type: Object,
- default: () => {
- return {}
- }
- },
- },
- data() {
- return {
- selectList: false,
- value: '市价委托',
- range: [{
- value: 1,
- text: '市价委托'
- },
- {
- value: 0,
- text: '限价委托'
- },
- // {
- // value: '计划委托',
- // text: '计划委托'
- // },
- ],
- leverName: '全仓',
- freightSpaceIndex: 1,
-
-
- entrustList: [],
- scrollHeight: '',
- percent: 0,
- // 下单参数
- multiple: 100, // 逐仓倍数
- share: '', // 张数
- status: 1, // 状态,填1. 1市价交易,为0则是挂单交易
- target_price: '',
- // 平仓 - 反向开仓
- closeLeverContent: '',
- title: '平仓',
- restrict: ''
- };
- },
- watch: {
- 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) {
- this.share = this.$decimalNum.mul(maxNums, newNums / 100);
- console.log('this.share = ', this.share)
- }
- //
- },
- },
- computed: {
- ...mapGetters([
- "stocksColor",
- 'bids',
- 'asks',
- 'daymarket',
- 'tabBarHeight',
- 'PageContentHeight',
- 'currencyVal',
- 'contractAccount'
- ])
- },
- created() {
- },
- methods: {
- 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()
- this.getRegister()
- },
- openDrawer() {
- this.$refs.drawerRef.open();
- },
- change(e) {
- console.log("e:", e);
- },
- adjustLever() {
- this.$nextTick(() => {
- this.$refs.leverRef.open()
- })
- },
- // getLeverDeal() {
- // Api_getLeverDeal({
- // legal_id: this.currencyVal.legal_id,
- // currency_id: this.currencyVal.currency_id
- // }).then(res => {
- // this.pagesInfo = res
- // this.lever_transaction = res.lever_transaction?.in || []
- // })
- // },
- // 获取委托记录
- getRegister() {
- Api_getRegister({
- status: 0,
- legal_id: this.currencyVal.legal_id,
- currency_id: this.currencyVal.currency_id,
- page: 1,
- limit: 10000
- }).then(res => {
- const data = res.message;
- this.entrustList = data.data
- })
- },
- // Api_setSubmitLever
- // 下单确认
- 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.share,
- type: type
- }
- if (this.status === 0) {
- setData.target_price = this.target_price
- }
- Api_setSubmitLever(setData).then(res => {
- // this.getLeverDeal()
- })
- },
- // 查看合约历史
- 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')
- }
-
- },
- }
- </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;
- .text {
- border-bottom: 2rpx dashed #707070;
- }
- }
- .account-num {
- font-size: 22rpx;
- font-family: PingFang SC, PingFang SC-Bold;
- font-weight: 700;
- color: #1a1a1a;
- 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;
- .flex {
- display: flex;
- justify-content: space-between;
- align-items: center;
- }
- .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;
- }
- .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;
- // }
- }
- .nums-list {
- width: 100%;
- padding: 10rpx 0 4rpx;
- border-bottom: 1rpx solid #f2f2f2;
- min-height: 300rpx;
- .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: 4rpx;
- .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: 20rpx;
- 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;
- }
- .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: 26rpx;
- font-family: PingFang SC, PingFang SC-Bold;
- // font-weight: 700;
- color: #808080;
- line-height: 40rpx;
- display: flex;
- align-items: center;
- .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;
- .set-node-status {
- width: 27rpx;
- height: 27rpx;
- background: #e6e6e8;
- border-radius: 2rpx;
- }
- .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: 16rpx 0;
- line-height: 1.1;
- .info-item-lable {
- color: #ccc;
- 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: #ccc;
- }
- .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;
- }
- }
- // <view class="info-btns">
- // <view class="info-btn-info">
- // <text class="info-btn-lable">可做多</text>
- // <text class="info-btn-val">33719张</text>
- // </view>
- // <view class="info-btn">
- // 买入/做多
- // </view>
- // </view>
- // <view class="set-node">
- // <view class="set-node-status"></view>
- // <text class="set-node-text">设置止盈止损</text>
- // </view>
- }
- }
- .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;
- }
- }
- }
- }
- </style>
|