榆钱落尽槿花稀
601f99ec80
- 在多个页面添加移动端检测并重定向到对应的移动端页面 - 优化移动端布局样式，包括间距、背景和高度调整 - 为社会责任页面添加分页功能 - 统一图片资源使用CDN地址 - 修复导航链接问题 - 添加新的背景变量和样式 - 优化动画效果和滚动触发 - 调整页面元素间距和响应式布局
396 lines
11 KiB
Vue
396 lines
11 KiB
Vue
<template>
|
||
<div style="width: 100%;">
|
||
<!-- Swiper 容器 -->
|
||
<div class="group_666" style="position: relative;min-height: 450px;">
|
||
<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
|
||
<swiper-slide>
|
||
<img :src="`${cdnUrl}/img/societyduty/shehui.png`" style="width: 100%;height: 100%;object-fit: cover;">
|
||
</swiper-slide>
|
||
<swiper-slide>
|
||
<img :src="`${cdnUrl}/img/societyduty/shehui.png`" style="width: 100%;height: 100%;object-fit: cover;">
|
||
</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 @click="videoShow = true"
|
||
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(() => {
|
||
const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
|
||
if (coMobile) {
|
||
window.location.href="/web/phone_societyDutyNew/";
|
||
}
|
||
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>
|