diff --git a/components/foreign-components/BannerTips.vue b/components/foreign-components/BannerTips.vue
index 9fa26b5..8c0c4b9 100644
--- a/components/foreign-components/BannerTips.vue
+++ b/components/foreign-components/BannerTips.vue
@@ -4,17 +4,33 @@
       <div class="banner-text">
         <h1 class="title">开启 CAD 学习之旅</h1>
         <p class="subtitle">为你的创意引擎注入强劲动力，驱动设计梦想在市场中乘风破浪</p>
-        <button class="join-button">快来加入</button>
+        <button class="join-button" @click="handleService">客服联系</button>
       </div>
       <div class="banner-image">
         <img src="~/assets/images/foreign_banner.png" alt="CAD工作环境" />
       </div>
     </div>
   </div>
+  <!-- 打开客服弹窗 弄成组件 -->
+  <KlService v-if="dialogVisible" v-model:dialog-visible="dialogVisible"></KlService>
 </template>
 
 <script setup lang="ts">
+  import useUserStore from '~/stores/user'
+  import KlService from '~/components/kl-quick-menu/components/kl-service.vue'
   // 组件逻辑可以在这里添加
+  const dialogVisible = ref(false)
+  const handleService = () => {
+    // 判断是否登录
+    const userStore = useUserStore()
+    if (!userStore.token) {
+      ElMessage.error('请先登录')
+      return
+    }
+    dialogVisible.value = true
+    // 读取未读消息
+    // readCount.value = false
+  }
 </script>
 
 <style scoped>