| | |
| | | /* 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"> |
| | |
| | | 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> |
| | |
| | | {{ 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"> |
| | | <!-- 标题 --> |
| | |
| | | > |
| | | <div class="css-lkqrqt"> |
| | | <div |
| | | title="名称" |
| | | title="交易对" |
| | | class="css-1i04fkn" |
| | | style=" |
| | | overflow: hidden; |
| | |
| | | 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> |
| | |
| | | </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"> |
| | |
| | | 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`" --> |
| | |
| | | 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" |
| | |
| | | </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" |
| | |
| | | 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"> |
| | |
| | | |
| | | <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 { |
| | |
| | | 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: [], //所有行情 |
| | |
| | | }, |
| | | 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(); |
| | |
| | | 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}, |
| | | }); |
| | | } |
| | | }, |
| | |
| | | .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; |
| | | } |
| | | |
| | |
| | | } |
| | | } |
| | | |
| | | .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; |
| | |
| | | } |
| | | } |
| | | |
| | | .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> |