1095 lines
27 KiB
Vue
1095 lines
27 KiB
Vue
<template>
|
|
<div style="width: 100%;overflow: hidden;">
|
|
<!-- 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/services1.png" style="width: 100%;">
|
|
</swiper-slide>
|
|
<swiper-slide>
|
|
<img src="public/img/services1.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="group_2 flex-col"
|
|
style="background-color: #ffffff;overflow: unset;position: relative;height: 629px;">
|
|
<img src="public/img/service_01s.png" style="width: 100%;position: absolute;top: -30px;z-index: 10;">
|
|
<div class="service_top1">
|
|
<div style="cursor: pointer;">
|
|
<div style="color: #FC7428;margin-bottom: 20px;">内容创作与运营</div>
|
|
<div style="background-color: #FC7428;width:40%;height: 8px;margin: 0 auto;"></div>
|
|
</div>
|
|
<div style="cursor: pointer;">
|
|
<NuxtLink to="/proServices/">
|
|
专业技术服务
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
<div class="service-01" style="text-align: center;padding-top: 30px;z-index: 30;">
|
|
<div style="font-size: 34px;font-weight: 700;">全媒体推广解决方案</div>
|
|
<div style="color: #768597;font-size: 16px;margin-top: 30px;">多维度矩阵覆盖，赋能品牌增长新势能</div>
|
|
</div>
|
|
<div style="padding-top: 30px;z-index: 30;">
|
|
<div style="display: flex;flex-direction: row;justify-content: center;width: 100%;gap: 30px;">
|
|
<div class="service_center_01s">
|
|
<span class="service_center_01s_title">
|
|
<img src="public/img/content_ds.png" alt="" style="margin-right: 10px;">
|
|
覆盖各大主流平台
|
|
</span>
|
|
<span class="service_center_01s_text">定制【流量矩阵+内容策略+效果追踪】一体化方案</span>
|
|
<div class="btn_lx">联系我们</div>
|
|
</div>
|
|
<div class="service_center_01s">
|
|
<span class="service_center_01s_title">
|
|
<img src="public/img/content_xx.png" alt="" style="margin-right: 10px;">
|
|
平台搭建
|
|
</span>
|
|
<span class="service_center_01s_text">抖音、视频号、快手、B站、微信公众号、小红书等一站式布局</span>
|
|
<div class="btn_lx">联系我们</div>
|
|
</div>
|
|
<div class="service_center_01s">
|
|
<span class="service_center_01s_title">
|
|
<img src="public/img/content_yy.png" alt="" style="margin-right: 10px;">
|
|
精准运营
|
|
</span>
|
|
<span class="service_center_01s_text">行业大数据分析+账号定位+内容持续输出+流量裂变模型+账号运营变现</span>
|
|
<div class="btn_lx">联系我们</div>
|
|
</div>
|
|
</div>
|
|
<div style="margin-top: 30px;text-align: center;width: 100%;">
|
|
<span class="more_bot">
|
|
<span style="cursor: pointer;">了解更多解决方案</span>
|
|
<img src="public/img/moreright.png" alt="" style="margin-left: 15px;width: 10px;cursor: pointer;">
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div style="padding: 40px 0px 100px 0px;z-index: 30;background: url(/img/content_con.png) 100% no-repeat;height: 634px;">
|
|
<div style="text-align: center;padding-top: 30px;z-index: 30;">
|
|
<div style="font-size: 34px;font-weight: 700;">品牌账号代运营</div>
|
|
<div class="flex-row justify-center align-center" style="margin-top: 30px;">
|
|
<div class="video_platform ">
|
|
<img src="public/img/mp4_video.png" alt="" style="margin-right: 10px;">
|
|
视频平台
|
|
</div>
|
|
<div class="video_wechat">
|
|
<img src="public/img/video_wechat.png" alt="" style="margin-right: 10px;">
|
|
微信账号
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
style="display: flex;flex-direction: row;align-items: center;justify-content: center;width: 100%;gap: 30px;margin-top: 30px;">
|
|
|
|
<div class="service-yw" style="position: relative;" v-for="(i,index) in 5" :key="index">
|
|
<img :src="`/img/media/${i}.png`" style="width:216px;">
|
|
<!-- <div style="position: absolute;bottom: 0px;left: 0px;width: 100%;height: 100%;padding: 30px;">
|
|
<div style="font-size: 18px;font-weight: 700;color: #3D3D3D;">安全防护</div>
|
|
<div style="font-weight: 400;color: #768597;font-size: 14px;margin-top: 10px;">
|
|
帮助决策者制定针对性防护策略降低网络攻击、数据泄露和业务中断等风险</div>
|
|
</div> -->
|
|
</div>
|
|
|
|
</div>
|
|
<div style="width: 100%;color: #FC7428;font-size: 18px;text-align: center;margin-top: 20px;">全流程支持：脚本策划→专业拍摄→后期特效→精准投放→效果复盘</div>
|
|
</div>
|
|
|
|
<div class="flex justify-center align-center bottom-3s" style="padding-top: 50px;z-index: 30;background-color: #f8f8f8;height: 559px;">
|
|
<div>
|
|
<img src="public/img/media/leftpeo.png" alt="">
|
|
</div>
|
|
<div class="flex-col">
|
|
<div class="flex-col">
|
|
<span class="mediat1">线上线下活动策划</span>
|
|
<span class="mediat2">多维度矩阵覆盖，赋能品牌增长新势能</span>
|
|
</div>
|
|
<div style="width: 568px;height: 1px;background: #EEEEEE;margin-top: 40px;"></div>
|
|
<div>
|
|
<div class="flex justify-center mediat3">
|
|
<img src="public/img/media/left1.png" alt="">
|
|
创意驱动，精准执行，从构思到落地，打通线上线下资源，一站式策划沉浸式活动，引爆品牌传播声量。
|
|
</div>
|
|
<div class="flex justify-center mediat3">
|
|
<img src="public/img/media/left2.png" alt="">
|
|
线上活动：聚焦行业热点打造爆款话题 （话题营销+直播连麦+裂变传播）助力品牌实现社交裂变传播，激活私域流量池。
|
|
</div>
|
|
<div class="flex justify-center mediat3">
|
|
<img src="public/img/media/left3.png" alt="">
|
|
线下活动：全案服务涵盖发布会、快闪店、行业峰会等多元形式，提供从创意策划、资源整合、现场执行到效果追踪的全流程专业落地解决方案。
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-center align-center bottom-3s" style="padding-top: 50px;z-index: 30;background-color: #ffffff;height: 559px;">
|
|
|
|
<div class="flex-col">
|
|
<div class="flex-col">
|
|
<span class="mediat1">互联网新闻发布</span>
|
|
<span class="mediat2">多维度矩阵覆盖，赋能品牌增长新势能</span>
|
|
</div>
|
|
<div style="width: 568px;height: 1px;background: #EEEEEE;margin-top: 40px;"></div>
|
|
<div>
|
|
<div class="flex justify-center mediat3">
|
|
<img src="public/img/media/right1.png" alt="">
|
|
整合全网权威渠道，依托海量优质媒体资源，定制新闻发布策略，以专业视角与高效执行，让您的新闻迅速抢占舆论高地，第一时间触达目标受众。
|
|
</div>
|
|
<div class="flex justify-center mediat3">
|
|
<img src="public/img/media/right2.png" alt="">
|
|
权威媒体资源覆盖人民网、新浪、网易等、科技等垂直领域媒体，形成多渠道传播矩阵，深度触达目标受众，强化品牌公信力与行业影响力。
|
|
</div>
|
|
<div class="flex justify-center">
|
|
<div class="group_28 flex-row justify-between numberTopBox" style="width: 390px;text-align: center;margin-left: 0;">
|
|
<div class="text-group_9 flex-col justify-between" style="width: auto;height: 80px;">
|
|
<span class="text_55" style="font-size: 32px;text-align: center;width: auto;">
|
|
<n-number-animation :duration="5000" ref="numberAnimationInstRef" :active="false"
|
|
:from="0" :to="1000"></n-number-animation>+</span>
|
|
<span class="">权威媒体资源</span>
|
|
</div>
|
|
|
|
|
|
<div class="text-group_10 flex-col justify-between" style="width: auto;height: 80px;">
|
|
<span class="text_58" style="font-size: 32px;text-align: center;width: auto;"><n-number-animation :duration="5000"
|
|
ref="numberAnimationInstRefKH" :active="false" :from="0"
|
|
:to="800"></n-number-animation>万</span>
|
|
<span class="">单日曝光超</span>
|
|
</div>
|
|
|
|
<div class="text-group_11 flex-col justify-between" style="width: auto;height: 80px;">
|
|
<span class="text_61" style="font-size: 32px;text-align: center;width: auto;"><n-number-animation :duration="5000"
|
|
ref="numberAnimationInstRefJS" :active="false" :from="0"
|
|
:to="50"></n-number-animation>+</span>
|
|
<span class="">媒体矩阵报道</span>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<img src="public/img/media/rightpeo.png" alt="">
|
|
</div>
|
|
</div>
|
|
<div class="flex" style="padding-top: 50px;z-index: 30;background-color: #ffffff;height: 535px;width: 100%;">
|
|
<div style="background: url(/img/media/botleft.png) 100% 100% no-repeat;width: 50%;"></div>
|
|
<div style="background: url(/img/media/botright.png)100% 100% no-repeat;width: 50%;"></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()
|
|
|
|
const serviceList = ref([
|
|
{ name: '需求分析与规划' },
|
|
{ name: '选址与场地设计' },
|
|
{ name: '供配电系统' },
|
|
{ name: '制冷系统' },
|
|
{ name: '机柜布局' },
|
|
{ name: '防静电设施' },
|
|
{ name: '网络架构' },
|
|
{ name: '安全防护' },
|
|
{ name: '监控系统' },
|
|
{ name: '应急预案' },
|
|
{ name: '运维流程' },
|
|
])
|
|
|
|
const numberAnimationInstRef = ref()
|
|
const numberAnimationInstRefKH = ref()
|
|
const numberAnimationInstRefJS = ref()
|
|
|
|
const mousindex = ref(1);
|
|
|
|
const left1 = ref(0);
|
|
const top1 = ref(0);
|
|
|
|
const left2 = ref(310);
|
|
const top2 = ref(0);
|
|
|
|
const left3 = ref(620);
|
|
const top3 = ref(0);
|
|
|
|
const left4 = ref(930);
|
|
const top4 = ref(0);
|
|
|
|
const left5 = ref(310);
|
|
const top5 = ref(230);
|
|
|
|
const left6 = ref(620);
|
|
const top6 = ref(230);
|
|
|
|
const left7 = ref(930);
|
|
const top7 = ref(230);
|
|
|
|
const mous = (index: number, event: any) => {
|
|
mousindex.value = index;
|
|
const thisDiv = event.currentTarget;
|
|
if (index == 1) {
|
|
animateElement(document.querySelector('.box1'), {
|
|
height: 428,
|
|
left: 0,
|
|
top: 0
|
|
}, 200);
|
|
animateElement(document.querySelector('.box2'), {
|
|
height: 196,
|
|
left: 310,
|
|
top: 0
|
|
}, 200);
|
|
animateElement(document.querySelector('.box3'), {
|
|
height: 196,
|
|
left: 620,
|
|
top: 0
|
|
}, 200);
|
|
animateElement(document.querySelector('.box5'), {
|
|
height: 196,
|
|
left: 310,
|
|
top: 230
|
|
}, 200);
|
|
animateElement(document.querySelector('.box6'), {
|
|
height: 196,
|
|
left: 620,
|
|
top: 230
|
|
}, 200);
|
|
}
|
|
if (index == 2) {
|
|
const box2 = document.querySelector('.box2');
|
|
//获取当前鼠标位置
|
|
const leftValue = parseFloat(
|
|
window.getComputedStyle(box2).left ||
|
|
box2.style.left ||
|
|
box2.offsetLeft
|
|
);
|
|
console.log(leftValue);
|
|
if (leftValue == 310) {
|
|
animateElement(document.querySelector('.box1'), {
|
|
height: 196,
|
|
left: 0,
|
|
top: 0
|
|
}, 200);
|
|
animateElement(document.querySelector('.box2'), {
|
|
height: 428,
|
|
left: 310,
|
|
top: 0
|
|
}, 200);
|
|
animateElement(document.querySelector('.box3'), {
|
|
height: 196,
|
|
left: 620,
|
|
top: 0
|
|
}, 200);
|
|
animateElement(document.querySelector('.box5'), {
|
|
height: 196,
|
|
left: 0,
|
|
top: 230
|
|
}, 200);
|
|
animateElement(document.querySelector('.box6'), {
|
|
height: 196,
|
|
left: 620,
|
|
top: 230
|
|
}, 200);
|
|
} else {
|
|
animateElement(document.querySelector('.box1'), {
|
|
height: 196,
|
|
left: 310,
|
|
top: 230
|
|
}, 200);
|
|
animateElement(document.querySelector('.box2'), {
|
|
height: 428,
|
|
left: 0,
|
|
top: 0
|
|
}, 200);
|
|
animateElement(document.querySelector('.box3'), {
|
|
height: 196,
|
|
left: 620,
|
|
top: 0
|
|
}, 200);
|
|
animateElement(document.querySelector('.box5'), {
|
|
height: 196,
|
|
left: 310,
|
|
top: 0
|
|
}, 200);
|
|
animateElement(document.querySelector('.box6'), {
|
|
height: 196,
|
|
left: 620,
|
|
top: 230
|
|
}, 200);
|
|
}
|
|
|
|
}
|
|
if (index == 5) {
|
|
const box5 = document.querySelector('.box5');
|
|
//获取当前鼠标位置
|
|
const leftValue = parseFloat(
|
|
window.getComputedStyle(box5).left ||
|
|
box5.style.left ||
|
|
box5.offsetLeft
|
|
);
|
|
console.log(leftValue);
|
|
if (leftValue == 310) {
|
|
|
|
animateElement(document.querySelector('.box1'), {
|
|
height: 196,
|
|
left: 0,
|
|
top: 230
|
|
}, 200);
|
|
animateElement(document.querySelector('.box2'), {
|
|
height: 196,
|
|
left: 0,
|
|
top: 0
|
|
}, 200);
|
|
animateElement(document.querySelector('.box5'), {
|
|
height: 428,
|
|
left: 310,
|
|
top: 0
|
|
}, 200);
|
|
} else {
|
|
animateElement(document.querySelector('.box1'), {
|
|
height: 196,
|
|
left: 310,
|
|
top: 0
|
|
}, 200);
|
|
animateElement(document.querySelector('.box2'), {
|
|
height: 196,
|
|
left: 310,
|
|
top: 230
|
|
}, 200);
|
|
animateElement(document.querySelector('.box5'), {
|
|
height: 428,
|
|
left: 0,
|
|
top: 0
|
|
}, 200);
|
|
}
|
|
|
|
}
|
|
if (index == 3) {
|
|
animateElement(document.querySelector('.box1'), {
|
|
height: 196,
|
|
left: 0,
|
|
top: 0
|
|
}, 200);
|
|
animateElement(document.querySelector('.box2'), {
|
|
height: 196,
|
|
left: 310,
|
|
top: 0
|
|
}, 200);
|
|
animateElement(document.querySelector('.box3'), {
|
|
height: 428,
|
|
left: 620,
|
|
top: 0
|
|
}, 200);
|
|
animateElement(document.querySelector('.box4'), {
|
|
height: 196,
|
|
left: 930,
|
|
top: 0
|
|
}, 200);
|
|
animateElement(document.querySelector('.box5'), {
|
|
height: 196,
|
|
left: 0,
|
|
top: 230
|
|
}, 200);
|
|
animateElement(document.querySelector('.box6'), {
|
|
height: 196,
|
|
left: 310,
|
|
top: 230
|
|
}, 200);
|
|
animateElement(document.querySelector('.box7'), {
|
|
height: 196,
|
|
left: 930,
|
|
top: 230
|
|
}, 200);
|
|
}
|
|
if (index == 6) {
|
|
const box6 = document.querySelector('.box6');
|
|
//获取当前鼠标位置
|
|
const leftValue = parseFloat(
|
|
window.getComputedStyle(box6).left ||
|
|
box6.style.left ||
|
|
box6.offsetLeft
|
|
);
|
|
if (leftValue == 620) {
|
|
animateElement(document.querySelector('.box2'), {
|
|
height: 196,
|
|
left: 310,
|
|
top: 230
|
|
}, 200);
|
|
animateElement(document.querySelector('.box3'), {
|
|
height: 196,
|
|
left: 310,
|
|
top: 0
|
|
}, 200);
|
|
animateElement(document.querySelector('.box6'), {
|
|
height: 428,
|
|
left: 620,
|
|
top: 0
|
|
}, 200);
|
|
} else {
|
|
animateElement(document.querySelector('.box2'), {
|
|
height: 196,
|
|
left: 620,
|
|
top: 0
|
|
}, 200);
|
|
animateElement(document.querySelector('.box3'), {
|
|
height: 196,
|
|
left: 620,
|
|
top: 230
|
|
}, 200);
|
|
animateElement(document.querySelector('.box6'), {
|
|
height: 428,
|
|
left: 310,
|
|
top: 0
|
|
}, 200);
|
|
}
|
|
animateElement(document.querySelector('.box1'), {
|
|
height: 196,
|
|
left: 0,
|
|
top: 0
|
|
}, 200);
|
|
|
|
animateElement(document.querySelector('.box4'), {
|
|
height: 196,
|
|
left: 930,
|
|
top: 0
|
|
}, 200);
|
|
animateElement(document.querySelector('.box5'), {
|
|
height: 196,
|
|
left: 0,
|
|
top: 230
|
|
}, 200);
|
|
|
|
|
|
}
|
|
if (index == 4) {
|
|
const box4 = document.querySelector('.box4');
|
|
//获取当前鼠标位置
|
|
const leftValue = parseFloat(
|
|
window.getComputedStyle(box4).left ||
|
|
box4.style.left ||
|
|
box4.offsetLeft
|
|
);
|
|
console.log(leftValue);
|
|
if (leftValue == 930) {
|
|
animateElement(document.querySelector('.box4'), {
|
|
height: 428,
|
|
left: 930,
|
|
top: 0
|
|
}, 200);
|
|
animateElement(document.querySelector('.box7'), {
|
|
height: 192,
|
|
left: 620,
|
|
top: 230
|
|
}, 200);
|
|
}
|
|
animateElement(document.querySelector('.box1'), {
|
|
height: 196,
|
|
left: 0,
|
|
top: 0
|
|
}, 200);
|
|
animateElement(document.querySelector('.box2'), {
|
|
height: 196,
|
|
left: 310,
|
|
top: 0
|
|
}, 200);
|
|
animateElement(document.querySelector('.box3'), {
|
|
height: 196,
|
|
left: 620,
|
|
top: 0
|
|
}, 200);
|
|
animateElement(document.querySelector('.box5'), {
|
|
height: 196,
|
|
left: 0,
|
|
top: 230
|
|
}, 200);
|
|
animateElement(document.querySelector('.box6'), {
|
|
height: 192,
|
|
left: 310,
|
|
top: 230
|
|
}, 200);
|
|
|
|
}
|
|
if (index == 7) {
|
|
const box7 = document.querySelector('.box7');
|
|
//获取当前鼠标位置
|
|
const leftValue = parseFloat(
|
|
window.getComputedStyle(box7).left ||
|
|
box7.style.left ||
|
|
box7.offsetLeft
|
|
);
|
|
console.log(leftValue);
|
|
//在左侧
|
|
if (leftValue == 620) {
|
|
animateElement(document.querySelector('.box3'), {
|
|
height: 196,
|
|
left: 930,
|
|
top: 0
|
|
}, 100);
|
|
animateElement(document.querySelector('.box4'), {
|
|
height: 196,
|
|
left: 930,
|
|
top: 230
|
|
}, 100);
|
|
animateElement(document.querySelector('.box7'), {
|
|
height: 428,
|
|
left: 620,
|
|
top: 0
|
|
}, 100);
|
|
} else {
|
|
animateElement(document.querySelector('.box3'), {
|
|
height: 196,
|
|
left: 620,
|
|
top: 230
|
|
}, 100);
|
|
animateElement(document.querySelector('.box4'), {
|
|
height: 196,
|
|
left: 620,
|
|
top: 0
|
|
}, 100);
|
|
animateElement(document.querySelector('.box7'), {
|
|
height: 428,
|
|
left: 930,
|
|
top: 0
|
|
}, 100);
|
|
}
|
|
animateElement(document.querySelector('.box1'), {
|
|
height: 196,
|
|
left: 0,
|
|
top: 0
|
|
}, 100);
|
|
animateElement(document.querySelector('.box2'), {
|
|
height: 196,
|
|
left: 310,
|
|
top: 0
|
|
}, 100);
|
|
|
|
animateElement(document.querySelector('.box5'), {
|
|
height: 196,
|
|
left: 0,
|
|
top: 230
|
|
}, 100);
|
|
animateElement(document.querySelector('.box6'), {
|
|
height: 192,
|
|
left: 310,
|
|
top: 230
|
|
}, 100);
|
|
|
|
}
|
|
}
|
|
|
|
|
|
const animateElement = (element, target, duration) => {
|
|
let start = null;
|
|
const initialStyle = {
|
|
width: parseFloat(getComputedStyle(element).width),
|
|
height: parseFloat(getComputedStyle(element).height),
|
|
left: parseFloat(getComputedStyle(element).left),
|
|
top: parseFloat(getComputedStyle(element).top)
|
|
};
|
|
// 立即停止当前动画
|
|
if (element.animationFrame) cancelAnimationFrame(element.animationFrame);
|
|
|
|
const step = (timestamp) => {
|
|
if (!start) start = timestamp;
|
|
const progress = timestamp - start;
|
|
const ratio = Math.min(progress / duration, 1);
|
|
|
|
// 实时更新所有属性
|
|
element.style.width = (initialStyle.width + (target.width - initialStyle.width) * ratio) + 'px';
|
|
element.style.height = (initialStyle.height + (target.height - initialStyle.height) * ratio) + 'px';
|
|
element.style.left = (initialStyle.left + (target.left - initialStyle.left) * ratio) + 'px';
|
|
element.style.top = (initialStyle.top + (target.top - initialStyle.top) * ratio) + 'px';
|
|
|
|
if (progress < duration) {
|
|
element.animationFrame = requestAnimationFrame(step);
|
|
} else {
|
|
// 确保最终值精确
|
|
element.style.width = target.width + 'px';
|
|
element.style.height = target.height + 'px';
|
|
element.style.left = target.left + 'px';
|
|
element.style.top = target.top + 'px';
|
|
}
|
|
}
|
|
|
|
element.animationFrame = requestAnimationFrame(step);
|
|
|
|
}
|
|
|
|
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',
|
|
},
|
|
}
|
|
|
|
// 新闻数据
|
|
onMounted(() => {
|
|
nextTick(() => {
|
|
animate()
|
|
})
|
|
})
|
|
const animate = () => {
|
|
const sr = ScrollReveal();
|
|
sr.reveal('.service-1', {
|
|
origin: "bottom",
|
|
distance: "50px",
|
|
duration: 800,
|
|
delay: 100,
|
|
opacity: 0,
|
|
scale: 0.9,
|
|
reset: true,
|
|
useDelay: 30,
|
|
mobile: true,
|
|
})
|
|
sr.reveal('.service-01', {
|
|
origin: "right",
|
|
distance: "550px",
|
|
duration: 800,
|
|
delay: 100,
|
|
opacity: 0,
|
|
scale: 0.9,
|
|
reset: true,
|
|
useDelay: 130,
|
|
mobile: true,
|
|
})
|
|
sr.reveal('.reveal-left', {
|
|
origin: "left",
|
|
distance: "50px",
|
|
duration: 800,
|
|
delay: 100,
|
|
opacity: 0,
|
|
scale: 0.9,
|
|
reset: true,
|
|
useDelay: 500,
|
|
mobile: true,
|
|
})
|
|
sr.reveal('.service-yw', {
|
|
origin: "left",
|
|
distance: "50px",
|
|
duration: 800,
|
|
easing: 'cubic-bezier(0.5, 0, 0, 1)', // 缓动函数
|
|
delay: 100,
|
|
opacity: 0,
|
|
scale: 0.9,
|
|
reset: true,
|
|
useDelay: 500,
|
|
mobile: true,
|
|
})
|
|
sr.reveal('.service-wl-a', {
|
|
origin: "left",
|
|
distance: "50px",
|
|
duration: 800,
|
|
delay: 200,
|
|
opacity: 0,
|
|
scale: 0.9,
|
|
reset: true,
|
|
mobile: true,
|
|
})
|
|
sr.reveal('.service-wl-b', {
|
|
origin: "left",
|
|
distance: "50px",
|
|
duration: 800,
|
|
delay: 300,
|
|
opacity: 0,
|
|
scale: 0.9,
|
|
reset: true,
|
|
mobile: true,
|
|
})
|
|
//service-item
|
|
sr.reveal('.service-item', {
|
|
duration: 800,
|
|
delay: 300,
|
|
opacity: 0,
|
|
scale: 0.5,
|
|
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()
|
|
|
|
},
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/assets/animate/animate.min.css";
|
|
@import "@/assets/index.css";
|
|
|
|
: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;
|
|
}
|
|
|
|
.service_023 {
|
|
background: url(/public/img/service_023.png) no-repeat center center;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: 100%;
|
|
height: 645px;
|
|
padding-top: 80px;
|
|
z-index: 30;
|
|
}
|
|
|
|
.service_033 {
|
|
background: url(/public/img/service_033.png) no-repeat center center;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: 100%;
|
|
height: 800px;
|
|
}
|
|
|
|
.service_bottom {
|
|
background: url('public/img/service_048.png') no-repeat center center;
|
|
background-size: 100%;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.service_bottom_no {
|
|
background-color: #F8F8F8;
|
|
|
|
}
|
|
|
|
.service_051 {
|
|
background: url('public/img/service_051.png') no-repeat center center;
|
|
background-size: 100%;
|
|
color: #ffffff !important;
|
|
height: 640px;
|
|
}
|
|
|
|
.service-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
/* 强制固定 3 列 */
|
|
gap: 20px;
|
|
max-width: 715px;
|
|
margin: 80px 0px 0px 250px;
|
|
}
|
|
|
|
.service-item {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 225px;
|
|
padding: 20px;
|
|
border: 1px solid #FFFFFF;
|
|
box-sizing: border-box;
|
|
/* 确保宽度计算包含边框 */
|
|
justify-self: start;
|
|
cursor: pointer;
|
|
/* 强制每个单元格左对齐 */
|
|
}
|
|
|
|
.service-item:hover {
|
|
background-color: #4A4C5F;
|
|
}
|
|
|
|
.service-wl {
|
|
position: relative;
|
|
width: 380px;
|
|
height: 236px;
|
|
transition: all 0.3s ease;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.service-wl:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.service-yw {
|
|
position: relative;
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
border: 2px solid transparent;
|
|
border-radius: 12px;
|
|
background: linear-gradient(45deg, #4D8FFF, #87CEFA) border-box;
|
|
-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
|
|
-webkit-mask-composite: destination-out;
|
|
mask-composite: exclude;
|
|
transform: scale(0.95);
|
|
opacity: 0;
|
|
transition: all 0.3s ease;
|
|
pointer-events: none;
|
|
}
|
|
|
|
&:hover {
|
|
transform: translateY(-5px);
|
|
|
|
&::before {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.service_top1 {
|
|
font-size: 24px;
|
|
padding-top: 30px;
|
|
z-index: 30;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-around;
|
|
width: 100%;
|
|
}
|
|
|
|
.service_top1_width {
|
|
width: 30%;
|
|
}
|
|
|
|
.service_bottom_01 {
|
|
margin: 0 auto;
|
|
width: 62%;
|
|
position: relative;
|
|
margin-top: 30px
|
|
}
|
|
|
|
.service-02 {
|
|
text-align: center;
|
|
padding-top: 30px;
|
|
z-index: 30;
|
|
color: #ffffff;
|
|
}
|
|
.service_center_02{
|
|
width: 30%;
|
|
}
|
|
@media (max-width: 1440px) {
|
|
.service_center_02{
|
|
width: 40%;
|
|
}
|
|
.service_top1 {
|
|
padding-top: 16px;
|
|
}
|
|
|
|
.service_top1_width {
|
|
width: 40%;
|
|
}
|
|
|
|
.service_023 {
|
|
height: 485px;
|
|
padding-top: 0px;
|
|
}
|
|
|
|
.service_bottom_01 {
|
|
width: 84%;
|
|
}
|
|
|
|
.service_051 {
|
|
height: 480px;
|
|
}
|
|
|
|
.service-container {
|
|
margin: 30px 0px 0px 140px;
|
|
}
|
|
.service-item{
|
|
padding: 14px;
|
|
}
|
|
}
|
|
.service_center_01s{
|
|
background: url('/public/img/content_top.png') 100% no-repeat;
|
|
width: 380px;
|
|
height: 196px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: start;
|
|
padding-left: 30px;
|
|
.service_center_01s_title{
|
|
margin-top: 30px;
|
|
width: 180px;
|
|
height: 18px;
|
|
font-family: Source Han Sans, Source Han Sans;
|
|
font-weight: 700;
|
|
font-size: 18px;
|
|
color: #FC7428;
|
|
line-height: 18px;
|
|
text-align: left;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.service_center_01s_text{
|
|
margin-top: 20px;
|
|
width: 325px;
|
|
height: 20px;
|
|
font-family: Source Han Sans, Source Han Sans;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
color: #768597;
|
|
line-height: 20px;
|
|
text-align: left;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
}
|
|
.btn_lx{
|
|
margin-top: 40px;
|
|
width: 90px;
|
|
height: 32px;
|
|
background: linear-gradient( 270deg, #FC7428 0%, #FFA06B 100%);
|
|
border-radius: 116px 116px 116px 116px;
|
|
font-family: Source Han Sans, Source Han Sans;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
color: #FFFFFF;
|
|
line-height: 32px;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.more_bot{
|
|
height: 16px;
|
|
font-family: Microsoft YaHei UI, Microsoft YaHei UI;
|
|
font-weight: 400;
|
|
font-size: 16px;
|
|
color: #FC772D;
|
|
line-height: 16px;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.video_platform{
|
|
width: 179px;
|
|
height: 48px;
|
|
background: url(public/img/video.png) 100% no-repeat;
|
|
line-height: 44px;
|
|
font-family: Source Han Sans, Source Han Sans;
|
|
font-weight: 700;
|
|
font-size: 18px;
|
|
color: #FC7428;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.video_wechat{
|
|
width: 185px;
|
|
height: 52px;
|
|
background: url(public/img/wechat1.png) 100% no-repeat;
|
|
line-height: 46px;
|
|
font-family: Source Han Sans, Source Han Sans;
|
|
font-weight: 700;
|
|
font-size: 18px;
|
|
color: #FFFFFF;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.bottom-3s{
|
|
width: 100%;
|
|
.mediat1{
|
|
width: 272px;
|
|
height: 49px;
|
|
font-family: Source Han Sans, Source Han Sans;
|
|
font-weight: 700;
|
|
font-size: 34px;
|
|
color: #222222;
|
|
line-height: 49px;
|
|
text-align: left;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
}
|
|
.mediat2{
|
|
margin-top: 20px;
|
|
width: 272px;
|
|
height: 16px;
|
|
font-family: MicrosoftYaHeiUI, MicrosoftYaHeiUI;
|
|
font-weight: 400;
|
|
font-size: 16px;
|
|
color: #768597;
|
|
line-height: 16px;
|
|
text-align: left;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
}
|
|
.mediat3{
|
|
margin-top: 30px;
|
|
width: 560px;
|
|
height: 40px;
|
|
font-family: Source Han Sans, Source Han Sans;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
color: #3D3D3D;
|
|
line-height: 20px;
|
|
text-align: left;
|
|
font-style: normal;
|
|
text-transform: none;
|
|
img{
|
|
margin-right: 30px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|