394 lines
12 KiB
Vue
394 lines
12 KiB
Vue
<template>
|
||
<div class="wrapper">
|
||
<!-- 页面头部部分 -->
|
||
<!-- <div style="display:inline-block"> -->
|
||
<el-aside style="width:13%;position: absolute;height: 100%;" class="aside">
|
||
<div class="logo"><img src="@/assets/img/topTitle.png" alt="" width="100%" height="100%"></div>
|
||
<SideMenu :navMenus="leftMenus"></SideMenu>
|
||
</el-aside>
|
||
<div class="header" >
|
||
<!-- 水平一级菜单 -->
|
||
<div class="header-right">
|
||
<div class="header-user-con">
|
||
<!-- <div class="stateN"> -->
|
||
<span class="stateN">状态：</span>
|
||
<span
|
||
class="point-state"
|
||
:class="stateNew == 'online' ? 'outline' : 'online'"
|
||
:style="stateNew == 'online'
|
||
? { opacity: changeOpcity1 }
|
||
: { opacity: changeOpcity }">
|
||
</span>
|
||
<!-- </div> -->
|
||
|
||
<!-- 切换主题 -->
|
||
<div @click="handleChangeStyle()">
|
||
<el-tooltip content="切换主题" placement="bottom">
|
||
<i :class="globalTheme ? 'el-icon-moon' : 'el-icon-sunny'"></i>
|
||
</el-tooltip>
|
||
</div>
|
||
<!-- 用户头像 -->
|
||
<div class="user-avator">
|
||
<img src="@/assets/img/img.jpg"/>
|
||
</div>
|
||
<!-- 用户名下拉菜单 -->
|
||
<el-dropdown class="user-name" trigger="click" @command="handleCommand">
|
||
<span class="el-dropdown-link"> {{ username }} <i class="el-icon-caret-bottom"></i></span>
|
||
<el-dropdown-menu slot="dropdown">
|
||
<el-dropdown-item disabled>修改密码</el-dropdown-item>
|
||
<el-dropdown-item command="loginout">退出登录</el-dropdown-item>
|
||
</el-dropdown-menu>
|
||
</el-dropdown>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<el-main>
|
||
|
||
<router-view></router-view>
|
||
</el-main>
|
||
<!-- </el-container> -->
|
||
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import SideMenu from '@/components/sidemenu/SideMenu';
|
||
import bus from "@/utils/bus";
|
||
export default {
|
||
components: {
|
||
SideMenu
|
||
},
|
||
data(){
|
||
return{
|
||
changeOpcity: 1,
|
||
flag: 1,
|
||
// 控制红灯闪烁
|
||
changeOpcity1: 1,
|
||
flag1: 1,
|
||
stateNew:'outline',
|
||
itemList: [ // 水平一级菜单栏的菜单
|
||
// { path: '/Home', title: '首页' },
|
||
{ path: '/test1', title: '一级菜单1' },
|
||
{ path: '/test2', title: '一级菜单2' },
|
||
{ path: '/test3', title: '一级菜单3' },
|
||
{ path: '/permission', title: '管理员权限' },
|
||
// { path: '/i18n', title: '国际化组件' }
|
||
],
|
||
leftMenus: [
|
||
{
|
||
title : '分析',
|
||
path: '/test1/AnalysisMain',
|
||
icon : 'el-icon-data-line',
|
||
// icon : require('@/assets/img/fenxi.png'),
|
||
},
|
||
{
|
||
title : '控制中心',
|
||
path: 'ControlCenter',
|
||
icon:'el-icon-coin',
|
||
children : [
|
||
{
|
||
title : '通用',
|
||
path: 'test1-2',
|
||
children : [
|
||
{
|
||
title : '关于本机',
|
||
path: '/test1/AboutMachine',
|
||
|
||
},
|
||
{
|
||
title : '网络',
|
||
path: '/test1/network',
|
||
|
||
},
|
||
{
|
||
title : 'VPN',
|
||
path: '/test1/VPN',
|
||
|
||
},
|
||
{
|
||
title : '自定义操作',
|
||
path: '/test1/CustomOperations',
|
||
|
||
},
|
||
{
|
||
title : '健康检测',
|
||
path: '/test1/HealthCheck',
|
||
|
||
},
|
||
{
|
||
title : '接口与服务器证书',
|
||
path: '/test1/InterfaceServerCertificates',
|
||
// icon : 'tool',
|
||
},
|
||
{
|
||
title : 'UDP服务设置',
|
||
path: '/test1/UDPServiceSettings',
|
||
// icon : 'tool',
|
||
}
|
||
]
|
||
},{
|
||
title : '运行状态',
|
||
path: '/test1/StateOperation',
|
||
// icon : 'el-icon-user-solid',
|
||
},{
|
||
title : '接口',
|
||
path: '/test1/interface',
|
||
// icon : 'el-icon-user-solid',
|
||
},{
|
||
title : 'IP设置',
|
||
path: '/test1/IPSetting',
|
||
// icon : 'el-icon-user-solid',
|
||
},
|
||
|
||
]
|
||
},
|
||
// {
|
||
// title : '系统设置',
|
||
// path: 'SystemSettings',
|
||
// icon : 'el-icon-s-tools',
|
||
|
||
// children : [
|
||
// {
|
||
// title : '全局设置',
|
||
// path: '/test1/globalSettings',
|
||
// // icon : 'bars',
|
||
// },
|
||
// {
|
||
// title : '关于本机——导出设置',
|
||
// path: '/test1/ExportingSettings',
|
||
// // icon : 'tool',
|
||
// },
|
||
// {
|
||
// title : '关于本机——导入设置',
|
||
// path: '/test1/ImportSettings',
|
||
// // icon : 'tool',
|
||
// },
|
||
|
||
// ]
|
||
// },
|
||
{
|
||
title : '用户管理',
|
||
path: 'UserManagement',
|
||
icon : 'el-icon-user-solid',
|
||
children : [
|
||
{
|
||
title : '我的账号',
|
||
path: '/test1/myId',
|
||
// icon : 'bars',
|
||
},
|
||
{
|
||
title : '账号管理',
|
||
path: '/test1/IdManagement',
|
||
// icon : 'tool',
|
||
},
|
||
]
|
||
},
|
||
{
|
||
title : '通知/日志',
|
||
path: '/test1/logs',
|
||
icon : 'el-icon-phone',
|
||
},
|
||
|
||
],
|
||
globalTheme: false,
|
||
}
|
||
},
|
||
|
||
computed: {
|
||
username(){
|
||
return localStorage.getItem('ms_username') || '';
|
||
},
|
||
toIndex(){ // 根据路径绑定到对应的一级菜单，防止页面刷新重新跳回第一个
|
||
return '/' + this.$route.path.split('/')[1];
|
||
},
|
||
},
|
||
created() {
|
||
this.globalTheme = JSON.parse(localStorage.getItem('global_theme'));
|
||
bus.$emit('global_theme', this.globalTheme); // 将 globalTheme 的值传给父组件
|
||
},
|
||
mounted() {
|
||
this.controlLight();
|
||
},
|
||
methods: {
|
||
handleSelect(path){ // 切换菜单栏
|
||
this.$router.push({
|
||
path: path
|
||
});
|
||
},
|
||
handleCommand(command){ // 用户名下拉菜单选择事件
|
||
if(command == 'loginout'){
|
||
localStorage.removeItem('ms_username');
|
||
this.$router.push({
|
||
path: '/Login'
|
||
});
|
||
}
|
||
},
|
||
handleChangeStyle(){ // 切换主题
|
||
this.globalTheme = !this.globalTheme;
|
||
localStorage.setItem('global_theme', this.globalTheme); // 本地存储选择的 globalTheme
|
||
bus.$emit('global_theme', this.globalTheme); // 将 globalTheme 的值传给父组件
|
||
},
|
||
// 控制闪烁
|
||
controlLight() {
|
||
setInterval(() => {
|
||
if (this.flag) {
|
||
this.$nextTick(() => {
|
||
this.changeOpcity = this.changeOpcity - 0.1;
|
||
});
|
||
} else {
|
||
this.$nextTick(() => {
|
||
this.changeOpcity = this.changeOpcity + 0.1;
|
||
});
|
||
}
|
||
if (this.changeOpcity < 0.3) {
|
||
this.flag = 0;
|
||
} else if (this.changeOpcity > 0.99) {
|
||
this.flag = 1;
|
||
}
|
||
}, 100);
|
||
setInterval(() => {
|
||
if (this.flag1) {
|
||
this.$nextTick(() => {
|
||
this.changeOpcity1 = this.changeOpcity1 - 0.1;
|
||
});
|
||
} else {
|
||
this.$nextTick(() => {
|
||
this.changeOpcity1 = this.changeOpcity1 + 0.1;
|
||
});
|
||
}
|
||
if (this.changeOpcity1 < 0.5) {
|
||
this.flag1 = 0;
|
||
} else if (this.changeOpcity1 > 0.99) {
|
||
this.flag1 = 1;
|
||
}
|
||
}, 100);
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
<style>
|
||
.aside{
|
||
overflow-y: scroll;
|
||
overflow-x: hidden;
|
||
background: url('../../assets/img/leftBg.png');
|
||
max-height: 100%;
|
||
background-size: 100% 100%;
|
||
|
||
}
|
||
.aside::-webkit-scrollbar {
|
||
display:none;
|
||
}
|
||
.el-submenu__title:hover {
|
||
background-color: #3989fa!important;
|
||
}
|
||
.el-menu-item:focus, .el-menu-item:hover {
|
||
outline: 0;
|
||
background-color: #3989fa!important;
|
||
}
|
||
|
||
</style>
|
||
<style scoped>
|
||
.wrapper {
|
||
width: 100%;
|
||
height: 100%;
|
||
background: #f0f0f0;
|
||
}
|
||
.logo {
|
||
|
||
margin-left: 10px;
|
||
margin-top: 10px;
|
||
/* height: 60px; */
|
||
width: 80%;
|
||
|
||
}
|
||
.header {
|
||
/* position: absolute; */
|
||
-webkit-box-sizing: border-box;
|
||
box-sizing: border-box;
|
||
/* width: 87%; */
|
||
width: 100%;
|
||
/* height: 70px; */
|
||
height: 45px;
|
||
right: 0px;
|
||
font-size: 22px;
|
||
top: 5px;
|
||
}
|
||
.header .logo {
|
||
float: left;
|
||
margin-left: 60px;
|
||
margin-top: 17.5px;
|
||
height: 29px;
|
||
width: 160px;
|
||
vertical-align: middle;
|
||
position: relative;
|
||
}
|
||
/* --------------- 用户头像区域的样式 ---------------- */
|
||
.header-right {
|
||
float: right;
|
||
padding-right: 50px;
|
||
}
|
||
.header-user-con {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
/* height: 70px; */
|
||
height: 45px;
|
||
}
|
||
.user-avator {
|
||
margin-left: 20px;
|
||
}
|
||
.user-avator img {
|
||
display: block;
|
||
/* width: 40px;
|
||
height: 40px; */
|
||
width: 30px;
|
||
height: 30px;
|
||
border-radius: 50%;
|
||
}
|
||
.user-name {
|
||
margin-left: 10px;
|
||
}
|
||
.el-dropdown-link {
|
||
cursor: pointer;
|
||
}
|
||
.el-dropdown-menu__item {
|
||
text-align: center;
|
||
}
|
||
/* --------------- 水平一级菜单栏的样式--------------------- */
|
||
.el-menu.el-menu--horizontal {
|
||
border-bottom: none !important;
|
||
float: left;
|
||
margin-left: 50px;
|
||
background: transparent;
|
||
}
|
||
.el-menu--horizontal > .el-menu-item.is-active {
|
||
/* border-bottom: 2px solid #3989fa;
|
||
color: #3989fa; */
|
||
font-weight: bold;
|
||
}
|
||
.el-menu--horizontal > .el-menu-item {
|
||
font-size: 16px;
|
||
margin: 0 15px;
|
||
}
|
||
.stateN{
|
||
/* width: 150px;
|
||
height: 20px; */
|
||
font-size: 14px;
|
||
}
|
||
.point-state {
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 100%;
|
||
background: #eee;
|
||
/* margin-left: 10px; */
|
||
margin-right: 10px;
|
||
}
|
||
.outline {
|
||
background: #d9001b;
|
||
}
|
||
.online {
|
||
background: #10c504;
|
||
box-shadow: 1px 1px 10px #b5ffae;
|
||
}
|
||
</style> |