udxcms 1.0.1

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

@@ -0,0 +1,1744 @@
+<!--
+ * @Author: Sneed
+ * @Date: 2020-11-16 14:38:46
+ * @LastEditTime: 2022-04-12 15:25:07
+ * @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:
+								commonConf.logoHeight ||
+								(styleConf &&
+									styleConf.conf &&
+									styleConf.conf.logoHeight),
+						}"
+					>
+						<img
+							:src="logoSrc + '/' + language + '/w72.png'"
+							class="imgsvg1"
+							v-theme="{
+								height:
+									commonConf.logoHeight ||
+									(styleConf &&
+										styleConf.conf &&
+										styleConf.conf.logoHeight),
+							}"
+						/>
+						<!-- <img :src="logoSrc + '/' + language + '/b72.png'" class='imgsvg' v-if='active' v-theme="{height: commonConf.logoHeight || styleConf && styleConf.conf && styleConf.conf.logoHeight}" /> -->
+					</div>
+				</div>
+				<ul
+					class="nav"
+					v-showself="
+						showMiddleInfo
+							? { selfkey: 'nav', showUnit: showUnit }
+							: ''
+					"
+					v-show="showMiddleInfo"
+				>
+					<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 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="submenu-item"
+									v-for="(innerItem, index) in item.child"
+									:key="index"
+									@click="dealUrl(innerItem)"
+								>
+									{{ innerItem.bar_name }}
+								</div>
+							</div>
+						</div>
+					</li>
+				</ul>
+				<div class="flex">
+					<ul class="right-tool">
+						<li>
+							<router-link to="/staking/overview" class="btn-dao">{{
+								$t("common_header_staking")
+							}}</router-link>
+						</li>
+                        <li class="my-portfolio" v-if='account && !hideWalletBtn'>
+                            <span class="menu-text">Portfolio</span>
+                            <div class="wallet-more-box">
+                                <PortfolioMenu class='portfolio'></PortfolioMenu>
+                            </div>
+                        </li>
+                        <li v-if='!hideWalletBtn'>
+                            <NetworkSelect
+                                :networks="walletNetworks"
+                                :defaultChainId="chainId"
+                                :isShowLabel='!account'
+                                :chainChangeLogin='true'
+                                @change="changeChain"
+                            />
+                        </li>
+						<li class="marl18 nav-a wallet" v-if='walletName.length'>
+							<div
+								class="user-account wallet-no"
+								v-if="!activeUser"
+							>
+								<img
+									:src="
+										walletIcon ||
+											require('../../../assets/img/walletconnect.png')
+									"
+									alt=""
+									v-if="walletIcon.indexOf('<svg') == -1"
+								/>
+								<span v-html="walletIcon" v-else></span>
+								{{ 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.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"
+							>
+								<walletPanel
+									v-model="isShowUserPanel"
+									top="20"
+									:isClickstatus="false"
+									type="B"
+								/>
+							</div>
+						</li>
+						<li
+							v-if="showMiddleInfo && showWallet && !walletName.length && !hideWalletBtn"
+							@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'),
+							}"
+							v-showself="{ selfkey: 'lang', showUnit: showUnit }"
+							@mouseenter="isShowCurrency = true"
+						>
+							<span>{{ lang }}</span>
+							<svg-icon
+								className="li-img-2"
+								icon-class="arrow-down-w"
+								:data-role="currencyRole"
+							></svg-icon>
+							<div class="currencyBox" v-if="isShowCurrency">
+								<Language
+									v-model="isShowCurrency"
+									top="20"
+									left=""
+									right="0"
+									:role="currencyRole"
+									:isClickstatus="false"
+									@setLang="setLang"
+								/>
+							</div>
+						</li>
+					</ul>
+				</div>
+			</div>
+		</div>
+		<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 class='time'>
+                        {{msgDetail.createTime}}
+                    </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>
+	</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 Language from "../../h5Components/Language.vue";
+export default {
+	components: { Language },
+	name: "HeaderDTX",
+	props: {
+		navList: {
+			type: Array,
+			default: function() {
+				return [];
+			},
+		},
+		scrollTop: {
+			type: Number,
+			default: 500,
+		},
+		showMiddleInfo: {
+			//显示中间信息 区分首页/注册登陆
+			type: Boolean,
+			default: true,
+		},
+        hideWalletBtn: {
+            type: Boolean,
+            default: false
+        },
+		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 {};
+			},
+		},
+		showUnit: {
+			type: String,
+			default: "lang",
+		},
+	},
+	computed: {
+		...mapState("user", ["userInfo", "currency"]),
+		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;
+		},
+		showWallet() {
+			const walletSequences = window["site_config"]["wallet_sequences"];
+			const walletList = walletSequences && JSON.parse(walletSequences);
+			return walletList.length > 0;
+		},
+		account() {
+			return this.$store.getters.account || '';
+		},
+		chainId() {
+			return this.$store.state.chainId;
+		},
+        walletNetworks() {
+			return this.$store.getters.walletNetworks;
+		},
+        walletIcon() {
+            return this.$store.getters.walletIcon || '';
+        },
+        isBasic() {
+            return this.$store.state.siteConfig.tradeMoel == 'Basic'
+        }
+	},
+	watch: {
+		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 {
+			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,
+			lang: "",
+			language: localStorage.getItem("language") || conf.baseLanguage,
+			showMobi: false,
+			showMobiBtn: false,
+			activeAccount: "",
+			activeUser: false,
+			info: {},
+			mbopSrc: "",
+			mobiSrc: "",
+			userCenter: isUserCenter(),
+			walletName: "",
+			walletAccount: "",
+			walletActive: false
+		};
+	},
+	created() {
+		let fn = this.init();
+		window.addEventListener("scroll", fn);
+		this.msgList = [];
+		// if (this.userInfo.id) {
+		//   localStorage.getItem("TOKEN") && 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;
+			}
+		},
+		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) {
+			// this.walletName = 'OA89s...TSG6'
+			// this.activeUser = SVGComponentTransferFunctionElement
+			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.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;
+			let path = "/";
+			item.bar_name = item.bar_name == "首页" ? "Home" : item.bar_name;
+			switch (item.bar_name) {
+				case "Home":
+					let userInfo = this.$store.state.user.userInfo;
+					let routename = this.$route.name;
+					if (userInfo && userInfo.uid && routename == "home") {
+						path = "/wallet";
+					}
+					this.$router.push({
+						path: path,
+					});
+					break;
+				// case "API":
+				// 	this.goApi();
+				// 	break;
+				// case 'Academy':
+				//     this.goWhite()
+				//     break;
+				case "history":
+					this.$router.push({
+						path: "/trade/history",
+					});
+					break;
+				default:
+                    if (this.isBasic && item.click_url.includes('/trade?')) {
+                        item.click_url = item.click_url.replace('/trade', '/trade/spot/swap')
+                    }
+					path = item.click_url;
+					if (!~path.indexOf("http")) {
+						this.$router.push({
+							path: item.click_url,
+						});
+					} else {
+						window.open(path, "_blank");
+					}
+					break;
+			}
+		},
+		goOrderUrl(type) {
+			this.$router.push({
+				path: "/trade/history",
+				query: {
+					type: type,
+				},
+			});
+		},
+		goApi() {
+			let url = this.$t("site_common_api_doc_url");
+			if (url != "site_common_api_doc_url") {
+				window.open("https://mysoftlife.github.io/", "_blank");
+			} else {
+				window.open(url, "_blank");
+			}
+		},
+		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,
+				}).then((res) => {
+					this.info = res.data;
+					this.$store
+						.dispatch("getCommonTokenList")
+						.then((result) => {
+							let mbopSymbolCoins = this.$store.getters[
+								"commonTokenDetail"
+							](res.data.platform_coin_symbol);
+							this.mbopSrc = mbopSymbolCoins.icon_url || "";
+							let mobiSymbolCoins = this.$store.getters[
+								"commonTokenDetail"
+							](res.data.dividend_coin_symbol);
+							this.mobiSrc = mobiSymbolCoins.icon_url || "";
+						}).catch(e => e);
+				}).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",
+			});
+		},
+		goDapps() {
+			this.$router.push({
+				path: "/dapp",
+			});
+		},
+		login() {
+			if (this.userCenter) {
+				this.$router.push({
+					path: "/user/login",
+				});
+			} else {
+				$Vue.$bus.$emit("linkWalletByConnetBtn");
+			}
+		},
+		closeMobi() {
+			this.showMobi = false;
+		},
+		showMobiInfo() {
+			this.showMobi = true;
+		},
+		loginOut() {
+			this.$store.commit("user/logout");
+		},
+		goUrl(url) {
+			this.$router.push({
+				path: url,
+			});
+		},
+		goWhite() {
+			this.$router.push({
+				path: "/cms/announcement/announcement?type=WHITE_PAPER",
+			});
+		},
+		goVote() {
+			this.$router.push({
+				name: "vote",
+			});
+		},
+		goHome() {
+			this.$router.push({
+				path: "/",
+			});
+		},
+		goLink(url) {
+			if (url.startsWith("http")) {
+				window.open(url);
+			} else if (url.startsWith("/")) {
+				this.$router.push({
+					path: url,
+				});
+			} else {
+				this.$router.push({
+					path: "/" + url,
+				});
+			}
+		},
+	},
+};
+</script>
+<style lang="less" scoped>
+.header-wrapper {
+	height: 70px;
+}
+.mobi-info {
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 9999999;
+	width: 100vw;
+	height: 100vh;
+	overflow: hidden;
+
+	.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: 70px;
+	display: flex;
+	align-items: center;
+	.contentWidth {
+		// .heartWidth;
+		width: 100%;
+		padding: 0 30px;
+		display: flex;
+		align-items: center;
+		flex-wrap: nowrap;
+		justify-content: space-between;
+	}
+	.logo {
+		height: 20px;
+		font-size: 0;
+		cursor: pointer;
+		margin-top: -2px;
+		.imgsvg {
+			width: auto;
+			height: 20px;
+			color: white;
+		}
+		.imgsvgactive {
+			filter: invert(1) brightness(2);
+		}
+	}
+	.nav,
+	.right-tool {
+		color: #fff;
+		font-size: 16px;
+		font-family: FontMedium;
+		//
+		text-align: left;
+		letter-spacing: 0px;
+		display: flex;
+		align-items: center;
+		margin-left: 15px;
+        .my-portfolio {
+            margin-right: 12px;
+        }
+		li {
+			position: relative;
+			margin: 0 15px;
+			white-space: nowrap;
+			cursor: pointer;
+			.wallet-more-box {
+				display: none;
+				position: absolute;
+				top: 22px;
+				left: 50%;
+				transform: translateX(-50%);
+				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: 22px;
+				left: 50%;
+				transform: translateX(-50%);
+				min-width: 420px;
+				padding: 20px;
+				background: #21262c;
+				// border: 1px solid var(--border-color-base);
+				border-radius: 6px;
+				box-shadow: 0px 4px 12px 0px rgba(17, 51, 83, 0.02);
+				display: grid;
+				grid-template-columns: repeat(2, 1fr);
+				.submenu-item {
+					height: 48px;
+					line-height: 48px;
+					padding: 0 16px;
+					font-size: 16px;
+					font-family: FontMedium;
+
+					color: #fff;
+					// border: 1px solid var(--border-color-base);
+					// &:last-child {
+					//   border-bottom: none;
+					// }
+				}
+				.submenu-item:hover {
+					// background: var(--card-bg-color);
+					color: rgba(255, 255, 255, 0.82);
+				}
+				.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%;
+			}
+		}
+
+		.btn-dao {
+			background-color: #67d9f4;
+			color: #13181f;
+			min-width: 97px;
+			height: 36px;
+			line-height: 36px;
+			display: inline-block;
+			text-align: center;
+			padding: 0 8px;
+			border-radius: 36px;
+		}
+		li.wallet-order {
+			height: 46px;
+			line-height: 46px;
+            .menu-text {
+                display: flex;
+                white-space: nowrap;
+                align-items: center;
+            }
+			// .wallet-more-box {
+			//   transform: translateX(0px);
+			// }
+			.nav-text {
+				height: 46px;
+				line-height: 46px;
+			}
+		}
+		li.mobi {
+			img {
+				width: 56px;
+				height: 34px;
+			}
+		}
+		li.walletconnect {
+			min-width: 156px;
+			height: 40px;
+			padding: 0 6px;
+			border: 1px solid transparent;
+			opacity: 1;
+			background: var(--primary-bg-color);
+			border-radius: 22px;
+			line-height: 40px;
+			text-align: center;
+			font-size: 16px;
+			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: 22px;
+				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) !important;
+			}
+		}
+		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: 16px;
+			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: 58px;
+	}
+	.nav li:hover,
+	.right-tool li:hover,
+	.nav-a a:hover,
+	.nav .li:hover {
+		color: rgba(255, 255, 255, 0.82);
+		z-index: 99;
+	}
+	.user-account {
+		// opacity: .8;
+		padding: 6px 10px;
+		// border: 1px solid rgba(251, 251, 252, 0.15);
+		border-radius: 7px;
+		display: flex;
+		align-items: center;
+		// background: rgba(246, 246, 246, 1);
+		border-radius: 20px;
+		color: #fff;
+		img,
+		/deep/ svg {
+			width: 24px;
+			height: 24px;
+			margin-right: 8px;
+		}
+	}
+	.nav-a a:hover .user-account {
+		border: 1px solid rgba(251, 251, 252, 0.15);
+		color: rgba(255, 255, 255, 0.82);
+	}
+	.wallet-no {
+		color: #0089ff;
+		filter: hue-rotate(148deg);
+		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;
+	z-index: 999;
+	top: -100px;
+	transform: translateY(100px);
+	transition: transform 0.3s ease;
+}
+// .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;
+// 	}
+// 	li.getstarted {
+// 		background: var(--primary-bg-color);
+// 		color: #ffffff;
+// 		border: 1px solid var(--primary-color);
+// 	}
+// 	li.getstarted:hover {
+// 		background: var(--primary-bg-color);
+// 		color: var(--border-color-base);
+// 		border-color: var(--primary-color);
+// 	}
+// }
+.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: 16px;
+		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: 16px;
+	}
+}
+
+.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;
+}
+</style>