udxcms 1.0.10 → 1.0.12

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

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