tuanshiwei-web/pages/index.vue

<template>
	<div style="width: 100%;">
		<!-- Swiper 容器 -->
		<div class="group_666" style="position: relative;height: 100vh;">
			<AppHeader v-if="swiper_exp > 0"/>
			<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></AppHome>
				</swiper-slide>
				<!-- 关于我们 -->
				<swiper-slide>
					<AppAbout></AppAbout>
				</swiper-slide>
				<!-- 新闻动态 -->
				<swiper-slide>
					<AppNews></AppNews>
				</swiper-slide>
				<!-- 信息公开 -->
				<swiper-slide>
					<AppMessage></AppMessage>
				</swiper-slide>
				<!-- 团务百科 -->
				<swiper-slide>
					<AppRegiment></AppRegiment>
				</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" class="flex flex-col fiximg" style="position: absolute;top: 100px;right:36px;align-items: center;z-index: 111;" >
				<img :src="`/img/qiqiu.png`" alt=""></img>
				<img class="imgs" :src="`/img/index/douyin.png`" alt="">
				<img class="imgs" :src="`/img/index/wb.png`" alt="">
				<img class="imgs" :src="`/img/index/wx.png`" alt="">
				<img class="imgs" :src="`/img/index/blbl.png`" alt="">
			</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'
let modules = [Autoplay, A11y, EffectCoverflow, EffectFade,Mousewheel];

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()

let newsSwiper: any = null
const onSwiperNews = (swiper: any) => {
	newsSwiper = swiper
	swiper.on('slideChange', () => {
		// 更新当前活动幻灯片索引
		swiper_exp.value = swiper.realIndex
	})
}
const swiper_exp = ref(0);

const swiperOptionsNews = {
	autoplay: {
		delay: 11000,
		disableOnInteraction: false,
	},
	direction: 'horizontal',
	mousewheel: {
		releaseOnEdges: true,
	},
	slidesPerView: 1,
	speed: 500,
	// 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{
	.imgs{
		width: 63px;
		margin-bottom: 20px;
	}
}
</style>