fix: BUG修改
This commit is contained in:
kun
parent
e41df3ee6b
commit
15b12e7d12
@ -1,190 +0,0 @@
|
|||||||
.el-container {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
overflow-y: scroll;
|
|
||||||
/* 隐藏滚动条 */
|
|
||||||
&::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.el-header {
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
height: 72px;
|
|
||||||
padding: 0 15px 0 0;
|
|
||||||
background: linear-gradient(to right, #0e63d9 0%, #00378f 100%);
|
|
||||||
border-bottom: 1px solid #f1f1f1;
|
|
||||||
.header-lf {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
.logo {
|
|
||||||
flex-shrink: 0;
|
|
||||||
|
|
||||||
// width: 210px;
|
|
||||||
margin-left: 16px;
|
|
||||||
cursor: pointer;
|
|
||||||
span {
|
|
||||||
height: 36px;
|
|
||||||
font-size: 24px;
|
|
||||||
line-height: 36px;
|
|
||||||
|
|
||||||
// font-weight: bold;
|
|
||||||
color: #dadada;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
img {
|
|
||||||
width: 28px;
|
|
||||||
height: 28px;
|
|
||||||
margin-right: 6px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
:deep(.tool-bar-lf) {
|
|
||||||
color: #ffffff;
|
|
||||||
.el-breadcrumb__inner.is-link {
|
|
||||||
color: #e5eaf3;
|
|
||||||
&:hover {
|
|
||||||
color: var(--el-color-primary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.el-breadcrumb__item:last-child .el-breadcrumb__inner,
|
|
||||||
.el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
|
|
||||||
color: #cfd3dc;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
:deep(.tool-bar-ri) {
|
|
||||||
.toolBar-icon,
|
|
||||||
.username {
|
|
||||||
color: #e5eaf3;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.el-aside {
|
|
||||||
width: 200px;
|
|
||||||
overflow: inherit;
|
|
||||||
background-color: #ffffff;
|
|
||||||
border-right: 1px solid var(--el-border-color);
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
.menu {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 100%;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
.el-menu {
|
|
||||||
overflow-x: hidden;
|
|
||||||
border-right: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.contain-section {
|
|
||||||
padding: 30px 135px;
|
|
||||||
.contain-header {
|
|
||||||
// color: #fff;
|
|
||||||
display: flex;
|
|
||||||
background-color: #008bff;
|
|
||||||
border-radius: 8px;
|
|
||||||
margin-bottom: 58px;
|
|
||||||
.header-important {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 100%;
|
|
||||||
height: 170px;
|
|
||||||
overflow-x: auto;
|
|
||||||
cursor: pointer;
|
|
||||||
// border-right: 1px solid pink;
|
|
||||||
|
|
||||||
.header-item {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
|
||||||
margin: 5px 0;
|
|
||||||
font-size: 20px;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
width: 2px;
|
|
||||||
height: 66px;
|
|
||||||
top: 50px;
|
|
||||||
bottom: 40px;
|
|
||||||
right: 0;
|
|
||||||
background-color: rgba(255, 255, 255, 0.54);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:last-child::after {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// .header-important ::after {
|
|
||||||
// content: "";
|
|
||||||
// width: 2px;
|
|
||||||
// height: 50px;
|
|
||||||
// background-color: pink;
|
|
||||||
// }
|
|
||||||
}
|
|
||||||
.safe {
|
|
||||||
// display: flex;
|
|
||||||
flex-flow: row wrap;
|
|
||||||
width: 100%;
|
|
||||||
margin: 20px 0;
|
|
||||||
.labelName {
|
|
||||||
color: #999;
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: 400;
|
|
||||||
.el-icon {
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.safe-contain {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
color: #666666;
|
|
||||||
min-height: 169px;
|
|
||||||
.safe-item {
|
|
||||||
width: 204px;
|
|
||||||
height: 169px;
|
|
||||||
margin: 17px 30px;
|
|
||||||
|
|
||||||
// display: flex;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
// overflow-x: auto;
|
|
||||||
background: #ffffff;
|
|
||||||
border: 1px solid #ebebeb;
|
|
||||||
border-radius: 4px;
|
|
||||||
opacity: 1;
|
|
||||||
div {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
height: 100%;
|
|
||||||
img {
|
|
||||||
// width: 60px;
|
|
||||||
height: 44px;
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
color: #333;
|
|
||||||
font-size: 18px;
|
|
||||||
font-family: "siyuan_Bold";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.imgItem {
|
|
||||||
height: 56px;
|
|
||||||
}
|
|
||||||
@ -1,98 +0,0 @@
|
|||||||
<!-- 经典布局 -->
|
|
||||||
<template>
|
|
||||||
<el-container class="layout">
|
|
||||||
<el-header>
|
|
||||||
<div class="header-lf">
|
|
||||||
<div class="logo flx-center">
|
|
||||||
<!-- <img src="@/assets/images/logo.svg" alt="logo" /> -->
|
|
||||||
<img
|
|
||||||
:src="globalStore.systemConfigLogo ? globalStore.systemConfigLogo : '@/assets/images/login/china.png'"
|
|
||||||
style="margin: 0 15px"
|
|
||||||
alt="logo"
|
|
||||||
/>
|
|
||||||
<span>{{ globalStore.systemConfigName }}</span>
|
|
||||||
</div>
|
|
||||||
<ToolBarLeft />
|
|
||||||
</div>
|
|
||||||
<ToolBarRight />
|
|
||||||
</el-header>
|
|
||||||
|
|
||||||
<div class="contain-section">
|
|
||||||
<div class="contain-header">
|
|
||||||
<div class="header-important" v-for="item in data['important']" :key="item.moduleId">
|
|
||||||
<div class="header-item" @click="onChange(item)">
|
|
||||||
<img :src="getImageUrl(item.moduleIconChecked)" class="imgItem" alt="logo" />
|
|
||||||
<span>{{ item.moduleName }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="safe" v-for="i in labelName" :key="i">
|
|
||||||
<div class="labelName">
|
|
||||||
<el-icon><ArrowDown /></el-icon>
|
|
||||||
<span>{{ i }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="safe-contain">
|
|
||||||
<div class="safe-item" v-for="item in data[i]" :key="item.moduleId">
|
|
||||||
<div @click="onChange(item)">
|
|
||||||
<img :src="getImageUrl(item.moduleIconChecked)" alt="logo" />
|
|
||||||
<p>{{ item.moduleName }}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</el-container>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts" name="governMentHome">
|
|
||||||
import { computed, onMounted, ref, watch } from "vue";
|
|
||||||
import { useRouter } from "vue-router";
|
|
||||||
import { AuthStore } from "@/stores/modules/auth";
|
|
||||||
import ToolBarLeft from "@/layouts/components/Header/ToolBarLeft.vue";
|
|
||||||
import ToolBarRight from "@/layouts/components/Header/ToolBarRight.vue";
|
|
||||||
import { initDynamicRouter } from "@/routers/modules/dynamicRouter";
|
|
||||||
import { Global3DStore } from "@/stores";
|
|
||||||
import { ElMessage } from "element-plus";
|
|
||||||
|
|
||||||
const router = useRouter();
|
|
||||||
const authStore = AuthStore();
|
|
||||||
const globalStore = Global3DStore();
|
|
||||||
const modulePath = ref("");
|
|
||||||
|
|
||||||
const data = ref({ important: [] });
|
|
||||||
const labelName = ref([]);
|
|
||||||
|
|
||||||
function getImageUrl(name: string) {
|
|
||||||
return new URL(`../../assets/images/goverHome/${name}` + ".png", import.meta.url).href;
|
|
||||||
}
|
|
||||||
|
|
||||||
const onChange = async (val: string) => {
|
|
||||||
// debugger;
|
|
||||||
if (!val.modulePath) {
|
|
||||||
ElMessage.error("没有添加菜单，请联系管理员");
|
|
||||||
} else {
|
|
||||||
globalStore.setPath(val.modulePath);
|
|
||||||
|
|
||||||
await initDynamicRouter({ moduleId: val.moduleId });
|
|
||||||
// modulePath.value = val.modulePath;
|
|
||||||
// router.push(val.modulePath);
|
|
||||||
|
|
||||||
globalStore.moduleId = val.moduleId;
|
|
||||||
globalStore.moduleName = val.moduleName;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// watch(
|
|
||||||
// () => modulePath.value,
|
|
||||||
// () => {
|
|
||||||
// console.log(11);
|
|
||||||
// router.push(modulePath.value);
|
|
||||||
// }
|
|
||||||
// );
|
|
||||||
|
|
||||||
onMounted(async () => {});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="scss">
|
|
||||||
@import "./index.scss";
|
|
||||||
</style>
|
|
||||||
Loading…
x
Reference in New Issue
Block a user