移动端

lixuliang

2024-05-08 f5233339920a59103d53e8efadc6f3f5d0b64f31

 src/components/rightNavigation/NavigationBar.vue

@@ -1,13 +1,12 @@
<template>
  <div class="navigationBar">
    <div class="menuBtn">
    <!-- <div class="menuBtn">
      <el-button class="right-menuBtn" @click="handleMenuListShow">
        <img src="@/assets/img/navigation/menuicon.png" />
      </el-button>
    </div>
    <!-- <div class="menuBtn" @click="handleMenuListShow"></div> -->

    <div class="menuList" v-show="showMenuList.show">
    </div> -->
    <!-- <div class="menuList" v-show="showMenuList.show"> -->
    <div class="menuList" v-show="true">
      <ul>
        <li
          v-for="(value, key) in menuList"
@@ -20,7 +19,7 @@
              :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>
        <!-- <li @click="handleMenuClick(5)" @tap="handleMenuClick(5)" v-if="resetShowState.show">
@@ -57,13 +56,13 @@
          img: require("@/assets/img/navigation/tuc.png"),
          imgActive: require("@/assets/img/navigation/tucA.png"),
        },
        {
          id: "0002my",
          name: "漫游",
          attr: "roam",
          img: require("@/assets/img/navigation/my.png"),
          imgActive: require("@/assets/img/navigation/myA.png"),
        },
        // {
        //   id: "0002my",
        //   name: "漫游",
        //   attr: "roam",
        //   img: require("@/assets/img/navigation/my.png"),
        //   imgActive: require("@/assets/img/navigation/myA.png"),
        // },
        // {
        //     id: '0003tj',
        //     name: '统计',
@@ -71,13 +70,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: '设置',
@@ -106,6 +105,7 @@
    };
  },
  methods: {
    // 点击右上角菜单按钮
    handleMenuListShow() {
      // 清除定点绕飞
      if (window.pointerFly) {
@@ -118,9 +118,16 @@
      this.showMenuList.show = !this.showMenuList.show;
      store.setMenuListShow(this.showMenuList.show);
    },

    // 点击右上角菜单项
    handleMenuClick(attr) {
      debugger;
      //清除点
      console.log("点击右上角菜单项");
      // 清除定点绕飞
      if (window.pointerFly) {
        window.pointerFly.end && window.pointerFly.end();
        window.pointerFly = null;
      }
      //清除搜索点
      flyPoint && Viewer.entities.remove(flyPoint);
      flyPoint = undefined;
      switch (attr) {
@@ -217,66 +224,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>