系统logo替换

src/layout/components/Sidebar/Logo.vue

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

src/views/system/basic-type-config/divide-company-manage/index.vue

@@ -256,7 +256,7 @@ export default {
     },
 
     created() {
-        this.getCompanySelectList()
+        // this.getCompanySelectList()
     },
 }
 </script>