马宇豪
2025-03-04 1b9fea7d4af68d8f933b2dc42bf6084b9646f64c
src/layout/navBars/breadcrumb/user.vue
@@ -1,7 +1,8 @@
<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">
@@ -12,9 +13,17 @@
                </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>
@@ -53,11 +62,13 @@
            <!--            </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 />
@@ -117,7 +128,13 @@
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';
@@ -277,7 +294,8 @@
                            });
                        }
                    })
                    .catch(() => {});
            .catch(() => {
            });
            } else if (path === 'wareHouse') {
                window.open('https://gitee.com/lyt-top/vue-next-admin');
            } else {
@@ -393,15 +411,26 @@
<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 {
@@ -415,17 +444,29 @@
            }
        }
    }
    @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 {
@@ -439,18 +480,29 @@
            }
        }
    }
    @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 {
@@ -464,6 +516,7 @@
            }
        }
    }
    .layout-navbars-breadcrumb-user {
        display: flex;
        align-items: center;
@@ -471,23 +524,26 @@
        .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;
@@ -496,23 +552,28 @@
            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;
        }