添加气泡消息交互

src/pages/index.vue

@@ -6,6 +6,7 @@ import AppBackground from "@/components/AppBackground.vue";
 import UserHeader from "@/components/UserHeader.vue";
 import SModal from "@/components/SModal.vue";
 import Signin from "@/components/Signin.vue";
+import BubbleTip from "@/components/BubbleTip.vue";
 import {
   getAppConfig,
   getHomeData,
@@ -21,6 +22,7 @@ const { updateConfig, updateUser, updateDevice, updateRank } = store;
 const { user, device, rankData } = storeToRefs(store);
 const showModal = ref(false);
 const isIos = ref(true);
+const showGuide = ref(false);
 
 const toPage = (path) => {
   if (!user.value.id) {
@@ -67,6 +69,12 @@ onMounted(async () => {
     console.log("首页数据：", result);
     if (result.user) {
       updateUser(result.user);
+      if (result.user.trio <= 0) {
+        showGuide.value = true;
+        setTimeout(() => {
+          showGuide.value = false;
+        }, 3000);
+      }
       const devices = await getMyDevicesAPI();
       if (devices.bindings && devices.bindings.length) {
         updateDevice(
@@ -114,6 +122,13 @@ const comingSoon = () => {
               mode="widthFix"
               @click="() => toPage('/pages/first-try')"
             />
+            <BubbleTip
+              v-if="showGuide"
+              :location="{ top: '60%', left: '40%', fontSize: '14px' }"
+            >
+              <text>新人必刷！</text>
+              <text>快来报到吧~</text>
+            </BubbleTip>
           </view>
 
           <view class="practice-card" @click="() => toPage('/pages/practise')">
@@ -263,8 +278,8 @@ const comingSoon = () => {
   transform: scaleY(1.08) translateY(9px);
 }
 
-.bow-card > image:last-child {
-  transform: translateY(12px);
+.bow-card > image:nth-child(3) {
+  transform: translateY(11px);
 }
 
 .practice-card {