榆钱落尽槿花稀
9bf2ef8ed5
调整了多个页面的样式，包括间距、字体大小、背景颜色等，以优化布局和响应式设计。具体修改包括： - 调整了 `.box_1` 在移动设备下的高度。 - 修改了 `.bottom_imgss` 的背景颜色。 - 在 `AppFooter` 组件中添加了分隔线并调整了背景颜色。 - 优化了 `phone_index.vue` 中的边距和高度设置。 - 在 `phone_concatUs.vue` 中调整了 padding 和背景颜色。 - 在 `phone_info/[id].vue` 中优化了标题和内容的边距。 - 在 `phone_societyDuty.vue` 和 `phone_societyDutyNew.vue` 中添加了顶部导航栏和分隔线。 - 在 `phone_aboutUs.vue` 中调整了文本对齐方式和边距。 - 在 `phone_proServices_con.vue` 和 `phone_proServices.vue` 中优化了布局和样式。 这些修改旨在提升用户体验和界面一致性。
410 lines
12 KiB
Vue
410 lines
12 KiB
Vue
<template>
|
||
<div style="width: 100%;">
|
||
<!-- Swiper 容器 -->
|
||
<div class="group_666" style="position: relative;height: 250px;">
|
||
<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
|
||
<swiper-slide>
|
||
<img :src="`${cdnUrl}/img/abus.png`" style="width: 100%;height: 100%;object-fit: cover;">
|
||
</swiper-slide>
|
||
<swiper-slide>
|
||
<img :src="`${cdnUrl}/img/abus.png`" style="width: 100%;height: 100%;object-fit: cover;">
|
||
</swiper-slide>
|
||
</swiper>
|
||
</div>
|
||
<div class="group_2 flex-col">
|
||
<div class="box_2 flex-col">
|
||
<div class="group_3 flex-row justify-center" style="background: #ffffff;height: auto;">
|
||
|
||
<!-- <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" style="padding: 40px 20px 0px 20px;width: 100%;">
|
||
<div class="text-group_1 flex-col" style="width: 100%;">
|
||
<span class="text_7"
|
||
style="width: 100%;position: relative;text-align: center;font-size: 26px;">
|
||
洛阳灵睿网络技术有限公司
|
||
</span>
|
||
<span class="text_8" style="width: 100%;color: #3D3D3D;text-align: center;">
|
||
智慧信息化与数字内容服务领航者
|
||
</span>
|
||
</div>
|
||
|
||
<span class="text_top_12" style="text-align: justify;height: auto;font-size: 16px;margin-top: 20px;">
|
||
洛阳灵睿网络技术有限公司成立于2006年，深耕互联网行业，专注智慧信息化与数字内容服务领域19年。是集技术研发、创意策划、全媒体运营于一体的高新技术企业。公司以“技术赋能场景，内容驱动价值”为核心使命，专注于为大型公立医院、教育机构、企事业单位、品牌营销策略提供一站式智慧化解决方案与品牌数字化升级服务，助力客户实现效率提升、品牌增值与精准传播。
|
||
</span>
|
||
<span class="textss13" style="text-align: justify;font-size: 16px;">
|
||
专注互联网领域，发散新媒体创思，执着深耕口碑服务，扎实落地品牌内容，共创新信息化与内容服务业态。
|
||
</span>
|
||
<div class="group_28 flex-row justify-between numberTopBox"
|
||
style="width: 100%;text-align: center;margin-top: 30px;">
|
||
<div class="text-group_9 flex-col justify-between" style="width: auto;height: 70px;">
|
||
<div class="text_55" style="font-size: 28px;text-align: center;width: auto;">
|
||
<n-number-animation :duration="5000" ref="numberAnimationInstRef" :active="false"
|
||
:from="0" :to="1000"></n-number-animation>
|
||
<span style="font-size: 20px;">+</span>
|
||
</div>
|
||
<span class="">服务客户</span>
|
||
</div>
|
||
|
||
|
||
<div class="text-group_10 flex-col justify-between" style="width: auto;height: 70px;">
|
||
<div class="text_58" style="font-size: 28px;text-align: center;width: auto;">
|
||
<n-number-animation :duration="5000" ref="numberAnimationInstRefKH" :active="false"
|
||
:from="0" :to="19"></n-number-animation>
|
||
<span style="font-size: 20px;">年</span>
|
||
</div>
|
||
<span class="">技术沉淀</span>
|
||
</div>
|
||
|
||
<div class="text-group_11 flex-col justify-between" style="width: auto;height: 70px;">
|
||
<div class="text_61" style="font-size: 28px;text-align: center;width: auto;">
|
||
<n-number-animation :duration="5000" ref="numberAnimationInstRefJS" :active="false"
|
||
:from="0" :to="100"></n-number-animation>
|
||
<span style="font-size: 20px;">+</span>
|
||
</div>
|
||
<div class="">覆盖行业</div>
|
||
</div>
|
||
|
||
|
||
<div class="text-group_12 flex-col justify-between" style="width: auto;height: 70px;">
|
||
<div class="text_64" style="font-size: 28px;text-align: center;width: auto;">
|
||
<n-number-animation :duration="5000" ref="numberAnimationInstRefHY" :active="false"
|
||
:from="0" :to="30"></n-number-animation>
|
||
<span style="font-size: 20px;">+</span>
|
||
</div>
|
||
<span class="">技术团队</span>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex rongyu1s bottomBox">
|
||
<div class="flex" style="width: 55%;align-items: center;">
|
||
<img style="margin-left: 20px;" :src="`${cdnUrl}/img/about/jiangbei.png`" alt="">
|
||
<span class="spanst">荣誉标签：</span>
|
||
</div>
|
||
<div class="flex" style="width: 85%;overflow: hidden;">
|
||
<n-marquee>
|
||
<div class="spans" style="margin-right: 50px;display: inline-block;">中国电子商务协会工业电商委员会河南分会单位
|
||
</div>
|
||
<div class="spans" style="display: inline-block;margin-right: 50px;">新华网、人民网、今日头条新闻联络中心
|
||
</div>
|
||
<div class="spans" style="display: inline-block;margin-right: 50px;">
|
||
灵睿与郑州、洛阳等地的网信以及网监系统保持长期合作获</div>
|
||
</n-marquee>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="group_2 flex-col">
|
||
<div class="box_2 flex-col">
|
||
<div class="group_3 "
|
||
style="background: #F8F8F8;flex-wrap: wrap;padding:40px 20px;">
|
||
<div class="group_4 leftBox" style="width: 100%;">
|
||
<div class="text-group_1 justify-between" style="width: 100%;height: auto;">
|
||
<span class="text_7" style="position: relative;margin: 0px auto;width: auto;">
|
||
睿创团队介绍
|
||
<img :src="`${cdnUrl}/img/about/xing.png`" alt=""
|
||
style="position: absolute;top: -10px; right: -30px;" />
|
||
</span>
|
||
</div>
|
||
|
||
<div class="text_12" style="text-align: justify;width: 100%;;height: auto;font-size: 16px;padding-top: 10px;">
|
||
灵睿基因一直是一群年轻的青年人组成，我们致力打造专业的团队化运营模式，集合程序猿、设计狗、运营喵的创作者联盟。年轻不是资本，敢重新定义年轻才是，在互联网领域，我们致力做一支专业，积极，上进的年轻团队；80后主导，90后主力，00后紧随。以“为客户创造价值 用互联网思维打造品牌”为使命。以“正直诚信、实干勇敢、协作共赢、创业精神”为价值观。努力发展，破茧成蝶。
|
||
</div>
|
||
</div>
|
||
<div class="group_5 rightBox" style="width: 100%;margin-top: 30px;">
|
||
<div class="flex-col section_1sb"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="box_7 flex-col">
|
||
<span class="text_24 topBox" style="margin: 40px 0px 10px 0px;">著作权和荣誉证书</span>
|
||
<span class="text_15 topBox">Company environment</span>
|
||
<div class="dswper" style="margin-top: 30px;width: 100%;">
|
||
<swiper ref="swiper_exp" :slidesPerView="2" loop :loopedSlides="2" :autoplay="{ delay: 2000 }"
|
||
: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="rongyu_cla flex-row justify-center align-center absolute w-full" style="gap: 10px;">
|
||
<div v-for="(_, index) in 3" :key="index" style="width: 25px; height: 5px;"
|
||
:style="{ backgroundColor: activeSlideIndex === index ? '#fc7428' : '#C1C1C1' }">
|
||
</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, NMarquee } from 'naive-ui'
|
||
let modules = [Autoplay, A11y, EffectCoverflow, EffectFade];
|
||
|
||
import "swiper/css";
|
||
import "swiper/css/navigation";
|
||
import "swiper/css/pagination";
|
||
import 'swiper/css/effect-coverflow';
|
||
import 'swiper/css/mousewheel'
|
||
import 'swiper/css/grid'
|
||
import 'swiper/css/effect-fade'
|
||
import 'swiper/css/autoplay'
|
||
import * as swiperAni from '@/assets/animate/animate.js'
|
||
import $api from '@/service/webRequest'
|
||
import { useI18n } from 'vue-i18n'
|
||
import { useStore } from '~/store'
|
||
const { locale } = useI18n()
|
||
const cdnUrl = useCdn()
|
||
|
||
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',
|
||
},
|
||
}
|
||
const activeSlideIndex = ref(0);
|
||
let vesSwiper: any = null
|
||
const onSwiperExp = (swiper: any) => {
|
||
vesSwiper = swiper
|
||
// 监听幻灯片变化事件
|
||
swiper.on('slideChange', () => {
|
||
// 更新当前活动幻灯片索引
|
||
activeSlideIndex.value = swiper.realIndex % 3
|
||
})
|
||
}
|
||
const swiper_exp = ref();
|
||
|
||
// 新闻数据
|
||
onMounted(() => {
|
||
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: 0,
|
||
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.scss";
|
||
|
||
:deep(.dswper .swiper-slide-next) {
|
||
transform: translate3d(0px, 0px, -507px) rotateX(0deg) rotateY(0deg) scale(1) !important;
|
||
}
|
||
|
||
:deep(.dswper .swiper-slide-prev) {
|
||
transform: translate3d(0px, 0px, -507px) rotateX(0deg) rotateY(0deg) scale(1) !important;
|
||
}
|
||
|
||
.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: var(--qall) no-repeat;
|
||
width: 1230px;
|
||
height: 272px;
|
||
background-size: 100% 100%;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
|
||
|
||
.section_1sa {
|
||
height: 410px;
|
||
background: var(--t1a) 100% no-repeat;
|
||
width: 576px;
|
||
z-index: 10;
|
||
}
|
||
|
||
.section_1sb {
|
||
height: 256px;
|
||
background: var(--t1b) no-repeat;
|
||
background-size: 100%;
|
||
width: 100%;
|
||
z-index: 10;
|
||
}
|
||
|
||
|
||
.textss13 {
|
||
width: 100%;
|
||
font-weight: 600;
|
||
font-size: 14px;
|
||
color: #768597;
|
||
line-height: 22px;
|
||
font-family: Microsoft YaHei UI-Regular;
|
||
text-align: center;
|
||
}
|
||
|
||
.rongyu1s {
|
||
width: 90%;
|
||
height: 68px;
|
||
background: #F8F8F8;
|
||
border-radius: 0px 0px 0px 0px;
|
||
align-items: center;
|
||
margin: 0 auto;
|
||
margin-bottom: 40px;
|
||
|
||
.spanst {
|
||
height: 32px;
|
||
font-family: Microsoft YaHei UI, Microsoft YaHei UI;
|
||
font-weight: bold;
|
||
font-size: 14px;
|
||
color: #3D3D3D;
|
||
line-height: 32px;
|
||
text-align: left;
|
||
font-style: normal;
|
||
text-transform: none;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
}
|
||
|
||
.n-marquee {
|
||
width: 100%;
|
||
}
|
||
|
||
.box_7 {
|
||
background: var(--ruanzhu) 100% no-repeat;
|
||
height: 458px;
|
||
}
|
||
|
||
.rongyu_cla {
|
||
margin-top: 30px;
|
||
}
|
||
|
||
.text_top_12 {
|
||
color: rgb(118, 133, 151);
|
||
font-size: 16px;
|
||
font-family: Microsoft YaHei UI-Regular;
|
||
font-weight: 400;
|
||
text-align: left;
|
||
line-height: 24px;
|
||
width: 100%;
|
||
text-align: center;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
@media (max-width: 786px) {
|
||
.group_3 {
|
||
gap: 0px;
|
||
height: 645px;
|
||
}
|
||
}
|
||
</style>
|