From b11b17ec40be77004f74ad7b6bc3d0e222941368 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=8F=B2=E9=B8=BD?= <1020103647@qq.com>
Date: Sun, 12 May 2024 16:37:25 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20tabbar=20=E6=94=AF=E6=8C=814=E7=A7=8D?=
 =?UTF-8?q?=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .stylelintrc.cjs                       |  1 +
 .vscode/settings.json                  |  1 +
 pages.config.ts                        | 12 ++++++++---
 src/components/fg-tabbar/fg-tabbar.vue |  7 +++++--
 src/pages.json                         |  6 +++---
 src/style/iconfont.css                 | 28 ++++++++++++++++++++++++++
 src/style/index.scss                   |  2 ++
 7 files changed, 49 insertions(+), 8 deletions(-)
 create mode 100644 src/style/iconfont.css

diff --git a/.stylelintrc.cjs b/.stylelintrc.cjs
index 2cb661a..574beef 100644
--- a/.stylelintrc.cjs
+++ b/.stylelintrc.cjs
@@ -53,5 +53,6 @@ module.exports = {
     'no-duplicate-selectors': null,
     'scss/comment-no-empty': null,
     'selector-class-pattern': null,
+    'font-family-no-missing-generic-family-keyword': null,
   },
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 88eb9d1..aa5e6f4 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -39,6 +39,7 @@
     "climblee",
     "commitlint",
     "dcloudio",
+    "iconfont",
     "qrcode",
     "refresherrefresh",
     "scrolltolower",
diff --git a/pages.config.ts b/pages.config.ts
index abc552b..0748717 100644
--- a/pages.config.ts
+++ b/pages.config.ts
@@ -37,14 +37,20 @@ export default defineUniPages({
       {
         pagePath: 'pages/index/about',
         text: '关于',
-        icon: 'i-carbon-3d-mpr-toggle',
+        icon: 'i-carbon-code',
         iconType: 'unocss',
       },
+      // {
+      //   pagePath: 'pages/my/index',
+      //   text: '我的',
+      //   icon: '/static/logo.svg',
+      //   iconType: 'local',
+      // },
       {
         pagePath: 'pages/my/index',
         text: '我的',
-        icon: '/static/logo.svg',
-        iconType: 'local',
+        icon: 'iconfont icon-my',
+        iconType: 'iconfont',
       },
     ],
   },
diff --git a/src/components/fg-tabbar/fg-tabbar.vue b/src/components/fg-tabbar/fg-tabbar.vue
index bc8b6b9..de65199 100644
--- a/src/components/fg-tabbar/fg-tabbar.vue
+++ b/src/components/fg-tabbar/fg-tabbar.vue
@@ -13,7 +13,10 @@
         :title="item.text"
         :icon="item.icon"
       ></wd-tabbar-item>
-      <wd-tabbar-item v-else-if="item.iconType === 'unocss'" :title="item.text">
+      <wd-tabbar-item
+        v-else-if="item.iconType === 'unocss' || item.iconType === 'iconfont'"
+        :title="item.text"
+      >
         <template #icon>
           <view
             h-40rpx
@@ -33,7 +36,7 @@
 
 <script setup lang="ts">
 // unocss icon 默认不生效，需要在这里写一遍才能生效！注释掉也是生效的，但是必须要有！
-// i-carbon-3d-mpr-toggle
+// i-carbon-code
 import { tabBar } from '@/pages.json'
 import { tabbarStore } from './tabbar'
 
diff --git a/src/pages.json b/src/pages.json
index bd8ff73..c9da109 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -33,14 +33,14 @@
       {
         "pagePath": "pages/index/about",
         "text": "关于",
-        "icon": "i-carbon-3d-mpr-toggle",
+        "icon": "i-carbon-code",
         "iconType": "unocss"
       },
       {
         "pagePath": "pages/my/index",
         "text": "我的",
-        "icon": "/static/logo.svg",
-        "iconType": "local"
+        "icon": "iconfont icon-my",
+        "iconType": "iconfont"
       }
     ]
   },
diff --git a/src/style/iconfont.css b/src/style/iconfont.css
new file mode 100644
index 0000000..35da86c
--- /dev/null
+++ b/src/style/iconfont.css
@@ -0,0 +1,28 @@
+@font-face {
+  font-family: 'iconfont'; /* Project id 4543091 */
+  src:
+    url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAOwAAsAAAAAB9AAAANjAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDHAqDBIJqATYCJAMQCwoABCAFhGcHPRvnBsgusG3kMyE15/44PsBX09waBHv0REDt97oHAQDFrOIyPirRiULQ+TJcXV0hCYTuVFcBC915/2vX/32Q80hkZ5PZGZ9snvwruVLloidKqYN6iKC53bOtbKwVLSIi3W6zCWZbs3VbER3j9JpGX3ySYcc94IQRTK5s4epS/jSqIgvg37qlY2/jwQN7D9ADpfRCmIknQByTscVZPTBr+hnnCKg2o4bjakvXEPjuY65DJGeJNtBUhn1JxOBuB2UZmUpBOXdsFp4oxOv4GHgs3h/+wRDcicqSZJG1q9kK1z/Af9NpqxjpC2QaAdpHlCFh4spcYXs5sMWpSk5wUj31G2dLQKVKkZ/w7f/8/i/A3JVUSZK9f7xIKJeU14IFpBI/Qfkkz46GT/CuaGREfCtKJUougWeQWHvVC5Lcz2BGS+SePR99vj3yjJx7h574tp7uWcOh4yfaTjS/245TT/vkQrN+a7RLkK8+Vd+bz+FSGh+9srDQKPeJ2s29z7ah4+efdoxefRbbGwfy7ht+SuIWukzsu1b6ePP+6kN1aamb47qsPim1Ia3xdEpDcl1dckPKGYnneI23+57r2W1Mmkqs6ajrChRCs5qyQ66rTVWhgZaG7toOeHm5cxn0sSQuNDEgcUTdNTSupKI1JRZih/JssAUKezPeOJJzbNozF6zWJuuVavVU5Tgtkop/SDzHa7ytvnCTq0PhkEfi4xLLtb0PuwyOAYqmrYQApFJyoJjTnfz+ve94vvv2f/yWgxl8Jd8Di2DRDPuob59mU/+VfDCROQyR8xSnmP9fXm7liagmN39OlmbvjqG0sMsJKrU0EFXogaRSH5bNY1CmxhyUq7QC1cY1T67RwuQk5CoM2RUQNLoEUb03kDS6h2XzcyjT7iOUa/QXqq1Hn6/GUBAaGcGcWJFlGUmCoVOp8kLvABHnVczGYiOE2SVEUH5OXj/TSnTCDjHAviAWcE4RZYaGWszNiKoayGSGTASeY+PcrMjNpVMvyREMDRoxBMYRVojFMkQiMOhohubdzxtAiOapMMbERpKMnQT9SL4ceQysVdJZVa9kEbsFogIcRyEUE2kN0mL7CDVIGhBzupWMEHA5bDvipgq5hKJcKef8ivbx1kC15KgcYkghhzLxYNntxoKCReJ82jAHAAA=')
+      format('woff2'),
+    url('//at.alicdn.com/t/c/font_4543091_njpo5b95nl.woff?t=1715485842402') format('woff'),
+    url('//at.alicdn.com/t/c/font_4543091_njpo5b95nl.ttf?t=1715485842402') format('truetype');
+}
+
+.iconfont {
+  font-family: 'iconfont' !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-my:before {
+  content: '\e78c';
+}
+
+.icon-package:before {
+  content: '\e9c2';
+}
+
+.icon-chat:before {
+  content: '\e600';
+}
diff --git a/src/style/index.scss b/src/style/index.scss
index 0c33c31..86184d9 100644
--- a/src/style/index.scss
+++ b/src/style/index.scss
@@ -1,3 +1,5 @@
+@import './iconfont.css';
+
 .test {
   // 可以通过 @apply 多个样式封装整体样式
   @apply mt-4 ml-4;