udxcms 1.0.9 → 1.0.10

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

@@ -1,1842 +0,0 @@
-<!--
- * @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="{ 'header-nav': true, active: active }"
-		>
-			<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="logo"
-							class="imgsvg1"
-							v-theme="{
-								height:
-									commonConf.logoHeight ||
-									(styleConf &&
-										styleConf.conf &&
-										styleConf.conf.logoHeight),
-							}"
-						/>
-					</div>
-					<!-- <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),
-							}"
-						/>
-					</div> -->
-				</div>
-				<ul
-					class="nav"
-				>
-					<!-- <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'])"
-					> -->
-					<li
-						class="li wallet wallet-order"
-                        :class="{'active':item.bar_name === currentRouteName}"
-						v-for="(item, index) in navList"
-						:key="index"
-						@click="dealUrl(item)"
-					>
-						<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="submenu-item"
-									v-for="(innerItem, index) in item.child"
-									:key="index"
-									@click="dealUrl(innerItem)"
-								>
-									{{ innerItem.bar_name }}
-								</div>
-							</div>
-						</div>
-					</li>
-				</ul>
-				<!-- <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>
-							{{ item.bar_name }}
-						</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" v-if="!walletName.length">
-						<!-- <li>
-							<router-link to="/staking/overview" class="btn-dao">{{
-								$t("common_header_staking")
-							}}</router-link>
-						</li> -->
-						<li
-                            class="connect"
-							v-if="showMiddleInfo && showWallet"
-							@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>
-
-					<ul class="right-tool" v-if="walletName.length">
-						<!-- <li>
-							<router-link to="/staking/overview" class="btn-dao">{{
-								$t("common_header_staking")
-							}}</router-link>
-						</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.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"
-							> -->
-							<div
-								to="/wallet"
-								class="user-account"
-								v-hover="{
-									color: getHoverAttr('color'),
-									oldColor: 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
-							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>
-							<!-- <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">
-								<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 logo from '../../../assets/img/creator_logo_black.png'
-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,
-		},
-		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 || '';
-		},
-	},
-	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,
-            currentRouteName:'',
-			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,
-			walletIcon: "",
-            logo,
-		};
-	},
-	created() {
-		let fn = this.init();
-		window.addEventListener("scroll", fn);
-		this.msgList = [];
-        console.log('navList')
-        console.log('navList')
-        console.log('navList')
-        console.log('navList')
-        console.log('navList')
-        console.log(this.navList)
-        console.log(this.$route)
-        const routeNameMap = {
-            'nft-list':'Explore',
-            'creator-home':'Home',
-            'creator-create':'Create',
-        }
-        this.currentRouteName = routeNameMap[this.$route.name];
-		// 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;
-			}
-			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) {
-			// 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:
-					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;
-    background:#fff;
-    box-shadow: 0 5px 5px rgba(47, 83, 109, 0.12);
-	.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: #000;
-		font-size: 16px;
-		font-family: FontMedium;
-		//
-		text-align: left;
-		letter-spacing: 0px;
-		display: flex;
-		align-items: center;
-		margin-left: 15px;
-        .connect{
-            padding: 6px 20px;
-            color:#000;
-            border:1px solid #000;
-            border-radius: 20px;
-            &:hover{
-                border:1px solid var(--primary-color);
-            }
-            &:active{
-                opacity: .8;
-            }
-
-        }
-		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;
-			}
-			.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;
-			// .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);
-        color: var(--primary-color);
-		z-index: 99;
-	}
-    .nav .li{
-        &.active{
-            color: var(--primary-color);
-        }
-        color:#000;
-    }
-
-    .nav .li:hover{
-
-        color:var(--text-color-secondary);
-    }
-	.user-account {
-		// opacity: .8;
-		padding: 6px 0 6px 20px;
-        color:#000 !important;
-		border: 1px solid #000;
-		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>