1

jhzh

2025-07-28 a8b0eb32d97e7a540692a8a29f610fe76d67ef74

 src/page/user/Warehouse/item.card.vue

@@ -1,73 +1,87 @@
<template>
  <div class="item-card-box">
    <div style="padding: 12px 24px; color: #fff;background-color: #185546;width: max-content;margin-bottom: 20px;">{{$t('日股')}}</div>
    <div class="total-assets">
      <div class="left">
        <div class="total-name">
          {{ activeObj.assname }} ({{ activeObj.symbolCode }})
        </div>
        <div class="total-data">{{ activeObj.totalMoney || "0.0000" }}</div>
        <div class="total-data-huansuan" v-if="activeObj.symbolCode !== $USD">
          ≈ {{ $USD }} {{ activeObj.totalMoneyUSD || "0.0000" }}
        <!-- <div class="total-name">
          {{ activeObj.assname }} ()
        </div> -->
        <div class="total-data">
          {{ activeObj.totalMoney   }} {{ activeObj.symbolCode }}
        </div>
      </div>
      <div class="right" @click="closeAll">{{ $t("全部平仓") }}</div>
    </div>
    <!-- totleAssets  总资产 -->
    <!-- availableBalance  可用 -->
    <!-- cumulativeProfitAndLoss  累计盈亏 -->
    <!-- profitAndLoss  浮动盈亏 -->
    <!-- handlingCharge  总手续费 -->
    <!-- freezeMoney  冻结 -->

    <div class="item-card-itembox">
      <div class="item">
        <div class="itembox-data">{{ activeObj.profitAndLoss }}</div>
        <div v-if="activeObj.symbolCode !== $USD" class="number-text">
          ≈ {{ $USD }} {{ activeObj.profitAndLossUSD || "0.0000" }}
        <div class="itembox-data">
          {{ $t("累計盈虧") }}
        </div>
        <div class="itembox-name">
          {{ $t("浮動盈虧") }} ({{ activeObj.symbolCode }})
          {{ activeObj.isZf === 1 ? "-" : "" }}
          {{ activeObj.cumulativeProfitAndLoss   }}
        </div>

      </div>
      <div class="item">
        <div class="itembox-data">{{ activeObj.availableBalance }}</div>
        <div v-if="activeObj.symbolCode !== $USD" class="number-text">
          ≈ {{ $USD }}
          {{ activeObj.availableBalanceUSD || "0.0000" }}
        <div class="itembox-data">
          {{ $t("浮動盈虧") }}
        </div>

        <div class="itembox-name">
          ¥{{ activeObj.profitAndLoss   }}
        </div>
      </div>

      <!-- <div class="item">
        <div class="itembox-data">
          ¥{{ activeObj.availableBalance   }}
        </div>

        <div class="itembox-name">
          {{ $t("可用資產") }} ({{ activeObj.symbolCode }})
        </div>
      </div>

      <div class="item">
        <div class="itembox-data">{{ activeObj.cumulativeProfitAndLoss }}</div>
        <div v-if="activeObj.symbolCode !== $USD" class="number-text">
          ≈ {{ $USD }}
          {{ activeObj.cumulativeProfitAndLossUSD || "0.0000" }}
        <div class="itembox-data">
          ¥{{ activeObj.freezeMoney   }}
        </div>
        <div class="itembox-name">
          {{ $t("累計盈虧") }} ({{ activeObj.symbolCode }})
        </div>
      </div>
      <div class="item">
        <div class="itembox-data">{{ activeObj.freezeMoney }}</div>
        <div v-if="activeObj.symbolCode !== $USD" class="number-text">
          ≈ {{ $USD }} {{ activeObj.freezeMoneyUSD || "0.0000" }}
        </div>

        <div class="itembox-name">
          {{ $t("凍結資產") }} ({{ activeObj.symbolCode }})
        </div>
      </div>
      <div class="item">
        <div class="itembox-data">{{ activeObj.handlingCharge }}</div>
        <div v-if="activeObj.symbolCode !== $USD" class="number-text">
          ≈ {{ $USD }} {{ activeObj.handlingChargeUSD || "0.0000" }}
        <div class="itembox-data">
          ¥{{ activeObj.handlingCharge   }}
        </div>

        <div class="itembox-name">
          {{ $t("總手續費") }} ({{ activeObj.symbolCode }})
        </div>
      </div>
      <div class="item">
        <div class="itembox-data">
          ¥{{ activeObj.amountToBeCovered   }}
        </div>

        <div class="itembox-name">
          {{ $t("待补金额") }} ({{ activeObj.symbolCode }})
        </div>
      </div> -->
    </div>
    <Dialog ref="closeAllDialog" title="一鍵平倉" :confirm="confirm">
    <div class="zj">
      <div class="zj_box">
        <div style="display: flex;align-items: center;color: #858093;"><img style="width: 20px;margin-right: 5px;" src="@/assets/img/xiaohao.svg"/>{{$t('占用资金')}}</div>
        <div style="color: #185546;font-weight: bold;">{{ activeObj.freezeMoney   }}</div>
      </div>
      <div class="zj_box">
        <div style="display: flex;align-items: center;color: #858093;"><img style="width: 20px;margin-right: 5px;" src="@/assets/img/xiaohao.svg"/>{{ $t("凍結資產") }}</div>
        <div style="color: #185546;font-weight: bold;">{{ activeObj.freezeMoney   }}</div>
      </div>
    </div>
    <Dialog ref="closeAllDialog" :title="$t('一鍵平倉')" :confirm="confirm">
      <template v-slot:center>
        <div>{{ $t("您確定一鍵平倉所有訂單嗎？") }}</div>
      </template>
@@ -91,7 +105,6 @@
      default: () => {},
    },
  },

  methods: {
    async confirm() {
      console.log(this.activeObj.laber);
@@ -103,7 +116,6 @@
    },

    closeAll() {
      // allsell()
      this.$refs.closeAllDialog.show = true;
    },
  },
@@ -111,20 +123,35 @@
</script>

<style lang="less" scoped>
  .zj_box{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 48%;
    background-color: #E8F4F0;
    padding: 20px;
  }
  .zj{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
  }
.item-card-box {
  width: 100%;
  min-height: 3.52rem;
  margin: 0 auto;
  box-shadow: 0 0.16rem 0.32rem #00b57429;
  // box-shadow: 0 0.16rem 0.32rem #00b57429;
  border-radius: 0.26667rem;
  margin-top: 0.42667rem;
  padding: 0.32rem 0.4rem;
  // padding: 0.32rem 0.4rem;
  box-sizing: border-box;
  background-color: #ff5b96;
  // background-color: #03a7ef;
  color: #fff;
  .total-assets {
    display: flex;
    justify-content: space-between;
    color: #1B1B1B;
    .left {
      .total-name {
        font-style: normal;
@@ -170,28 +197,33 @@

.item-card-itembox {
  display: flex;
  flex-wrap: wrap; /* 自动换行 */
  // flex-wrap: wrap; /* 自动换行 */
  justify-content: space-between;
  .item {
    width: 33%;
    display: flex;
    align-items: center;
    margin-top: 0.45333rem;
    // width: 50%;
    // height: 20px;
    min-width: 33%;
    max-width: 33%;
    // min-width: 50%;
    // max-width: 50%;
    color: #1B1B1B;
    // background-color: #fff;
    .itembox-data {
      font-style: normal;
      font-weight: 500;
      font-size: 0.37333rem;
      color: #fff;
      margin-top: 0.45333rem;
      word-break: break-all;
      color: #1B1B1B;
      // margin-top: 0.45333rem;
      // word-break: break-all;
    }
    .itembox-name {
      font-style: normal;
      font-weight: 400;
      font-size: 0.32rem;
      color: #fff;
      font-weight: bold;
      font-size: 18px;
      color: #1FB26B;
      opacity: 0.8;
      margin-top: 0.13333rem;
      margin-left: 20px;
      // margin-top: 0.13333rem;
    }
    .number-text {
      color: #fff;