From 45190f969dd8c7d3d2c6e366694f0dadc5ea07e8 Mon Sep 17 00:00:00 2001
From: lxf <1371462558@qq.com>
Date: Mon, 19 May 2025 16:43:12 +0800
Subject: [PATCH] 样式修改
---
src/components/list-quotation/index.vue | 143 ++++++++++++++++++++++++++++++++++++++++-------
1 files changed, 120 insertions(+), 23 deletions(-)
diff --git a/src/components/list-quotation/index.vue b/src/components/list-quotation/index.vue
index 6b50b32..184fa78 100644
--- a/src/components/list-quotation/index.vue
+++ b/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>
--
Gitblit v1.9.3