tabbar AI 图标修改

components/CustomTabBar/CustomTabBar.vue

@@ -4,14 +4,17 @@
             class="tabbar-item" 
             v-for="(item, index) in tabbarList" 
             :key="index"
+            :class="{ 'center-item': item.centerItem }"
             @click.stop="switchTab(item, index)"
             @tap.stop="switchTab(item, index)"
         >
             <view class="tabbar-icon">
-                <image 
-                    :src="currentItem === item.id ? item.selectedIconPath : item.iconPath"
-                    mode="aspectFit"
-                />
+                <view class="icon-container">
+                    <image 
+                        :src="currentItem === item.id ? item.selectedIconPath : item.iconPath"
+                        mode="aspectFit"
+                    />
+                </view>
             </view>
             <view class="badge" v-if="item.badge && item.badge > 0">{{ item.badge }}</view>
             <view class="tabbar-text" :class="{ 'active': currentItem === item.id }">
@@ -59,22 +62,13 @@ const generateTabbarList = () => {
         },
         {
             id: 2,
-            text: '智能客服',
+            text: '',
             path: '/pages/chat/chat',
-            iconPath: '/static/tabbar/logo3.png',
-            selectedIconPath: '/static/tabbar/logo3.png',
+            iconPath: '/static/tabbar/robot2.png',
+            selectedIconPath: '/static/tabbar/robot2.png',
             centerItem: true,
             badge: readMsg.badges[2]?.count || 0,
         },
-        {
-            id: 3,
-            text: '消息',
-            path: '/pages/msglog/msglog',
-            iconPath: '/static/tabbar/chat4.png',
-            selectedIconPath: '/static/tabbar/chat4ed.png',
-            centerItem: false,
-            badge: readMsg.badges[3]?.count || 0,
-        },
         {
             id: 4,
             text: '我的',
@@ -275,6 +269,34 @@ onMounted(() => {
 </script>
 
 <style lang="scss" scoped>
+/* 动画定义 */
+@keyframes pulse {
+    0% {
+        transform: scale(1.6);
+        box-shadow: 0 0 10rpx #256BFA;
+        border-color: #256BFA;
+    }
+    50% {
+        transform: scale(1.7);
+        box-shadow: 0 0 20rpx #256BFA, 0 0 30rpx rgba(37, 107, 250, 0.5);
+        border-color: #4A89FF;
+    }
+    100% {
+        transform: scale(1.6);
+        box-shadow: 0 0 10rpx #256BFA;
+        border-color: #256BFA;
+    }
+}
+
+@keyframes bounce {
+    0%, 100% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.1);
+    }
+}
+
 .custom-tabbar {
     position: fixed;
     bottom: 0;
@@ -282,7 +304,7 @@ onMounted(() => {
     right: 0;
     height: 100rpx;
     background-color: #ffffff;
-    border-top: 1rpx solid #e5e5e5;
+    // border-top: 1rpx solid #e5e5e5;
     display: flex;
     align-items: center;
     padding-bottom: env(safe-area-inset-bottom);
@@ -304,6 +326,10 @@ onMounted(() => {
     cursor: pointer;
     pointer-events: auto;
     -webkit-tap-highlight-color: transparent;
+    .icon-container{
+        width: 50rpx;
+        height: 50rpx;
+    }
 }
 
 .tabbar-icon {
@@ -346,11 +372,29 @@ onMounted(() => {
 }
 
 /* 中间按钮特殊样式 */
-.tabbar-item:has(.center-item) {
+.tabbar-item.center-item {
+
     .tabbar-icon {
-        width: 68rpx;
-        height: 68rpx;
+        width: 60rpx;
+        height: 60rpx;
         margin-bottom: 0;
     }
+    .tabbar-icon image {
+        // margin-top: -25rpx;
+        width: 80%;
+        animation: bounce 2s ease-in-out infinite;
+    }
+    .icon-container{
+        width: 50rpx;
+        height: 50rpx;
+        text-align: center;
+        border-radius: 50%;
+        border: 2rpx solid #256BFA;
+        box-shadow: 0 0 10rpx #256BFA;
+        transform: scale(1.6);
+        position: relative;
+        top: 5rpx;
+        animation: pulse 2s ease-in-out infinite;
+    }
 }
 </style>