<template>
|
<div class="header">
|
<div class="title">智慧校园大数据三维可视化平台</div>
|
<div class="btn1 navBtn" :class="{'btnClick':isClick == 1}" @click="isClick = 1">首页</div>
|
<div class="btn2 navBtn" :class="{'btnClick':isClick == 2}" @click="isClick = 2">能源管理</div>
|
<div class="btn3 navBtn" :class="{'btnClick':isClick == 3}" @click="isClick = 3">地下管网</div>
|
<div class="btn4 navBtn" :class="{'btnClick':isClick == 4}" @click="isClick = 4">资产管理</div>
|
<div class="btn5 navBtn" :class="{'btnClick':isClick == 5}" @click="onBtn5">校园三维</div>
|
<div class="btn6 navBtn" :class="{'btnClick':isClick == 6}" @click="isClick = 6">视频融合</div>
|
|
<div class="underLine"></div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data () {
|
return {
|
isClick: 1
|
}
|
},
|
methods: {
|
onBtn5 () {
|
this.isClick = 5
|
window.open('https://dev.jxpskj.com:8023/zhjg/#/pcLayout/default', '_blank')
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.header {
|
position: relative;
|
width: 100%;
|
height: 100px;
|
padding: 0 30px;
|
box-sizing: border-box;
|
.logo {
|
position: absolute;
|
background: url(/zhjg/img/home/logoko.png) no-repeat;
|
background-size: contain;
|
top: 0px;
|
width: 258px;
|
height: 73px;
|
}
|
.mainTitle {
|
position: absolute;
|
top: 62px;
|
left: 30px;
|
color: #28f2ff;
|
font-size: 22px;
|
font-weight: 500;
|
}
|
.title {
|
margin: 0 auto;
|
color: #28f2ff;
|
width: 550px;
|
position: absolute;
|
left: 0;
|
right: 0;
|
top: 20px;
|
font-size: 34px;
|
letter-spacing: 5px;
|
}
|
.navBtn {
|
position: absolute;
|
top: 27px;
|
width: 126px;
|
height: 39px;
|
line-height: 39px;
|
text-align: center;
|
background: url(/zhjg/img/login/object.png);
|
background-size: 100% 100%;
|
color: #24f2ff;
|
letter-spacing: 3px;
|
cursor: pointer;
|
}
|
.btn1 {
|
right: 1700px;
|
}
|
.btn2 {
|
right: 1500px;
|
}
|
.btn3 {
|
right: 1300px;
|
}
|
.btn4 {
|
right: 437px;
|
}
|
.btn5 {
|
right: 237px;
|
}
|
.btn6 {
|
right: 37px;
|
}
|
.btnClick {
|
color: #fff;
|
font-weight: 700;
|
box-shadow: 0px 3px 30px #24f2ff;
|
}
|
.nav {
|
position: absolute;
|
display: flex;
|
width: 1064px;
|
height: 37px;
|
left: 50%;
|
margin-top: 22px;
|
transform: translateX(-50%);
|
justify-content: space-between;
|
li {
|
background: linear-gradient(
|
0deg,
|
#28f2ff 0%,
|
rgba(0, 24, 68, 0.22) 100%
|
);
|
display: block;
|
line-height: 37px;
|
text-align: center;
|
background: linear-gradient(
|
0deg,
|
rgba(160, 230, 251, 0.38) 0%,
|
#75a3e7 100%
|
);
|
border: 1px solid;
|
border-image: linear-gradient(
|
0deg,
|
rgba(65, 216, 238, 0),
|
#5cd7ff,
|
#9fbfe3,
|
#90f4f3,
|
#12ccd8
|
)
|
1 1;
|
opacity: 0.8;
|
a {
|
color: #ffffff;
|
font-size: 16px;
|
font-weight: 400;
|
width: 169px;
|
height: 37px;
|
display: block;
|
}
|
}
|
}
|
.userInfo {
|
position: absolute;
|
display: flex;
|
top: 23px;
|
right: 0px;
|
width: 263px;
|
height: 31px;
|
justify-content: space-between;
|
align-content: center;
|
span {
|
color: #24f2ff;
|
font-size: 18px;
|
font-weight: 400;
|
line-height: 0px;
|
}
|
.avatar {
|
display: inline-block;
|
width: 32px;
|
height: 31px;
|
background: url(/zhjg/img/home/user.png) no-repeat;
|
}
|
}
|
|
.underLine {
|
position: absolute;
|
bottom: 0;
|
width: 100%;
|
height: 21px;
|
background: url(/zhjg/img/home/xingz-copy1.png);
|
background-size: contain;
|
}
|
}
|
</style>
|
