123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138 |
- <template>
- <div
- class="sidebar-logo-container"
- :class="{ collapse: collapse }"
- :style="{
- backgroundColor:
- sideTheme === 'theme-dark'
- ? variables.menuBackground
- : variables.menuLightBackground,
- }"
- >
- <transition name="sidebarLogoFade">
- <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
- <img :src="realSrc(company.companyLogo)" class="sidebar-logo" />
- <h1
- class="sidebar-title"
- :style="{
- color:
- sideTheme === 'theme-dark'
- ? variables.logoTitleColor
- : variables.logoLightTitleColor,
- }"
- >
- {{ company.companyFullName || "管理系统" }}
- </h1>
- </router-link>
- <router-link v-else key="expand" class="sidebar-logo-link" to="/">
- <img :src="realSrc(company.companyLogo)" class="sidebar-logo" />
- <h1
- class="sidebar-title"
- :style="{
- color:
- sideTheme === 'theme-dark'
- ? variables.logoTitleColor
- : variables.logoLightTitleColor,
- }"
- >
- {{ company.companyFullName || "管理系统" }}
- </h1>
- </router-link>
- </transition>
- </div>
- </template>
- <script>
- import logoImg from "@/assets/logo/logo.png";
- import variables from "@/assets/styles/variables.scss";
- import { mapGetters } from "vuex";
- export default {
- name: "SidebarLogo",
- props: {
- collapse: {
- type: Boolean,
- required: true,
- },
- },
- computed: {
- ...mapGetters(["company"]),
- variables() {
- return variables;
- },
- sideTheme() {
- return this.$store.state.settings.sideTheme;
- },
- },
- data() {
- return {
- title: process.env.VUE_APP_TITLE,
- logo: logoImg,
- };
- },
- methods: {
- realSrc(src) {
- if (!src) {
- return logoImg;
- }
- return process.env.VUE_APP_BASE_API + src;
- },
- },
- };
- </script>
- <style lang="scss" scoped>
- .sidebarLogoFade-enter-active {
- transition: opacity 1.5s;
- }
- .sidebarLogoFade-enter,
- .sidebarLogoFade-leave-to {
- opacity: 0;
- }
- .sidebar-logo-container {
- position: relative;
- width: 100%;
- height: 50px;
- line-height: 50px;
- background: #2b2f3a;
- // text-align: center;
- padding-left: 10%;
- overflow: hidden;
- & .sidebar-logo-link {
- height: 100%;
- width: 100%;
- & .sidebar-logo {
- width: 32px;
- height: 32px;
- border-radius: 50%;
- vertical-align: middle;
- margin-right: 5px;
- }
- & .sidebar-title {
- display: inline-block;
- margin: 0;
- color: #fff;
- font-weight: 600;
- line-height: 50px;
- font-size: 12px;
- font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
- vertical-align: middle;
- white-space: pre;
- }
- }
- &.collapse {
- text-align: center;
- padding-left: 0;
- .sidebar-logo {
- margin-right: 0px;
- }
- }
- }
- </style>
|