perf: icon

src/assets/iconfont/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2208059 */
-  src: url("iconfont.woff2?t=1634092870259") format("woff2"),
+  src: url("iconfont.woff2?t=1634903299890") format("woff2"),
-    url("iconfont.woff?t=1634092870259") format("woff"),
+    url("iconfont.woff?t=1634903299890") format("woff"),
-    url("iconfont.ttf?t=1634092870259") format("truetype");
+    url("iconfont.ttf?t=1634903299890") format("truetype");
 }
 
 .iconfont {
@@ -13,6 +13,22 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.team-iconshuifei::before {
+  content: "\e62d";
+}
+
+.team-iconshuiyuandi::before {
+  content: "\e64e";
+}
+
+.team-iconshuifei1::before {
+  content: "\e616";
+}
+
+.team-iconshui::before {
+  content: "\e61f";
+}
+
 .team-iconzuixinlianzai::before {
   content: "\e6da";
 }

src/assets/iconfont/iconfont.json

@@ -5,6 +5,34 @@
   "css_prefix_text": "team-icon",
   "description": "pure-admin",
   "glyphs": [
+    {
+      "icon_id": "1715043",
+      "name": "水费",
+      "font_class": "shuifei",
+      "unicode": "e62d",
+      "unicode_decimal": 58925
+    },
+    {
+      "icon_id": "7873366",
+      "name": "水源地",
+      "font_class": "shuiyuandi",
+      "unicode": "e64e",
+      "unicode_decimal": 58958
+    },
+    {
+      "icon_id": "12257150",
+      "name": "水费",
+      "font_class": "shuifei1",
+      "unicode": "e616",
+      "unicode_decimal": 58902
+    },
+    {
+      "icon_id": "24810949",
+      "name": "水",
+      "font_class": "shui",
+      "unicode": "e61f",
+      "unicode_decimal": 58911
+    },
     {
       "icon_id": "2508809",
       "name": "最新连载",

src/layout/components/sidebar/horizontal.vue

@@ -15,6 +15,7 @@ import { algorithm } from "/@/utils/algorithm";
 import screenfull from "../screenfull/index.vue";
 import { useRoute, useRouter } from "vue-router";
 import { storageSession } from "/@/utils/storage";
+import Icon from "/@/components/ReIcon/src/Icon.vue";
 import { deviceDetection } from "/@/utils/deviceDetection";
 import globalization from "/@/assets/svg/globalization.svg";
 import { usePermissionStoreHook } from "/@/store/modules/permission";
@@ -117,7 +118,7 @@ onMounted(() => {
 <template>
   <div class="horizontal-header">
     <div class="horizontal-header-left" @click="backHome">
-      <i class="fa fa-optin-monster"></i>
+      <Icon svg :width="35" :height="35" content="team-iconshuiyuandi" />
       <h4>{{ title }}</h4>
     </div>
     <el-menu

src/layout/components/sidebar/logo.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { getCurrentInstance } from "vue";
+import Icon from "/@/components/ReIcon/src/Icon.vue";
 const props = defineProps({
   collapse: Boolean
 });
@@ -18,8 +19,8 @@ const title =
         class="sidebar-logo-link"
         to="/"
       >
-        <i class="fa fa-optin-monster"></i>
+        <Icon svg :width="35" :height="35" content="team-iconshuiyuandi" />
-        <h1 class="sidebar-title">{{ title }}</h1>
+        <span class="sidebar-title">{{ title }}</span>
       </router-link>
       <router-link
         v-else
@@ -28,8 +29,8 @@ const title =
         class="sidebar-logo-link"
         to="/"
       >
-        <i class="fa fa-optin-monster"></i>
+        <Icon svg :width="35" :height="35" content="team-iconshuiyuandi" />
-        <h1 class="sidebar-title">{{ title }}</h1>
+        <span class="sidebar-title">{{ title }}</span>
       </router-link>
     </transition>
   </div>
@@ -39,28 +40,24 @@ const title =
 .sidebar-logo-container {
   position: relative;
   width: 100%;
-  height: 50px;
+  height: 48px;
   text-align: center;
   overflow: hidden;
 
   .sidebar-logo-link {
     height: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    margin-top: 5px;
 
     .sidebar-title {
-      display: inline-block;
-      margin: 0;
       color: #1890ff;
       font-weight: 600;
       font-size: 20px;
-      margin-top: 16px;
+      margin-top: 10px;
       font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
     }
-
-    .fa-optin-monster {
-      font-size: 30px;
-      color: #1890ff;
-      margin-top: 5px;
-    }
   }
 
   .collapse {

src/style/sidebar.scss

@@ -91,8 +91,10 @@
 
     a {
       display: inline-block;
+      display: flex;
+      padding-left: 10px;
+      flex-wrap: wrap;
       width: 100%;
-      overflow: hidden;
     }
 
     .el-menu {
@@ -109,8 +111,6 @@
     // menu hover
     .submenu-title-noDropdown,
     .el-sub-menu__title {
-      // background: $menuBg;
-
       &:hover {
         background-color: $menuHover !important;
       }