| | |
| | | <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>{{ $t("类型") }}</div> |
| | | <div class="list-value"> |
| | | {{ item.state ? handleText(item.state) : "--" }} |
| | | </div> |
| | | </div> |
| | | <div class="list-b"> |
| | | <div>{{ $t("开仓价格") }}</div> |
| | | <div class="list-value"> |
| | | {{ item.trade_avg_price }} |
| | | </div> |
| | | </div> |
| | | <div class="list-b"> |
| | | <div>{{ $t("平仓价格") }}</div> |
| | | <div class="list-value"> |
| | | {{ item.close_avg_price }} |
| | | </div> |
| | | </div> |
| | | <div class="list-b"> |
| | | <div>{{ $t("保证金") }}</div> |
| | | <div class="list-value"> |
| | | {{ item.deposit_open }} |
| | | </div> |
| | | </div> |
| | | <div class="list-b"> |
| | | <div>{{ $t("手续费") }}</div> |
| | | <div class="list-value"> |
| | | {{ item.fee }} |
| | | </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, |
| | | }"> |
| | | {{ 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, |
| | | }"> |
| | | {{ item.profit }} |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | </template> --> |
| | | </div> |
| | | </template> |
| | | |
| | | <!-- { |
| | | "order_no": "25062319103773064243", // 订单编号 |
| | | "amount_open": 169350.0, // 开仓金额(USDT) |
| | | "symbol": "eth", // 交易对符号(ETH) |
| | | "lever_rate": 200.0, // 杠杆倍数(200倍) |
| | | "amount": 0.0, // 当前持仓金额(已平仓为0) |
| | | "create_time": "2025-06-23 07:10:37 AM", // 开仓时间 |
| | | "fee": 10.161, // 手续费(USDT) |
| | | "qiangPing": "2160.74289", // 强平价格 |
| | | "mark_price": 2414.6, // 标记价格 |
| | | "deposit_open": 270.96, // 开仓保证金(USDT) |
| | | "stop_price_loss": 0.0, // 止损价格(未设置) |
| | | "change_ratio": 0.0, // 价格变动比率 |
| | | "close_time": "2025-06-23 12:16:22 PM", // 平仓时间 |
| | | "trade_avg_price": 2246.69, // 开仓均价(USDT) |
| | | "close_avg_price": 2226.53, // 平仓均价(USDT) |
| | | "stop_price_profit": 0.0, // 止盈价格(未设置) |
| | | "volume": 0.0, // 当前持仓量(已平仓为0) |
| | | "volume_open": 75.0, // 开仓数量(ETH) |
| | | "name": "ETH/USDT", // 交易对名称 |
| | | "deposit": 0.0, // 当前保证金(已平仓为0) |
| | | "state": "created", // 状态(已平仓) |
| | | "profit": "-486.28", // 盈亏金额(亏损486.28 USDT) |
| | | "direction": "buy" // 方向(买入/做多) |
| | | } --> |
| | | <script> |
| | | export default { |
| | | name: "perpetualHistoryPosition", |
| | |
| | | }, |
| | | }, |
| | | methods: { |
| | | calculateProfitRate(item) { |
| | | // if (!item.trade_avg_price || !item.close_avg_price) return "--"; |
| | | const profitRate = ((item.profit / item.deposit_open) * 100).toFixed(2); |
| | | return profitRate + "%"; |
| | | }, |
| | | handleText(state) { |
| | | let str = ""; |
| | | if (state == "created") { |
| | |
| | | |
| | | .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; |
| | | background: rgba(60, 58, 58, 0.6); |
| | | } |
| | | |
| | | .text-red { |
| | | color: #ff0000 !important; |
| | | } |
| | | |
| | | .text-green { |
| | | color: #1cd36d !important; |
| | | } |
| | | </style> |