| | |
| | | <template> |
| | | <div class="navigationBar"> |
| | | <div class="menuBtn"> |
| | | <el-button class="right-menuBtn" @click="handleMenuListShow"> |
| | | <img src="@/assets/img/navigation/menuicon.png" /> |
| | | </el-button> |
| | | <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"> |
| | | <ul> |
| | |
| | | <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, |
| | |
| | | |
| | | // 点击右上角菜单项 |
| | | 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 { |
| | | padding: 0px 2px; |
| | | position: absolute; |
| | | width: 40px; |
| | | margin-top: 0.1rem; |
| | | right: -0.05rem; |
| | | right: 0; |
| | | background-color: white; |
| | | border-radius: 10px; |
| | | } |
| | |
| | | .menuItem { |
| | | width: 32px; |
| | | color: black; |
| | | margin: 0px auto; |
| | | margin-top: 10px; |
| | | margin-bottom: 7px; |
| | | /* padding-bottom: 7px; */ |
| | | border-bottom: 1px solid #e8e8e9; |
| | | text-align: center; |
| | | cursor: pointer; |
| | | /* border-bottom: 1px solid #e8e8e9; */ |
| | | /* pointer-events:none */ |
| | | } |
| | | |
| | | li:last-child .menuItem { |
| | | border: none; |
| | | } |
| | | |
| | | img { |
| | | .menuItem img { |
| | | width: 24px; |
| | | /* height: 24px; */ |
| | | text-align: center; |
| | | } |
| | | |
| | | .menuItem span { |
| | | display: block; |
| | | text-align: center; |
| | | margin-top: 2px; |
| | | } |
| | | </style> |