| | |
| | | <div class="list"> |
| | | <div class="list-h"> |
| | | <div> |
| | | <span class="currency">{{ $t("买入") }}</span> |
| | | <span class="currency" :class="{ 'text-red': item.direction !== 'buy' }">{{ item.direction === 'buy' ? "Long" : "Short" }}</span> |
| | | <span>{{ item.name }}</span> |
| | | </div> |
| | | <div class="state">{{ $t("成交") }}</div> |
| | |
| | | <div class="list-value">{{ item.volume_open }}</div> |
| | | </div> |
| | | <div class="list-b"> |
| | | <div>{{ $t("最新成交") }}({{ item.symbol.toUpperCase() }})</div> |
| | | <div class="list-value">{{ item.volume_open }}</div> |
| | | <div>{{ $t("杠杆") }}</div> |
| | | <div class="list-value">{{ item.lever_rate }}</div> |
| | | </div> |
| | | <div class="list-b"> |
| | | <div>{{ $t("成交额") }}(USDT)</div> |
| | |
| | | </div> |
| | | <div class="list-b"> |
| | | <div>{{ $t("盈利率") }}</div> |
| | | <div |
| | | class="list-value" |
| | | :class="{ |
| | | 'text-green': item.profit / 1 > 0, |
| | | 'text-red': item.profit / 1 < 0, |
| | | }" |
| | | > |
| | | <div class="list-value" :class="{ |
| | | 'text-green': item.profit / 1 > 0, |
| | | 'text-red': item.profit / 1 < 0, |
| | | }"> |
| | | {{ calculateProfitRate(item) }} |
| | | </div> |
| | | </div> |
| | | <div class="list-b"> |
| | | <div>{{ $t("盈利") }}</div> |
| | | <div |
| | | class="list-value" |
| | | :class="{ |
| | | 'text-green': item.profit / 1 > 0, |
| | | 'text-red': item.profit / 1 < 0, |
| | | }" |
| | | > |
| | | <div class="list-value" :class="{ |
| | | 'text-green': item.profit / 1 > 0, |
| | | 'text-red': item.profit / 1 < 0, |
| | | }"> |
| | | {{ item.profit }} |
| | | </div> |
| | | </div> |
| | |
| | | }, |
| | | methods: { |
| | | calculateProfitRate(item) { |
| | | if (!item.trade_avg_price || !item.close_avg_price) return "--"; |
| | | const profitRate = ( |
| | | ((item.close_avg_price - item.trade_avg_price) / item.trade_avg_price) * |
| | | 100 |
| | | ).toFixed(2); |
| | | // if (!item.trade_avg_price || !item.close_avg_price) return "--"; |
| | | const profitRate = ((item.profit / item.deposit_open) * 100).toFixed(2); |
| | | return profitRate + "%"; |
| | | }, |
| | | handleText(state) { |
| | |
| | | |
| | | .asset-list { |
| | | width: 100%; |
| | | |
| | | @include themify() { |
| | | color: themed("text_color1"); |
| | | } |
| | | |
| | | .list { |
| | | background: #212121; |
| | | box-sizing: border-box; |
| | |
| | | border-radius: 2.3rem; |
| | | position: relative; |
| | | } |
| | | |
| | | .list-h { |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | margin-bottom: 2rem; |
| | | color: #d1cdcd; |
| | | |
| | | .currency { |
| | | font-size: 2.2rem; |
| | | font-weight: 600; |
| | | color: #1cd36d; |
| | | } |
| | | |
| | | span { |
| | | font-size: 1.6rem; |
| | | font-weight: 600; |
| | | // color: #fff; |
| | | } |
| | | } |
| | | |
| | | .list-item { |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | margin-top: 2.3rem; |
| | | |
| | | .list-b { |
| | | display: flex; |
| | | flex-direction: column; |
| | |
| | | // margin-right: 1.4rem; |
| | | box-sizing: border-box; |
| | | color: #d1cdcd; |
| | | |
| | | .list-value { |
| | | width: 100%; |
| | | color: #fff; |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | .kline { |
| | | width: 100%; |
| | | height: 1px; |
| | |
| | | .text-red { |
| | | color: #ff0000 !important; |
| | | } |
| | | |
| | | .text-green { |
| | | color: #1cd36d !important; |
| | | } |