udxcms 1.0.8 → 1.0.10

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

@@ -1,1246 +0,0 @@
-<!--
- * @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>