榆钱落尽槿花稀
2052b40fbc
- 新增`useCdn` composable，用于全局CDN URL管理 - 在`nuxt.config.ts`中配置CDN域名 - 更新图片资源路径，使用CDN URL加载 - 优化页面样式，统一使用SCSS文件 - 删除冗余组件`CdnImageExample.vue` -头部动效增加 -增加返回顶部按钮
843 lines
20 KiB
Vue
843 lines
20 KiB
Vue
<template>
|
||
<div style="width: 100%;">
|
||
<!-- Swiper 容器 -->
|
||
<div class="group_666" style="position: relative;">
|
||
<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
|
||
<swiper-slide>
|
||
<img src="public/img/banner.png" style="width: 100%;">
|
||
</swiper-slide>
|
||
<swiper-slide>
|
||
<img src="public/img/banner.png" style="width: 100%;">
|
||
</swiper-slide>
|
||
</swiper>
|
||
<div class="nav-container">
|
||
<div class="flex-row justify-center align-center">
|
||
<div>
|
||
<img src="public/img/left.png" alt="" class="nav-arrow">
|
||
</div>
|
||
<div style="margin: 0px 20px;">
|
||
<img src="public/img/morse.png" alt="" class="logo-img">
|
||
</div>
|
||
<div>
|
||
<img src="public/img/right.png" alt="" class="nav-arrow">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="group_2 flex-col">
|
||
<div class="box_2 flex-col">
|
||
<div class="group_3 flex-col justify-center align-center">
|
||
<div class="group_4 flex-col leftBox">
|
||
<div class="text-group_1 flex-col justify-between">
|
||
<span class="text_7">灵睿的互联网之道</span>
|
||
<span class="text_8">
|
||
The Way of the Internet
|
||
</span>
|
||
</div>
|
||
<div class="text-wrapper_1 flex-row justify-center align-center" style="gap: 20px;">
|
||
<div class="text_9">公司简介</div>
|
||
<div class="text_10">运营方法论</div>
|
||
<div class="text_11">互联网营销</div>
|
||
</div>
|
||
<div class="box_3 flex-col">
|
||
<div class="box_4 flex-col"></div>
|
||
</div>
|
||
<span class="text_12">
|
||
灵睿是一家专业提供互联网技术及应用化服务的科技企业。公司成立于2006年，总部位于十三朝古都洛阳，在郑州、洛阳、许昌三地设立四家公司，是洛阳及河南建立较早、实力较强、规模较大的互联网骨干技术服务企业。公司致力于互联网+工业、互联网+医疗、互联网+教育、互联网+旅游、互联网+农业五个方面的发展。目前为近三千家企业提供互联网服务，并为上百家国有大型企业以及党政部门、事业机关单位提供互联网应用化服务。
|
||
</span>
|
||
<div class="text-wrapper_2 flex-col">
|
||
<span class="text_13">查看全部</span>
|
||
</div>
|
||
</div>
|
||
<div class="group_5 flex-col justify-center align-center rightBox">
|
||
<div class="section_1 flex-col">
|
||
<div class="image-wrapper_2 flex-col">
|
||
<img class="image_5" referrerpolicy="no-referrer" src="public/img/bf.png" />
|
||
</div>
|
||
</div>
|
||
<div class="orange-bg"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="group_2 flex-col">
|
||
<div class="box_5 flex-col">
|
||
<span class="text_14 topBox">我们的业务</span>
|
||
<span class="text_15 topBox">
|
||
The Way of the Internet
|
||
</span>
|
||
<div class="flex-col justify-center align-center business-container">
|
||
<!-- <div class="leftBox business-image">
|
||
<img class="image_6" referrerpolicy="no-referrer" src="public/img/t3.png" />
|
||
</div> -->
|
||
<div class="rightBox section_2 flex-col">
|
||
<div class="group_6 flex-col">
|
||
<div class="box_6 flex-row align-center">
|
||
<div class="image-wrapper_3 flex-col align-center">
|
||
<img class="label_1" referrerpolicy="no-referrer" src="public/img/u1.png" />
|
||
</div>
|
||
<div class="text-group_2 flex-col justify-between">
|
||
<span class="text_17">
|
||
专业网站建设与企业官网设计定制服务
|
||
</span>
|
||
<span class="text_16">
|
||
助力企业数字化转型升级，PC端/移动端/H5提供一站式网站开发、搭建
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="group_7 flex-row">
|
||
<div class="image-wrapper_5 flex-col align-center">
|
||
<img class="label_1" referrerpolicy="no-referrer" src="public/img/r4.png" />
|
||
</div>
|
||
<div class="text-group_2 flex-col justify-between">
|
||
<span class="text_17">企业数字化自媒体托管专家</span>
|
||
<span class="text_16">
|
||
业团队代运营+AI智能内容生成+多平台精准投放，助您专注核心业务
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="group_10 flex-col"></div>
|
||
<div class="group_7 flex-row">
|
||
<div class="image-wrapper_5 flex-col align-center">
|
||
<img class="label_1" referrerpolicy="no-referrer" src="public/img/r3.png" />
|
||
</div>
|
||
<div class="text-group_2 flex-col justify-between">
|
||
<span class="text_17">全流程抖音短视频制作服务</span>
|
||
<span class="text_16">
|
||
助您快速打造高播放量、高互动率的爆款短视频
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div class="group_12 flex-col"></div>
|
||
<div class="group_7 flex-row">
|
||
<div class="image-wrapper_5 flex-col align-center">
|
||
<img class="label_1" referrerpolicy="no-referrer" src="public/img/r2.png" />
|
||
</div>
|
||
<div class="text-group_2 flex-col justify-between">
|
||
<span class="text_17">全栈H5开发解决方案</span>
|
||
<span class="text_16">
|
||
基于HTML5/CSS3/JavaScript核心技术助力实现高转化率与沉浸式用户体验
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="box_7 flex-col">
|
||
<span class="text_24">行业案例</span>
|
||
<div class="group_14 flex-row justify-between align-center" style="flex-wrap: wrap;">
|
||
<div class="industry-tabs justify-center align-center " style="gap: 20px;">
|
||
<div class="text_25 active-tab">
|
||
<span>医疗</span>
|
||
<div class="tab-indicator"></div>
|
||
</div>
|
||
<div class="text_25">党政</div>
|
||
<div class="text_25">建筑</div>
|
||
<div class="text_25">物流</div>
|
||
<div class="text_25">教育</div>
|
||
<div class="text_25">文旅</div>
|
||
<div class="text_25">餐饮</div>
|
||
</div>
|
||
<div class="group_15" style="flex: 0 0 100%;"></div>
|
||
</div>
|
||
|
||
<div class="dswper">
|
||
<swiper ref="swiper_exp" :slidesPerView="1.2" loop :loopedSlides="3" :autoplay="false" centeredSlides
|
||
:modules="modules" :watchSlidesProgress="true" @swiper="onSwiperExp" effect="coverflow"
|
||
:breakpoints="swiperBreakpoints">
|
||
<swiper-slide>
|
||
<img src="public/img/home_al/op1.png" style="width: 100%;">
|
||
</swiper-slide>
|
||
<swiper-slide>
|
||
<img src="public/img/home_al/op1.png" style="width: 100%;">
|
||
</swiper-slide>
|
||
<swiper-slide>
|
||
<img src="public/img/home_al/op1.png" style="width: 100%;">
|
||
</swiper-slide>
|
||
<swiper-slide>
|
||
<img src="public/img/home_al/op1.png" style="width: 100%;">
|
||
</swiper-slide>
|
||
<swiper-slide>
|
||
<img src="public/img/home_al/op1.png" style="width: 100%;">
|
||
</swiper-slide>
|
||
</swiper>
|
||
<div class="dswper_left">
|
||
<img src="public/img/opl.png">
|
||
</div>
|
||
<div class="dswper_right">
|
||
<img src="public/img/opr.png">
|
||
</div>
|
||
<div class="flex-row justify-center align-center absolute w-full bottom-[-50px] pagination-dots">
|
||
<div class="dot active-dot"></div>
|
||
<div class="dot"></div>
|
||
<div class="dot"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="box_11 flex-col">
|
||
<div class="text-wrapper_10">
|
||
<span class="text_41">新闻动态</span>
|
||
</div>
|
||
<div class="text-wrapper_11">
|
||
<span class="text_42">Our Business </span>
|
||
</div>
|
||
<div class="news-container">
|
||
<img class="image_7 leftBox" referrerpolicy="no-referrer" src="public/img/news1.png" />
|
||
<div class="box_13 flex-col topBox">
|
||
<div class="text-group_6 flex-col justify-between">
|
||
<span class="text_43">
|
||
洛阳市郑州商会在洛阳灵睿网络技术有限...
|
||
</span>
|
||
<span class="paragraph_1">
|
||
为深入学习贯彻党的二十大精神，落实省、市委决策，
|
||
充分发挥民营企业的凝聚力、向心力和创造力，赴..
|
||
</span>
|
||
</div>
|
||
<div class="group_22 flex-row">
|
||
<div class="section_6 flex-col"></div>
|
||
<span class="text_44">行业动态</span>
|
||
<span class="text_45">2025-06-24</span>
|
||
</div>
|
||
</div>
|
||
<img class="image_8 rightBox" referrerpolicy="no-referrer" src="public/img/news2.png" />
|
||
|
||
<div class="group_23 flex-col leftBox">
|
||
<div class="text-group_7 flex-col justify-between">
|
||
<span class="text_46">
|
||
洛阳市郑州商会在洛阳灵睿网络技术有限...
|
||
</span>
|
||
<span class="paragraph_2">
|
||
为深入学习贯彻党的二十大精神，落实省、市委决策，
|
||
充分发挥民营企业的凝聚力、向心力和创造力，赴..
|
||
</span>
|
||
</div>
|
||
<div class="group_24 flex-row">
|
||
<div class="group_25 flex-col"></div>
|
||
<span class="text_47">行业动态</span>
|
||
<span class="text_48">2025-06-24</span>
|
||
</div>
|
||
</div>
|
||
<img class="image_9 bottomBox" referrerpolicy="no-referrer" src="public/img/news3.png" />
|
||
<div class="group_26 flex-col rightBox">
|
||
<div class="text-group_8 flex-col justify-between">
|
||
<span class="text_49">
|
||
洛阳市郑州商会在洛阳灵睿网络技术有限...
|
||
</span>
|
||
<span class="paragraph_3">
|
||
为深入学习贯彻党的二十大精神，落实省、市委决策，
|
||
充分发挥民营企业的凝聚力、向心力和创造力，赴..
|
||
</span>
|
||
</div>
|
||
<div class="box_15 flex-row">
|
||
<div class="group_27 flex-col"></div>
|
||
<span class="text_50">行业动态</span>
|
||
<span class="text_51">2025-06-24</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="box_16 flex-row">
|
||
<div class="text-wrapper_12 flex-col">
|
||
<span class="text_52">查看更多</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="box_17 flex-col" style="overflow: hidden;">
|
||
<span class="text_53">合作伙伴</span>
|
||
<span class="text_54">Our Business </span>
|
||
<div class="partner-stats flex-col justify-center numberTopBox">
|
||
<div class="stat-item">
|
||
<div class="text-group_9 flex-col justify-between">
|
||
<span class="text_55">
|
||
<n-number-animation :duration="5000" ref="numberAnimationInstRef" :active="false" :from="0"
|
||
:to="5000"></n-number-animation>+
|
||
</span>
|
||
<span class="text_56">
|
||
19年技术沉淀，只为提供更在专业的服务，行业解决方案
|
||
</span>
|
||
</div>
|
||
<span class="text_57">服务客户</span>
|
||
</div>
|
||
<div class="section_7 flex-col"></div>
|
||
|
||
<div class="stat-item">
|
||
<div class="text-group_10 flex-col justify-between">
|
||
<span class="text_58"><n-number-animation :duration="5000" ref="numberAnimationInstRefKH"
|
||
:active="false" :from="0" :to="19"></n-number-animation>+</span>
|
||
<span class="text_59">
|
||
19年技术沉淀，只为提供更在专业的服务，行业解决方案
|
||
</span>
|
||
</div>
|
||
<span class="text_60">技术沉淀</span>
|
||
</div>
|
||
<div class="section_8 flex-col"></div>
|
||
|
||
<div class="stat-item">
|
||
<div class="text-group_11 flex-col justify-between">
|
||
<span class="text_61"><n-number-animation :duration="5000" ref="numberAnimationInstRefJS"
|
||
:active="false" :from="0" :to="100"></n-number-animation>+</span>
|
||
<span class="text_62">
|
||
19年技术沉淀，只为提供更在专业的服务，行业解决方案
|
||
</span>
|
||
</div>
|
||
<span class="text_63">覆盖行业</span>
|
||
</div>
|
||
<div class="section_9 flex-col"></div>
|
||
|
||
<div class="stat-item">
|
||
<div class="text-group_12 flex-col justify-between">
|
||
<span class="text_64"><n-number-animation :duration="5000" ref="numberAnimationInstRefHY"
|
||
:active="false" :from="0" :to="30"></n-number-animation>+</span>
|
||
<span class="text_65">
|
||
19年技术沉淀，只为提供更在专业的服务，行业解决方案
|
||
</span>
|
||
</div>
|
||
<span class="text_66">技术团队</span>
|
||
</div>
|
||
</div>
|
||
<div class="group_29 partner-grid">
|
||
<div v-for="item in 18" class="">
|
||
<img class="image_11 topSj" referrerpolicy="no-referrer" src="public/img/q1.png" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { Swiper, SwiperSlide } from 'swiper/vue'
|
||
import { nextTick, ref } from 'vue'
|
||
import 'swiper/css'
|
||
import { Autoplay, Navigation, Pagination, Scrollbar, A11y, EffectCoverflow, EffectFade } from "swiper/modules";
|
||
import ScrollReveal from 'scrollreveal';
|
||
import { NNumberAnimation } from 'naive-ui'
|
||
let modules = [Autoplay, A11y, EffectCoverflow, EffectFade];
|
||
|
||
import "swiper/css";
|
||
import "swiper/css/navigation";
|
||
import "swiper/css/pagination";
|
||
import 'swiper/css/effect-coverflow';
|
||
import 'swiper/css/mousewheel'
|
||
import 'swiper/css/grid'
|
||
import 'swiper/css/effect-fade'
|
||
import 'swiper/css/autoplay'
|
||
import * as swiperAni from '@/assets/animate/animate.js'
|
||
import $api from '@/service/webRequest'
|
||
import { useI18n } from 'vue-i18n'
|
||
import { useStore } from '~/store'
|
||
const { locale } = useI18n()
|
||
|
||
let newsSwiper: any = null
|
||
const onSwiperNews = (swiper: any) => {
|
||
newsSwiper = swiper
|
||
}
|
||
const swiperOptionsNews = {
|
||
autoplay: {
|
||
delay: 5000,
|
||
disableOnInteraction: false,
|
||
},
|
||
direction: 'horizontal',
|
||
slidesPerView: 1,
|
||
speed: 500,
|
||
effect: 'fade',
|
||
loop: true,
|
||
modules: [EffectFade, Autoplay, Navigation],
|
||
navigation: {
|
||
nextEl: '#swipen_prev',
|
||
prevEl: '#swipen_next',
|
||
},
|
||
}
|
||
|
||
let vesSwiper: any = null
|
||
const onSwiperExp = (swiper: any) => {
|
||
vesSwiper = swiper
|
||
}
|
||
const swiper_exp = ref();
|
||
|
||
// 添加断点配置
|
||
const swiperBreakpoints = {
|
||
320: {
|
||
slidesPerView: 1.2,
|
||
spaceBetween: 10
|
||
},
|
||
768: {
|
||
slidesPerView: 2,
|
||
spaceBetween: 20
|
||
},
|
||
1024: {
|
||
slidesPerView: 3,
|
||
spaceBetween: 30
|
||
}
|
||
}
|
||
|
||
// 新闻数据
|
||
onMounted(() => {
|
||
nextTick(() => {
|
||
animate()
|
||
// 添加移动端检测
|
||
checkMobile()
|
||
})
|
||
})
|
||
|
||
// 检测移动设备并应用相应样式
|
||
const checkMobile = () => {
|
||
const isMobile = window.innerWidth <= 768
|
||
document.body.classList.toggle('is-mobile', isMobile)
|
||
|
||
// 监听窗口大小变化
|
||
window.addEventListener('resize', () => {
|
||
const isMobile = window.innerWidth <= 768
|
||
document.body.classList.toggle('is-mobile', isMobile)
|
||
})
|
||
}
|
||
|
||
const numberAnimationInstRef = ref()
|
||
const numberAnimationInstRefKH = ref()
|
||
const numberAnimationInstRefJS = ref()
|
||
const numberAnimationInstRefHY = ref()
|
||
const animate = () => {
|
||
const sr = ScrollReveal();
|
||
sr.reveal('.leftBox', {
|
||
origin: "left",
|
||
distance: "500px", // 减少移动设备上的距离
|
||
duration: 1000, // 减少动画时间
|
||
delay: 100,
|
||
opacity: 0,
|
||
scale: 0.9,
|
||
reset: true,
|
||
mobile: true,
|
||
})
|
||
sr.reveal('.rightBox', {
|
||
origin: "right",
|
||
distance: "500px", // 减少移动设备上的距离
|
||
duration: 1000, // 减少动画时间
|
||
delay: 100,
|
||
opacity: 0,
|
||
scale: 0.9,
|
||
reset: true,
|
||
mobile: true,
|
||
})
|
||
sr.reveal('.topBox', {
|
||
origin: "top",
|
||
distance: "500px", // 减少移动设备上的距离
|
||
duration: 1000, // 减少动画时间
|
||
delay: 100,
|
||
opacity: 0,
|
||
scale: 0.9,
|
||
reset: true,
|
||
mobile: true,
|
||
})
|
||
sr.reveal('.bottomBox', {
|
||
origin: "bottom",
|
||
distance: "500px", // 减少移动设备上的距离
|
||
duration: 1000, // 减少动画时间
|
||
delay: 100,
|
||
opacity: 0,
|
||
scale: 0.9,
|
||
reset: true,
|
||
mobile: true,
|
||
})
|
||
sr.reveal('.numberTopBox', {
|
||
origin: "top",
|
||
distance: "500px", // 减少移动设备上的距离
|
||
duration: 1000, // 减少动画时间
|
||
delay: 100,
|
||
opacity: 0,
|
||
scale: 0.9,
|
||
reset: true,
|
||
mobile: true,
|
||
beforeReveal: function (el: any) {
|
||
numberAnimationInstRef.value.play()
|
||
numberAnimationInstRefKH.value.play()
|
||
numberAnimationInstRefJS.value.play()
|
||
numberAnimationInstRefHY.value.play()
|
||
},
|
||
})
|
||
sr.reveal('.topSj', {
|
||
origin: "bottom",
|
||
distance: "500px", // 减少移动设备上的距离
|
||
duration: 1000, // 减少动画时间
|
||
delay: 5,
|
||
opacity: 0,
|
||
scale: 0.9,
|
||
reset: true,
|
||
mobile: true,
|
||
useDelay: 'always',
|
||
interval: 50,
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import "@/assets/animate/animate.min.css";
|
||
@import "@/assets/index.scss";
|
||
|
||
/* 移动端通用样式 */
|
||
body.is-mobile {
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 轮播图样式调整 */
|
||
:deep(.dswper .swiper-slide-next) {
|
||
transform: translate3d(0px, 0px, -300px) rotateX(0deg) rotateY(0deg) scale(1) !important;
|
||
}
|
||
|
||
:deep(.dswper .swiper-slide-prev) {
|
||
transform: translate3d(0px, 0px, -300px) rotateX(0deg) rotateY(0deg) scale(1) !important;
|
||
}
|
||
|
||
.group_666 .swiper-slide img {
|
||
width: 100%;
|
||
height: auto;
|
||
transition: 1s linear 2s;
|
||
transform: scale(1.1, 1.1);
|
||
}
|
||
|
||
.group_666 .swiper-slide-active img,
|
||
.swiper-slide-duplicate-active img {
|
||
transition: 6s linear;
|
||
transform: scale(1, 1);
|
||
}
|
||
|
||
/* 移动端导航按钮 */
|
||
.nav-arrow {
|
||
max-width: 30px;
|
||
height: auto;
|
||
}
|
||
|
||
.logo-img {
|
||
max-width: 120px;
|
||
height: auto;
|
||
}
|
||
|
||
/* 橙色背景块 */
|
||
.orange-bg {
|
||
background-color: rgba(252, 116, 40, 1);
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 1;
|
||
position: absolute;
|
||
right: -15px;
|
||
bottom: -15px;
|
||
}
|
||
|
||
/* 业务部分 */
|
||
.business-container {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.business-image {
|
||
width: 100%;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
/* 行业案例标签栏 */
|
||
.industry-tabs {
|
||
display: flex;
|
||
overflow-x: auto;
|
||
width: 100%;
|
||
padding: 10px 0;
|
||
margin-bottom: 15px;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
.text_25 {
|
||
white-space: nowrap;
|
||
margin-right: 15px;
|
||
position: relative;
|
||
width: auto;
|
||
margin:0px;
|
||
}
|
||
|
||
.active-tab {
|
||
color: #fc7428;
|
||
}
|
||
|
||
.tab-indicator {
|
||
width: 100%;
|
||
height: 1px;
|
||
background-color: #fc7428;
|
||
position: absolute;
|
||
bottom: -10px;
|
||
}
|
||
|
||
/* 更多案例按钮 */
|
||
.more-cases {
|
||
width: 100%;
|
||
justify-content: flex-end;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
.more-icon {
|
||
max-width: 20px;
|
||
}
|
||
|
||
/* 翻页按钮 */
|
||
.dswper_left,
|
||
.dswper_right {
|
||
width: 30px;
|
||
height: 30px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.dswper_left img,
|
||
.dswper_right img {
|
||
max-width: 100%;
|
||
}
|
||
|
||
/* 分页指示点 */
|
||
.pagination-dots {
|
||
bottom: -30px !important;
|
||
}
|
||
|
||
.dot {
|
||
width: 20px;
|
||
height: 4px;
|
||
background-color: #C1C1C1;
|
||
margin: 0 5px;
|
||
}
|
||
|
||
.active-dot {
|
||
background-color: #fc7428;
|
||
}
|
||
|
||
/* 新闻动态部分 */
|
||
.news-container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 20px;
|
||
}
|
||
|
||
/* 合作伙伴部分 */
|
||
.partner-stats {
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.stat-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
width: 100%;
|
||
}
|
||
|
||
.partner-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 10px;
|
||
width: 100%;
|
||
}
|
||
|
||
.nav-container {
|
||
position: absolute;
|
||
bottom: 30px;
|
||
left: 0;
|
||
width: 100%;
|
||
z-index: 100;
|
||
}
|
||
|
||
/* 响应式断点 */
|
||
@media (max-width: 768px) {
|
||
.text-group_1 {
|
||
width: 100%;
|
||
text-align: center;
|
||
}
|
||
|
||
.text_7 {
|
||
width: 100%;
|
||
text-align: center;
|
||
}
|
||
|
||
.text_8 {
|
||
width: 100%;
|
||
text-align: center;
|
||
}
|
||
|
||
.text_9 {
|
||
text-align: center;
|
||
margin: 0px;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.text_10 {
|
||
text-align: center;
|
||
margin: 0px;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.text_11 {
|
||
text-align: center;
|
||
margin: 0px;
|
||
font-size: 18px;
|
||
}
|
||
|
||
.text_12 {
|
||
width: 100%;
|
||
text-align: center;
|
||
padding: 10px;
|
||
margin: 0px;
|
||
height: 100%;
|
||
}
|
||
|
||
.text_14 {
|
||
margin: 20px 0px 10px 0px;
|
||
}
|
||
|
||
.text-wrapper_1 {
|
||
margin-top: 30px;
|
||
width: 100%;
|
||
}
|
||
|
||
.text-wrapper_2 {
|
||
margin: 0px auto;
|
||
}
|
||
|
||
.section_1 {
|
||
width: 90%;
|
||
height: 330px;
|
||
}
|
||
|
||
.image_5 {
|
||
width: 50px;
|
||
height: 50px;
|
||
}
|
||
|
||
.orange-bg {
|
||
right: 0px;
|
||
bottom: 0px;
|
||
}
|
||
|
||
.group_5 {
|
||
width: 100%;
|
||
}
|
||
|
||
.section_2 {
|
||
width: 100%;
|
||
}
|
||
|
||
.box_6 {
|
||
width: 100%;
|
||
}
|
||
|
||
.group_6 {
|
||
width: 100%;
|
||
}
|
||
|
||
.group_7 {
|
||
width: 100%;
|
||
}
|
||
|
||
.text-group_2 {
|
||
width: 80%;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.image-wrapper_3 {
|
||
width: 35px;
|
||
height: 35px;
|
||
}
|
||
.text_32{
|
||
margin-left:0px;
|
||
}
|
||
.more-cases{
|
||
width: auto;
|
||
}
|
||
.label_1 {
|
||
width: 35px;
|
||
height: 35px;
|
||
}
|
||
|
||
.group_3 {
|
||
height: 100%;
|
||
padding-top: 20px;
|
||
background: url(public/img/bg-c.png) no-repeat;
|
||
}
|
||
|
||
.logo-img {
|
||
width: 15px;
|
||
height: auto;
|
||
}
|
||
|
||
.text_16 {
|
||
width: 100%;
|
||
font-size: 14px;
|
||
height: auto;
|
||
line-height: 20px;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
.text_17 {
|
||
width: 100%;
|
||
font-size: 17px;
|
||
}
|
||
|
||
.box_3 {
|
||
width: 100%;
|
||
text-align: center;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.nav-arrow {
|
||
width: 15px;
|
||
height: auto;
|
||
}
|
||
|
||
.nav-container {
|
||
bottom: 10px;
|
||
}
|
||
|
||
.box_4 {
|
||
margin-left: 20px;
|
||
}
|
||
|
||
.business-container {
|
||
flex-direction: row;
|
||
}
|
||
|
||
.business-image {
|
||
width: 45%;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.news-container {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 20px;
|
||
}
|
||
|
||
.partner-stats {
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.stat-item {
|
||
width: 48%;
|
||
}
|
||
|
||
.partner-grid {
|
||
grid-template-columns: repeat(4, 1fr);
|
||
}
|
||
}
|
||
|
||
@media (min-width: 1024px) {
|
||
.partner-stats {
|
||
flex-direction: row;
|
||
flex-wrap: nowrap;
|
||
}
|
||
|
||
.stat-item {
|
||
width: 23%;
|
||
}
|
||
|
||
.partner-grid {
|
||
grid-template-columns: repeat(6, 1fr);
|
||
}
|
||
}
|
||
</style>
|