udxcms 1.0.1

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

@@ -0,0 +1,1246 @@
+<!--
+ * @Descripttion:
+ * @version:
+ * @Author:
+ * @Date: 2021-04-15 17:10:04
+ * @LastEditors: Lewis
+ * @LastEditTime: 2022-03-26 22:31:54
+-->
+<template>
+    <div class="header-wrapper">
+        <div :class="{'header-nav':true, active: active}" v-theme="getStyleSetAttrs(['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='imgsvg'  v-theme="{height: styleConf && styleConf.conf && styleConf.conf.logoHeight || commonConf.logoHeight}" v-show='!active'/>
+                        <img :src="logoSrc + '/' + language + '/b72.png'" :class="['imgsvg', {'imgsvgactive': routeName != 'home'}]" v-theme="{height: styleConf && styleConf.conf && styleConf.conf.logoHeight || commonConf.logoHeight}" v-show='active'/>
+                    </div>
+                    <div class='chain-box'>
+                        <ChainNetWork />
+                    </div>
+                    <ul class="nav" v-show="showMiddleInfo">
+                        <li class='li wallet wallet-order' v-for='(item, index) in navList' :key='index' @click='dealUrl(item)'>
+                            <span v-hover="{color: getHoverAttr('color'), oldColor: getStyleAttrs('color')}" v-theme="getStyleSetAttrs(['color', 'fontWeight'])">{{item.bar_name}}</span>
+                            <div class='wallet-more-box' v-if="item.child.length">
+                                <div class='wallet-more'>
+                                    <div class='wallet-title' v-for='(innerItem, index) in item.child' :key='index' @click='dealUrl(innerItem)' >{{innerItem.bar_name}}</div>
+                                </div>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+                <div class='flex'>
+                    <ul class="right-tool" v-if='!userInfo.id'>
+                        <li class="mobi" v-show="$store.state.user.currency && showMobiBtn" @click="showMobiInfo">
+                            <img :src="require('../../../assets/img/mobi.png')" alt="">
+                        </li>
+                        <li v-show="showMiddleInfo" class="download-li" @click="login">
+                            <span v-hover="{color: getHoverAttr('color'), oldColor: getStyleAttrs('color')}" v-theme="{color: getStyleAttrs('color')}">{{$t("user_common_log_in")}}</span>
+                        </li>
+                        <li v-show="showMiddleInfo" class="getstarted download-li" @click="getStarted" v-hover="{color: 'white'}" v-theme="{borderColor: getStyleAttrs('color')}">
+                            <span v-theme="{color: getStyleAttrs('color'), borderColor: getStyleAttrs('color')}">{{$t("index_header_menu_get_started")}}</span>
+                        </li>
+                        <li class="englishUSD" :data-role='currencyRole' >
+                            <span v-hover="{color: getHoverAttr('color'), oldColor: getStyleAttrs('color')}" v-theme="{color: getStyleAttrs('color')}">{{lang}}/{{currency.name || 'USD'}}</span>
+                            <svg-icon className="li-img-2" icon-class="arrow-down-w" :data-role='currencyRole'></svg-icon>
+                            <div class='currencyBox'>
+                                <Currency v-model='isShowCurrency' top='42' left='' right='0' :role='currencyRole' :isClickstatus='false' @setLang='setLang'/>
+                            </div>
+                        </li>
+                    </ul>
+                    <ul class="right-tool right-tool-login" v-if='userInfo.id'>
+                        <li class="mobi" v-show="$store.state.user.currency && showMobiBtn" @click="showMobiInfo">
+                            <img :src="require('../../../assets/img/mobi.png')" alt="">
+                        </li>
+                        <li class='nav-a wallet wallet-order'>
+                            <div class='nav-text' v-hover="{color: getHoverAttr('color'), oldColor: getStyleAttrs('color')}" v-theme="{color: getStyleAttrs('color')}">
+                                {{$t('index_header_menu_order')}}
+                                <svg-icon className="li-img-2" icon-class="arrow-down-w"></svg-icon>
+                            </div>
+                            <!-- <router-link to='/wallet'>{{$t("index_header_menu_wallet")}}</router-link> -->
+                            <div class='wallet-more-box'>
+                                <div class='wallet-more'>
+                                    <div class='wallet-title' @click="goOrderUrl('orders')">{{$t('trade_history_open_orders')}}</div>
+                                    <div class='wallet-title' @click="goOrderUrl('history')">{{$t('trade_history_trade_history')}}</div>
+                                </div>
+                            </div>
+                        </li>
+                        <li class='nav-a wallet wallet-order'>
+                            <div class='nav-text' v-hover="{color: getHoverAttr('color'), oldColor: getStyleAttrs('color')}" v-theme="{color: getStyleAttrs('color')}">
+                                <span>{{$t('wallet_home_navigation_title')}}</span>
+                                <svg-icon className="li-img-2" icon-class="arrow-down-w"></svg-icon>
+                            </div>
+                            <div class='wallet-more-box'>
+                                <div class='wallet-more'>
+                                    <div class='wallet-title' @click="goUrl('/wallet')">{{$t("index_header_menu_wallet_overview")}}</div>
+                                    <div class='wallet-title' @click="goUrl('/wallet/deposit')">{{$t('index_header_menu_wallet_deposit')}}</div>
+                                    <div class='wallet-title' @click="goUrl('/wallet/withdraw/index')">{{$t('index_header_menu_wallet_withdraw')}}</div>
+                                </div>
+                            </div>
+                        </li>
+                        <!-- <li class='marl18 download-li'>
+                            <div class='li-message' @mouseover="showNoticeFunc(1)" @mouseleave='showNoticeFunc(0)'>
+                                <svg-icon className="li-img" icon-class="message"></svg-icon>
+                                <div class="li-message-dot" v-if='unreadCount'>{{unreadCount >= 100 ? '99+' : unreadCount}}</div>
+                                <div class='li-message-box' v-if='showNotice'>
+                                    <NoticePanel :list='msgList' :unreadCount='unreadCount' @readAll='readAll' @setRead='setItemRead'/>
+                                </div>
+                            </div>
+                        </li> -->
+                        <li class='userPannel-li'>
+                            <img :src='userInfo.profile.avatar' class='li-img-head' id='userPannel'>
+                            <div class='userPannel'>
+                                <userPanel v-model='isShowUserPanel' top='20' :right='0' left='' :isClickstatus='false' type='A'/>
+                            </div>
+                        </li>
+                        <li class="englishUSD" :data-role='currencyRole'>
+                            <span v-hover="{color: getHoverAttr('color'), oldColor: getStyleAttrs('color')}" v-theme="{color: getStyleAttrs('color')}">{{lang}}/{{currency.name || 'USD'}}</span>
+                            <svg-icon className="li-img-2" icon-class="arrow-down-w"></svg-icon>
+                            <div class='currencyBox'>
+                                <Currency v-model='isShowCurrency' top='22' 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>
+                <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', {coinOp: info.platform_coin_symbol})}}</span>
+                        <span>{{info.total_supply}}</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.platform_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'
+export default {
+    name: "Headera",
+    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: '',
+        },
+        hoverColor: {
+            type: String,
+            default: 'var(--primary-color)',
+        },
+        font: {
+            type: String,
+            default: ''
+        },
+        styleConf: {
+            type: Object,
+            default: function() {
+                return {}
+            }
+        },
+        commonConf: {
+            type: Object,
+            default: function() {
+                return {}
+            }
+        },
+        commonHeader: {
+            type: Object,
+            default: function() {
+                return {}
+            },
+        },
+        hideArr: {
+            type: Array,
+            default: function() {
+                return []
+            }
+        }
+    },
+    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
+        }
+    },
+    watch: {
+        userInfo(val){
+            if (val.id) {
+                localStorage.getItem('TOKEN') && this.initMess()
+            }
+        },
+        isShowCurrency(val) {
+            if(!val) {
+                clearTimeout(this.currencyTime)
+            }
+        }
+    },
+    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,
+            info: {
+
+            },
+            mbopSrc: "",
+            mobiSrc: ""
+        }
+    },
+    created() {
+        let fn = this.init();
+        window.addEventListener("scroll",fn)
+         this.msgList = []
+        if (this.userInfo.id) {
+            localStorage.getItem('TOKEN') && this.initMess()
+        }
+    },
+    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)
+
+        },
+        setLang(lang) {
+            this.lang = lang
+            this.language = localStorage.getItem("language");
+        },
+        getHoverAttr(type) {
+            let site_type = this.active ? 'down': 'up'
+            let dealObj = Object.keys(this.styleConf).length ? this.styleConf: this.commonHeader
+            let hover = dealObj && dealObj[site_type] && dealObj[site_type].hover || {}
+            return hover[type] || ''
+        },
+        getStyleAttrs(type) {
+            let dealObj = Object.keys(this.styleConf).length ? this.styleConf: this.commonHeader
+            return this.active ? (dealObj && dealObj.down && dealObj.down[type] || '') : (dealObj && dealObj.up && dealObj.up[type] || '')
+        },
+        getStyleSetAttrs(arr) {
+            let temp = {}
+            arr.map(v => {
+                temp[v] = this.getStyleAttrs(v)
+            })
+            return temp
+        },
+        dealUrl(item) {
+            if (item.child && item.child.length) return
+            switch (item.bar_name) {
+                // case 'API':
+                //     this.goApi()
+                //     break;
+                case 'Academy':
+                    this.goWhite()
+                    break;
+                case 'history':
+                    this.$router.push({
+                        path: '/trade/history'
+                    })
+                    break;
+                default:
+                    this.$router.push({
+                        path: item.click_url
+                    })
+                    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/', '_target')
+            } else {
+                window.open(url, '_target')
+            }
+        },
+        initMess() {
+            let token = localStorage.getItem('TOKEN')
+            if (!token) return
+            let errStatus = false
+            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) {
+                breakdown({
+                    currency_symbol:this.$store.state.user.currency.symbol || '$',
+                    currency_name:this.$store.state.user.currency.name || 'USD',
+                }).then(res=> {
+                    this.info = res.data
+                }).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 => {
+                console.log('mess-count', 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"
+            })
+        },
+        login() {
+            this.$router.push({
+                path:"/user/login"
+            })
+        },
+        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;
+        background: rgba(0,0,0,0.8);
+
+        .mobi-content {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%,-50%);
+            width: 450px;
+            height: 457px;
+            background: url('../../../assets/img/mobi-bg.png') 0 0 no-repeat;
+            background-size: contain;
+            padding: 20px;
+            .mobi-title {
+                font-size: 16px;
+                font-family: Font;
+
+                text-align: left;
+                color: #ffffff;
+                line-height: 16px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                .icon {
+                    width: 20px;
+                    height: 20px;
+                }
+            }
+            .platform {
+                padding-bottom: 28px;
+                div {
+                    margin-top: 15px;
+                    font-size: 16px;
+                    font-family: Font;
+
+                    text-align: left;
+                    color: #ffffff;
+                    line-height: 16px;
+                    display: flex;
+                    justify-content: space-between;
+                }
+                .platform-title {
+                    display: flex;
+                    align-items: center;
+                    img {
+                        margin-right:11px;
+                        width: 36px;
+                        height: 36px;
+                        display: flex;
+                        align-items: center;
+                    }
+                }
+            }
+            .platform.bottom {
+                border-bottom:  1px solid rgba(255,255,255,0.12);
+            }
+            .uni {
+                font-size: 16px;
+                font-family: Font;
+
+                text-decoration: underline;
+                text-align: left;
+                color: var(--primary-color);
+                line-height: 16px;
+            }
+        }
+    }
+    .header-nav {
+        position: absolute;
+        // width: 100vw;
+        z-index:1000;
+        box-sizing: border-box;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 60px;
+        display: flex;
+        align-items: center;
+        background: rgba(0,0,0, .8);
+        // box-shadow: 0px 2px 4px 0px rgba(193,193,193,0.5);
+        .contentWidth {
+            // .heartWidth;
+            width: 100%;
+            padding:0 30px;
+            display: flex;
+            align-items: center;
+            flex-wrap: nowrap;
+            justify-content: space-between;
+        }
+        .logo {
+            width: 132px;
+            height: 20px;
+            font-size: 0;
+            cursor: pointer;
+            margin-top: -2px;
+            .imgsvg {
+                width: auto;
+                height: 20px;
+                color: white;
+            }
+            img {
+                width: auto;
+                height: 20px;
+                color: white;
+            }
+        }
+        .nav,.right-tool {
+            font-size: 14px;
+            font-family: Font;
+            //
+            text-align: left;
+            color: var(--border-color-base);
+            letter-spacing: 0px;
+            display: flex;
+            align-items: center;
+            margin-left: 15rpx;
+            li {
+                position: relative;
+                margin-left: 46px;
+                white-space: nowrap;
+                cursor: pointer;
+                .wallet-more-box {
+                    display: none;
+                    position: absolute;
+                    top:30px;
+                    left: 0;
+                    min-width: 160px;
+                    min-height: 120px;
+                }
+                .wallet-more {
+                    position: absolute;
+                    z-index: 2;
+                    top: 22px;
+                    left: 0;
+                    min-width: 160px;
+                    background: #ffffff;
+                    border: 1px solid var(--border-color-base);
+                    border-radius: 6px;
+                    box-shadow: 0px 4px 12px 0px rgba(17, 51, 83, 0.02);
+                    .wallet-title {
+                        height:48px;
+                        line-height:48px;
+                        padding: 0 16px;
+                        font-size: 16px;
+                        font-family: Font;
+
+                        color: #303233;
+                    }
+                    .wallet-title:first-child {
+                        border-bottom: 1px solid #e8e8e8;
+                    }
+                    .wallet-title:hover{
+                        background: var(--card-bg-color);
+                        color: var(--primary-color);
+                    }
+                    .wallet-subtitle {
+                        margin-top: 8px;
+                        font-size: 12px;
+                        // font-weight:400px;
+                        color: #909599;
+                        font-family: FontMedium;
+                    }
+                }
+                .wallet-more-box-first {
+                    top: 10px;
+                    .wallet-more {
+                        top: 32px;
+                    }
+                }
+                .wallet-more-box:hover {
+                    display: block;
+                }
+                .download {
+                    width: 16px;
+                }
+                .li-img-2 {
+                    width: 20px;
+                    height: 20px;
+                    // margin-left: 4px;
+                    vertical-align: -5px;
+                    transition: all .5s;
+                }
+                .li-img {
+                    width: 20px;
+                    height: 20px;
+                    margin-left: 2px;
+                    cursor: pointer;
+                }
+                /deep/  .li-img {
+                    width: 20px;
+                    height: 20px;
+                    margin-left: 2px;
+                    // color: var(--border-color-base);
+                }
+                .li-img-head {
+                    height: 30px;
+                    width: 30px;
+                    border-radius: 50%;
+                }
+            }
+            li.wallet-order {
+                height: 46px;
+                line-height: 46px;
+                color: white;
+                .wallet-more-box {
+                    transform: translateX(-60px);
+                }
+                .nav-text {
+                    height: 46px;
+                    line-height: 46px;
+                }
+            }
+            li.mobi {
+                img {
+                    width: 56px;
+                    height: 34px;
+                }
+            }
+            li.walletconnect {
+                width: 131px;
+                height: 36px;
+                opacity: 1;
+                background: var(--primary-bg-color);
+                border-radius: 6px;
+                line-height: 36px;
+                text-align: center;
+                font-size: 14px;
+                font-family: FontMedium;
+                color: #ffffff;
+            }
+            li.walletconnect:hover {
+                color: #ffffff;
+            }
+            .userPannel-li {
+                position:relative;
+                .userPannel {
+                    display: none;
+                    position: absolute;
+                    top: 30px;
+                    left: 15px;
+                    z-index: 2;
+                    width: 200px;
+                    height: 500px;
+                    transform: translateX(-50%);
+                }
+                .userPannel:hover {
+                    display: block;
+                }
+            }
+            .userPannel-li:hover{
+                .userPannel {
+                    display: block;
+                }
+            }
+            .download-li {
+                position: relative;
+                z-index: 2;
+                .li-message {
+                    position: relative;
+                    width: 20px;
+                    height:20px;
+                    .li-message-dot {
+                        position:absolute;
+                        z-index: 2;
+                        top: 0;
+                        right: 0;
+                        transform: translateX(50%) translateY(-50%);
+                        padding: 0 4px;
+                        line-height: 16px;
+                        text-align: center;
+                        background: #FF3B30;
+                        border-radius: 16px;
+                        color: white;
+                        font-size: 12px;
+                    }
+                    .li-message-box {
+                        display: block;
+                        position: absolute;
+                        left: 0;
+                        top: 20px;
+                        padding-top: 22px;
+                        width: 380px;
+                        transform: translateX(-50%);
+                    }
+                }
+                .li-message:hover {
+                    .li-message-box {
+                        display: block;
+                    }
+                }
+            }
+            .wallet:hover {
+                .wallet-more-box {
+                    display: block;
+                }
+                .li-img-2 {
+                    transform: rotate(180deg);
+                    color: var(--primary-color);
+                }
+                a {
+                    color: var(--primary-color);
+                }
+
+            }
+            li.getstarted {
+                width: 108px;
+                height: 36px;
+                line-height:36px;
+                margin-left: 16rpx;
+                border-radius: 6px;
+                border: 1px solid var(--border-color-base);
+                color: var(--border-color-base);
+                text-align: center;
+            }
+            li.englishUSD {
+                position: relative;
+                font-size: 14px;
+                width: 100px;
+                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) !important;
+                border-color: var(--primary-color);
+            }
+            li.getstarted:hover span {
+                color: var(--border-color-base) !important;
+            }
+        }
+        .nav {
+            margin-left: 58px;
+        }
+        .nav li:hover,.right-tool li:hover,  .nav-a a:hover, .nav .li:hover{
+            color: var(--primary-color) !important;
+            z-index: 99;
+        }
+        .user-account {
+            // opacity: .8;
+            padding: 10px;
+            border: 1px solid rgba(251,251,252,.15);
+            border-radius: 7px;
+            display: flex;
+            align-items: center;
+            img {
+                width: 24px;
+                height: 24px;
+                margin-right: 8px;
+            }
+        }
+        .nav-a a:hover .user-account {
+            border: 1px solid  rgba(251,251,252,.15);
+        }
+        .nav-a a {
+            color: var(--text-color);
+        }
+        .right-tool {
+            margin-left: auto;
+            li {
+                margin-left: 24px;
+            }
+        }
+        .right-tool-login {
+            li {
+                margin-left: 22px;
+            }
+        }
+    }
+    .header-nav.active {
+        position: fixed;
+        top: -100px;
+        transform: translateY(100px);
+        z-index:999;
+        background: #ffffff;
+        box-shadow: 0px 2px 4px 0px rgba(193,193,193,0.5);
+        transition:transform .3s ease;
+        .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, .li-img, a {
+            color: var(--text-color);
+        }
+        .nav,.right-tool /deep/  .li-img {
+            width: 20px;
+            height: 20px;
+            margin-left: 2px;
+            color: var(--text-color) !important;
+        }
+        li.getstarted {
+            background: var(--primary-bg-color);
+            color: #ffffff;
+            border: 1px solid var(--primary-color);
+        }
+        li.getstarted:hover {
+            background: #1349D7;
+            color: var(--border-color-base);
+            border-color: #1349D7;
+        }
+    }
+    .marl18 {
+        margin-left: 18px;
+    }
+
+    .notice-gray {
+        opacity: .6;
+    }
+
+    .notice-detail {
+        width: 520px;
+        height: 280px;
+        margin-top: -20px;
+    }
+    .notice-viewall {
+        display: flex;
+        align-items: center;
+        color: var(--primary-color);
+        cursor: pointer;
+        .notice-arrow {
+            width: 16px;
+            height: 16px;
+            margin-left: 4px;
+            color: var(--primary-color);
+        }
+    }
+    .title-box {
+        display: flex;
+        height: 56px;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 16px;
+        font-family: FontMedium;
+
+        color: var(--text-color);
+        border-bottom: 1px solid #F5F6FA;
+    }
+    .content {
+        height:168px;
+        overflow-y:auto;
+        overflow-x:hidden;
+        font-family: Font;
+        ∂
+        .title {
+            margin-top: 20px;
+            height: 16px;
+            line-height: 16px;
+            font-size: 16px;
+            color: var(--text-color);
+        }
+        .detail {
+            margin-top: 16px;
+            font-size: 14px;
+            line-height: 22px;
+            color: var(--text-color-placeholder);
+            text-align: left;
+        }
+        .title {
+            font-size: 12px;
+            font-family: Font;
+
+            text-align: left;
+            color: #708599;
+            line-height: 12px;
+        }
+    }
+
+    .btn-box {
+        height: 76px;
+        display:flex;
+        align-items: center;
+        justify-content: center;
+        border-top: 1px solid #F5F6FA;
+        .btn {
+            width: 280px;
+            height: 36px;
+            background: var(--primary-bg-color);
+            border-radius: 6px;
+            line-height: 36px;
+            text-align: center;
+            color: #FFFFFF;
+            font-size:14px;
+        }
+    }
+
+
+    .confirmation-content {
+        width: 400px;
+        height: 120px;
+        .confirmation-desc {
+            margin: 40px 0 50px 0;
+            font-size: 18px;
+            color: var(--text-color-secondary);
+            height: 18px;
+            line-height: 18px;
+            text-align: left;
+        }
+        .conf-btns {
+            display: flex;
+            justify-content: space-between;
+            button {
+                width: 190px;
+                height: 48px;
+                line-height: 48px;
+                border-radius: 6px;
+                text-align: center;
+                font-size: 16px;
+                font-family: Font;
+
+                color: #ffffff;
+            }
+            .cancel {
+                background: #C0C3CC;
+            }
+            .sure {
+                background: var(--primary-bg-color);
+            }
+        }
+    }
+
+</style>