| | |
| | | <template> |
| | | <div class="navigationBar"> |
| | | <div class="menuBtn"> |
| | | <el-button class="right-menuBtn" @click="handleMenuListShow"> |
| | | <img src="@/assets/img/navigation/menuicon.png" /> |
| | | </el-button> |
| | | </div> |
| | | <div class="menuList" v-show="showMenuList.show"> |
| | | <div class="navigationBar" v-if="state.show"> |
| | | <!-- <div class="menuBtn" @click="handleMenuListShow"> |
| | | <img src="@/assets/img/navigation/menuicon.png" /> |
| | | </div> --> |
| | | <!-- <div class="menuList" v-show="showMenuList.show"> --> |
| | | <div class="menuList" v-show="true"> |
| | | <ul> |
| | | <li |
| | | v-for="(value, key) in menuList" |
| | |
| | | :src="showState[value.attr].show ? value.imgActive : value.img" |
| | | :class="showState[value.attr].show ? 'Active' : 'noActive'" |
| | | /> |
| | | <span>{{ value.name }}</span> |
| | | <!-- <span>{{ value.name }}</span> --> |
| | | </div> |
| | | </li> |
| | | |
| | | </ul> |
| | | </div> |
| | | </div> |
| | |
| | | name: "NavigationBar", |
| | | data() { |
| | | return { |
| | | state: store.navigator, |
| | | showMenuList: store.MenuList, |
| | | resetShowState: store.resetLink, |
| | | favoriteShowState: store.favorite, |
| | |
| | | // img: require("@/assets/img/navigation/tj.png"), |
| | | // imgActive: require("@/assets/img/navigation/tjA.png"), |
| | | // }, |
| | | { |
| | | id: "0004sc", |
| | | name: "位置", |
| | | attr: "location", |
| | | img: require("@/assets/img/navigation/sc.png"), |
| | | imgActive: require("@/assets/img/navigation/scA.png"), |
| | | }, |
| | | // { |
| | | // id: "0004sc", |
| | | // name: "位置", |
| | | // attr: "location", |
| | | // img: require("@/assets/img/navigation/sc.png"), |
| | | // imgActive: require("@/assets/img/navigation/scA.png"), |
| | | // }, |
| | | // { |
| | | // id: '0005sz', |
| | | // name: '设置', |
| | |
| | | |
| | | // 点击右上角菜单项 |
| | | handleMenuClick(attr) { |
| | | console.log('点击右上角菜单项'); |
| | | console.log("点击右上角菜单项"); |
| | | //清除搜索点 |
| | | flyPoint && Viewer.entities.remove(flyPoint); |
| | | flyPoint = undefined; |
| | |
| | | <style scoped> |
| | | .navigationBar { |
| | | position: absolute; |
| | | top: 0.55rem; |
| | | right: 0.15rem; |
| | | top: 0.75rem; |
| | | right: 0.1rem; |
| | | z-index: 10; |
| | | /* width: 64px; */ |
| | | } |
| | | .menuBtn .el-button { |
| | | padding: 0 !important; |
| | | font-size: 0.24rem; |
| | | border: unset; |
| | | float: unset; |
| | | display: block; |
| | | .menuBtn { |
| | | padding: 8px; |
| | | background: rgba(18, 126, 255, 1); |
| | | border-radius: 10px; |
| | | } |
| | | .menuBtn img { |
| | | width: 24px; |
| | | margin: 3px; |
| | | } |
| | | /* .menuBtn { |
| | | margin-left: 25px; |
| | | width: 22px; |
| | | width: 20px; |
| | | height: 20px; |
| | | background-image: url("~@/assets/img/navigation/menuicon.png"); |
| | | background-repeat: no-repeat; |
| | | background-size: 100% 100%; |
| | | } */ |
| | | } |
| | | |
| | | .menuList { |
| | | /* background-color: red; */ |
| | | /* padding: 0px 2px; |
| | | position: absolute; |
| | | width: 40px; |
| | | margin-top: 0.1rem; |
| | | right: -0.05rem; |
| | | right: 0; |
| | | background-color: white; |
| | | border-radius: 10px; |
| | | border-radius: 10px; */ |
| | | } |
| | | |
| | | .menuItem { |
| | | width: 32px; |
| | | width: 0.42rem; |
| | | /* width: 32px; |
| | | color: black; |
| | | margin: 0px auto; |
| | | margin-top: 10px; |
| | | margin-bottom: 7px; |
| | | /* padding-bottom: 7px; */ |
| | | border-bottom: 1px solid #e8e8e9; |
| | | background-color: #bfa; |
| | | text-align: center; |
| | | cursor: pointer; |
| | | /* border-bottom: 1px solid #e8e8e9; */ |
| | | /* pointer-events:none */ |
| | | cursor: pointer; */ |
| | | } |
| | | |
| | | li:last-child .menuItem { |
| | | border: none; |
| | | } |
| | | |
| | | img { |
| | | width: 24px; |
| | | /* height: 24px; */ |
| | | text-align: center; |
| | | .menuItem img { |
| | | width: 100%; |
| | | /* text-align: center; */ |
| | | } |
| | | |
| | | .menuItem span { |
| | | /* .menuItem span { |
| | | display: block; |
| | | text-align: center; |
| | | } |
| | | margin-top: 2px; |
| | | } */ |
| | | </style> |