389 lines
12 KiB
Vue
389 lines
12 KiB
Vue
<template>
|
||
<div style="width: 100%;">
|
||
<!-- Swiper 容器 -->
|
||
<div class="group_666" style="position: relative;">
|
||
<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
|
||
<swiper-slide>
|
||
<img src="public/img/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" style="background: #ffffff;height: 500px;">
|
||
|
||
<div class="group_5 flex-col justify-center align-center rightBox">
|
||
<div class="flex-col section_1sa"></div>
|
||
</div>
|
||
|
||
<div class="group_4 flex-col leftBox">
|
||
<div class="text-group_1 flex-col justify-between" style="width: 100%;">
|
||
<span class="text_7" style="width: 432px;position: relative;">
|
||
洛阳灵睿网络技术有限公司
|
||
<img src="public/img/about/xing.png" alt="" style="position: absolute;top: -10px; right: 0;"/>
|
||
</span>
|
||
<span class="text_8" style="width: 100%;color: #3D3D3D;">
|
||
智慧信息化与数字内容服务领航者
|
||
</span>
|
||
</div>
|
||
|
||
<span class="text_12" style="height: auto;font-size: 14px;">
|
||
洛阳灵睿网络技术有限公司成立于2006年，深耕互联网行业，专注智慧信息化与数字内容服务领域19年。是集技术研发、创意策划、全媒体运营于一体的高新技术企业。公司以“技术赋能场景，内容驱动价值”为核心使命，专注于为大型公立医院、教育机构、企事业单位、品牌营销策略提供一站式智慧化解决方案与品牌数字化升级服务，助力客户实现效率提升、品牌增值与精准传播。
|
||
</span>
|
||
<span class="textss13">
|
||
专注互联网领域，发散新媒体创思，执着深耕口碑服务，扎实落地品牌内容，共创新信息化与内容服务业态。
|
||
</span>
|
||
<div class="group_28 flex-row justify-between numberTopBox" style="width: 592px;text-align: center;">
|
||
<div class="text-group_9 flex-col justify-between" style="width: auto;height: 80px;">
|
||
<span class="text_55" style="font-size: 32px;text-align: center;width: auto;">
|
||
<n-number-animation :duration="5000" ref="numberAnimationInstRef" :active="false"
|
||
:from="0" :to="1000"></n-number-animation>+</span>
|
||
<span class="">服务客户</span>
|
||
</div>
|
||
|
||
|
||
<div class="text-group_10 flex-col justify-between" style="width: auto;height: 80px;">
|
||
<span class="text_58" style="font-size: 32px;text-align: center;width: auto;"><n-number-animation :duration="5000"
|
||
ref="numberAnimationInstRefKH" :active="false" :from="0"
|
||
:to="19"></n-number-animation>+</span>
|
||
<span class="">技术沉淀</span>
|
||
</div>
|
||
|
||
<div class="text-group_11 flex-col justify-between" style="width: auto;height: 80px;">
|
||
<span class="text_61" style="font-size: 32px;text-align: center;width: auto;"><n-number-animation :duration="5000"
|
||
ref="numberAnimationInstRefJS" :active="false" :from="0"
|
||
:to="100"></n-number-animation>+</span>
|
||
<span class="">覆盖行业</span>
|
||
</div>
|
||
|
||
|
||
<div class="text-group_12 flex-col justify-between" style="width: auto;height: 80px;">
|
||
<span class="text_64" style="font-size: 32px;text-align: center;width: auto;"><n-number-animation :duration="5000"
|
||
ref="numberAnimationInstRefHY" :active="false" :from="0"
|
||
:to="30"></n-number-animation>+</span>
|
||
<span class="">技术团队</span>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex rongyu1s bottomBox">
|
||
<div class="flex" style="width: 12%;align-items: center;">
|
||
<img style="margin-left: 20px;" src="/public/img/about/jiangbei.png" alt="">
|
||
<span class="spanst">荣誉标签：</span>
|
||
</div>
|
||
<div class="flex" style="width: 88%;justify-content: space-between;">
|
||
<span class="spans">中国电子商务协会工业电商委员会河南分会单位</span>
|
||
<span class="spans">新华网、人民网、今日头条新闻联络中心</span>
|
||
<span class="spans" style="margin-right:20px;">灵睿与郑州、洛阳等地的网信以及网监系统保持长期合作获。</span>
|
||
</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" style="background: #F8F8F8;">
|
||
|
||
<div class="group_4 flex-col leftBox">
|
||
<div class="text-group_1 flex-col justify-between" style="width: 100%;">
|
||
<span class="text_7" style="width: 242px;position: relative;">
|
||
睿创团队介绍
|
||
<img src="public/img/about/xing.png" alt="" style="position: absolute;top: -10px; right: 0;"/>
|
||
</span>
|
||
</div>
|
||
|
||
<span class="text_12" style="height: auto;font-size: 14px;">
|
||
灵睿基因一直是一群年轻的青年人组成，我们致力打造专业的团队化运营模式，集合程序猿、设计狗、运营喵的创作者联盟。年轻不是资本，敢重新定义年轻才是，在互联网领域，我们致力做一支专业，积极，上进的年轻团队；80后主导，90后主力，00后紧随。以“为客户创造价值 用互联网思维打造品牌”为使命。以“正直诚信、实干勇敢、协作共赢、创业精神”为价值观。努力发展，破茧成蝶。
|
||
</span>
|
||
|
||
|
||
</div>
|
||
|
||
<div class="group_5 flex-col justify-center align-center rightBox">
|
||
<div class="flex-col section_1sb"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="box_7 flex-col" style="background: url(public/img/about/ruanzhu.png) 100% no-repeat;;">
|
||
<span class="text_24 topBox">著作权和荣誉证书</span>
|
||
<span class="text_15 topBox">Company environment</span>
|
||
|
||
|
||
<div class="dswper" style="margin-top: 0;">
|
||
<swiper ref="swiper_exp" :slidesPerView="5" loop :loopedSlides="3" :autoplay="false" centeredSlides
|
||
:modules="modules" :watchSlidesProgress="true" @swiper="onSwiperExp" >
|
||
<swiper-slide v-for="(item,index) in 21" :key="index" style="padding: 0 10px;">
|
||
<img :src="`/img/about/${item}.jpg`" 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-[-20px]" 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_17 flex-col" style="overflow: hidden;">
|
||
<span class="text_53">部分伙伴</span>
|
||
<span class="text_54">Our Business </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%;
|
||
}
|
||
|
||
|
||
|
||
.section_1sa {
|
||
height: 410px;
|
||
background: url(/public/img/about/t1a.png) 100% no-repeat;
|
||
width: 576px;
|
||
z-index: 10;
|
||
}
|
||
.section_1sb {
|
||
height: 410px;
|
||
background: url(/public/img/about/t1b.png) 100% no-repeat;
|
||
width: 576px;
|
||
z-index: 10;
|
||
}
|
||
|
||
|
||
.textss13{
|
||
width: 584px;
|
||
font-weight: 600;
|
||
font-size: 14px;
|
||
color: #768597;
|
||
line-height: 22px;
|
||
font-family: Microsoft YaHei UI-Regular;
|
||
}
|
||
.rongyu1s{
|
||
width: 1340px;
|
||
height: 68px;
|
||
background: #F8F8F8;
|
||
border-radius: 0px 0px 0px 0px;
|
||
align-items: center;
|
||
margin: 0 auto;
|
||
margin-bottom: 70px;
|
||
.spanst{
|
||
width: 90px;
|
||
height: 32px;
|
||
font-family: Microsoft YaHei UI, Microsoft YaHei UI;
|
||
font-weight: bold;
|
||
font-size: 18px;
|
||
color: #3D3D3D;
|
||
line-height: 32px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
margin-left: 20px;
|
||
}
|
||
.spans{
|
||
// width: px;
|
||
height: 21px;
|
||
font-family: Microsoft YaHei UI, Microsoft YaHei UI;
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #3D3D3D;
|
||
line-height: 21px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
}
|
||
}
|
||
</style>
|