293 lines
7.1 KiB
Vue
293 lines
7.1 KiB
Vue
<template>
|
|
<div style="width: 100%;">
|
|
<!-- Swiper 容器 -->
|
|
<div class="group_666" style="position: relative;">
|
|
<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 Honors </span>
|
|
</div> -->
|
|
<div class="group_14 flex-row justify-between align-center" style="flex-wrap: wrap;width: 1200px;">
|
|
<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="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;
|
|
width: 1920px;
|
|
height: 1047px;
|
|
// background-size: 100%;
|
|
}
|
|
.boxgs{
|
|
width: 1300px;
|
|
margin: 0 auto;
|
|
margin-top: 30px;
|
|
.box_con{
|
|
margin:20px;
|
|
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>
|