From 99f91d00f05d502bd51e2fbe16d2485610cd67f7 Mon Sep 17 00:00:00 2001
From: dengchaochao <m18576213742@163.com>
Date: Mon, 10 Jun 2024 12:40:20 +0800
Subject: [PATCH] 123
---
src/views/market/components/hangqing.vue | 408 +++++++++++++++++++++++++++-------------------------------
1 files changed, 190 insertions(+), 218 deletions(-)
diff --git a/src/views/market/components/hangqing.vue b/src/views/market/components/hangqing.vue
index a99c877..5ffb682 100644
--- a/src/views/market/components/hangqing.vue
+++ b/src/views/market/components/hangqing.vue
@@ -1,83 +1,73 @@
/* eslint-disable vue/valid-v-bind */
<template>
<div
- class="content-view-box item-box-bamarket"
- style="height: auto"
+ class="content-view-box item-box-bamarket"
+ style="height: auto"
+ >
+ <div
+ class="item-box-bamarket-1"
+ style=" height: auto"
>
- <div
- class="item-box-bamarket-1"
- style=" height: auto"
- >
- <!-- 新四个框 -->
- <div class="flex-container flex justify-between item-box-bamarket-2" scoped>
- <div
- class="flex-item"
- v-for="(item, index) in topListData"
- :key="index"
- >
- <div class="flex justify-between">
- <div class="flex-1">
- <div class="flex" style="margin-top: 15px;margin-bottom: 10px;">
- <el-image
- :src="handleSymbolImg(item.symbol)"
- class="el-img-style flex-symbol"
- >
- <div slot="error" class="image-slot">
- <img
- :src="`${ConfigURL.HOST_URL}/symbol/noCoins.png`"
- class="el-img-style"
- style="width: 40px"
- />
- </div>
- </el-image>
- <div class="flex-title mt-1">
- {{ getName(item) }}/USDT
+ <!-- 新四个框 -->
+ <div class="flex-container flex justify-between item-box-bamarket-2" scoped>
+ <div
+ class="flex-item"
+ v-for="(item, index) in topListData"
+ :key="index"
+ >
+ <div class="flex justify-between">
+ <div class="flex-1">
+ <div class="flex" style="margin-top: 15px;margin-bottom: 10px;">
+ <el-image
+ :src="handleSymbolImg(item.symbol)"
+ class="el-img-style flex-symbol"
+ >
+ <div slot="error" class="image-slot">
+ <img
+ :src="`${ConfigURL.HOST_URL}/symbol/noCoins.png`"
+ class="el-img-style"
+ style="width: 40px"
+ />
</div>
- </div>
- <div class=" items-center">
- <div class="flex-price">
- {{ item.close }}
- </div>
- <div class="flex-priceUSD">
- {{ "≈$" + item.close }}
- </div>
+ </el-image>
+ <div class="flex-title mt-1">
+ {{ getName(item) }}/USDT
</div>
</div>
- <div class="flex items-center">
- <img
- v-if="item.change_ratio <= 0"
- src="@/assets/myImages/red.png"
- alt=""
- class="flex-kline"
- />
- <img
- v-if="item.change_ratio > 0"
- src="@/assets/myImages/green.png"
- alt=""
- class="flex-kline"
- />
+ <div class=" items-center">
+ <div class="flex-price">
+ {{ item.close }}
+ </div>
</div>
</div>
- <div class="flex mt-1">
- <div v-if="item.change_ratio < 0" class="flex-rise-red">
- {{ item.change_ratio }}%
- </div>
- <div v-if="item.change_ratio > 0" class="flex-rise-green">
- {{ item.change_ratio }}%
- </div>
- <div class="flex-transaction">
- {{
- $t("message.hangqing.transaction") +
- " " +
- fixData(item.volume)
- }}
- </div>
+ <div class="flex items-center">
+ <img
+ v-if="item.change_ratio <= 0"
+ src="@/assets/myImages/red.png"
+ alt=""
+ class="flex-kline"
+ />
+ <img
+ v-if="item.change_ratio > 0"
+ src="@/assets/myImages/green.png"
+ alt=""
+ class="flex-kline"
+ />
</div>
- <!-- <div style="background-color:blueviolet; width: 30px;height: 100px;"></div> -->
</div>
+ <div class="flex mt-1">
+ <div v-if="item.change_ratio < 0" class="flex-rise-red">
+ {{ item.change_ratio }}%
+ </div>
+ <div v-if="item.change_ratio > 0" class="flex-rise-green">
+ {{ item.change_ratio }}%
+ </div>
+ </div>
+ <!-- <div style="background-color:blueviolet; width: 30px;height: 100px;"></div> -->
</div>
</div>
</div>
+ </div>
<div class="swiper-img">
<div class="swiper-container">
<el-carousel :interval="5000" arrow="always" indicator-position="none">
@@ -98,9 +88,9 @@
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAzCAMAAADivasmAAAAAXNSR0IArs4c6QAAAJBQTFRFAAAAAAAAICAwHh4tICAwICgwHycuJSUwJSowJCQvJCovJCQwJCgwIycvIyMwIyYwIyYuIyYwIyUtIyUwIiUtIicwIicuJCQwJCcwIiYtJCQvIiYuIiYuJCYwIiUuJCUvIyUvIyYvIyYuIyYvIyYvIyYvIyUvISYvIiUvJCUvIiYvIiYvIyYvIyYvIyYvIyYv1k8XmgAAAC90Uk5TAAEQESAgITAwMTFAQEFQUF9fYGBhb3BwcHFxf4CAkJ6fn6Cur76/zs/P3t/u7/5ALSHUAAABB0lEQVRIx+2U166DMAyGTcroonvvAemg4Pd/uzppq0qcQGOpvTnivwlS8hHbsX+ASpW+piUXcPZXJiEkEiI4xBkVEqa7NoPQiFrcD4e97nATJSk+EF/SmpXXQR15SafvHT4xfxCAaYrZxBiQlsgh9R5tNRBvbuHvBzkk1MkvELcMRDGOxEzYIn6CGAOMjNmYEfAp9xbUjJEVILBCXIFzwas9EqoLHPljZP4M7GSffvJMP+IU+aiL3Gc+JV3l8hpmYm4Y4Srl29Ibl7RlcfMPqAFmnHmpR/S1LhuxYLyR5zfS1IM8s3CLoJO+7SIO7CzGS16m1LI2MmK4bkkPz0bAj/nOL6DSf9YdWJ5WsAYsc/8AAAAASUVORK5CYII="
alt="">
</div>
- <span class="content"> {{$t('message.home["恭喜 Swyftx新用戶，限時活動等你來"]')}} </span>
+ <span class="content"> {{ $t('message.home["恭喜 Swyftx新用戶，限時活動等你來"]') }} </span>
</div>
- <div class="more-icon"> {{$t('message.jiaoyi.more')}}
+ <div class="more-icon"> {{ $t('message.jiaoyi.more') }}
<img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAhBAMAAABKCLRiAAAAAXNSR0IArs4c6QAAACpQTFRFAAAAICAwICAwICgwJCgwIyMwIicuIyYvIyUvIiUvIiYvIyYvIyYvIyYv5hRuVQAAAA10Uk5TABAgIEBQcK+/z9/f76t+r8MAAABKSURBVCjPY2AYQCCCLlA7EU2g96YAqoDV3UmoAsxrbyugK9lESIkkuhLGuQSVMJ+9hl8FhhkkK8BwKIZXem+iObMXPcRMBWgbZwAuXx53AuEkAwAAAABJRU5ErkJggg==">
</div>
@@ -156,6 +146,10 @@
{{ item.name }}
</div>
</div>
+ <div class="title-more"> 更多
+ <img
+ src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAVBAMAAACAghKHAAAAAXNSR0IArs4c6QAAACFQTFRFAAAAjI6YiY2Wi42Zi4+XjY+ZiY2Vi42Xi46XjI6Xi46XbqjnnwAAAAp0Uk5TAG9wcH9/gIC/30jpDyUAAAA0SURBVAjXY5B0YACBWUvAlNUqMJd9FYRbRRx3EZjbtRJEsq5aBqKiViUQz2GYBeYwWII5AGMrGipkbhMxAAAAAElFTkSuQmCC">
+ </div>
</div>
<div class="css-72ldqd" style="display: block">
<!-- 标题 -->
@@ -171,7 +165,7 @@
>
<div class="css-lkqrqt">
<div
- title="名称"
+ title="交易对"
class="css-1i04fkn"
style="
overflow: hidden;
@@ -179,47 +173,7 @@
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>
- <!-- 24H涨跌 -->
- <div
- data-area="right"
- class="css-1e8pqe6"
- style="width: 55px; flex: 55 1 0%"
- >
- <div class="css-lkqrqt">
- <div
- title="24H涨跌"
- class="css-1i04fkn"
- style="
- overflow: hidden;
- -webkit-line-clamp: 1;
- line-height: 16px;
- "
- >
- {{ $t("message.hangqing.24hzhangfu") }}
+ {{ $t("message.home.jiaoyidui") }}
</div>
</div>
</div>
@@ -244,21 +198,64 @@
</div>
</div>
</div>
- <!-- 交易按钮 -->
+
+ <!-- 24H涨跌 -->
<div
data-area="right"
class="css-1e8pqe6"
- style="width: 80px; flex: 80 1 0%"
+ style="width: 55px; flex: 55 1 0%"
>
- <div
- class="css-1sq9fz1"
- style="
- overflow: hidden;
- -webkit-line-clamp: 1;
- line-height: 16px;
- "
- ></div>
+ <div class="css-lkqrqt">
+ <div
+ title="24H涨跌"
+ class="css-1i04fkn"
+ style="
+ overflow: hidden;
+ -webkit-line-clamp: 1;
+ line-height: 16px;
+ "
+ >
+ {{ $t("message.hangqing.24hzhangfu") }}
+ </div>
+ </div>
</div>
+
+
+ <!-- 交易 -->
+ <div
+ data-area="right"
+ class="css-1e8pqe6"
+ style="width: 55px; flex: 55 1 0%"
+ >
+ <div class="css-lkqrqt">
+ <div
+ title="交易"
+ class="css-1i04fkn"
+ style="
+ overflow: hidden;
+ -webkit-line-clamp: 1;
+ line-height: 16px;
+ "
+ >
+ {{ $t("message.hangqing.jiaoyi") }}
+ </div>
+ </div>
+ </div>
+ <!-- <!– 交易按钮 –>
+ <div
+ data-area="right"
+ class="css-1e8pqe6"
+ style="width: 80px; flex: 80 1 0%"
+ >
+ <div
+ class="css-1sq9fz1"
+ style="
+ overflow: hidden;
+ -webkit-line-clamp: 1;
+ line-height: 16px;
+ "
+ ></div>
+ </div>-->
</div>
<!-- 内容 -->
<div class="css-1vuj9rf" style="min-height: 830px">
@@ -281,29 +278,6 @@
class="css-14yoi5o"
style="width: 110px; flex: 110 1 0%"
>
- <div
- v-if="
- collectNameList.indexOf(item.symbol) < 0
- "
- >
- <img
- src="@/assets/myImages/icon/ant-design_star-2.png"
- style="top: 0px"
- @click="collectFun(item)"
- />
- </div>
- <div
- v-if="
- collectNameList.indexOf(item.symbol) >=
- 0
- "
- >
- <img
- src="@/assets/myImages/icon/ant-design_star-1.png"
- style="top: 0px"
- @click="deleteCollectFun(item)"
- />
- </div>
<div class="">
<!-- :src="handleSymbolImg(item.symbol)" -->
<!-- :src="`${ConfigURL.HOST_URL}/symbol/${item.symbol}.png`" -->
@@ -325,27 +299,24 @@
class="css-1wp9rgv"
style="font-size: 14px"
>
- {{ getName(item) }}
+ {{ getName(item) }} / USDT
</div>
</div>
</div>
- <!-- 价格 -->
+ <!-- 24H交易量 -->
<div
- data-area="left"
- class="css-ydcgk2"
- style="width: 60px; flex: 60 1 0%"
+ data-area="right"
+ title="29,773.07M"
+ class="css-102bt5g"
+ style="
+ width: 90px;
+ flex: 90 1 0%;
+ direction: ltr;
+ "
>
- <div
- style="direction: ltr; font-size: 14px"
- :class="
- item.change_ratio > 0
- ? 'black'
- : 'black'
- "
- >
- ${{ item.close }}
- </div>
+ {{ fixData(item.amount) }}
</div>
+
<!-- 24H涨跌 -->
<div
data-area="right"
@@ -362,19 +333,7 @@
</div>
</div>
- <!-- 24H交易量 -->
- <div
- data-area="right"
- title="29,773.07M"
- class="css-102bt5g"
- style="
- width: 90px;
- flex: 90 1 0%;
- direction: ltr;
- "
- >
- {{ fixData(item.amount) }}
- </div>
+
<!-- 交易按钮 -->
<div
data-area="right"
@@ -561,27 +520,21 @@
class="css-14yoi5o"
style="width: 110px; flex: 110 1 0%"
>
- <div
- v-if="
- collectNameList.indexOf(item.symbol) < 0
- "
- >
- <img
- src="@/assets/myImages/icon/ant-design_star-2.png"
- style="top: 0px"
- @click="collectFun(item)"
- />
- </div>
- <div
- v-if="
- collectNameList.indexOf(item.symbol) >= 0
- "
- >
- <img
- src="@/assets/myImages/icon/ant-design_star-1.png"
- style="top: 0px"
- @click="deleteCollectFun(item)"
- />
+ <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">
@@ -646,11 +599,12 @@
<script>
// const math = require("mathjs");
-import { fixData } from "@/utils/utils";
+import {fixData} from "@/utils/utils";
import ConfigURL from "@/config/index";
import Axios from "@/api/currency";
import API from "@/api/api";
-import { handleSymbolImg } from "@/utils";
+import {handleSymbolImg} from "@/utils";
+
export default {
data() {
return {
@@ -661,30 +615,20 @@
btnChooseIndex: 0,
marketList: [
{
- id: 0,
- name: this.$t("message.jiaoyi.zixuan"),
- type: "collect",
- },
- {
id: 1,
- name: this.$t("message.user.suoyoubizhong"),
+ name: this.$t("message.user['熱門現貨']"),
type: "US-stocks",
},
{
id: 2,
- name: this.$t("message.user.bibihangqing"),
+ name: this.$t("message.user['熱門合約']"),
type: "cryptos",
},
{
id: 3,
- name: this.$t("message.user.yongxuheyue"),
+ name: this.$t("message.user['熱門交割合約']"),
type: "indices",
- },
- {
- id: 4,
- name: this.$t("message.user.jiaogeheyue"),
- type: "forex",
- },
+ }
],
marketListType: "", //市场选择类型 美股 外汇，虚拟币...
jsonArray: [], //所有行情
@@ -754,7 +698,7 @@
},
getList(symbol) {
let t = this;
- API.url("wap/api/hobi!getRealtime.action", { symbol: symbol }).then((res) => {
+ API.url("wap/api/hobi!getRealtime.action", {symbol: symbol}).then((res) => {
this.jsonArray = res.data;
//筛选对应type
this.fliterTypeData();
@@ -927,22 +871,22 @@
if (this.marketListType == "US-stocks") {
this.$router.push({
path: `usStocks/constract/${symbol}`,
- query: { timestamp: Date.now(), RouterName: RouterName },
+ query: {timestamp: Date.now(), RouterName: RouterName},
});
} else if (this.marketListType == "cryptos") {
this.$router.push({
path: `coin/spot/${symbol}`,
- query: { timestamp: Date.now(), RouterName: RouterName },
+ query: {timestamp: Date.now(), RouterName: RouterName},
});
} else if (this.marketListType == "indices") {
this.$router.push({
path: `coin/constract/${symbol}`,
- query: { timestamp: Date.now(), RouterName: RouterName },
+ query: {timestamp: Date.now(), RouterName: RouterName},
});
} else if (this.marketListType == "forex") {
this.$router.push({
path: `coin/constract/${symbol}`,
- query: { timestamp: Date.now(), RouterName: RouterName },
+ query: {timestamp: Date.now(), RouterName: RouterName},
});
}
},
@@ -967,12 +911,14 @@
.tab-active {
border-bottom: 4px solid #1d91ff;
}
-.flex-item{
+
+.flex-item {
min-width: 386px;
height: 150px;
max-width: 400px;
}
-.flex-price{
+
+.flex-price {
font-weight: 600;
}
@@ -1053,10 +999,11 @@
}
}
-.item-box-bamarket-1{
+.item-box-bamarket-1 {
position: relative;
min-height: 150px;
- .item-box-bamarket-2{
+
+ .item-box-bamarket-2 {
position: absolute;
left: 0;
top: 0;
@@ -1064,10 +1011,35 @@
}
}
-.content-view-box{
+.content-view-box {
display: flex;
justify-content: center;
background-color: #e9eeff;
width: 100%;
}
+
+.css-13euu76 > [data-area="right"] {
+ justify-content: center;
+}
+
+.css-leyy1t > div {
+ margin-right: 32px;
+}
+
+.css-1vii3zc .title-more {
+ font-size: 14px;
+ font-family: Noto Sans SC;
+ font-weight: 400;
+ color: #9b9da5;
+ line-height: 20px;
+ display: flex;
+ align-items: center;
+ cursor: pointer;
+
+ img {
+ margin-left: 6px;
+ width: 4.5px;
+ height: 9px;
+ }
+}
</style>
--
Gitblit v1.9.3