修改了首页飘窗，取消了控制台打印的数据

package-lock.json

@@ -18,7 +18,7 @@
         "layer-src": "^3.5.1",
         "vue": "^3.3.11",
         "vue-amazing-ui": "^0.1.38",
-        "vue-router": "^4.2.5",
+        "vue-router": "^4.4.2",
         "vue-scrollto": "^2.20.0",
         "vue3-layer": "^1.0.18",
         "vuex": "^4.0.2"
@@ -855,9 +855,9 @@
       }
     },
     "node_modules/@vue/devtools-api": {
-      "version": "6.5.1",
+      "version": "6.6.3",
-      "resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.5.1.tgz",
+      "resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.6.3.tgz",
-      "integrity": "sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA=="
+      "integrity": "sha512-0MiMsFma/HqA6g3KLKn+AGpL1kgKhFWszC9U29NfpWK5LE7bjeXxySWJrOJ77hBz+TBrBQ7o4QJqbPbqbs8rJw=="
     },
     "node_modules/@vue/reactivity": {
       "version": "3.4.27",
@@ -2622,11 +2622,14 @@
       }
     },
     "node_modules/vue-router": {
-      "version": "4.3.2",
+      "version": "4.4.2",
-      "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.3.2.tgz",
+      "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.4.2.tgz",
-      "integrity": "sha512-hKQJ1vDAZ5LVkKEnHhmm1f9pMiWIBNGF5AwU67PdH7TyXCj/a4hTccuUuYCAMgJK6rO/NVYtQIEN3yL8CECa7Q==",
+      "integrity": "sha512-1qNybkn2L7QsLzaXs8nvlQmRKp8XF8DCxZys/Jr1JpQcHsKUxTKzTxCVA1G7NfBfwRIBgCJPoujOG5lHCCNUxw==",
       "dependencies": {
-        "@vue/devtools-api": "^6.5.1"
+        "@vue/devtools-api": "^6.6.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
       },
       "peerDependencies": {
         "vue": "^3.2.0"

package.json

@@ -18,7 +18,7 @@
     "layer-src": "^3.5.1",
     "vue": "^3.3.11",
     "vue-amazing-ui": "^0.1.38",
-    "vue-router": "^4.2.5",
+    "vue-router": "^4.4.2",
     "vue-scrollto": "^2.20.0",
     "vue3-layer": "^1.0.18",
     "vuex": "^4.0.2"

src/App.vue

@@ -4,7 +4,7 @@
     <HeaderNav></HeaderNav>
 
     <!-- <router-view :class="{ active: isActiveRoute }"></router-view> -->
-
+    <!-- <router-view></router-view> -->
     <!-- 尾部版权 -->
     <Footer></Footer>
 
@@ -32,6 +32,47 @@ export default {
 
   },
 
+  // watch: {
+  //   // 监听路由变化
+  //   $route(to, from) {
+  //     if (to.name === 'Home' && from.name === 'Home') {
+  //       // 如果从首页路由离开并再次返回，重置飘窗状态
+  //       this.sportStatus = false;
+  //       this.floatWindowKey = 0;
+  //       this.clearFloatWindowTimer(); // 清除飘窗的定时器
+  //       this.resetFloatWindowPosition(); // 重置飘窗位置
+  //       console.log(22);
+  //     } else if (to.name === 'Home') {
+  //       // 如果第一次进入首页路由，启动飘窗
+  //       this.sportStatus = true;
+  //       this.floatWindowKey++; // 增加 key 值以强制重新渲染
+  //       console.log(11);
+  //       this.resetFloatWindowPosition(); // 重置飘窗位置
+  //       this.startFloatWindowTimer(); // 启动飘窗移动的定时器
+  //     }
+  //   }
+  // },
+
+  // data() {
+  //   return {
+  //     shouldReloadHome: false // 标志，用于判断是否需要刷新首页
+  //   };
+  // },
+  // methods: {
+  //   handleRefreshHome() {
+  //     this.shouldReloadHome = true; // 设置刷新标志
+  //   }
+  // },
+  // watch: {
+  //   $route(to, from) {
+  //     // 当路由跳转到首页且设置了刷新标志时，刷新页面
+  //     if (to.path === '/' && this.shouldReloadHome) {
+  //       window.location.reload(); // 刷新页面
+  //       this.shouldReloadHome = false; // 重置刷新标志
+  //     }
+  //   }
+  // }
+
 }
 </script>
 

src/components/Footer.vue

@@ -3,7 +3,8 @@
     <div class="box">
       <div class="box-top">
         <div class="box-left-logo">
-          <a href="#">
+          <!-- <a href="#"> -->
+          <a href="https://www.aimzhu.com">
             <img src="/assets/img/footerlogo1.png" alt="">
           </a>
         </div>

src/components/HeaderNav.vue

@@ -2,14 +2,16 @@
 
   <div id="nav" class="header-nav" :class="{ 'fixed-nav': isFixed }">
     <div class="box">
-      <a href="#" @click="gotoHomePage">
+      <a href="https://www.aimzhu.com" @click="gotoHomePage">
         <img :src="logoSrc" alt="首页logo">
-        <!-- <img src="/assets/img/headicon1.png" alt=""> -->
       </a>
+      <!-- <router-link to="/HomePage" @click="gotoHomePage">
+        <img :src="logoSrc" alt="首页logo">
+      </router-link> -->
       <div class="nav router-container" :class="routerColor">
         <ul>
 
-          <li><router-link to="/HomePage" @click="activateHomePage" :class="{ activeHomePage: $route.path === '/HomePage' }">首页</router-link></li>
+          <li><router-link to="/HomePage" replace @click="activateHomePage" :class="{ activeHomePage: $route.path === '/HomePage' }">首页</router-link></li>
           <li><router-link to="/ShouFei"  @click="activate" :class="{ active: $route.path === '/ShouFei' }">收费介绍</router-link></li>
           <li><router-link to="/KeFu" @click="activate" :class="{ active: $route.path === '/KeFu' }">客服中心</router-link></li>
           <li><router-link to="/ZhengShu" @click="activate" :class="{ active: $route.path === '/ZhengShu' }">证书展示</router-link></li>
@@ -25,9 +27,6 @@
       <a id="register" href="https://www.aimzhu.com/Register.html">免费注册</a>
     </div>
   </div>
-  
-  
-
   <router-view></router-view>
 </template>
 
@@ -38,6 +37,7 @@ export default {
       // logoSrc: '/src/assets/img/headicon1.png',
       logoSrc: '/assets/img/headicon1.png',
       isFixed: false,
+      shouldReloadHomePage: false, // 添加标志，用于判断是否需要刷新首页
       // isHomePage: true, // 用于跟踪是否在首页
       // logoSrc: import('/assets/img/headicon1.png'), // 默认的logo图片
     }
@@ -46,11 +46,22 @@ export default {
   methods:{
     gotoHomePage() {
       this.$router.push('/HomePage');
+      // window.location.reload(); // 刷新页面
+      
     },
     activateHomePage() {
       this.isFixed = false; // 重置为默认样式
       this.logoSrc = '/assets/img/headicon1.png';
+      // his.shouldReloadHomePage = true; // 设置刷新标志 
+      // 如果当前不是在首页，则设置标志以刷新
+      // if (this.$route.path !== '/HomePage') {
+      //   this.shouldRefreshHome = true; // 设置刷新标志
+      // }
     }, 
+    // refreshHomePage() {
+    //   window.location.href = window.location.href
+    //   alert(11)
+    // },  
     activate() {
       this.isFixed = true; // 激活固定样式
       this.logoSrc = '/assets/img/headicon2.png';
@@ -82,10 +93,22 @@ export default {
     $route(to, from) {
       if (to.path !== '/HomePage') {
         this.activate(); // 点击非首页路由时激活固定样式
+        
       } else {
         this.activateHomePage(); // 点击首页路由时重置为默认样式
+        
       }
     },  
+    // $route(to, from) {
+    //   // 当路由跳转到首页且设置了刷新标志时，刷新页面
+    //   if (to.path === '/HomePage' && this.shouldRefreshHome) {
+    //     this.activateHomePage(); // 点击首页路由时重置为默认样式
+    //     window.location.reload(); // 刷新页面
+    //     this.shouldRefreshHome = false; // 重置刷新标志
+    //   } else {
+    //     this.activate(); // 点击非首页路由时激活固定样式
+    //   }
+    // } 
     
   },
 

src/components/HomePage.vue

@@ -1,16 +1,12 @@
 <template>
   <div class="home-page">
     <!-- 飘窗 -->
-    <div class="pcdiv">
+    <div id="sport_wrap" v-if="sportStatus" class="float-window" :style="{left: `${floatWindow.left}px`, top: `${floatWindow.top}px`}" @mouseover="mouseOver" @mouseleave="mouseLeave">
-      <div id="sport_wrap" v-if="sportStatus" :key="floatWindowKey" @mouseover="mouseOver" @mouseleave="mouseLeave">
+      <div class="deleteImg" @click="showSport">
-        <div class="deleteImg" @click="showSport" >
         <img class="close" src="/assets/img/close.png" alt="">
       </div>
       <img :src="floatImg" @click="windowSkip" alt="">
     </div>
-    </div>
-  
-    
 
     <div class="box-top">
       <div class="headline">
@@ -169,6 +165,8 @@
 
 <script>
 // import { onMounted, onUnmounted, ref } from 'vue'; 
+import { useRoute, useRouter } from 'vue-router'
+import { onBeforeRouteUpdate, onBeforeRouteLeave } from 'vue-router';
 import axios from 'axios' 
 export default {
   data() {
@@ -220,26 +218,39 @@ export default {
       timer: null,
 
       floatWindowKey: 0, // 添加一个key来强制重新渲染
-
+      floatWindow: {
+        left: 0,
+        top: 0,
+        direction: {
+          top: 1,
+          left: 1
+        }
+      }
     }
   },
 
-  created() {
+  // created() {
-    this.sportStatus =  true
+  //   this.sportStatus =  true
-    this.timer = setInterval(()=>{
+  //   // this.timer = setInterval(()=>{
-        this.sportTranstion()
+  //   //     this.sportTranstion()
-    }, 30);
+  //   // }, 30);
-    this.startFloatWindowTimer();
     
-  },
+  //   this.startFloatWindowTimer()
-  beforeDestroy() {
+  //   // this.refreshPage();
-    this.sportStatus = false
+  // },
+  // beforeDestroy() {
+    // this.clearFloatWindowTimer();
+    // console.log(222);
+    // this.sportStatus = false
     // clearInterval(this.timer)
-    this.clearFloatWindowTimer();
+
-  },
+  // },
   
 
   methods: {
+    refreshPage() {
+      location. reload(); // 刷新页面
+    },
 
     selectStep1(index) {
       this.currentStepIndex1 = index; // 设置当前选中的步骤索引
@@ -288,119 +299,6 @@ export default {
         this.number2 = response.data.data[1]
       })
     }, 
-
-    // 飘窗所需图片内容
-    floatContent() {
-      let img = document.getElementById("sport_wrap");
-      axios.get('https://www.aimzhu.com/operator/app/content/listByIdentifyingrelease/bayWindow').then(response => {
-        console.log(response.data);
-        if (response.data.length != 0) {
-          const imgFolat = response.data[0].photo
-        this.floatImg = `https://www.aimzhu.com/operator/route/file/download/true/${imgFolat}`
-        } else {
-          img.style.display = 'none'
-        }
-      })
-      .catch(error => {
-        console.error('There was an error!', error)
-      })
-    },
-    // 飘窗
-    sportTranstion(){
-      let img = document.getElementById("sport_wrap"); //获得图片所在层的ID
-      let height = document.documentElement.clientHeight; //浏览器的高度
-      let width = document.documentElement.clientWidth; //浏览器的宽度
-      let imgHeight = img.offsetHeight; //飘浮图片的高度
-      let imgWidth = img.offsetWidth; //瓢浮图片的宽度
-      //设置飘浮图片距离浏览器左侧位置
-      img.style.left = parseInt(this.moveX + document.documentElement.scrollLeft) + "px";
-      //设置飘浮图片距离浏览器右侧位置
-      img.style.top = parseInt(this.moveY + document.documentElement.scrollTop) + "px";
-      //设置图片在Y轴上的移动规律
-      if(this.directionY == 0) {
-          //飘浮图片在Y轴方向上向下移动
-          this.moveY += this.stepY;
-      } else {
-          //飘浮图片在Y轴方向上向上移动
-          this.moveY -= this.stepY;
-      }
-      if(this.moveY < 0) {
-          //如果飘浮图片飘浮到顶端的时候，设置图片在Y轴方向上向下移动
-          this.directionY = 0;
-          this.moveY = 0;
-      }
-      if(this.moveY > (height - imgHeight-10)) {
-          //如果飘浮图片飘浮到浏览器底端的时候，设置图片在Y轴方向上向上移动
-          this.directionY = 1;
-          this.moveY = (height - imgHeight-10);
-      }
-      //设置图片在X轴上的移动规律
-      if(this.directionX == 0) {
-          this.moveX += this.stepX;
-      } else {
-          this.moveX -= this.stepX;
-      }
-      if(this.moveX < 0) {
-          //如果飘浮图片飘浮到浏览器左侧的时候，设置图片在X轴方向上向右移动
-          this.directionX = 0;
-          this.moveX = 0;
-      }
-      if(this.moveX > (width - imgWidth)) {
-          //如果飘浮图片飘浮到浏览器右侧的时候，设置图片在X轴方向上向左移动
-          this.directionX = 1;
-          this.moveX = (width - imgWidth);
-      }
-    },
-    showSport(){
-    //关闭漂浮窗
-      this.sportStatus = false
-      clearInterval(this.timer)
-    },
-    mouseLeave(){
-    //鼠标移入
-      this.timer = setInterval(()=>{
-        this.sportTranstion()
-      },30);
-
-      this.startFloatWindowTimer();
-
-    },
-    mouseOver(){
-    //鼠标移出
-      clearInterval(this.timer)
-
-      this.clearFloatWindowTimer();
-
-    },
-    // 飘窗跳转
-    windowSkip() {
-      window.open('https://www.aimzhu.com/floatPage.html');
-    },
-
-     // 启动飘窗移动的定时器
-     startFloatWindowTimer() {
-      if (!this.timer) {
-        this.resetFloatWindowPosition(); // 重置飘窗位置
-        this.timer = setInterval(() => {
-          this.sportTranstion();
-        }, 30);
-      }
-    },
-
-    // 清除飘窗的定时器
-    clearFloatWindowTimer() {
-      if (this.timer) {
-        clearInterval(this.timer);
-        this.timer = null;
-      }
-    },
-
-    // 重置飘窗位置
-    resetFloatWindowPosition() {
-      this.moveX = 0;
-      this.moveY = 0;
-    },
-
     startScroll() {
       this.intervalId = setInterval(() => {
         this.currentTitleIndex = (this.currentTitleIndex + 1) % this.titles.length;
@@ -412,101 +310,71 @@ export default {
         }
       }, 3000);
     },
-    // resetTransition() {
-    //   // 移除过渡效果，然后立即重新添加，以避免动画
-    //   const titleContainer = document.getElementById('title-container');
-    //   titleContainer.style.transition = 'none';
-    //   titleContainer.offsetHeight; // 触发重排
-    //   titleContainer.style.transition = 'transform 0.5s ease-in-out';
-    // },
     stopScroll() {
       clearInterval(this.intervalId);
     },
-  },
+     // 飘窗所需图片内容
-
+     floatContent() {
-
+      axios.get('https://www.aimzhu.com/operator/app/content/listByIdentifyingrelease/bayWindow').then(response => {
-  // -----------------------------------------
+        // console.log(response.data);
-
+        if (response.data.length != 0) {
-  beforeRouteEnter(to, from, next) {
+          const imgFolat = response.data[0].photo
-    next(vm => {
+        this.floatImg = `https://www.aimzhu.com/operator/route/file/download/true/${imgFolat}`
-      if (to.name === 'Home') {
-        vm.sportStatus = true;
-        vm.floatWindowKey++; // 增加 key 值以强制重新渲染
-        vm.$nextTick(() => {
-          vm.resetFloatWindowPosition(); // 重置飘窗位置
-          vm.startFloatWindowTimer(); // 启动飘窗移动的定时器
-        });
-      }
-    });
-  },
-  beforeRouteUpdate(to, from, next) {
-    if (to.name === 'Home') {
-      this.sportStatus = true;
-      this.floatWindowKey++;
-      this.resetFloatWindowPosition(); // 重置飘窗位置
-      this.startFloatWindowTimer(); // 启动飘窗移动的定时器
         } else {
-      this.sportStatus = false;
+          this.sportStatus = false
-      this.clearFloatWindowTimer(); // 清除飘窗的定时器
         }
-    next();
+      })
+      .catch(error => {
+        console.error('There was an error!', error)
+      })
     },
-  beforeRouteLeave(to, from, next) {
+    // 飘窗移动
-    if (from.name === 'Home') {
+    floatWindowMove() {
-      this.sportStatus = false;
+      let self = this;
-      this.clearFloatWindowTimer(); // 清除飘窗的定时器
+      let winWidth = window.innerWidth;
+      let winHeight = window.innerHeight;
+      this.timer = setInterval(() => {
+        if(self.floatWindow.top + 100 >= winHeight) {
+          self.floatWindow.direction.top = -1;
+        } else if(self.floatWindow.top <= 0) {
+          self.floatWindow.direction.top = 1;
         }
-    next();
+
+        if(self.floatWindow.left + 100 >= winWidth) {
+          self.floatWindow.direction.left = -1;
+        } else if(self.floatWindow.left <= 0) {
+          self.floatWindow.direction.left = 1;
+        }
+        self.floatWindow.top += self.floatWindow.direction.top * 2;
+        self.floatWindow.left += self.floatWindow.direction.left * 2;
+      }, 20);
+    },
+    showSport(){
+    //关闭漂浮窗
+      this.sportStatus = false
+      // clearInterval(this.timer)
+    },
+    // 鼠标移入
+    mouseOver(){
+      clearInterval(this.timer); // 清除定时器
+    },
+    // 鼠标移出
+    mouseLeave(){
+      this.floatWindowMove();
+    },
+    // 飘窗跳转
+    windowSkip() {
+      window.open('https://www.aimzhu.com/floatPage.html');
+    },
   },
-  // beforeDestroy() {
-  //   this.clearFloatWindowTimer();
-  //   this.sportStatus = false;
-  //   // 如果需要，可以手动清理DOM
-  //   if (this.$el && this.$el.parentNode) {
-  //     this.$el.parentNode.removeChild(this.$el);
-  //   }
-  // },
-
-  // // 路由守卫
-  // beforeRouteEnter(to, from, next) {
-  //   next(vm => {
-  //     if (to.name === 'Home') {
-  //       vm.sportStatus = true;
-  //       vm.startFloatWindowTimer();
-  //     }
-  //   });
-  // },
-  // beforeRouteLeave(to, from, next) {
-  //   if (from.name === 'Home') {
-  //     this.sportStatus = false;
-  //     this.clearFloatWindowTimer();
-  //   }
-  //   next();
-  // },
-  // beforeRouteUpdate(to, from, next) {
-  //   if (to.name === 'Home') {
-  //     vm.sportStatus = true;
-  //     this.startFloatWindowTimer();
-  //   } else {
-  //     this.sportStatus = false;
-  //     this.clearFloatWindowTimer();
-  //   }
-  //   next();
-  // },
-
-  
-  // -----------------------------------------
 
   computed: {
-
     titleContainerStyle() {
       return {
         transform: `translateY(-${this.currentTitleIndex * 100}%)`,
         transition: 'transform 0.5s ease-in-out',
       };
     },
-
-  
   },
 
   mounted() {
@@ -519,16 +387,20 @@ export default {
       this.twoData = Response.data
     }).catch(error => {
       console.error('Error fetching data:', error)
-    })
+    });
-    
+    this.sportStatus =  true
+    // this.startFloatWindowTimer()
+    this.floatWindowMove();
   },
 
+
   // beforeUnmount() {
   //   clearInterval(this.intervalId);  
   // },
   beforeDestroy() {
     this.stopScroll();
     // this.startData();
+    clearInterval(this.timer); // 清除定时器
   }
 
 }
@@ -652,12 +524,12 @@ export default {
   height: 100vw;
 }
 .home-page #sport_wrap {
-    position: absolute;
+    /* position: absolute;
-    display: block;
+    display: block; */
     /* display: none; */
-    z-index: 99999999999;
+    /* z-index: 99999999999;
     width:150px;
-    height:150px;
+    height:150px; */
     /* line-height: 70px; */
     cursor: pointer;
     /* border: 1px solid red; */
@@ -1074,4 +946,12 @@ export default {
   margin: 10px 10px 10px auto;
   /* border: 2px solid red; */
 }
+
+.float-window {
+  position: fixed;
+  width: 120px;
+  height: 120px;
+  /* background-color: black; */
+  z-index: 99999999;
+}
 </style>

src/components/router.js

@@ -56,6 +56,13 @@ router.afterEach(() => {
 router.beforeEach((to, from, next) => {
   next()
 })
+// router.beforeEach((to, from, next) => {
+//   if (to.path === '/') {
+//     window.location.reload(); // 刷新页面
+//   } else {
+//     next();
+//   }
+// })
 
 // 创建的路由对象共享出去
 export default router

src/main.js

@@ -20,6 +20,9 @@ import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import VueScrollTo from 'vue-scrollto'
 import 'vue3-layer/dist/s3Layer.css'
 
+// import VueRouter from 'vue-router'
+// const { createRouter, createWebHistory } = VueRouter
+
 // import VueAmazingUI from 'vue-amazing-ui'
 // import 'vue-amazing-ui/css'
 
@@ -40,6 +43,8 @@ app.use(router)
 app.use(VueScrollTo)
 // app.use(VueAmazingUI)
 
+// app.use(VueRouter)
+
 app.mount('#app')
 
 // createApp(App).mount('#app')