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