全局顶部导航栏响应式布局

zhuzhuanzhuan

2023-12-01 3f2d362d2c1ea713b68b12511aed1aa7d6c1989a

全局顶部导航栏响应式布局

 src/assets/lxzn_white.png

 src/components/page/GlobalHeader.vue

@@ -25,7 +25,7 @@
    <div v-else :class="['top-nav-header-index', theme]">
      <div class="header-index-wide">
        <div class="header-index-left" :style="topMenuStyle.headerIndexLeft">
          <logo class="top-nav-header" :show-title="device !== 'mobile'" :style="topMenuStyle.topNavHeader"/>
          <logo class="top-nav-header" :show-title="showTitle" :style="topMenuStyle.topNavHeader"/>
          <div class="top-nav-text">
            <div style="width:100%;height: 50%;line-height:35px">密级：内部</div>
            <div style="width:100%;height: 50%;line-height:25px">警告：本系统禁止存储、处理、传输涉密信息</div>
@@ -101,7 +101,8 @@
          headerIndexRight: {},
          topSmenuStyle: {}
        },
        chatStatus: ''
        chatStatus: '',
        showTitle: true
      }
    },
    watch: {
@@ -125,6 +126,7 @@
      if (this.mode === 'topmenu') {
        this.buildTopMenuStyle()
      }
      window.addEventListener('resize', this.handleResize)
      //update-end--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
    },
    methods: {
@@ -154,8 +156,8 @@
            this.topMenuStyle.headerIndexLeft = {}
          } else {
            let rightWidth = '360px'
            this.topMenuStyle.topNavHeader = { 'min-width': '165px' }
            this.topMenuStyle.topSmenuStyle = { 'width': 'calc(100% - 165px)' }
            this.topMenuStyle.topNavHeader = { 'min-width': '50px', width: '50px' }
            this.topMenuStyle.topSmenuStyle = { 'width': 'calc(100% - 350px)' }
            this.topMenuStyle.headerIndexRight = { 'min-width': rightWidth }
            this.topMenuStyle.headerIndexLeft = { 'width': `calc(100% - ${rightWidth})` }
          }
@@ -166,9 +168,23 @@
      // update-begin-author:sunjianlei date:20210508 for: 修复动态功能测试菜单、带参数菜单标题错误、展开错误的问题
      handleUpdateMenuTitle(value) {
        this.$emit('updateMenuTitle', value)
      }
      },
      // update-end-author:sunjianlei date:20210508 for: 修复动态功能测试菜单、带参数菜单标题错误、展开错误的问题

      handleResize() {
        console.log('触发尺寸改变', window.innerWidth)
        if (window.innerWidth > 1680) {
          this.showTitle = true
          this.topMenuStyle.topNavHeader = { 'min-width': '165px' }
          this.topMenuStyle.topSmenuStyle = { 'width': 'calc(100% - 165px)' }
        } else if (window.innerWidth <= 1680 && window.innerWidth > 1280) {
          this.showTitle = false
          this.topMenuStyle.topNavHeader = { 'min-width': '50px', width: '50px' }
          this.topMenuStyle.topSmenuStyle = { 'width': 'calc(100% - 250px)' }
        } else if (window.innerWidth <= 1280 && window.innerWidth > 960) {
          this.topMenuStyle.topSmenuStyle = { 'width': 'calc(100% - 350px)' }
        }
      }
    }
  }
</script>
@@ -234,43 +250,34 @@

  @media screen and (min-width: 1920px) {
    .top-nav-text {
      width: 400px;
      min-width: 400px;
    }
  }

  @media screen and (min-width: 1680px) and (max-width: 1920px) {
    .top-nav-text {
      width: 400px;
      min-width: 300px;
    }
  }

  @media screen and (min-width: 1400px) and (max-width: 1680px) {
    .top-nav-text {
      width: 500px;
    }

    .top-nav-header {
      display: none;
      min-width: 300px;
      color: #00ff80;
    }
  }

  @media screen and (min-width: 1280px) and (max-width: 1400px) {
    .top-nav-text {
      width: 600px;
    }

    .top-nav-header {
      display: none;
      min-width: 450px;
      color: yellow;
    }
  }

  @media screen and (max-width: 1280px) {
    .top-nav-text {
      width: 600px;
    }

    .top-nav-header {
      display: none;
      min-width: 300px;
      color: white;
    }
  }
</style>

 src/components/tools/Logo.vue

@@ -3,7 +3,7 @@
    <router-link :to="routerLinkTo">

      <!-- update-begin- author:sunjianlei --- date:20190814 --- for: logo颜色根据主题颜色变化 -->
      <img v-if="navTheme === 'dark'" src="~@/assets/lxzn.png" alt="logo">
      <img v-if="navTheme === 'dark'" src="~@/assets/lxzn_white.png" alt="logo">
      <img v-else src="~@/assets/lxzn.png" alt="logo">
      <!-- update-begin- author:sunjianlei --- date:20190814 --- for: logo颜色根据主题颜色变化 -->