tabbar AI 图标修改

components/CustomTabBar/CustomTabBar.vue

@@ -4,15 +4,18 @@
             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">
+                <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 }">
                 {{ item.text }}
@@ -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>

pages/mine/company-mine.vue

@@ -34,6 +34,15 @@
                     {{ companyInfo.isVerified ? '已通过' : '未认证' }}
                 </view>
             </view>
+            <view class="service-item btn-feel" @click="goToMessage">
+                <view class="service-left">
+                    <uni-icons type="chat" size="20" color="#256BFA"></uni-icons>
+                    <text class="service-text">消息</text>
+                </view>
+                <view class="service-status">
+                    <uni-icons type="right" size="14" color="#909090"></uni-icons>
+                </view>
+            </view>
             <view class="service-item btn-feel">
                 <view class="service-left">
                     <uni-icons type="notification" size="20" color="#256BFA"></uni-icons>
@@ -83,6 +92,11 @@ function goToCompanyInfo() {
     navTo('/pages/mine/company-info');
 }
 
+// 跳转到消息页面
+function goToMessage() {
+    navTo('/pages/msglog/msglog');
+}
+
 function logOut() {
     popup.value.open();
 }

pages/mine/mine.vue

@@ -96,6 +96,15 @@
                         <uni-icons color="#909090" type="right" size="14"></uni-icons>
                     </view>
                 </view>
+                <view class="main-row btn-feel" @click="goToMessage()">
+                    <view class="row-left">
+                        <image class="left-img" src="@/static/tabbar/chat4.png"></image>
+                        <text class="left-text">消息</text>
+                    </view>
+                    <view class="row-right">
+                        <uni-icons color="#909090" type="right" size="14"></uni-icons>
+                    </view>
+                </view>
                 <view class="main-row btn-feel">
                     <view class="row-left">
                         <image class="left-img" src="@/static/icon/server4.png"></image>
@@ -218,6 +227,11 @@ function goCaAI(){
 	navTo(`/packageCa/search/AIAudition?name=${userInfo.name}&userId=${userInfo.idCard}`);
 }
 
+// 跳转到消息页面
+function goToMessage(){
+	navTo('/pages/msglog/msglog');
+}
+
 </script>
 
 <style lang="stylus" scoped>