瀏覽代碼

开发ing

zhoujump 1 月之前
父節點
當前提交
63ced94d5b
共有 3 個文件被更改,包括 17 次插入1 次删除
  1. 二進制
      public/static/image/logo_big.png
  2. 二進制
      public/static/image/logo_small.png
  3. 17 1
      src/layout/index.vue

二進制
public/static/image/logo_big.png


二進制
public/static/image/logo_small.png


+ 17 - 1
src/layout/index.vue

@@ -2,7 +2,8 @@
   <div class="layout">
   <div class="layout">
     <div class="layout-left">
     <div class="layout-left">
       <div class="layout-logo">
       <div class="layout-logo">
-        <img src="" alt="">
+        <img :class="['small','logo',isCollapse?'show':'hide']" src="/static/image/logo_small.png" alt="">
+        <img :class="['big','logo',isCollapse?'hide':'show']" src="/static/image/logo_big.png" alt="">
       </div>
       </div>
       <div class="layout-menu">
       <div class="layout-menu">
         <el-menu :unique-opened="true" class="layout-menu-inner" :collapse="isCollapse" :default-active="menuActive+''">
         <el-menu :unique-opened="true" class="layout-menu-inner" :collapse="isCollapse" :default-active="menuActive+''">
@@ -172,6 +173,21 @@ export default {
       .layout-logo{
       .layout-logo{
         border-bottom: 1px solid #E5E7EB;
         border-bottom: 1px solid #E5E7EB;
         height: 80px;
         height: 80px;
+        position: relative;
+        .logo{
+          position: absolute;
+          left: 50%;
+          transform: translateX(-50%);
+          top: 16px;
+          object-fit: contain;
+          max-width: calc(100% - 32px);
+          height: calc(100% - 32px);
+          opacity: 1;
+          transition-duration: 300ms;
+          &.hide{
+            opacity: 0;
+          }
+        }
       }
       }
       .layout-menu{
       .layout-menu{
         .layout-menu-inner{
         .layout-menu-inner{