<template>
|
<div class="box">
|
<div class="LeftMenuOne">
|
<div class="LeftMenuMove"
|
@click="showMenuChange(0)"
|
:class="{LeftMenuOut:index == -1}">经开区概况</div>
|
</div>
|
<div class="LeftMenuTwo">
|
<div class="LeftMenuMove"
|
@click="showMenuChange(1)"
|
:class="{LeftMenuOut:index == 1}">党建引领</div>
|
</div>
|
<div class="LeftMenuThree">
|
<div class="LeftMenuMove"
|
@click="showMenuChange(2)"
|
:class="{LeftMenuOut:index == 2}">经济运行</div>
|
</div>
|
<div class="LeftMenuFour">
|
<div class="LeftMenuMove"
|
@click="showMenuChange(3)"
|
:class="{LeftMenuOut:index == 3}">城市治理</div>
|
</div>
|
<div class="LeftMenuFive">
|
<div class="LeftMenuMove"
|
@click="showMenuChange(4)"
|
:class="{LeftMenuOut:index == 4}">民生服务</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
components: {},
|
data () {
|
//这里存放数据
|
return {
|
index: 0
|
};
|
},
|
//方法集合
|
methods: {
|
showMenuChange (idx) {
|
this.index = idx;
|
switch (idx) {
|
case 0: // 经开区概况
|
window.location.href = JD_JKQGK
|
break;
|
case 1: // 党建引领
|
window.location.href = JD_DJYL
|
break;
|
case 2: // 经济运行
|
window.location.href = JD_JJYX
|
break;
|
case 3: // 城市治理
|
window.location.href = "call-exe://"
|
break;
|
case 4: // 疫情防控
|
window.location.href = JD_YQFK
|
break;
|
}
|
}
|
},
|
created () { },
|
};
|
</script>
|
<style lang="less" scoped>
|
//@import url(); 引入公共css类
|
.box {
|
// display: flex;
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
background: url('../../../assets/img/左侧阴影.png') no-repeat center;
|
background-size: 100% 100%;
|
font-family: 'Source Han Sans CN';
|
font-style: normal;
|
font-weight: 500;
|
font-size: 32px;
|
line-height: 32px;
|
text-align: center;
|
color: #ffffff;
|
line-height: 80px;
|
.LeftMenuOne {
|
position: absolute;
|
width: 318.46px;
|
height: 80px;
|
margin-left: 199.54px;
|
margin-top: 221px;
|
z-index: 10000;
|
cursor: pointer;
|
}
|
|
.LeftMenuTwo {
|
position: absolute;
|
width: 318.46px;
|
height: 80px;
|
margin-left: 234.67px;
|
margin-top: 333px;
|
z-index: 10000;
|
cursor: pointer;
|
}
|
.LeftMenuThree {
|
position: absolute;
|
width: 318.46px;
|
height: 80px;
|
margin-left: 269.8px;
|
margin-top: 445px;
|
z-index: 10000;
|
cursor: pointer;
|
}
|
.LeftMenuFour {
|
position: absolute;
|
width: 318.46px;
|
height: 80px;
|
margin-left: 304.93px;
|
margin-top: 557px;
|
z-index: 10000;
|
cursor: pointer;
|
}
|
.LeftMenuFive {
|
position: absolute;
|
width: 318.46px;
|
height: 80px;
|
margin-left: 340.06px;
|
margin-top: 669px;
|
z-index: 10000;
|
cursor: pointer;
|
}
|
.LeftMenuMove {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
background: url('../../../assets/img/左侧未选择.png') no-repeat center;
|
background-size: 100% 100%;
|
font-family: SourceHanSansCN;
|
}
|
.LeftMenuMove:hover {
|
background: url('../../../assets/img/左侧选中.png') no-repeat center;
|
}
|
.LeftMenuOut {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
background: url('../../../assets/img/左侧选中.png') no-repeat center;
|
background-size: 100% 100%;
|
}
|
}
|
</style>
|
