From 1a0dfc3414d02b4247e2160436d37413da8bf295 Mon Sep 17 00:00:00 2001
From: dcc <dcc@163.com>
Date: Tue, 11 Jun 2024 18:30:36 +0800
Subject: [PATCH] 123
---
src/views/market/components/hangqing.vue | 542 +++++++++++++++++++++++++++++++++--------------------
1 files changed, 337 insertions(+), 205 deletions(-)
diff --git a/src/views/market/components/hangqing.vue b/src/views/market/components/hangqing.vue
index 5ffb682..15cf6c5 100644
--- a/src/views/market/components/hangqing.vue
+++ b/src/views/market/components/hangqing.vue
@@ -146,7 +146,7 @@
{{ item.name }}
</div>
</div>
- <div class="title-more"> 更多
+ <div class="title-more" @click="$router.push('/market')"> {{ $t("message.jiaoyi.more") }}
<img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAVBAMAAACAghKHAAAAAXNSR0IArs4c6QAAACFQTFRFAAAAjI6YiY2Wi42Zi4+XjY+ZiY2Vi42Xi46XjI6Xi46XbqjnnwAAAAp0Uk5TAG9wcH9/gIC/30jpDyUAAAA0SURBVAjXY5B0YACBWUvAlNUqMJd9FYRbRRx3EZjbtRJEsq5aBqKiViUQz2GYBeYwWII5AGMrGipkbhMxAAAAAElFTkSuQmCC">
</div>
@@ -353,240 +353,357 @@
</div>
</div>
</div>
- <!-- 分页器 -->
- <div class="css-1ttcc5">
- <div class="css-b0tuh4">
- <button
- data-bn-type="button"
- class="mirror css-11xno5y"
- disabled=""
- aria-label="Previous page"
- >
- <svg
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 24 24"
- fill="none"
- class="css-1iztezc"
- >
- <path
- fill-rule="evenodd"
- clip-rule="evenodd"
- d="M11.934 12l3.89 3.89-1.769 1.767L8.398 12l1.768-1.768 3.89-3.889 1.767 1.768-3.889 3.89z"
- fill="currentColor"
- ></path>
- </svg>
- </button>
- <div v-for="pageItem of allPage" :key="pageItem">
- <button
- data-bn-type="button"
- aria-label="Page number 1"
- :class="
- currentPage == pageItem
- ? 'css-5jht7o-1'
- : 'css-hlqxzb-1'
- "
- @click="OnclickPage(pageItem)"
- >
- {{ pageItem }}
- </button>
- </div>
- <button
- data-bn-type="button"
- class="mirror css-11xno5y"
- disabled=""
- aria-label="Next page"
- >
- <svg
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 24 24"
- fill="none"
- class="css-1iztezc"
- >
- <path
- fill-rule="evenodd"
- clip-rule="evenodd"
- d="M12.288 12l-3.89 3.89 1.768 1.767L15.823 12l-1.768-1.768-3.889-3.889-1.768 1.768 3.89 3.89z"
- fill="currentColor"
- ></path>
- </svg>
- </button>
- </div>
- </div>
</div>
</div>
- <!-- 榜单 -->
- <div
- class="box2"
- style="display: block; background-color: white"
- >
- <!-- tab -->
- <div class="css-1vii3zc">
- <div id="box1002" class="tab-box">
- <div
- class="tab-item"
- v-for="(item, i) in rankTypeList"
- :key="i"
- @click="changeTypeRank(item)"
- :class="[rankIndex == item.id ? 'tab-active' : '']"
- style="margin-left: 20px; font-size: 14px"
- >
- {{ item.name }}
+ <div>
+ <!-- 榜单 -->
+ <div
+ class="box2"
+ style="display: block; background-color: white;width: 100%;"
+ >
+ <!-- tab -->
+ <div class="css-1vii3zc">
+ <div id="box1002" class="tab-box">
+ <div
+ class="tab-item"
+ style="margin-left: 20px; font-size: 14px"
+ >
+ {{ $t("message.hangqing.chengjiaobang") }}
+ </div>
+ <div class="title-more" @click="$router.push('/market')"> {{ $t("message.jiaoyi.more") }}
+ <img
+ src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAVBAMAAACAghKHAAAAAXNSR0IArs4c6QAAACFQTFRFAAAAjI6YiY2Wi42Zi4+XjY+ZiY2Vi42Xi46XjI6Xi46XbqjnnwAAAAp0Uk5TAG9wcH9/gIC/30jpDyUAAAA0SURBVAjXY5B0YACBWUvAlNUqMJd9FYRbRRx3EZjbtRJEsq5aBqKiViUQz2GYBeYwWII5AGMrGipkbhMxAAAAAElFTkSuQmCC">
+ </div>
</div>
</div>
- </div>
- <div class="css-72ldqd" style="display: block">
- <!-- 标题 -->
- <div class="css-qbmpwo">
- <div class="css-vurnku" style="min-width: 350px">
- <div class="css-13euu76">
- <!-- 名称 -->
- <div
- data-area="left"
- class="css-1e8pqe6"
- style="width: 110px; flex: 110 1 0%"
- >
- <div class="css-lkqrqt">
- <div
- style="
- overflow: hidden;
- -webkit-line-clamp: 1;
- 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>
- <!-- 涨跌 或交易额-->
- <div
- data-area="right"
- class="css-1e8pqe6"
- style="width: 55px; flex: 55 1 0%"
- >
- <div class="css-lkqrqt">
- <div
- class="css-1i04fkn"
- style="
- overflow: hidden;
- -webkit-line-clamp: 1;
- line-height: 16px;
- "
- >
- {{
- rankIndex === 2
- ? $t("message.home.chengjiaoe")
- : $t("message.home.zhangdie")
- }}
- </div>
- </div>
- </div>
- </div>
- <!-- 内容 -->
- <div class="css-1vuj9rf" style="min-height: 830px">
- <div
- direction="ltr"
- class="css-vlibs4"
- v-for="(item, index) in rankDataList"
- :key="index"
- >
+ <div class="css-72ldqd" style="display: block">
+ <!-- 标题 -->
+ <div class="css-qbmpwo">
+ <div class="css-vurnku" style="min-width: 350px">
+ <div class="css-13euu76">
+ <!-- 名称 -->
<div
- class="css-leyy1t"
- style="cursor: pointer; text-decoration: none"
+ data-area="left"
+ class="css-1e8pqe6"
+ style="width: 110px; flex: 110 1 0%"
>
- <!-- 名称 -->
- <div
- data-area="left"
- class="css-14yoi5o"
- style="width: 110px; flex: 110 1 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="`${ConfigURL.HOST_URL}/symbol/noCoins.png`"
- class="el-img-style"
- />
- </div>
- </el-image>
+ <div class="css-lkqrqt">
+ <div
+ style="
+ overflow: hidden;
+ -webkit-line-clamp: 1;
+ line-height: 16px;
+ "
+ >
+ {{ $t("message.hangqing.mingcheng") }}
</div>
- <div class="css-y492if">
- <div class="css-1wp9rgv">
- {{ getName(item) }}
+ </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>
+ <!-- 涨跌 或交易额-->
+ <div
+ data-area="right"
+ class="css-1e8pqe6"
+ style="width: 55px; flex: 55 1 0%"
+ >
+ <div class="css-lkqrqt">
+ <div
+ class="css-1i04fkn"
+ style="
+ overflow: hidden;
+ -webkit-line-clamp: 1;
+ line-height: 16px;
+ "
+ >
+ {{
+ rankIndex === 2
+ ? $t("message.home.chengjiaoe")
+ : $t("message.home.zhangdie")
+ }}
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- 内容 -->
+ <div class="css-1vuj9rf">
+ <div
+ direction="ltr"
+ class="css-vlibs4"
+ v-for="(item, index) in rankDataList1.slice(0,3)"
+ :key="index"
+ >
+ <div
+ class="css-leyy1t"
+ style="cursor: pointer; text-decoration: none"
+ >
+ <!-- 名称 -->
+ <div
+ data-area="left"
+ class="css-14yoi5o"
+ style="width: 110px; flex: 110 1 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="`${ConfigURL.HOST_URL}/symbol/noCoins.png`"
+ class="el-img-style"
+ />
+ </div>
+ </el-image>
+ </div>
+ <div class="css-y492if">
+ <div class="css-1wp9rgv">
+ {{ getName(item) }}
+ </div>
+ </div>
+ </div>
+ <!-- 价格 -->
+ <div
+ data-area="left"
+ class="css-ydcgk2"
+ style="width: 60px; flex: 60 1 0%"
+ >
+ <div
+ style="direction: ltr"
+ :class="
+ item.change_ratio > 0 ? 'black' : 'black'
+ "
+ >
+ ${{ item.close }}
+ </div>
+ </div>
+ <!-- 涨跌 或交易额-->
+ <div
+ data-area="right"
+ class="css-18yakpx"
+ style="width: 55px; flex: 55 1 0%"
+ >
+ <div
+ v-if="rankIndex === 2"
+ style="direction: ltr"
+ >
+ {{ fixData(item.volume) }}
+ </div>
+ <div
+ v-else
+ :class="
+ item.change_ratio > 0 ? 'green' : 'red'
+ "
+ style="direction: ltr"
+ >
+ {{ `${item.change_ratio}%` }}
</div>
</div>
</div>
- <!-- 价格 -->
- <div
- data-area="left"
- class="css-ydcgk2"
- style="width: 60px; flex: 60 1 0%"
- >
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- 分页器 -->
+ </div>
+ </div>
+ <!-- 榜单 -->
+ <div
+ class="box2"
+ style="display: block; background-color: white;width: 100%;"
+ >
+ <!-- tab -->
+ <div class="css-1vii3zc">
+ <div id="box1002" class="tab-box">
+ <div
+ class="tab-item"
+ style="margin-left: 20px; font-size: 14px"
+ >
+ {{ $t("message.hangqing.zhangfubang") }}
+ </div>
+ <div class="title-more" @click="$router.push('/market')"> {{ $t("message.jiaoyi.more") }}
+ <img
+ src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAVBAMAAACAghKHAAAAAXNSR0IArs4c6QAAACFQTFRFAAAAjI6YiY2Wi42Zi4+XjY+ZiY2Vi42Xi46XjI6Xi46XbqjnnwAAAAp0Uk5TAG9wcH9/gIC/30jpDyUAAAA0SURBVAjXY5B0YACBWUvAlNUqMJd9FYRbRRx3EZjbtRJEsq5aBqKiViUQz2GYBeYwWII5AGMrGipkbhMxAAAAAElFTkSuQmCC">
+ </div>
+ </div>
+ </div>
+
+ <div class="css-72ldqd" style="display: block">
+ <!-- 标题 -->
+ <div class="css-qbmpwo">
+ <div class="css-vurnku" style="min-width: 350px">
+ <div class="css-13euu76">
+ <!-- 名称 -->
+ <div
+ data-area="left"
+ class="css-1e8pqe6"
+ style="width: 110px; flex: 110 1 0%"
+ >
+ <div class="css-lkqrqt">
<div
- style="direction: ltr"
- :class="
- item.change_ratio > 0 ? 'black' : 'black'
- "
+ style="
+ overflow: hidden;
+ -webkit-line-clamp: 1;
+ line-height: 16px;
+ "
>
- ${{ item.close }}
+ {{ $t("message.hangqing.mingcheng") }}
</div>
</div>
- <!-- 涨跌 或交易额-->
- <div
- data-area="right"
- class="css-18yakpx"
- style="width: 55px; flex: 55 1 0%"
- >
+ </div>
+ <!-- 价格 -->
+ <div
+ data-area="left"
+ class="css-1e8pqe6"
+ style="width: 60px; flex: 60 1 0%"
+ >
+ <div class="css-lkqrqt">
<div
- v-if="rankIndex === 2"
- style="direction: ltr"
+ title="价格"
+ class="css-1i04fkn"
+ style="
+ overflow: hidden;
+ -webkit-line-clamp: 1;
+ line-height: 16px;
+ "
>
- {{ fixData(item.volume) }}
+ {{ $t("message.hangqing.jiage") }}
</div>
+ </div>
+ </div>
+ <!-- 涨跌 或交易额-->
+ <div
+ data-area="right"
+ class="css-1e8pqe6"
+ style="width: 55px; flex: 55 1 0%"
+ >
+ <div class="css-lkqrqt">
<div
- v-else
- :class="
+ class="css-1i04fkn"
+ style="
+ overflow: hidden;
+ -webkit-line-clamp: 1;
+ line-height: 16px;
+ "
+ >
+ {{
+ rankIndex === 2
+ ? $t("message.home.chengjiaoe")
+ : $t("message.home.zhangdie")
+ }}
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- 内容 -->
+ <div class="css-1vuj9rf">
+ <div
+ direction="ltr"
+ class="css-vlibs4"
+ v-for="(item, index) in rankDataList.slice(0,3)"
+ :key="index"
+ >
+ <div
+ class="css-leyy1t"
+ style="cursor: pointer; text-decoration: none"
+ >
+ <!-- 名称 -->
+ <div
+ data-area="left"
+ class="css-14yoi5o"
+ style="width: 110px; flex: 110 1 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="`${ConfigURL.HOST_URL}/symbol/noCoins.png`"
+ class="el-img-style"
+ />
+ </div>
+ </el-image>
+ </div>
+ <div class="css-y492if">
+ <div class="css-1wp9rgv">
+ {{ getName(item) }}
+ </div>
+ </div>
+ </div>
+ <!-- 价格 -->
+ <div
+ data-area="left"
+ class="css-ydcgk2"
+ style="width: 60px; flex: 60 1 0%"
+ >
+ <div
+ style="direction: ltr"
+ :class="
+ item.change_ratio > 0 ? 'black' : 'black'
+ "
+ >
+ ${{ item.close }}
+ </div>
+ </div>
+ <!-- 涨跌 或交易额-->
+ <div
+ data-area="right"
+ class="css-18yakpx"
+ style="width: 55px; flex: 55 1 0%"
+ >
+ <div
+ v-if="rankIndex === 2"
+ style="direction: ltr"
+ >
+ {{ fixData(item.volume) }}
+ </div>
+ <div
+ v-else
+ :class="
item.change_ratio > 0 ? 'green' : 'red'
"
- style="direction: ltr"
- >
- {{ `${item.change_ratio}%` }}
+ style="direction: ltr"
+ >
+ {{ `${item.change_ratio}%` }}
+ </div>
</div>
</div>
</div>
</div>
</div>
</div>
+ <!-- 分页器 -->
</div>
- <!-- 分页器 -->
</div>
</div>
+
</div>
</div>
</div>
@@ -659,10 +776,15 @@
},
],
rankDataList: [], // 当前所属榜列表数据
+ rankDataList1: [],
rankItem: {
type: "change_ratio",
sort: "up",
}, //当前所选中的榜单对象,初始默认为涨幅榜
+ rankItem1: {
+ sort: "up",
+ type: "volume",
+ },
rankIndex: 0, //当前所选中的榜单index
searchValue: "",
searchList: [],
@@ -741,6 +863,11 @@
this.compare(this.rankItem.type, this.rankItem.sort)
);
this.rankDataList = rankDataList.slice(0, this.maxItemPage);
+
+ let rankDataList1 = [...this.activeList].sort(
+ this.compare(this.rankItem1.type, this.rankItem1.sort)
+ );
+ this.rankDataList1 = rankDataList1.slice(0, this.maxItemPage);
},
compare(p, type) {
@@ -785,6 +912,7 @@
},
// 榜单切换
changeTypeRank(item) {
+ console.log(item)
this.rankItem = item;
this.rankIndex = item.id;
this.rankDataList = [...this.activeList].sort(
@@ -1042,4 +1170,8 @@
height: 9px;
}
}
+#box1002{
+ width: 100%;
+ justify-content: space-between;
+}
</style>
--
Gitblit v1.9.3