<template>
|
<div class="dropdown">
|
<!-- 港股等 -->
|
<el-tooltip v-if="tips" :content="t('message.user.dataNotReady')">
|
<button class="dropbtn">
|
{{ t(`message.user.${title}`) }}
|
</button>
|
</el-tooltip>
|
<!-- 市场 -->
|
<button v-else class="dropbtn" :class="{'menu-active': false}" @click="gotoPage(url,title)">
|
<span v-if="title !== 'zhanghu'">{{ t(`message.user.${title}`) }}</span>
|
<div v-else style="float: left;margin-top: 16px;">
|
<svg width="22" height="22" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg" class="svgView"><path data-v-3207902a="" fill="black" d="M7 0C3.136 0 0 3.136 0 7C0 10.864 3.136 14 7 14C10.864 14 14 10.864 14 7C14 3.136 10.864 0 7 0ZM7 2.8C8.351 2.8 9.45 3.899 9.45 5.25C9.45 6.601 8.351 7.7 7 7.7C5.649 7.7 4.55 6.601 4.55 5.25C4.55 3.899 5.649 2.8 7 2.8ZM7 12.6C5.579 12.6 3.899 12.026 2.702 10.584C3.92812 9.622 5.44153 9.09916 7 9.09916C8.55847 9.09916 10.0719 9.622 11.298 10.584C10.101 12.026 8.421 12.6 7 12.6Z"></path></svg>
|
</div>
|
<img v-if="title == 'licaijijin' || title == 'kuangchisuocang' " class="icon-arrow-down" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAAXNSR0IArs4c6QAABYVJREFUWEftl12oVFUUx//rnJl7Jz+pIG4WhvUUpEKEeL1zZiYloYLoxUDqIciM6qFEqSwiu5AUmvkSREIvQR/0ZEUPQnbnnNEQffCSGmEmRKVFQl6z5uucFWvtvc98eO84zo3woXnZc+bj7N/813/91x7CVfagq4wHswLiyj2LkFRHkRn5glZ98ve/8eNmBxQGk5wky8ijU2BvIxXD/bOFGhiIj5fm4ffmhU4A3krFA6/PBmpwoErpLm42DhMRmBmy6oNoBxWi5waFGhwoKjyDJNntNu6C2kiFaM8gUIMDTeS/YuISoVMhBoPgVZHJ3kFj+09dKdRAQHxozfWo1n8F2G/fsEMl4DMqVh74b4DKhS3M8Y5L/AOonyRMRDlkMktpbOIYh8G7QJJFkH2caKLZC/KKFeKT9w7jlz+/B/jmHuq4t96kYmULl/M/AFgCog8RhA8TEc8E1ROIT5dy+DFZQcUwTM0bjm0F03ZVQpuKwOSbhOU47Thbvm8xNzeKi7VzzImvncj0CpWi8cGAyoUnAN6J7MgNksQc5W9FQpMgb57tccAbgqCl5UtqciV0AGKp3zYwv9oCoCZ8f5TyE0emg+qtUDn/OYD7wXwfiov2ITwbgfxR9oaMIv4w1DIddyFwXDWAzSoISSzqpL5SJfkoipU7pyvdjEB8cPVNaNZPg5EFvEfh+SvAyVPsDQPesAlCeW70gba7loQBUUleljWpm89wrIKkpfa8B6kQ7e1WaWagMNgF5k3qBdAkPH+5wJA/DPg5gFypxBYWMK6m5UNcVRhRS72W1MBJs5XooK+pGK3qC4gPrL4Fjfp3IIgEAPlaHng59YwqI1CyvaxqcOsb6yEtmypUA2K7OpXUc2D4c0ZobN9v7VDTKsTl/E4Am1UdLwv1jPhFFLIwqY/k2pZKsRRIymXUoXQVhaSUTc0oc29vPRWij3oC8fF1Qzh35gwnfJ16QtTJLjTKiBqqkF3l53g52+oqpYWpWRinTh1ITAnRvJh6iTzvJSpE23sDRXcv57h+1MBkTKnEL75RR1XKLmjBabfZ8klpBEo3t4aW1xrnwXHN+EhWGIODaBcVos2XAcqvR4IPtCNEHWfkjIMQL4la1kdOOY0dY2DIMUlNbQG4bq71dSldw5ib6B0qRE/2BgqDZ8H8Vmpm8Ygoot5xCtkSOnMLlGyg5q0CsZTIKNNh6saU+ogk0fVUQNuoWGkLzbToLUYOgw2cJHucfy4pkQIutF031PKXy53mVFoeNXb9vDG6U6kxlWYSPO8xCsL3eitUGXsIMX1sukA8lANn5oNkpSFQJgdk5nd0nJbQKSSlad+8vdsaAlfXTtP7+7SSgsqh3kDlwhIgkelshqYtFayHXASkneY6T8ycwrj8ceaW8k21eUpMTT+hEC7uHh8z5dAJALcz/FYyp4FoSybXkic2o7T6LqltIGpHKYg1taa18RBAu6kYbeovqcNgHMwvO2O3+0jL5jpMklrnmZvuLq2tqcXkAikQavILtsO8KoZpGa0MT/YHNLl2Lv746wQzL5ak1u6yIGaemWDUZHajQ7W2k16T2ra8qKPPzSjReebTCxRU3uiGaYvWS9/iMJBjhxw/7CzrSmlRSZRxE9/9HXLnIZtDrbY3ZgZwBIXM6ExH2d7noYngRRC/pkcGLzPtHDMqmRmsm7s55bqLa2b2Gu8cQ2bOmu6B2rPLurXiMHgE4LfBWCBzbeDzEJL34V37NOU/7fq327ljX4d8DoMbwfw8GBvg+XPdkUP9ZM9k5p8rmxMk2wMa1xlx80vAH6dSOZrOM32ZeqYv8sF116B5di3gl0BYCsZt8HMLgWQeGDI1p5DUz4DxDYgOw6e9tGr/z/2AuM/0pdCV3HC2n/0f6HIK/gMJPv5Dn5EZlwAAAABJRU5ErkJggg==" />
|
<span v-if="menuList.length" class="icon-arrow"></span>
|
<img
|
v-if="menuList.length"
|
class="icon-arrow-down"
|
src="@/assets/images/icon/icon_arrow_down.png"
|
/>
|
</button>
|
|
<div class="dropdown-content" v-if="menuList.length">
|
<div
|
class="dropdown-item dropdown-right-item pl-20" style="line-height: 40px;color: #000000"
|
v-if="title == 'zhanghu' && store.existToken"
|
>
|
{{ store.userInfo.username }}
|
</div>
|
<div
|
:class="`${
|
isRight ? 'dropdown-item dropdown-right-item' : 'dropdown-item'
|
}`"
|
@click="gotoRoute(item)"
|
v-for="(item, i) in menuList"
|
:key="i"
|
>
|
<div v-if="isRight">
|
<img :src="item.iconPath" class="dropdown-item-right-icon" />
|
<p class="dropdown-item-title">
|
{{ t(`message.user.${item.title}`) }}
|
</p>
|
</div>
|
<div v-else>
|
<img :src="item.iconPath" class="dropdown-item-icon" />
|
<p class="dropdown-item-title">
|
{{ t(`message.home.${item.title}`) }}
|
</p>
|
<p class="dropdown-item-content">
|
{{ t(`message.home.${item.desc}`) }}
|
</p>
|
<div class=" arrow-right-icon mouse-cursor">
|
<el-icon ><ArrowRightBold /></el-icon>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { useRoute, useRouter } from "vue-router";
|
import { useUserStore } from "@/store/user";
|
import { useI18n } from "vue-i18n";
|
import { removeStorage } from "@/utils";
|
import Axios from "@/api/login.js";
|
import { ElTooltip } from "element-plus";
|
const store = useUserStore();
|
const router = useRouter();
|
const { t } = useI18n();
|
const crrentTitle = ref('')
|
|
const props = defineProps({
|
title: {
|
type: String,
|
default: "",
|
},
|
url: {
|
type: String,
|
default: "",
|
},
|
menuList: {
|
type: Array,
|
default: [],
|
},
|
isRight: {
|
type: Boolean,
|
default: false,
|
},
|
tips: {
|
type: Boolean,
|
default: false,
|
},
|
});
|
|
const gotoPage = (path,title) => {
|
crrentTitle.value = title
|
if (!path) {
|
return;
|
}
|
router.push(path);
|
};
|
|
const gotoRoute = (item) => {
|
const { urlPath, urlQuery } = item || {};
|
if (!urlPath) {
|
return;
|
}
|
if (urlPath.includes("loginOut")) {
|
Axios.loginOut().then((res) => {
|
if (res.code == "0") {
|
store.resetUserInfo();
|
removeStorage("spToken");
|
removeStorage("username");
|
router.push("/");
|
return;
|
}
|
});
|
return;
|
}
|
let route = urlPath;
|
if (urlQuery) {
|
route = {
|
path: urlPath,
|
query: urlQuery,
|
};
|
}
|
router.push(route);
|
};
|
</script>
|
|
<style scoped>
|
.pl-20 {
|
padding-left: 20px;
|
}
|
|
.dropbtn {
|
background-color: #ffffff;
|
color: #000000;
|
padding: 0 16px;
|
font-weight: 600;
|
font-size: 14px;
|
border: none;
|
cursor: pointer;
|
}
|
|
.dropdown {
|
position: relative;
|
display: inline-block;
|
}
|
|
.dropdown-content {
|
display: none;
|
position: absolute;
|
background-color: #fff;
|
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2);
|
z-index: 100;
|
padding: 12px 0;
|
border-radius: 12px;
|
width: 290px;
|
box-sizing: border-box;
|
}
|
|
/* 账户 */
|
.dropdown-content:last-child {
|
left: -80px;
|
}
|
|
.dropdown-content a {
|
color: black;
|
padding: 12px 16px;
|
text-decoration: none;
|
display: block;
|
}
|
|
.dropdown:hover .dropdown-content {
|
display: block;
|
}
|
|
.dropdown:hover .dropbtn {
|
color: #1d91ff;
|
}
|
|
.dropdown-item {
|
height: 70px;
|
width: 290px;
|
left: 0;
|
top: 0;
|
border-radius: 0;
|
background-color: #fff;
|
position: relative;
|
}
|
|
.dropdown-item:hover {
|
background-color: #f4f4f4;
|
opacity: 0.9;
|
}
|
|
.dropdown-right-item,
|
.dropdown-right-item:hover {
|
height: 40px;
|
width: 260px;
|
}
|
|
.dropdown-item a {
|
color: #ffffff;
|
}
|
|
.dropdown-item-icon {
|
width: 20px;
|
height: 20px;
|
position: absolute;
|
left: 5%;
|
top: 40%;
|
}
|
.dropdown-item-right-icon {
|
width: 32px;
|
height: 32px;
|
position: absolute;
|
left: 5%;
|
}
|
|
.dropdown-item-title {
|
position: absolute;
|
left: 58px;
|
top: 18%;
|
color: #000;
|
font-size: 14px;
|
line-height: 17px;
|
font-weight: 600;
|
}
|
.dropdown-right-item .dropdown-item-title {
|
left: 18%;
|
}
|
|
.dropdown-item-content {
|
line-height: 17px;
|
position: absolute;
|
left: 58px;
|
top: 55%;
|
color: #969da3;
|
font-size: 12px;
|
}
|
|
.icon-arrow-down {
|
display: inline-block;
|
width: 18px;
|
height: 18px;
|
}
|
|
.dropbtn:hover > img {
|
transform: rotate(180deg);
|
}
|
.xianhuo-img {
|
width: 20px !important;
|
height: 20px !important;
|
margin: 0 8px !important;
|
}
|
|
.menu-active {
|
background-color: transparent;
|
color: #2a64fb !important;
|
font-weight: 700 !important;
|
}
|
.dropbtn span.icon-arrow {
|
position: absolute;
|
top: 26px;
|
display: inline-block;
|
width: 0;
|
height: 0;
|
border: 4px solid;
|
border-color: #000 transparent transparent transparent;
|
margin-left: 12px;
|
}
|
|
.arrow-right-icon{
|
position: absolute;
|
top: calc(50% - 27px);
|
right: 0;
|
color: #969da3;
|
}
|
.mouse-cursor {
|
cursor: pointer;
|
}
|
</style>
|
