udxcms 1.0.8 → 1.0.10

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

@@ -1,482 +0,0 @@
-<!--
- * @Descripttion:
- * @version:
- * @Author:
- * @Date: 2021-12-17 01:00:24
- * @LastEditors: Lewis
- * @LastEditTime: 2022-01-12 15:30:04
--->
-<template>
-	<div :class="['header flex-space', false && active && 'headerActive']">
-		<div class="logo" @click="goHome">
-			<img
-				:src="logoSrc + '/' + language + '/w72.png'"
-				class="imgsvg"
-				v-if="titleType == 'logo'"
-				:style="{ height: logoHeight }"
-			/>
-			<span v-else>{{ $t("site_common_site_name") }}</span>
-		</div>
-		<div class="navbar">
-			<ul class="flex">
-				<li
-					v-for="(item, index) in navList"
-					:key="index"
-					class="nav-bar-item"
-					@click="goUrl(item)"
-				>
-                    <span class='menu-text'>
-                        {{ item.bar_name }}
-                        <svg-icon
-                            className="li-img-2"
-                            icon-class="arrow-down-w"
-                            v-if="item.child.length"
-                        ></svg-icon>
-                        <menu-tag :content='item.menu_tag' v-if='item.menu_tag' top='-10px'></menu-tag>
-                    </span>
-					<SubMenu
-						v-if="item.child && item.child.length"
-						:list="item.child"
-						class="sub-menu"
-						@goUrl="goUrl"
-					/>
-				</li>
-			</ul>
-		</div>
-		<ul class="right-tool">
-			<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 }}/{{ currency.name || 'USD' }}
-				</span>
-				<!-- <img src="@/assets/img/down.png" alt=""> -->
-				<svg-icon
-					className="arrow"
-					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 class="menu">
-            <router-link to="/staking" class="">Get DNA</router-link>
-            <Currency
-                top="22"
-                left=""
-                right="0"
-                :role="currencyRole"
-                :isClickstatus="false"
-                @setLang="setLang"
-            />
-        </div> -->
-	</div>
-</template>
-
-<script>
-import SubMenu from "../../cmsComponents/paragen/SubMenu.vue";
-import _ from "lodash";
-import conf from "../../../config/index";
-import { mapState } from "vuex";
-import config from "@/config/index";
-import {unwrapJSONStr} from "@/common_modules/cms-submodule/utils/parse";
-export default {
-	components: {
-		SubMenu,
-	},
-	props: {
-		navList: {
-			type: Array,
-			default: function() {
-				return [];
-			},
-		},
-		scrollTop: {
-			type: Number,
-			default: 500,
-		},
-		titleType: {
-			type: String,
-			default: config.siteTitle || "logo",
-		},
-		styleConf: {
-			type: Object,
-			default: function() {
-				return {};
-			},
-		},
-        showUnit: {
-            type: String,
-            default: "",
-        },
-	},
-	created() {
-		let fn = this.init();
-		window.addEventListener("scroll", fn);
-	},
-	data() {
-		return {
-			active: false,
-			walletName: "",
-			activeAccount: "",
-			walletAccount: "",
-			walletActive: false,
-			isShowUserPanel: true,
-            lang: "",
-            language: localStorage.getItem("language") || conf.baseLanguage,
-			logoHeight: 0,
-
-			currencyRole: "currency",
-			isShowCurrency: true,
-		};
-	},
-	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;
-		},
-        walletIcon() {
-            return this.$store.getters.walletIcon || '';
-        }
-	},
-	watch: {
-		"$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);
-			} else {
-				let syncWallet = this.walletData.getSyncWallet();
-				if (!syncWallet) {
-					this.activeUser = false;
-					this.walletName = "";
-					this.walletAccount = this.activeAccount.length
-						? this.activeAccount
-						: "";
-				}
-			}
-		},
-	},
-	mounted() {
-		this.walletlistenerFunc();
-		this.SetcomponentName();
-	},
-	methods: {
-		init() {
-			return _.throttle(() => {
-				let scrollT = window.scrollY;
-				if (scrollT >= this.scrollTop) {
-					this.active = true;
-				} else {
-					this.active = false;
-				}
-			}, 50);
-		},
-		async goHome() {
-			this.$router.push({
-				name: "home",
-			});
-		},
-		goUrl(item) {
-			if (item.child && item.child.length) return;
-			switch (item.bar_name) {
-				default:
-					if (item.click_url.indexOf("http") >= 0) {
-						if (item.bar_name !== "Faucet") {
-							window.open(item.click_url, "_blank");
-						}
-					} else {
-						this.$router.push({
-							path: item.click_url,
-						});
-					}
-					break;
-			}
-		},
-		walletlistenerFunc(wallet) {
-			wallet = wallet || this.$store.state.wallet.wallet;
-			let walletName = 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();
-		},
-		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;
-			this.activeUser = activeUser && walletActive && token;
-		},
-		login() {
-			// @ts-nocheck
-			$Vue.$bus.$emit("linkWalletByConnetBtn", () => {});
-		},
-		SetcomponentName() {
-			let indexConfigList =
-                theme_config &&
-				theme_config.length &&
-				theme_config[0].pageList &&
-				theme_config[0].pageList.filter((v) => {
-					return v.pageKey == "common";
-				});
-			let indexConfig =
-                indexConfigList &&
-				indexConfigList.length &&
-				indexConfigList[0].configList &&
-				indexConfigList[0].configList.filter((v) => {
-					return v.componentsKey == "common_conf";
-				});
-			let indexConfig_obj =
-				(indexConfig && indexConfig.length &&
-					indexConfig[0].config &&
-          unwrapJSONStr(indexConfig[0].config)) ||
-				{};
-			this.logoHeight = indexConfig_obj.logoHeight;
-		},
-
-		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]) || "";
-		},
-	},
-};
-</script>
-
-<style lang="less" scoped>
-.header {
-	position: absolute;
-	top: 0;
-	height: 65px;
-	width: 100%;
-	padding: 0 32px;
-	color: var(--top-header-color);
-	z-index: 2000;
-	background: var(--top-header-bg);
-	max-width: 100%;
-}
-.header.headerActive {
-	position: fixed;
-	width: 100%;
-	top: 0;
-	left: 0;
-	// color: var(--top-over-header-color);
-	background: var(--top-over-header-bg);
-	backdrop-filter: saturate(180%) blur(20px);
-	top: -100px;
-	transform: translateY(100px);
-	box-shadow: 0px 2px 2px 0px rgba(193, 193, 193, 0.2);
-	transition: transform 0.3s ease;
-	z-index: 20;
-}
-.logo {
-	font-family: Manrope;
-	font-style: normal;
-	font-weight: bold;
-	font-size: 20px;
-	letter-spacing: 3px;
-	text-transform: uppercase;
-	color: #ffffff;
-	height: auto;
-	width: auto;
-	.imgsvg {
-		height: 40px;
-		width: auto;
-	}
-}
-.navbar {
-	display: none;
-	ul li {
-		position: relative;
-		font-family: FontMedium;
-		font-size: 14px;
-		cursor: pointer;
-        .menu-text {
-            display: flex;
-            white-space: nowrap;
-            align-items: center;
-        }
-		.sub-menu {
-			display: none;
-		}
-		&:hover {
-			color: white;
-			.sub-menu {
-				display: block;
-				z-index: 10;
-			}
-		}
-	}
-	ul li:not(:first-child) {
-		margin-left: 36px;
-	}
-}
-.menu {
-	font-family: FontMedium;
-	font-style: normal;
-	font-weight: 500;
-	font-size: 14px;
-	width: auto;
-	text-align: right;
-	cursor: pointer;
-}
-
-.right-tool {
-    font-size: 16px;
-    font-family: FontMedium;
-    .arrow {
-        width: 20px;
-        height: 20px;
-        // margin-left: 4px;
-        vertical-align: -5px;
-        transition: all 0.5s;
-    }
-}
-
-@media screen and (min-width: 768px) {
-	.navbar {
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-	}
-	.logo,
-	.menu {
-		z-index: 2;
-	}
-
-	.user-account {
-		// opacity: .8;
-		padding: 6px 10px;
-		border: 1px solid rgba(251, 251, 252);
-		border-radius: 7px;
-		display: flex;
-		align-items: center;
-		// background: rgba(246, 246, 246, 1);
-		border-radius: 20px;
-		color: var(--top-header-color);
-		img,
-		/deep/ svg {
-			width: 24px;
-			height: 24px;
-			margin-right: 8px;
-		}
-		.walletLock {
-			filter: hue-rotate(242deg);
-			margin-left: 0.2em;
-		}
-
-		.li-img-2 {
-			width: 20px;
-			height: 20px;
-			vertical-align: -5px;
-			transition: all 0.5s;
-			color: var(--top-header-color);
-		}
-	}
-	.wallet {
-		position: relative;
-		.wallet-more-box {
-			display: none;
-			position: absolute;
-			top: 30px;
-			right: 0;
-			min-width: 100%;
-			min-height: 120px;
-			/deep/ .user-panel {
-				border: 0;
-				box-shadow: 0 0 0 transparent;
-				backdrop-filter: blur(12px);
-				background: #2a2a2e;
-				// box-shadow: 0 0 2px #666666;
-				.user-p-item {
-					text-align: center;
-					a,
-					span {
-						color: rgba(255, 255, 255);
-						&:hover {
-							color: var(--primary-color);
-						}
-					}
-				}
-			}
-		}
-	}
-	.wallet:hover {
-		.wallet-more-box {
-			display: block;
-		}
-		.li-img-2 {
-			transform: rotate(180deg);
-			color: rgba(209, 45, 141, 1);
-		}
-		a {
-			color: rgba(209, 45, 141, 1) !important;
-		}
-	}
-}
-</style>