wo123/tuanshiwei-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1.优化详情页滚动翻页2.增加忽略问卷

Browse Source
This commit is contained in:
王创世 2025-05-30 15:24:43 +08:00
parent 5fe71d1c31
commit e6e281aaca
2 changed files with 50 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -5,7 +5,7 @@
.nitro
.cache
dist
.history
# Node dependencies
node_modules

86
pages/index.vue
View File

@ -1,8 +1,9 @@
<template>
<div style="width: 100%;">
<!-- Swiper 容器 -->
<div :class="['group_666',{'isOldfont': isOldfont}]" style="position: relative;height: 100vh;">
<AppHeader v-if="swiper_exp > 0" @crrentTop="toswiper" @openOldMode="openOldMode" :is-old="isOldfont" ref="AppHeader" :crrent-num="swiper_exp" />
<div :class="['group_666', { 'isOldfont': isOldfont }]" style="position: relative;height: 100vh;">
<AppHeader v-if="swiper_exp > 0" @crrentTop="toswiper" @openOldMode="openOldMode" :is-old="isOldfont"
ref="AppHeader" :crrent-num="swiper_exp" />
<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
<swiper-slide>
<img :src="`/img/index/homebg.png`" style="width: 100%;height: 100%;object-fit: cover;">
@ -31,7 +32,7 @@
<AppRegiment @toSwpe="toswiper"></AppRegiment>
</swiper-slide>
<!-- 新闻动态详情 -->
<swiper-slide v-if="isNews" >
<swiper-slide v-if="isNews">
<AppNewsdel class="scroll-container" @scroll.passive="handleScroll(6)"></AppNewsdel>
</swiper-slide>
<!-- 关于我们详情 -->
@ -64,31 +65,33 @@
<div class="divcode">
<img class="imgs" :src="`/img/index/douyin.png`" alt="">
<p class="pcode">
<img :src="`/img/dycode.jpg`" alt="">
<img :src="`/img/dycode.jpg`" alt="">
</p>
</div>
<div class="divcode">
<img class="imgs" :src="`/img/index/wb.png`" alt="">
<p class="pcode">
<img :src="`/img/wbcode.jpg`" alt="">
<img :src="`/img/wbcode.jpg`" alt="">
</p>
</div>
<div class="divcode">
<img class="imgs" :src="`/img/index/wx.png`" alt="">
<p class="pcode">
<img :src="`/img/wxcode.jpg`" alt="">
<img :src="`/img/wxcode.jpg`" alt="">
</p>
</div>
<div class="divcode">
<img class="imgs" :src="`/img/index/blbl.png`" alt="">
<p class="pcode">
<img :src="`/img/bilicode.jpg`" alt="">
<img :src="`/img/bilicode.jpg`" alt="">
</p>
</div>
<div class="tuanguanxi">
<a href="https://mp.weixin.qq.com/s/N-qAWMJNGb7WjkXp3Xqrhg" rel="nofollow" target="_blank" style="display: block;"><img src="/img/tgxzj.jpg"></a>
<a href="http://qnyz.lyd.com.cn/" rel="nofollow" target="_blank" style="display: block;"><img src="/img/qnyz.jpg"></a>
<img src="/img/lyb.jpg" @click="toswiper(8)"/>
<a href="https://mp.weixin.qq.com/s/N-qAWMJNGb7WjkXp3Xqrhg" rel="nofollow" target="_blank"
style="display: block;"><img src="/img/tgxzj.jpg"></a>
<a href="http://qnyz.lyd.com.cn/" rel="nofollow" target="_blank" style="display: block;"><img
src="/img/qnyz.jpg"></a>
<img src="/img/lyb.jpg" @click="toswiper(8)" />
</div>
</div>
</div>
@ -100,7 +103,7 @@
import { Swiper, SwiperSlide } from 'swiper/vue'
import { nextTick, ref } from 'vue'
import 'swiper/css'
import { Autoplay, Navigation, Pagination, Scrollbar, A11y, EffectCoverflow, EffectFade,Mousewheel } from "swiper/modules";
import { Autoplay, Navigation, Pagination, Scrollbar, A11y, EffectCoverflow, EffectFade, Mousewheel } from "swiper/modules";
import ScrollReveal from 'scrollreveal';
import { NNumberAnimation } from 'naive-ui'
@ -124,15 +127,15 @@ const rightValue = ref('-94px');
const isheight = ref(false);
const isScrollBottom = ref(false);
const updateRight = () => {
if(rightValue.value == '-94px'){
if (rightValue.value == '-94px') {
rightValue.value = '34px';
} else{
} else {
rightValue.value = '-94px';
}
}
}
const openOldMode = (value:boolean) => {
isOldfont.value = !isOldfont.value
const openOldMode = (value: boolean) => {
isOldfont.value = !isOldfont.value
}
let newsSwiper: any = null
const onSwiperNews = (swiper: any) => {
@ -144,7 +147,11 @@ const onSwiperNews = (swiper: any) => {
// console.log(swiper.el.scrollHeight);
// console.log(window);
swiper_exp.value = swiper.realIndex;
if (swiper.realIndex == 6) {
newsSwiper.mousewheel.disable(); //禁止鼠标滑轮控制
} else {
newsSwiper.mousewheel.enable(); //开启鼠标滑轮控制
}
})
}
let isMeassage = ref(true);
@ -186,12 +193,12 @@ const swiperOptionsNews = {
}
const handleScroll = (index) => (event) => {
debugger;
const { scrollHeight, scrollTop, clientHeight } = event.target;
// 判断是否触底（留1px误差）
isScrollBottom.value = scrollHeight - scrollTop <= clientHeight + 1;
// 动态控制Swiper滚轮行为
newsSwiper.value.mousewheel.releaseOnEdges = isScrollBottom.value;
const { scrollHeight, scrollTop, clientHeight } = event.target;
// 判断是否触底（留1px误差）
isScrollBottom.value = scrollHeight - scrollTop <= clientHeight + 1;
// 动态控制Swiper滚轮行为
newsSwiper.value.mousewheel.releaseOnEdges = isScrollBottom.value;
};
// let vesSwiper: any = null
@ -485,44 +492,49 @@ onMounted(() => {
padding-top: 10px;
}
.fiximg{
.fiximg {
transition: right 0.5s ease-in-out;
position: fixed;
top: 40px;
align-items: center;
z-index:111;
.qqt{
z-index: 111;
.qqt {
cursor: pointer;
}
.divcode{
.divcode {
position: relative;
display: flex;
justify-content: center;
.imgs{
justify-content: center;
.imgs {
width: 63px;
margin-bottom: 20px;
cursor: pointer;
}
.pcode{
.pcode {
display: inline-block;
position: absolute;
width: 0;
right: 99px;
bottom: 20px;
right: 99px;
bottom: 20px;
transition: all 0.5s;
}
&:hover .pcode{
&:hover .pcode {
width: 100px;
}
}
.tuanguanxi{
.tuanguanxi {
position: relative;
left: 30px;
}
}
.isOldfont *{
.isOldfont * {
font-size: 28px !important;
}
</style>