交易所前端蓝色ui 4.5 jiem
123
dengchaochao
2024-06-10 99f91d00f05d502bd51e2fbe16d2485610cd67f7
123
10 files modified
17948 ■■■■■ changed files
package-lock.json 17503 ●●●●● patch | view | raw | blame | history
src/components/layout/commonHeader.vue 3 ●●●● patch | view | raw | blame | history
src/i18n/cht/user.js 5 ●●●● patch | view | raw | blame | history
src/i18n/de/user.js 5 ●●●● patch | view | raw | blame | history
src/i18n/en/user.js 5 ●●●● patch | view | raw | blame | history
src/i18n/fra/user.js 5 ●●●● patch | view | raw | blame | history
src/i18n/kor/user.js 5 ●●●● patch | view | raw | blame | history
src/i18n/zh/user.js 5 ●●●● patch | view | raw | blame | history
src/views/market/components/hangqing.vue 408 ●●●● patch | view | raw | blame | history
src/views/market/components/pageDetail.vue 4 ●●●● patch | view | raw | blame | history
package-lock.json
Diff too large
src/components/layout/commonHeader.vue
@@ -1,5 +1,5 @@
<template>
  <div>
  <div style="height: 55px;">
    <div class="page-header-background">
      <div class="page-header-content page-header-box">
        <!-- 通用左边菜单 -->
@@ -417,6 +417,7 @@
  left: 0;
  width: 100%;
  z-index: 999;
  margin-bottom: 10px;
}
.page-header-content {
src/i18n/cht/user.js
@@ -559,5 +559,8 @@
  xianhuojiaoyishouye: "現貨交易",
  'hangqing':'行情',
  'jiaoyi':'交易',
  'shandui': '閃兌'
  'shandui': '閃兌',
  '熱門現貨': '熱門現貨',
  '熱門合約': '熱門合約',
  '熱門交割合約': '熱門交割合約'
};
src/i18n/de/user.js
@@ -539,5 +539,8 @@
    "xianhuojiaoyishouye": "Spot-Handel",
    "hangqing": "Markt",
    "jiaoyi": "Handel",
    'shandui': 'Flash-Austausch'
    'shandui': 'Flash-Austausch',
    '熱門現貨': 'Beliebter Ort',
    '熱門合約': 'Beliebte Verträge',
    '熱門交割合約': 'Popular delivery contracts'
}
src/i18n/en/user.js
@@ -575,5 +575,8 @@
  xianhuojiaoyishouye: "Spot",
  'hangqing':'Markets',
  'jiaoyi': 'Trade',
  'shandui': 'Instant Exchange'
  'shandui': 'Instant Exchange',
  '熱門現貨': 'Popular spot',
  '熱門合約': 'Popular contracts',
  '熱門交割合約': 'Popular delivery contracts'
};
src/i18n/fra/user.js
@@ -539,5 +539,8 @@
    "xianhuojiaoyishouye": "Trading au comptant",
    hangqing: "Citations",
    "jiaoyi": 'commerce',
    'shandui': 'Échange flash'
    'shandui': 'Échange flash',
    '熱門現貨': 'Endroit populaire',
    '熱門合約': 'Contrats populaires',
    '熱門交割合約': 'Contrats de livraison populaires'
}
src/i18n/kor/user.js
@@ -539,5 +539,8 @@
  "xianhuojiaoyishouye": "현물 거래",
  "hangqing": "시장",
  "jiaoyi": "무역",
  'shandui': '플래시 교환'
  'shandui': '플래시 교환',
  '熱門現貨': '인기 명소',
  '熱門合約': '인기 있는 계약',
  '熱門交割合約': '인기 있는 배송 계약'
}
src/i18n/zh/user.js
@@ -559,5 +559,8 @@
  xianhuojiaoyishouye: "现货交易",
  'hangqing':'行情',
  'jiaoyi':'交易',
  'shandui': '闪兑'
  'shandui': '闪兑',
  '熱門現貨': '热门现货',
  '熱門合約': '热门合约',
  '熱門交割合約': '热门交割合约'
};
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>
                            <!--                            &lt;!&ndash; 交易按钮 &ndash;&gt;
                                                        <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) }}&nbsp;/&nbsp;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>
src/views/market/components/pageDetail.vue
@@ -4,8 +4,8 @@
      <div class="title-1">{{$t('message.home["歡迎來到 COLLOTI"]')}}</div>
      <div class="title-2">{{$t('message.home["即刻開啟您的數字貨幣之旅。"]')}}</div>
      <div class="action-btns">
        <el-button class="jy"> {{$t('message.home.jiaoyi')}}</el-button>
        <el-button class="cz"> {{$t('message.user.chongzhi')}}</el-button>
        <el-button class="jy" @click="$router.push(`coin/constract/btc?timestamp=${Date.now()}&RouterName=delivery`)"> {{$t('message.home.jiaoyi')}}</el-button>
        <el-button class="cz" @click="$router.push('/recharge')"> {{$t('message.user.chongzhi')}}</el-button>
      </div>
      <div class="tip"> {{$t('message.home["揭開驚喜,解鎖獎勵 – 你的精彩之旅從這裡開始!"]')}} <img
          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAUCAMAAACOLiwjAAAAAXNSR0IArs4c6QAAADNQTFRFAAAAICAwICAwJSUwIiYuIiYuJCYwIiUuIyUuIyUvIyYvIyYuIyYvIyUvIyYvIyYvIyYvbgd1ZQAAABB0Uk5TABAgMH+AgI+Qn5+gr7/f76mIx4UAAABBSURBVBjTfc45DgAgCERR3Hfl/qe1c8ZCqf4LCUHEWTnjdUJBSaazpP213EP5Urw0VAsewYY7Udd3T26LO/gyUG8DewQfiCCoRgAAAABJRU5ErkJggg==">