96 lines
2.1 KiB
Vue
96 lines
2.1 KiB
Vue
<template>
|
|
<section class="buildingToolBar">
|
|
<div class="toolBar">
|
|
<div class="nav" v-for="(op,i) in navs" :key="i" :class="{selected:i==active}" @click="active=i">
|
|
<ai-icon :icon="op.icon"/>
|
|
<div>{{ op.name }}</div>
|
|
</div>
|
|
</div>
|
|
<component :is="currentNav.comp" class="toolPane"/>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import BuildingInfo from "./toolBar/buildingInfo";
|
|
import CommunityOverview from "./toolBar/communityOverview";
|
|
// import NearbyGCS from "./toolBar/nearbyGCS";
|
|
import RecentEvents from "./toolBar/recentEvents";
|
|
|
|
export default {
|
|
name: "buildingToolBar",
|
|
components: {RecentEvents, CommunityOverview, BuildingInfo},
|
|
computed: {
|
|
navs() {
|
|
return [
|
|
{icon: 'icondanweiguanli', name: "单元统计", comp: BuildingInfo},
|
|
{icon: 'icondanweiguanli', name: "单元切换", comp: CommunityOverview},
|
|
// {icon: 'icondanweiguanli', name: "网格员", comp: NearbyGCS},
|
|
// {icon: 'icondanweiguanli', name: "近期事件", comp: RecentEvents},
|
|
]
|
|
},
|
|
currentNav() {
|
|
return this.navs[this.active]
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
active: 0
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.buildingToolBar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
|
|
.toolBar {
|
|
height: 40px;
|
|
background: #FFFFFF;
|
|
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
|
|
border-radius: 4px;
|
|
padding: 4px;
|
|
width: 400px;
|
|
display: flex;
|
|
gap: 8px;
|
|
box-sizing: border-box;
|
|
align-self: flex-end;
|
|
|
|
.nav {
|
|
flex: 1;
|
|
height: 32px;
|
|
color: #3A3A3A;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
|
|
.AiIcon {
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
&:hover {
|
|
color: #2266FF;
|
|
}
|
|
|
|
&.selected {
|
|
background: #E4F0FF;
|
|
color: #2266FF;
|
|
}
|
|
}
|
|
}
|
|
|
|
.toolPane {
|
|
background: #FFFFFF;
|
|
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
</style>
|