lingrui-web/pages/societyDuty.vue

<template>
	<div style="width: 100%;">
		<!-- Swiper 容器 -->
		<div class="group_666" style="position: relative;height: 600px;">
			<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
				<swiper-slide>
					<img src="public/img/societyduty/shehui.png" style="width: 100%;">
				</swiper-slide>
				<swiper-slide>
					<img src="public/img/societyduty/shehui.png" style="width: 100%;">
				</swiper-slide>
			</swiper>
			<!-- <div style="position: absolute;bottom: 50px;left: 0;width: 100%;z-index: 100;">
				<div class="flex-row justify-center align-center">
					<div>
						<img src="public/img/left.png" alt="">
					</div>
					<div style="margin: 0px 20px;">
						<img src="public/img/morse.png" alt="">
					</div>
					<div>
						<img src="public/img/right.png" alt="">
					</div>
				</div>
			</div> -->
		</div>
		<div class="box_11 flex-col bottom_imgss">
			<!-- <div class="text-wrapper_10">
				<span class="text_41">公司荣誉</span>
			</div>
			<div class="text-wrapper_11">
				<span class="text_42">Company&nbsp;Honors&nbsp;</span>
			</div> -->
			<div class="group_14 flex-row justify-between align-center" style="flex-wrap: wrap;width: 1200px;padding-top: 30px;">
				<div class="flex-row">
					<div class="text_25">
						<span>
							<NuxtLink to="/societyDutyNew/">
								公司动态
							</NuxtLink>
						</span>
					</div>
					<div class="text_25">
						<span style="color: rgb(252, 116, 40);">活动影集（部分）</span>
						<div
							style="    left: 20px;width: 100%;height: 1px;background-color: #fc7428;position: absolute;bottom: -21px;">
						</div>
					</div>
					
				</div>
				<!-- <div class="flex-row justify-center align-center">
					<div style="margin-right: 10px;">
						<span class="text_32">更多案例</span>
					</div>
					<div>
						<img src="public/img/anli.png" />
					</div>
				</div> -->
				<div class="group_15" style="flex: 0 0 100%;"></div>
			</div>
			
			<div class="boxgs flex-row flex-wrap">

				<div class="box_con flex-col" v-for="(item,index) in lists" :key="index">
					<div class="align-center"  style="justify-content: center;">
						<img width="277px" height="189px" :src="`/img/societyduty/s${index+1}.png`" alt="">
					</div>
					<div class="flex-col" style="justify-content: center;margin-top: 5px;">
						<span class="text_tt">
							{{item.title}}
						</span>
						<!-- <span class="text_cc">
							{{item.value}}
						</span> -->
					</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 } from "swiper/modules";
import ScrollReveal from 'scrollreveal';
import { NNumberAnimation } from 'naive-ui'
let modules = [Autoplay, A11y, EffectCoverflow,EffectFade];

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 { locale } = useI18n()

let newsSwiper: any = null
const onSwiperNews = (swiper: any) => {
	newsSwiper = swiper
}
const swiperOptionsNews = {
	autoplay: {
		delay: 5000,
		disableOnInteraction: false,
	},
	direction: 'horizontal',
	slidesPerView: 1,
	speed: 500,
	effect: 'fade',
	loop: true,
	modules: [EffectFade,Autoplay,Navigation],
	navigation: {
		nextEl: '#swipen_prev',
		prevEl: '#swipen_next',
	},
}

let vesSwiper: any = null
const onSwiperExp = (swiper: any) => {
	vesSwiper = swiper
}
const swiper_exp = ref();
const lists = ref([
	{title: '21年西工硅巷青创加速营仪式开营'},
	{title: '21年西工硅巷青创加速营活动进行中'},
	{title: '香港青英会15 周年、第16 届执委会暨第7屆理事会就职仪式'},
	{title: '青年企业家助力河南高质量发展暨河南青年创新创业论坛'},
	{title: '洛阳市青年联合会第九届委员会常务委员第一次会议'},
	{title: '河南青年科技创新论坛'},
	{title: '团省委省青联2023年新春送温暖慰问活动'},
	{title: '郑州市儿童福利院慰问活动'},
	{title: '洛阳市青年联合会第九届委员会常务委员第一次会议'},
	{title: '东方医院活动'},
	{title: '中国青年梦想季活动-中国   '},
	{title: '河南省青年企业家协会第十一届常务理事选举'}

]);
// 新闻数据
onMounted(() => {
	nextTick(() => {
		animate()
	})
})
const numberAnimationInstRef = ref()
const numberAnimationInstRefKH = ref()
const numberAnimationInstRefJS = ref()
const numberAnimationInstRefHY = ref()
const animate = () => {

	const sr = ScrollReveal();
	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('.topSj', {
		origin: "bottom",
		distance: "1000px",
		duration: 1300,
		delay: 5,
		opacity: 0,
		scale: 0.9,
		reset: true,
		mobile: true,
		useDelay: 'always',
		interval: 50,
	})
}
</script>

<style lang="scss" scoped>
@import "@/assets/animate/animate.min.css";
@import "@/assets/index.css";



.group_666 .swiper-slide img {
  width: 100%;
  height: 500px;
  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_imgss{
	// background: url(/public/img/customer/bg-s.png);
	background: #F8F8F8;
    height: 1047px;
    // background-size: 100%;
}
.boxgs{
    width: 1200px;
    margin: 0 auto;
	margin-top: 30px;
	padding-top: 20px;
	.box_con{
		margin:10px;
		background-color: #ffffff;
		width: 277px;
		height: 276px;
		font-family: Microsoft YaHei UI-Regular;
		border-radius:4px;
		.text_tt{
			display: inline-block;
			width: 100%;
			margin-top: 15px;
			color: #3D3D3D ;
			font-size: 16px;
			font-weight: 500;
			text-align: center;
			padding: 0 25px 20px 25px;
		}
		.text_cc{
			display: inline-block;
			width: 100%;
			height: 30px;
			overflow-wrap: break-word;
			color: #999999 ;
			font-size: 14px;
			font-weight: 400;
			text-align: center;
			line-height: 30px;
		}
	}
}
</style>