From 2d0cc4cfa2998490ce117560c7282c67dc40d70a Mon Sep 17 00:00:00 2001
From: xiaoxian521 <1923740402@qq.com>
Date: Mon, 13 Feb 2023 14:30:34 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96`logo`=E5=9B=BE?=
 =?UTF-8?q?=E5=92=8C=E6=96=87=E5=AD=97=E5=B8=83=E5=B1=80=E4=BB=A5=E5=8F=8A?=
 =?UTF-8?q?=E7=BB=9F=E4=B8=80=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/logo.svg                              |  1 +
 src/layout/components/sidebar/horizontal.vue |  8 +---
 src/layout/components/sidebar/logo.vue       | 48 ++++++++------------
 src/style/sidebar.scss                       | 21 +++++----
 4 files changed, 34 insertions(+), 44 deletions(-)
 create mode 100644 public/logo.svg

diff --git a/public/logo.svg b/public/logo.svg
new file mode 100644
index 000000000..bc26056b1
--- /dev/null
+++ b/public/logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024"><path fill="#386BF3" d="M410.558.109c0 210.974-300.876 361.752-300.876 633.548 0 174.943 134.704 316.787 300.876 316.787s300.877-141.817 300.877-316.787C711.408 361.752 410.558 210.974 410.558.109z"/><path fill="#C3D2FB" d="M613.469 73.665c0 211.055-300.877 361.914-300.877 633.547C312.592 882.156 447.296 1024 613.47 1024s300.876-141.817 300.876-316.788C914.29 435.58 613.469 284.72 613.469 73.665z"/><path fill="#303F5B" d="M312.592 707.212c0-183.713 137.636-312.171 226.723-441.39 81.702 106.112 172.12 218.74 172.12 367.726A309.755 309.755 0 0 1 420.36 950.064a323.114 323.114 0 0 1-107.769-242.852z"/></svg>
\ No newline at end of file
diff --git a/src/layout/components/sidebar/horizontal.vue b/src/layout/components/sidebar/horizontal.vue
index 728a8198c..6d2574f74 100644
--- a/src/layout/components/sidebar/horizontal.vue
+++ b/src/layout/components/sidebar/horizontal.vue
@@ -46,12 +46,8 @@ watch(
     class="horizontal-header"
   >
     <div class="horizontal-header-left" @click="backHome">
-      <FontIcon
-        icon="pure-iconfont-logo"
-        svg
-        style="width: 35px; height: 35px"
-      />
-      <h4>{{ title }}</h4>
+      <img src="/logo.svg" alt="logo" />
+      <span>{{ title }}</span>
     </div>
     <el-menu
       router
diff --git a/src/layout/components/sidebar/logo.vue b/src/layout/components/sidebar/logo.vue
index 61eebb7cb..f079b3bab 100644
--- a/src/layout/components/sidebar/logo.vue
+++ b/src/layout/components/sidebar/logo.vue
@@ -18,11 +18,7 @@ const { title } = useNav();
         class="sidebar-logo-link"
         to="/"
       >
-        <FontIcon
-          icon="pure-iconfont-logo"
-          svg
-          style="width: 35px; height: 35px"
-        />
+        <img src="/logo.svg" alt="logo" />
         <span class="sidebar-title">{{ title }}</span>
       </router-link>
       <router-link
@@ -32,11 +28,7 @@ const { title } = useNav();
         class="sidebar-logo-link"
         to="/"
       >
-        <FontIcon
-          icon="pure-iconfont-logo"
-          svg
-          style="width: 35px; height: 35px"
-        />
+        <img src="/logo.svg" alt="logo" />
         <span class="sidebar-title">{{ title }}</span>
       </router-link>
     </transition>
@@ -45,37 +37,33 @@ const { title } = useNav();
 
 <style lang="scss" scoped>
 .sidebar-logo-container {
-  position: relative;
   width: 100%;
   height: 48px;
-  text-align: center;
   overflow: hidden;
+  position: relative;
 
   .sidebar-logo-link {
     height: 100%;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    margin-top: 5px;
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+
+    img {
+      height: 32px;
+      display: inline-block;
+    }
 
     .sidebar-title {
-      display: block;
-      width: 160px;
+      height: 32px;
+      line-height: 32px;
+      margin: 2px 0 0 12px;
+      color: $subMenuActiveText;
+      display: inline-block;
       overflow: hidden;
-      text-overflow: ellipsis;
       white-space: nowrap;
-      text-align: left;
-      color: #1890ff;
+      text-overflow: ellipsis;
+      font-size: 18px;
       font-weight: 600;
-      font-size: 20px;
-      margin-top: 10px;
-      font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
-    }
-  }
-
-  .collapses {
-    .sidebar-logo {
-      margin-right: 0;
     }
   }
 }
diff --git a/src/style/sidebar.scss b/src/style/sidebar.scss
index 690263a6f..31c400970 100644
--- a/src/style/sidebar.scss
+++ b/src/style/sidebar.scss
@@ -411,17 +411,22 @@
       cursor: pointer;
       transition: all var(--pure-transition-duration) ease;
 
-      i {
-        font-size: 30px;
-        color: #1890ff;
-        margin-right: 4px;
+      img {
+        height: 32px;
+        display: inline-block;
       }
 
-      h4 {
-        font-size: 16px;
-        font-weight: 700;
+      span {
+        height: 32px;
+        line-height: 32px;
+        margin: 2px 0 0 12px;
         color: $subMenuActiveText;
-        transition: all 0.5s;
+        display: inline-block;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        font-size: 18px;
+        font-weight: 600;
       }
     }