<template>
|
<div class="map-mode-change p-events-auto">
|
<template v-for="(item, index) in menu" :key="item.path">
|
<a :class="btnClz(item.selected)" @click="navTo(index)">
|
<div>{{ item.name }}</div>
|
</a>
|
<!-- <a class="btn-selected mode-btn m-r-8" @click="navTo(index)">
|
<div>{{ item.name }}</div>
|
</a> -->
|
</template>
|
<!-- <a class="mode-btn btn-selected">
|
<div>污染溯源</div>
|
</a>
|
<a class="mode-btn btn-unselected margin-left-8">
|
<div>走航监测</div>
|
</a>
|
<a class="mode-btn btn-unselected margin-left-8">
|
<div>网格化监测</div>
|
</a> -->
|
<!-- <div class="flexbox-col">
|
<a id="btn_more" class="btn-unselected margin-left-8">
|
<div id="mode_selected">其他模式</div>
|
</a>
|
<div
|
id="mode_others"
|
class="flexbox-col"
|
style="display: none; position: absolute; margin-top: 40px"
|
>
|
<a id="btn_gridmonitor" class="mode-btn mode-btn-other btn-unselected margin-left-8">
|
<div>网格化监测</div>
|
</a>
|
<a id="btn_electricity" class="mode-btn mode-btn-other btn-unselected margin-left-8">
|
<div>用电量监测</div>
|
</a>
|
<a id="btn_weight" class="mode-btn mode-btn-other btn-unselected margin-left-8">
|
<div>风险模型</div>
|
</a>
|
</div>
|
</div> -->
|
</div>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
menu: [
|
{
|
name: '污染溯源',
|
path: 'hmode',
|
selected: true
|
},
|
{
|
name: '走航监测',
|
path: 'rmode'
|
},
|
{
|
name: '网格化监测',
|
path: 'gridmonitor'
|
}
|
// {
|
// name: '用电量监测',
|
// path: 'emode'
|
// },
|
// {
|
// name: '风险模型',
|
// path: 'riskmode'
|
// },
|
]
|
};
|
},
|
computed: {},
|
methods: {
|
btnClz(selected) {
|
return (
|
'mode-btn ' + (selected ? 'btn-selected ' : 'btn-unselected ') + 'm-r-8'
|
);
|
},
|
navTo(index) {
|
const m = this.menu;
|
m.forEach((e) => {
|
e.selected = false;
|
});
|
m[index].selected = true;
|
this.$router.push(m[index].path);
|
}
|
}
|
};
|
</script>
|
<style scoped>
|
.map-mode-change {
|
display: inline-flex;
|
position: relative;
|
/* left: 10px; */
|
/* top: 104px; */
|
padding: 0 10px;
|
font-size: 1rem;
|
font-weight: 900;
|
/* background-color: #ffffffad; */
|
}
|
|
.map-mode-change a:hover {
|
color: antiquewhite;
|
}
|
|
.mode-btn {
|
white-space: nowrap;
|
background-color: green;
|
}
|
|
.map-mode-change .btn-selected {
|
color: #ffffff;
|
padding: 4px 16px;
|
cursor: pointer;
|
border: 2px solid var(--border-color);
|
background-color: #23dad1;
|
transform: skew(-30deg);
|
text-decoration: none;
|
/* -moz-border-radius: 6px; Old Firefox */
|
/* box-shadow: 5px 0px 2.5px #888888; */
|
}
|
|
.map-mode-change .btn-selected div {
|
transform: skew(30deg);
|
}
|
|
.map-mode-change .btn-unselected {
|
color: #5555557e;
|
padding: 4px 16px;
|
cursor: pointer;
|
background-color: #ffffff;
|
border: 2px solid #00000015;
|
transform: skew(-30deg);
|
text-decoration: none;
|
/* -moz-border-radius: 6px; Old Firefox */
|
/* box-shadow: 5px 0px 2.5px #888888; */
|
}
|
|
.map-mode-change .btn-unselected div {
|
transform: skew(30deg);
|
}
|
</style>
|
