youhua

少年

2024-03-13 290aa4c2bcd83c584e0b10cab76131c069bf64b7

 src/components/rightNavigation/NavigationBar2.vue

@@ -1,11 +1,10 @@
<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"
@@ -18,10 +17,9 @@
              :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>
@@ -33,6 +31,7 @@
  name: "NavigationBar",
  data() {
    return {
      state: store.navigator,
      showMenuList: store.MenuList,
      resetShowState: store.resetLink,
      favoriteShowState: store.favorite,
@@ -58,13 +57,13 @@
        //     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: '设置',
@@ -109,8 +108,7 @@

    // 点击右上角菜单项
    handleMenuClick(attr) {
      debugger;
      console.log('点击右上角菜单项');
      console.log("点击右上角菜单项");
      //清除搜索点
      flyPoint && Viewer.entities.remove(flyPoint);
      flyPoint = undefined;
@@ -208,66 +206,55 @@
<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>