108 lines
3.1 KiB
Vue
108 lines
3.1 KiB
Vue
<template>
|
|
<div class="appCenterPopover">
|
|
<el-popover width="450" placement="top-start" trigger="hover">
|
|
<el-card shadow="never" class="appCenterCard">
|
|
<template #header>
|
|
<el-row type="flex" justify="space-between">
|
|
<div>
|
|
<el-link :underline="false">平台</el-link>
|
|
</div>
|
|
</el-row>
|
|
</template>
|
|
<el-row :gutter="20" v-if="pcModuleMenus && pcModuleMenus.length > 0">
|
|
<el-col v-for="item in pcModuleMenus" :key="item.id" :span="8" style="margin-bottom: 5px">
|
|
<div
|
|
class="entranceDetail"
|
|
:class="{ 'entranceDetail-selected': item.id === activeModuleId }"
|
|
@click="enterEntranceModules(item)"
|
|
>
|
|
<div class="entranceIcon">
|
|
<el-image :src="item.icon" style="height: 50px; width: 50px" fit="cover">
|
|
<div slot="error" class="image-slot">
|
|
<i class="el-icon-picture-outline"></i>
|
|
</div>
|
|
</el-image>
|
|
</div>
|
|
<a href="javascript:">{{ item.name }}</a>
|
|
</div>
|
|
</el-col>
|
|
</el-row>
|
|
</el-card>
|
|
<span href="javascript:" slot="reference" style="font-size: 16px; font-weight: bold">
|
|
<i class="el-icon-menu"></i>
|
|
{{ activeModuleName }}
|
|
<i class="el-icon-sort"></i>
|
|
<span>切换平台</span>
|
|
</span>
|
|
</el-popover>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
module.exports = {
|
|
name: "HeaderMenuModule",
|
|
store,
|
|
computed: {
|
|
activeModuleId() {
|
|
return this.$store.state.activeMenuModuleId
|
|
},
|
|
activeModuleName() {
|
|
if (this.pcModuleMenus) {
|
|
return this.pcModuleMenus.find((m) => m.id === this.activeModuleId)?.name
|
|
}
|
|
return null
|
|
},
|
|
pcModuleMenus() {
|
|
return this.$store.getters.pcModules
|
|
}
|
|
},
|
|
methods: {
|
|
enterEntranceModules(item) {
|
|
this.$store.commit("setActiveMenuModuleId", item.id)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.appCenterPopover {
|
|
padding: 0 !important;
|
|
color: var(--color-white);
|
|
}
|
|
|
|
.el-popover__reference{
|
|
font-weight: normal!important;
|
|
}
|
|
|
|
.appCenterCard .el-card__header {
|
|
padding: 8px 10px !important;
|
|
}
|
|
|
|
:deep(.entranceDetail) {
|
|
border-radius: 6px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
line-height: 1;
|
|
color: #606060;
|
|
padding: 5px;
|
|
}
|
|
|
|
.entranceDetail:hover,
|
|
.entranceDetail-selected {
|
|
background-color: #e5edff;
|
|
color: #3177fd;
|
|
}
|
|
|
|
.appCenterCard .entranceIcon {
|
|
position: relative;
|
|
width: 50px;
|
|
height: 50px;
|
|
margin: 8px auto 6px;
|
|
color: #fff;
|
|
}
|
|
|
|
.appCenterCard .entranceDetail a {
|
|
color: #000000;
|
|
}
|
|
</style>
|