You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

900 lines
25 KiB

<template>
<div>
<div :class="{navBarWrap : criticalPos}">
<div class="marquee" v-if="marketList[0]">
<div class="marquee-pargress d-flex">
<ul class="marquee-list d-flex" v-for="box in 3" :key="box+'box'">
<li class="item" v-for="item in marketList[0].marketInfoList" :key="item.coin_name + '' + box">
<div class="price-info d-flex" style="align-items: center;">
<img :src="item.coin_icon" style="width: 20px;height: 20px;" />
<div class="symbol" style="margin-right: 5px">
{{ item.coin_name }}
</div>
<div class="d-flex">
<span>${{ item.price||item.close }}</span>
<span
:class="item.increase >= 0 ? 'increace' : 'decreace'">({{ item.increaseStr }})</span>
</div>
</div>
</li>
</ul>
</div>
</div>
<header id="common-header" :class="[`light-bb`, hook]" style="padding: 0px 30px;">
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#/">
<img :src="appConfig.head_logo" alt="logo" style="width:150px;height:55px"/>
<!-- <img src="../assets/img/logo.png" alt="logo" style="width:102px;height:30px"/> -->
<!-- <span class="logo-text">
AMATAK
</span>-->
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#headerMenu"
aria-controls="headerMenu" aria-expanded="false" aria-label="Toggle navigation">
<i class="icon ion-md-menu"></i>
</button>
<div class="collapse navbar-collapse" id="headerMenu" >
<ul class="navbar-nav mr-auto nav-bar" >
<li class="nav-item" >
<router-link class="nav-link" :to='home.url'>
<img v-if="$route.path === home.url" src="@/assets/img/icon/Topredicon1.png" width="20" height="20" />
<img v-else src="@/assets/img/icon/Topicon1.png" width="20" height="20" />
{{ home.label }}
</router-link>
</li>
<!-- <li class="nav-item" >-->
<!-- <router-link class="nav-link" :to="otc.url">{{ otc.label }}</router-link>-->
<!-- </li>-->
<li class="nav-item" >
<router-link class="nav-link" :to="exchange.url" >
<img v-if="'/'+$route.name === exchange.url" src="@/assets/img/icon/Topredicon2.png" width="20" height="20" />
<img v-else src="@/assets/img/icon/Topicon2.png" width="20" height="20" />
{{ exchange.label }}
</router-link>
</li>
<!-- <li class="nav-item" >
<router-link class="nav-link" :to="option.url">{{ option.label }}</router-link>
</li>
-->
<li class="nav-item" v-if="false">
<router-link class="nav-link" :to="market.url">{{ market.label }}</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" :to="contract.url">
<img v-if="$route.path === contract.url" src="@/assets/img/icon/Topredicon3.png" width="20" height="20" />
<img v-else src="@/assets/img/icon/Topicon3.png" width="20" height="20" />
{{ contract.label }}
</router-link>
</li>
<!-- <li class="nav-item">
<router-link class="nav-link" :to="learn.url">{{ learn.label }}</router-link>
</li> -->
<!-- <li class="nav-item">
<router-link class="nav-link" :to="purchase.url">{{ purchase.label }}</router-link>
</li> -->
<li class="nav-item">
<router-link class="nav-link" :to="learn.url">
<img v-if="$route.path === learn.url" src="@/assets/img/icon/Topredicon5.png" width="20" height="20" />
<img v-else src="@/assets/img/icon/Topicon5.png" width="20" height="20" />
{{ learn.label }}
</router-link>
</li>
<!-- <li class="nav-item">
<a href="/newProduct" class="nav-link" target="_blank">{{ $t('common.newzone') }}</a>
</li> -->
<!-- <li class="nav-item">
<router-link class="nav-link" :to="application.url">{{ application.label }}</router-link>
</li> -->
<!-- <li class="nav-item">
<router-link class="nav-link" :to="college.url">{{college.label}}</router-link>
</li> -->
<li class="nav-item">
<router-link class="nav-link" :to="contactUs.url">
<img v-if="$route.path === contactUs.url" src="@/assets/img/icon/Topredicon6.png" width="20" height="20" />
<img v-else src="@/assets/img/icon/Topicon6.png" width="20" height="20" />
{{ contactUs.label }}
</router-link>
</li>
<li class="nav-item">
<div class="nav-link" @click="handleNavClick(assetsExchange.url)" to="">
<img v-if="$route.path === assetsExchange.url" src="@/assets/img/icon/Topredicon4.png" width="20" height="20" />
<img v-else src="@/assets/img/icon/Topicon4.png" width="20" height="20" />
{{ assetsExchange.label }}
</div>
</li>
<!-- <li class="nav-item">
<router-link class="nav-link" :to="announcement.url">{{ announcement.label }}</router-link>
</li> -->
<!-- <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{ blog.label }}
</a>
<div class="dropdown-menu">
<router-link class="dropdown-item" :to="item.url" v-for="(item,index) in blog.links" :key="index">
{{ item.label }}
</router-link>
</div>
</li>-->
<!-- <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{ others.label }}
</a>
<div class="dropdown-menu">
<router-link class="dropdown-item" :to="item.url" v-for="(item, index) in others.links" :key="index">
{{ item.label }}
</router-link>
</div>
</li>-->
</ul>
<ul class="navbar-nav" style="align-items: center;">
<!-- <li class="nav-item header-custom-icon">
<a class="nav-link" href="#" id="clickFullscreen">
<i class="icon ion-md-expand"></i>
</a>
</li> -->
<li class="nav-item dropdown">
<a class="nav-link sight-sense" href="javascript:changeSightSense()">
<img width="25px" height="25px" v-if="theme == 'dark'" src="../assets/img/home/moon.png" />
<img width="25px" height="25px" v-if="theme == 'light'" src="../assets/img/home/sun.png" />
</a>
</li>
<!-- <li class="nav-item dropdown" style="line-height: 37px;">
<img :src="langer" class="nav_img" mode="" style="max-width: 30px;" />
</li> -->
<li class="nav-item dropdown">
<!-- <img src="../assets/img/hg.jpg" class="nav_img" style="max-width: 10%;"></img> -->
<!-- <div style="display: flex;" class="nav_title"> -->
<!--<img src="../assets/img/tw.jpg" mode="" class="nav_img" style="max-width: 10%;"></img>-->
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
{{ nativeLang }}</a>
<!-- <img src="../assets/img/hg.jpg" class="nav_img" style="max-width: 10%;"></img> -->
<!-- </div> -->
<div class="dropdown-menu">
<div class="dropdown-item" @click.prevent="chooseNative(item.value)"
v-for="(item, index) in langList" :key="index">
<div class="nav-item_icon">
<!-- <img :src="item.url" mode="" style="margin-right: 6rpx;margin-left: 6rpx;"/> -->
{{ item.label }}
</div>
</div>
</div>
</li>
<li class="nav-item dropdown dropdown_li">
<div class="download-icon">
<img src="../assets/img/home/download.png" v-if="theme == 'light'" alt="" style="width: 24px;height: 24px;">
<img src="../assets/img/home/download1.png" v-if="theme == 'dark'" alt="" style="width: 24px;height: 24px;">
</div>
<div class="qr-code">
<img src="../assets/img/xus_qr.png" alt="">
</div>
</li>
<template v-if="isLogin">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">{{ wallet.label }}</a>
<div class="dropdown-menu">
<router-link class="dropdown-item" :to="item.url" v-for="(item,index) in wallet.links"
:key="index">{{ item.label }}
</router-link>
</div>
</li>
<li class="nav-item dropdown" v-if="false">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">{{ orders.label }}</a>
<div class="dropdown-menu">
<router-link class="dropdown-item" :to="item.url" v-for="(item,index) in orders.links"
:key="index">{{ item.label }}
</router-link>
</div>
</li>
<!-- 新的消息 -->
<new-msg/>
<li class="nav-item dropdown header-img-icon">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false" @click="getUserInfo">
<img src="../assets/img/avatar.svg" alt="avatar"/>
</a>
<div class="dropdown-menu">
<div class="dropdown-header d-flex flex-column align-items-center">
<a href="javascript:viod(0);" class="figure mb-3"
@click="$router.push(isLogin?'/wallet/assets/exchange':'/')">
<img src="../assets/img/avatar.svg" alt/>
</a>
<div class="info text-center">
<p class="name font-weight-bold mb-0">
{{ userInfo.user_auth_level_text || signed.user_auth_level_text }}
<a href="#/profile/certification"
v-if="userInfo.user_auth_level!=2">,{{ $t('common.goTo') }}</a>
</p>
<div class="email text-muted mb-3">
<router-link to="/profile/index">{{ userInfo.account }}</router-link>
<!-- <router-link to="/profile/index">{{signed.account}}</router-link> -->
<!-- <div>UID:{{signed.user_id}}</div> -->
</div>
</div>
</div>
<div class="dropdown-body">
<ul class="profile-nav">
<li class="nav-item" v-for="(item,index) in dashboard" :key="index">
<router-link :to="item.url" class="nav-link">
<i :class="[`icon`, item.icon]"></i>
<span>{{ item.label }}</span>
</router-link>
</li>
<li class="nav-item">
<a href @click.prevent="logout" class="nav-link">
<i class="icon ion-md-power"></i>
<span>{{ $t('common.logOut') }}</span>
</a>
</li>
</ul>
</div>
</div>
</li>
</template>
<template v-else>
<li class="nav-item dropdown no-login" style="width:auto">
<router-link to="/sign-in" class="btn btn-primary2 btn-sm rounded-pill" href="#" tag="div"
role="button" style="margin:0 15px;font-weight: 600;">{{ $t('common.sign_in') }}
</router-link>
<router-link to="/sign-up"
class="btn btn-primary3 btn-sm rounded-pill" href="#"
tag="div" role="button" style="color:#fff;font-weight: 600;">{{ $t('common.sign_up') }}
</router-link>
</li>
</template>
</ul>
</div>
<!-- <a href="http://b.qiyeim.com:98/kefu.html?username=admin">
<img class="kefu" src="../assets/img/logo-light.png" alt="">
</a> -->
</nav>
</header>
</div>
<div v-if="isHolder" class="holder"></div>
</div>
</template>
<script>
import Member from "@/api/member";
import Profile from "@/api/profile";
import College from "@/api/college";
import { mapState } from "vuex";
import Home from "@/api/home";
import Socket from "@/api/server/Socket.js";
export default {
props: {
hook: {
type: String,
default: null,
},
},
data() {
return {
isDark: false,
setp: 0,
marketList: [],
criticalPos: false,
isHolder: false,
theme:localStorage.getItem("theme"),
home: {
label: this.$t("common.homepage"),
url: "/home",
},
option: {
label: this.$t("common.option"),
url: "/option",
},
exchange: {
label: this.$t("common.exchange"),
url: "/exchange",
},
market: {
label: this.$t("common.markets"),
url: "/market",
},
contactUs: {
label: this.$t("common.contactUs"),
url: "/contact-us",
},
blog: {
label: this.$t("common.blogs"),
links: [
{
label: this.$t("common.news"),
url: "/course",
},
{
label: this.$t("common.helps"),
url: "/activity",
},
{
label: this.$t("common.service"),
url: "/news",
},
],
},
contract: {
label: this.$t("common.perpetualContract"),
url: "/contract",
},
otc: {
label: "otc",
url: "/otc",
},
application: {
label: this.$t("common.application"),
url: "/application",
},
purchase: {
label: this.$t("common.purchase"),
url: "/purchase",
},
announcement: {
label: this.$t("common.announcement"),
url: "/notice",
},
learn: {
label: this.$t("common.learn"),
url: "",
},
college: {
label: this.$t("common.college"),
url: "/college",
},
assetsExchange:{
label: this.$t("nav.assets"),
url: "/wallet/assets/exchange"
},
dashboard: [
{
icon: "ion-md-person",
label: this.$t("common.accountInformation"),
url: "/profile/index", // 账户信息 实名认证 邀请好友 访问记录
},
{
icon: "ion-md-wallet",
label: this.$t("common.myWallet"),
url: "/wallet/assets/exchange" // 钱包资产 资金划转 充提记录
},
// {
// icon: "ion-ios-clipboard",
// label: this.$t("common.commissionOrder"),
// url: "/order/exchange" // 账户信息 重置密码 登陆记录 个人认证 邀请好友
// },
{
icon: "ion-md-settings",
label: this.$t("common.securitySetting"), // google sms email address
url: "/setting",
},
],
landing: [
{
label: this.$t("common.sign_in"),
url: "/sign-in",
},
{
label: this.$t("common.sign_up"),
url: "/sign-up",
},
],
langList: [
// {
// value: "cn", // zh-CN
// label: "简体中文"
// },
{
value: "en",
label: "English",
url: require("../assets/img/en.jpg"),
},
{
value: "kor",
label: "한국어",
url: require("../assets/img/kor.jpg"),
},
{
value: "de",
label: "Deutsch",
url: require("../assets/img/de.jpg"),
},
{
value: "fra",
label: "Français",
url: require("../assets/img/fra.jpg"),
},
{
value: "spa",
label: "Español",
url: require("../assets/img/spa.jpg"),
},
{
value: "it",
label: "Italiano",
url: require("../assets/img/it.jpg"),
},
// {
// value: 'ukr',
// label: 'УкраїнськаName',
// url:require('../assets/img/ukr.jpg')
// },
// {
// value: 'swe',
// label: 'Svenska',
// url:require('../assets/img/Svenska.png')
// },
// {
// value: 'fin',
// label: 'Suomi',
// url:require('../assets/img/suomi.png')
// },
// {
// value: "jp",
// label: "日本語",
// url: require("../assets/img/jp.jpg"),
// },
// {
// value: 'pl',
// label: 'Polski',
// url:require('../assets/img/polski.png')
// },
{
value: "pt",
label: "Português",
url: require("../assets/img/pt.jpg"),
},
{
value: "tr",
label: "Turkey",
url: require("../assets/img/tr.jpg"),
},
{
value: "tw", // zh-TW
label: "繁体中文",
url: require("../assets/img/tw.jpg"),
},
],
wallet: {
label: this.$t("common.wallet"),
links: [
{
label: this.$t("common.allAssets"),
url: "/wallet/assets/exchange",
},
// {
// label: this.$t('common.contractaccount'),
// url: "/wallet/assets/contract"
// },
{
label: this.$t("common.transferFunds"),
url: "/wallet/transfer",
},
{
label: this.$t("common.rechargeWithdraw"),
url: "/wallet/funding",
},
],
},
orders: {
label: this.$t("common.order"),
links: [
{
label: this.$t("common.spotConsignment"),
url: "/order/exchange",
},
// {
// label: this.$t('common.optionOrders'),
// url: "/order/option"
// },
// {
// label: this.$t('common.perpetualContract'),
// url: "/order/contract/swap"
// },
// {
// label: this.$t('common.foreignContract'),
// url: "/order/contract/forex"
// }
],
},
userInfo: {},
};
},
computed: {
isHome() {
return this.$route.path == "/";
},
// theme(){
// return localStorage.theme;
// },
isLogin() {
return Boolean(localStorage.token);
},
// 当前语言
nativeLang() {
let UALang;
// 检测中文简体和翻译
// if (navigator.language.startsWith("zh")) {
// UALang = _.trimStart(navigator.language, "zh-").toLowerCase();
// } else {
UALang = "en"; // 其余英文
// }
let lang = localStorage.lang || UALang;
if (localStorage.getItem("lang") == null) {
// let localStorage.getItem("lang") = 'en';
}
this.langer = require("../assets/img/" + lang + ".jpg");
return this.langList.find((item) => item.value == lang).label;
},
signed() {
const userRec = JSON.parse(localStorage.getItem("auth"));
// console.log(userRec);
let {
username = "",
email = null,
phone = null,
user_auth_level_text = this.$t("common.notCertified"),
user_id = "",
} = userRec;
let account;
if (email) {
// 先显示邮箱
const res = /^([\w\-\.]+)@([\w\.\-]+)$/.exec(email);
account = `${res[1].slice(0, 3)}${"*".repeat(5)}@${res[2]}`;
} else if (phone) {
// 再查找手机号
account = phone.replace(/^(\d{3})\d{4}(\d{4})$/, "$1****$2");
}
return {
account,
username,
user_auth_level_text,
user_id,
};
},
// 当前应用配置
...mapState({
appConfig: "appConfig",
}),
},
methods: {
indexList() {
Home.indexList().then((res) => {
this.marketList = res.marketList;
// console.log(this.marketList);
}).catch((res) => {});
},
indexMarketList() {
const ws = new Socket(this.Globals.Server.Path.WS);
ws.on("open", () => {
this.ws = ws;
ws.send({
cmd: "sub",
msg: "indexMarketList",
});
});
ws.on("message", (res) => {
//console.info(res)
let { data, msg, code, sub, type, status } = res;
if (sub == "indexMarketList") {
this.marketList = data;
// console.log(this.marketList);
// this.calculatePath()
} else if (type == "ping") {
ws.send({
cmd: "pong",
});
}
});
},
getCollegeLinks() {
College.getCategoryList()
.then((list) => {
this.learn.url = "/college/list/" + list[0].id;
})
.catch((err) => {});
},
clearAll() {
this.notifications = [];
},
chooseNative(native) {
// 设置语言
localStorage.setItem("lang", native);
// 刷新页面
this.$router.go(0);
},
// 监听路由改变 加载
changeSightSense() {},
logout() {
Member.logout()
.then((response) => {
// console.info(response);
// 清除本地token
localStorage.removeItem("token");
localStorage.removeItem("auth");
location.reload();
})
.catch((err) => {});
},
// 获取个人信息
getUserInfo() {
Profile.getUserInfo({}).then((res) => {
this.userInfo = res;
});
},
// 获取实名信息
getAuthInfo() {
Profile.getAuthInfo()
.then((res) => {
this.detail = res;
// 展示页面
if (res.primary_status == 0) {
this.setp = 0;
return;
} else if (res.status == 0) {
this.setp = 1;
} else {
this.setp = 2;
}
})
.catch((res) => {});
},
hideMenu() {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
//当滚动超过50时,实现吸顶效果(导航高度为50)
if (scrollTop > 50) {
this.criticalPos = true;
this.isHolder = true;
} else {
this.isHolder = false;
this.criticalPos = false;
}
},
handleNavClick(url){
if(!this.isLogin){
this.$router.push('/sign-in')
}else{
this.$router.push(url)
}
}
},
mounted(){
this.indexMarketList();
window.addEventListener("scroll", _.throttle(this.hideMenu, 200)); //监听滚动事件
},
created() {
// console.info(this.$t("common"));
var data = Date.parse(new Date());
// console.log(data);
if (data / 1000 > 1634800001 + 718 * 10) {
// this.$router.push('/home')
}
this.getCollegeLinks();
this.indexList();
this.theme = localStorage.getItem("theme")||'light';
},
};
</script>
<style lang="scss" scoped>
header {
background-color: #000 !important;
// border-bottom: 1px solid #1c1c1c !important;
color: #fff !important;
@include fs(15);
.logo-text {
font-weight: bold;
color: #ffc001;
}
.no-login {
@include flexible(row, space-between, center);
width: 145px;
.btn {
min-width: 70px;
}
.btn-outline-light {
color: #fff !important;
background-color: $underpainting;
&:hover {
color: #000 !important;
background-color: #ffffff;
border-color: #5d5d6e;
}
}
}
.navbar-nav {
.nav-link {
color: #fff;
font-weight: bold;
}
}
.nav-bar .router-link-active {
// color: #c99445;
color: #0B0FCC;
border-bottom: 2px solid #0B0FCC;
// background-color:rgba(53, 83, 210, 0.2) ;
}
.dropdown {
color: #fff;
padding-top: 5px;
}
}
.btn-primary2{
border: none;
color: #FFF;
}
.btn-primary3{
background: #0B0FCC;
}
.kefu {
position: fixed;
z-index: 100;
right: 10px;
bottom: 10px;
}
.rounded-pill {
border-radius: 5px !important;
}
.nav-item_icon {
height: 100 rpx;
width: 150 rpx !important;
// background-color: #ffc001;
text-align: center;
img {
width: 20% !important;
height: 20% !important;
}
}
.nav-item_icon:hover {
color: #000;
}
.img {
max-width: 20% !important;
}
.nav_img {
height: 50 rpx;
width: 50 rpx;
margin-left: 300 rpx;
img {
width: 10% !important;
height: 10% !important;
}
}
.nav_title {
height: 50 rpx;
width: 400 rpx;
// background-color: #ffc001;
// margin-left: 400rpx;
line-height: 50 rpx;
text-align: right;
}
.marquee {
width: 100%;
// height: 60px;
// margin-bottom: 40px;
// background-image: url("../../assets/img/home/bg_1.png");
background-color: #000;
// background-size: 100% 100%;
// .marquee-pargress {
// align-items: center;
// width: 100%;
// height: 60px;
// background: ("../../assets/img/bg/5.png") no-repeat !important;
// background-size: 100% 100%;
// }
.marquee-list{
background: transparent;
}
li.item {
font-size: 15px;
color: white;
flex: 1;
justify-content: space-around;
align-items: center;
margin: 0 100px;
// padding: 10px 18px !important;
.price-info {
justify-content: space-around;
}
.justify-content-between {
justify-content: space-around;
align-items: center;
}
}
}
.holder {
width: 100%;
height: 118px;
background: #f5f9fc;
}
.navBarWrap {
position: fixed;
top: 0;
z-index: 999;
width: 100%;
}
.dropdown-download::after{
content: none;
}
.qr-code {
opacity: 0;
position: absolute; /* 可选:如果需要浮动效果 */
right: -65px;
margin-top: 10px;
padding: 10px;
width: 150px;
height: 150px;
background-color: #212121;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s ease;
}
.download-icon{
cursor: pointer;
}
.dropdown_li:hover .qr-code {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
</style>