udxcms 1.0.9 → 1.0.10

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

@@ -1,1821 +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">
-		<div
-			:class="{ 'header-nav': true, active: active }"
-			v-theme="{ background: getStyleAttrs('background') }"
-		>
-			<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="logoSrc + '/' + language + '/w72.png'" class="imgsvg"
-							v-theme="{ height: (styleConf && styleConf.conf && styleConf.conf.logoHeight) || commonConf.logoHeight}"
-						/>
-						<!-- <img :src="logoSrc + '/' + language +'/w72.png'" class='imgsvg'  v-theme="{height: styleConf && styleConf.conf && styleConf.conf.logoHeight || commonConf.logoHeight}" v-show='!active'/>
-                        <img :src="logoSrc + '/' + language + '/b72.png'" :class="['imgsvg', {'imgsvgactive': routeName != 'home'}]" v-theme="{height: styleConf && styleConf.conf && styleConf.conf.logoHeight || commonConf.logoHeight}" v-show='active'/> -->
-					</div>
-					<ul class="nav" v-show="showMiddleInfo">
-						<!-- <li class="chain-li">
-							<ChainNetWork />
-						</li> -->
-						<li
-							class="li wallet wallet-order"
-							v-for="(item, index) in navList"
-							:key="index"
-							@click="dealUrl(item)"
-							v-hover="{
-								color: getHoverAttr('color'),
-								oldColor: getStyleAttrs('color'),
-							}"
-							v-theme="getStyleSetAttrs(['color', 'fontWeight'])"
-						>
-							<span>
-								{{ item.bar_name }}
-								<svg-icon
-									className="li-img-2"
-									icon-class="arrow-down-w"
-									v-if="item.child.length"
-								></svg-icon>
-							</span>
-							<div
-								class="wallet-more-box"
-								v-if="item.child.length"
-							>
-								<div class="wallet-more">
-									<div
-										class="wallet-title"
-										v-for="(innerItem, innerIndex) in item.child"
-										:key="innerIndex"
-										@click="dealUrl(innerItem)"
-									>
-										{{ innerItem.bar_name }}
-									</div>
-								</div>
-							</div>
-						</li>
-                        <!-- <li class='li wallet wallet-order'>
-                            <span>
-                                Derivate
-                                <svg-icon
-                                    className="li-img-2"
-                                    icon-class="arrow-down-w"
-                                ></svg-icon>
-                            </span>
-                            <div class="wallet-more-box">
-                                <div class="wallet-more">
-                                    <div class="wallet-title" @click="goPerpetual">USDT Perpetual</div>
-                                </div>
-                            </div>
-                        </li> -->
-					</ul>
-				</div>
-				<div class="flex">
-					<ul class="right-tool" v-if="!walletName.length">
-						<li v-show="!isCentral"><HeaderNetworkSelect mode="black" /></li>
-                        <li v-show="isCentral" class="download-li" @click="goLogin">
-                            <span v-hover="{color: getHoverAttr('color'), oldColor: getStyleAttrs('color')}" v-theme="{color: getStyleAttrs('color')}">{{$t("user_common_log_in")}}</span>
-                        </li>
-                        <li v-show="isCentral" class="getstarted download-li" @click="goStarted" v-hover="{color: 'white'}" v-theme="{borderColor: getStyleAttrs('color')}">
-                            <span v-theme="{color: getStyleAttrs('color'), borderColor: getStyleAttrs('color')}">{{$t("index_header_menu_get_started")}}</span>
-                        </li>
-						<li
-							class="walletconnect"
-							v-show="!isCentral"
-							@click="login"
-							v-theme="{
-								fontWeight: getStyleAttrs('fontWeight'),
-							}"
-						>
-							{{ $t("wallet_common_connect") }}
-						</li>
-						<li
-							class="englishUSD"
-							:data-role="currencyRole"
-							v-hover="{
-								color: getHoverAttr('color'),
-								oldColor: getStyleAttrs('color'),
-							}"
-							v-theme="{
-								color: getStyleAttrs('color'),
-								fontWeight: getStyleAttrs('fontWeight'),
-							}"
-							@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="42"
-									left=""
-									right="0"
-									:role="currencyRole"
-									:isClickstatus="false"
-									@setLang="setLang"
-								/>
-							</div>
-						</li>
-					</ul>
-					<ul
-						class="right-tool right-tool-login"
-						v-if="walletName.length"
-					>
-						<!-- <li
-							class="mobi"
-							v-show="showMobiBtn"
-							@click="showMobiInfo"
-						>
-							<img
-								:src="require('../../../assets/img/mobi.png')"
-								alt=""
-							/>
-						</li> -->
-						<li class="nav-a wallet wallet-order" v-if="activeUser">
-							<span
-								v-hover="{
-									color: getHoverAttr('color'),
-									oldColor: getStyleAttrs('color'),
-								}"
-								v-theme="{
-									color: getStyleAttrs('color'),
-									fontWeight: getStyleAttrs('fontWeight'),
-								}"
-								>{{ $t("index_header_menu_order") }}</span
-							>
-							<!-- <router-link to='/wallet'>{{$t("index_header_menu_wallet")}}</router-link> -->
-							<div class="wallet-more-box">
-								<div class="wallet-more">
-									<div
-										class="wallet-title"
-										@click="goOrderUrl('orders')"
-									>
-										{{ $t("trade_history_open_orders") }}
-									</div>
-									<div
-										class="wallet-title"
-										@click="goOrderUrl('history')"
-									>
-										{{ $t("trade_history_order_history") }}
-									</div>
-								</div>
-							</div>
-						</li>
-						<li
-							class="marl18 download-li"
-							v-if="activeUser && false"
-						>
-							<!-- <img :src='/' /> -->
-							<div
-								class="li-message"
-								@mouseover="showNoticeFunc(1)"
-								@mouseleave="showNoticeFunc(0)"
-								v-hover="{
-									color: getHoverAttr('color'),
-									oldColor: getStyleAttrs('color'),
-								}"
-								v-theme="{
-									color: getStyleAttrs('color'),
-									fontWeight: getStyleAttrs('fontWeight'),
-								}"
-							>
-								<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 class="marl18 nav-a wallet">
-							<!-- 没激活（锁定） / 没登录 -->
-							<div
-								class="user-account wallet-no"
-								v-if="!activeUser"
-							>
-								<img
-									:src="
-										walletIcon ||
-											require('../../../assets/img/walletconnect.png')
-									"
-									alt=""
-									v-if="walletIcon && walletIcon.indexOf('<svg') == -1"
-								/>
-								<span v-html="walletIcon" v-else></span>
-								<!-- <img :src="require('../../../assets/img/wrong.png')" alt="" class='walletWrong'/> -->
-								{{ walletAccount || walletName }}
-								<!-- 锁定 -->
-								<img
-									:src="
-										require('../../../assets/img/unlock.png')
-									"
-									alt=""
-									class="walletLock"
-								/>
-							</div>
-							<!-- 已经登录正常状态 -->
-							<div
-								to="/wallet"
-								class="user-account"
-								v-hover="{
-									color: getHoverAttr('color'),
-									oldColor: getStyleAttrs('color'),
-								}"
-								v-theme="{ color: getStyleAttrs('color') }"
-								v-if="activeUser"
-							>
-								<!-- <img v-if="!userCenter" :src="$store.state.user.userInfo.profile.avatar" alt="" /> -->
-								<img
-									:src="
-										walletIcon ||
-											require('../../../assets/img/walletconnect.png')
-									"
-									alt=""
-									v-if="walletIcon && walletIcon.indexOf('<svg') == -1"
-								/>
-								<span v-html="walletIcon" v-else></span>
-								{{ walletAccount || walletName }}
-								<svg-icon
-									className="li-img-2"
-									icon-class="arrow-down-w"
-								></svg-icon>
-							</div>
-
-							<div
-								class="wallet-more-box"
-								v-if="walletName.length"
-							>
-								<userPanel
-									v-model="isShowUserPanel"
-									top="20"
-									:isClickstatus="false"
-									type="B"
-								/>
-							</div>
-						</li>
-						<li
-							class="englishUSD"
-							:data-role="currencyRole"
-							v-hover="{
-								color: getHoverAttr('color'),
-								oldColor: getStyleAttrs('color'),
-							}"
-							v-theme="{
-								color: getStyleAttrs('color'),
-								fontWeight: getStyleAttrs('fontWeight'),
-							}"
-							@mouseenter="isShowCurrency = true"
-						>
-							<span
-								>{{ lang }}/{{
-									currency.name ||
-										'USD'
-								}}</span
-							>
-							<!-- <img src="@/assets/img/down.png" alt=""> -->
-							<svg-icon
-								className="li-img-2"
-								icon-class="arrow-down-w"
-							></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>
-			</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";
-export default {
-	name: "Headerb",
-	props: {
-		navList: {
-			type: Array,
-			default: function() {
-				return [];
-			},
-		},
-		scrollTop: {
-			type: Number,
-			default: 500,
-		},
-		showMiddleInfo: {
-			//显示中间信息 区分首页/注册登陆
-			type: Boolean,
-			default: true,
-		},
-		logoUrl: {
-			type: String,
-			default: "",
-		},
-		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"]),
-		isCentral() {
-			return this.$store.state.siteConfig.isCentral;
-		},
-		logoSrc() {
-			let path =
-				this.$t("site_common_logo_base_url") +
-				(window.location.host.indexOf(conf.localHostIp) == -1
-					? window.location.hostname
-					: conf.testSite);
-			return path;
-		},
-		routeName() {
-			return this.$route.name;
-		},
-        updateVertionIng() {
-            return this.$store.state.common && this.$store.state.common.updateVertionStatus
-        },
-		chainId() {
-			return this.$store.state.wallet.walletChainId;
-		},
-		walletIcon() {
-			const networkDetail = this.$store.getters.filterNetworkItem(this.chainId, 'L1');
-			return networkDetail.networkLogo;
-		},
-		account() {
-			return this.$store.getters.account || '';
-		},
-	},
-	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,
-			// walletIcon: "",
-		};
-	},
-	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.userCenter) {
-				this.activeUser = activeUser;
-			} else {
-				this.activeUser = activeUser && walletActive && token;
-			}
-			// this.walletIcon = window.localStorage.getItem("selectedIcon");
-		},
-		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.userCenter && wallet.address) || "";
-			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"
-				);
-				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:
-                    console.log('item.click_url', item.click_url)
-					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 {
-						this.$router.push({
-							path: item.click_url,
-						});
-					}
-					break;
-			}
-		},
-		gouThirdUrl(url) {
-			if (url) {
-				window.open(this.urlTips.url, "_blank");
-			}
-			this.urlTips.show = false;
-		},
-		goOrderUrl(type) {
-			// if (this.uid) {
-            let tradeMode = this.$store.state.trade.tradeMode
-			this.$router.push({
-				path: `/order/history/${tradeMode}`,
-				query: {
-					type: type,
-					t: +new Date(),
-				},
-			});
-			// }
-		},
-		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
-					);
-					this.mbopSrc = mbopCoins.icon_url || "";
-					let mobiCoins = this.$store.getters["commonTokenDetail"](
-						res.data.dividend_coin_symbol
-					);
-					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);
-		},
-        goPerpetual() {
-            this.$router.push({
-				path: "/trade/perpetual?symbol=WBTC-USDT"
-			});
-        },
-		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",
-			});
-		},
-		goHome() {
-			this.$router.push({
-				path: "/",
-			});
-		},
-
-        goStarted() {
-            Storage.set("loginType", "1");
-            this.$router.push({
-                path:"/user/register"
-            })
-        },
-    	goLogin() {
-            this.$router.push({
-                path:"/user/login"
-            })
-        },
-	},
-};
-</script>
-<style lang="less" scoped>
-.header-wrapper {
-	height: 60px;
-}
-.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: 60px;
-	display: flex;
-	align-items: center;
-	background: rgba(0, 0, 0, 0.8);
-	.contentWidth {
-		// .heartWidth;
-		flex: auto;
-		width: 100%;
-		padding: 0 10px;
-		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);
-		}
-	}
-	.nav,
-	.right-tool {
-		font-size: 14px;
-		font-family: Font;
-		//
-		text-align: left;
-		letter-spacing: 0px;
-		display: flex;
-		align-items: center;
-		margin-left: 15rpx;
-		li {
-			position: relative;
-			margin-left: 26px;
-			white-space: nowrap;
-			cursor: pointer;
-			.wallet-more-box {
-				display: none;
-				position: absolute;
-				top: 30px;
-				left: 0;
-				min-width: 160px;
-				min-height: 120px;
-			}
-			.wallet-more {
-				position: absolute;
-				z-index: 2;
-				top: 22px;
-				left: 0;
-				min-width: 160px;
-				background: #ffffff;
-				border: 1px solid var(--border-color-base);
-				border-radius: 6px;
-				box-shadow: 0px 4px 12px 0px rgba(17, 51, 83, 0.02);
-				.wallet-title {
-					height: 48px;
-					line-height: 48px;
-					padding: 0 16px;
-					font-size: 16px;
-					font-family: Font;
-
-					color: #303233;
-				}
-				.wallet-title:hover {
-					background: var(--card-bg-color);
-					color: var(--primary-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;
-				color: var(--border-color-base);
-			}
-			.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: 46px;
-			line-height: 46px;
-			color: white;
-			.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);
-			}
-			a {
-				color: var(--primary-color);
-			}
-		}
-		li.getstarted {
-			width: 108px;
-			height: 36px;
-			line-height: 36px;
-			margin-left: 16rpx;
-			border-radius: 6px;
-			border: 1px solid var(--border-color-base);
-			color: var(--border-color-base);
-			text-align: center;
-		}
-		li.englishUSD {
-			position: relative;
-			font-size: 14px;
-			color: var(--border-color-base);
-			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);
-				color: var(--primary-color);
-			}
-		}
-		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;
-		}
-	}
-	.nav li:hover,
-	.right-tool li:hover,
-	.nav-a a:hover,
-	.nav .li:hover {
-		color: var(--primary-color) !important;
-		z-index: 99;
-	}
-	.user-account {
-		// opacity: .8;
-		padding: 10px;
-		border: 1px solid rgba(251, 251, 252, 0.15);
-		border-radius: 7px;
-		display: flex;
-		align-items: center;
-		color: var(--border-color-base);
-		img,
-		/deep/ svg {
-			width: 24px;
-			height: 24px;
-			// margin-right: 8px;
-		}
-		img{
-			margin-right: 8px;
-		}
-	}
-	.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: 24px;
-		}
-	}
-	.right-tool-login {
-		li {
-			margin-left: 22px;
-		}
-	}
-}
-.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;
-	}
-}
-.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>