udxcms 1.0.8 → 1.0.10

package/dist/components/pageComponents/header/header_dex.vue

@@ -1,1967 +0,0 @@
-<!--
- * @Author: Sneed
- * @Date: 2020-11-16 14:38:46
- * @LastEditTime: 2022-08-24 00:45:44
- * @LastEditors: Lewis
- * @Description: update logoIcon
--->
-<template>
-  <div class="header-wrapper" :class="['theme-' + headerTheme]">
-    <!-- <div
-      :class="{ 'header-nav': true, active: active }"
-            v-theme="{ background: getStyleAttrs('background') }"
-    > -->
-    <div
-      :class="{ 'header-nav': true, active: active }"
-    >
-      <div :class="['contentWidth']">
-        <div class="flex flex-a">
-          <div class="logo" @click="goHome"
-               v-theme="{ height: (styleConf && styleConf.conf && styleConf.conf.logoHeight) || commonConf.logoHeight }"
-          >
-            <img :src="logoUrl" class="imgsvg"
-                 v-theme="{ height: (styleConf && styleConf.conf && styleConf.conf.logoHeight) || commonConf.logoHeight}"
-            />
-            <div class='origin-img'>
-              <img :src="logoUrl" class="imgsvg"
-                   v-theme="{ height: (styleConf && styleConf.conf && styleConf.conf.logoHeight) || commonConf.logoHeight}"
-              />
-            </div>
-          </div>
-          <ul class="nav" v-show="showMiddleInfo">
-            <li
-              class="li wallet wallet-order"
-              v-for="(item, index) in navList"
-              :key="index"
-              @click="dealUrl(item)"
-            >
-							<span class='menu-text'>
-								{{ item.bar_name }}
-								<svg-icon
-                  className="li-img-2"
-                  icon-class="arrow-down-w"
-                  v-if="item.child.length"
-                ></svg-icon>
-                                <menu-tag :content='item.menu_tag' v-if='item.menu_tag' top='-10px'></menu-tag>
-							</span>
-              <div
-                class="wallet-more-box"
-                v-if="item.child.length"
-              >
-                <div class="wallet-more">
-                  <div
-                    class="wallet-title"
-                    v-for="(innerItem, index) in item.child"
-                    :key="index"
-                    @click="dealUrl(innerItem)"
-                  >
-                    {{ innerItem.bar_name }}
-                  </div>
-                </div>
-              </div>
-            </li>
-          </ul>
-        </div>
-        <div class="flex">
-          <ul :class="['right-tool', walletName.length && 'right-tool-login']">
-            <li v-if="account && !isLocked" class="my-portfolio">
-              <span class="menu-text">{{ $t('user_common_portfolio') }}</span>
-              <BasePopup class="menu-dropdown">
-                <BaseMenu menuType="portfolio"/>
-              </BasePopup>
-            </li>
-            <li>
-              <NetworkSelect
-                :networks="walletNetworks"
-                :defaultChainId="chainId"
-                :isShowLabel='!account && !walletAccount'
-                :chainChangeLogin='true'
-                @change="changeChain"
-              />
-            </li>
-
-            <!-- <li
-              class="marl18 download-li"
-              v-if="activeUser && false"
-            >
-              <div
-                class="li-message"
-                @mouseover="showNoticeFunc(1)"
-                @mouseleave="showNoticeFunc(0)"
-              >
-                <svg-icon
-                  className="li-img-2"
-                  icon-class="message"
-                ></svg-icon>
-                <div class="li-message-dot" v-if="unreadCount">
-                  {{
-                    unreadCount >= 100 ? "99+" : unreadCount
-                  }}
-                </div>
-                <div class="li-message-box" v-if="showNotice">
-                  <NoticePanel
-                    :list="msgList"
-                    :unreadCount="unreadCount"
-                    @readAll="readAll"
-                    @setRead="setItemRead"
-                  />
-                </div>
-              </div>
-            </li> -->
-            <li v-if="(account || isLocked) && !hideWalletBtn">
-              <WalletConnected :selfTheme='true'/>
-            </li>
-            <li class="walletconnect" @click="login" v-else>
-              {{ $t("wallet_common_connect") }}
-            </li>
-            <li
-              class="englishUSD"
-              :data-role="currencyRole"
-              @mouseenter="isShowCurrency = true"
-            >
-							<span
-              >{{ lang }}/{{
-                  currency.name ||
-                  'USD'
-                }}</span
-              >
-              <svg-icon
-                className="li-img-2"
-                icon-class="arrow-down-w"
-                :data-role="currencyRole"
-              ></svg-icon>
-              <div class="currencyBox" v-if="isShowCurrency">
-                <Currency
-                  v-model="isShowCurrency"
-                  top="22"
-                  left=""
-                  right="0"
-                  :role="currencyRole"
-                  :isClickstatus="false"
-                  @setLang="setLang"
-                />
-              </div>
-            </li>
-          </ul>
-
-          <!-- 主题切换 -->
-          <div v-if="themeSwitchVisible" class="theme-icons">
-            <SvgIcon
-              v-if="headerTheme === 'dark'"
-              icon-class="day"
-              stroke="none"
-              className="theme-icon"
-              @click="setTheme('light')"
-            />
-            <SvgIcon
-              v-else
-              icon-class="night"
-              stroke="none"
-              className="theme-icon"
-              @click="setTheme('dark')"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- <TopMessage :class='{active: active}' :show='updateVertionIng'/> -->
-    <dialog-box v-model="noticeDetail" :mask="true" :close="false">
-      <div class="notice-detail">
-        <div class="title-box">
-          <div class="notice-title">
-            {{ $t("notification_notifications_title") }}
-          </div>
-          <div
-            :class="[
-							'notice-viewall fontHover',
-							{ 'notice-gray': !msgList.length || hasNoMsg },
-						]"
-          >
-						<span
-              :class="['notice-act-color fontHover']"
-              @click="checkNext"
-            >{{ $t("notification_notifications_next") }}</span
-            >
-            <svg-icon
-              className="notice-arrow"
-              icon-class="arrow-right"
-            ></svg-icon>
-          </div>
-        </div>
-        <div class="content">
-          <div class="title">{{ msgDetail.title }}</div>
-          <div class="detail" v-html="msgDetail.content"></div>
-        </div>
-        <div class="btn-box">
-          <button class="btn" @click="noticeDetail = false">
-            {{ $t("notification_notifications_understand") }}
-          </button>
-        </div>
-      </div>
-    </dialog-box>
-
-    <dialog-box
-      :title="$t('notification_notifications_confirmation')"
-      :mask="true"
-      v-model="confirmation"
-    >
-      <div class="confirmation-content">
-        <div class="confirmation-desc">
-          {{ $t("notification_notifications_all_read") }}
-        </div>
-        <div class="conf-btns">
-          <button
-            class="cancel opcHover"
-            @click="confirmation = false"
-          >
-            {{ $t("notification_notifications_cancel") }}
-          </button>
-          <button class="sure" @click="readAll('sure')">
-            {{ $t("notification_notifications_sure") }}
-          </button>
-        </div>
-      </div>
-    </dialog-box>
-    <div class="mobi-info" v-show="showMobi">
-      <div class="mobi-content">
-        <div class="mobi-title">
-          <span>{{ $t("trade_swap_platform_title") }}</span>
-          <svg-icon
-            class="icon"
-            icon-class="icon-white"
-            @click="closeMobi"
-          ></svg-icon>
-        </div>
-        <div class="platform bottom">
-          <div>
-						<span class="platform-title">
-							<img :src="mbopSrc" alt=""/>
-							{{ info.platform_coin_symbol }}
-							{{ $t("trade_swap_platform_balance") }}
-						</span>
-            <span> {{ info.platform_coin_balance }}</span>
-          </div>
-          <div>
-						<span>{{
-                $t("trade_swap_mbop_price", {
-                  coinOp: info.platform_coin_symbol,
-                })
-              }}</span>
-            <span
-            >{{
-                info.currency_symbol
-              }}{{ info.market_price }}</span
-            >
-          </div>
-          <div>
-						<span>{{
-                $t("trade_swap_mbop_circulation", {
-                  coinOp: info.platform_coin_symbol,
-                })
-              }}</span>
-            <span
-            >{{ info.circulation_supply }}
-							{{ info.platform_coin_symbol }}</span
-            >
-          </div>
-          <div>
-						<span>{{
-                $t("trade_swap_total_supply", {
-                  coin: info.platform_coin_symbol,
-                  coinOp: info.platform_coin_symbol,
-                })
-              }}</span>
-            <span v-if="info.total_supply">{{
-                info.total_supply + " " + info.platform_coin_symbol
-              }}</span>
-            <span v-else></span>
-          </div>
-        </div>
-        <div class="platform">
-          <div>
-						<span class="platform-title">
-							<img :src="mobiSrc" alt=""/>
-							{{ info.dividend_coin_symbol }}
-							{{ $t("trade_swap_platform_balance") }}
-						</span>
-            <span>{{ info.dividend_coin_balance }}</span>
-          </div>
-          <div>
-						<span>{{
-                $t("trade_swap_mobi_price", {
-                  coin: info.dividend_coin_symbol,
-                })
-              }}</span>
-            <span
-            >{{ info.currency_symbol }}
-							{{ info.rigid_price }}</span
-            >
-          </div>
-          <div>
-						<span>{{
-                $t("trade_swap_mobi_circulation", {
-                  coin: info.dividend_coin_symbol,
-                })
-              }}</span>
-            <span
-            >{{ info.reserve_fund }}
-							{{ info.dividend_coin_symbol }}</span
-            >
-          </div>
-          <div>
-						<span>{{
-                $t("trade_swap_has_mined", {
-                  coin: info.dividend_coin_symbol,
-                })
-              }}</span>
-            <span v-if="info.yielded">{{
-                info.yielded + " " + info.dividend_coin_symbol
-              }}</span>
-            <span v-else></span>
-          </div>
-        </div>
-        <a
-          :href="
-						'#/trade/data-preview?coin_name=' +
-							info.dividend_coin_symbol +
-							'&symbol=' +
-							info.platform_coin_symbol
-					"
-          class="uni"
-        >{{
-            $t("trade_swap_view_uni_analytics", {
-              coin: info.dividend_coin_symbol,
-            })
-          }}</a
-        >
-        <a
-          href="http://192.168.2.11:7000/ "
-          class="uni float-r"
-          target="block"
-        >
-          {{ $t("trade_swap_reserve_funds") }}
-        </a>
-      </div>
-    </div>
-    <!-- <MessageTips  v-model="urlTips.show" :content='urlTips.content' @sureCallback='gouThirdUrl(urlTips.url)'></MessageTips> -->
-    <dialog-box :title="urlTips.title" v-model="urlTips.show" :mask="true">
-      <sub-comfirm
-        @callFunc="gouThirdUrl"
-        title=" "
-        :content="urlTips.content"
-        :sureText="urlTips.btnText"
-        :btnShow="[0, 1]"
-      ></sub-comfirm>
-    </dialog-box>
-  </div>
-</template>
-<script>
-import _ from "lodash";
-import {mapState} from "vuex";
-import {
-  getUnreadCount,
-  getMessage,
-  setRead,
-  setReadById,
-  breakdown,
-} from "../../../api/common";
-import conf from "../../../config/index";
-import {isUserCenter} from "../../../utils/index";
-import themeMixin from "../../../mixins/themeMixin";
-
-export default {
-  name: "HeaderDex",
-  mixins: [themeMixin],
-  props: {
-    navList: {
-      type: Array,
-      default: function () {
-        return [];
-      },
-    },
-    scrollTop: {
-      type: Number,
-      default: 500,
-    },
-    showMiddleInfo: {
-      //显示中间信息 区分首页/注册登陆
-      type: Boolean,
-      default: true,
-    },
-    hideWalletBtn: {
-      type: Boolean,
-      default: false
-    },
-    background: {
-      type: String,
-      default: "",
-    },
-    color: {
-      type: String,
-      default: "",
-    },
-    font: {
-      type: String,
-      default: "",
-    },
-    hoverColor: {
-      type: String,
-      default: "var(--primary-color)",
-    },
-    // styleConf: {
-    // 	type: Object,
-    // 	default: function() {
-    // 		return {};
-    // 	},
-    // },
-    commonConf: {
-      type: Object,
-      default: function () {
-        return {};
-      },
-    },
-    hideArr: {
-      type: Array,
-      default: function () {
-        return [];
-      },
-    },
-    commonHeader: {
-      type: Object,
-      default: function () {
-        return {};
-      },
-    },
-  },
-  computed: {
-    ...mapState("user", ["userInfo", "currency"]),
-    logoUrl() {
-      return window.site_config["site_common_logo_image_" + location.hostname];
-      // return this.$t("site_common_logo_image_"+ location.hostname);
-    },
-    routeName() {
-      return this.$route.name;
-    },
-    updateVertionIng() {
-      return this.$store.state.common && this.$store.state.common.updateVertionStatus;
-    },
-    chainId() {
-      return this.$store.state.chainId;
-    },
-    isLocked() {
-      return this.$store.getters.isLocked;
-    },
-    // walletAccount() {
-    //     return this.walletData && this.walletData.getAddress()
-    // },
-    chainIcon() {
-      const networkDetail = this.$store.getters.filterNetworkItem(
-        this.chainId,
-        "L1"
-      );
-      return networkDetail.networkLogo;
-    },
-    account() {
-      return this.$store.getters.account || '';
-    },
-    beBindWallet() {
-      return this.$store.state.be_bind_wallet_connect;
-    },
-    userMenus() {
-      return this.$store.state.navigation.user;
-    },
-    walletNetworks() {
-      return this.$store.getters.walletNetworks;
-    },
-    walletIcon() {
-      return this.$store.getters.walletIcon || '';
-    },
-    isBasic() {
-      return this.$store.state.siteConfig.tradeMoel == 'Basic';
-    },
-    headerTheme() {
-        return this.$route.name == 'home' ? 'light' : this.themeMode
-    }
-  },
-  watch: {
-    isShowCurrency(val) {
-      console.log("isShowCurrency", val);
-      if (!val) {
-        clearTimeout(this.currencyTime);
-      }
-    },
-    "$store.state.wallet.wallet": {
-      handler: function (wallet) {
-        this.walletlistenerFunc(wallet);
-      },
-      deep: true,
-    },
-    "$store.state.user.userInfo.uid"(val) {
-      this.initActiveUser();
-      if (val && val.length && typeof val != "undefined") {
-        this.walletName = val;
-        this.activeAccount = this.walletAccount =
-          val.slice(0, 4) + "******" + val.slice(-4, val.length);
-        // this.initMess()
-      } else {
-        let syncWallet = this.walletData.getSyncWallet();
-        if (!syncWallet) {
-          this.activeUser = false;
-          this.walletName = "";
-          this.walletAccount = this.activeAccount.length
-            ? this.activeAccount
-            : "";
-        }
-      }
-    },
-  },
-  data() {
-    return {
-      urlTips: {
-        title: this.$t("common_base_gothird_url_tips_title"),
-        show: false,
-        content: this.$t("common_base_gothird_url_tips_content"),
-        url: "",
-        btnText: this.$t("common_base_gothird_url_btn_text"),
-      },
-      active: false,
-      show: true,
-      isShowUserPanel: true,
-      isShowCurrency: true,
-      currencyRole: "currency",
-      currencyTime: null,
-      left: "",
-      rightR: "360",
-      noticeNum: 9,
-      noticeDetail: false,
-      confirmation: false,
-      showNotice: false,
-      noticeTimeer: null,
-      unreadCount: 0,
-      msgPage: {
-        pageSize: 5,
-        pageNum: 1,
-      },
-      msgList: [],
-      msgIndex: 0,
-      msgDetail: {},
-      hasNoMsg: false,
-      sitePath: conf.sitePath,
-      siteLogo: conf.siteLogo,
-      lang: "",
-      language: localStorage.getItem("language") || conf.baseLanguage,
-      showMobi: false,
-      showMobiBtn: false,
-      activeAccount: "",
-      activeUser: false,
-      info: {},
-      mbopSrc: "",
-      mobiSrc: "",
-      userCenter: isUserCenter(),
-      walletName: "",
-      walletAccount: "",
-      walletActive: false,
-      styleConf: {
-        up: {
-          color: '#000000'
-        },
-      }
-    };
-  },
-  created() {
-    let fn = this.init();
-    window.addEventListener("scroll", fn);
-    this.msgList = [];
-    // if (this.userInfo.id) {
-    //     this.initMess()
-    // }
-  },
-  mounted() {
-    // refresh event
-    this.$nextTick(() => {
-      $Vue.$bus.$on("refresh", (events) => {
-        events.map((type) => {
-          switch (type) {
-            case "initActiveUser":
-              this.initActiveUser();
-              break;
-            default:
-              break;
-          }
-        });
-      });
-    });
-    this.walletlistenerFunc();
-  },
-  methods: {
-    /**
-     * @description 距离顶部${scrollTop} 设置active
-     * @param {*}
-     * @return {*}
-     */
-    init() {
-      return _.throttle(() => {
-        let scrollT = window.scrollY;
-        if (scrollT >= this.scrollTop) {
-          this.active = true;
-        } else {
-          this.active = false;
-        }
-      }, 50);
-    },
-    async initActiveUser() {
-      let activeUser =
-        (this.userInfo &&
-          this.userInfo.uid &&
-          this.userInfo.uid.length) ||
-        0;
-      let token = localStorage.getItem("TOKEN");
-      let syncWallet = this.walletData.getSyncWallet();
-      let walletActive = (syncWallet && Object.keys(syncWallet).length) || false;
-      if (!this.beBindWallet) {
-        this.activeUser = activeUser;
-      } else {
-        this.activeUser = activeUser && walletActive && token;
-      }
-    },
-    async testLogin() {
-      let account = localStorage.getItem("walletconnect_self");
-      let walletAccount = this.account || ""; //this.walletData.getAddress() || "";
-      if (account && account != walletAccount) {
-        $Vue.$bus.$emit("linkLogin", {
-          type: "clearWallet",
-        });
-      }
-    },
-    walletlistenerFunc(wallet) {
-      wallet = wallet || this.$store.state.wallet.wallet;
-      let walletName = (this.beBindWallet && wallet.address || this.account) || "";
-      if (walletName && walletName.length) {
-        this.walletAccount = this.activeAccount = this.walletName =
-          walletName.slice(0, 4) +
-          "******" +
-          walletName.slice(-4, walletName.length);
-      } else {
-        this.walletName = "";
-      }
-      this.$store.dispatch("getCommonTokenList").then((result) => {
-        let symbolCoins = this.$store.getters["commonTokenDetail"](
-          "MOBI", "0"
-        );
-        if (Object.keys(symbolCoins).length) {
-          this.showMobiBtn = true;
-          // this.breakdown()
-        }
-      }).catch(e => e);
-      this.initActiveUser();
-    },
-    setLang(lang) {
-      this.lang = lang;
-      this.language = localStorage.getItem("language");
-    },
-    getHoverAttr(type) {
-      let site_type = this.active ? "down" : "up";
-      let dealObj = Object.keys(this.styleConf).length
-        ? this.styleConf
-        : this.commonHeader;
-      let hover =
-        (dealObj && dealObj[site_type] && dealObj[site_type].hover) ||
-        {};
-      return hover[type] || "";
-    },
-    getStyleAttrs(type) {
-      let dealObj = Object.keys(this.styleConf).length
-        ? this.styleConf
-        : this.commonHeader;
-      return this.active
-        ? (dealObj && dealObj.down && dealObj.down[type]) || ""
-        : (dealObj && dealObj.up && dealObj.up[type]) || "";
-    },
-    getStyleSetAttrs(arr) {
-      let temp = {};
-      arr.map((v) => {
-        temp[v] = this.getStyleAttrs(v);
-      });
-      return temp;
-    },
-    dealUrl(item) {
-      if (item.child && item.child.length) return;
-      switch (item.bar_name) {
-        // case 'API':
-        //     this.goApi()
-        //     break;
-        case "history":
-          this.$router.push({
-            path: "/trade/history",
-          });
-          break;
-        default:
-          if (item.click_url.indexOf("http") >= 0) {
-            if (item.bar_name !== "Faucet") {
-              window.open(item.click_url, "_blank");
-            } else {
-              this.urlTips.show = true;
-              this.urlTips.url = item.click_url;
-            }
-          } else {
-            if (this.isBasic && item.click_url.includes('/trade?')) {
-              item.click_url = item.click_url.replace('/trade', '/trade/spot/swap');
-            }
-            this.$router.push({
-              path: item.click_url,
-            });
-          }
-          break;
-      }
-    },
-    gouThirdUrl(url) {
-      if (url) {
-        window.open(this.urlTips.url, "_blank");
-      }
-      this.urlTips.show = false;
-    },
-    goOrderUrl(type) {
-      // debugger
-      let tradeMode = this.$store.state.trade.tradeMode || 'spot';
-      let tradeChainId = this.$store.state.trade.tradeChainId || '';
-      this.$router.push({
-        path: `/order/history/${tradeMode}`,
-        query: {
-          type: type,
-          chainId: tradeChainId
-        },
-      });
-    },
-    goApi() {
-      let url = this.$t("site_common_api_doc_url");
-      if (url != "site_common_api_doc_url") {
-        window.open("https://mysoftlife.github.io/", "_target");
-      } else {
-        window.open(url, "_target");
-      }
-    },
-    initMess() {
-      let token = localStorage.getItem("TOKEN");
-      if (!token) return;
-      this.getUnreadCountFunc();
-      clearTimeout(this.noticeTimeer);
-      this.noticeTimeer = setTimeout(() => {
-        this.getUnreadCountFunc();
-      }, conf.noticeRefresh);
-
-      // register msg read
-      $Vue.$bus.$on("setRead", (idArrs) => {
-        if (idArrs.length) {
-          this.msgList.map((v) => {
-            if (v.unread && idArrs.indexOf(v.id) != "-1") {
-              v.unread = false;
-              this.unreadCount--;
-              this.unreadCount =
-                this.unreadCount < 0 ? 0 : this.unreadCount;
-            }
-          });
-        }
-      });
-    },
-    showNoticeToast() {
-      this.$Message.warning({
-        render: (h) => {
-          let that = this;
-          return h(
-            "span",
-            {
-              style: {
-                fontSize: "16px",
-                fontFamily: "Font",
-                fontWeight: 400,
-                color: "var(--text-color)",
-                lineHeight: "22px",
-              },
-            },
-            [
-              that.$t("notification_notifications_new_message") +
-              ".",
-              h(
-                "a",
-                {
-                  style: {
-                    marginLeft: "30px",
-                    color: "rgba(22,82,240,1)",
-                  },
-                  on: {
-                    click: () => {
-                      let routeName = this.$route.name;
-                      if (routeName == "notice") {
-                        // this.$parent.getMessageFunc(1, 5)
-                        $Vue.$bus.$emit(
-                          "noticeRefresh"
-                        );
-                      } else {
-                        this.msgPage.pageNum = 1;
-                        this.msgPage.pageSize = 5;
-                        this.getMessageFunc(
-                          1,
-                          5,
-                          this.noticeDetail
-                        );
-                      }
-                      this.$Message.destroy();
-                    },
-                  },
-                },
-                that.$t("notification_notifications_refresh")
-              ),
-            ]
-          );
-        },
-        duration: 0,
-      });
-    },
-    breakdown() {
-      if (
-        this.$store.state.user.currency &&
-        !Object.keys(this.info).length
-      ) {
-        breakdown({
-          currency_symbol:
-            this.$store.state.user.currency.symbol || "$",
-          currency_name:
-            this.$store.state.user.currency.name ||
-            'USD',
-        }).then((res) => {
-          this.info = res.data;
-          let mbopCoins = this.$store.getters["commonTokenDetail"](
-            res.data.platform_coin_symbol, "0"
-          );
-          this.mbopSrc = mbopCoins.icon_url || "";
-          let mobiCoins = this.$store.getters["commonTokenDetail"](
-            res.data.dividend_coin_symbol, "0"
-          );
-          this.mobiSrc = mobiCoins.icon_url || "";
-        }).catch(e => e);
-      }
-    },
-    showNoticeFunc(val) {
-      this.showNotice = Boolean(val);
-    },
-    getUnreadCountFunc() {
-      getUnreadCount()
-        .then((res) => {
-          if (res.data.code == 200) {
-            if (this.unreadCount != res.data.data) {
-              if (this.showNotice) {
-                this.showNoticeToast();
-              } else if (!this.noticeDetail && res.data.data) {
-                this.msgPage.pageNum = 1;
-                this.msgPage.pageSize = 5;
-                this.getMessageFunc(1, 5);
-              }
-              this.unreadCount = res.data.data;
-            } else if (!this.unreadCount) {
-              this.getMessageFunc(1, 5);
-            }
-          }
-        })
-        .catch((err) => {
-          clearTimeout(this.noticeTimeer);
-        });
-    },
-    getMessageFunc(pageNum, pageSize, isCheckNext) {
-      getMessage({page_number: pageNum, page_size: pageSize}).then(
-        (res) => {
-          let result = res.data;
-          if (result.code == 200) {
-            let msgList = Object.assign(
-              [],
-              result.data && result.data.message_list
-            );
-            msgList.map((v) => {
-              v.content = v.content.replace(
-                /((?:http:\/\/)(.*?)\/)(.*)/g,
-                function (a, b, c, d) {
-                  let host = window.location.origin + "/";
-                  if (a.indexOf("#") === -1) {
-                    host += "#/";
-                  }
-                  let url = a
-                    .slice(0, a.length - 1)
-                    .replace(b, host);
-                  return `<a href='${url}'>${url}</a>`;
-                }
-              );
-            });
-            if (isCheckNext) {
-              if (msgList.length) {
-                this.hasNoMsg = false;
-                this.msgList = msgList;
-                this.msgIndex = 0;
-                this.msgDetail = Object.assign(
-                  {},
-                  this.msgDetail,
-                  this.msgList[this.msgIndex]
-                );
-                this.msgDetail.content.replace(
-                  /((?:http:\/\/)(.*?)\/)(.*)/g,
-                  function (a, b, c, d) {
-                    let host = window.location.origin + "/";
-                    if (a.indexOf("#") === -1) {
-                      host += "#/";
-                    }
-                    let url = a
-                      .slice(0, a.length - 1)
-                      .replace(b, host);
-                    return `<a href='${url}'>${url}</a>`;
-                  }
-                );
-              } else {
-                this.hasNoMsg = true;
-              }
-            } else {
-              this.msgList = msgList;
-              this.hasNoMsg = false;
-            }
-          }
-        }
-      ).catch(e => e);
-    },
-    readAll(judge) {
-      if (!judge) {
-        this.confirmation = true;
-      } else {
-        this.confirmation = false;
-        setRead().then((res) => {
-          if (res.data.code == 200) {
-            let idarrs = this.msgList.map((v) => {
-              v.unread = false;
-              return v.id;
-            });
-            this.unreadCount -= this.msgList.length;
-            this.unreadCount =
-              this.unreadCount < 0 ? 0 : this.unreadCount;
-            $Vue.$bus.$emit("noticeCenter", idarrs);
-            $Vue.$bus.$on("setRead", idarrs);
-          }
-        }).catch(e => e);
-      }
-    },
-    setItemRead(item) {
-      let id = item.id;
-      let routeName = this.$route.name;
-      if (item.unread) {
-        setReadById({id: id}).then((res) => {
-          let editItem = {};
-          this.msgList.map((v, i) => {
-            if (v.id === id) {
-              v.unread = false;
-              this.unreadCount--;
-              this.unreadCount =
-                this.unreadCount < 0 ? 0 : this.unreadCount;
-              editItem = v;
-              if (routeName != "notice") {
-                this.msgList.splice(i, 1);
-              }
-              $Vue.$bus.$emit("noticeCenter", [v.id]);
-            }
-          });
-          if (routeName != "notice") {
-            this.msgList.unshift(editItem);
-            this.msgIndex = 0;
-            this.msgDetail = Object.assign(
-              {},
-              this.msgList[this.msgIndex]
-            );
-            this.noticeDetail = true;
-          }
-          this.showNotice = false;
-          $Vue.$bus.$on("setRead", [id]);
-        }).catch(e => e);
-      } else {
-        let editItem = {};
-        this.msgList.map((v, i) => {
-          if (v.id === id) {
-            editItem = v;
-            if (routeName != "notice") {
-              this.msgList.splice(i, 1);
-            }
-          }
-        });
-        if (routeName != "notice") {
-          this.msgList.unshift(editItem);
-          this.msgIndex = 0;
-          this.msgDetail = Object.assign(
-            {},
-            this.msgList[this.msgIndex]
-          );
-          this.noticeDetail = true;
-        }
-      }
-    },
-    checkNext() {
-      if (!this.msgList.length) return;
-      if (this.msgIndex < this.msgList.length - 1) {
-        this.hasNoMsg = false;
-        this.msgDetail = Object.assign(
-          {},
-          this.msgList[++this.msgIndex]
-        );
-        let id = this.msgDetail.id;
-        if (this.msgDetail.unread) {
-          setReadById({id: id}).then((res) => {
-            let editItem = {};
-            this.msgList.map((v, i) => {
-              if (v.id === id) {
-                v.unread = false;
-                this.unreadCount--;
-                this.unreadCount =
-                  this.unreadCount < 0 ? 0 : this.unreadCount;
-                $Vue.$bus.$emit("noticeCenter", [v.id]);
-              }
-            });
-          }).catch(e => e);
-        }
-      } else {
-        this.msgPage.pageNum++;
-        this.getMessageFunc(this.msgPage.pageNum, 5, true);
-      }
-    },
-    setCurrencyFunc() {
-      clearTimeout(this.currencyTime);
-      this.currencyTime = setTimeout(() => {
-        this.isShowCurrency = true;
-      }, 1000);
-    },
-    getStarted() {
-      localStorage.setItem("loginType", "1");
-      this.$router.push({
-        path: "/user/register",
-      });
-    },
-    login(type) {
-      if (this.userCenter) {
-        this.$router.push({
-          path: "/user/login",
-        });
-      } else {
-        $Vue.$bus.$emit("linkWalletByConnetBtn");
-      }
-    },
-    closeMobi() {
-      this.showMobi = false;
-    },
-    showMobiInfo() {
-      this.showMobi = true;
-      this.breakdown();
-    },
-    goWhite() {
-      this.$router.push({
-        path: "/cms/announcement/announcement?type=WHITE_PAPER",
-      });
-    },
-    goPerpetual() {
-      this.$router.push({
-        path: "/trade/perpetual",
-      });
-    },
-    goHome() {
-      this.$router.push({
-        path: "/",
-      });
-    },
-    async changeChain(chainId) {
-      this.$store.commit("setChainId", chainId);
-    }
-  },
-};
-</script>
-<style lang="less" scoped>
-.header-wrapper {
-  position: relative;
-  height: 80px;
-
-  .top-left-img {
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-}
-
-.mobi-info {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 9999999;
-  width: 100vw;
-  height: 100vh;
-  overflow: hidden;
-  background: rgba(0, 0, 0, 0.8);
-
-  .mobi-content {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 450px;
-    height: 457px;
-    background: url("../../../assets/img/mobi-bg.png") 0 0 no-repeat;
-    background-size: contain;
-    padding: 20px;
-
-    .mobi-title {
-      font-size: 16px;
-      font-family: Font;
-
-      text-align: left;
-      color: #ffffff;
-      line-height: 16px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      .icon {
-        width: 20px;
-        height: 20px;
-      }
-    }
-
-    .platform {
-      padding-bottom: 28px;
-
-      div {
-        margin-top: 15px;
-        font-size: 16px;
-        font-family: Font;
-
-        text-align: left;
-        color: #ffffff;
-        line-height: 16px;
-        display: flex;
-        justify-content: space-between;
-      }
-
-      .platform-title {
-        display: flex;
-        align-items: center;
-
-        img {
-          margin-right: 11px;
-          width: 36px;
-          height: 36px;
-          display: flex;
-          align-items: center;
-        }
-      }
-    }
-
-    .platform.bottom {
-      border-bottom: 1px solid rgba(255, 255, 255, 0.12);
-    }
-
-    .uni {
-      font-size: 16px;
-      font-family: Font;
-
-      text-decoration: underline;
-      text-align: left;
-      color: var(--primary-color);
-      line-height: 16px;
-    }
-  }
-}
-
-.header-nav {
-  position: absolute;
-  // width: 100vw;
-  z-index: 1000;
-  box-sizing: border-box;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 80px;
-  display: flex;
-  align-items: center;
-  background-color: var(--header-bg-color);
-  color: var(--text-color);
-
-  .contentWidth {
-    z-index: 2;
-    // .heartWidth;
-    width: 100%;
-    // max-width: 1250px;
-    // margin-left: auto;
-    // margin-right: auto;
-    flex: auto;
-    padding: 0 14px;
-    display: flex;
-    align-items: center;
-    flex-wrap: nowrap;
-    justify-content: space-between;
-  }
-
-  .logo {
-    min-width: 132px;
-    height: 20px;
-    font-size: 0;
-    cursor: pointer;
-    margin-top: -2px;
-
-    .imgsvg {
-      width: auto;
-      height: 20px;
-      color: white;
-    }
-
-    .imgsvgactive {
-      filter: invert(1);
-    }
-
-    .origin-img {
-      display: none;
-    }
-  }
-
-  .nav,
-  .right-tool {
-    font-size: 14px;
-    font-family: Font;
-    //
-    text-align: left;
-    letter-spacing: 0px;
-    display: flex;
-    align-items: center;
-    margin-left: 15 rpx;
-
-    .my-portfolio {
-      margin-right: 12px;
-    }
-
-    li {
-      position: relative;
-      margin-left: 26px;
-      white-space: nowrap;
-      cursor: pointer;
-
-      .wallet-more-box {
-        display: none;
-        position: absolute;
-        top: 36px;
-        left: 0;
-        min-width: 160px;
-        min-height: 120px;
-
-        /deep/ .portfolio {
-          ul {
-            background: var(--popup-bg);
-            border-radius: var(--border-radius-base);
-            box-shadow: var(--box-shadow-base);
-
-            li {
-              margin: 0px;
-              height: 48px;
-              line-height: 48px;
-              font-size: 16px;
-              color: var(--text-color);
-              white-space: nowrap;
-
-              &:hover {
-                color: var(--link-color);
-                background-color: var(--select-item-bg);
-              }
-            }
-          }
-        }
-      }
-
-      .wallet-more {
-        position: absolute;
-        z-index: 2;
-        top: 0;
-        left: 0;
-        min-width: 160px;
-        background: var(--popup-bg);
-        // border: 1px solid var(--border-color-base);
-        border-radius: var(--border-radius-base);
-        overflow: hidden;
-        box-shadow: var(--box-shadow-base);
-
-        .wallet-title {
-          height: 48px;
-          line-height: 48px;
-          padding: 0 16px;
-          font-size: 16px;
-          font-family: Font;
-        }
-
-        .wallet-title:hover {
-          // background: var(--card-bg-color);
-          // // color: var(--primary-color);
-          // color: var(--link-color);
-          background-color: var(--select-item-bg);
-          color: var(--link-color);
-        }
-
-        .wallet-subtitle {
-          margin-top: 8px;
-          font-size: 12px;
-          // font-weight:400px;
-          color: #909599;
-          font-family: FontMedium;
-        }
-      }
-
-      .wallet-more-box-first {
-        top: 10px;
-
-        .wallet-more {
-          top: 32px;
-        }
-      }
-
-      .wallet-more-box:hover {
-        display: block;
-      }
-
-      .download {
-        width: 16px;
-      }
-
-      .li-img-2 {
-        width: 20px;
-        height: 20px;
-        // margin-left: 4px;
-        vertical-align: -5px;
-        transition: all 0.5s;
-      }
-
-      .li-img {
-        width: 20px;
-        height: 20px;
-        margin-left: 2px;
-        cursor: pointer;
-      }
-
-      /deep/ .li-img {
-        width: 20px;
-        height: 20px;
-        margin-left: 2px;
-      }
-
-      .li-img-head {
-        height: 30px;
-        width: 30px;
-        border-radius: 50%;
-      }
-    }
-
-    li.wallet-order {
-      height: 36px;
-      line-height: 36px;
-      margin-right: 20px;
-
-      .menu-text {
-        display: flex;
-        white-space: nowrap;
-        align-items: center;
-      }
-
-      .wallet-more-box {
-        transform: translateX(0);
-      }
-
-      .nav-text {
-        height: 46px;
-        line-height: 46px;
-      }
-    }
-
-    li.mobi {
-      img {
-        width: 56px;
-        height: 34px;
-      }
-    }
-
-    li.walletconnect {
-      min-width: 131px;
-      height: 36px;
-      padding: 0 6px;
-      border: 1px solid transparent;
-      opacity: 1;
-      background: var(--primary-bg-color);
-      border-radius: 6px;
-      line-height: 36px;
-      text-align: center;
-      font-size: 14px;
-      font-family: FontMedium;
-      color: #ffffff;
-    }
-
-    li.walletconnect:hover {
-      color: var(--primary-color);
-      border: 1px solid var(--primary-color);
-      background: #ffffff;
-    }
-
-    li.walletconnectActive {
-      color: var(--primary-color);
-      border: 1px solid var(--primary-color);
-      background: #ffffff;
-
-      &:hover {
-        color: #ffffff !important;
-        background: var(--primary-bg-color);
-      }
-    }
-
-    .userPannel-li {
-      position: relative;
-
-      .userPannel {
-        display: none;
-        position: absolute;
-        top: 30px;
-        left: 15px;
-        z-index: 2;
-        width: 200px;
-        height: 500px;
-        transform: translateX(-50%);
-      }
-
-      .userPannel:hover {
-        display: block;
-      }
-    }
-
-    .userPannel-li:hover {
-      .userPannel {
-        display: block;
-      }
-    }
-
-    .download-li {
-      position: relative;
-      z-index: 2;
-
-      .li-message {
-        position: relative;
-        width: 20px;
-        height: 20px;
-
-        .li-message-dot {
-          position: absolute;
-          z-index: 2;
-          top: 0;
-          right: 0;
-          transform: translateX(50%) translateY(-50%);
-          padding: 0 4px;
-          line-height: 16px;
-          text-align: center;
-          background: #ff3b30;
-          border-radius: 16px;
-          color: white;
-          font-size: 12px;
-        }
-
-        .li-message-box {
-          display: block;
-          position: absolute;
-          left: 0;
-          top: 20px;
-          padding-top: 22px;
-          width: 380px;
-          transform: translateX(-50%);
-        }
-      }
-
-      .li-message:hover {
-        .li-message-box {
-          display: block;
-        }
-      }
-    }
-
-    .wallet:hover {
-      .wallet-more-box {
-        display: block;
-      }
-
-      .li-img-2 {
-        transform: rotate(180deg);
-        // color: var(--primary-color);
-      }
-    }
-
-    li.getstarted {
-      width: 108px;
-      height: 36px;
-      line-height: 36px;
-      margin-left: 16 rpx;
-      border-radius: 6px;
-      border: 1px solid var(--border-color-base);
-      color: var(--border-color-base);
-      text-align: center;
-    }
-
-    li.englishUSD {
-      height: 36px;
-      line-height: 36px;
-      border-radius: 6px;
-      position: relative;
-      font-size: 14px;
-      // color: var(--border-color-base);
-      border: 1px solid var(--primary-color);
-      padding: 0 10px;
-
-      img {
-        width: 8px;
-        vertical-align: 2px;
-        margin-left: 2px;
-      }
-
-      .currencyBox {
-        display: none;
-        // display: block;
-        position: absolute;
-        top: 20px;
-        right: 0;
-        width: 160px;
-        height: 450px;
-      }
-
-      .currencyBox:hover {
-        display: block;
-      }
-    }
-
-    li.englishUSD:hover {
-      .currencyBox {
-        display: block;
-      }
-
-      .li-img-2 {
-        transform: rotate(180deg);
-      }
-    }
-
-    li.getstarted:hover {
-      background: var(--primary-bg-color);
-      color: var(--border-color-base);
-      border-color: var(--primary-color);
-    }
-  }
-
-  .nav {
-    margin-left: 60px;
-    // & .chain-li {
-    // 	margin-left: 0;
-    //     /deep/ .coin-select {
-    //         .select {
-    //             span, .icon-down {
-    //                 color: var(--primary-color);
-    //             }
-    //         }
-    //         .drop-down {
-    //             background: white;
-    //             padding: 0px 6px;
-    //             ul li span {
-    //                 color:  var(--primary-color);
-    //             }
-    //         }
-    //     }
-    //     /deep/ .header-network-select .network-select {
-    //         border: 0;
-    //         .select {
-    //             background: transparent;
-    //             .coin-name {
-    //                 color: var(--primary-color);
-    //             }
-    //             .drop-down {
-    //                 background: transparent;
-    //                 padding: 40px 0 0 0;
-    //                 z-index: 2;
-    //                 ul li span {
-    //                     color:  var(--primary-color);
-    //                 }
-    //             }
-    //         }
-    //         span, .icon-down {
-    //             color: var(--primary-color);
-    //         }
-    //     }
-    // }
-  }
-
-  .right-tool {
-    /deep/ .header-network-select .select {
-      border-color: #222734;
-    }
-  }
-
-  .nav li:hover span,
-  .right-tool li:hover span,
-  .nav-a a:hover {
-    color: var(--link-color);
-    z-index: 99;
-  }
-
-  .user-account {
-    // opacity: .8;
-    padding: 0px 2px 0px 10px;
-    border: 1px solid var(--primary-color);
-    border-radius: 7px;
-    display: flex;
-    align-items: center;
-    color: var(--border-color-base);
-    background: var(--primary-bg-color);
-
-    img,
-    /deep/ svg {
-      width: 24px;
-      height: 24px;
-      margin-right: 8px;
-    }
-
-    .li-img-2 {
-      color: white !important;
-    }
-  }
-
-  .nav-a a:hover .user-account {
-    border: 1px solid rgba(251, 251, 252, 0.15);
-  }
-
-  .wallet-no {
-    filter: hue-rotate(148deg);
-    color: #0089ff;
-
-    img {
-      filter: hue-rotate(206deg);
-    }
-
-    .walletWrong {
-      background: blue;
-      border-radius: 50%;
-    }
-
-    .walletLock {
-      filter: hue-rotate(242deg);
-      margin-left: 0.2em;
-    }
-  }
-
-  .right-tool {
-    margin-left: auto;
-
-    li {
-      margin-left: 10px;
-    }
-  }
-
-  .right-tool-login {
-    li {
-      margin-left: 10px;
-    }
-  }
-
-  /deep/ .wallet-more-box .user-p-item a {
-    &.active, &:hover {
-      color: var(--link-color);
-    }
-
-  }
-
-  /deep/ .currencyBox .current-item {
-    &.active, &:hover {
-      color: var(--link-color);
-    }
-  }
-
-
-  /deep/ .cms-network-select .select {
-    padding: 6px 12px;
-    height: 36px;
-  }
-
-
-  // theme-icon
-  .theme-icons {
-    display: flex;
-    align-items: center;
-    margin-left: 10px;
-  }
-
-  .theme-icon {
-    // 24px
-    width: 20px;
-    height: 20px;
-    // padding: 10px;
-  }
-}
-
-.dex-page-home {
-  .header-nav {
-    // background: linear-gradient(162.86deg, transparent 28.62%, rgba(255, 255, 255, 0.78) 74.76%, rgba(255, 255, 255, 0) 124.71%);
-    background: linear-gradient(270deg, #FFFFFF 0.45%, rgba(255, 255, 255, 0.14) 47.63%, rgba(255, 255, 255, 0.95) 89.63%);
-    backdrop-filter: blur(2px);
-  }
-}
-
-.header-nav.active {
-  position: fixed;
-  top: -100px;
-  transform: translateY(100px);
-  z-index: 999;
-  // background: #ffffff;
-  box-shadow: 0px 2px 4px 0px rgba(193, 193, 193, 0.5);
-  transition: transform 0.3s ease;
-
-  .nav {
-    margin-left: 58px;
-  }
-
-  .nav,
-  .right-tool,
-  .right-tool-login {
-    color: var(--text-color);
-  }
-
-  .nav li:hover,
-  .right-tool li:hover,
-  .nav-a a:hover,
-  .logo .imgsvg {
-    color: var(--primary-color);
-  }
-
-  .nav-a a {
-    color: var(--text-color);
-  }
-
-  .right-tool /deep/ .li-img {
-    width: 20px;
-    height: 20px;
-    margin-left: 2px;
-    // color: var(--text-color) !important;
-    // filter: invert(1);
-  }
-
-  li.getstarted {
-    background: var(--primary-bg-color);
-    color: #ffffff;
-    border: 1px solid var(--primary-color);
-  }
-
-  li.getstarted:hover {
-    background: #1349d7;
-    color: var(--border-color-base);
-    border-color: #1349d7;
-  }
-}
-
-//  .trade-home .header-wrapper {
-//     height: 70px;
-//  }
-
-//  .trade-home .theme-dark {
-// 	.right-tool{
-// 		/deep/ .header-network-select {
-// 			.select {
-// 				border-color: #222734;
-// 				span,
-// 				.icon-down {
-// 					color: var(--white);
-// 				}
-// 			}
-
-// 			.drop-down {
-// 				background: #222734;
-// 				color: var(--white);
-// 				ul {
-// 					li:hover {
-// 						background-color: rgba(255, 255, 255, 0.04);
-// 					}
-// 					li.active {
-// 						color: var(--white);
-// 					}
-// 				}
-// 			}
-// 		}
-
-// 		.wallet-more {
-// 			color: #151723;
-// 		}
-// 	}
-// }
-
-.trade-home .theme-dark {
-  .logo {
-    .imgsvg {
-      filter: invert(1);
-    }
-
-    .origin-img {
-      display: block;
-      margin-top: -36px;
-      width: 36px;
-      overflow: hidden;
-
-      .imgsvg {
-        filter: invert(0);
-      }
-    }
-  }
-}
-
-
-.marl18 {
-  margin-left: 18px;
-}
-
-.notice-gray {
-  opacity: 0.6;
-}
-
-.notice-detail {
-  width: 520px;
-  height: 280px;
-  margin-top: -20px;
-}
-
-.notice-viewall {
-  display: flex;
-  align-items: center;
-  color: var(--primary-color);
-  cursor: pointer;
-
-  .notice-arrow {
-    width: 16px;
-    height: 16px;
-    margin-left: 4px;
-    color: var(--primary-color);
-  }
-}
-
-.title-box {
-  display: flex;
-  height: 56px;
-  justify-content: space-between;
-  align-items: center;
-  font-size: 16px;
-  font-family: FontMedium;
-
-  color: var(--text-color);
-  border-bottom: 1px solid #f5f6fa;
-}
-
-.content {
-  height: 168px;
-  overflow-y: auto;
-  overflow-x: hidden;
-  font-family: Font;
-
-  .title {
-    margin-top: 20px;
-    height: 16px;
-    line-height: 16px;
-    font-size: 16px;
-    color: var(--text-color);
-  }
-
-  .detail {
-    margin-top: 16px;
-    font-size: 14px;
-    line-height: 22px;
-    color: var(--text-color-placeholder);
-    text-align: left;
-  }
-
-  .title {
-    font-size: 12px;
-    font-family: Font;
-
-    text-align: left;
-    color: #708599;
-    line-height: 12px;
-  }
-}
-
-.btn-box {
-  height: 76px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-top: 1px solid #f5f6fa;
-
-  .btn {
-    width: 280px;
-    height: 36px;
-    background: var(--primary-bg-color);
-    border-radius: 6px;
-    line-height: 36px;
-    text-align: center;
-    color: #ffffff;
-    font-size: 14px;
-  }
-}
-
-.confirmation-content {
-  width: 400px;
-  height: 120px;
-
-  .confirmation-desc {
-    margin: 40px 0 50px 0;
-    font-size: 18px;
-    color: var(--text-color-secondary);
-    height: 18px;
-    line-height: 18px;
-    text-align: left;
-  }
-
-  .conf-btns {
-    display: flex;
-    justify-content: space-between;
-
-    button {
-      width: 190px;
-      height: 48px;
-      line-height: 48px;
-      border-radius: 6px;
-      text-align: center;
-      font-size: 16px;
-      font-family: Font;
-
-      color: #ffffff;
-    }
-
-    .cancel {
-      background: #c0c3cc;
-    }
-
-    .sure {
-      background: var(--primary-bg-color);
-    }
-  }
-}
-
-.float-r {
-  float: right;
-}
-
-@media screen and (max-width: 1280px) {
-  .header-nav {
-    .contentWidth {
-      padding: 20px;
-    }
-
-    .nav {
-      margin-left: 38px;
-
-      li.wallet-order {
-        margin-left: 25px;
-      }
-    }
-
-    .right-tool-login li {
-      margin-left: 20px;
-    }
-  }
-}
-</style>