| | |
| | | <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> |
| | | </div> |
| | | <div v-if="device !== 'mobile'" :style="topMenuStyle.topSmenuStyle"> |
| | | <s-menu |
| | | mode="horizontal" |
| | |
| | | components: { |
| | | UserMenu, |
| | | SMenu, |
| | | Logo, |
| | | Logo |
| | | }, |
| | | mixins: [mixin], |
| | | props: { |
| | |
| | | topSmenuStyle: {} |
| | | }, |
| | | chatStatus: '', |
| | | showTitle: true |
| | | } |
| | | }, |
| | | watch: { |
| | |
| | | if (this.mode === 'topmenu') { |
| | | this.buildTopMenuStyle() |
| | | } |
| | | window.addEventListener('resize', this.handleResize) |
| | | this.topMenuStyle.topNavHeader = { 'min-width': '165px', width: '165px' } |
| | | //update-end--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮----- |
| | | }, |
| | | methods: { |
| | |
| | | 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})` } |
| | | } |
| | |
| | | }, |
| | | // 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> |
| | |
| | | |
| | | /* update_end author:scott date:20190220 for: 缩小首页布局顶部的高度*/ |
| | | |
| | | .top-nav-text { |
| | | color: #f00; |
| | | height: 100% |
| | | } |
| | | |
| | | @media screen and (min-width: 1920px) { |
| | | .top-nav-text { |
| | | min-width: 400px; |
| | | } |
| | | } |
| | | |
| | | @media screen and (min-width: 1680px) and (max-width: 1920px) { |
| | | .top-nav-text { |
| | | min-width: 300px; |
| | | } |
| | | } |
| | | |
| | | @media screen and (min-width: 1400px) and (max-width: 1680px) { |
| | | .top-nav-text { |
| | | min-width: 300px; |
| | | } |
| | | } |
| | | |
| | | @media screen and (min-width: 1280px) and (max-width: 1400px) { |
| | | .top-nav-text { |
| | | min-width: 450px; |
| | | } |
| | | } |
| | | |
| | | @media screen and (max-width: 1280px) { |
| | | .top-nav-text { |
| | | min-width: 300px; |
| | | } |
| | | } |
| | | </style> |