0510航天交易所ui仿制,代码使用的jiem
lxf
2025-07-14 399240a569af462ff35d3642259aaf6367d36811
src/components/perpetual-history-position/index.vue
@@ -5,7 +5,7 @@
      <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>
@@ -66,25 +66,19 @@
          </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>
@@ -267,9 +261,11 @@
.asset-list {
  width: 100%;
  @include themify() {
    color: themed("text_color1");
  }
  .list {
    background: #212121;
    box-sizing: border-box;
@@ -278,27 +274,32 @@
    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;
@@ -310,6 +311,7 @@
      // margin-right: 1.4rem;
      box-sizing: border-box;
      color: #d1cdcd;
      .list-value {
        width: 100%;
        color: #fff;
@@ -323,6 +325,7 @@
    }
  }
}
.kline {
  width: 100%;
  height: 1px;
@@ -332,6 +335,7 @@
.text-red {
  color: #ff0000 !important;
}
.text-green {
  color: #1cd36d !important;
}