forked from dg/dabao_wap
src/page/user/Warehouse.vue
@@ -5,7 +5,7 @@ <div class="titles"> <div class="left_title" @click="handleOpenDialog()"> <div class="title"> <span>{{ '模拟账户' }}</span> <span>{{ titleName }}</span> </div> <div class="img"> <img src="../../assets/img/xiala.png" alt /> @@ -13,12 +13,28 @@ </div> <div class="right_box"></div> </div> <div class="overflow_box item"> <div class="overflow_box item" @click="SetTitleIndex(0)"> <div class="left_titles"> <span>{{ '虚拟账户' }}</span> <span>{{ '沪深京账户' }}</span> </div> <div class="right_price"> <span>{{ '净值: ¥49,611.0' }}</span> <span>{{ '' }}</span> </div> </div> <div class="overflow_box item" @click="SetTitleIndex(1)"> <div class="left_titles"> <span>{{ '指数账户' }}</span> </div> <div class="right_price"> <span>{{ '' }}</span> </div> </div> <div class="overflow_box item" @click="SetTitleIndex(2)"> <div class="left_titles"> <span>{{ '期货账户' }}</span> </div> <div class="right_price"> <span>{{ '' }}</span> </div> </div> </div> @@ -26,42 +42,88 @@ <div class="top_card"> <div class="card_content"> <div class="t_title"> <span>{{ '净值(USD)' }}</span> <span>{{ '总资产' }}</span> </div> <div class="t_price"> <span class="price">{{ '49,619.05' }}</span> <span class="profits">{{ '-370.00' }}</span> <!-- <span class="price">{{ '49,619.05' }}</span> <span class="profits">{{ '-370.00' }}</span> --> <p v-if="this.$store.state.settingForm.indexDisplay && !this.$store.state.settingForm.futuresDisplay" class="price">¥{{ $store.state.hide ? '****' : Number($store.state.userInfo.userAmt + $store.state.userInfo.userIndexAmt).toFixed(2) }}</p> <p v-else-if="!this.$store.state.settingForm.indexDisplay && this.$store.state.settingForm.futuresDisplay" class="price">¥{{ $store.state.hide ? '****' : Number($store.state.userInfo.userAmt + $store.state.userInfo.userFuturesAmt).toFixed(2) }}</p> <p v-else-if="!this.$store.state.settingForm.indexDisplay && !this.$store.state.settingForm.futuresDisplay" class="price">¥{{ $store.state.hide ? '****' : Number($store.state.userInfo.userAmt).toFixed(2) }}</p> <p v-else-if="this.$store.state.settingForm.indexDisplay && this.$store.state.settingForm.futuresDisplay" class="price">¥{{ $store.state.hide ? '****' : Number($store.state.userInfo.userAmt + $store.state.userInfo.userIndexAmt + $store.state.userInfo.userFuturesAmt).toFixed(2) }}</p> <!-- <span class="profits" v-show="titleIndex == 1">{{ '¥ ' + $store.state.userInfo.userIndexAmt }}</span> <span class="profits" v-show="titleIndex == 0">{{ '¥ ' + $store.state.userInfo.userAmt }}</span> <span class="profits" v-show="titleIndex == 2">{{ '¥ ' + $store.state.userInfo.userFuturesAmt }}</span> --> </div> <div class="balance"> <div class="left_titles"> <span>{{ '可用余额' }}</span> {{ '强平线' }} </div> <div class="right_titles"> <span>{{ '保证金水平' }}</span> {{ '可用资金' }} </div> </div> <div class="num"> <div class="left_price"> <span>{{ '49,386.26' }}</span> <span v-show="titleIndex == 1">{{ $store.state.hide ? '****' : Number(($store.state.userInfo.enableIndexAmt + $store.state.userInfo.allIndexFreezAmt) * indexSettingInfo.forceSellPercent).toFixed(2) }}</span> <span v-show="titleIndex == 0">{{ $store.state.hide ? '****' : Number(($store.state.userInfo.enableAmt + $store.state.userInfo.allFreezAmt) * settingInfo.forceStopPercent).toFixed(2) }} </span> <span v-show="titleIndex == 2">{{ $store.state.hide ? '****' : Number(($store.state.userInfo.enableFuturesAmt + $store.state.userInfo.allFuturesFreezAmt) * futuresSettingInfo.forceSellPercent).toFixed(2) }}</span> </div> <div class="right_margin"> <span>{{ '21314.94%' }}</span> <span v-show="titleIndex == 1">{{ '¥ ' + $store.state.userInfo.enableIndexAmt }}</span> <span v-show="titleIndex == 0">{{ '¥ ' + $store.state.userInfo.enableAmt }}</span> <span v-show="titleIndex == 2">{{ '¥ ' + $store.state.userInfo.enableFuturesAmt }}</span> </div> </div> <div class="margin"> <div class="left_titles"> <span>{{ '保证金' }}</span> {{ '冻结保证金' }} </div> <div class="right_titles"> <span>{{ '维持保证金' }}</span> {{ '持仓总盈亏' }} </div> </div> <div class="prices"> <div class="left_titles"> <span>{{ '232.79' }}</span> <span class="numDemo" v-show="titleIndex == 1">{{ '¥ ' + $store.state.userInfo.allIndexFreezAmt? $store.state.userInfo.allIndexFreezAmt:'0.00' }}</span> <span class="numDemo" v-show="titleIndex == 0">{{ '¥ ' + $store.state.userInfo.allFreezAmt?$store.state.userInfo.allFreezAmt :'0.00'}}</span> <span class="numDemo" v-show="titleIndex == 2">{{ '¥ ' + $store.state.userInfo.allFuturesFreezAmt?$store.state.userInfo.allFuturesFreezAmt:'0.00' }}</span> </div> <div class="right_titles"> <span>{{ '116.40' }}</span> <span class="numDemo" :class="$store.state.userInfo.allIndexProfitAndLose > 0 ? ' red' : $store.state.userInfo.allIndexProfitAndLose < 0 ? ' green' : ''" v-show="titleIndex == 1">{{ '¥ ' + $store.state.userInfo.allIndexProfitAndLose?$store.state.userInfo.allIndexProfitAndLose:'0.00' }}</span> <span class="numDemo" :class="$store.state.userInfo.allProfitAndLose > 0 ? ' red' : $store.state.userInfo.allProfitAndLose < 0 ? ' green' : ''" v-show="titleIndex == 0">{{ '¥ ' + $store.state.userInfo.allProfitAndLose?$store.state.userInfo.allProfitAndLose:'0.00' }}</span> <span class="numDemo" :class="$store.state.userInfo.allFuturesProfitAndLose > 0 ? 'red' : $store.state.userInfo.allFuturesProfitAndLose < 0 ? ' green' : ''" v-show="titleIndex == 2">{{ '¥'+$store.state.userInfo.allFuturesProfitAndLose?Number($store.state.userInfo.allFuturesProfitAndLose).toFixed(2):'0.00'}}</span> </div> </div> </div> @@ -69,82 +131,98 @@ <div class="tabs_card"> <div class="tabs_card_content"> <div class="tabs_top_title"> <div class="title_items" v-for="(item, index) in tabsArr" :key="index" @click="handleTabsClick(item, index)" > <span :class="tabsCurrentIndex === index ? 'active' : ''">{{ item }}</span> <div class="title_items" v-for="(item, index) in tabsArr" :key="index" @click="handleTabsClick(item, index)" :class="index == 0 ? 'kuan' : 'kuan'"> <span :class="tabsCurrentIndex === index ? 'active' : ''">{{ item }}{{ index == 0 ? '(' + total + ')' : '(' + totals + ')'}}</span> </div> </div> <!-- 持仓 currentIndex: 0 --> <div class="over"> <div class="tabs_o" v-if="tabsCurrentIndex === 0"> <div class="tabs_o_items" v-for="(item, index) in tabsPositionNumArr" :key="index"> <div class="tabs_o_title"> <span class="title">{{ item.name }}</span> <span class="buy_to_sell">{{ item.mr }}</span> <span class="multiple">{{ item.multiple + 'X' }}</span> <span class="nums">{{ item.hd + '手'}}</span> </div> <div class="center_price"> <div class="profit"> <span>{{ item.ProfitLoss }}</span> <van-list v-model="loading" :finished="finished" finished-text="没有更多了" v-show="tabsCurrentIndex === 0&&total != 0" @load="onLoad" :immediate-check="immediate"> <div class="tabs_o" > <div class="tabs_o_items" v-for="(item, index) in tabsPositionNumArr" :key="item.buyOrderId"> <div class="tabs_o_title"> <span class="title">{{ item.stockName }}</span> <span class="buy_to_sell" :class="item.orderDirection=='买跌'?'maichu':'mairu'">{{ item.orderDirection=="买跌"?'卖出':'买入' }}</span> <span class="multiple">{{ item.allProfitAndLose }}</span> <span class="nums">{{ item.orderNum / 100 + '手' }}</span> </div> <div class="center_price"> <div class="profit"> <span>{{ item.profitAndLose }}</span> </div> <div class="start_price jiantou"> <span>{{ item.buyOrderPrice }}</span> </div> <div class="new_price"> <span>{{ item.now_price }}</span> </div> </div> <div class="bottom_price_title"> <div class="profit_title"> <span>{{ '浮动净盈亏' }}</span> </div> <div class="start_price"> <span>{{ '开仓价格' }}</span> </div> <div class="new_price"> <span>{{ '当前价格' }}</span> </div> </div> <div class="right_btn"> <span>{{ '平仓' }}</span> </div> </div> <div class="start_price"> <span>{{ item.startPrice }}</span> </div> <div class="new_price"> <span>{{ item.newPrice }}</span> </div> </div> <div class="bottom_price_title"> <div class="profit_title"> <span>{{ '浮动净盈亏' }}</span> </div> <div class="start_price"> <span>{{ '开仓价格' }}</span> </div> <div class="new_price"> <span>{{ '当前价格' }}</span> </div> </div> <div class="right_btn"> <span>{{ '平仓' }}</span> </div> </div> </div> <div class="waiting" v-if="tabsCurrentIndex === 1"> </van-list> <div class="waiting" v-if="total == 0 && tabsCurrentIndex === 0"> <div class="waiting_box"> <div class="img_cont"> <img src="../../assets/img/zhaobudao.png" alt /> <span class="gd">{{ '当前无挂单' }}</span> <div class="trading"> <div class="trading" @click="$router.push('/trading-list')"> <span>{{ '开始交易' }}</span> </div> </div> </div> </div> <div class="tabs_o" v-if="tabsCurrentIndex === 2"> <div class="tabs_o_items oes" v-for="(item, index) in tabsPcArr" :key="index"> <div class="tabs_o_title"> <span class="title">{{ item.name }}</span> <span class="buy_to_sell">{{ item.mr }}</span> <span class="multiple">{{ item.multiple + 'X' }}</span> <span class="nums">{{ item.hd + '手'}}</span> </div> <div class="bottom_price_title"> <div class="profit_res"> <span>{{ '平仓时间: 2022年11月7日 18:18:05' }}</span> <div class="waiting" v-if="totals == 0 && tabsCurrentIndex === 1"> <div class="waiting_box"> <div class="img_cont"> <img src="../../assets/img/zhaobudao.png" alt /> <span class="gd">{{ '当前无挂单' }}</span> <div class="trading" @click="$router.push('/trading-list')"> <span>{{ '开始交易' }}</span> </div> </div> <div class="right_count"> <span>{{ item.countNum }}</span> </div> </div> </div> <van-list v-model="loadings" :finished="finisheds" finished-text="没有更多了" @load="onLoads" :immediate-check="immediate" v-show="tabsCurrentIndex === 1&&totals != 0"> <div class="tabs_o"> <div class="tabs_o_items oes" v-for="(item, index) in tabsPcArr" :key="index"> <div class="tabs_o_title"> <span class="title">{{ item.stockName }}</span> <span class="buy_to_sell">{{ item.orderDirection }}</span> <span class="multiple">{{ item.allProfitAndLose }}</span> <span class="nums">{{ item.orderNum / 100 + '手' }}</span> </div> <div class="bottom_price_title"> <div class="profit_res"> <span>平仓时间: {{ item.buyOrderTime | gettime }}</span> </div> </div> <div class="right_count" :class="item.profitAndLose > 0 ? 'red' : item.profitAndLose == 0 ? '' : 'green'"> <span>{{ item.profitAndLose }}</span> </div> </div> </div> </van-list> </div> </div> </div> </div> @@ -154,276 +232,314 @@ </template> <script> import * as api from "@/axios/api"; export default { data() { return { tabsArr: ["持仓", "挂单", "已平仓"], tabsArr: ["持仓", "已平仓"], tabsCurrentIndex: 0, tabsPositionNumArr: [ { name: "美元/日元", mr: "买入", multiple: 200, hd: 0.01, ProfitLoss: -1.15, startPrice: 146.656, newPrice: 146.487 }, { name: "美元/日元", mr: "买入", multiple: 200, hd: 0.01, ProfitLoss: -1.15, startPrice: 146.656, newPrice: 146.487 }, { name: "美元/日元", mr: "买入", multiple: 200, hd: 0.01, ProfitLoss: -1.15, startPrice: 146.656, newPrice: 146.487 }, { name: "美元/日元", mr: "买入", multiple: 200, hd: 0.01, ProfitLoss: -1.15, startPrice: 146.656, newPrice: 146.487 }, { name: "美元/日元", mr: "买入", multiple: 200, hd: 0.01, ProfitLoss: -1.15, startPrice: 146.656, newPrice: 146.487 }, { name: "美元/日元", mr: "买入", multiple: 200, hd: 0.01, ProfitLoss: -1.15, startPrice: 146.656, newPrice: 146.487 }, { name: "美元/日元", mr: "买入", multiple: 200, hd: 0.01, ProfitLoss: -1.15, startPrice: 146.656, newPrice: 146.487 }, { name: "美元/日元", mr: "买入", multiple: 200, hd: 0.01, ProfitLoss: -1.15, startPrice: 146.656, newPrice: 146.487 }, { name: "美元/日元", mr: "买入", multiple: 200, hd: 0.01, ProfitLoss: -1.15, startPrice: 146.656, newPrice: 146.487 }, { name: "美元/日元", mr: "买入", multiple: 200, hd: 0.01, ProfitLoss: -1.15, startPrice: 146.656, newPrice: 146.487 }, { name: "美元/日元", mr: "买入", multiple: 200, hd: 0.01, ProfitLoss: -1.15, startPrice: 146.656, newPrice: 146.487 }, { name: "美元/日元", mr: "买入", multiple: 200, hd: 0.01, ProfitLoss: -1.15, startPrice: 146.656, newPrice: 146.487 }, { name: "美元/日元", mr: "买入", multiple: 200, hd: 0.01, ProfitLoss: -1.15, startPrice: 146.656, newPrice: 146.487 } ], tabsPcArr: [ { name: "美元/日元", mr: "买入", multiple: 200, hd: 0.01, ProfitLoss: -1.15, startPrice: 146.656, newPrice: 146.487, countNum: -1.18 }, { name: "美元/日元", mr: "买入", multiple: 200, hd: 0.01, ProfitLoss: -1.15, startPrice: 146.656, newPrice: 146.487, countNum: -1.52 }, { name: "美元/日元", mr: "买入", multiple: 200, hd: 0.01, ProfitLoss: -1.15, startPrice: 146.656, newPrice: 146.487, countNum: -2.36 }, { name: "美元/日元", mr: "买入", multiple: 200, hd: 0.01, ProfitLoss: -1.15, startPrice: 146.656, newPrice: 146.487, countNum: -1.18 }, { name: "美元/日元", mr: "买入", multiple: 200, hd: 0.01, ProfitLoss: -1.15, startPrice: 146.656, newPrice: 146.487, countNum: -1.18 }, { name: "美元/日元", mr: "买入", multiple: 200, hd: 0.01, ProfitLoss: -1.15, startPrice: 146.656, newPrice: 146.487, countNum: -1.18 }, { name: "美元/日元", mr: "买入", multiple: 200, hd: 0.01, ProfitLoss: -1.15, startPrice: 146.656, newPrice: 146.487, countNum: -1.18 }, { name: "美元/日元", mr: "买入", multiple: 200, hd: 0.01, ProfitLoss: -1.15, startPrice: 146.656, newPrice: 146.487, countNum: -1.18 }, { name: "美元/日元", mr: "买入", multiple: 200, hd: 0.01, ProfitLoss: -1.15, startPrice: 146.656, newPrice: 146.487, countNum: -1.18 }, { name: "美元/日元", mr: "买入", multiple: 200, hd: 0.01, ProfitLoss: -1.15, startPrice: 146.656, newPrice: 146.487, countNum: -1.18 }, { name: "美元/日元", mr: "买入", multiple: 200, hd: 0.01, ProfitLoss: -1.15, startPrice: 146.656, newPrice: 146.487, countNum: -1.18 }, { name: "美元/日元", mr: "买入", multiple: 200, hd: 0.01, ProfitLoss: -1.15, startPrice: 146.656, newPrice: 146.487, countNum: -1.18 }, { name: "美元/日元", mr: "买入", multiple: 200, hd: 0.01, ProfitLoss: -1.15, startPrice: 146.656, newPrice: 146.487, countNum: -1.18 } ], titleName: "沪深京账户", indexSettingInfo: {}, futuresSettingInfo: {}, tabsPositionNumArr: [], titleIndex: 0, settingInfo: {}, tabsPcArr: [], titleDialog: false, total: 0, totals: 0, loading: false, finished: false, finisheds:false, page: 1, pages: 1, immediate:false, loadings:false, }; }, mounted() { this.getListDetail(); this.getUserInfo(); this.getIndexSettingInfo(); this.getSettingInfo(); this.getFuturesSetting(); this.getListDetails(); }, methods: { onLoad() { this.page++; switch (this.titleIndex) { case 0: this.getListDetail(); break; default: break; } }, onLoads() { this.pages++; switch (this.titleIndex) { case 1: this.getListDetails(); break; default: break; } }, SetTitleIndex(index) { //账户选项卡 this.titleIndex = index; this.page = 1; this.pages = 1; this.finished = false; this.finisheds = false; this.tabsPositionNumArr = []; this.tabsPcArr = []; switch (index) { case 0: this.titleName = "沪深京账户"; this.getListDetail(); this.getListDetails(); break; case 1: this.titleName = "指数账户"; this.getzhishuListDetail(); this.getzhishuListDetails(); break; case 2: this.titleName = "期货账户"; this.getQhListDetail(); this.getQhListDetails(); break; default: break; } this.titleDialog = false; }, handleTabsClick(item, index) { //持仓已平仓选项卡 this.tabsCurrentIndex = index; }, handleOpenDialog() { this.titleDialog = !this.titleDialog; }, async getIndexSettingInfo() { // 网站设置信息 指数 let data = await api.getIndexSetting() if (data.status === 0) { // 成功 this.indexSettingInfo = data.data } else { Toast(data.msg) } }, async getFuturesSetting() { // 网站设置信息 期货 let data = await api.getFuturesSetting() if (data.status === 0) { // 成功 this.futuresSettingInfo = data.data } else { Toast(data.msg) } }, async getSettingInfo() { let data = await api.getSetting() if (data.status === 0) { // 成功 this.settingInfo = data.data } else { Toast(data.msg) } }, async getUserInfo() { // 获取用户信息 // let showcookie = this.getCookie('USER_TOKEN'); let data = await api.getUserInfo() if (data.status === 0) { // this.getProductSetting() this.$store.state.userInfo = data.data } else { Toast(data.msg) } this.$store.state.user = this.user }, async getListDetail() { //获取沪深我的持仓列表 this.loading = true; let opt = { state: 0, stockCode: '', // 代码 stockSpell: '', // 简拼 pageNum: this.page, pageSize: 15, } let data = await api.getOrderList(opt) this.loading = false; if (data.status === 0) { if (data.data.list.length < 15) { this.finished = true; } data.data.list.forEach(element => { this.tabsPositionNumArr.push(element) }) this.total = data.data.total } else { Toast(data.msg) } }, async getzhishuListDetail() { //获取指数持仓 this.loading = true; let opt = { state: 0, stockCode: '', // 代码 stockSpell: '', // 简拼 pageNum: this.pageNum, pageSize: this.pageSize } let data = await api.getIndexOrderList(opt) this.loading = false; if (data.status === 0) { if (data.data.list.length < 15) { this.finished = true; } data.data.list.forEach(element => { this.tabsPositionNumArr.push(element) }) this.total = data.data.total } else { Toast(data.msg) } }, async getQhListDetail() { //获取期货持仓 this.loading = true; let opt = { state: 0, fnCode: '', // 代码 fnName: '', // 简拼 pageNum: this.pageNum, pageSize: this.pageSize } let data = await api.getFuturesOrderList(opt) this.loading = false; if (data.status === 0) { if (data.data.list.length < 15) { this.finished = true; } data.data.list.forEach(element => { this.tabsPositionNumArr.push(element) }) this.total = data.data.total } else { Toast(data.msg) } }, async getListDetails() { //获取沪深我的平仓列表 this.loadings = true; let opt = { state: 1, stockCode: '', // 代码 stockSpell: '', // 简拼 pageNum: this.pages, pageSize: 15 } let data = await api.getOrderList(opt) this.loadings = false; if (data.status === 0) { if(data.data.list.length <15){ this.finisheds = true; } data.data.list.forEach(element => { this.tabsPcArr.push(element) }) this.totals = data.data.total } else { Toast(data.msg) } }, async getzhishuListDetails() { //获取指数平仓 this.loadings = true; let opt = { state: 1, stockCode: '', // 代码 stockSpell: '', // 简拼 pageNum: this.pageNum, pageSize: 15 } let data = await api.getIndexOrderList(opt) this.loadings = false; if(data.data.list.length <15){ this.finisheds = true; } if (data.status === 0) { data.data.list.forEach(element => { this.tabsPcArr.push(element) }) this.totals = data.data.total } else { Toast(data.msg) } }, async getQhListDetails() { //获取期货平仓 this.loadings = true; let opt = { state: 1, fnCode: '', // 代码 fnName: '', // 简拼 pageNum: this.pageNum, pageSize: this.pageSize } let data = await api.getFuturesOrderList(opt) this.loadings = false; if (data.status === 0) { if(data.data.list.length <15){ this.finisheds = true; } data.data.list.forEach(element => { this.tabsPcArr.push(element) }) this.totals = data.data.total } else { Toast(data.msg) } }, }, mounted() { } filters: { gettime(time) { if (!time) { return ""; } var nd = new Date(time); var y = nd.getFullYear(); var mm = nd.getMonth() + 1; var d = nd.getDate(); var h = nd.getHours(); var m = nd.getMinutes(); var c = nd.getSeconds(); if (mm < 10) { mm = "0" + mm; } if (d < 10) { d = "0" + d; } if (h < 10) { h = "0" + h; } if (m < 10) { m = "0" + m; } if (c < 10) { c = "0" + c; } //17:35:2922-06-2022 return y + '/' + mm + '/' + d + ' ' + h + ":" + m + ":" + c; } }, }; </script> @@ -438,94 +554,111 @@ width: 100%; height: calc(100% - 1.2974rem); } .content { width: 100%; height: 100%; position: relative; } .top_title.active { height: 3rem; height: 6.5rem; } .top_title { width: 100%; height: 0.9231rem; position: absolute; background: #fff; top: 0; top: 0.6rem; z-index: 10; overflow: hidden; transition: all 1s; transition: all 0.3s; padding: 0 .3rem; .titles { width: 100%; height: 0.9231rem; display: flex; } .left_title, .right_box { width: 50%; height: 100%; display: flex; } .title { width: 60%; width: auto; height: 100%; font-size: 0.5897rem; font-size: 0.4897rem; display: flex; align-items: center; span { font-weight: 800; font-size: 0.4897rem; font-weight: 600; } } .img { width: 40%; height: 100%; display: flex; align-items: center; img { width: 0.6rem; height: 0.6rem; } } } .warehouse_card { width: 100%; height: calc(100% - 1rem); position: absolute; top: 0.9231rem; top: 1.5231rem; z-index: 0; padding: 0 0.3333rem; background: rgb(242, 243, 247); .top_card { width: 100%; height: 4.2308rem; border-radius: 0.15rem; margin-top: 0.3rem; background: #fff; .card_content { width: 100%; height: 100%; padding: 0.4rem; .t_title { width: 100%; height: 0.5128rem; display: flex; align-items: center; span { font-size: 0.3046rem; font-weight: bold; } } .t_price { width: 100%; height: 0.5128rem; display: flex; align-items: center; .price { font-weight: 800; font-size: 0.3846rem; font-weight: 600; font-size: 0.4246rem; margin-top: 0.07rem; } .profits { font-weight: 800; font-size: 0.2846rem; @@ -534,58 +667,75 @@ margin-left: 0.2rem; } } .balance { width: 100%; height: 0.3846rem; margin-top: 0.428rem; display: flex; > div { >div { width: 50%; height: 100%; color: @topCardColor; span { font-weight: 600; } } } .num { width: 100%; height: 0.3846rem; margin-top: 0.1rem; display: flex; > div { >div { width: 50%; height: 100%; span { font-weight: 600; } } .right_margin { color: rgb(100, 162, 117); color: rgb(81, 164, 99); span { font-weight: normal !important; } } } .margin { width: 100%; height: 0.3846rem; margin-top: 0.2rem; display: flex; > div { >div { width: 50%; height: 100%; color: @topCardColor; span { font-weight: 600; } } } .prices { width: 100%; height: 0.3846rem; margin-top: 0.1rem; display: flex; > div { >div { width: 50%; height: 100%; span { font-weight: 600; } @@ -594,113 +744,154 @@ } } } .over { width: 100%; height: calc(100% - 0.7179rem); overflow: auto; padding: 0 0.3rem; } .tabs_card { width: 100%; height: calc(100% - 4.24rem - 0.5rem); height: calc(100% - 4.24rem - 0.5rem - 0.6rem); margin-top: 0.3rem; background: #fff; border-radius: 0.2rem; padding-top: 0.15rem; } .over::-webkit-scrollbar { display: none; } .tabs_card_content { width: 100%; height: 100%; padding: 0 0.3rem; .tabs_top_title { width: 100%; height: 1rem; border-radius: 0.15rem; border-bottom: 0.01rem solid #ececec; display: flex; align-items: center; font-size: 0.4103rem; padding-top: 0.2rem; > div { width: 25%; >div { width: 20%; height: 100%; display: flex; align-items: center; justify-content: left; justify-content: center; span { display: inline-block; height: 100%; font-weight: 600; font-weight: 550; line-height: 0.7179rem; text-align: center; } span.active { color: rgb(62, 121, 226); border-bottom: 0.1rem solid rgb(62, 121, 226); text-align: center; // border-bottom: 0.1rem solid rgb(62, 121, 226); } span.active::after { content: ''; width: 80%; height: 0.001rem; display: block; margin: 0 auto; border-bottom: 0.06rem solid rgb(62, 121, 226); } } } .tabs_o { width: 100%; margin-top: 0.3rem; > .tabs_o_items { >.tabs_o_items { width: 100%; height: 2.3rem; height: 2.2rem; position: relative; border-bottom: 0.01rem solid #ececec; margin-bottom: 0.1rem; .tabs_o_title { width: 100%; height: 0.7179rem; display: flex; align-items: center; span { display: inline-block; margin-right: 0.2rem; } .title { font-weight: 600; font-size: 0.4059rem; } .buy_to_sell { background: rgb(215, 243, 235); padding: 0.08rem 0.1rem; color: rgb(109, 175, 125); font-weight: 600; } .multiple { padding: 0.08rem 0.1rem; background: rgb(236, 243, 252); color: rgb(42, 108, 230); font-weight: 600; } .nums { color: @topCardColor; } } .center_price { width: 100%; height: 0.3846rem; display: flex; align-items: center; margin-top: 0.3rem; > div { >div { width: 28%; height: 100%; span { font-weight: 600; } } .profit { color: rgb(209, 79, 91); } } .bottom_price_title { width: 100%; height: 0.4rem; margin-top: 0.1rem; display: flex; align-items: center; > div { >div { width: 28%; height: 100%; color: @topCardColor; span { font-weight: 600; } @@ -709,10 +900,12 @@ } } } .waiting { width: 100%; margin-top: 0.3rem; position: relative; .waiting_box { width: 100%; height: 4rem; @@ -720,25 +913,30 @@ align-items: center; justify-content: center; margin-top: 1rem; > div { >div { width: 60%; height: 100%; img { width: 100%; height: 100%; } .gd { display: inline-block; width: 100%; text-align: center; color: rgb(133, 133, 133); } .trading { width: 100%; height: 2rem; display: flex; align-items: center; justify-content: center; span { display: inline-block; width: 4.1026rem; @@ -755,6 +953,7 @@ } } } .right_btn { width: 1.7949rem; height: 0.6667rem; @@ -767,66 +966,143 @@ align-items: center; justify-content: center; border-radius: 0.3rem; span { font-weight: 600; font-size: 0.3846rem; } } .right_count { width: 1.7949rem; height: 0.6667rem; position: absolute; right: 1%; top: 20%; color: #d7343a; display: flex; align-items: center; justify-content: center; border-radius: 0.3rem; span { font-weight: 600; font-size: 0.3846rem; } } .profit_res { width: 100% !important; margin-top: .2rem; } .oes { height: 2rem !important; height: 1.5rem !important; } .dialog { width: 100%; height: 100%; position: absolute; top: 0; background: rgba(0,0,0,.5); background: rgba(0, 0, 0, .5); z-index: 9; } .overflow_box { width: 100%; height: 1.5rem; border-radius: .2rem; padding: 0 .3rem; margin: .3rem 0; background: rgb(236,243,253); background: #fff; display: flex; align-items: center; justify-content: space-between; > div { >div { height: 50%; display: flex; justify-content: center; align-items: center; } .left_titles { color: rgb(129, 131, 133); font-size: .3815rem; span { font-weight: 800; font-size: .3815rem; font-weight: normal !important; } } .right_price { color: rgb(128,135,145); color: rgb(128, 135, 145); } } .kuan { width: auto !important; padding-left: 0.5rem; letter-spacing: 0.02rem; } .kuans { width: auto !important; padding-left: 0.5rem; letter-spacing: 0.02rem; } .left_price { font-weight: normal; span { font-size: 0.3rem; color: #000; font-weight: 500 !important; ; } } .left_price { font-weight: normal; span { font-size: 0.3rem; color: #000; font-weight: 500 !important; ; } } .numDemo { font-size: 0.3rem; color: #000; font-weight: 500 !important; ; } .maichu{ color: rgb(225,57,65); background: rgb(252,238,240); } .mairu{ color: rgb(109, 175, 125); background: rgb(215, 243, 235); } .jiantou{ position: relative; } .jiantou::before{ content: ''; background-image: url('../../assets/img/youyou.png') ; background-size: 100% 100%; width: 0.6rem; height: 0.2rem; font-size: 0.8rem; position: absolute; right: 0.5rem; top: calc(50% - 0.15rem); } </style>
