307 lines
9.0 KiB
Vue
307 lines
9.0 KiB
Vue
<template>
|
||
<div class="layout_old">
|
||
<!-- 头部 -->
|
||
<header class="header">
|
||
<div class="header-logo">
|
||
<div class="header-logo-title">
|
||
<img :src="logoUrl" />
|
||
</div>
|
||
</div>
|
||
<div class="header-aside">
|
||
<div class="aside-box clearfix">
|
||
<p>
|
||
你好，
|
||
<a>{{ username }}</a>
|
||
</p>
|
||
<p class="aside-btn-list">
|
||
<Tooltip content="个人信息" placement="bottom-start">
|
||
<Button type="ghost" icon="android-happy" @click="linkUser()"></Button>
|
||
</Tooltip>
|
||
<Tooltip content="应用列表" placement="bottom">
|
||
<Button type="ghost" icon="android-apps" @click="linkApp()"></Button>
|
||
</Tooltip>
|
||
<Tooltip content="退出登录" placement="bottom-end">
|
||
<Button type="ghost" icon="power" @click="logout"></Button>
|
||
</Tooltip>
|
||
<!-- 如果是3.0.icon改成 -->
|
||
<!--
|
||
md-happy
|
||
md-apps
|
||
md-power
|
||
-->
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<!-- 标题 -->
|
||
<div class="path-nav">
|
||
<h1>{{ pathName }}</h1>
|
||
</div>
|
||
<!-- 侧边 -->
|
||
<div class="leftmenu">
|
||
<div class="" style="height: 100%">
|
||
<div class="title-top">{{ appName }}</div>
|
||
<ul class="title-box">
|
||
<li
|
||
v-for="(item, index) in modList"
|
||
:key="index"
|
||
:class="{
|
||
active: item.page.toLowerCase() == currPath.toLowerCase(),
|
||
}"
|
||
>
|
||
<!-- <router-link :to="item.page" >{{item.name}}</router-link> -->
|
||
<a href="javascript:;" @click="flushCom(item.page)">{{ item.name }}</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
inject: ["reload"],
|
||
props: {
|
||
layoutData: {
|
||
appName: String,
|
||
appList: Array,
|
||
modList: Array,
|
||
userInfo: Object,
|
||
ssoHost: String,
|
||
baseHost: String,
|
||
isAlone: Boolean, //是否只有一个选项卡
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
username: "",
|
||
pathName: "",
|
||
logoUrl: "",
|
||
currPath: "",
|
||
};
|
||
},
|
||
computed: {
|
||
listNumber: function () {
|
||
return this.pathList.sort(function (a, b) {
|
||
return a.modId - b.modId;
|
||
});
|
||
},
|
||
},
|
||
mounted() {
|
||
const _this = this;
|
||
for (const key in _this.layoutData) _this[key] = _this.layoutData[key];
|
||
this.username = this.userInfo.name;
|
||
this.logoUrl = this.baseHost + "/img/logo.png";
|
||
_this.routeChange(_this.$route); //初次加载时手动触发route的change
|
||
this.$watch("$route", _this.routeChange);
|
||
$(".base-wrap-main").css("padding-top", "145px");
|
||
},
|
||
methods: {
|
||
logout() {
|
||
//退出登陆
|
||
let url = window.location.href;
|
||
url = "/logout?service=" + url;
|
||
top.location.href = this.ssoHost + url;
|
||
},
|
||
routeChange(router) {
|
||
const _this = this;
|
||
window.document.title = router.meta.title || "弘育云平台";
|
||
let currentMod = router.meta.modId;
|
||
//时间有限，仅支持一层.暂时写死，有需求再改
|
||
_this.modList.forEach(element => {
|
||
let childIndex = element.children.findIndex(x => x.modId == currentMod);
|
||
if (currentMod == element.modId || childIndex > -1) {
|
||
_this.currPath = element.page;
|
||
_this.pathName = element.name;
|
||
}
|
||
});
|
||
},
|
||
|
||
linkApp() {
|
||
location.href = this.baseHost + "/v/home";
|
||
},
|
||
linkUser() {
|
||
location.href = this.baseHost + "/v/userinfo";
|
||
},
|
||
flushCom(page) {
|
||
//return;
|
||
const path = this.$route.path;
|
||
// console.log(page,path);
|
||
if (page === path) {
|
||
this.reload();
|
||
//this.$root.$children[0].reload()
|
||
} else {
|
||
this.$router.push(page);
|
||
}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="scss" >
|
||
.layout_old {
|
||
.header {
|
||
width: 100%;
|
||
height: 70px;
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 22;
|
||
background-color: #fff;
|
||
background-image: linear-gradient(143deg, #6c91f0 45%, #7863b4 81%, #7a5aa9);
|
||
.header-logo {
|
||
width: 200px;
|
||
height: 100%;
|
||
float: left;
|
||
position: relative;
|
||
}
|
||
.header-logo-title {
|
||
margin-left: 32px;
|
||
position: relative;
|
||
top: 20px;
|
||
.logo-box {
|
||
background: url(/static/image/logo.png) no-repeat;
|
||
width: 450px;
|
||
height: 70px;
|
||
}
|
||
}
|
||
.header-aside {
|
||
float: right;
|
||
margin: 0 30px 0 0;
|
||
position: relative;
|
||
color: #fff;
|
||
font-size: 14px;
|
||
.aside-box {
|
||
margin: 26px 0 22px 0;
|
||
.icon-box {
|
||
width: 34px;
|
||
font-size: 18px;
|
||
color: #fff;
|
||
text-align: center;
|
||
}
|
||
a {
|
||
color: #fff;
|
||
&:hover {
|
||
color: #2d8cf0;
|
||
}
|
||
}
|
||
}
|
||
.aside-btn-list {
|
||
.ivu-btn {
|
||
padding: 0px;
|
||
border: 0px;
|
||
width: 35px;
|
||
i {
|
||
color: #fff;
|
||
font-size: 18px;
|
||
}
|
||
}
|
||
}
|
||
p {
|
||
float: left;
|
||
color: #ffffff;
|
||
padding-right: 10px;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.path-nav {
|
||
position: fixed;
|
||
z-index: 21;
|
||
top: 70px;
|
||
height: 54px;
|
||
left: 200px;
|
||
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
|
||
background: #fff;
|
||
width: 100%;
|
||
padding: 0 15px;
|
||
box-sizing: border-box;
|
||
min-width: 767px;
|
||
h1 {
|
||
float: left;
|
||
font-size: 16px;
|
||
color: #464c5b;
|
||
margin: auto;
|
||
line-height: 56px;
|
||
font-weight: 400;
|
||
}
|
||
}
|
||
|
||
.leftmenu {
|
||
position: fixed;
|
||
z-index: 20;
|
||
-moz-overflow: auto;
|
||
overflow: auto\9;
|
||
overflow: overlay;
|
||
overflow-x: hidden;
|
||
background: #8791a5 !important;
|
||
height: 100%;
|
||
width: 200px;
|
||
padding-top: 70px;
|
||
box-sizing: border-box;
|
||
& > div {
|
||
overflow-y: auto;
|
||
}
|
||
.title-top {
|
||
height: 54px;
|
||
line-height: 54px;
|
||
background: #3e485a;
|
||
font-size: 16px;
|
||
font-weight: 400;
|
||
text-align: center;
|
||
width: 200px;
|
||
color: #ffffff;
|
||
}
|
||
.title-box {
|
||
background: #eaedf2;
|
||
width: 200px;
|
||
overflow: overlay;
|
||
border-right: 0px;
|
||
display: block;
|
||
margin: 0;
|
||
padding: 0;
|
||
outline: 0;
|
||
list-style: none;
|
||
color: #495060;
|
||
font-size: 14px;
|
||
position: relative;
|
||
li {
|
||
text-align: center;
|
||
background: #8791a5;
|
||
padding: 0px !important;
|
||
border-bottom: 1px solid #a5adbf;
|
||
transition: all 200ms;
|
||
&:hover {
|
||
border-left: 4px solid #6c8fed;
|
||
background: #f3f3f3;
|
||
}
|
||
&.active {
|
||
background: #f3f3f3;
|
||
a {
|
||
color: #333;
|
||
}
|
||
}
|
||
a {
|
||
color: #ffffff;
|
||
display: block;
|
||
padding: 16px 0px 14px 34px;
|
||
text-align: left;
|
||
color: #ffffff;
|
||
}
|
||
a:hover {
|
||
color: rgb(51, 51, 51);
|
||
}
|
||
}
|
||
a {
|
||
color: #495060;
|
||
}
|
||
}
|
||
}
|
||
.wrap-main {
|
||
padding: 124px 0 0 200px;
|
||
}
|
||
.nav-btn-wrap {
|
||
top: 78px;
|
||
}
|
||
}
|
||
</style>
|