wo123/lingrui-web
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化多个页面的布局和样式，提升响应式设计

Browse Source 
调整了多个页面的高度、图片样式和布局结构，确保在不同设备上的显示效果一致。同时，修复了部分样式问题，增强了用户体验。
This commit is contained in:
王创世 2025-05-19 15:01:39 +08:00
parent 2052b40fbc
commit ef4548c1ec
9 changed files with 188 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
pages/aboutUs.vue
View File

@ -1,13 +1,13 @@
<template>
<div style="width: 100%;">
<!-- Swiper 容器 -->
<div class="group_666" style="position: relative;height: 550px;">
<div class="group_666" style="position: relative;min-height: 350px;">
<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
<swiper-slide>
<img :src="`${cdnUrl}/img/abus.png`" style="width: 100%;">
<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%;">
<img :src="`${cdnUrl}/img/abus.png`" style="width: 100%;height: 100%;object-fit: cover;">
</swiper-slide>
</swiper>
<!-- <div style="position: absolute;bottom: 50px;left: 0;width: 100%;z-index: 100;">
@ -26,24 +26,24 @@
</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: 480px;gap: 30px;">
<div class="group_3 flex-row justify-center" style="background: #ffffff;height: 400px;">
<div class="group_5 flex-col justify-center align-center rightBox">
<!-- <div class="group_5 flex-col justify-center align-center rightBox">
<div class="flex-col section_1sa"></div>
</div>
</div> -->
<div class="group_4 flex-col leftBox" style="padding-top: 40px;">
<div class="text-group_1 flex-col justify-between" style="width: 100%;">
<span class="text_7" style="width: 432px;position: relative;">
<div class="text-group_1 flex-col" style="width: 100%;">
<span class="text_7" style="width: 100%;position: relative;text-align: center;">
洛阳灵睿网络技术有限公司
<img :src="`${cdnUrl}/img/about/xing.png`" alt=""
style="position: absolute;top: -10px; right: 0;" />
<!-- <img :src="`${cdnUrl}/img/about/xing.png`" alt=""
style="position: absolute;top: -10px; right: 0;" /> -->
</span>
<span class="text_8" style="width: 100%;color: #3D3D3D;">
<span class="text_8" style="width: 100%;color: #3D3D3D;text-align: center;">
智慧信息化与数字内容服务领航者
</span>
</div>
<span class="text_12" style="height: auto;font-size: 14px;margin-top: 40px;">
<span class="text_top_12" style="height: auto;font-size: 14px;margin-top: 40px;">
洛阳灵睿网络技术有限公司成立于2006年，深耕互联网行业，专注智慧信息化与数字内容服务领域19年。是集技术研发、创意策划、全媒体运营于一体的高新技术企业。公司以“技术赋能场景，内容驱动价值”为核心使命，专注于为大型公立医院、教育机构、企事业单位、品牌营销策略提供一站式智慧化解决方案与品牌数字化升级服务，助力客户实现效率提升、品牌增值与精准传播。
</span>
<span class="textss13">
@ -52,35 +52,43 @@
<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;">
<div class="text_55" style="font-size: 42px;text-align: center;width: auto;">
<n-number-animation :duration="5000" ref="numberAnimationInstRef" :active="false"
:from="0" :to="1000"></n-number-animation>+</span>
:from="0" :to="1000"></n-number-animation>
<span style="font-size: 24px;">+</span>
</div>
<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
<div class="text_58"
style="font-size: 42px;text-align: center;width: auto;"><n-number-animation
:duration="5000" ref="numberAnimationInstRefKH" :active="false" :from="0"
:to="19"></n-number-animation>年</span>
:to="19"></n-number-animation>
<span style="font-size: 24px;">年</span>
</div>
<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
<div class="text_61"
style="font-size: 42px;text-align: center;width: auto;"><n-number-animation
:duration="5000" ref="numberAnimationInstRefJS" :active="false" :from="0"
:to="100"></n-number-animation>+</span>
:to="100"></n-number-animation>
<span style="font-size: 24px;">+</span>
</div>
<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
<div class="text_64"
style="font-size: 42px;text-align: center;width: auto;"><n-number-animation
:duration="5000" ref="numberAnimationInstRefHY" :active="false" :from="0"
:to="30"></n-number-animation>+</span>
:to="30"></n-number-animation>
<span style="font-size: 24px;">+</span>
</div>
<span class="">技术团队</span>
</div>
@ -147,7 +155,7 @@
<div class="dswper_right">
<img :src="`${cdnUrl}/img/opr.png">
</div> -->
<div class="flex-row justify-center align-center absolute w-full bottom-[-50px]" style="gap: 30px;">
<div class="rongyu_cla flex-row justify-center align-center absolute w-full" style="gap: 30px;">
<div v-for="(_, index) in 3" :key="index" style="width: 25px; height: 5px;"
:style="{ backgroundColor: activeSlideIndex === index ? '#fc7428' : '#C1C1C1' }">
</div>
@ -333,10 +341,11 @@ const animate = () => {
}
.bottom_imgs {
background: var(--qall);
background: var(--qall) no-repeat;
width: 1230px;
height: 272px;
background-size: 100%;
background-size: 100% 100%;
margin: 0 auto;
}
@ -357,12 +366,13 @@ const animate = () => {
.textss13 {
width: 584px;
width: 100%;
font-weight: 600;
font-size: 14px;
color: #768597;
line-height: 22px;
font-family: Microsoft YaHei UI-Regular;
text-align: center;
}
.rongyu1s {
@ -409,4 +419,34 @@ const animate = () => {
.box_7 {
background: var(--ruanzhu) 100% no-repeat;
}
.rongyu_cla {
margin-top: 50px;
}
.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: 63%;
text-align: center;
margin: 0 auto;
}
@media (max-width: 1440px) {
.rongyu1s {
width: 84%;
}
.box_7 {
height: 600px;
}
.rongyu_cla {
margin-top: 20px;
}
}
</style>

6
pages/concatUs.vue
View File

@ -1,13 +1,13 @@
<template>
<div style="width: 100%;">
<!-- Swiper 容器 -->
<div class="group_666" style="position: relative;height: 550px;">
<div class="group_666" style="position: relative;min-height: 400px;">
<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
<swiper-slide>
<img :src="`${cdnUrl}/img/joinus.png`" style="width: 100%;">
<img :src="`${cdnUrl}/img/joinus.png`" style="width: 100%;height: 100%;object-fit: cover;">
</swiper-slide>
<swiper-slide>
<img :src="`${cdnUrl}/img/joinus.png`" style="width: 100%;">
<img :src="`${cdnUrl}/img/joinus.png`" style="width: 100%;height: 100%;object-fit: cover;">
</swiper-slide>
</swiper>
<!-- <div style="position: absolute;bottom: 50px;left: 0;width: 100%;z-index: 100;">

8
pages/customerReviews.vue
View File

@ -1,13 +1,13 @@
<template>
<div style="width: 100%;">
<!-- Swiper 容器 -->
<div class="group_666" style="position: relative;height: 600px;">
<div class="group_666" style="position: relative;min-height: 450px;">
<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
<swiper-slide>
<img :src="`${cdnUrl}/img/customer/topnav.png`" style="width: 100%;">
<img :src="`${cdnUrl}/img/customer/topnav.png`" style="width: 100%;height: 100%;object-fit: cover;">
</swiper-slide>
<swiper-slide>
<img :src="`${cdnUrl}/img/customer/topnav.png`" style="width: 100%;">
<img :src="`${cdnUrl}/img/customer/topnav.png`" style="width: 100%;height: 100%;object-fit: cover;">
</swiper-slide>
</swiper>
</div>
@ -206,7 +206,7 @@ const animate = () => {
.bottom_imgss {
background: var(--bg-s);
height: 837px;
background-size: 100%;
background-size: 100% 100%;
}
.boxgs {

87
pages/index.vue
View File

@ -3,26 +3,27 @@
<!-- Swiper 容器 -->
<div class="group_666" style="position: relative;height: 100vh;">
<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
<swiper-slide>
<img :src="`${cdnUrl}/img/banner.png`" style="width: 100%;">
</swiper-slide>
<swiper-slide>
<img :src="`${cdnUrl}/img/banner2.png`" style="width: 100%;">
</swiper-slide>
<swiper-slide>
<video class="video_1" autoplay="autoplay" loop="loop" muted="muted" playsinline="playsinline"
:src="`${cdnUrl}/img/1212.mp4`"></video>
:src="`${cdnUrl}/img/1212.mp4`" style="width: 100%;height:100%;object-fit: cover;"></video>
</swiper-slide>
<swiper-slide>
<img :src="`${cdnUrl}/img/banner.png`" style="width: 100%;height: 100%;object-fit: cover;">
</swiper-slide>
<swiper-slide>
<img :src="`${cdnUrl}/img/banner2.png`" style="width: 100%;height: 100%;object-fit: cover;">
</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>
<div id="swipen_prev" style="cursor: pointer;">
<img :src="`${cdnUrl}/img/left.png`" alt="">
</div>
<div style="margin: 0px 20px;">
<img :src="`${cdnUrl}/img/morse.png`" alt="">
</div>
<div>
<div id="swipen_next" style="cursor: pointer;">
<img :src="`${cdnUrl}/img/right.png`" alt="">
</div>
</div>
@ -113,7 +114,8 @@
<div class="group_10s 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="`${cdnUrl}/img/aiyingyong.png`" />
<img class="label_3" referrerpolicy="no-referrer"
:src="`${cdnUrl}/img/aiyingyong.png`" />
</div>
<div class="text-group_3 flex-col justify-between">
<span class="text_18">AI应用与落地</span>
@ -125,7 +127,8 @@
<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="`${cdnUrl}/img/kaifapeizhi.png`" />
<img class="label_3" referrerpolicy="no-referrer"
:src="`${cdnUrl}/img/kaifapeizhi.png`" />
</div>
<div class="text-group_3 flex-col justify-between">
<span class="text_18">定制软件开发</span>
@ -195,7 +198,8 @@
<div class="group_10s 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="`${cdnUrl}/img/quanmeiti.png`" />
<img class="label_3" referrerpolicy="no-referrer"
:src="`${cdnUrl}/img/quanmeiti.png`" />
</div>
<div class="text-group_3_3 flex-col justify-between">
<span class="text_18">全媒体推广解决方案</span>
@ -219,7 +223,8 @@
<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="`${cdnUrl}/img/xianshang.png`" />
<img class="label_3" referrerpolicy="no-referrer"
:src="`${cdnUrl}/img/xianshang.png`" />
</div>
<div class="text-group_3_3 flex-col justify-between">
<span class="text_18">线上线下活动策划</span>
@ -262,10 +267,10 @@
<span class="text_24 topBox">行业案例</span>
<span class="text_15 topBox">Industry&nbsp;Cases</span>
<div class="dswper">
<swiper ref="swiper_exp" :slidesPerView="2" loop :autoplay="false"
:modules="modules" :watchSlidesProgress="true" @swiper="onSwiperExp">
<swiper ref="swiper_exp" :slidesPerView="2" loop :autoplay="false" :modules="modules"
:watchSlidesProgress="true" @swiper="onSwiperExp">
<swiper-slide v-for="(item, index) in 14" :key="index">
<img :src="`${$cdnUrl}/img/home_al/op${item}.png`" style="width: 585px;height: 300px; margin: 0 auto;">
<img class="hy_my_home" :src="`${$cdnUrl}/img/home_al/op${item}.png`">
</swiper-slide>
</swiper>
<div class="flex-row justify-center align-center absolute w-full bottom-[-50px]" style="gap: 30px;">
@ -286,9 +291,9 @@
<div class="box_12 flex-row justify-center" v-if="newsList.length > 0">
<img @click="openUrl(newsList[0].id)" class="image_7 leftBoxTop" referrerpolicy="no-referrer"
:src="newsList[0].image" style="cursor: pointer;;object-fit: cover;" />
<div class="box_13 flex-col topBox" @click="openUrl(newsList[1].id)" style="cursor: pointer;">
<div class="news_my_home box_13 flex-col topBox" @click="openUrl(newsList[1].id)">
<div class="text-group_6">
<div class="one-line-ellipsis" style="font-size: 18px;font-weight: 700;padding-top: 10px;">
<div class="one-line-ellipsis news_title_home">
{{ newsList[1].title }}
</div>
<div class="two-line-ellipsis"
@ -306,9 +311,10 @@
:src="newsList[2].image" style="cursor: pointer;;object-fit: cover;" />
</div>
<div class="box_14 flex-row justify-center" v-if="newsList.length > 0">
<div class="group_23 flex-col leftBoxTop" @click="openUrl(newsList[0].id)" style="cursor: pointer;">
<div class="news_my_home group_23 flex-col leftBoxTop" @click="openUrl(newsList[0].id)"
style="cursor: pointer;">
<div class="text-group_7">
<div class="one-line-ellipsis" style="font-size: 18px;font-weight: 700;padding-top: 10px;">
<div class="news_title_home one-line-ellipsis">
{{ newsList[0].title }}
</div>
<div class="two-line-ellipsis"
@ -325,10 +331,11 @@
<img @click="openUrl(newsList[1].id)" class="image_9 bottomBox" referrerpolicy="no-referrer"
:src="newsList[1].image" style="cursor: pointer;;object-fit: cover;" />
<div class="group_26 flex-col rightBox" @click="openUrl(newsList[2].id)" style="cursor: pointer;">
<div class="news_my_home group_26 flex-col rightBox" @click="openUrl(newsList[2].id)"
style="cursor: pointer;">
<div class="text-group_8">
<div class="text-group_7" style="margin: 0;">
<div class="one-line-ellipsis" style="font-size: 18px;font-weight: 700;padding-top: 10px;">
<div class="news_title_home one-line-ellipsis">
{{ newsList[2].title }}
</div>
<div class="two-line-ellipsis"
@ -437,7 +444,7 @@ const onSwiperNews = (swiper: any) => {
}
const swiperOptionsNews = {
autoplay: {
delay: 4000,
delay: 11000,
disableOnInteraction: false,
},
direction: 'horizontal',
@ -649,10 +656,12 @@ const openUrl = (id) => {
}
.bottom_imgs {
background: var(--qall);
background: var(--qall) no-repeat;
width: 1230px;
height: 272px;
background-size: 100%;
background-size: 100% 100%;
margin: 0 auto;
}
.content_box {
@ -787,6 +796,32 @@ const openUrl = (id) => {
width: 100%;
height: 100%;
}
strong{
.hy_my_home {
width: 585px;
height: 300px;
margin: 0 auto;
transition: all 0.3s ease;
&:hover {
transform: scale(1.05);
cursor: pointer;
}
}
.news_my_home {
cursor: pointer;
&:hover .news_title_home {
color: coral;
}
}
.news_title_home {
font-size: 18px;
font-weight: 700;
padding-top: 10px;
}
strong {}
</style>

22
pages/info/[id].vue
View File

@ -2,7 +2,7 @@
<div style="width: 100%;">
<div style="height:90px;background-color: #ffffff;"></div>
<div style="background-color: #F8F8F8;padding: 30px;">
<div style="width: 60%;min-height: 500px;margin: 0 auto;background-color: #ffffff;padding: 30px;">
<div class="content_class" style="">
<div style="font-size: 32px;font-weight: 700;color: #323232;">{{ info.title }}</div>
<div style="font-size: 14px;font-weight: 400;margin-top: 30px;color: #768597;">
<span>发布人：{{ info.author }}</span>
@ -13,8 +13,10 @@
<div style="width: 98%;margin: 20px auto;height: 1px;background-color: #EEEEEE;"></div>
<div style="display: flex;justify-content: space-between;align-items: center;">
<div>
<div @click="openNews(1)" style="cursor: pointer;">上一篇：{{info.prev!=null?info.prev.title:'暂无'}}</div>
<div @click="openNews(2)" style="margin-top: 20px;cursor: pointer;">下一篇：{{info.next!=null?info.next.title:'暂无'}}</div>
<div @click="openNews(1)" style="cursor: pointer;">上一篇：{{ info.prev != null ? info.prev.title : '暂无' }}
</div>
<div @click="openNews(2)" style="margin-top: 20px;cursor: pointer;">
下一篇：{{ info.next != null ? info.next.title : '暂无' }}</div>
</div>
<div @click="delWeb">
<div
@ -69,4 +71,18 @@ const delWeb = () => {
.info_content {
line-height: 35px;
}
.content_class {
width: 60%;
min-height: 500px;
margin: 0 auto;
background-color: #ffffff;
padding: 30px;
}
@media (max-width: 1440px) {
.content_class{
width: 78%;
}
}
</style>

9
pages/proServices.vue
View File

@ -1,13 +1,13 @@
<template>
<div style="width: 100%;overflow: hidden;">
<!-- Swiper 容器 -->
<div class="group_666" style="position: relative;height: 600px;">
<div class="group_666" style="position: relative;min-height: 450px;">
<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
<swiper-slide>
<img :src="`${cdnUrl}/img/service.png`" style="width: 100%;">
<img :src="`${cdnUrl}/img/service.png`" style="width: 100%;height: 100%;object-fit: cover;">
</swiper-slide>
<swiper-slide>
<img :src="`${cdnUrl}/img/service.png`" style="width: 100%;">
<img :src="`${cdnUrl}/img/service.png`" style="width: 100%;height: 100%;object-fit: cover;">
</swiper-slide>
</swiper>
</div>
@ -1308,10 +1308,11 @@ const animate = () => {
.service-container {
margin: 30px 0px 0px 140px;
gap: 15px;
}
.service-item {
padding: 14px;
padding: 10px;
}
}
.service-1:hover{

6
pages/proServices_con.vue
View File

@ -1,13 +1,13 @@
<template>
<div style="width: 100%;overflow: hidden;">
<!-- Swiper 容器 -->
<div class="group_666" style="position: relative;height: 600px;">
<div class="group_666" style="position: relative;min-height: 450px;">
<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
<swiper-slide>
<img :src="`${cdnUrl}/img/services1.png`" style="width: 100%;">
<img :src="`${cdnUrl}/img/services1.png`" style="width: 100%;height: 100%;object-fit: cover;">
</swiper-slide>
<swiper-slide>
<img :src="`${cdnUrl}/img/services1.png`" style="width: 100%;">
<img :src="`${cdnUrl}/img/services1.png`" style="width: 100%;height: 100%;object-fit: cover;">
</swiper-slide>
</swiper>
<!-- <div style="position: absolute;bottom: 50px;left: 0;width: 100%;z-index: 100;">

6
pages/societyDuty.vue
View File

@ -1,13 +1,13 @@
<template>
<div style="width: 100%;">
<!-- Swiper 容器 -->
<div class="group_666" style="position: relative;height: 600px;">
<div class="group_666" style="position: relative;min-height: 450px;">
<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
<swiper-slide>
<img :src="`${cdnUrl}/img/societyduty/shehui.png`" style="width: 100%;">
<img :src="`${cdnUrl}/img/societyduty/shehui.png`" style="width: 100%;height: 100%;object-fit: cover;">
</swiper-slide>
<swiper-slide>
<img :src="`${cdnUrl}/img/societyduty/shehui.png`" style="width: 100%;">
<img :src="`${cdnUrl}/img/societyduty/shehui.png`" style="width: 100%;height: 100%;object-fit: cover;">
</swiper-slide>
</swiper>
</div>

8
pages/societyDutyNew.vue
View File

@ -1,13 +1,13 @@
<template>
<div style="width: 100%;">
<!-- Swiper 容器 -->
<div class="group_666" style="position: relative;height: 600px;">
<div class="group_666" style="position: relative;min-height: 450px;">
<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
<swiper-slide>
<img :src="`${cdnUrl}/img/societyduty/shehui.png`" style="width: 100%;">
<img :src="`${cdnUrl}/img/societyduty/shehui.png`" style="width: 100%;height: 100%;object-fit: cover;">
</swiper-slide>
<swiper-slide>
<img :src="`${cdnUrl}/img/societyduty/shehui.png`" style="width: 100%;">
<img :src="`${cdnUrl}/img/societyduty/shehui.png`" style="width: 100%;height: 100%;object-fit: cover;">
</swiper-slide>
</swiper>
</div>
@ -49,7 +49,7 @@
洛阳职业技术学院客座教授</div>
</div>
<div style="margin-top: 20px;">
<div
<div @click="videoShow = true"
style="cursor: pointer;;line-height: 36px;text-align: center;width: 109px;height: 36px;background: #222222;color: #ffffff;">
查看详情</div>
</div>