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

This commit is contained in:
zhangyong 2024-08-02 16:53:11 +08:00
parent c82842f2ca
commit c1d46bb3ca
8 changed files with 202 additions and 242 deletions

19
package-lock.json generated
View File

@ -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",
"resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.5.1.tgz",
"integrity": "sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA=="
"version": "6.6.3",
"resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.6.3.tgz",
"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",
"resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.3.2.tgz",
"integrity": "sha512-hKQJ1vDAZ5LVkKEnHhmm1f9pMiWIBNGF5AwU67PdH7TyXCj/a4hTccuUuYCAMgJK6rO/NVYtQIEN3yL8CECa7Q==",
"version": "4.4.2",
"resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.4.2.tgz",
"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"

View File

@ -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"

View File

@ -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>

View File

@ -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>

View File

@ -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(); //
// }
// }
},

View File

@ -1,16 +1,12 @@
<template>
<div class="home-page">
<!-- 飘窗 -->
<div class="pcdiv">
<div id="sport_wrap" v-if="sportStatus" :key="floatWindowKey" @mouseover="mouseOver" @mouseleave="mouseLeave">
<div id="sport_wrap" v-if="sportStatus" class="float-window" :style="{left: `${floatWindow.left}px`, top: `${floatWindow.top}px`}" @mouseover="mouseOver" @mouseleave="mouseLeave">
<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() {
this.sportStatus = true
this.timer = setInterval(()=>{
this.sportTranstion()
}, 30);
this.startFloatWindowTimer();
// created() {
// this.sportStatus = true
// // this.timer = setInterval(()=>{
// // this.sportTranstion()
// // }, 30);
},
beforeDestroy() {
this.sportStatus = false
// this.startFloatWindowTimer()
// // this.refreshPage();
// },
// 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);
},
},
// -----------------------------------------
beforeRouteEnter(to, from, next) {
next(vm => {
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(); //
//
floatContent() {
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 {
this.sportStatus = false;
this.clearFloatWindowTimer(); //
this.sportStatus = false
}
next();
})
.catch(error => {
console.error('There was an error!', error)
})
},
beforeRouteLeave(to, from, next) {
if (from.name === 'Home') {
this.sportStatus = false;
this.clearFloatWindowTimer(); //
//
floatWindowMove() {
let self = this;
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;
display: block;
/* position: absolute;
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>

View File

@ -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

View File

@ -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')