<template>
|
<header class="header">
|
<div class="container flex-between">
|
<div class="logo-section">
|
<img class="logo" src="@/assets/images/logo.png" alt="" />
|
|
<nav class="navigation flex-center">
|
<div
|
class="nav-item"
|
@click="toRouter('/')"
|
:class="`${$route.path == '/home' ? 'sc_c' : ''}`"
|
>
|
<img
|
src="@/assets/images/stocks-icon_a.png"
|
alt="Stocks"
|
class="nav-icon"
|
v-if="$route.path == '/home'"
|
/>
|
<img
|
src="@/assets/images/stocks-icon.png"
|
alt="Stocks"
|
class="nav-icon"
|
v-else
|
/>
|
<span>{{ $t("hj313") }}</span>
|
</div>
|
|
<div
|
class="nav-item"
|
@click="toRouter('/aiTrading')"
|
:class="`${$route.path == '/aiTrading' ? 'sc_c' : ''}`"
|
>
|
<img
|
src="@/assets/images/ai-trading-icon_a.png"
|
alt="AI Quantitative Trading"
|
class="nav-icon"
|
v-if="$route.path == '/aiTrading'"
|
/>
|
<img
|
src="@/assets/images/ai-trading-icon.png"
|
alt="AI Quantitative Trading"
|
class="nav-icon"
|
v-else
|
/>
|
<span>{{ $t("量化交易") }}</span>
|
</div>
|
|
<div
|
class="nav-item"
|
@click="toRouter('/blockTrading')"
|
:class="`${$route.path == '/blockTrading' ? 'sc_c' : ''}`"
|
>
|
<img
|
src="@/assets/images/block-trading-icon_a.png"
|
alt="Block Trading"
|
class="nav-icon"
|
v-if="$route.path == '/blockTrading'"
|
/>
|
<img
|
src="@/assets/images/block-trading-icon.png"
|
alt="Block Trading"
|
class="nav-icon"
|
v-else
|
/>
|
<span>{{ $t("hj621") }}</span>
|
</div>
|
|
<div
|
class="nav-item"
|
@click="toRouter('/ipo')"
|
:class="`${$route.path == '/ipo' ? 'sc_c' : ''}`"
|
>
|
<img
|
src="@/assets/images/ipo-icon_a.png"
|
alt="IPO"
|
class="nav-icon"
|
v-if="$route.path == '/ipo'"
|
/>
|
<img
|
src="@/assets/images/ipo-icon.png"
|
alt="IPO"
|
class="nav-icon"
|
v-else
|
/>
|
<span>IPO</span>
|
</div>
|
|
<div
|
class="nav-item"
|
@click="toRouter('/fund')"
|
:class="`${$route.path == '/fund' ? 'sc_c' : ''}`"
|
>
|
<img
|
src="@/assets/images/fund-icon_a.png"
|
alt="Fund Investment"
|
class="nav-icon"
|
v-if="$route.path == '/fund'"
|
/>
|
<img
|
src="@/assets/images/fund-icon.png"
|
alt="Fund Investment"
|
class="nav-icon"
|
v-else
|
/>
|
<span>{{ $t("fi1") }}</span>
|
</div>
|
|
<div
|
class="nav-item"
|
@click="toRouter('/account')"
|
:class="`${$route.path == '/account' ? 'sc_c' : ''}`"
|
>
|
<img
|
src="@/assets/images/account-icon_a.png"
|
alt="Account"
|
class="nav-icon"
|
v-if="$route.path == '/account'"
|
/>
|
<img
|
src="@/assets/images/account-icon.png"
|
alt="Account"
|
class="nav-icon"
|
v-else
|
/>
|
<span>{{ $t("Account") }}</span>
|
</div>
|
</nav>
|
</div>
|
|
<div class="user-actions">
|
<template v-if="!$store.state.token">
|
<el-button round @click="toRouter('/login')">{{
|
$t("dlan")
|
}}</el-button>
|
<el-button
|
class="register-btn"
|
type="success"
|
round
|
@click="toRouter('/register')"
|
>
|
{{ $t("hj15") }}
|
</el-button>
|
</template>
|
<template v-else>
|
<el-dropdown @command="userChange">
|
<div class="flex-center">
|
<img
|
src="@/assets/images/avatar.png"
|
alt="avatar"
|
class="avatar"
|
/>
|
<div>
|
<h5 class="av_phone">{{ userInfo.phone }}</h5>
|
<div class="av_id">ID:{{ userInfo.idCard }}</div>
|
</div>
|
</div>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item command="ac">{{
|
$t("Account")
|
}}</el-dropdown-item>
|
<el-dropdown-item command="lo">{{ $t("lo1") }}</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</template>
|
|
<div class="language-selector">
|
<el-dropdown @command="languageChange">
|
<img
|
src="@/assets/images/globe-icon.png"
|
alt="Language"
|
class="globe-icon"
|
/>
|
<el-dropdown-menu slot="dropdown">
|
<el-dropdown-item command="es">español</el-dropdown-item>
|
<el-dropdown-item command="en">English</el-dropdown-item>
|
</el-dropdown-menu>
|
</el-dropdown>
|
</div>
|
</div>
|
</div>
|
</header>
|
</template>
|
|
<script>
|
import * as api from "@/axios/api.js";
|
import { mapState } from "vuex";
|
export default {
|
name: "Header",
|
data() {
|
return {
|
userInfo: {},
|
};
|
},
|
computed: {
|
...mapState(["token"]),
|
},
|
watch: {
|
token: {
|
handler(newVal) {
|
if (!!newVal) {
|
this.getInfo();
|
}
|
},
|
immediate: true,
|
},
|
},
|
methods: {
|
// 用户操作
|
userChange(command) {
|
switch (command) {
|
case "ac": // 跳转个人中心
|
if (this.$route.path !== "/account") {
|
this.$router.push("/account");
|
}
|
break;
|
case "lo": // 退出登录
|
this.$store.commit("undataToken", null);
|
window.localStorage.removeItem("USERTOKEN");
|
if (this.$route.path !== "/login") {
|
this.$router.replace("/login");
|
}
|
break;
|
default:
|
break;
|
}
|
},
|
// 语言切换
|
languageChange(command) {
|
window.localStorage.setItem("language", command);
|
this.$i18n.locale = command;
|
},
|
// 获取用户信息
|
async getInfo() {
|
let data = await api.getUserInfo();
|
this.userInfo = data.data;
|
this.$store.commit("setUserInfo", data.data);
|
},
|
toRouter(path) {
|
if (!path || this.$route.path == path) return;
|
|
const whiteList = ["/login", "/register"];
|
const token =
|
this.$store.state.token ||
|
window.localStorage.getItem("USERTOKEN") ||
|
null;
|
|
if (whiteList.includes(path) || (token && !whiteList.includes(path))) {
|
this.$router.push(path);
|
}
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.header {
|
background-color: white;
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
padding: 0 16px;
|
position: sticky;
|
top: 0;
|
z-index: 100;
|
height: 64px;
|
}
|
|
.container {
|
min-width: 1024px;
|
width: 100%;
|
height: 100%;
|
margin: 0 auto;
|
// padding: 0 15px;
|
}
|
|
.logo-section {
|
display: flex;
|
align-items: center;
|
}
|
|
.logo {
|
// font-size: 20px;
|
// font-weight: bold;
|
// color: #333;
|
height: 36px;
|
}
|
|
.pro {
|
color: #8e44ad;
|
font-weight: bold;
|
}
|
|
.nav-item {
|
font-size: 18px;
|
padding: 0 15px;
|
color: #666;
|
white-space: nowrap;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
cursor: pointer;
|
}
|
|
.nav-icon {
|
width: 24px;
|
height: 24px;
|
margin-right: 4px;
|
}
|
|
.user-actions {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
.avatar {
|
width: 40px;
|
height: 40px;
|
border-radius: 50%;
|
margin-right: 8px;
|
}
|
|
.av_phone {
|
color: #333;
|
font-size: 16px;
|
font-weight: 700;
|
}
|
|
.av_id {
|
color: #999;
|
font-size: 12px;
|
}
|
}
|
|
.login-link {
|
color: #333;
|
text-decoration: none;
|
font-size: 14px;
|
}
|
|
.register-btn {
|
background-color: #c4d600;
|
color: white;
|
border: none;
|
}
|
|
.language-selector {
|
cursor: pointer;
|
margin-left: 16px;
|
}
|
|
.globe-icon {
|
width: 36px;
|
height: 36px;
|
}
|
</style>
|
