官网提交
This commit is contained in:
parent
75cbc471ab
commit
e86b813730
@ -55,7 +55,7 @@
|
||||
width: 83px;
|
||||
height: 16px;
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-size: 16px;
|
||||
font-family: Microsoft YaHei UI-Regular;
|
||||
font-weight: NaN;
|
||||
@ -144,7 +144,7 @@
|
||||
.group_3 {
|
||||
width: 100%;
|
||||
height: 613px;
|
||||
background: url(public/images/bg-c.png) 100% no-repeat;
|
||||
background: url(public/img/bg-c.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
gap: 150px;
|
||||
}
|
||||
@ -285,7 +285,7 @@
|
||||
|
||||
.section_1 {
|
||||
height: 508px;
|
||||
background: url(public/images/t2.png) 100% no-repeat;
|
||||
background: url(public/img/t2.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 549px;
|
||||
z-index: 10;
|
||||
@ -296,6 +296,7 @@
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.image_5 {
|
||||
@ -306,12 +307,21 @@
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.image_5s{
|
||||
background:url(public/img/m1.png);
|
||||
width: 549px;
|
||||
height: 508px;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
right: -30px;
|
||||
bottom: -30px;
|
||||
}
|
||||
|
||||
.box_5 {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 648px;
|
||||
background: url(public/images/bg-b.png) 100% no-repeat;
|
||||
background: url(public/img/bg-b.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
justify-content: flex-center;
|
||||
}
|
||||
@ -603,14 +613,14 @@
|
||||
.box_7 {
|
||||
width: 100%;
|
||||
height: 645px;
|
||||
background: url(public/images/bg-3.png) 100% no-repeat;
|
||||
background: url(public/img/bg-3.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.text_24 {
|
||||
overflow-wrap: break-word;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
color: rgba(34, 34, 34, 1);
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
@ -1291,8 +1301,15 @@
|
||||
|
||||
.box_17 {
|
||||
width: 100%;
|
||||
height: 615px;
|
||||
background: url(public/images/bg-4.png) 100% no-repeat;
|
||||
height: 490px;
|
||||
background: url(public/img/bg-4.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
justify-content: flex-center;
|
||||
}
|
||||
.box_18 {
|
||||
width: 100%;
|
||||
height: 465px;
|
||||
background: url(public/img/bg-5.png) 100% no-repeat;
|
||||
background-size: 100% 100%;
|
||||
justify-content: flex-center;
|
||||
}
|
||||
|
||||
@ -25,9 +25,9 @@
|
||||
</span>
|
||||
</div>
|
||||
<img class="image_29" referrerpolicy="no-referrer"
|
||||
src="public/images/wb.png" />
|
||||
src="public/img/wb.png" />
|
||||
<img class="image_30" referrerpolicy="no-referrer"
|
||||
src="public/images/wx.png" />
|
||||
src="public/img/wx.png" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -50,8 +50,8 @@
|
||||
<span class="mobile-address">洛阳公司地址：洛阳市 洛龙区 世贸中心D座1816室</span>
|
||||
</div>
|
||||
<div class="mobile-social flex-row">
|
||||
<img class="mobile-social-icon" referrerpolicy="no-referrer" src="public/images/wb.png" />
|
||||
<img class="mobile-social-icon" referrerpolicy="no-referrer" src="public/images/wx.png" />
|
||||
<img class="mobile-social-icon" referrerpolicy="no-referrer" src="public/img/wb.png" />
|
||||
<img class="mobile-social-icon" referrerpolicy="no-referrer" src="public/img/wx.png" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -2,16 +2,40 @@
|
||||
<div class="page flex-col">
|
||||
<div class="group_1 flex-col">
|
||||
<div class="box_1 flex-row">
|
||||
<img class="image_1" referrerpolicy="no-referrer" src="public/images/logo.png" />
|
||||
<img class="image_1" referrerpolicy="no-referrer" src="public/img/logo.png" />
|
||||
|
||||
<!-- Desktop Navigation -->
|
||||
<div class="desktop-nav">
|
||||
<span class="text_1">企业首页</span>
|
||||
<span class="text_2">产品 &服务</span>
|
||||
<span class="text_3">灵睿 &我们</span>
|
||||
<span class="text_4">客户&评价</span>
|
||||
<span class="text_5">社会&责任</span>
|
||||
<span class="text_6">联系我们</span>
|
||||
<span class="text_1">
|
||||
<NuxtLink to="/" :class="{ 'active': route.path === '/' }">
|
||||
企业首页
|
||||
</NuxtLink>
|
||||
</span>
|
||||
<span class="text_2">
|
||||
<NuxtLink to="/proServices/" :class="{ 'active': route.path === '/proServices/' || route.path === '/proServices' }">
|
||||
产品 &服务
|
||||
</NuxtLink>
|
||||
</span>
|
||||
<span class="text_3">
|
||||
<NuxtLink to="/aboutUs/" :class="{ 'active': route.path === '/aboutUs/' || route.path === '/aboutUs' }">
|
||||
灵睿 &我们
|
||||
</NuxtLink>
|
||||
</span>
|
||||
<span class="text_4">
|
||||
<NuxtLink to="/customerReviews/" :class="{ 'active': route.path === '/customerReviews/' || route.path === '/customerReviews' }">
|
||||
客户&评价
|
||||
</NuxtLink>
|
||||
</span>
|
||||
<span class="text_5">
|
||||
<NuxtLink to="/societyDuty/" :class="{ 'active': route.path === '/societyDuty/' || route.path === '/societyDuty' }">
|
||||
社会&责任
|
||||
</NuxtLink>
|
||||
</span>
|
||||
<span class="text_6">
|
||||
<NuxtLink to="/concatUs/" :class="{ 'active': route.path === '/concatUs/' || route.path === '/concatUs'}">
|
||||
加入我们
|
||||
</NuxtLink>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Hamburger Button -->
|
||||
@ -161,8 +185,18 @@ console.log(route)
|
||||
}
|
||||
}
|
||||
|
||||
.desktop-nav span:hover {
|
||||
|
||||
.desktop-nav {
|
||||
span:hover {
|
||||
cursor: pointer;
|
||||
color: #fff;
|
||||
}
|
||||
a{
|
||||
cursor: pointer;
|
||||
&.active{
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
497
pages/aboutUs.vue
Normal file
497
pages/aboutUs.vue
Normal file
@ -0,0 +1,497 @@
|
||||
<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/abus.png" style="width: 100%;">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img src="public/img/abus.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">
|
||||
<div class="box_2 flex-col">
|
||||
<div class="group_3 flex-row 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">
|
||||
<span class="text_9">公司简介</span>
|
||||
<span class="text_10">运营方法论</span>
|
||||
<span class="text_11">互联网营销</span>
|
||||
</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="content_box"></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">
|
||||
Our BusinessWay
|
||||
</span>
|
||||
<div class="flex-row justify-center align-center">
|
||||
<div class="leftBox" style="margin-right: 30px;">
|
||||
<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 justify-between">
|
||||
<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 justify-between">
|
||||
<div class="image-wrapper_5 flex-col">
|
||||
<img class="label_3" referrerpolicy="no-referrer" src="public/img/r4.png" />
|
||||
</div>
|
||||
<div class="text-group_3 flex-col justify-between">
|
||||
<span class="text_18">企业数字化自媒体托管专家</span>
|
||||
<span class="text_19">
|
||||
业团队代运营+AI智能内容生成+多平台精准投放，助您专注核心业务
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group_10 flex-col"></div>
|
||||
<div class="group_7 flex-row justify-between">
|
||||
<div class="image-wrapper_5 flex-col">
|
||||
<img class="label_3" referrerpolicy="no-referrer" src="public/img/r3.png" />
|
||||
</div>
|
||||
<div class="text-group_3 flex-col justify-between">
|
||||
<span class="text_18">全流程抖音短视频制作服务</span>
|
||||
<span class="text_19">
|
||||
助您快速打造高播放量、高互动率的爆款短视频
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group_12 flex-col"></div>
|
||||
<div class="group_13 flex-row justify-between">
|
||||
<div class="image-wrapper_5 flex-col">
|
||||
<img class="label_3" referrerpolicy="no-referrer" src="public/img/r2.png" />
|
||||
</div>
|
||||
<div class="text-group_5 flex-col justify-between">
|
||||
<span class="text_22">全栈H5开发解决方案</span>
|
||||
<span class="text_23">
|
||||
基于HTML5/CSS3/JavaScript核心技术助力实现高转化率与沉浸式用户体验
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box_7 flex-col">
|
||||
<span class="text_24 topBox">行业案例</span>
|
||||
<span class="text_15 topBox">Industry Cases</span>
|
||||
<!-- <div class="group_14 flex-row justify-between align-center" style="flex-wrap: wrap;">
|
||||
<div class="flex-row">
|
||||
<div class="text_25">
|
||||
<span>医疗</span>
|
||||
<div
|
||||
style="width: 100%;height: 1px;background-color: #fc7428;position: absolute;bottom: -21px;">
|
||||
</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="flex-row justify-center align-center">
|
||||
<div style="margin-right: 10px;">
|
||||
<span class="text_32">更多案例</span>
|
||||
</div>
|
||||
<div>
|
||||
<img src="public/img/anli.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="group_15" style="flex: 0 0 100%;"></div>
|
||||
</div> -->
|
||||
|
||||
<div class="dswper">
|
||||
<swiper ref="swiper_exp" :slidesPerView="3" loop :loopedSlides="3" :autoplay="false" centeredSlides
|
||||
:modules="modules" :watchSlidesProgress="true" @swiper="onSwiperExp" effect="coverflow">
|
||||
<swiper-slide>
|
||||
<img src="public/img/op1.png" style="width: 100%;">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img src="public/img/op2.png" style="width: 100%;">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img src="public/img/op1.png" style="width: 100%;">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img src="public/img/op2.png" style="width: 100%;">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img src="public/img/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]" style="gap: 30px;">
|
||||
<div style="width: 25px;height:5px;background-color: #fc7428;"></div>
|
||||
<div style="width: 25px;height:5px;background-color: #C1C1C1;"></div>
|
||||
<div style="width: 25px;height:5px;background-color: #C1C1C1;"></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="box_12 flex-row justify-center">
|
||||
<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">
|
||||
为深入学习贯彻党的二十大精神，落实省、市委决策，
|
||||
<br />
|
||||
充分发挥民营企业的凝聚力、向心力和创造力，赴..
|
||||
</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>
|
||||
<div class="box_14 flex-row justify-center">
|
||||
<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">
|
||||
为深入学习贯彻党的二十大精神，落实省、市委决策，
|
||||
<br />
|
||||
充分发挥民营企业的凝聚力、向心力和创造力，赴..
|
||||
</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">
|
||||
为深入学习贯彻党的二十大精神，落实省、市委决策，
|
||||
<br />
|
||||
充分发挥民营企业的凝聚力、向心力和创造力，赴..
|
||||
</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="group_28 flex-row justify-center numberTopBox">
|
||||
<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 class="section_7 flex-col"></div>
|
||||
<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 class="section_8 flex-col"></div>
|
||||
<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 class="section_9 flex-col"></div>
|
||||
<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 class="group_29 grid grid-cols-6 gap-6 mr-auto">
|
||||
<div class="bottom_imgs topSj"></div>
|
||||
<!-- <div v-for="item in 18" class="">
|
||||
<img class="image_11 topSj" referrerpolicy="no-referrer" src="public/img/q1.png" />
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="box_18 flex-col" style="overflow: hidden;">
|
||||
<span class="text_53" style="color: #fff;">联系我们</span>
|
||||
<span class="text_54" style="color: #fff;">cooperative partner </span>
|
||||
|
||||
<div class="group_29 grid grid-cols-6 gap-6 mr-auto">
|
||||
<div class="bottom_imgs topSj"></div>
|
||||
<!-- <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();
|
||||
|
||||
// 新闻数据
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
animate()
|
||||
})
|
||||
})
|
||||
const numberAnimationInstRef = ref()
|
||||
const numberAnimationInstRefKH = ref()
|
||||
const numberAnimationInstRefJS = ref()
|
||||
const numberAnimationInstRefHY = ref()
|
||||
const animate = () => {
|
||||
|
||||
const sr = ScrollReveal();
|
||||
sr.reveal('.leftBox', {
|
||||
origin: "left",
|
||||
distance: "1000px",
|
||||
duration: 1300,
|
||||
delay: 100,
|
||||
opacity: 0,
|
||||
scale: 0.9,
|
||||
reset: true,
|
||||
mobile: true,
|
||||
})
|
||||
sr.reveal('.rightBox', {
|
||||
origin: "right",
|
||||
distance: "1000px",
|
||||
duration: 1300,
|
||||
delay: 100,
|
||||
opacity: 0,
|
||||
scale: 0.9,
|
||||
reset: true,
|
||||
mobile: true,
|
||||
})
|
||||
sr.reveal('.topBox', {
|
||||
origin: "top",
|
||||
distance: "1000px",
|
||||
duration: 1300,
|
||||
delay: 100,
|
||||
opacity: 0,
|
||||
scale: 0.9,
|
||||
reset: true,
|
||||
mobile: true,
|
||||
})
|
||||
sr.reveal('.bottomBox', {
|
||||
origin: "bottom",
|
||||
distance: "1000px",
|
||||
duration: 1300,
|
||||
delay: 100,
|
||||
opacity: 0,
|
||||
scale: 0.9,
|
||||
reset: true,
|
||||
mobile: true,
|
||||
})
|
||||
sr.reveal('.numberTopBox', {
|
||||
origin: "top",
|
||||
distance: "1000px",
|
||||
duration: 1300,
|
||||
delay: 100,
|
||||
opacity: 0,
|
||||
scale: 0.9,
|
||||
reset: true,
|
||||
mobile: true,
|
||||
beforeReveal: function (el: any) {
|
||||
numberAnimationInstRef.value.play()
|
||||
numberAnimationInstRefKH.value.play()
|
||||
numberAnimationInstRefJS.value.play()
|
||||
numberAnimationInstRefHY.value.play()
|
||||
},
|
||||
})
|
||||
sr.reveal('.topSj', {
|
||||
origin: "bottom",
|
||||
distance: "1000px",
|
||||
duration: 1300,
|
||||
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.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;
|
||||
}
|
||||
|
||||
.group_666 .swiper-slide img {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
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);
|
||||
}
|
||||
.bottom_imgs{
|
||||
background: url(/public/img/qall.png);
|
||||
width: 1230px;
|
||||
height: 272px;
|
||||
background-size: 100%;
|
||||
}
|
||||
.content_box{
|
||||
background: url(/public/img/m1.png);;
|
||||
width: 561px;height: 521px;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
right: -12px;
|
||||
bottom: -13px;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
497
pages/concatUs.vue
Normal file
497
pages/concatUs.vue
Normal file
@ -0,0 +1,497 @@
|
||||
<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/joinus.png" style="width: 100%;">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img src="public/img/joinus.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">
|
||||
<div class="box_2 flex-col">
|
||||
<div class="group_3 flex-row 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">
|
||||
<span class="text_9">公司简介</span>
|
||||
<span class="text_10">运营方法论</span>
|
||||
<span class="text_11">互联网营销</span>
|
||||
</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="content_box"></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">
|
||||
Our BusinessWay
|
||||
</span>
|
||||
<div class="flex-row justify-center align-center">
|
||||
<div class="leftBox" style="margin-right: 30px;">
|
||||
<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 justify-between">
|
||||
<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 justify-between">
|
||||
<div class="image-wrapper_5 flex-col">
|
||||
<img class="label_3" referrerpolicy="no-referrer" src="public/img/r4.png" />
|
||||
</div>
|
||||
<div class="text-group_3 flex-col justify-between">
|
||||
<span class="text_18">企业数字化自媒体托管专家</span>
|
||||
<span class="text_19">
|
||||
业团队代运营+AI智能内容生成+多平台精准投放，助您专注核心业务
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group_10 flex-col"></div>
|
||||
<div class="group_7 flex-row justify-between">
|
||||
<div class="image-wrapper_5 flex-col">
|
||||
<img class="label_3" referrerpolicy="no-referrer" src="public/img/r3.png" />
|
||||
</div>
|
||||
<div class="text-group_3 flex-col justify-between">
|
||||
<span class="text_18">全流程抖音短视频制作服务</span>
|
||||
<span class="text_19">
|
||||
助您快速打造高播放量、高互动率的爆款短视频
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group_12 flex-col"></div>
|
||||
<div class="group_13 flex-row justify-between">
|
||||
<div class="image-wrapper_5 flex-col">
|
||||
<img class="label_3" referrerpolicy="no-referrer" src="public/img/r2.png" />
|
||||
</div>
|
||||
<div class="text-group_5 flex-col justify-between">
|
||||
<span class="text_22">全栈H5开发解决方案</span>
|
||||
<span class="text_23">
|
||||
基于HTML5/CSS3/JavaScript核心技术助力实现高转化率与沉浸式用户体验
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box_7 flex-col">
|
||||
<span class="text_24 topBox">行业案例</span>
|
||||
<span class="text_15 topBox">Industry Cases</span>
|
||||
<!-- <div class="group_14 flex-row justify-between align-center" style="flex-wrap: wrap;">
|
||||
<div class="flex-row">
|
||||
<div class="text_25">
|
||||
<span>医疗</span>
|
||||
<div
|
||||
style="width: 100%;height: 1px;background-color: #fc7428;position: absolute;bottom: -21px;">
|
||||
</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="flex-row justify-center align-center">
|
||||
<div style="margin-right: 10px;">
|
||||
<span class="text_32">更多案例</span>
|
||||
</div>
|
||||
<div>
|
||||
<img src="public/img/anli.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="group_15" style="flex: 0 0 100%;"></div>
|
||||
</div> -->
|
||||
|
||||
<div class="dswper">
|
||||
<swiper ref="swiper_exp" :slidesPerView="3" loop :loopedSlides="3" :autoplay="false" centeredSlides
|
||||
:modules="modules" :watchSlidesProgress="true" @swiper="onSwiperExp" effect="coverflow">
|
||||
<swiper-slide>
|
||||
<img src="public/img/op1.png" style="width: 100%;">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img src="public/img/op2.png" style="width: 100%;">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img src="public/img/op1.png" style="width: 100%;">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img src="public/img/op2.png" style="width: 100%;">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img src="public/img/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]" style="gap: 30px;">
|
||||
<div style="width: 25px;height:5px;background-color: #fc7428;"></div>
|
||||
<div style="width: 25px;height:5px;background-color: #C1C1C1;"></div>
|
||||
<div style="width: 25px;height:5px;background-color: #C1C1C1;"></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="box_12 flex-row justify-center">
|
||||
<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">
|
||||
为深入学习贯彻党的二十大精神，落实省、市委决策，
|
||||
<br />
|
||||
充分发挥民营企业的凝聚力、向心力和创造力，赴..
|
||||
</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>
|
||||
<div class="box_14 flex-row justify-center">
|
||||
<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">
|
||||
为深入学习贯彻党的二十大精神，落实省、市委决策，
|
||||
<br />
|
||||
充分发挥民营企业的凝聚力、向心力和创造力，赴..
|
||||
</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">
|
||||
为深入学习贯彻党的二十大精神，落实省、市委决策，
|
||||
<br />
|
||||
充分发挥民营企业的凝聚力、向心力和创造力，赴..
|
||||
</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="group_28 flex-row justify-center numberTopBox">
|
||||
<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 class="section_7 flex-col"></div>
|
||||
<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 class="section_8 flex-col"></div>
|
||||
<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 class="section_9 flex-col"></div>
|
||||
<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 class="group_29 grid grid-cols-6 gap-6 mr-auto">
|
||||
<div class="bottom_imgs topSj"></div>
|
||||
<!-- <div v-for="item in 18" class="">
|
||||
<img class="image_11 topSj" referrerpolicy="no-referrer" src="public/img/q1.png" />
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="box_18 flex-col" style="overflow: hidden;">
|
||||
<span class="text_53" style="color: #fff;">联系我们</span>
|
||||
<span class="text_54" style="color: #fff;">cooperative partner </span>
|
||||
|
||||
<div class="group_29 grid grid-cols-6 gap-6 mr-auto">
|
||||
<div class="bottom_imgs topSj"></div>
|
||||
<!-- <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();
|
||||
|
||||
// 新闻数据
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
animate()
|
||||
})
|
||||
})
|
||||
const numberAnimationInstRef = ref()
|
||||
const numberAnimationInstRefKH = ref()
|
||||
const numberAnimationInstRefJS = ref()
|
||||
const numberAnimationInstRefHY = ref()
|
||||
const animate = () => {
|
||||
|
||||
const sr = ScrollReveal();
|
||||
sr.reveal('.leftBox', {
|
||||
origin: "left",
|
||||
distance: "1000px",
|
||||
duration: 1300,
|
||||
delay: 100,
|
||||
opacity: 0,
|
||||
scale: 0.9,
|
||||
reset: true,
|
||||
mobile: true,
|
||||
})
|
||||
sr.reveal('.rightBox', {
|
||||
origin: "right",
|
||||
distance: "1000px",
|
||||
duration: 1300,
|
||||
delay: 100,
|
||||
opacity: 0,
|
||||
scale: 0.9,
|
||||
reset: true,
|
||||
mobile: true,
|
||||
})
|
||||
sr.reveal('.topBox', {
|
||||
origin: "top",
|
||||
distance: "1000px",
|
||||
duration: 1300,
|
||||
delay: 100,
|
||||
opacity: 0,
|
||||
scale: 0.9,
|
||||
reset: true,
|
||||
mobile: true,
|
||||
})
|
||||
sr.reveal('.bottomBox', {
|
||||
origin: "bottom",
|
||||
distance: "1000px",
|
||||
duration: 1300,
|
||||
delay: 100,
|
||||
opacity: 0,
|
||||
scale: 0.9,
|
||||
reset: true,
|
||||
mobile: true,
|
||||
})
|
||||
sr.reveal('.numberTopBox', {
|
||||
origin: "top",
|
||||
distance: "1000px",
|
||||
duration: 1300,
|
||||
delay: 100,
|
||||
opacity: 0,
|
||||
scale: 0.9,
|
||||
reset: true,
|
||||
mobile: true,
|
||||
beforeReveal: function (el: any) {
|
||||
numberAnimationInstRef.value.play()
|
||||
numberAnimationInstRefKH.value.play()
|
||||
numberAnimationInstRefJS.value.play()
|
||||
numberAnimationInstRefHY.value.play()
|
||||
},
|
||||
})
|
||||
sr.reveal('.topSj', {
|
||||
origin: "bottom",
|
||||
distance: "1000px",
|
||||
duration: 1300,
|
||||
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.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;
|
||||
}
|
||||
|
||||
.group_666 .swiper-slide img {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
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);
|
||||
}
|
||||
.bottom_imgs{
|
||||
background: url(/public/img/qall.png);
|
||||
width: 1230px;
|
||||
height: 272px;
|
||||
background-size: 100%;
|
||||
}
|
||||
.content_box{
|
||||
background: url(/public/img/m1.png);;
|
||||
width: 561px;height: 521px;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
right: -12px;
|
||||
bottom: -13px;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
273
pages/customerReviews.vue
Normal file
273
pages/customerReviews.vue
Normal file
@ -0,0 +1,273 @@
|
||||
<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/customer/topnav.png" style="width: 100%;">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img src="public/img/customer/topnav.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="box_11 flex-col bottom_imgss">
|
||||
<div class="text-wrapper_10">
|
||||
<span class="text_41">公司荣誉</span>
|
||||
</div>
|
||||
<div class="text-wrapper_11">
|
||||
<span class="text_42">Company Honors </span>
|
||||
</div>
|
||||
|
||||
<div class="boxgs flex-row flex-wrap">
|
||||
|
||||
<div class="box_con flex-col" v-for="(item,index) in lists" :key="index">
|
||||
<div class="align-center" style="justify-content: center;margin-top: 10px;">
|
||||
<img width="257px" height="169px" :src="`/img/${index}.png`" alt="">
|
||||
</div>
|
||||
<div class="flex-col" style="justify-content: center;margin-top: 10px;border-top: 1px solid #EEEEEE;">
|
||||
<span class="text_tt">
|
||||
{{item.title}}
|
||||
</span>
|
||||
<span class="text_cc">
|
||||
{{item.value}}
|
||||
</span>
|
||||
</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()
|
||||
|
||||
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 lists = ref([
|
||||
{title: '扶贫助困情系家乡', value: '-洛阳市郑州商会-'},
|
||||
{title: '互联网技术服务合作单位', value: '-洛阳百艺建筑装饰-'},
|
||||
{title: '平安洛阳微信平台技术服务单位', value: '-洛阳市公安局-'},
|
||||
{title: '健康洛阳微信平台技术合作单位', value: '-河南科技大学第一附属医院-'},
|
||||
{title: '爱心捐助奉献奖', value: '-洛阳市郑州商会-'},
|
||||
{title: '精彩洛阳微信平台技术服务单位', value: '-洛阳市宣传部网信办-'},
|
||||
{title: '青年说短视频征集大赛', value: '-洛阳市公安局-'},
|
||||
{title: '青年说短视频征集大赛', value: '-河南科技大学第一附属医院-'}
|
||||
]);
|
||||
// 新闻数据
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
animate()
|
||||
})
|
||||
})
|
||||
const numberAnimationInstRef = ref()
|
||||
const numberAnimationInstRefKH = ref()
|
||||
const numberAnimationInstRefJS = ref()
|
||||
const numberAnimationInstRefHY = ref()
|
||||
const animate = () => {
|
||||
|
||||
const sr = ScrollReveal();
|
||||
sr.reveal('.leftBox', {
|
||||
origin: "left",
|
||||
distance: "1000px",
|
||||
duration: 1300,
|
||||
delay: 100,
|
||||
opacity: 0,
|
||||
scale: 0.9,
|
||||
reset: true,
|
||||
mobile: true,
|
||||
})
|
||||
sr.reveal('.rightBox', {
|
||||
origin: "right",
|
||||
distance: "1000px",
|
||||
duration: 1300,
|
||||
delay: 100,
|
||||
opacity: 0,
|
||||
scale: 0.9,
|
||||
reset: true,
|
||||
mobile: true,
|
||||
})
|
||||
sr.reveal('.topBox', {
|
||||
origin: "top",
|
||||
distance: "1000px",
|
||||
duration: 1300,
|
||||
delay: 100,
|
||||
opacity: 0,
|
||||
scale: 0.9,
|
||||
reset: true,
|
||||
mobile: true,
|
||||
})
|
||||
sr.reveal('.bottomBox', {
|
||||
origin: "bottom",
|
||||
distance: "1000px",
|
||||
duration: 1300,
|
||||
delay: 100,
|
||||
opacity: 0,
|
||||
scale: 0.9,
|
||||
reset: true,
|
||||
mobile: true,
|
||||
})
|
||||
sr.reveal('.numberTopBox', {
|
||||
origin: "top",
|
||||
distance: "1000px",
|
||||
duration: 1300,
|
||||
delay: 100,
|
||||
opacity: 0,
|
||||
scale: 0.9,
|
||||
reset: true,
|
||||
mobile: true,
|
||||
beforeReveal: function (el: any) {
|
||||
numberAnimationInstRef.value.play()
|
||||
numberAnimationInstRefKH.value.play()
|
||||
numberAnimationInstRefJS.value.play()
|
||||
numberAnimationInstRefHY.value.play()
|
||||
},
|
||||
})
|
||||
sr.reveal('.topSj', {
|
||||
origin: "bottom",
|
||||
distance: "1000px",
|
||||
duration: 1300,
|
||||
delay: 5,
|
||||
opacity: 0,
|
||||
scale: 0.9,
|
||||
reset: true,
|
||||
mobile: true,
|
||||
useDelay: 'always',
|
||||
interval: 50,
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/animate/animate.min.css";
|
||||
@import "@/assets/index.css";
|
||||
|
||||
|
||||
|
||||
.group_666 .swiper-slide img {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
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);
|
||||
}
|
||||
.bottom_imgss{
|
||||
background: url(/public/img/customer/bg-s.png);
|
||||
width: 1920px;
|
||||
height: 800px;
|
||||
background-size: 100%;
|
||||
}
|
||||
.boxgs{
|
||||
width: 1300px;
|
||||
margin: 0 auto;
|
||||
margin-top: 30px;
|
||||
.box_con{
|
||||
margin:20px;
|
||||
background-color: #ffffff;
|
||||
width: 277px;
|
||||
height: 276px;
|
||||
font-family: Microsoft YaHei UI-Regular;
|
||||
border-radius:4px;
|
||||
.text_tt{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
margin-top: 15px;
|
||||
overflow-wrap: break-word;
|
||||
color: #3D3D3D ;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.text_cc{
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
overflow-wrap: break-word;
|
||||
color: #999999 ;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -4,22 +4,22 @@
|
||||
<div class="group_666" style="position: relative;">
|
||||
<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
|
||||
<swiper-slide>
|
||||
<img src="public/images/banner.png" style="width: 100%;">
|
||||
<img src="public/img/banner.png" style="width: 100%;">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img src="public/images/banner.png" style="width: 100%;">
|
||||
<img src="public/img/banner.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/images/left.png" alt="">
|
||||
<img src="public/img/left.png" alt="">
|
||||
</div>
|
||||
<div style="margin: 0px 20px;">
|
||||
<img src="public/images/morse.png" alt="">
|
||||
<img src="public/img/morse.png" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<img src="public/images/right.png" alt="">
|
||||
<img src="public/img/right.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -52,12 +52,10 @@
|
||||
<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/images/bf.png" />
|
||||
<img class="image_5" referrerpolicy="no-referrer" src="public/img/bf.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style="background-color: rgba(252, 116, 40, 1);width: 549px;height: 508px;z-index: 1;position: absolute;right: -30px;bottom: -30px;;">
|
||||
</div>
|
||||
<div class="content_box"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -66,17 +64,18 @@
|
||||
<div class="box_5 flex-col">
|
||||
<span class="text_14 topBox">我们的业务</span>
|
||||
<span class="text_15 topBox">
|
||||
The Way of the Internet
|
||||
Our BusinessWay
|
||||
</span>
|
||||
<div class="flex-row justify-center align-center">
|
||||
<div class="leftBox">
|
||||
<img class="image_6" referrerpolicy="no-referrer" src="public/images/t3.png" />
|
||||
<div class="leftBox" style="margin-right: 30px;">
|
||||
<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 justify-between">
|
||||
<div class="image-wrapper_3 flex-col align-center">
|
||||
<img class="label_1" referrerpolicy="no-referrer" src="public/images/u1.png" />
|
||||
<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">
|
||||
@ -90,7 +89,7 @@
|
||||
</div>
|
||||
<div class="group_7 flex-row justify-between">
|
||||
<div class="image-wrapper_5 flex-col">
|
||||
<img class="label_3" referrerpolicy="no-referrer" src="public/images/r4.png" />
|
||||
<img class="label_3" referrerpolicy="no-referrer" src="public/img/r4.png" />
|
||||
</div>
|
||||
<div class="text-group_3 flex-col justify-between">
|
||||
<span class="text_18">企业数字化自媒体托管专家</span>
|
||||
@ -102,7 +101,7 @@
|
||||
<div class="group_10 flex-col"></div>
|
||||
<div class="group_7 flex-row justify-between">
|
||||
<div class="image-wrapper_5 flex-col">
|
||||
<img class="label_3" referrerpolicy="no-referrer" src="public/images/r3.png" />
|
||||
<img class="label_3" referrerpolicy="no-referrer" src="public/img/r3.png" />
|
||||
</div>
|
||||
<div class="text-group_3 flex-col justify-between">
|
||||
<span class="text_18">全流程抖音短视频制作服务</span>
|
||||
@ -114,7 +113,7 @@
|
||||
<div class="group_12 flex-col"></div>
|
||||
<div class="group_13 flex-row justify-between">
|
||||
<div class="image-wrapper_5 flex-col">
|
||||
<img class="label_3" referrerpolicy="no-referrer" src="public/images/r2.png" />
|
||||
<img class="label_3" referrerpolicy="no-referrer" src="public/img/r2.png" />
|
||||
</div>
|
||||
<div class="text-group_5 flex-col justify-between">
|
||||
<span class="text_22">全栈H5开发解决方案</span>
|
||||
@ -129,8 +128,9 @@
|
||||
</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;">
|
||||
<span class="text_24 topBox">行业案例</span>
|
||||
<span class="text_15 topBox">Industry Cases</span>
|
||||
<!-- <div class="group_14 flex-row justify-between align-center" style="flex-wrap: wrap;">
|
||||
<div class="flex-row">
|
||||
<div class="text_25">
|
||||
<span>医疗</span>
|
||||
@ -150,36 +150,36 @@
|
||||
<span class="text_32">更多案例</span>
|
||||
</div>
|
||||
<div>
|
||||
<img src="public/images/anli.png" />
|
||||
<img src="public/img/anli.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="group_15" style="flex: 0 0 100%;"></div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="dswper">
|
||||
<swiper ref="swiper_exp" :slidesPerView="3" loop :loopedSlides="3" :autoplay="false" centeredSlides
|
||||
:modules="modules" :watchSlidesProgress="true" @swiper="onSwiperExp" effect="coverflow">
|
||||
<swiper-slide>
|
||||
<img src="public/images/op1.png" style="width: 100%;">
|
||||
<img src="public/img/op1.png" style="width: 100%;">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img src="public/images/op1.png" style="width: 100%;">
|
||||
<img src="public/img/op2.png" style="width: 100%;">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img src="public/images/op1.png" style="width: 100%;">
|
||||
<img src="public/img/op1.png" style="width: 100%;">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img src="public/images/op1.png" style="width: 100%;">
|
||||
<img src="public/img/op2.png" style="width: 100%;">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img src="public/images/op1.png" style="width: 100%;">
|
||||
<img src="public/img/op1.png" style="width: 100%;">
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
<div class="dswper_left">
|
||||
<img src="public/images/opl.png">
|
||||
<img src="public/img/opl.png">
|
||||
</div>
|
||||
<div class="dswper_right">
|
||||
<img src="public/images/opr.png">
|
||||
<img src="public/img/opr.png">
|
||||
</div>
|
||||
<div class="flex-row justify-center align-center absolute w-full bottom-[-50px]" style="gap: 30px;">
|
||||
<div style="width: 25px;height:5px;background-color: #fc7428;"></div>
|
||||
@ -196,7 +196,7 @@
|
||||
<span class="text_42">Our Business </span>
|
||||
</div>
|
||||
<div class="box_12 flex-row justify-center">
|
||||
<img class="image_7 leftBox" referrerpolicy="no-referrer" src="public/images/news1.png" />
|
||||
<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">
|
||||
@ -214,7 +214,7 @@
|
||||
<span class="text_45">2025-06-24</span>
|
||||
</div>
|
||||
</div>
|
||||
<img class="image_8 rightBox" referrerpolicy="no-referrer" src="public/images/news2.png" />
|
||||
<img class="image_8 rightBox" referrerpolicy="no-referrer" src="public/img/news2.png" />
|
||||
</div>
|
||||
<div class="box_14 flex-row justify-center">
|
||||
<div class="group_23 flex-col leftBox">
|
||||
@ -235,7 +235,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<img class="image_9 bottomBox" referrerpolicy="no-referrer" src="public/images/news3.png" />
|
||||
<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">
|
||||
@ -263,7 +263,7 @@
|
||||
<div class="box_17 flex-col" style="overflow: hidden;">
|
||||
<span class="text_53">合作伙伴</span>
|
||||
<span class="text_54">Our Business </span>
|
||||
<div class="group_28 flex-row justify-center numberTopBox">
|
||||
<!-- <div class="group_28 flex-row justify-center numberTopBox">
|
||||
<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>+
|
||||
@ -297,12 +297,24 @@
|
||||
</span>
|
||||
</div>
|
||||
<span class="text_66">技术团队</span>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="group_29 grid grid-cols-6 gap-6 mr-auto">
|
||||
<div v-for="item in 18" class="">
|
||||
<img class="image_11 topSj" referrerpolicy="no-referrer" src="public/images/q1.png" />
|
||||
<div class="bottom_imgs topSj"></div>
|
||||
<!-- <div v-for="item in 18" class="">
|
||||
<img class="image_11 topSj" referrerpolicy="no-referrer" src="public/img/q1.png" />
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="box_18 flex-col" style="overflow: hidden;">
|
||||
<span class="text_53" style="color: #fff;">联系我们</span>
|
||||
<span class="text_54" style="color: #fff;">cooperative partner </span>
|
||||
|
||||
<div class="group_29 grid grid-cols-6 gap-6 mr-auto">
|
||||
<div class="bottom_imgs topSj"></div>
|
||||
<!-- <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>
|
||||
@ -368,6 +380,7 @@ const numberAnimationInstRefKH = ref()
|
||||
const numberAnimationInstRefJS = ref()
|
||||
const numberAnimationInstRefHY = ref()
|
||||
const animate = () => {
|
||||
|
||||
const sr = ScrollReveal();
|
||||
sr.reveal('.leftBox', {
|
||||
origin: "left",
|
||||
@ -465,4 +478,20 @@ const animate = () => {
|
||||
transition: 6s linear;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
.bottom_imgs{
|
||||
background: url(/public/img/qall.png);
|
||||
width: 1230px;
|
||||
height: 272px;
|
||||
background-size: 100%;
|
||||
}
|
||||
.content_box{
|
||||
background: url(/public/img/m1.png);;
|
||||
width: 561px;height: 521px;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
right: -12px;
|
||||
bottom: -13px;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@ -4,22 +4,22 @@
|
||||
<div class="group_666" style="position: relative;">
|
||||
<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
|
||||
<swiper-slide>
|
||||
<img src="public/images/banner.png" style="width: 100%;">
|
||||
<img src="public/img/banner.png" style="width: 100%;">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img src="public/images/banner.png" style="width: 100%;">
|
||||
<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/images/left.png" alt="" class="nav-arrow">
|
||||
<img src="public/img/left.png" alt="" class="nav-arrow">
|
||||
</div>
|
||||
<div style="margin: 0px 20px;">
|
||||
<img src="public/images/morse.png" alt="" class="logo-img">
|
||||
<img src="public/img/morse.png" alt="" class="logo-img">
|
||||
</div>
|
||||
<div>
|
||||
<img src="public/images/right.png" alt="" class="nav-arrow">
|
||||
<img src="public/img/right.png" alt="" class="nav-arrow">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -52,7 +52,7 @@
|
||||
<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/images/bf.png" />
|
||||
<img class="image_5" referrerpolicy="no-referrer" src="public/img/bf.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="orange-bg"></div>
|
||||
@ -68,13 +68,13 @@
|
||||
</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/images/t3.png" />
|
||||
<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/images/u1.png" />
|
||||
<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">
|
||||
@ -88,7 +88,7 @@
|
||||
</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/images/r4.png" />
|
||||
<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>
|
||||
@ -100,7 +100,7 @@
|
||||
<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/images/r3.png" />
|
||||
<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>
|
||||
@ -112,7 +112,7 @@
|
||||
<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/images/r2.png" />
|
||||
<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>
|
||||
@ -149,26 +149,26 @@
|
||||
:modules="modules" :watchSlidesProgress="true" @swiper="onSwiperExp" effect="coverflow"
|
||||
:breakpoints="swiperBreakpoints">
|
||||
<swiper-slide>
|
||||
<img src="public/images/op1.png" style="width: 100%;">
|
||||
<img src="public/img/op1.png" style="width: 100%;">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img src="public/images/op1.png" style="width: 100%;">
|
||||
<img src="public/img/op1.png" style="width: 100%;">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img src="public/images/op1.png" style="width: 100%;">
|
||||
<img src="public/img/op1.png" style="width: 100%;">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img src="public/images/op1.png" style="width: 100%;">
|
||||
<img src="public/img/op1.png" style="width: 100%;">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img src="public/images/op1.png" style="width: 100%;">
|
||||
<img src="public/img/op1.png" style="width: 100%;">
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
<div class="dswper_left">
|
||||
<img src="public/images/opl.png">
|
||||
<img src="public/img/opl.png">
|
||||
</div>
|
||||
<div class="dswper_right">
|
||||
<img src="public/images/opr.png">
|
||||
<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>
|
||||
@ -185,7 +185,7 @@
|
||||
<span class="text_42">Our Business </span>
|
||||
</div>
|
||||
<div class="news-container">
|
||||
<img class="image_7 leftBox" referrerpolicy="no-referrer" src="public/images/news1.png" />
|
||||
<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">
|
||||
@ -202,7 +202,7 @@
|
||||
<span class="text_45">2025-06-24</span>
|
||||
</div>
|
||||
</div>
|
||||
<img class="image_8 rightBox" referrerpolicy="no-referrer" src="public/images/news2.png" />
|
||||
<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">
|
||||
@ -220,7 +220,7 @@
|
||||
<span class="text_48">2025-06-24</span>
|
||||
</div>
|
||||
</div>
|
||||
<img class="image_9 bottomBox" referrerpolicy="no-referrer" src="public/images/news3.png" />
|
||||
<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">
|
||||
@ -299,7 +299,7 @@
|
||||
</div>
|
||||
<div class="group_29 partner-grid">
|
||||
<div v-for="item in 18" class="">
|
||||
<img class="image_11 topSj" referrerpolicy="no-referrer" src="public/images/q1.png" />
|
||||
<img class="image_11 topSj" referrerpolicy="no-referrer" src="public/img/q1.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -755,7 +755,7 @@ body.is-mobile {
|
||||
.group_3 {
|
||||
height: 100%;
|
||||
padding-top: 20px;
|
||||
background: url(public/images/bg-c.png) no-repeat;
|
||||
background: url(public/img/bg-c.png) no-repeat;
|
||||
}
|
||||
|
||||
.logo-img {
|
||||
|
||||
497
pages/proServices.vue
Normal file
497
pages/proServices.vue
Normal file
@ -0,0 +1,497 @@
|
||||
<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 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">
|
||||
<div class="box_2 flex-col">
|
||||
<div class="group_3 flex-row 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">
|
||||
<span class="text_9">公司简介</span>
|
||||
<span class="text_10">运营方法论</span>
|
||||
<span class="text_11">互联网营销</span>
|
||||
</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="content_box"></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">
|
||||
Our BusinessWay
|
||||
</span>
|
||||
<div class="flex-row justify-center align-center">
|
||||
<div class="leftBox" style="margin-right: 30px;">
|
||||
<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 justify-between">
|
||||
<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 justify-between">
|
||||
<div class="image-wrapper_5 flex-col">
|
||||
<img class="label_3" referrerpolicy="no-referrer" src="public/img/r4.png" />
|
||||
</div>
|
||||
<div class="text-group_3 flex-col justify-between">
|
||||
<span class="text_18">企业数字化自媒体托管专家</span>
|
||||
<span class="text_19">
|
||||
业团队代运营+AI智能内容生成+多平台精准投放，助您专注核心业务
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group_10 flex-col"></div>
|
||||
<div class="group_7 flex-row justify-between">
|
||||
<div class="image-wrapper_5 flex-col">
|
||||
<img class="label_3" referrerpolicy="no-referrer" src="public/img/r3.png" />
|
||||
</div>
|
||||
<div class="text-group_3 flex-col justify-between">
|
||||
<span class="text_18">全流程抖音短视频制作服务</span>
|
||||
<span class="text_19">
|
||||
助您快速打造高播放量、高互动率的爆款短视频
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group_12 flex-col"></div>
|
||||
<div class="group_13 flex-row justify-between">
|
||||
<div class="image-wrapper_5 flex-col">
|
||||
<img class="label_3" referrerpolicy="no-referrer" src="public/img/r2.png" />
|
||||
</div>
|
||||
<div class="text-group_5 flex-col justify-between">
|
||||
<span class="text_22">全栈H5开发解决方案</span>
|
||||
<span class="text_23">
|
||||
基于HTML5/CSS3/JavaScript核心技术助力实现高转化率与沉浸式用户体验
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box_7 flex-col">
|
||||
<span class="text_24 topBox">行业案例</span>
|
||||
<span class="text_15 topBox">Industry Cases</span>
|
||||
<!-- <div class="group_14 flex-row justify-between align-center" style="flex-wrap: wrap;">
|
||||
<div class="flex-row">
|
||||
<div class="text_25">
|
||||
<span>医疗</span>
|
||||
<div
|
||||
style="width: 100%;height: 1px;background-color: #fc7428;position: absolute;bottom: -21px;">
|
||||
</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="flex-row justify-center align-center">
|
||||
<div style="margin-right: 10px;">
|
||||
<span class="text_32">更多案例</span>
|
||||
</div>
|
||||
<div>
|
||||
<img src="public/img/anli.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="group_15" style="flex: 0 0 100%;"></div>
|
||||
</div> -->
|
||||
|
||||
<div class="dswper">
|
||||
<swiper ref="swiper_exp" :slidesPerView="3" loop :loopedSlides="3" :autoplay="false" centeredSlides
|
||||
:modules="modules" :watchSlidesProgress="true" @swiper="onSwiperExp" effect="coverflow">
|
||||
<swiper-slide>
|
||||
<img src="public/img/op1.png" style="width: 100%;">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img src="public/img/op2.png" style="width: 100%;">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img src="public/img/op1.png" style="width: 100%;">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img src="public/img/op2.png" style="width: 100%;">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img src="public/img/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]" style="gap: 30px;">
|
||||
<div style="width: 25px;height:5px;background-color: #fc7428;"></div>
|
||||
<div style="width: 25px;height:5px;background-color: #C1C1C1;"></div>
|
||||
<div style="width: 25px;height:5px;background-color: #C1C1C1;"></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="box_12 flex-row justify-center">
|
||||
<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">
|
||||
为深入学习贯彻党的二十大精神，落实省、市委决策，
|
||||
<br />
|
||||
充分发挥民营企业的凝聚力、向心力和创造力，赴..
|
||||
</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>
|
||||
<div class="box_14 flex-row justify-center">
|
||||
<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">
|
||||
为深入学习贯彻党的二十大精神，落实省、市委决策，
|
||||
<br />
|
||||
充分发挥民营企业的凝聚力、向心力和创造力，赴..
|
||||
</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">
|
||||
为深入学习贯彻党的二十大精神，落实省、市委决策，
|
||||
<br />
|
||||
充分发挥民营企业的凝聚力、向心力和创造力，赴..
|
||||
</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="group_28 flex-row justify-center numberTopBox">
|
||||
<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 class="section_7 flex-col"></div>
|
||||
<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 class="section_8 flex-col"></div>
|
||||
<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 class="section_9 flex-col"></div>
|
||||
<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 class="group_29 grid grid-cols-6 gap-6 mr-auto">
|
||||
<div class="bottom_imgs topSj"></div>
|
||||
<!-- <div v-for="item in 18" class="">
|
||||
<img class="image_11 topSj" referrerpolicy="no-referrer" src="public/img/q1.png" />
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="box_18 flex-col" style="overflow: hidden;">
|
||||
<span class="text_53" style="color: #fff;">联系我们</span>
|
||||
<span class="text_54" style="color: #fff;">cooperative partner </span>
|
||||
|
||||
<div class="group_29 grid grid-cols-6 gap-6 mr-auto">
|
||||
<div class="bottom_imgs topSj"></div>
|
||||
<!-- <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();
|
||||
|
||||
// 新闻数据
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
animate()
|
||||
})
|
||||
})
|
||||
const numberAnimationInstRef = ref()
|
||||
const numberAnimationInstRefKH = ref()
|
||||
const numberAnimationInstRefJS = ref()
|
||||
const numberAnimationInstRefHY = ref()
|
||||
const animate = () => {
|
||||
|
||||
const sr = ScrollReveal();
|
||||
sr.reveal('.leftBox', {
|
||||
origin: "left",
|
||||
distance: "1000px",
|
||||
duration: 1300,
|
||||
delay: 100,
|
||||
opacity: 0,
|
||||
scale: 0.9,
|
||||
reset: true,
|
||||
mobile: true,
|
||||
})
|
||||
sr.reveal('.rightBox', {
|
||||
origin: "right",
|
||||
distance: "1000px",
|
||||
duration: 1300,
|
||||
delay: 100,
|
||||
opacity: 0,
|
||||
scale: 0.9,
|
||||
reset: true,
|
||||
mobile: true,
|
||||
})
|
||||
sr.reveal('.topBox', {
|
||||
origin: "top",
|
||||
distance: "1000px",
|
||||
duration: 1300,
|
||||
delay: 100,
|
||||
opacity: 0,
|
||||
scale: 0.9,
|
||||
reset: true,
|
||||
mobile: true,
|
||||
})
|
||||
sr.reveal('.bottomBox', {
|
||||
origin: "bottom",
|
||||
distance: "1000px",
|
||||
duration: 1300,
|
||||
delay: 100,
|
||||
opacity: 0,
|
||||
scale: 0.9,
|
||||
reset: true,
|
||||
mobile: true,
|
||||
})
|
||||
sr.reveal('.numberTopBox', {
|
||||
origin: "top",
|
||||
distance: "1000px",
|
||||
duration: 1300,
|
||||
delay: 100,
|
||||
opacity: 0,
|
||||
scale: 0.9,
|
||||
reset: true,
|
||||
mobile: true,
|
||||
beforeReveal: function (el: any) {
|
||||
numberAnimationInstRef.value.play()
|
||||
numberAnimationInstRefKH.value.play()
|
||||
numberAnimationInstRefJS.value.play()
|
||||
numberAnimationInstRefHY.value.play()
|
||||
},
|
||||
})
|
||||
sr.reveal('.topSj', {
|
||||
origin: "bottom",
|
||||
distance: "1000px",
|
||||
duration: 1300,
|
||||
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.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;
|
||||
}
|
||||
|
||||
.group_666 .swiper-slide img {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
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);
|
||||
}
|
||||
.bottom_imgs{
|
||||
background: url(/public/img/qall.png);
|
||||
width: 1230px;
|
||||
height: 272px;
|
||||
background-size: 100%;
|
||||
}
|
||||
.content_box{
|
||||
background: url(/public/img/m1.png);;
|
||||
width: 561px;height: 521px;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
right: -12px;
|
||||
bottom: -13px;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
497
pages/societyDuty.vue
Normal file
497
pages/societyDuty.vue
Normal file
@ -0,0 +1,497 @@
|
||||
<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 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">
|
||||
<div class="box_2 flex-col">
|
||||
<div class="group_3 flex-row 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">
|
||||
<span class="text_9">公司简介</span>
|
||||
<span class="text_10">运营方法论</span>
|
||||
<span class="text_11">互联网营销</span>
|
||||
</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="content_box"></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">
|
||||
Our BusinessWay
|
||||
</span>
|
||||
<div class="flex-row justify-center align-center">
|
||||
<div class="leftBox" style="margin-right: 30px;">
|
||||
<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 justify-between">
|
||||
<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 justify-between">
|
||||
<div class="image-wrapper_5 flex-col">
|
||||
<img class="label_3" referrerpolicy="no-referrer" src="public/img/r4.png" />
|
||||
</div>
|
||||
<div class="text-group_3 flex-col justify-between">
|
||||
<span class="text_18">企业数字化自媒体托管专家</span>
|
||||
<span class="text_19">
|
||||
业团队代运营+AI智能内容生成+多平台精准投放，助您专注核心业务
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group_10 flex-col"></div>
|
||||
<div class="group_7 flex-row justify-between">
|
||||
<div class="image-wrapper_5 flex-col">
|
||||
<img class="label_3" referrerpolicy="no-referrer" src="public/img/r3.png" />
|
||||
</div>
|
||||
<div class="text-group_3 flex-col justify-between">
|
||||
<span class="text_18">全流程抖音短视频制作服务</span>
|
||||
<span class="text_19">
|
||||
助您快速打造高播放量、高互动率的爆款短视频
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group_12 flex-col"></div>
|
||||
<div class="group_13 flex-row justify-between">
|
||||
<div class="image-wrapper_5 flex-col">
|
||||
<img class="label_3" referrerpolicy="no-referrer" src="public/img/r2.png" />
|
||||
</div>
|
||||
<div class="text-group_5 flex-col justify-between">
|
||||
<span class="text_22">全栈H5开发解决方案</span>
|
||||
<span class="text_23">
|
||||
基于HTML5/CSS3/JavaScript核心技术助力实现高转化率与沉浸式用户体验
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box_7 flex-col">
|
||||
<span class="text_24 topBox">行业案例</span>
|
||||
<span class="text_15 topBox">Industry Cases</span>
|
||||
<!-- <div class="group_14 flex-row justify-between align-center" style="flex-wrap: wrap;">
|
||||
<div class="flex-row">
|
||||
<div class="text_25">
|
||||
<span>医疗</span>
|
||||
<div
|
||||
style="width: 100%;height: 1px;background-color: #fc7428;position: absolute;bottom: -21px;">
|
||||
</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="flex-row justify-center align-center">
|
||||
<div style="margin-right: 10px;">
|
||||
<span class="text_32">更多案例</span>
|
||||
</div>
|
||||
<div>
|
||||
<img src="public/img/anli.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="group_15" style="flex: 0 0 100%;"></div>
|
||||
</div> -->
|
||||
|
||||
<div class="dswper">
|
||||
<swiper ref="swiper_exp" :slidesPerView="3" loop :loopedSlides="3" :autoplay="false" centeredSlides
|
||||
:modules="modules" :watchSlidesProgress="true" @swiper="onSwiperExp" effect="coverflow">
|
||||
<swiper-slide>
|
||||
<img src="public/img/op1.png" style="width: 100%;">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img src="public/img/op2.png" style="width: 100%;">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img src="public/img/op1.png" style="width: 100%;">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img src="public/img/op2.png" style="width: 100%;">
|
||||
</swiper-slide>
|
||||
<swiper-slide>
|
||||
<img src="public/img/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]" style="gap: 30px;">
|
||||
<div style="width: 25px;height:5px;background-color: #fc7428;"></div>
|
||||
<div style="width: 25px;height:5px;background-color: #C1C1C1;"></div>
|
||||
<div style="width: 25px;height:5px;background-color: #C1C1C1;"></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="box_12 flex-row justify-center">
|
||||
<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">
|
||||
为深入学习贯彻党的二十大精神，落实省、市委决策，
|
||||
<br />
|
||||
充分发挥民营企业的凝聚力、向心力和创造力，赴..
|
||||
</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>
|
||||
<div class="box_14 flex-row justify-center">
|
||||
<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">
|
||||
为深入学习贯彻党的二十大精神，落实省、市委决策，
|
||||
<br />
|
||||
充分发挥民营企业的凝聚力、向心力和创造力，赴..
|
||||
</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">
|
||||
为深入学习贯彻党的二十大精神，落实省、市委决策，
|
||||
<br />
|
||||
充分发挥民营企业的凝聚力、向心力和创造力，赴..
|
||||
</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="group_28 flex-row justify-center numberTopBox">
|
||||
<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 class="section_7 flex-col"></div>
|
||||
<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 class="section_8 flex-col"></div>
|
||||
<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 class="section_9 flex-col"></div>
|
||||
<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 class="group_29 grid grid-cols-6 gap-6 mr-auto">
|
||||
<div class="bottom_imgs topSj"></div>
|
||||
<!-- <div v-for="item in 18" class="">
|
||||
<img class="image_11 topSj" referrerpolicy="no-referrer" src="public/img/q1.png" />
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="box_18 flex-col" style="overflow: hidden;">
|
||||
<span class="text_53" style="color: #fff;">联系我们</span>
|
||||
<span class="text_54" style="color: #fff;">cooperative partner </span>
|
||||
|
||||
<div class="group_29 grid grid-cols-6 gap-6 mr-auto">
|
||||
<div class="bottom_imgs topSj"></div>
|
||||
<!-- <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();
|
||||
|
||||
// 新闻数据
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
animate()
|
||||
})
|
||||
})
|
||||
const numberAnimationInstRef = ref()
|
||||
const numberAnimationInstRefKH = ref()
|
||||
const numberAnimationInstRefJS = ref()
|
||||
const numberAnimationInstRefHY = ref()
|
||||
const animate = () => {
|
||||
|
||||
const sr = ScrollReveal();
|
||||
sr.reveal('.leftBox', {
|
||||
origin: "left",
|
||||
distance: "1000px",
|
||||
duration: 1300,
|
||||
delay: 100,
|
||||
opacity: 0,
|
||||
scale: 0.9,
|
||||
reset: true,
|
||||
mobile: true,
|
||||
})
|
||||
sr.reveal('.rightBox', {
|
||||
origin: "right",
|
||||
distance: "1000px",
|
||||
duration: 1300,
|
||||
delay: 100,
|
||||
opacity: 0,
|
||||
scale: 0.9,
|
||||
reset: true,
|
||||
mobile: true,
|
||||
})
|
||||
sr.reveal('.topBox', {
|
||||
origin: "top",
|
||||
distance: "1000px",
|
||||
duration: 1300,
|
||||
delay: 100,
|
||||
opacity: 0,
|
||||
scale: 0.9,
|
||||
reset: true,
|
||||
mobile: true,
|
||||
})
|
||||
sr.reveal('.bottomBox', {
|
||||
origin: "bottom",
|
||||
distance: "1000px",
|
||||
duration: 1300,
|
||||
delay: 100,
|
||||
opacity: 0,
|
||||
scale: 0.9,
|
||||
reset: true,
|
||||
mobile: true,
|
||||
})
|
||||
sr.reveal('.numberTopBox', {
|
||||
origin: "top",
|
||||
distance: "1000px",
|
||||
duration: 1300,
|
||||
delay: 100,
|
||||
opacity: 0,
|
||||
scale: 0.9,
|
||||
reset: true,
|
||||
mobile: true,
|
||||
beforeReveal: function (el: any) {
|
||||
numberAnimationInstRef.value.play()
|
||||
numberAnimationInstRefKH.value.play()
|
||||
numberAnimationInstRefJS.value.play()
|
||||
numberAnimationInstRefHY.value.play()
|
||||
},
|
||||
})
|
||||
sr.reveal('.topSj', {
|
||||
origin: "bottom",
|
||||
distance: "1000px",
|
||||
duration: 1300,
|
||||
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.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;
|
||||
}
|
||||
|
||||
.group_666 .swiper-slide img {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
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);
|
||||
}
|
||||
.bottom_imgs{
|
||||
background: url(/public/img/qall.png);
|
||||
width: 1230px;
|
||||
height: 272px;
|
||||
background-size: 100%;
|
||||
}
|
||||
.content_box{
|
||||
background: url(/public/img/m1.png);;
|
||||
width: 561px;height: 521px;
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
right: -12px;
|
||||
bottom: -13px;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 191 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 162 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 162 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 179 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 294 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 179 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 366 KiB |
BIN
public/img/0.png
Normal file
BIN
public/img/0.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 312 KiB |
BIN
public/img/1.png
Normal file
BIN
public/img/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 252 KiB |
BIN
public/img/2.png
Normal file
BIN
public/img/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 198 KiB |
BIN
public/img/3.png
Normal file
BIN
public/img/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 235 KiB |
BIN
public/img/4.png
Normal file
BIN
public/img/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 247 KiB |
BIN
public/img/5.png
Normal file
BIN
public/img/5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 253 KiB |
BIN
public/img/6.png
Normal file
BIN
public/img/6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 267 KiB |
BIN
public/img/7.png
Normal file
BIN
public/img/7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 282 KiB |
BIN
public/img/abus.png
Normal file
BIN
public/img/abus.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.9 MiB |
|
Before Width: | Height: | Size: 152 B After Width: | Height: | Size: 152 B |
|
Before Width: | Height: | Size: 2.3 MiB After Width: | Height: | Size: 2.3 MiB |
BIN
public/img/bf.png
Normal file
BIN
public/img/bf.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
public/img/bg-3.png
Normal file
BIN
public/img/bg-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
BIN
public/img/bg-4.png
Normal file
BIN
public/img/bg-4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 MiB |
BIN
public/img/bg-5.png
Normal file
BIN
public/img/bg-5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
|
Before Width: | Height: | Size: 206 KiB After Width: | Height: | Size: 206 KiB |
|
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 54 KiB |
BIN
public/img/customer/bg-s.png
Normal file
BIN
public/img/customer/bg-s.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 113 KiB |
BIN
public/img/customer/topnav.png
Normal file
BIN
public/img/customer/topnav.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
BIN
public/img/index/a-yunweishuju1x@2x.png
Normal file
BIN
public/img/index/a-yunweishuju1x@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
BIN
public/img/index/aiyingyong@2x.png
Normal file
BIN
public/img/index/aiyingyong@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
BIN
public/img/index/kaifapeizhi@2x.png
Normal file
BIN
public/img/index/kaifapeizhi@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
public/img/index/wangluoanquanshebei@2x.png
Normal file
BIN
public/img/index/wangluoanquanshebei@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
BIN
public/img/index/yekuogongdianfangan@2x.png
Normal file
BIN
public/img/index/yekuogongdianfangan@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
BIN
public/img/index/矩形 8@2x.png
Normal file
BIN
public/img/index/矩形 8@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
public/img/index/矩形 92@2x.png
Normal file
BIN
public/img/index/矩形 92@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 807 KiB |
BIN
public/img/index/组 4675@2x.png
Normal file
BIN
public/img/index/组 4675@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
BIN
public/img/index/组 4677@2x.png
Normal file
BIN
public/img/index/组 4677@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
BIN
public/img/index/组 4678@2x.png
Normal file
BIN
public/img/index/组 4678@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
BIN
public/img/index/组 4679@2x.png
Normal file
BIN
public/img/index/组 4679@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
public/img/index/组 4681@2x.png
Normal file
BIN
public/img/index/组 4681@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
BIN
public/img/index/组 5@2x.png
Normal file
BIN
public/img/index/组 5@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 143 KiB |
BIN
public/img/index/蒙版组 37@2x.png
Normal file
BIN
public/img/index/蒙版组 37@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
BIN
public/img/index/蒙版组 88@2x.png
Normal file
BIN
public/img/index/蒙版组 88@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
BIN
public/img/joinus.png
Normal file
BIN
public/img/joinus.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.9 MiB |
|
Before Width: | Height: | Size: 270 B After Width: | Height: | Size: 270 B |
BIN
public/img/logo.png
Normal file
BIN
public/img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
public/img/m1.png
Normal file
BIN
public/img/m1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
|
Before Width: | Height: | Size: 720 B After Width: | Height: | Size: 720 B |
BIN
public/img/news1.png
Normal file
BIN
public/img/news1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 694 KiB |
BIN
public/img/news2.png
Normal file
BIN
public/img/news2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 242 KiB |
BIN
public/img/news3.png
Normal file
BIN
public/img/news3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 844 KiB |
BIN
public/img/op1.png
Normal file
BIN
public/img/op1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 794 KiB |
BIN
public/img/op2.png
Normal file
BIN
public/img/op2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 715 KiB |
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 8.2 KiB After Width: | Height: | Size: 8.2 KiB |
|
Before Width: | Height: | Size: 7.6 KiB After Width: | Height: | Size: 7.6 KiB |
|
Before Width: | Height: | Size: 7.9 KiB After Width: | Height: | Size: 7.9 KiB |
|
Before Width: | Height: | Size: 8.5 KiB After Width: | Height: | Size: 8.5 KiB |
|
Before Width: | Height: | Size: 9.6 KiB After Width: | Height: | Size: 9.6 KiB |
|
Before Width: | Height: | Size: 9.4 KiB After Width: | Height: | Size: 9.4 KiB |
|
Before Width: | Height: | Size: 8.8 KiB After Width: | Height: | Size: 8.8 KiB |
|
Before Width: | Height: | Size: 9.0 KiB After Width: | Height: | Size: 9.0 KiB |
|
Before Width: | Height: | Size: 8.1 KiB After Width: | Height: | Size: 8.1 KiB |
|
Before Width: | Height: | Size: 6.2 KiB After Width: | Height: | Size: 6.2 KiB |
|
Before Width: | Height: | Size: 7.5 KiB After Width: | Height: | Size: 7.5 KiB |
|
Before Width: | Height: | Size: 8.6 KiB After Width: | Height: | Size: 8.6 KiB |
|
Before Width: | Height: | Size: 9.2 KiB After Width: | Height: | Size: 9.2 KiB |
|
Before Width: | Height: | Size: 9.2 KiB After Width: | Height: | Size: 9.2 KiB |
|
Before Width: | Height: | Size: 8.0 KiB After Width: | Height: | Size: 8.0 KiB |
|
Before Width: | Height: | Size: 8.7 KiB After Width: | Height: | Size: 8.7 KiB |
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
BIN
public/img/qall.png
Normal file
BIN
public/img/qall.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 654 KiB |
|
Before Width: | Height: | Size: 630 B After Width: | Height: | Size: 630 B |
|
Before Width: | Height: | Size: 784 B After Width: | Height: | Size: 784 B |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 257 B After Width: | Height: | Size: 257 B |
BIN
public/img/t2.png
Normal file
BIN
public/img/t2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
|
Before Width: | Height: | Size: 346 KiB After Width: | Height: | Size: 346 KiB |
|
Before Width: | Height: | Size: 491 B After Width: | Height: | Size: 491 B |
|
Before Width: | Height: | Size: 668 B After Width: | Height: | Size: 668 B |
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 785 B After Width: | Height: | Size: 785 B |
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
Loading…
x
Reference in New Issue
Block a user