样式修改

lxf

2025-05-19 45190f969dd8c7d3d2c6e366694f0dadc5ea07e8

 src/components/list-quotation/index.vue

@@ -1,8 +1,8 @@
<template>
  <div class="list-quatation">
    <ex-tabs @tabs="onTabs"></ex-tabs>
    <!-- <ex-tabs @tabs="onTabs"></ex-tabs> -->
    <van-list>
      <van-cell>
      <!-- <van-cell>
        <div class="flex items-center w-full text-grey font-26">
          <div class="left flex items-center">
            <span>{{ $t("交易对") }}</span>
@@ -47,11 +47,11 @@
                :class="[sortVal == 6 ? 'icon_top2_active' : 'icon_top2']"
                @click="listSort(6)"
              ></div>
            </div>
            <!--                  <img src="./icon-sort.png" alt="icon" class="w-13 h-22 ml-5"/>-->
          </div>
            </div>-->
      <!--                  <img src="./icon-sort.png" alt="icon" class="w-13 h-22 ml-5"/>-->
      <!--           </div>
        </div>
      </van-cell>
      </van-cell> -->
      <transition-group :name="type" tag="div">
        <div v-if="active == 0" :key="active">
          <van-cell v-for="item in listData" :key="item.id">
@@ -78,13 +78,23 @@
                      {{ item.name && item.name.replace(item.symbol.toUpperCase(), '') || '--' }}</span> -->
                  </span>

                  <span class="font-24 text-grey mt-10">{{
                  <!-- <span class="font-24 text-grey mt-10">{{
                    $t("成交量") + " " + (item.amount * 1).toFixed(2)
                  }}</span> -->
                  <span class="font-24 text-grey mt-10">{{
                    item.close || "--"
                  }}</span>
                </p>
              </li>
              <li class="flex flex-col items-end mid">
                <p class="textColor font-32 font-600">
                <!-- 日k -->
                <canvas
                  :ref="'kLineCanvas'"
                  class="k-line-canvas"
                  width="120"
                  height="50"
                ></canvas>
                <!-- <p class="textColor font-32 font-600">
                  {{ item.close || "--" }}
                </p>
                <p class="font-24 text-grey mt-10">
@@ -98,19 +108,20 @@
                      )) ||
                    "--"
                  }}
                </p>
                </p> -->
              </li>
              <li class="right flex items-center justify-end">
              <li class="right">
                <p class="font-24 text-grey mt-10">
                  {{ formatAmount(item.amount) }}
                </p>

                <p
                  class="w-153 font-31 h-71 bg-green text-white border-0 text-center btn"
                  class="w-153 font-31 h-71 bg-green border-0"
                  v-if="item.change_ratio > 0"
                >
                  +{{ item.change_ratio }}%
                </p>
                <p
                  class="w-153 font-31 h-71 bg-red text-white border-0 text-center btn"
                  v-else
                >
                <p class="w-153 font-31 h-71 bg-red border-0" v-else>
                  {{ item.change_ratio }}%
                </p>
              </li>
@@ -160,7 +171,8 @@
                  }}
                </p>
              </li>
              <li class="right flex items-center justify-end text-right">
              <li class="right">
                <p>{{ formatAmount(item.amount) }}</p>
                <div
                  v-if="active == 3"
                  class="textColor w-182 font-700 font-24"
@@ -169,15 +181,12 @@
                </div>
                <template v-else>
                  <p
                    class="w-153 font-31 h-71 bg-green text-white border-0 text-center btn"
                    class="w-153 font-31 h-71 bg-green border-0"
                    v-if="item.change_ratio > 0"
                  >
                    +{{ item.change_ratio }}%
                  </p>
                  <p
                    class="w-153 font-31 h-71 bg-red text-white border-0 text-center btn"
                    v-else
                  >
                  <p class="w-153 font-31 h-71 bg-red border-0" v-else>
                    {{ item.change_ratio }}%
                  </p>
                </template>
@@ -209,6 +218,7 @@
      active: 0,
      type: "left", //left 从左往右 right 从有王座
      sortVal: 0,
      kLineData: this.generateKLineData(),
    };
  },
  props: {
@@ -235,7 +245,74 @@
    [Cell.name]: Cell,
    ExTabs,
  },
  mounted() {
    this.listData.forEach((item) => {
      item.kLineData = this.generateKLineData();
    });
    this.$nextTick(() => {
      this.drawKLine();
    });
  },
  methods: {
    formatAmount(amount) {
      if (!amount || amount <= 0) {
        return "--";
      }
      const million = amount / 1000000; // 转换为百万
      return `${million.toFixed(2)}m`; // 保留两位小数并加上 "m"
    },
    // 其他方法...
    generateKLineData() {
      const data = [];
      let lastClose = 0; // 初始价格
      for (let i = 0; i < 48; i++) {
        const open = lastClose;
        const close = +(open + (Math.random() * 2 - 1)).toFixed(2);
        const high = Math.max(open, close) + +(Math.random() * 5).toFixed(2);
        const low = Math.min(open, close) - +(Math.random() * 5).toFixed(2);
        data.push({ open, close, high, low });
        lastClose = close;
      }
      return data;
    },
    drawKLine() {
      const canvasList = this.$refs.kLineCanvas; // 获取所有 canvas 元素
      if (!canvasList || !canvasList.length) return;

      canvasList.forEach((canvas, index) => {
        if (!canvas) return;

        const ctx = canvas.getContext("2d");
        const width = canvas.width;
        const height = canvas.height;

        ctx.clearRect(0, 0, width, height);

        // 获取当前 item 的 kLineData
        const data = this.listData[index].kLineData.map((point) => point.close);
        const maxValue = Math.max(...data);
        const minValue = Math.min(...data);
        const range = maxValue - minValue;

        const stepX = width / (data.length - 1);

        ctx.beginPath();
        ctx.strokeStyle = "#11ce66";
        ctx.lineWidth = 2;

        data.forEach((value, i) => {
          const x = i * stepX;
          const y = height - ((value - minValue) / range) * height; // 将值映射到 canvas 高度
          if (i === 0) {
            ctx.moveTo(x, y);
          } else {
            ctx.lineTo(x, y);
          }
        });

        ctx.stroke();
      });
    },
    //排序
    listSort(val) {
      this.sortVal = val;
@@ -324,6 +401,9 @@
};
</script>
<style lang="scss" scoped>
.k-line-canvas {
  display: block;
}
.left-enter-active,
.left-leave-active,
.right-enter-active,
@@ -371,8 +451,9 @@
}

.right {
  width: 182px;
  margin-left: 38px;
  width: 10rem;
  // margin-left: 38px;
  text-align: right;
}

.filter-box {
@@ -398,4 +479,20 @@
    margin-top: 5px;
  }
}

.list-quatation .van-cell {
  background-color: #212121 !important;
  margin-bottom: 1.8rem;
  border-radius: 1rem;
}
.list-quatation {
  .bg-red {
    background: none;
    color: #f6465d;
  }
  .bg-green {
    background: none;
    color: #2ebd85;
  }
}
</style>