123

dengchaochao

2024-06-10 99f91d00f05d502bd51e2fbe16d2485610cd67f7

 src/views/market/components/hangqing.vue

@@ -38,9 +38,6 @@
                  <div class="flex-price">
                    {{ item.close }}
                  </div>
                  <div class="flex-priceUSD">
                    {{ "≈$" + item.close }}
                  </div>
                </div>
              </div>
              <div class="flex items-center">
@@ -64,13 +61,6 @@
              </div>
              <div v-if="item.change_ratio > 0" class="flex-rise-green">
                {{ item.change_ratio }}%
              </div>
              <div class="flex-transaction">
                {{
                  $t("message.hangqing.transaction") +
                  " " +
                  fixData(item.volume)
                }}
              </div>
            </div>
            <!-- <div style="background-color:blueviolet; width: 30px;height: 100px;"></div> -->
@@ -156,6 +146,10 @@
                          {{ item.name }}
                        </div>
                      </div>
                      <div class="title-more"> 更多
                        <img
                            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAVBAMAAACAghKHAAAAAXNSR0IArs4c6QAAACFQTFRFAAAAjI6YiY2Wi42Zi4+XjY+ZiY2Vi42Xi46XjI6Xi46XbqjnnwAAAAp0Uk5TAG9wcH9/gIC/30jpDyUAAAA0SURBVAjXY5B0YACBWUvAlNUqMJd9FYRbRRx3EZjbtRJEsq5aBqKiViUQz2GYBeYwWII5AGMrGipkbhMxAAAAAElFTkSuQmCC">
                      </div>
                    </div>
                    <div class="css-72ldqd" style="display: block">
                      <!-- 标题 -->
@@ -171,7 +165,7 @@
                            >
                              <div class="css-lkqrqt">
                                <div
                                    title="名称"
                                    title="交易对"
                                    class="css-1i04fkn"
                                    style="
                                    overflow: hidden;
@@ -179,47 +173,7 @@
                                    line-height: 16px;
                                  "
                                >
                                  {{ $t("message.hangqing.mingcheng") }}
                                </div>
                              </div>
                            </div>
                            <!-- 价格 -->
                            <div
                                data-area="left"
                                class="css-1e8pqe6"
                                style="width: 60px; flex: 60 1 0%"
                            >
                              <div class="css-lkqrqt">
                                <div
                                    title="价格"
                                    class="css-1i04fkn"
                                    style="
                                    overflow: hidden;
                                    -webkit-line-clamp: 1;
                                    line-height: 16px;
                                  "
                                >
                                  {{ $t("message.hangqing.jiage") }}
                                </div>
                              </div>
                            </div>
                            <!-- 24H涨跌 -->
                            <div
                                data-area="right"
                                class="css-1e8pqe6"
                                style="width: 55px; flex: 55 1 0%"
                            >
                              <div class="css-lkqrqt">
                                <div
                                    title="24H涨跌"
                                    class="css-1i04fkn"
                                    style="
                                    overflow: hidden;
                                    -webkit-line-clamp: 1;
                                    line-height: 16px;
                                  "
                                >
                                  {{ $t("message.hangqing.24hzhangfu") }}
                                  {{ $t("message.home.jiaoyidui") }}
                                </div>
                              </div>
                            </div>
@@ -244,7 +198,50 @@
                                </div>
                              </div>
                            </div>
                            <!-- 交易按钮 -->

                            <!-- 24H涨跌 -->
                            <div
                                data-area="right"
                                class="css-1e8pqe6"
                                style="width: 55px; flex: 55 1 0%"
                            >
                              <div class="css-lkqrqt">
                                <div
                                    title="24H涨跌"
                                    class="css-1i04fkn"
                                    style="
                                    overflow: hidden;
                                    -webkit-line-clamp: 1;
                                    line-height: 16px;
                                  "
                                >
                                  {{ $t("message.hangqing.24hzhangfu") }}
                                </div>
                              </div>
                            </div>


                            <!-- 交易 -->
                            <div
                                data-area="right"
                                class="css-1e8pqe6"
                                style="width: 55px; flex: 55 1 0%"
                            >
                              <div class="css-lkqrqt">
                                <div
                                    title="交易"
                                    class="css-1i04fkn"
                                    style="
                                    overflow: hidden;
                                    -webkit-line-clamp: 1;
                                    line-height: 16px;
                                  "
                                >
                                  {{ $t("message.hangqing.jiaoyi") }}
                                </div>
                              </div>
                            </div>
                            <!--                            &lt;!&ndash; 交易按钮 &ndash;&gt;
                            <div
                                data-area="right"
                                class="css-1e8pqe6"
@@ -258,7 +255,7 @@
                                  line-height: 16px;
                                "
                              ></div>
                            </div>
                                                        </div>-->
                          </div>
                          <!-- 内容 -->
                          <div class="css-1vuj9rf" style="min-height: 830px">
@@ -281,29 +278,6 @@
                                      class="css-14yoi5o"
                                      style="width: 110px; flex: 110 1 0%"
                                  >
                                    <div
                                        v-if="
                                        collectNameList.indexOf(item.symbol) < 0
                                      "
                                    >
                                      <img
                                          src="@/assets/myImages/icon/ant-design_star-2.png"
                                          style="top: 0px"
                                          @click="collectFun(item)"
                                      />
                                    </div>
                                    <div
                                        v-if="
                                        collectNameList.indexOf(item.symbol) >=
                                        0
                                      "
                                    >
                                      <img
                                          src="@/assets/myImages/icon/ant-design_star-1.png"
                                          style="top: 0px"
                                          @click="deleteCollectFun(item)"
                                      />
                                    </div>
                                    <div class="">
                                      <!-- :src="handleSymbolImg(item.symbol)" -->
                                      <!-- :src="`${ConfigURL.HOST_URL}/symbol/${item.symbol}.png`" -->
@@ -325,27 +299,24 @@
                                          class="css-1wp9rgv"
                                          style="font-size: 14px"
                                      >
                                        {{ getName(item) }}
                                        {{ getName(item) }}&nbsp;/&nbsp;USDT
                                      </div>
                                    </div>
                                  </div>
                                  <!-- 价格 -->
                                  <!-- 24H交易量 -->
                                  <div
                                      data-area="left"
                                      class="css-ydcgk2"
                                      style="width: 60px; flex: 60 1 0%"
                                  >
                                    <div
                                        style="direction: ltr; font-size: 14px"
                                        :class="
                                        item.change_ratio > 0
                                          ? 'black'
                                          : 'black'
                                      data-area="right"
                                      title="29,773.07M"
                                      class="css-102bt5g"
                                      style="
                                      width: 90px;
                                      flex: 90 1 0%;
                                      direction: ltr;
                                      "
                                    >
                                      ${{ item.close }}
                                    {{ fixData(item.amount) }}
                                    </div>
                                  </div>

                                  <!-- 24H涨跌 -->
                                  <div
                                      data-area="right"
@@ -362,19 +333,7 @@
                                    </div>
                                  </div>

                                  <!-- 24H交易量 -->
                                  <div
                                      data-area="right"
                                      title="29,773.07M"
                                      class="css-102bt5g"
                                      style="
                                      width: 90px;
                                      flex: 90 1 0%;
                                      direction: ltr;
                                    "
                                  >
                                    {{ fixData(item.amount) }}
                                  </div>

                                  <!-- 交易按钮 -->
                                  <div
                                      data-area="right"
@@ -561,27 +520,21 @@
                                    class="css-14yoi5o"
                                    style="width: 110px; flex: 110 1 0%"
                                >
                                  <div
                                      v-if="
                                      collectNameList.indexOf(item.symbol) < 0
                                    "
                                  <div class="">
                                    <!-- :src="handleSymbolImg(item.symbol)" -->
                                    <!-- :src="`${ConfigURL.HOST_URL}/symbol/${item.symbol}.png`" -->
                                    <el-image
                                        :src="handleSymbolImg(item.symbol)"
                                        class="el-img-style"
                                        style="margin-left: 10px"
                                  >
                                      <div slot="error" class="image-slot">
                                    <img
                                        src="@/assets/myImages/icon/ant-design_star-2.png"
                                        style="top: 0px"
                                        @click="collectFun(item)"
                                            :src="`${ConfigURL.HOST_URL}/symbol/noCoins.png`"
                                            class="el-img-style"
                                    />
                                  </div>
                                  <div
                                      v-if="
                                      collectNameList.indexOf(item.symbol) >= 0
                                    "
                                  >
                                    <img
                                        src="@/assets/myImages/icon/ant-design_star-1.png"
                                        style="top: 0px"
                                        @click="deleteCollectFun(item)"
                                    />
                                    </el-image>
                                  </div>
                                  <div class="css-y492if">
                                    <div class="css-1wp9rgv">
@@ -651,6 +604,7 @@
import Axios from "@/api/currency";
import API from "@/api/api";
import { handleSymbolImg } from "@/utils";

export default {
  data() {
    return {
@@ -661,30 +615,20 @@
      btnChooseIndex: 0,
      marketList: [
        {
          id: 0,
          name: this.$t("message.jiaoyi.zixuan"),
          type: "collect",
        },
        {
          id: 1,
          name: this.$t("message.user.suoyoubizhong"),
          name: this.$t("message.user['熱門現貨']"),
          type: "US-stocks",
        },
        {
          id: 2,
          name: this.$t("message.user.bibihangqing"),
          name: this.$t("message.user['熱門合約']"),
          type: "cryptos",
        },
        {
          id: 3,
          name: this.$t("message.user.yongxuheyue"),
          name: this.$t("message.user['熱門交割合約']"),
          type: "indices",
        },
        {
          id: 4,
          name: this.$t("message.user.jiaogeheyue"),
          type: "forex",
        },
        }
      ],
      marketListType: "", //市场选择类型 美股 外汇，虚拟币...
      jsonArray: [], //所有行情
@@ -967,11 +911,13 @@
.tab-active {
  border-bottom: 4px solid #1d91ff;
}

.flex-item{
  min-width: 386px;
  height: 150px;
  max-width: 400px;
}

.flex-price{
  font-weight: 600;
}
@@ -1056,6 +1002,7 @@
.item-box-bamarket-1{
  position: relative;
  min-height: 150px;

  .item-box-bamarket-2{
    position: absolute;
    left: 0;
@@ -1070,4 +1017,29 @@
  background-color: #e9eeff;
  width: 100%;
}

.css-13euu76 > [data-area="right"] {
  justify-content: center;
}

.css-leyy1t > div {
  margin-right: 32px;
}

.css-1vii3zc .title-more {
  font-size: 14px;
  font-family: Noto Sans SC;
  font-weight: 400;
  color: #9b9da5;
  line-height: 20px;
  display: flex;
  align-items: center;
  cursor: pointer;

  img {
    margin-left: 6px;
    width: 4.5px;
    height: 9px;
  }
}
</style>