Default Changelist

Admin

2022-09-15 28c8649014bb0030bb62c74da1b3f7854493d036

 src/layout/navBars/breadcrumb/user.vue

@@ -2,7 +2,7 @@
    <div class="layout-navbars-breadcrumb-user pr15" :style="{ flex: layoutUserFlexNum }">
        <div class="logo">
            <img @click="toHome" src="../../../assets/menu/companyLogo.png" />
            <span style="font-size: 32px; color: #409eff; font-weight: bolder; border-left: 2px solid #409eff; padding-left: 10px">{{ systemName }}</span>
            <span>{{ systemName }}</span>
        </div>
        <div style="display: flex; align-items: center; padding-right: 5px">
            <div @click="backToMenu()" class="backBtn">返回首页</div>
@@ -298,71 +298,113 @@
</script>

<style scoped lang="scss">
.layout-navbars-breadcrumb-user {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .logo {
        height: 75%;
        padding: 5px 10px;
        display: flex;
        align-items: center;
        overflow: hidden;
        box-sizing: border-box;
        img {
            height: 100%;
            cursor: pointer;
        }
    }
    &-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;
        color: var(--next-bg-topBarColor);
        height: 80px;
        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;
    @media screen and (min-width: 1400px) {
        .logo{
            img {
                height: 100%;
                cursor: pointer;
            }
            span{
                font-size: 32px;
                color: #409eff;
                font-weight: bolder;
                border-left: 2px solid #409eff;
                padding-left: 10px
            }
        }
    }
    ::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;
    }
    .backBtn {
        font-size: 16px;
        cursor: pointer;
        margin-right: 20px;

        &:hover {
            color: #409eff;
            font-weight: bolder;
    @media screen and (min-width: 1200px) and (max-width: 1400px) {
        .logo{
            img {
                height: 90%;
                cursor: pointer;
            }
            span{
                font-size: 28px;
                color: #409eff;
                font-weight: bolder;
                border-left: 2px solid #409eff;
                padding-left: 10px
            }
        }
    }
}
    @media screen and (max-width: 1024px) {
        .logo{
            img {
                width: 60%;
                height: auto;
                cursor: pointer;
            }
            span{
                font-size: 22px;
                color: #409eff;
                font-weight: bolder;
                border-left: 2px solid #409eff;
                padding-left: 10px
            }
        }
    }
    .layout-navbars-breadcrumb-user {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .logo {
            height: 75%;
            padding: 5px 10px;
            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;
            color: var(--next-bg-topBarColor);
            height: 80px;
            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;
        }
        .backBtn {
            font-size: 16px;
            cursor: pointer;
            margin-right: 20px;

            &:hover {
                color: #409eff;
                font-weight: bolder;
            }
        }
    }
</style>