lingrui-web/pages/proServices_con.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="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: 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="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 @click="openType(1)" :class="typeIndex == 1 ? 'video_wechat' : 'video_platform'">
						<img v-if="typeIndex == 1" src="public/img/con_1.png" alt=""
							style="margin-right: 10px;height: 24px;width: 24px;">
						<img v-else src="public/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="public/img/con_2.png"
							style="margin-right: 10px;height: 24px;width: 24px;">
						<img v-else src="public/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="public/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="`/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="public/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="`/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="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: 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="public/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="public/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="public/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 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.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-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: 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;
		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: 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;
	cursor: pointer;
}

.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;
	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;
		img {
			margin-right: 30px;
		}
	}
}
</style>