style

lxf

2025-05-22 e74a7c7afc56cf229058091fe2ae143cf0bdb3ca

 src/views/market/market.vue

@@ -4,55 +4,25 @@
    <div class="css-tq0shg">
      <main class="css-1wr4jig">
        <div class="css-1pysja1">
          <div class="css-6nqu2s">
          <div class="css-6nqu2s" style="background-color: #000">
            <!-- 标题 -->
            <div class="css-b22026">
              <div class="css-1vs5d4i">
                <div class="css-o32gok">
            <!-- <div class="css-b22026">
              <div class="css-1vs5d4i"> -->
            <!-- <div class="css-o32gok">
                  {{ $t("message.hangqing.hangqing") }}
                </div>
                <!-- 右上角 -->
                <div class="css-ykl0r1">
                  <div id="market_sector_overview" class="css-8puzml">
                    <div class="css-search-1">
                      <div class="css-search-2">
                        <div class="css-search-3">
                          <div class="bn-input-prefix css-search-4">
                            <svg
                              xmlns="http://www.w3.org/2000/svg"
                              viewBox="0 0 24 24"
                              fill="none"
                              class="css-search-5"
                            >
                              <path
                                fill-rule="evenodd"
                                clip-rule="evenodd"
                                d="M11 6a5 5 0 110 10 5 5 0 010-10zm0-3a8 8 0 017.021 11.838l3.07 3.07-1.59 1.591-1.591 1.591-3.07-3.07A8 8 0 1111 3z"
                                fill="currentColor"
                              ></path>
                            </svg>
                          </div>
                          <input
                            id="financial_main_search"
                            v-model="searchValue"
                            @input="onInputSearch"
                            :placeholder="$t('message.hangqing.sousuo')"
                            class="css-search-6"
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
                </div> -->
            <!-- 右上角 -->
            <!-- <div class="css-ykl0r1"> -->

            <div
            <!-- </div> -->
            <!-- </div>
            </div> -->

            <!-- <div
              class="content-view-box item-box-bamarket"
              style="height: auto"
            >
              <div class="item-box-bamarket-1" style="height: auto">
                <!-- 新四个框 -->
                <div class="flex-container flex justify-between" scoped>
                  <div
                    class="flex-item"
@@ -78,7 +48,6 @@
                            </div>
                          </el-image>
                          <div class="flex-title mt-1">
                            <!-- {{ getName(item) }}/USDT -->
                            {{ item.name }}
                          </div>
                        </div>
@@ -121,37 +90,32 @@
                        }}
                      </div>
                    </div>
                    <!-- <div style="background-color:blueviolet; width: 30px;height: 100px;"></div> -->
                  </div>
                </div>
              </div>
            </div>
            </div> -->

            <!-- 列表 -->
            <div
              class="content-view-box"
              style="background-color: white; height: auto"
              style="background-color: #000; height: auto; padding-top: 40px"
            >
              <div
                class=""
                style="
                  background-color: white;
                  min-height: 1040px;
                  height: auto;
                "
                style="background-color: #000; min-height: 1040px; height: auto"
              >
                <div
                  class="flex-container-1 flex-container-1-pos"
                  style="background-color: white"
                  style="background-color: #000"
                  scoped
                >
                  <!-- 行情列表 -->
                  <div
                    class="box1"
                    style="display: block; background-color: white"
                    style="display: block; background-color: #000; width: 100%"
                  >
                    <!-- tab -->
                    <div class="css-1vii3zc" style="background-color: #ffffff">
                    <div class="css-1vii3zc" style="background-color: #000">
                      <div id="box1001" class="tab-box">
                        <div
                          class="tab-item"
@@ -164,15 +128,346 @@
                          {{ item.name }}
                        </div>
                      </div>
                      <div id="market_sector_overview" class="css-8puzml">
                        <div class="css-search-1">
                          <div
                            class="css-search-2"
                            style="background-color: #fff;border-radius: 7px;"
                          >
                            <div class="css-search-3" style="color: #fff">
                              <div class="bn-input-prefix css-search-4">
                                <svg
                                  xmlns="http://www.w3.org/2000/svg"
                                  viewBox="0 0 24 24"
                                  fill="none"
                                  class="css-search-5"
                                  style="color: #ccc"
                                >
                                  <path
                                    fill-rule="evenodd"
                                    clip-rule="evenodd"
                                    d="M11 6a5 5 0 110 10 5 5 0 010-10zm0-3a8 8 0 017.021 11.838l3.07 3.07-1.59 1.591-1.591 1.591-3.07-3.07A8 8 0 1111 3z"
                                    fill="currentColor"
                                  ></path>
                                </svg>
                              </div>
                              <input
                                id="financial_main_search"
                                v-model="searchValue"
                                @input="onInputSearch"
                                :placeholder="$t('message.hangqing.sousuo')"
                                class="css-search-6"
                              />
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="css-72ldqd" style="display: block">
                    <div
                      class="css-72ldqd"
                      style="display: block; background-color: #000"
                    >
                      <!-- 标题 -->
                      <div class="css-qbmpwo">
                        <div class="css-vurnku" style="min-width: 696px">
                          <ul class="list">
                            <li
                              v-for="(item, index) in searchList"
                              :key="index"
                            >
                              <div class="top">
                                <div class="top_left">
                                  <img
                                    :src="handleSymbolImg(item.symbol)"
                                    alt=""
                                  /><span class="name">{{ item.name }}</span>
                                </div>
                                <div class="top_right">
                                  <span class="fluctuation"
                                    >{{ item.change_ratio }}%</span
                                  >
                                </div>
                              </div>
                              <div class="chart">
                                <div data-v-6ae20f79="" class="container">
                                  <svg
                                    data-v-6ae20f79=""
                                    class="vtc"
                                    xmlns="http://www.w3.org/2000/svg"
                                    width="100%"
                                    height="100%"
                                  >
                                    <g class="grid">
                                      <g class="vertical">
                                        <line
                                          class="line"
                                          x1="5"
                                          x2="5"
                                          y1="5"
                                          y2="59"
                                          stroke="rgba(0,0,0,0.1)"
                                        ></line>
                                        <line
                                          class="line"
                                          x1="14.089439655172415"
                                          x2="14.089439655172415"
                                          y1="5"
                                          y2="59"
                                          stroke="rgba(0,0,0,0.1)"
                                        ></line>
                                        <line
                                          class="line"
                                          x1="23.17887931034483"
                                          x2="23.17887931034483"
                                          y1="5"
                                          y2="59"
                                          stroke="rgba(0,0,0,0.1)"
                                        ></line>
                                        <line
                                          class="line"
                                          x1="32.268318965517246"
                                          x2="32.268318965517246"
                                          y1="5"
                                          y2="59"
                                          stroke="rgba(0,0,0,0.1)"
                                        ></line>
                                        <line
                                          class="line"
                                          x1="41.35775862068966"
                                          x2="41.35775862068966"
                                          y1="5"
                                          y2="59"
                                          stroke="rgba(0,0,0,0.1)"
                                        ></line>
                                        <line
                                          class="line"
                                          x1="50.44719827586207"
                                          x2="50.44719827586207"
                                          y1="5"
                                          y2="59"
                                          stroke="rgba(0,0,0,0.1)"
                                        ></line>
                                        <line
                                          class="line"
                                          x1="59.53663793103449"
                                          x2="59.53663793103449"
                                          y1="5"
                                          y2="59"
                                          stroke="rgba(0,0,0,0.1)"
                                        ></line>
                                        <line
                                          class="line"
                                          x1="68.6260775862069"
                                          x2="68.6260775862069"
                                          y1="5"
                                          y2="59"
                                          stroke="rgba(0,0,0,0.1)"
                                        ></line>
                                        <line
                                          class="line"
                                          x1="77.71551724137932"
                                          x2="77.71551724137932"
                                          y1="5"
                                          y2="59"
                                          stroke="rgba(0,0,0,0.1)"
                                        ></line>
                                        <line
                                          class="line"
                                          x1="86.80495689655173"
                                          x2="86.80495689655173"
                                          y1="5"
                                          y2="59"
                                          stroke="rgba(0,0,0,0.1)"
                                        ></line>
                                        <line
                                          class="line"
                                          x1="95.89439655172414"
                                          x2="95.89439655172414"
                                          y1="5"
                                          y2="59"
                                          stroke="rgba(0,0,0,0.1)"
                                        ></line>
                                        <line
                                          class="line"
                                          x1="104.98383620689656"
                                          x2="104.98383620689656"
                                          y1="5"
                                          y2="59"
                                          stroke="rgba(0,0,0,0.1)"
                                        ></line>
                                        <line
                                          class="line"
                                          x1="114.07327586206898"
                                          x2="114.07327586206898"
                                          y1="5"
                                          y2="59"
                                          stroke="rgba(0,0,0,0.1)"
                                        ></line>
                                        <line
                                          class="line"
                                          x1="123.1627155172414"
                                          x2="123.1627155172414"
                                          y1="5"
                                          y2="59"
                                          stroke="rgba(0,0,0,0.1)"
                                        ></line>
                                        <line
                                          class="line"
                                          x1="132.2521551724138"
                                          x2="132.2521551724138"
                                          y1="5"
                                          y2="59"
                                          stroke="rgba(0,0,0,0.1)"
                                        ></line>
                                        <line
                                          class="line"
                                          x1="141.34159482758622"
                                          x2="141.34159482758622"
                                          y1="5"
                                          y2="59"
                                          stroke="rgba(0,0,0,0.1)"
                                        ></line>
                                        <line
                                          class="line"
                                          x1="150.43103448275863"
                                          x2="150.43103448275863"
                                          y1="5"
                                          y2="59"
                                          stroke="rgba(0,0,0,0.1)"
                                        ></line>
                                        <line
                                          class="line"
                                          x1="159.52047413793105"
                                          x2="159.52047413793105"
                                          y1="5"
                                          y2="59"
                                          stroke="rgba(0,0,0,0.1)"
                                        ></line>
                                        <line
                                          class="line"
                                          x1="168.60991379310346"
                                          x2="168.60991379310346"
                                          y1="5"
                                          y2="59"
                                          stroke="rgba(0,0,0,0.1)"
                                        ></line>
                                        <line
                                          class="line"
                                          x1="177.69935344827587"
                                          x2="177.69935344827587"
                                          y1="5"
                                          y2="59"
                                          stroke="rgba(0,0,0,0.1)"
                                        ></line>
                                        <line
                                          class="line"
                                          x1="186.78879310344828"
                                          x2="186.78879310344828"
                                          y1="5"
                                          y2="59"
                                          stroke="rgba(0,0,0,0.1)"
                                        ></line>
                                        <line
                                          class="line"
                                          x1="195.8782327586207"
                                          x2="195.8782327586207"
                                          y1="5"
                                          y2="59"
                                          stroke="rgba(0,0,0,0.1)"
                                        ></line>
                                        <line
                                          class="line"
                                          x1="204.9676724137931"
                                          x2="204.9676724137931"
                                          y1="5"
                                          y2="59"
                                          stroke="rgba(0,0,0,0.1)"
                                        ></line>
                                        <line
                                          class="line"
                                          x1="214.05711206896552"
                                          x2="214.05711206896552"
                                          y1="5"
                                          y2="59"
                                          stroke="rgba(0,0,0,0.1)"
                                        ></line>
                                        <line
                                          class="line"
                                          x1="223.14655172413796"
                                          x2="223.14655172413796"
                                          y1="5"
                                          y2="59"
                                          stroke="rgba(0,0,0,0.1)"
                                        ></line>
                                        <line
                                          class="line"
                                          x1="232.23599137931038"
                                          x2="232.23599137931038"
                                          y1="5"
                                          y2="59"
                                          stroke="rgba(0,0,0,0.1)"
                                        ></line>
                                        <line
                                          class="line"
                                          x1="241.3254310344828"
                                          x2="241.3254310344828"
                                          y1="5"
                                          y2="59"
                                          stroke="rgba(0,0,0,0.1)"
                                        ></line>
                                        <line
                                          class="line"
                                          x1="250.4148706896552"
                                          x2="250.4148706896552"
                                          y1="5"
                                          y2="59"
                                          stroke="rgba(0,0,0,0.1)"
                                        ></line>
                                        <line
                                          class="line"
                                          x1="259.5043103448276"
                                          x2="259.5043103448276"
                                          y1="5"
                                          y2="59"
                                          stroke="rgba(0,0,0,0.1)"
                                        ></line>
                                        <line
                                          class="line"
                                          x1="268.59375"
                                          x2="268.59375"
                                          y1="5"
                                          y2="59"
                                          stroke="rgba(0,0,0,0.1)"
                                        ></line>
                                      </g>
                                    </g>
                                    <g class="curve">
                                      <path
                                        class="stroke"
                                        :d="svgPathList[index]"
                                        fill="none"
                                        stroke="black"
                                      ></path>
                                    </g>
                                  </svg>
                                </div>
                              </div>
                              <div class="bott">
                                <span class="price">{{ item.close }}</span>
                                <span
                                  class="tradeBtn"
                                  @click="goDetail(item.symbol, item)"
                                >
                                  {{ $t("message.hangqing.jiaoyi") }}
                                </span>
                              </div>
                            </li>
                          </ul>

                          <!-- 标题 -->
                          <div class="css-13euu76">
                            <!-- 名称 -->
                            <div
                          <!-- <div class="css-13euu76"> -->
                          <!-- 名称 -->
                          <!-- <div
                              data-area="left"
                              class="css-1e8pqe6"
                              style="width: 110px; flex: 110 1 0%"
@@ -190,9 +485,9 @@
                                  {{ $t("message.hangqing.mingcheng") }}
                                </div>
                              </div>
                            </div>
                            <!-- 价格 -->
                            <div
                            </div> -->
                          <!-- 价格 -->
                          <!-- <div
                              data-area="left"
                              class="css-1e8pqe6"
                              style="width: 60px; flex: 60 1 0%"
@@ -210,9 +505,9 @@
                                  {{ $t("message.hangqing.jiage") }}
                                </div>
                              </div>
                            </div>
                            <!-- 24H涨跌 -->
                            <div
                            </div> -->
                          <!-- 24H涨跌 -->
                          <!-- <div
                              data-area="right"
                              class="css-1e8pqe6"
                              style="width: 55px; flex: 55 1 0%"
@@ -230,10 +525,10 @@
                                  {{ $t("message.hangqing.24hzhangfu") }}
                                </div>
                              </div>
                            </div>
                            </div> -->

                            <!-- 24H交易量 -->
                            <div
                          <!-- 24H交易量 -->
                          <!-- <div
                              data-area="right"
                              class="css-1e8pqe6"
                              style="width: 90px; flex: 90 1 0%"
@@ -251,9 +546,9 @@
                                  {{ $t("message.hangqing.24hjiaoyiliang") }}
                                </div>
                              </div>
                            </div>
                            <!-- 交易按钮 -->
                            <div
                            </div> -->
                          <!-- 交易按钮 -->
                          <!-- <div
                              data-area="right"
                              class="css-1e8pqe6"
                              style="width: 80px; flex: 80 1 0%"
@@ -267,9 +562,9 @@
                                "
                              ></div>
                            </div>
                          </div>
                          </div> -->
                          <!-- 内容 -->
                          <div class="css-1vuj9rf" style="min-height: 830px">
                          <!-- <div class="css-1vuj9rf" style="min-height: 830px">
                            <div
                              v-for="(item, index) in searchList"
                              :key="index"
@@ -282,9 +577,9 @@
                                <div
                                  class="css-leyy1t"
                                  style="cursor: pointer; text-decoration: none"
                                >
                                  <!-- 名称 -->
                                  <div
                                > -->
                          <!-- 名称 -->
                          <!-- <div
                                    data-area="left"
                                    class="css-14yoi5o"
                                    style="width: 110px; flex: 110 1 0%"
@@ -313,8 +608,6 @@
                                      />
                                    </div>
                                    <div class="">
                                      <!-- :src="handleSymbolImg(item.symbol)" -->
                                      <!-- :src="`${ConfigURL.HOST_URL}/symbol/${item.symbol}.png`" -->
                                      <el-image
                                        :src="handleSymbolImg(item.symbol)"
                                        class="el-img-style"
@@ -336,9 +629,9 @@
                                        {{ item.name }}
                                      </div>
                                    </div>
                                  </div>
                                  <!-- 价格 -->
                                  <div
                                  </div> -->
                          <!-- 价格 -->
                          <!-- <div
                                    data-area="left"
                                    class="css-ydcgk2"
                                    style="width: 60px; flex: 60 1 0%"
@@ -353,9 +646,9 @@
                                    >
                                      ${{ item.close }}
                                    </div>
                                  </div>
                                  <!-- 24H涨跌 -->
                                  <div
                                  </div> -->
                          <!-- 24H涨跌 -->
                          <!-- <div
                                    data-area="right"
                                    class="css-18yakpx"
                                    style="width: 55px; flex: 55 1 0%"
@@ -368,10 +661,10 @@
                                    >
                                      {{ item.change_ratio }}%
                                    </div>
                                  </div>
                                  </div> -->

                                  <!-- 24H交易量 -->
                                  <div
                          <!-- 24H交易量 -->
                          <!-- <div
                                    data-area="right"
                                    title="29,773.07M"
                                    class="css-102bt5g"
@@ -382,9 +675,9 @@
                                    "
                                  >
                                    {{ fixData(item.amount) }}
                                  </div>
                                  <!-- 交易按钮 -->
                                  <div
                                  </div> -->
                          <!-- 交易按钮 -->
                          <!-- <div
                                    data-area="right"
                                    class="css-4cffwv"
                                    style="width: 80px; flex: 80 1 0%"
@@ -395,15 +688,15 @@
                                    >
                                      {{ $t("message.hangqing.jiaoyi") }}
                                    </button>
                                  </div>
                                </div>
                                  </div> -->
                          <!-- </div>
                              </div>
                            </div>
                          </div>
                            </div> 
                          </div> -->
                        </div>
                      </div>
                      <!-- 分页器 -->
                      <div class="css-1ttcc5">
                      <!-- <div class="css-1ttcc5">
                        <div class="css-b0tuh4">
                          <button
                            data-bn-type="button"
@@ -460,16 +753,16 @@
                            </svg>
                          </button>
                        </div>
                      </div>
                      </div> -->
                    </div>
                  </div>
                  <!-- 榜单 -->
                  <div
                  <!-- <div
                    class="box2"
                    style="display: block; background-color: white"
                  >
                    <!-- tab -->
                    <div class="css-1vii3zc">
                    style="display: block; background-color: #000"
                  > -->
                  <!-- tab -->
                  <!-- <div class="css-1vii3zc">
                      <div id="box1002" class="tab-box">
                        <div
                          class="tab-item"
@@ -482,15 +775,15 @@
                          {{ item.name }}
                        </div>
                      </div>
                    </div>
                    </div> -->

                    <div class="css-72ldqd" style="display: block">
                      <!-- 标题 -->
                      <div class="css-qbmpwo">
                  <!-- <div class="css-72ldqd" style="display: block"> -->
                  <!-- 标题 -->
                  <!-- <div class="css-qbmpwo">
                        <div class="css-vurnku" style="min-width: 350px">
                          <div class="css-13euu76">
                            <!-- 名称 -->
                            <div
                          <div class="css-13euu76"> -->
                  <!-- 名称 -->
                  <!-- <div
                              data-area="left"
                              class="css-1e8pqe6"
                              style="width: 110px; flex: 110 1 0%"
@@ -506,9 +799,9 @@
                                  {{ $t("message.hangqing.mingcheng") }}
                                </div>
                              </div>
                            </div>
                            <!-- 价格 -->
                            <div
                            </div> -->
                  <!-- 价格 -->
                  <!-- <div
                              data-area="left"
                              class="css-1e8pqe6"
                              style="width: 60px; flex: 60 1 0%"
@@ -526,9 +819,9 @@
                                  {{ $t("message.hangqing.jiage") }}
                                </div>
                              </div>
                            </div>
                            <!-- 涨跌 或交易额-->
                            <div
                            </div> -->
                  <!-- 涨跌 或交易额-->
                  <!-- <div
                              data-area="right"
                              class="css-1e8pqe6"
                              style="width: 55px; flex: 55 1 0%"
@@ -550,9 +843,9 @@
                                </div>
                              </div>
                            </div>
                          </div>
                          <!-- 内容 -->
                          <div class="css-1vuj9rf" style="min-height: 830px">
                          </div> -->
                  <!-- 内容 -->
                  <!-- <div class="css-1vuj9rf" style="min-height: 830px">
                            <div
                              direction="ltr"
                              class="css-vlibs4"
@@ -562,9 +855,9 @@
                              <div
                                class="css-leyy1t"
                                style="cursor: pointer; text-decoration: none"
                              >
                                <!-- 名称 -->
                                <div
                              > -->
                  <!-- 名称 -->
                  <!-- <div
                                  data-area="left"
                                  class="css-14yoi5o"
                                  style="width: 110px; flex: 110 1 0%"
@@ -593,13 +886,12 @@
                                  </div>
                                  <div class="css-y492if">
                                    <div class="css-1wp9rgv">
                                      <!-- {{ getName(item) }} -->
                                      {{ item.name }}
                                    </div>
                                  </div>
                                </div>
                                <!-- 价格 -->
                                <div
                                </div> -->
                  <!-- 价格 -->
                  <!-- <div
                                  data-area="left"
                                  class="css-ydcgk2"
                                  style="width: 60px; flex: 60 1 0%"
@@ -612,9 +904,9 @@
                                  >
                                    ${{ item.close }}
                                  </div>
                                </div>
                                <!-- 涨跌 或交易额-->
                                <div
                                </div> -->
                  <!-- 涨跌 或交易额-->
                  <!-- <div
                                  data-area="right"
                                  class="css-18yakpx"
                                  style="width: 55px; flex: 55 1 0%"
@@ -634,15 +926,15 @@
                                  >
                                    {{ `${item.change_ratio}%` }}
                                  </div>
                                </div>
                              </div>
                                </div> -->
                  <!-- </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- 分页器 -->
                    </div>
                  </div>
                      </div> -->
                  <!-- 分页器 -->
                  <!-- </div>
                  </div> -->
                </div>
              </div>
            </div>
@@ -679,21 +971,21 @@
          name: this.$t("message.user.suoyoubizhong"),
          type: "US-stocks",
        },
        {
          id: 2,
          name: this.$t("message.user.bibihangqing"),
          type: "cryptos",
        },
        {
          id: 3,
          name: this.$t("message.user.yongxuheyue"),
          type: "indices",
        },
        {
          id: 4,
          name: this.$t("message.user.jiaogeheyue"),
          type: "forex",
        },
        // {
        //   id: 2,
        //   name: this.$t("message.user.bibihangqing"),
        //   type: "cryptos",
        // },
        // {
        //   id: 3,
        //   name: this.$t("message.user.yongxuheyue"),
        //   type: "indices",
        // },
        // {
        //   id: 4,
        //   name: this.$t("message.user.jiaogeheyue"),
        //   type: "forex",
        // },
      ],
      marketListType: "", //市场选择类型 美股 外汇，虚拟币...
      jsonArray: [], //所有行情
@@ -733,6 +1025,8 @@
      searchList: [],
      collectNameList: [],
      timer: null,
      searchList: [],
      svgPathList: [], // 新增的 svgPathList 数组
    };
  },
  mounted() {
@@ -744,6 +1038,44 @@
  },
  methods: {
    handleSymbolImg,
    // 生成随机K线path
    generateRandomPath() {
      const points = 32; // svg线数量一致
      let path = "";
      let xStep = 9.089;
      let x = 5;
      let y = Math.random() * 40 + 10;
      const maxJump = Math.random() * 100 + 50;
      path += `M ${x},${y}`;
      for (let i = 1; i < points; i++) {
        x += xStep;
        // 每次y跳动范围为 -maxJump/2 ~ +maxJump/2
        y = Math.max(5, Math.min(59, y + (Math.random() - 0.5) * maxJump));
        path += ` C ${x},${y} ${x},${y} ${x},${y}`;
      }
      return path;
    },
    // 生成所有K线
    generateAllSvgPaths() {
      this.svgPathList = this.searchList.map(() => this.generateRandomPath());
    },
    // 修改onInputSearch和fliterTypeData等筛选后调用
    onInputSearch() {
      if (this.searchValue != "") {
        this.searchList = this.activeList.filter((val) => {
          return (
            val.symbol.toUpperCase().indexOf(this.searchValue.toUpperCase()) !=
            -1
          );
        });
        this.OnclickPage(1);
      } else {
        this.getPageSize();
        this.searchList = this.activeList;
      }
      this.generateAllSvgPaths(); // 新增
    },

    // 获取所有symbol
    getSymbol() {
      API.url("wap/api/item!list.action", {}).then((res) => {
@@ -757,9 +1089,9 @@
    },
    // 轮训获取symbol的行情
    getTimeTimer() {
      this.timer = setInterval(() => {
        this.getList(this.allSymbol);
      }, 1000);
      // this.timer = setInterval(() => {
      this.getList(this.allSymbol);
      // }, 1000);
    },
    getList(symbol) {
      let t = this;
@@ -808,6 +1140,7 @@
      }
      this.getPageSize();
      this.onInputSearch();
      this.generateAllSvgPaths(); // 新增
      // 右边榜单的数据
      let rankDataList = [...this.activeList].sort(
        this.compare(this.rankItem.type, this.rankItem.sort)
@@ -976,13 +1309,20 @@
@import url("../../assets/market/bamarket.css");

.tab-item {
  padding-top: 20px !important;
  padding-bottom: 10px !important;
  /* padding-top: 20px !important; */
  padding-bottom: 30px !important;
  color: #b1b1b1;
  /* padding: 10px 0 !important; */
  height: 20px;
  line-height: 20px;
  cursor: pointer;
}

.tab-active {
  border-bottom: 4px solid #1d91ff;
  color: #fff;
  border-bottom: 3px solid rgb(255, 211, 2);
  border-radius: 5px;
  font-weight: 700;
}
.flex-item {
  min-width: 386px;
@@ -992,4 +1332,80 @@
.flex-price {
  font-weight: 600;
}

.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  li {
    flex: 0 0 24%;
    min-height: 100px;
    color: #fff;
    margin-bottom: 20px;
    background: rgb(33, 33, 33);
    border-radius: 10px;
    padding-bottom: 20px;
    cursor: pointer;
    .top {
      display: flex;
      align-items: center;
      padding: 0 16px;
      justify-content: space-between;
    }
    .top_left {
      display: flex;
      align-items: center;
      padding: 16px 0;
      img {
        width: 40px;
        height: 40px;
      }
      .name {
        font-size: 20px;
        color: #fff;
        margin-left: 8px;
      }
    }
    .top_right {
      .fluctuation {
        font-size: 19px;
      }
    }
    .chart {
      height: 64px;
      width: 100%;
    }
    .bott {
      margin-top: 16px;
      display: flex;
      align-items: center;
      padding: 0 16px;
      justify-content: space-between;
      font-size: 19px;
      .tradeBtn {
        /* height: 20px; */
        padding: 8px 16px;
        font-size: 14px;
        color: #fff;
        background-image: linear-gradient(
          90deg,
          rgb(247, 179, 40),
          rgb(17, 38, 57)
        );
        border-radius: 30px;
      }
    }
  }
}

.container {
  width: 100%;
  height: 100%;
}
.stroke {
  stroke: #13ce66e6;
}
.css-search-6::placeholder {
  color: #ccc !important;
}
</style>