jys-MT10-pc.git

			@@ -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>