529 lines
11 KiB
Vue
529 lines
11 KiB
Vue
<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" />
|
||
<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;">
|
||
<div style="position: absolute;bottom: 30px;right:30px;">
|
||
<img :src="`/img/index/hmouse.png`" alt="">
|
||
</div>
|
||
</swiper-slide>
|
||
<!-- 首页 -->
|
||
<swiper-slide>
|
||
<AppHome @toSwpe="toswiper"></AppHome>
|
||
</swiper-slide>
|
||
<!-- 关于我们 -->
|
||
<swiper-slide>
|
||
<AppAbout @toSwpe="toswiper"></AppAbout>
|
||
</swiper-slide>
|
||
<!-- 新闻动态 -->
|
||
<swiper-slide>
|
||
<AppNews @toSwpe="toswiper"></AppNews>
|
||
</swiper-slide>
|
||
<!-- 信息公开 -->
|
||
<swiper-slide>
|
||
<AppMessage @toSwpe="toswiper"></AppMessage>
|
||
</swiper-slide>
|
||
<!-- 团务百科 -->
|
||
<swiper-slide>
|
||
<AppRegiment @toSwpe="toswiper"></AppRegiment>
|
||
</swiper-slide>
|
||
<!-- 新闻动态详情 -->
|
||
<swiper-slide v-if="isNews" >
|
||
<AppNewsdel class="scroll-container" @scroll.passive="handleScroll(6)"></AppNewsdel>
|
||
</swiper-slide>
|
||
<!-- 关于我们详情 -->
|
||
<swiper-slide v-if="isAbout">
|
||
<AppAboutdel></AppAboutdel>
|
||
</swiper-slide>
|
||
<!-- 留言板 -->
|
||
<swiper-slide v-if="isMeassage">
|
||
<AppContactUs></AppContactUs>
|
||
</swiper-slide>
|
||
<!-- 搜索详情 -->
|
||
<swiper-slide>
|
||
<AppSearchdel></AppSearchdel>
|
||
</swiper-slide>
|
||
</swiper>
|
||
|
||
<!-- <div style="position: absolute;width: 100%;z-index: 100;">
|
||
<div class="flex-row justify-center align-center">
|
||
|
||
<div style="position: absolute;bottom: 30px;right:30px;">
|
||
<img :src="`/img/index/mouse.png`" alt="">
|
||
</div>
|
||
|
||
</div>
|
||
</div> -->
|
||
<!-- 右分享 -->
|
||
<div v-if="swiper_exp > 0" ref="targetElement" class="flex flex-col fiximg" :style="{ right: rightValue }">
|
||
<img src="/img/qiqiu.png" class="qqt" @click="updateRight" alt=""></img>
|
||
<div style="position: absolute;top: 200px;">
|
||
<div class="divcode">
|
||
<img class="imgs" :src="`/img/index/douyin.png`" alt="">
|
||
<p class="pcode">
|
||
<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="">
|
||
</p>
|
||
</div>
|
||
<div class="divcode">
|
||
<img class="imgs" :src="`/img/index/wx.png`" alt="">
|
||
<p class="pcode">
|
||
<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="">
|
||
</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)"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
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 ScrollReveal from 'scrollreveal';
|
||
import { NNumberAnimation } from 'naive-ui'
|
||
|
||
import "swiper/css";
|
||
import "swiper/css/navigation";
|
||
import "swiper/css/pagination";
|
||
import 'swiper/css/effect-coverflow';
|
||
import 'swiper/css/mousewheel'
|
||
import 'swiper/css/grid'
|
||
import 'swiper/css/effect-fade'
|
||
import 'swiper/css/autoplay'
|
||
import * as swiperAni from '@/assets/animate/animate.js'
|
||
import $api from '@/service/webRequest'
|
||
import { useI18n } from 'vue-i18n'
|
||
import { useStore } from '~/store'
|
||
const cdnUrl = useCdn()
|
||
const isOldfont = ref(false);
|
||
const { locale } = useI18n();
|
||
|
||
const rightValue = ref('-94px');
|
||
const isheight = ref(false);
|
||
const isScrollBottom = ref(false);
|
||
const updateRight = () => {
|
||
if(rightValue.value == '-94px'){
|
||
rightValue.value = '34px';
|
||
} else{
|
||
rightValue.value = '-94px';
|
||
}
|
||
}
|
||
|
||
const openOldMode = (value:boolean) => {
|
||
isOldfont.value = !isOldfont.value
|
||
}
|
||
let newsSwiper: any = null
|
||
const onSwiperNews = (swiper: any) => {
|
||
newsSwiper = swiper
|
||
swiper.on('slideChange', () => {
|
||
// 更新当前活动幻灯片索引
|
||
// isMeassage.value = false;
|
||
// debugger
|
||
// console.log(swiper.el.scrollHeight);
|
||
// console.log(window);
|
||
swiper_exp.value = swiper.realIndex;
|
||
|
||
})
|
||
}
|
||
let isMeassage = ref(true);
|
||
let isNews = ref(true);
|
||
let isAbout = ref(true);
|
||
//跳转每页swiper的方法
|
||
const toswiper = (index: number) => {
|
||
// if (index == 6) isNews.value = true;
|
||
// if (index == 7) isAbout.value = true;
|
||
// if (index == 8) isMeassage.value = true;
|
||
newsSwiper.slideTo(index)
|
||
}
|
||
const swiper_exp = ref(0);
|
||
|
||
const swiperOptionsNews = {
|
||
autoplay: {
|
||
delay: 11000,
|
||
disableOnInteraction: false,
|
||
},
|
||
// autoHeight : true,
|
||
direction: 'horizontal',
|
||
mousewheel: {
|
||
releaseOnEdges: true,
|
||
//forceToAxis: isheight.value,
|
||
sensitivity: 0.5
|
||
},
|
||
slidesPerView: 1,
|
||
speed: 500,
|
||
// lazy: {
|
||
// loadPrevNext: true,
|
||
// },
|
||
// effect: 'fade',
|
||
// loop: true,
|
||
modules: [Mousewheel],
|
||
// navigation: {
|
||
// nextEl: '#swipen_prev',
|
||
// prevEl: '#swipen_next',
|
||
// },
|
||
}
|
||
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;
|
||
};
|
||
|
||
// let vesSwiper: any = null
|
||
// const onSwiperExp = (swiper: any) => {
|
||
// vesSwiper = swiper
|
||
// // 监听幻灯片变化事件
|
||
// swiper.on('slideChange', () => {
|
||
// // 更新当前活动幻灯片索引
|
||
// activeSlideIndex.value = swiper.realIndex % 3
|
||
// })
|
||
// }
|
||
|
||
// const activeSlideIndex = ref(0);
|
||
|
||
const router = useRouter()
|
||
|
||
onMounted(() => {
|
||
|
||
const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
||
|
||
if (coMobile) {
|
||
// router.push('/phone_index/')
|
||
} else {
|
||
// router.push('/')
|
||
}
|
||
nextTick(() => {
|
||
// 初始化 ScrollReveal
|
||
// setTimeout(() => {
|
||
// animate()
|
||
// }, 500)
|
||
})
|
||
})
|
||
|
||
// const animate = () => {
|
||
|
||
// const sr = ScrollReveal();
|
||
// sr.reveal('.leftBoxTop', {
|
||
// origin: "left",
|
||
// distance: "1000px",
|
||
// duration: 1300,
|
||
// delay: 100,
|
||
// opacity: 0,
|
||
// scale: 0.9,
|
||
// reset: true,
|
||
// mobile: true,
|
||
// })
|
||
// sr.reveal('.leftBox', {
|
||
// origin: "left",
|
||
// distance: "1000px",
|
||
// duration: 1300,
|
||
// delay: 100,
|
||
// opacity: 0,
|
||
// scale: 0.9,
|
||
// reset: true,
|
||
// mobile: true,
|
||
// })
|
||
// sr.reveal('.rightBox', {
|
||
// origin: "right",
|
||
// distance: "1000px",
|
||
// duration: 1300,
|
||
// delay: 100,
|
||
// opacity: 0,
|
||
// scale: 0.9,
|
||
// reset: true,
|
||
// mobile: true,
|
||
// })
|
||
// sr.reveal('.topBox', {
|
||
// origin: "top",
|
||
// distance: "1000px",
|
||
// duration: 1300,
|
||
// delay: 100,
|
||
// opacity: 0,
|
||
// scale: 0.9,
|
||
// reset: true,
|
||
// mobile: true,
|
||
// })
|
||
// sr.reveal('.bottomBox', {
|
||
// origin: "bottom",
|
||
// distance: "1000px",
|
||
// duration: 1300,
|
||
// delay: 100,
|
||
// opacity: 0,
|
||
// scale: 0.9,
|
||
// reset: true,
|
||
// mobile: true,
|
||
// })
|
||
// sr.reveal('.numberTopBox', {
|
||
// origin: "top",
|
||
// distance: "1000px",
|
||
// duration: 1300,
|
||
// delay: 100,
|
||
// opacity: 0,
|
||
// scale: 0.9,
|
||
// reset: true,
|
||
// mobile: true,
|
||
// beforeReveal: function (el: any) {
|
||
// // numberAnimationInstRef.value.play()
|
||
// // numberAnimationInstRefKH.value.play()
|
||
// // numberAnimationInstRefJS.value.play()
|
||
// // numberAnimationInstRefHY.value.play()
|
||
// },
|
||
// })
|
||
// sr.reveal('.group_29 ', {
|
||
// origin: "bottom",
|
||
// distance: "500px",
|
||
// opacity: 0,
|
||
// scale: 0.9,
|
||
// reset: false,
|
||
// mobile: true,
|
||
// })
|
||
// }
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import "@/assets/animate/animate.min.css";
|
||
@import "@/assets/index.scss";
|
||
|
||
:deep(.dswper .swiper-slide-next) {
|
||
transform: translate3d(0px, 0px, -507px) rotateX(0deg) rotateY(0deg) scale(1) !important;
|
||
}
|
||
|
||
:deep(.dswper .swiper-slide-prev) {
|
||
transform: translate3d(0px, 0px, -507px) rotateX(0deg) rotateY(0deg) scale(1) !important;
|
||
}
|
||
|
||
.group_666 .swiper-slide img {
|
||
width: 100%;
|
||
height: auto;
|
||
// transition: 1s linear 2s;
|
||
// transform: scale(1.1, 1.1);
|
||
}
|
||
|
||
// .group_666 .swiper-slide-active img,
|
||
// .swiper-slide-duplicate-active img {
|
||
// transition: 6s linear;
|
||
// transform: scale(1, 1);
|
||
// }
|
||
|
||
.bottom_imgs {
|
||
background: var(--qall) no-repeat;
|
||
width: 1230px;
|
||
height: 272px;
|
||
background-size: 100% 100%;
|
||
margin: 0 auto;
|
||
|
||
}
|
||
|
||
.content_box {
|
||
background: var(--m1);
|
||
width: 561px;
|
||
height: 521px;
|
||
z-index: 1;
|
||
position: absolute;
|
||
right: -12px;
|
||
bottom: -13px;
|
||
background-size: 100%;
|
||
}
|
||
|
||
.contactForm {
|
||
width: 100%;
|
||
|
||
.inputform {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 1200px;
|
||
}
|
||
|
||
}
|
||
|
||
|
||
|
||
#myTextarea {
|
||
width: 1200px;
|
||
height: 167px;
|
||
background: #FFFFFF;
|
||
border-radius: 6px 6px 6px 6px;
|
||
opacity: 0.8;
|
||
padding-left: 20px;
|
||
padding-top: 20px;
|
||
resize: none;
|
||
}
|
||
|
||
#myTextarea::placeholder {
|
||
color: #768597;
|
||
}
|
||
|
||
#myTextarea:focus {
|
||
outline: none;
|
||
}
|
||
|
||
.char-count {
|
||
position: absolute;
|
||
bottom: 5px;
|
||
/* 根据需要调整距离底部的位置 */
|
||
right: 10px;
|
||
/* 根据需要调整距离右侧的位置 */
|
||
font-size: 12px;
|
||
/* 根据需要调整字体大小 */
|
||
color: #A8CBFF;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.contactInput {
|
||
font-size: 18px;
|
||
height: 40px;
|
||
}
|
||
}
|
||
|
||
.contactBut {
|
||
width: 108px;
|
||
border-radius: 4px 4px 4px 4px;
|
||
position: absolute;
|
||
bottom: 20px;
|
||
right: 30px;
|
||
height: 36px;
|
||
background-color: #222222;
|
||
border: none;
|
||
font-weight: 400;
|
||
font-size: 16px;
|
||
line-height: 28px;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.pop {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, .8);
|
||
z-index: 200;
|
||
display: none;
|
||
}
|
||
|
||
.popCont {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
.pop_video_close {
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
top: 0;
|
||
right: -75px;
|
||
width: 50px;
|
||
height: 50px;
|
||
background: var(--close) no-repeat 0 0;
|
||
background-size: 100% auto;
|
||
border: 6px solid #979797;
|
||
}
|
||
|
||
.pop_video_cont {
|
||
width: 600px;
|
||
border: 6px solid #979797;
|
||
background: #000;
|
||
}
|
||
|
||
.pop_video_cont video {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.hy_my_home {
|
||
width: 585px;
|
||
height: 300px;
|
||
margin: 0 auto;
|
||
transition: all 0.3s ease;
|
||
|
||
&:hover {
|
||
transform: scale(1.05);
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.news_my_home {
|
||
cursor: pointer;
|
||
|
||
&:hover .news_title_home {
|
||
color: coral;
|
||
}
|
||
}
|
||
|
||
.news_title_home {
|
||
font-size: 18px;
|
||
font-weight: 700;
|
||
padding-top: 10px;
|
||
}
|
||
|
||
.fiximg{
|
||
transition: right 0.5s ease-in-out;
|
||
position: fixed;
|
||
top: 40px;
|
||
align-items: center;
|
||
z-index:111;
|
||
.qqt{
|
||
cursor: pointer;
|
||
}
|
||
.divcode{
|
||
position: relative;
|
||
display: flex;
|
||
justify-content: center;
|
||
.imgs{
|
||
width: 63px;
|
||
margin-bottom: 20px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.pcode{
|
||
display: inline-block;
|
||
position: absolute;
|
||
width: 0;
|
||
right: 99px;
|
||
bottom: 20px;
|
||
transition: all 0.5s;
|
||
}
|
||
&:hover .pcode{
|
||
width: 100px;
|
||
}
|
||
}
|
||
.tuanguanxi{
|
||
position: relative;
|
||
left: 30px;
|
||
}
|
||
}
|
||
.isOldfont *{
|
||
font-size: 28px !important;
|
||
}
|
||
</style>
|
||
|