refactor(ui): 统一底部导航图标为字体图标实现

- 将多个子包底部导航栏的图片图标替换为 iconfont 字体图标
- 优化底部导航栏图标的激活样式，使用主题色 CSS 变量控制
- 移除不再使用的图片资源引入代码，减少冗余依赖
- 引入 iconfont 字体文件及 CSS，支持字体图标使用
- 修改部分组件布局样式，提升适配性与样式一致性
- 统一主题色设置逻辑，支持动态修改和应用
- 替换部分页面大图标为 iconfont 实现，减少图片请求
- 调整配置文件，启用本地开发环境地址，注释其他测试地址

.claude/settings.local.json

@@ -0,0 +1,10 @@
+{
+  "permissions": {
+    "allow": [
+      "WebFetch(domain:www.iconfont.cn)",
+      "WebSearch",
+      "Bash(curl -sL \"https://at.alicdn.com/t/c/font_4626013_vwpx4thmin.css\" -o /tmp/iconfont_cdn.css)",
+      "Read(//tmp/**)"
+    ]
+  }
+}

src/App.vue

@@ -3,29 +3,32 @@ import useUpdateManager from './composables/useUpdateManager'
 
 useUpdateManager()
 useSysStore().getSystemData()
-useSysStore().getThirdPartyThemeColor()
 onLaunch(() => { })
 
 // 动态设置主题色 CSS 变量
+// #ifdef H5
+useSysStore().getThirdPartyThemeColor()
 const manualThemeStore = useManualThemeStore()
 watch(
   () => manualThemeStore.themeVars.colorTheme,
   (color) => {
-    console.log('三方主题色==================', color)
-    // #ifdef H5
-    document.documentElement.style.setProperty('--them-color', color || '#9ED605')
-    // #endif
+    const themeColor = color || '#9ED605'
+    document.documentElement.style.setProperty('--them-color', themeColor)
   },
   { immediate: true },
 )
+// #endif
 </script>
 
 <style lang="scss">
+@import '@/iconfont/index.css';
 .page-wraper {
   min-height: calc(100vh - var(--window-top));
   box-sizing: border-box;
   background: #f6f6f6;
-
+  /* #ifdef MP-WEIXIN */
+  --them-color: #9ED605;
+  /* #endif */
   .upload {
     .wd-upload__preview {
       width: 120rpx !important;

src/composables/useTabbar.ts

@@ -1,8 +1,5 @@
-import icon3 from '@/static/tab/cart1.png'
 import icon4 from '@/static/tab/cart2.png'
-import icon5 from '@/static/tab/my1.png'
 import icon6 from '@/static/tab/my2.png'
-import class1 from '@/static/tab/class-tab0.png'
 import class2 from '@/static/tab/class-tab1.png'
 
 export interface TabbarItem {
@@ -16,9 +13,9 @@ export interface TabbarItem {
 
 const tabbarItems = ref<TabbarItem[]>([
   { name: 'smqjh-home', value: null, active: true, title: '首页', icon1: '', icon2: '' },
-  { name: 'smqjh-classfiy', value: null, active: false, title: '分类', icon1: class1, icon2: class2 },
-  { name: 'smqjh-cart', value: null, active: false, title: '购物车', icon1: icon3, icon2: icon4 },
-  { name: 'smqjh-my', value: null, active: false, title: '我的', icon1: icon5, icon2: icon6 },
+  { name: 'smqjh-classfiy', value: null, active: false, title: '分类', icon1: '', icon2: class2 },
+  { name: 'smqjh-cart', value: null, active: false, title: '购物车', icon1: '', icon2: icon4 },
+  { name: 'smqjh-my', value: null, active: false, title: '我的', icon1: '', icon2: icon6 },
 ])
 
 export function useTabbar() {

src/config/index.ts

@@ -9,9 +9,9 @@ const mapEnvVersion = {
   // develop: 'http://192.168.0.19:8080', // 邓
   // develop: 'http://192.168.0.217:8080', // 黄
   // develop: 'http://192.168.0.11:8080', // 王
-  // develop: 'http://192.168.1.21:8080', // 田
+  develop: 'http://192.168.1.21:8080', // 田
   // develop: 'http://74949mkfh190.vicp.fun', // 付
-  develop: 'http://47.109.84.152:8081',
+  // develop: 'http://47.109.84.152:8081',
   // develop: 'https://5ed0f7cc.r9.vip.cpolar.cn',
   // develop: 'https://smqjh.api.zswlgz.com',
   /**

src/iconfont/index.css

@@ -0,0 +1,15 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 5175205 */
+  src: url('iconfont.woff2?t=1778486227708') format('woff2'),
+       url('iconfont.woff?t=1778486227708') format('woff'),
+       url('iconfont.ttf?t=1778486227708') format('truetype'),
+       url('iconfont.svg?t=1778486227708#iconfont') format('svg');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

src/layouts/tabbar.vue

@@ -1,7 +1,4 @@
 <script lang="ts" setup>
-import icon2 from '@/static/tab/index1.png'
-import icon1 from '@/static/tab/index2.png'
-
 const router = useRouter()
 const route = useRoute()
 const { opcity } = storeToRefs(useSysStore())
@@ -55,15 +52,16 @@ export default {
       >
         <template #icon="{ active }">
           <template v-if="index == 0 && !active">
-            <image src="@/static/tab/index.png" class="h44rpx w44rpx" />
+            <i class="iconfont text-44rpx">&#xe629;</i>
           </template>
           <template v-else-if="index == 0 && active">
-            <image v-if="opcity == 1" :src="icon1" class="h76rpx w76rpx" @click="handleClick" />
-            <image v-else :src="icon2" class="h76rpx w76rpx" />
+            <i v-if="opcity == 1" class="iconfont text-76rpx text-[var(--them-color)]" @click="handleClick">&#xe62b;</i>
+            <i v-else class="iconfont text-76rpx text-[var(--them-color)]">&#xe648;</i>
           </template>
           <template v-else-if="index != 0">
-            <image v-if="active" :src="item.icon2" class="h44rpx w44rpx" />
-            <image v-else :src="item.icon1" class="h44rpx w44rpx" />
+            <text :class="[active ? 'text-[var(--them-color)]' : '']" class="iconfont text-44rpx">
+              {{ item.icon1 }}
+            </text>
           </template>
         </template>
       </wd-tabbar-item>

src/subPack-attractions/commonTab/index.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import homeList from './components/homeList.vue'
 import orderList from './components/orderList.vue'
-import { StaticUrl } from '@/config'
 
 const tabbar = ref(0)
 const { opcity } = storeToRefs(useSysStore())
@@ -36,14 +35,12 @@ onPageScroll((e) => {
       <wd-tabbar v-model="tabbar" safe-area-inset-bottom placeholder fixed :bordered="false" :z-index="99999">
         <wd-tabbar-item title="列表" icon="goods">
           <template #icon>
-            <image v-if="tabbar === 0" class="h-40rpx w-40rpx" :src="`${StaticUrl}/attractions-selHome-tabbar.png`" />
-            <image v-else class="h-40rpx w-40rpx" :src="`${StaticUrl}/attractions-home-tabbar.png`" />
+            <i class="iconfont text-44rpx" :class="[tabbar === 0 ? 'text-[var(--them-color)]' : '']">&#xe63a;</i>
           </template>
         </wd-tabbar-item>
         <wd-tabbar-item title="订单记录" icon="list">
           <template #icon>
-            <image v-if="tabbar === 1" class="h-40rpx w-40rpx" :src="`${StaticUrl}/attractions-selOrder-tabbar.png`" />
-            <image v-else class="h-40rpx w-40rpx" :src="`${StaticUrl}/attractions-order-tabbar.png`" />
+            <i class="iconfont text-44rpx" :class="[tabbar === 1 ? 'text-[var(--them-color)]' : '']">&#xe645;</i>
           </template>
         </wd-tabbar-item>
       </wd-tabbar>

src/subPack-charge/components/charge-tab.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { ScanCodeUtil } from '../utils/index'
-import { StaticUrl } from '@/config'
 import router from '@/router'
 
 async function getDeviceInfo(connectorCode: string) {
@@ -35,7 +34,8 @@ async function scanCode() {
   <view class="charge-footer">
     <view class="ios flex items-center justify-center pb-20rpx -mt-26rpx">
       <view class="img-box" @click="scanCode">
-        <image class="h-120rpx w-120rpx" :src="`${StaticUrl}/charge-qrCode.png`" />
+        <!-- <image class="h-120rpx w-120rpx" :src="`${StaticUrl}/charge-qrCode.png`" /> -->
+        <i class="iconfont text-120rpx text-[var(--them-color)]">&#xe646;</i>
       </view>
     </view>
   </view>

src/subPack-charge/index/index.vue

@@ -127,9 +127,9 @@ function refund() {
 </script>
 
 <template>
-  <view class="min-h-screen from-[#E2FF91] to-[rgba(158,214,5,0)] bg-gradient-to-b">
+  <view class="min-h-screen" :style="{ backgroundImage: `linear-gradient(to bottom, ${useManualThemeStore().themeVars.colorTheme || '#9ED605'}, ${hexToRgba(useManualThemeStore().themeVars.colorTheme || '#9ED605', 0)})` }">
     <wd-navbar
-      title="" :custom-style="`background-color: rgba(226, 255, 145, ${opcity})`" :bordered="false"
+      title="" :custom-style="`background-color: ${hexToRgba(useManualThemeStore().themeVars.colorTheme as string, opcity)};`" :bordered="false"
       :z-index="99" safe-area-inset-top left-arrow fixed @click-left="router.back()"
     >
       <template #left>
@@ -170,17 +170,16 @@ function refund() {
           <view class="relative flex items-center justify-between">
             <view class="flex items-center gap-16rpx">
               <view class="h-40rpx w-40rpx">
-                <image
-                  class="h-40rpx w-40rpx"
-                  :src="`${StaticUrl}/charge-mine-wallet.png`"
-                  mode="scaleToFill"
-                />
+                <image class="h-40rpx w-40rpx" :src="`${StaticUrl}/charge-mine-wallet.png`" mode="scaleToFill" />
               </view>
               <view class="text-32rpx font-bold">
                 我的钱包
               </view>
             </view>
-            <view class="absolute right-[-24rpx] h-44rpx w-120rpx rounded-[22rpx_0_0_22rpx] bg-#9ED605 text-center text-28rpx text-#FFF line-height-[44rpx]" @click="refund">
+            <view
+              class="absolute right-[-24rpx] h-44rpx w-120rpx rounded-[22rpx_0_0_22rpx] bg-#9ED605 text-center text-28rpx text-#FFF line-height-[44rpx]"
+              @click="refund"
+            >
               退还
             </view>
           </view>
@@ -223,14 +222,13 @@ function refund() {
             </view>
           </view>
           <view class="h-100rpx w-100rpx">
-            <image
-              class="h-100rpx w-100rpx"
-              :src="`${StaticUrl}/charge-mine-order.png`"
-              mode="scaleToFill"
-            />
+            <image class="h-100rpx w-100rpx" :src="`${StaticUrl}/charge-mine-order.png`" mode="scaleToFill" />
           </view>
         </view>
-        <view class="flex items-center gap-18rpx rounded-16rpx bg-#FFF px-24rpx py-28rpx" @click="router.push({ name: 'charge-voucher', params: { couponBalance: userAccountInfo?.couponBalance } })">
+        <view
+          class="flex items-center gap-18rpx rounded-16rpx bg-#FFF px-24rpx py-28rpx"
+          @click="router.push({ name: 'charge-voucher', params: { couponBalance: userAccountInfo?.couponBalance } })"
+        >
           <view>
             <view class="flex items-center gap-16rpx">
               <text class="text-32rpx font-bold">
@@ -245,11 +243,7 @@ function refund() {
             </view>
           </view>
           <view class="h-100rpx w-100rpx">
-            <image
-              class="h-100rpx w-100rpx"
-              :src="`${StaticUrl}/charge-mine-voucher.png`"
-              mode="scaleToFill"
-            />
+            <image class="h-100rpx w-100rpx" :src="`${StaticUrl}/charge-mine-voucher.png`" mode="scaleToFill" />
           </view>
         </view>
       </view>
@@ -258,49 +252,63 @@ function refund() {
           我的车辆
         </view>
         <!-- 无车辆时显示添加提示 -->
-        <view v-if="!defaultVehicle" class="flex items-center gap-10rpx" @click="router.push({ name: 'charge-plate-list' })">
+        <view
+          v-if="!defaultVehicle" class="flex items-center gap-10rpx"
+          @click="router.push({ name: 'charge-plate-list' })"
+        >
           <view class="text-26rpx">
             添加车辆，享更多权益
           </view>
-          <view class="h-50rpx w-50rpx rounded-50% bg-[linear-gradient(90deg,#DBFC81_0%,#9ED605_100%)] text-center text-30rpx text-#FFF font-bold line-height-[50rpx]">
+          <view
+            class="h-50rpx w-50rpx rounded-50% bg-[linear-gradient(90deg,#DBFC81_0%,#9ED605_100%)] text-center text-30rpx text-#FFF font-bold line-height-[50rpx]"
+          >
             +
           </view>
         </view>
         <!-- 有车辆时显示车牌和管理入口 -->
-        <view v-else class="flex items-center gap-50rpx text-26rpx text-#9ED605" @click="router.push({ name: 'charge-plate-list' })">
+        <view
+          v-else class="flex items-center gap-50rpx text-26rpx text-#9ED605"
+          @click="router.push({ name: 'charge-plate-list' })"
+        >
           <view>{{ defaultVehicle.licensePlate }}</view>
           <view>管理>></view>
         </view>
       </view>
       <view class="mt-24rpx flex items-center gap-20rpx">
         <view
-          v-for="option in filterOptions"
-          :key="option.key"
+          v-for="option in filterOptions" :key="option.key"
           class="select-item h-60rpx w-152rpx text-28rpx line-height-[60rpx]" :class="[
             option.widthClass,
             { 'select-item-active': activeFilter === option.key },
-          ]"
-          @click="handleFilterClick(option.key)"
+          ]" @click="handleFilterClick(option.key)"
         >
           {{ option.label }}
         </view>
       </view>
       <view :class="[loading ? 'pt-24rpx' : '']">
-        <wd-skeleton theme="paragraph" animation="gradient" :loading="loading" :row-col="[{ height: '100px', width: '100%' }, { height: '100px', width: '100%' }, { height: '100px', width: '100%' }]">
-          <view v-for="item in stationList" :key="item.stationId" class="relative mt-24rpx rounded-16rpx bg-#FFFFFF p-24rpx" @click="router.push({ name: 'charge-site-detail', params: { stationId: String(item.stationId) } })">
-            <image
-              class="absolute right-0 top-0 h-52rpx w-186rpx"
-              :src="`${StaticUrl}/charge-firm-tag.png`"
-            />
+        <wd-skeleton
+          theme="paragraph" animation="gradient" :loading="loading"
+          :row-col="[{ height: '100px', width: '100%' }, { height: '100px', width: '100%' }, { height: '100px', width: '100%' }]"
+        >
+          <view
+            v-for="item in stationList" :key="item.stationId"
+            class="relative mt-24rpx rounded-16rpx bg-#FFFFFF p-24rpx"
+            @click="router.push({ name: 'charge-site-detail', params: { stationId: String(item.stationId) } })"
+          >
+            <image class="absolute right-0 top-0 h-52rpx w-186rpx" :src="`${StaticUrl}/charge-firm-tag.png`" />
             <view class="text-32rpx text-#2B303A font-bold">
               {{ item.stationName }}
             </view>
             <view class="mt-20rpx text-24rpx text-#aaa">
               {{ item.tips || '暂无提示' }}
             </view>
-            <view class="mt-24rpx flex items-center rounded-16rpx bg-[linear-gradient(90deg,rgba(170,255,235,0.3)_0%,rgba(175,247,252,0.2)_43.57%,rgba(139,232,252,0)_100%)] p-20rpx">
+            <view
+              class="mt-24rpx flex items-center rounded-16rpx bg-[linear-gradient(90deg,rgba(170,255,235,0.3)_0%,rgba(175,247,252,0.2)_43.57%,rgba(139,232,252,0)_100%)] p-20rpx"
+            >
               <view class="flex items-center gap-16rpx">
-                <view class="h-40rpx w-40rpx rounded-8rpx bg-[linear-gradient(180deg,#4FEF86_0%,#00AA3A_100%)] text-center text-28rpx text-#FFF font-bold line-height-[40rpx]">
+                <view
+                  class="h-40rpx w-40rpx rounded-8rpx bg-[linear-gradient(180deg,#4FEF86_0%,#00AA3A_100%)] text-center text-28rpx text-#FFF font-bold line-height-[40rpx]"
+                >
                   快
                 </view>
                 <view class="flex items-center">
@@ -310,7 +318,9 @@ function refund() {
                 </view>
               </view>
               <view class="ml-40rpx flex items-center gap-16rpx">
-                <view class="h-40rpx w-40rpx rounded-8rpx bg-[linear-gradient(180deg,#8EB1FF_0%,#3071FF_100%)] text-center text-28rpx text-#FFF font-bold line-height-[40rpx]">
+                <view
+                  class="h-40rpx w-40rpx rounded-8rpx bg-[linear-gradient(180deg,#8EB1FF_0%,#3071FF_100%)] text-center text-28rpx text-#FFF font-bold line-height-[40rpx]"
+                >
                   慢
                 </view>
                 <view class="flex items-center">
@@ -319,7 +329,9 @@ function refund() {
                   </text>
                 </view>
               </view>
-              <view class="ml-150rpx h-44rpx w-148rpx flex items-center border-2rpx border-#3EB6F8 rounded-34rpx border-solid line-height-[44rpx]">
+              <view
+                class="ml-150rpx h-44rpx w-148rpx flex items-center border-2rpx border-#3EB6F8 rounded-34rpx border-solid line-height-[44rpx]"
+              >
                 <view class="w-44rpx rounded-[34rpx_0rpx_0rpx_34rpx] bg-#3EB6F8 text-center">
                   <wd-icon name="location" size="16px" color="#FFF" />
                 </view>
@@ -338,10 +350,7 @@ function refund() {
                     元/度
                   </text>
                 </view>
-                <image
-                  class="absolute h-60rpx w-365rpx -top-30rpx"
-                  :src="`${StaticUrl}/to-charge-tag.png`"
-                />
+                <image class="absolute h-60rpx w-365rpx -top-30rpx" :src="`${StaticUrl}/to-charge-tag.png`" />
               </view>
               <view class="text-24rpx text-#2B303A">
                 {{ item.peakValue }}：{{ item.peakTime }}
@@ -364,17 +373,19 @@ function refund() {
   padding: 24rpx;
   margin-top: 24rpx;
 }
-.select-item{
-background: #FFFFFF;
-border-radius: 16rpx;
-color: #2B303A;
-text-align: center;
+
+.select-item {
+  background: #FFFFFF;
+  border-radius: 16rpx;
+  color: #2B303A;
+  text-align: center;
 }
-.select-item-active{
-background: #9ED605;
-box-shadow: inset 0rpx 20rpx 40rpx 2rpx rgba(100,255,218,0.26);
-border-radius: 0rpx 16rpx 0rpx 16rpx;
-font-weight: bold;
-color: #FFFFFF;
+
+.select-item-active {
+  background: #9ED605;
+  box-shadow: inset 0rpx 20rpx 40rpx 2rpx rgba(100, 255, 218, 0.26);
+  border-radius: 0rpx 16rpx 0rpx 16rpx;
+  font-weight: bold;
+  color: #FFFFFF;
 }
 </style>

src/subPack-djk/commonTab/index.vue

@@ -27,9 +27,9 @@ onMounted(() => {
   refreshOrderList.value = false
 })
 const tabbarItems = ref([
-  { name: 'djk-home', value: null, active: true, title: '首页', icon1: `${StaticUrl}/djk-idx0.png`, icon2: `${StaticUrl}/djk-idx1.png` },
-  { name: 'djk-fl', value: null, active: false, title: '福利中心', icon1: `${StaticUrl}/djk-fl0.png`, icon2: `${StaticUrl}/djk-fl1.png` },
-  { name: 'djk-order', value: null, active: false, title: '订单', icon1: `${StaticUrl}/djk-order0.png`, icon2: `${StaticUrl}/djk-order1.png` },
+  { name: 'djk-home', value: null, active: true, title: '首页', icon: '' },
+  { name: 'djk-fl', value: null, active: false, title: '福利中心', icon: '' },
+  { name: 'djk-order', value: null, active: false, title: '订单', icon: '' },
 ])
 const tabbarName = ref('djk-home')
 const welfare = ref<Api.DjkWelfareVO>()
@@ -75,14 +75,13 @@ getData()
       >
         <template #icon="{ active }">
           <template v-if="index == 0 && !active">
-            <image :src="item.icon1" class="h44rpx w44rpx" />
+            <i class="iconfont text-44rpx">&#xe644;</i>
           </template>
           <template v-else-if="index == 0 && active">
-            <image :src="item.icon2" class="h74rpx w74rpx" />
+            <i class="iconfont text-76rpx text-[var(--them-color)]">&#xe637;</i>
           </template>
           <template v-else-if="index != 0">
-            <image v-if="active" :src="item.icon2" class="h44rpx w44rpx" />
-            <image v-else :src="item.icon1" class="h44rpx w44rpx" />
+            <i :class="[active ? 'text-[var(--them-color)]' : '']" class="iconfont text-44rpx">{{ item.icon }}</i>
           </template>
         </template>
       </wd-tabbar-item>

src/subPack-film/components/tabbar.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { StaticUrl } from '@/config'
 import router from '@/router'
 
 defineProps({
@@ -10,9 +9,9 @@ defineProps({
 })
 
 const tabList = reactive([
-  { title: '首页', src: `${StaticUrl}/film-home.png`, activeSrc: `${StaticUrl}/film-active-home.png`, path: 'film-index' },
-  { title: '电影/影院', src: `${StaticUrl}/film-movie.png`, activeSrc: `${StaticUrl}/film-active-movie.png`, path: 'film-movie' },
-  { title: '订单', src: `${StaticUrl}/film-order.png`, activeSrc: `${StaticUrl}/film-active-order.png`, path: 'film-order' },
+  { title: '首页', icon: '', path: 'film-index' },
+  { title: '电影/影院', icon: '', path: 'film-movie' },
+  { title: '订单', icon: '', path: 'film-order' },
 ])
 
 function handleItem(name: string) {
@@ -21,11 +20,13 @@ function handleItem(name: string) {
 </script>
 
 <template>
-  <view class="tabbar">
-    <view v-for="(item, index) in tabList" :key="index" class="item" @click="handleItem(item.path)">
-      <image class="img" :src="active == index ? item.activeSrc : item.src" mode="aspectFill" />
-      <view class="title" :class="[active == index ? 'active' : '']">
-        {{ item.title }}
+  <view>
+    <view class="tabbar">
+      <view v-for="(item, index) in tabList" :key="index" class="item pt20rpx" @click="handleItem(item.path)">
+        <i class="iconfont text-44rpx" :class="[active == index ? 'text-[var(--them-color)]' : '']">{{ item.icon }}</i>
+        <view class="title" :class="[active == index ? 'active' : '']">
+          {{ item.title }}
+        </view>
       </view>
     </view>
   </view>
@@ -34,13 +35,14 @@ function handleItem(name: string) {
 <style lang="scss" scoped>
 .tabbar{
     display: flex;
-    justify-content: space-around;
-    width: 750rpx;
+    justify-content: space-between;
+    width: 100%;
     height: 166rpx;
     background: #FFFFFF;
     box-shadow: 0rpx -6rpx 12rpx 2rpx rgba(0, 0, 0, 0.09);
     border-radius: 32rpx 32rpx 0rpx 0rpx;
     position: fixed;
+    box-sizing: border-box;
     bottom: 0;
     left: 0;
     z-index: 99999;

src/subPack-refueling/commonTab/index.vue

@@ -2,7 +2,6 @@
 import order from './components/order.vue'
 import voucher from './components/voucher.vue'
 import index from './components/index.vue'
-import { StaticUrl } from '@/config'
 
 definePage({
   name: 'refueling-tabbar',
@@ -17,12 +16,11 @@ interface TabbarItem {
   active: boolean
   title: string
   icon: string
-  icon1: string
 }
 const tabbarItems = ref<TabbarItem[]>([
-  { name: 'home', value: null, active: true, title: '首页', icon: `${StaticUrl}/smqjh-jy-idx.png`, icon1: `${StaticUrl}/smqjh-jy-idx1.png` },
-  { name: 'voucher', value: null, active: false, title: '优惠券', icon: `${StaticUrl}/smqjh-jy-dk.png`, icon1: `${StaticUrl}/smqjh-jy-dk1.png` },
-  { name: 'order', value: null, active: false, title: '订单', icon: `${StaticUrl}/smqjh-jy-order.png`, icon1: `${StaticUrl}/smqjh-jy-order1.png` },
+  { name: 'home', value: null, active: true, title: '首页', icon: '' },
+  { name: 'voucher', value: null, active: false, title: '优惠券', icon: '' },
+  { name: 'order', value: null, active: false, title: '订单', icon: '' },
 ])
 const tabbarList = computed(() => tabbarItems.value)
 const activeTabbar = computed(() => {
@@ -57,7 +55,7 @@ onMounted(() => {
     <voucher v-if="activeTabbar.name === 'voucher'" />
     <index v-if="activeTabbar.name === 'home'" />
     <wd-tabbar
-      :model-value="activeTabbar.name" bordered safe-area-inset-bottom fixed
+      :model-value="activeTabbar.name" safe-area-inset-bottom bordered fixed
       @change="handleTabbarChange"
     >
       <wd-tabbar-item
@@ -65,8 +63,7 @@ onMounted(() => {
         :value="getTabbarItemValue(item.name)" :title="item.title"
       >
         <template #icon="{ active }">
-          <image v-if="active" :src="item.icon1" class="h44rpx w44rpx" />
-          <image v-else :src="item.icon" class="h44rpx w44rpx" />
+          <i class="iconfont text-44rpx" :class="[active ? 'text-[var(--them-color)]' : '']">{{ item.icon }}</i>
         </template>
       </wd-tabbar-item>
     </wd-tabbar>

src/subPack-xsb/commonTab/index.vue

@@ -4,14 +4,6 @@ import indexHome from './components/index.vue'
 import cart from './components/cart.vue'
 import classfiy from './components/classfiy.vue'
 import my from './components/my.vue'
-import icon2 from '@/static/tab/index1.png'
-import icon1 from '@/static/tab/index2.png'
-import icon3 from '@/static/tab/cart1.png'
-import icon4 from '@/static/tab/cart2.png'
-import class1 from '@/static/tab/class-tab0.png'
-import class2 from '@/static/tab/class-tab1.png'
-import icon5 from '@/static/tab/my1.png'
-import icon6 from '@/static/tab/my2.png'
 
 definePage({
   name: 'xsb-homeTabbar',
@@ -44,10 +36,10 @@ const { data: goodsList, isLastPage, page, error, reload, refresh } = usePaginat
   immediate: false,
 })
 const tabbarItems = ref([
-  { name: 'xsb-home', value: null, active: true, title: '首页', icon1: '', icon2: '' },
-  { name: 'xsb-classfiy', value: null, active: false, title: '分类', icon1: class1, icon2: class2 },
-  { name: 'xsb-cart', value: null, active: false, title: '购物车', icon1: icon3, icon2: icon4 },
-  { name: 'xsb-my', value: null, active: false, title: '我的', icon1: icon5, icon2: icon6 },
+  { name: 'xsb-home', value: null, active: true, title: '首页', icon1: '' },
+  { name: 'xsb-classfiy', value: null, active: false, title: '分类', icon1: '' },
+  { name: 'xsb-cart', value: null, active: false, title: '购物车', icon1: '' },
+  { name: 'xsb-my', value: null, active: false, title: '我的', icon1: '' },
 ])
 const tabbarName = ref('xsb-home')
 const swiperList = ref<Api.xsbAdvertInfo[]>([])
@@ -200,15 +192,16 @@ async function queryPopupConfig() {
       >
         <template #icon="{ active }">
           <template v-if="index == 0 && !active">
-            <image src="@/static/tab/index.png" class="h44rpx w44rpx" />
+            <i class="iconfont text-44rpx">&#xe629;</i>
           </template>
           <template v-else-if="index == 0 && active">
-            <image v-if="opcity == 1" :src="icon1" class="h74rpx w74rpx" @click="handleClick" />
-            <image v-else :src="icon2" class="h74rpx w74rpx" />
+            <i v-if="opcity == 1" class="iconfont text-76rpx text-[var(--them-color)]" @click="handleClick">&#xe62b;</i>
+            <i v-else class="iconfont text-76rpx text-[var(--them-color)]">&#xe648;</i>
           </template>
           <template v-else-if="index != 0">
-            <image v-if="active" :src="item.icon2" class="h44rpx w44rpx" />
-            <image v-else :src="item.icon1" class="h44rpx w44rpx" />
+            <text :class="[active ? 'text-[var(--them-color)]' : '']" class="iconfont text-44rpx">
+              {{ item.icon1 }}
+            </text>
           </template>
         </template>
       </wd-tabbar-item>