lingrui-web/pages/societyDutyNew.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="`${cdnUrl}/img/societyduty/shehui.png`" style="width: 100%;">
				</swiper-slide>
				<swiper-slide>
					<img :src="`${cdnUrl}/img/societyduty/shehui.png`" style="width: 100%;">
				</swiper-slide>
			</swiper>
		</div>
		<div class="box_11 flex-col bottom_imgss">
			<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 style="color: rgb(252, 116, 40);">公司动态</span>
						<div
							style="width: 100%;height: 1px;background-color: #fc7428;position: absolute;bottom: -21px;">
						</div>
					</div>
					<div class="text_25">
						<NuxtLink to="/societyDuty/">
							<span>活动影集（部分）</span>
						</NuxtLink>
					</div>

				</div>
				<div class="group_15" style="flex: 0 0 100%;"></div>
			</div>

			<div class="boxgs flex-row flex-wrap">
				<div class="boxgs_top" style="display: flex;align-items: center;justify-content: center;">
					<div style="position: relative;cursor: pointer;" @click="videoShow = true">
						<img :src="`${cdnUrl}/img/societyduty/det.png`" style="width: 500px;height: 325px;">
						<img :src="`${cdnUrl}/img/societyduty/bf.png`"
							style="width: 50px;height: 50px;position: absolute;top: 45%;left: 0;right: 0;margin: 0 auto;">
					</div>
					<div style="width: 53%;padding-left: 30px;">
						<div style="font-size: 24px;color: #3D3D3D;font-weight: 700;">青年企业家岳崇霄:招商引智为洛阳注入创新活水</div>
						<div style="color: #FC7428;font-size: 14px;font-weight: 900;margin: 20px 0px;">灵睿网络创始人：岳崇霄</div>
						<div style="font-size: 14px;font-weight: 400;color: #3D3D3D;">
							<div>岳崇霄，2020年4月，荣获2020年全国向上向善好青年：扶贫助困好青年。 </div>
							<div>洛阳灵睿网络技术有限公司 创始人</div>
							<div>河南灵睿科技集团有限公司 董事长</div>
							<div>
								河南省青联委员、河南省青年企业家协会理事、河南省青少年新媒体协会理事、洛阳市青联常委、洛阳市青年企业家协会副会长、洛阳市党外知识分子联谊会副秘书长、洛阳市青年文艺联合会副秘书长、洛阳市郑州商会副会长、涧西区党外知识分子联谊会副会长、洛阳师范学院客座教授
								洛阳职业技术学院客座教授</div>
						</div>
						<div style="margin-top: 20px;">
							<div
								style="cursor: pointer;;line-height: 36px;text-align: center;width: 109px;height: 36px;background: #222222;color: #ffffff;">
								查看详情</div>
						</div>
					</div>
				</div>

				<div class="box_con flex-row" v-for="(item, index) in newList" :key="index" @click="openNewInfo(item)">
					<div class="align-center" style="padding-left: 20px;">
						<img :src="item.image" style="height: 180px;width: 250px;object-fit: cover;border-radius: 8px;">
					</div>
					<div class="flex-col" style="margin-top: 5px;width: 75%;padding-left: 20px;position: relative;">
						<div class="text_tt">
							{{ item.title }}
						</div>
						<div class="text_cc three-line-ellipsis">
							{{ item.subtitle }}
						</div>
						<div
							style="display: flex;justify-content: space-between;align-items: center;position: absolute;bottom: 20px;width: 98%;">
							<div style="font-size: 14px;">发布日期：{{ timeDateMy(item.release_time_text) }}</div>
							<div style="font-size: 14px;color: #FC7428;display: flex;align-items: center;">
								<div>查看详情</div>
								<div style="margin-left: 10px;">
									<img :src="`${cdnUrl}/img/societyduty/r.png`" alt="">
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="flex flex-row justify-center py-5" style="background-color: #F8F8F8;padding-bottom: 40px;">
			<n-pagination v-model:page="page" :page-sizes="[10]" :item-count="total" size="large"
				@update:page="getPageList">
			</n-pagination>
		</div>
		<div v-if="videoShow" class="pop" style="display: block;">
			<div class="abs popCont pop_video_cont">
				<a @click="videoShow = false" class="abs pop_video_close closePop"></a>
				<video x5-playsinline="" playsinline="" webkit-playsinline="" preload=""
					x5-video-orientation="portraint" controls="" autoplay :src="`${cdnUrl}/img/yue.mp4`"
					draggable="true"></video>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup >
import { NPagination } from 'naive-ui'
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()

const videoShow = ref(false);
const cdnUrl = useCdn()
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',
	},
}

const openNewInfo = (item) => {
	window.open(`/info/${item.id}`)
}

// 新闻数据
onMounted(() => {
	animate()
	getNewsList();
})
const timeDateMy = (dateStr) => {
	const date = new Date(dateStr);
	const year = date.getFullYear();
	const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始 
	const day = String(date.getDate()).padStart(2, '0');
	return `${year}.${month}.${day}`;
}
const page = ref(1);
const total = ref(0);
const getPageList = async () => {
	page.value = page.value + 1;
	getNewsList();
}

const newList = ref([]);
const getNewsList = async () => {
	const res = await $api.post('/api/home.news/index', {
		limit: 10,
		page: page.value,
	})
	total.value = res.data.data.count;
	newList.value = res.data.data.list;
}
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.scss";

::v-deep .n-pagination .n-pagination-item:not(.n-pagination-item--disabled).n-pagination-item--active {
	color: #ffffff;
	background-color: #FC7428;
	border: 1px solid #FC7428;
}

::v-deep .n-pagination .n-pagination-item:not(.n-pagination-item--disabled):hover.n-pagination-item--button {
	color: #FC7428;
}

::v-deep .n-pagination .n-pagination-item:not(.n-pagination-item--disabled):hover {
	color: #FC7428;
	border: 1px solid #FC7428;
}

::v-deep .n-pagination .n-pagination-item {
	border: 1px solid #999999;
}

.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;
	// background-size: 100%;
}

.boxgs {
	width: 1200px;
	margin: 0 auto;
	margin-top: 30px;

	.boxgs_top {
		background: var(--newstop) 100% 100% no-repeat;
		width: 100%;
		height: 385px;
		border: 1px solid #FC7428;
		border-radius: 24px;
		margin-top: 30px;
	}

	.box_con {
		margin: 20px;
		background-color: #ffffff;
		width: 100%;
		height: 220px;
		font-family: Microsoft YaHei UI-Regular;
		border-radius: 4px;

		.text_tt {
			font-size: 22px;
			width: 100%;
			margin-top: 15px;
			color: #3D3D3D;
			font-weight: 700;
		}

		.text_cc {
			width: 100%;
			color: #768597;
			font-size: 14px;
			font-weight: 400;
			margin-top: 20px;
		}
		&:hover {
			cursor: pointer;
			box-shadow: 0 0 10px rgba(252, 116, 40, 0.5);
			transition: all 0.3s ease;
			border-radius: 8px;
			//放大
			transform: scale(1.05);
		}
	}
}


.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%;
}
</style>