<template>
    <div style="width: 100%;overflow: hidden;">
        <!-- Swiper 容器 -->
        <div class="group_666" style="position: relative;height: 250px;">
            <swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
                <swiper-slide>
                    <img :src="`${cdnUrl}/img/services1.png`" style="width: 100%;height: 250px;object-fit: cover;">
                </swiper-slide>
                <swiper-slide>
                    <img :src="`${cdnUrl}/img/services1.png`" style="width: 100%;height: 250px;object-fit: cover;">
                </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: 539px;">
            <img :src="`${cdnUrl}/img/service_01s.png`" style="width: 100%;position: absolute;top: -26px;z-index: 10;">
            <div class="service_top1">
                <div style="cursor: pointer;width: 50%;text-align: center;">
                    <div style="color: #FC7428;margin-bottom: 10px;">内容创作与运营</div>
                    <div style="background-color: #FC7428;width:20%;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="z-index: 30;padding-top: 30px;">
                <swiper ref="swiper_exp" :slidesPerView="1" loop :autoplay="false" :modules="modules"
                    :watchSlidesProgress="true" @swiper="onSwiperNews">
                    <swiper-slide>
                        <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>
                    </swiper-slide>
                    <swiper-slide>
                        <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>
                    </swiper-slide>
                    <swiper-slide>
                        <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>
                    </swiper-slide>
                </swiper>
                <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 0px 0px;z-index: 30;background: url(/img/content_con.png) no-repeat;background-size: 100%;">
            <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="padding: 15px;flex-wrap: wrap;display: flex;flex-direction: row;align-items: center;width: 100%;gap: 30px;margin-top: 20px;">
                <div v-if="typeIndex == 2" @mouseenter="bgSet(index)" class="service-yw" style="position: relative;flex: 0 1 calc(50% - 15px);"
                    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: 16px;font-weight: 600;">{{ item.name }}</div>
                        <div style="font-size: 12px;font-weight: 400;margin-top: 5px;">{{ 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:70px;height: 70px;margin: 0 auto;">
                                    </div>
                                    <div style="font-size: 16px;font-weight: 600;margin-top: 10px;">{{ item.title }}
                                    </div>
                                    <div class="three-line-ellipsis" 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;margin: 0 auto;" v-for="(item, index) in videoList" :key="index">
                    <img :src="`/img/media/b${index + 1}.png`" style="width:160px;">
                    <img v-if="!item.isShow" :src="`${cdnUrl}/img/media/buttom2.png`"
                        style="width: 160px;position: absolute;bottom: 0px;">
                    <div v-if="!item.isShow" style="position: absolute;bottom: 0;color: #FFFFFF;padding: 10px;">
                        <div style="font-size: 15px;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 5px;color: #ffffff;">
                                    <div>
                                        <img :src="`${cdnUrl}/img/media/v${index + 1}.png`"
                                            style="width:60px;height: 60px;margin: 0 auto;">
                                    </div>
                                    <div style="font-size: 14px;font-weight: 600;margin-top: 5px;">{{ item.title }}</div>
                                    <div class="three-line-ellipsis" style="font-size: 12px;font-weight: 400;margin-top: 5px;">{{ item.content }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="width: 100%;color: #FC7428;font-size: 18px;text-align: center;padding: 20px;">
                全流程支持：脚本策划→专业拍摄→后期特效→精准投放→效果复盘</div>
        </div>

        <div class="flex justify-center align-center bottom-3s"
            style="padding-top: 50px;z-index: 30;background-color: #f8f8f8;height: 559px;flex-wrap: wrap;">
            <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: 100%;height: 1px;background: #EEEEEE;margin-top: 30px;"></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: 18px;
    padding-top: 10px;
    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%;
}


.service_center_01s {
    background: var(--content_top) no-repeat;
    background-size: 100%;
    width: 360px;
    height: 196px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    padding-left: 17px;
    margin: 0 auto;

    .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: 100%;
        height: 49px;
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 700;
        font-size: 30px;
        color: #222222;
        line-height: 49px;
        text-align: center;
        font-style: normal;
        text-transform: none;

    }

    .mediat2 {
        margin-top: 20px;
        width: 100%;
        height: 16px;
        font-family: MicrosoftYaHeiUI, MicrosoftYaHeiUI;
        font-weight: 400;
        font-size: 16px;
        color: #768597;
        line-height: 16px;
        text-align: center;
        font-style: normal;
        text-transform: none;
    }

    .mediat3 {
        margin-top: 40px;
        line-height: 24px;
        width: 100%;
        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>
