| | |
| | | <div class="list"> |
| | | <div class="list-h"> |
| | | <div> |
| | | <span class="currency">{{ $t("买入") }}</span> |
| | | <span class="currency">{{ item.direction }}</span> |
| | | <span>{{ item.name }}</span> |
| | | </div> |
| | | <div class="state">{{ $t("成交") }}</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> |
| | |
| | | |
| | | .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; |
| | | } |