udxcms 1.0.8 → 1.0.10

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

@@ -1,391 +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 + '/' + lang +'/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"
-                        :isBasic='isBasic'
-                    />
-                </li>
-            </ul>
-        </div>
-        <div class="menu">
-            <span @click='login' v-if='!walletName.length'>{{$t('index_header_menu_wallet')}}</span>
-            <div class="wallet" v-if="walletName.length">
-                <div class="user-account" v-if="!activeUser">
-                    <img :src="walletIcon || require('../../../assets/img/walletconnect.png')" v-if="walletIcon.indexOf('<svg') == -1"/>
-                    <span v-html="walletIcon" v-else></span>
-                    {{ walletAccount || walletName }}
-                    <img :src="require('../../../assets/img/unlock.png')" class="walletLock"/>
-                </div>
-                <div class="user-account" v-if="activeUser">
-                    <img :src="walletIcon || require('../../../assets/img/walletconnect.png')" v-if="walletIcon.indexOf('<svg') == -1" />
-                    <span v-html="walletIcon" v-else></span>
-                    {{ walletAccount || walletName }}
-                    <svg-icon class="li-img-2" icon-class="arrow-down-w"></svg-icon>
-                </div>
-                <div class="wallet-more-box">
-                    <userPanel v-model="isShowUserPanel" top="20" :isClickstatus="false" type="B" />
-                </div>
-            </div>
-        </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'
-        }
-    },
-    created() {
-        let fn = this.init();
-        window.addEventListener("scroll", fn)
-    },
-    data() {
-        return {
-            active: false,
-            walletName: "",
-            activeAccount: "",
-            walletAccount: "",
-            walletActive: false,
-            isShowUserPanel: true,
-            lang: localStorage.getItem("language") || conf.baseLanguage,
-            logoHeight: 0
-        }
-    },
-    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 || '';
-        },
-        isBasic() {
-            return this.$store.state.siteConfig.tradeMoel == 'Basic'
-        }
-    },
-    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 (this.isBasic && item.click_url.includes('/trade?')) {
-                        item.click_url = item.click_url.replace('/trade', '/trade/spot/swap')
-                        console.log('item.click_url', item.click_url)
-                    }
-                    if (item.click_url.indexOf('http') >= 0) {
-                        if (item.bar_name !== 'Faucet') {
-                            window.open(item.click_url, '_blank')
-                        }
-                    } else {
-                        this.$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
-        }
-    }
-}
-</script>
-
-<style lang="less" scoped>
-.header {
-    position: absolute;
-    top: 0;
-    height: 65px;
-    width: 100%;
-    padding: 0 32px;
-    color: var(--top-header-color);
-    z-index: 20;
-    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: auto;
-        width: 112px;
-    }
-}
-.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;
-}
-
-.headerActive {
-}
-
-
-
-@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>