515 lines
11 KiB
Vue
515 lines
11 KiB
Vue
<template>
|
|
<div style="width: 100%;">
|
|
<!-- Swiper 容器 -->
|
|
<div class="group_666" style="position: relative;height: 100vh;overflow: hidden;">
|
|
<AppHeader v-if="swiper_exp > 0" @crrentTop="toswiper" 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></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 { locale } = useI18n();
|
|
|
|
const rightValue = ref('-94px');
|
|
const isheight = ref(0);
|
|
const updateRight = () => {
|
|
if(rightValue.value == '-94px'){
|
|
rightValue.value = '34px';
|
|
} else{
|
|
rightValue.value = '-94px';
|
|
}
|
|
}
|
|
|
|
|
|
let newsSwiper: any = null
|
|
const onSwiperNews = (swiper: any) => {
|
|
newsSwiper = swiper
|
|
swiper.on('slideChange', () => {
|
|
// 更新当前活动幻灯片索引
|
|
// isMeassage.value = false;
|
|
// debugger
|
|
// console.log(swiper.el.scrollHeight);
|
|
swiper_exp.value = swiper.realIndex;
|
|
// if(swiper.realIndex == 6 || swiper.realIndex == 7 || swiper.realIndex == 9){
|
|
// isheight.value = swiper.el.scrollHeight
|
|
// }
|
|
|
|
// isheight
|
|
})
|
|
}
|
|
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,
|
|
},
|
|
direction: 'horizontal',
|
|
mousewheel: {
|
|
releaseOnEdges: true,
|
|
// forceToAxis: isheight > 919 ? true : false,
|
|
},
|
|
slidesPerView: 1,
|
|
speed: 500,
|
|
lazy: {
|
|
loadPrevNext: true,
|
|
},
|
|
// effect: 'fade',
|
|
// loop: true,
|
|
modules: [Mousewheel],
|
|
// navigation: {
|
|
// nextEl: '#swipen_prev',
|
|
// prevEl: '#swipen_next',
|
|
// },
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
}
|
|
</style>
|
|
|