4671751422934_.pic.jpg

4681751422941_.pic.jpg

中心代码如下，具体的细节需要针对系统调整

 <div
      :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }"
      class="main-container"
    >
      <div class="main-container-center">
        <div
          id="headerDiv"
          :class="[
            { 'fixed-header': fixedHeader },
            'nav-opacity',
            { 'menu-white': isMenuWhite },
          ]"
        >
          <!-- 区分不同的头部导航栏 -->
          <navbar />
          <!-- <tags-view v-if="needTagsView"/> -->
        </div>
      </div>
      <div class="contenteds">
        <app-main />
      </div>
      <right-panel>
        <settings />
      </right-panel>
    </div>



  data() {
    return {
      isMenuWhite: false,
    };
  },
  watch: {
    $route() {
      this.isMenuWhite = false;
    },
  },



  beforeMount() {
    // 监听窗口大小变化和缩放事件
    window.addEventListener("resize", this.adjustNavbarWidth);
    window.addEventListener("load", this.adjustNavbarWidth);
    window.addEventListener("scroll", this.handleScroll, true);
    const observer = new MutationObserver(this.adjustNavbarWidth);
    observer.observe(document.body, {
      attributes: true,
      childList: true,
      subtree: true,
    });
  },
  methods: {
    adjustNavbarWidth() {
      const content = document.querySelector(".contenteds");
      const navbar = document.querySelector(".nav-opacity");
      const contentWidth = content.offsetWidth; // 获取内容宽度
      navbar.style.width = `${contentWidth}px`; // 设置导航栏宽度

      let that = this;
      window.addEventListener("message", function (event) {
        if (event.data.type === "iframeScroll") {
          if (event.data.y > 80) {
            that.isMenuWhite = true;
          } else {
            that.isMenuWhite = false;
          }
        }
      });
    },
    handleScroll(event) {
      event.preventDefault();
      if (
        event.target.className === "main-container" ||
        event.target.className === "container-box-first"
      ) {
        if (
          this.$route.path == "/index" 
        ) {
          if (event.target.scrollTop > 80) {
            this.isMenuWhite = true;
          } else {
            this.isMenuWhite = false;
          }
        } else if (this.$route.path == "/IntelligentAgentExperience") {
           if (event.target.scrollTop > 20) {
            this.isMenuWhite = true;
          } else {
            this.isMenuWhite = false;
          }
        } else {
          this.isMenuWhite = false;
        }
      }
    },
}



.fixed-header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9;
  width: 100%;
  transition: width 0.28s;
}
.nav-opacity {
  width: 100%;
  position: fixed;
  left: 50%;
  transform: translate(-50%, 0px);
  top: 0;
  z-index: 100;
  // opacity: 0.68;
  // background-color:white;
  background-color: rgba(255, 255, 255, 0.32);
}
.menu-white {
  /* 滚动后的白色菜单样式 */
  background-color: #fff !important;
}