udxcms 1.0.1

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

@@ -0,0 +1,1967 @@
+<!--
+ * @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>