榆钱落尽槿花稀
2052b40fbc
- 新增`useCdn` composable，用于全局CDN URL管理 - 在`nuxt.config.ts`中配置CDN域名 - 更新图片资源路径，使用CDN URL加载 - 优化页面样式，统一使用SCSS文件 - 删除冗余组件`CdnImageExample.vue` -头部动效增加 -增加返回顶部按钮
737 lines
24 KiB
Vue
737 lines
24 KiB
Vue
<template>
|
||
<div style="width: 100%;overflow: hidden;">
|
||
<!-- 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/services1.png`" style="width: 100%;">
|
||
</swiper-slide>
|
||
<swiper-slide>
|
||
<img :src="`${cdnUrl}/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="`${cdnUrl}/img/left.png" alt="">
|
||
</div>
|
||
<div style="margin: 0px 20px;">
|
||
<img :src="`${cdnUrl}/img/morse.png" alt="">
|
||
</div>
|
||
<div>
|
||
<img :src="`${cdnUrl}/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="`${cdnUrl}/img/service_01s.png`" style="width: 100%;position: absolute;top: -30px;z-index: 10;">
|
||
<div class="service_top1">
|
||
<div style="cursor: pointer;width: 50%;text-align: center;">
|
||
<div style="color: #FC7428;margin-bottom: 20px;">内容创作与运营</div>
|
||
<div style="background-color: #FC7428;width:10%;height: 8px;margin: 0 auto;"></div>
|
||
</div>
|
||
<NuxtLink to="/proServices/" style="cursor: pointer;width: 50%;text-align: center;">
|
||
<div >
|
||
专业技术服务
|
||
</div>
|
||
</NuxtLink>
|
||
</div>
|
||
<div class="service-01" style="text-align: center;padding-top: 70px;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: 40px;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="`${cdnUrl}/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="`${cdnUrl}/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="`${cdnUrl}/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="`${cdnUrl}/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 @click="openType(1)" :class="typeIndex == 1 ? 'video_wechat' : 'video_platform'">
|
||
<img v-if="typeIndex == 1" :src="`${cdnUrl}/img/con_1.png`" alt=""
|
||
style="margin-right: 10px;height: 24px;width: 24px;">
|
||
<img v-else :src="`${cdnUrl}/img/mp4_video.png`" alt=""
|
||
style="margin-right: 10px;height: 24px;width: 24px;">
|
||
视频平台
|
||
</div>
|
||
<div @click="openType(2)" :class="typeIndex == 2 ? 'video_wechat' : 'video_platform'">
|
||
<img v-if="typeIndex == 1" :src="`${cdnUrl}/img/con_2.png`"
|
||
style="margin-right: 10px;height: 24px;width: 24px;">
|
||
<img v-else :src="`${cdnUrl}/img/video_wechat.png`"
|
||
style="margin-right: 10px;height: 24px;width: 24px;">
|
||
微信账号
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
style="display: flex;flex-direction: row;align-items: center;justify-content: center;width: 100%;gap: 30px;margin-top: 40px;">
|
||
|
||
<div v-if="typeIndex == 2" @mouseenter="bgSet(index)" class="service-yw" style="position: relative;"
|
||
v-for="(item, index) in wchatList" :key="index">
|
||
<img :src="`/img/media/${index + 1}.png`" style="width:216px;">
|
||
<img v-if="!item.isShow" :src="`${cdnUrl}/img/media/buttom.png`"
|
||
style="width: 216px;position: absolute;bottom: 0px;">
|
||
<div v-if="!item.isShow" style="position: absolute;bottom: 0;color: #FFFFFF;padding: 15px;">
|
||
<div style="font-size: 17px;font-weight: 600;">{{ item.name }}</div>
|
||
<div style="font-size: 12px;font-weight: 400;">{{ item.desc }}</div>
|
||
</div>
|
||
<div v-if="item.isShow">
|
||
<div
|
||
style="position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;background: rgba(252, 116, 40, 0.9);">
|
||
<div
|
||
style="width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;">
|
||
<div style="width: 100%;text-align: center;padding: 15px;color: #ffffff;">
|
||
<div>
|
||
<img :src="`${cdnUrl}/img/media/a${index + 1}.png`"
|
||
style="width:90px;height: 90px;margin: 0 auto;">
|
||
</div>
|
||
<div style="font-size: 16px;font-weight: 600;margin-top: 10px;">{{ item.title }}
|
||
</div>
|
||
<div style="font-size: 12px;font-weight: 400;margin-top: 15px;">{{ item.content }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="typeIndex == 1" @mouseenter="bgSetVideo(index)" class="service-yw"
|
||
style="position: relative;" v-for="(item, index) in videoList" :key="index">
|
||
<img :src="`/img/media/b${index + 1}.png`" style="width:255px;">
|
||
<img v-if="!item.isShow" :src="`${cdnUrl}/img/media/buttom2.png`"
|
||
style="width: 255px;position: absolute;bottom: 0px;">
|
||
<div v-if="!item.isShow" style="position: absolute;bottom: 0;color: #FFFFFF;padding: 15px;">
|
||
<div style="font-size: 17px;font-weight: 600;">{{ item.name }}</div>
|
||
<div style="font-size: 12px;font-weight: 400;">{{ item.desc }}</div>
|
||
</div>
|
||
<div v-if="item.isShow">
|
||
<div
|
||
style="position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;background: rgba(252, 116, 40, 0.9);">
|
||
<div
|
||
style="width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;">
|
||
<div style="width: 100%;text-align: center;padding:0px 15px;color: #ffffff;">
|
||
<div>
|
||
<img :src="`${cdnUrl}/img/media/v${index + 1}.png`"
|
||
style="width:80px;height: 80px;margin: 0 auto;">
|
||
</div>
|
||
<div style="font-size: 16px;font-weight: 600;margin-top: 10px;">{{ item.title }}
|
||
</div>
|
||
<div style="font-size: 12px;font-weight: 400;margin-top: 15px;">{{ item.content }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="width: 100%;color: #FC7428;font-size: 18px;text-align: center;margin-top: 40px;">
|
||
全流程支持：脚本策划→专业拍摄→后期特效→精准投放→效果复盘</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="`${cdnUrl}/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="`${cdnUrl}/img/media/left1.png`" alt="">
|
||
创意驱动，精准执行，从构思到落地，打通线上线下资源，一站式策划沉浸式活动，引爆品牌传播声量。
|
||
</div>
|
||
<div class="flex justify-center mediat3">
|
||
<img :src="`${cdnUrl}/img/media/left2.png`" alt="">
|
||
线上活动：聚焦行业热点打造爆款话题 （话题营销+直播连麦+裂变传播）助力品牌实现社交裂变传播，激活私域流量池。
|
||
</div>
|
||
<div class="flex justify-center mediat3">
|
||
<img :src="`${cdnUrl}/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="`${cdnUrl}/img/media/right1.png`" alt="">
|
||
整合全网权威渠道，依托海量优质媒体资源，定制新闻发布策略，以专业视角与高效执行，让您的新闻迅速抢占舆论高地，第一时间触达目标受众。
|
||
</div>
|
||
<div class="flex justify-center mediat3">
|
||
<img :src="`${cdnUrl}/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="`${cdnUrl}/img/media/rightpeo.png`" alt="">
|
||
</div>
|
||
</div>
|
||
<div class="flex" style="padding-top: 50px;z-index: 30;background-color: #ffffff;height: 592px;width: 100%;">
|
||
<div style="background: url(/img/media/botleft.png) 100% 100% no-repeat;width: 50%;">
|
||
<div style="display: flex;align-items: center;justify-content: right;height: 592px;color: #FFFFFF;">
|
||
<div style="padding-right:200px;">
|
||
<div style="font-size: 34px;font-weight: 700;">IP孵化与达人合作</div>
|
||
<div style="font-size: 16px;font-weight: 400;margin-top: 30px;">多维度矩阵覆盖，赋能品牌增长新势能</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="background: url(/img/media/botright.png)100% 100% no-repeat;width: 50%;">
|
||
<div
|
||
style="flex-direction:column;display: flex;justify-content: center;;height: 542px;color: #FFFFFF;padding-left: 70px;">
|
||
<div>
|
||
<div style="display: flex;align-items: center;">
|
||
<img :src="`${cdnUrl}/img/media/left.png`" style="width: 32px;">
|
||
<div style="font-size: 18px;font-weight: 700;padding-left: 25px;">从0到1打造现象级IP</div>
|
||
</div>
|
||
<div style="color: #FFFFFF;padding:10px 0px 0px 57px;">
|
||
<div style="font-size: 14px;font-weight: 400;">联动本地头部达人精准引爆同城流量，合作ROI高达1:8</div>
|
||
</div>
|
||
</div>
|
||
<div style="background-color: rgba(216, 216, 216, 0.5);width: 60%;height: 1px;margin: 50px 0px;">
|
||
</div>
|
||
<div>
|
||
<div style="display: flex;align-items: center;">
|
||
<img :src="`${cdnUrl}/img/media/left.png`" style="width: 32px;">
|
||
<div style="font-size: 18px;font-weight: 700;padding-left: 25px;">IP打造</div>
|
||
</div>
|
||
<div style="color: #FFFFFF;padding:10px 0px 0px 57px;">
|
||
<div style="font-size: 14px;font-weight: 400;">从人设定位到变现全链路服务</div>
|
||
</div>
|
||
</div>
|
||
<div style="background-color: rgba(216, 216, 216, 0.5);width: 60%;height: 1px;margin: 50px 0px;">
|
||
</div>
|
||
<div>
|
||
<div style="display: flex;align-items: center;">
|
||
<img :src="`${cdnUrl}/img/media/left.png`" style="width: 32px;">
|
||
<div style="font-size: 18px;font-weight: 700;padding-left: 25px;">达人资源</div>
|
||
</div>
|
||
<div style="color: #FFFFFF;padding:10px 0px 0px 57px;">
|
||
<div style="font-size: 14px;font-weight: 400;">深度合作10万+粉丝本地达人500+，精准撬动同城流量</div>
|
||
</div>
|
||
</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()
|
||
const cdnUrl = useCdn()
|
||
const wchatList = ref([
|
||
{ name: '微信底部菜单搭建', desc: '让底部菜单成为品牌的亮眼名片', title: '汝南县妇幼保健院', content: '将deep seek AI问诊功能搭建在医院底部菜单，提高医院就诊效率50%。', isShow: false },
|
||
{ name: '内容采编', desc: '专业采编团队深挖品牌亮点', title: '河南科技大学第一附属医院', content: '《女博士养成记》原创文章平均每篇阅读量破5万+，整个系列阅读量破30万+。', isShow: false },
|
||
{ name: '图文设计', desc: '专业设计师团队紧扣品牌定位', title: '商城县人民医院', content: '策划护士节系列参赛海报《商城白衣天使真“中”》，荣获*等奖', isShow: false },
|
||
{ name: '活动策划', desc: '从创意构思到落地执行', title: '共青团洛阳市委', content: '[青春登场 只看洛阳]活动进行线上推广策划，共吸引1500+人次在线上小程序 投稿，共收集3000余副作品', isShow: false },
|
||
{ name: '整案运营', desc: '助力品牌在微信生态强势崛起', title: '中集车辆搅拌车业务集团', content: '进行公众号整案运营，均篇播放量达3000+，后台咨询量月均50+', isShow: false }
|
||
])
|
||
const videoList = ref([
|
||
{ name: '短视频', desc: '量身定制高端品牌视频矩阵账号', title: '洛阳市妇幼保健院', content: '洛阳市妇幼保健院账号，原创爆款率达65%，单条最高播放1700万，一月涨粉4万+', isShow: false },
|
||
{ name: '系列视频', desc: '打造短剧化、沉浸式系列内容视频', title: '《姗姗的孕期日记》', content: '为洛阳市妇幼保健院打造原创系列短剧《姗姗的孕期日记》，一经上线便引爆本土目标人群，系列播放量达100W+为医院带来正向口碑', isShow: false },
|
||
{ name: '宣传片/专题片', desc: '专业团队操刀，深入挖掘品牌精髓', title: '河南科技大学第一附属医院', content: '宣传片御用团队，策划制作医院向党的百年华诞献礼宣传片，在各大门户网站争相传播推广。', isShow: false },
|
||
{ name: '工业视频', desc: '实现流量与订单双丰收', title: '河南某机械有限公司', content: '一个月播放量达70W+，在抖音成交第一单高达9万＋，阅读涨粉5000+。', isShow: false },
|
||
])
|
||
|
||
const bgSet = (index: number) => {
|
||
wchatList.value.forEach((item, index) => {
|
||
item.isShow = false;
|
||
})
|
||
wchatList.value[index].isShow = true;
|
||
}
|
||
const bgSetVideo = (index: number) => {
|
||
videoList.value.forEach((item, index) => {
|
||
item.isShow = false;
|
||
})
|
||
videoList.value[index].isShow = true;
|
||
}
|
||
|
||
const typeIndex = ref(1);
|
||
const openType = (index: number) => {
|
||
typeIndex.value = index;
|
||
}
|
||
|
||
const numberAnimationInstRef = ref()
|
||
const numberAnimationInstRefKH = ref()
|
||
const numberAnimationInstRefJS = ref()
|
||
|
||
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(() => {
|
||
animate()
|
||
})
|
||
const animate = () => {
|
||
const sr = ScrollReveal();
|
||
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('.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('.numberTopBox', {
|
||
origin: "top",
|
||
distance: "200px",
|
||
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.scss";
|
||
|
||
: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: var(--service_023) no-repeat center center;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-size: 100%;
|
||
height: 645px;
|
||
padding-top: 80px;
|
||
z-index: 30;
|
||
}
|
||
|
||
.service_033 {
|
||
background: var(--service_033) no-repeat center center;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-size: 100%;
|
||
height: 800px;
|
||
}
|
||
|
||
.service_bottom {
|
||
background: var(--service_048) no-repeat center center;
|
||
background-size: 100%;
|
||
color: #ffffff !important;
|
||
}
|
||
|
||
.service_bottom_no {
|
||
background-color: #F8F8F8;
|
||
|
||
}
|
||
|
||
.service_051 {
|
||
background: var(--service_051) 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-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;
|
||
|
||
&: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_center_01s {
|
||
background: var(--content_top) 100% no-repeat;
|
||
width: 380px;
|
||
height: 196px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: start;
|
||
padding-left: 30px;
|
||
transition: all 0.3s ease;
|
||
&:hover {
|
||
transform: scale(1.05);
|
||
cursor: pointer;
|
||
}
|
||
.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;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
|
||
.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: var(--video) 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;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.video_wechat {
|
||
width: 185px;
|
||
height: 52px;
|
||
background: var(--wechat1) 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;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.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: 40px;
|
||
line-height: 24px;
|
||
width: 560px;
|
||
height: 40px;
|
||
font-family: Source Han Sans, Source Han Sans;
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #3D3D3D;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
align-items: center;
|
||
&:hover{
|
||
color: #FC7428;
|
||
cursor: pointer;
|
||
}
|
||
img {
|
||
margin-right: 30px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|