<template>
|
<div class="box">
|
<div class="RightMenuOne">
|
<div class="RightMenuMove"
|
@click="showMenuChange(0)"
|
:class="{RightMenuOut:index == 0}">综合执法</div>
|
</div>
|
<div class="RightMenuTwo">
|
<div class="RightMenuMove"
|
@click="showMenuChange(1)"
|
:class="{RightMenuOut:index == 1}">一网通办</div>
|
</div>
|
<div class="RightMenuThree">
|
<div class="RightMenuMove"
|
@click="showMenuChange(2)"
|
:class="{RightMenuOut:index == 2}">诚信监管</div>
|
</div>
|
<div class="RightMenuFour">
|
<div class="RightMenuMove"
|
@click="showMenuChange(3)"
|
:class="{RightMenuOut:index == 3}">企业链</div>
|
</div>
|
<!-- <div class="RightMenuFive">
|
<div class="RightMenuMove" @click="showMenuChange(4)" :class="{RightMenuOut:index == 4}">经开区概况</div>
|
</div> -->
|
</div>
|
</template>
|
|
<script>
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
components: {},
|
data () {
|
//这里存放数据
|
return { index: -1 };
|
},
|
//方法集合
|
methods: {
|
showMenuChange (idx) {
|
this.index = idx;
|
switch (idx) {
|
case 0: // 综合执法
|
window.location.href = JD_ZHZF
|
break;
|
case 1: // 一网通办
|
window.location.href = JD_YWTB
|
break;
|
case 2: // 诚信监管
|
window.location.href = JD_CXJG
|
break;
|
case 3: // 企业链
|
window.location.href = JD_QYL
|
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-style: normal;
|
font-weight: 500;
|
font-size: 32px;
|
line-height: 32px;
|
text-align: center;
|
color: #ffffff;
|
line-height: 80px;
|
.RightMenuOne {
|
position: absolute;
|
width: 318.46px;
|
height: 80px;
|
right: 248.54px;
|
top: 221px;
|
z-index: 10000;
|
float: right;
|
cursor: pointer;
|
}
|
|
.RightMenuTwo {
|
position: absolute;
|
width: 318.46px;
|
height: 80px;
|
right: 283.67px;
|
top: 333px;
|
z-index: 10000;
|
cursor: pointer;
|
}
|
.RightMenuThree {
|
position: absolute;
|
width: 318.46px;
|
height: 80px;
|
right: 318.8px;
|
top: 445px;
|
z-index: 10000;
|
cursor: pointer;
|
}
|
.RightMenuFour {
|
position: absolute;
|
width: 318.46px;
|
height: 80px;
|
right: 353.93px;
|
top: 557px;
|
z-index: 10000;
|
cursor: pointer;
|
}
|
.RightMenuFive {
|
position: absolute;
|
width: 318.46px;
|
height: 80px;
|
right: 389.06px;
|
top: 669px;
|
z-index: 10000;
|
cursor: pointer;
|
}
|
.RightMenuMove {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
background: url('../../../assets/img/右侧未选中.png') no-repeat center;
|
background-size: 100% 100%;
|
font-family: SourceHanSansCN;
|
}
|
.RightMenuMove:hover {
|
background: url('../../../assets/img/右侧选中.png') no-repeat center;
|
}
|
.RightMenuOut {
|
width: 100%;
|
height: 100%;
|
position: absolute;
|
background: url('../../../assets/img/右侧选中.png') no-repeat center;
|
background-size: 100% 100%;
|
}
|
}
|
</style>
|
