| | |
| | | <template> |
| | | <div class="layout-navbars-breadcrumb-user pr15" :style="{ flex: layoutUserFlexNum }"> |
| | | <div class="logo"> |
| | | <img src="../../../assets/menu/companyLogo.png" /> |
| | | <!-- <img src="../../../assets/menu/companyLogo.png" />--> |
| | | <h2>智能安全数字化平台</h2> |
| | | <span>{{ systemName }}</span> |
| | | </div> |
| | | <div style="display: flex; align-items: center; padding-right: 5px"> |
| | |
| | | </div> |
| | | <template #dropdown> |
| | | <el-dropdown-menu> |
| | | <el-dropdown-item command="large" :disabled="disabledSize === 'large'">{{ $t('message.user.dropdownLarge') }}</el-dropdown-item> |
| | | <el-dropdown-item command="default" :disabled="disabledSize === 'default'">{{ $t('message.user.dropdownDefault') }}</el-dropdown-item> |
| | | <el-dropdown-item command="small" :disabled="disabledSize === 'small'">{{ $t('message.user.dropdownSmall') }}</el-dropdown-item> |
| | | <el-dropdown-item command="large" :disabled="disabledSize === 'large'">{{ |
| | | $t('message.user.dropdownLarge') |
| | | }} |
| | | </el-dropdown-item> |
| | | <el-dropdown-item command="default" :disabled="disabledSize === 'default'"> |
| | | {{ $t('message.user.dropdownDefault') }} |
| | | </el-dropdown-item> |
| | | <el-dropdown-item command="small" :disabled="disabledSize === 'small'">{{ |
| | | $t('message.user.dropdownSmall') |
| | | }} |
| | | </el-dropdown-item> |
| | | </el-dropdown-menu> |
| | | </template> |
| | | </el-dropdown> |
| | |
| | | <!-- </el-popover>--> |
| | | <!-- </div>--> |
| | | <div class="layout-navbars-breadcrumb-user-icon mr10" @click="onScreenfullClick"> |
| | | <i class="iconfont" :title="isScreenfull ? $t('message.user.title6') : $t('message.user.title5')" :class="!isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"></i> |
| | | <i class="iconfont" :title="isScreenfull ? $t('message.user.title6') : $t('message.user.title5')" |
| | | :class="!isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"></i> |
| | | </div> |
| | | <el-dropdown :show-timeout="70" :hide-timeout="50" @command="onHandleCommandClick"> |
| | | <span class="layout-navbars-breadcrumb-user-link"> |
| | | <img src="../../../assets/avator.png" class="layout-navbars-breadcrumb-user-link-photo mr5" style="width: 24px;height: 24px"/> |
| | | <img src="../../../assets/avator.png" class="layout-navbars-breadcrumb-user-link-photo mr5" |
| | | style="width: 24px;height: 24px"/> |
| | | {{ userInfos.userName }} |
| | | <el-icon class="el-icon--right"> |
| | | <ele-ArrowDown /> |
| | |
| | | import { useMenuApi } from '/@/api/systemManage/menu/index'; |
| | | |
| | | const menuApi = useMenuApi(); |
| | | import { backEndComponent, getBackEndControlRoutes, initBackEndControlRoutes, setAddRoute, setFilterMenuAndCacheTagsViewRoutes } from '../../../router/backEnd'; |
| | | import { |
| | | backEndComponent, |
| | | getBackEndControlRoutes, |
| | | initBackEndControlRoutes, |
| | | setAddRoute, |
| | | setFilterMenuAndCacheTagsViewRoutes |
| | | } from '../../../router/backEnd'; |
| | | import { NextLoading } from '/@/utils/loading'; |
| | | import { useRequestOldRoutes } from '/@/stores/requestOldRoutes'; |
| | | import { dynamicRoutes } from '/@/router/route'; |
| | |
| | | }); |
| | | } |
| | | }) |
| | | .catch(() => {}); |
| | | .catch(() => { |
| | | }); |
| | | } else if (path === 'wareHouse') { |
| | | window.open('https://gitee.com/lyt-top/vue-next-admin'); |
| | | } else { |
| | |
| | | <style scoped lang="scss"> |
| | | @media screen and (min-width: 1400px) { |
| | | .logo{ |
| | | display: flex; |
| | | align-items: center; |
| | | img { |
| | | height: 100%; |
| | | } |
| | | span{ |
| | | font-size: 32px; |
| | | |
| | | h2 { |
| | | width: 220px; |
| | | font-size: clamp(1.25rem, 0.833rem + 0.56vw, 1.5rem); |
| | | font-weight: bolder; |
| | | text-align: center; |
| | | color: #409eff; |
| | | } |
| | | |
| | | span { |
| | | font-size: clamp(1.25rem, 0.833rem + 0.56vw, 1.5rem); |
| | | color: #333; |
| | | font-weight: bolder; |
| | | border-left: 2px solid #409eff; |
| | | padding-left: 10px |
| | | padding-left: 15px |
| | | } |
| | | } |
| | | .backBtn { |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | @media screen and (min-width: 1200px) and (max-width: 1400px) { |
| | | .logo{ |
| | | display: flex; |
| | | align-items: center; |
| | | img { |
| | | height: 90%; |
| | | height: 100%; |
| | | } |
| | | span{ |
| | | font-size: 28px; |
| | | |
| | | h2 { |
| | | width: 220px; |
| | | font-size: clamp(1.25rem, 0.833rem + 0.56vw, 1.5rem); |
| | | font-weight: bolder; |
| | | text-align: center; |
| | | color: #409eff; |
| | | } |
| | | |
| | | span { |
| | | font-size: clamp(1.25rem, 0.833rem + 0.56vw, 1.5rem); |
| | | color: #333; |
| | | font-weight: bolder; |
| | | border-left: 2px solid #409eff; |
| | | padding-left: 10px |
| | | padding-left: 15px |
| | | } |
| | | } |
| | | .backBtn { |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | @media screen and (max-width: 1024px) { |
| | | .logo{ |
| | | display: flex; |
| | | align-items: center; |
| | | img { |
| | | width: 60%; |
| | | height: auto; |
| | | height: 100%; |
| | | } |
| | | span{ |
| | | font-size: 22px; |
| | | |
| | | h2 { |
| | | width: 220px; |
| | | font-size: clamp(1.25rem, 0.833rem + 0.56vw, 1.5rem); |
| | | font-weight: bolder; |
| | | text-align: center; |
| | | color: #409eff; |
| | | } |
| | | |
| | | span { |
| | | font-size: clamp(1.25rem, 0.833rem + 0.56vw, 1.5rem); |
| | | color: #333; |
| | | font-weight: bolder; |
| | | border-left: 2px solid #409eff; |
| | | padding-left: 10px |
| | | padding-left: 15px |
| | | } |
| | | } |
| | | .backBtn { |
| | |
| | | } |
| | | } |
| | | } |
| | | |
| | | .layout-navbars-breadcrumb-user { |
| | | display: flex; |
| | | align-items: center; |
| | |
| | | |
| | | .logo { |
| | | height: 75%; |
| | | padding: 5px 10px; |
| | | padding: 5px 0; |
| | | display: flex; |
| | | align-items: center; |
| | | overflow: hidden; |
| | | box-sizing: border-box; |
| | | } |
| | | |
| | | &-link { |
| | | height: 100%; |
| | | display: flex; |
| | | align-items: center; |
| | | white-space: nowrap; |
| | | |
| | | &-photo { |
| | | width: 25px; |
| | | height: 25px; |
| | | border-radius: 100%; |
| | | } |
| | | } |
| | | |
| | | &-icon { |
| | | padding: 0 10px; |
| | | cursor: pointer; |
| | |
| | | line-height: 80px; |
| | | display: flex; |
| | | align-items: center; |
| | | |
| | | &:hover { |
| | | background: var(--next-color-user-hover); |
| | | |
| | | i { |
| | | display: inline-block; |
| | | animation: logoAnimation 0.3s ease-in-out; |
| | | } |
| | | } |
| | | } |
| | | |
| | | ::v-deep(.el-dropdown) { |
| | | color: var(--next-bg-topBarColor); |
| | | } |
| | | |
| | | ::v-deep(.el-badge) { |
| | | height: 40px; |
| | | line-height: 40px; |
| | | display: flex; |
| | | align-items: center; |
| | | } |
| | | |
| | | ::v-deep(.el-badge__content.is-fixed) { |
| | | top: 12px; |
| | | } |