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

Compare commits

base: wo123:e0442c3c6cd309ae2ee2b9ab0d5a53ea00647ff3
Branches Tags
wo123:main
...
compare: wo123:c6c977e4d0c806693f95238cbdf6b617676835b7
Branches Tags
wo123:main

2 Commits
e0442c3c6c ... c6c977e4d0

Author SHA1 Message Date
榆钱落尽槿花稀
c6c977e4d0 style: 调整页面样式以提升移动端用户体验 
- 修改了多个页面的样式，包括字体大小、间距、对齐方式等，以优化移动端显示效果
- 调整了图片和文本的布局，确保在不同设备上的一致性
- 更新了导航链接，使其在移动端更易于点击
 2025-05-23 18:25:06 +08:00
榆钱落尽槿花稀
da0ccc542a refactor: 调整页面布局和样式，优化移动端导航 
- 移除部分页面中的 hover 效果以简化样式
- 调整 AppHeader 中的汉堡菜单尺寸
- 优化移动端路由跳转逻辑，避免重复跳转
- 重新排序首页 Swiper 中的视频和图片位置
 2025-05-23 14:03:28 +08:00
11 changed files with 109 additions and 140 deletions
Show Stats Expand all files Collapse all files

4
assets/index.scss
View File

@ -19,7 +19,9 @@
.image_1 {
width: 154px;
height: 38px;
}
.image_c_2 {
width: 120px;
}
.text_1 {

21
components/AppHeader.vue
View File

@ -6,12 +6,15 @@
:style="{ justifyContent: coMobile ? 'space-between' : 'center', backgroundColor: isMobileMenuOpen ? '#ffffff' : 'transparent', }"
:class="route.name == 'info-id' ? 'box_1 box_1_info' : 'box_1'">
<img v-if="route.name != 'info-id' && route.name != 'phone_info-id' && !isScrolled && !isMobileMenuOpen"
class="image_1" referrerpolicy="no-referrer" :src="`${cdnUrl}/img/logo.png`" />
:class="!coMobile?'image_1':'image_c_2'" referrerpolicy="no-referrer" :src="`${cdnUrl}/img/logo.png`" />
<img v-if="(route.name != 'info-id' && route.name != 'phone_info-id') && isScrolled"
class="image_1" referrerpolicy="no-referrer" :src="`${cdnUrl}/img/logo1.png`" />
<img v-if="(route.name != 'info-id' && route.name != 'phone_info-id') && isMobileMenuOpen"
class="image_1" referrerpolicy="no-referrer" :src="`${cdnUrl}/img/logo1.png`" />
<img v-if="route.name == 'info-id' || route.name == 'phone_info-id'" class="image_1"
:class="!coMobile?'image_1':'image_c_2'" referrerpolicy="no-referrer" :src="`${cdnUrl}/img/logo1.png`" />
<img v-if="(route.name != 'info-id' && route.name != 'phone_info-id') && isMobileMenuOpen && !isScrolled"
:class="!coMobile?'image_1':'image_c_2'" referrerpolicy="no-referrer" :src="`${cdnUrl}/img/logo1.png`" />
<img v-if="route.name == 'info-id' || route.name == 'phone_info-id'" :class="!coMobile?'image_1':'image_c_2'"
referrerpolicy="no-referrer" :src="`${cdnUrl}/img/logo1.png`" />
<!-- Desktop Navigation -->
<div class="desktop-nav">
@ -192,8 +195,8 @@ console.log(route)
}
.hamburger {
width: 30px;
height: 24px;
width: 25px;
height: 18px;
position: relative;
span {
@ -210,11 +213,11 @@ console.log(route)
}
&:nth-child(2) {
top: 10px;
top: 9px;
}
&:nth-child(3) {
top: 20px;
top: 18px;
}
}

13
pages/index.vue
View File

@ -3,17 +3,16 @@
<!-- Swiper 容器 -->
<div class="group_666" style="position: relative;height: 100vh;">
<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
<swiper-slide>
<video class="video_1" autoplay="autoplay" loop="loop" muted="muted" playsinline="playsinline"
: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-slide>
<video class="video_1" autoplay="autoplay" loop="loop" muted="muted" playsinline="playsinline"
:src="`${cdnUrl}/img/1212.mp4`" style="width: 100%;height:100%;object-fit: cover;"></video>
</swiper-slide>
</swiper>
<div style="position: absolute;bottom: 50px;left: 0;width: 100%;z-index: 100;">
<div class="flex-row justify-center align-center">
@ -484,9 +483,7 @@ const router = useRouter()
onMounted(() => {
const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
if (coMobile) {
router.push('/phone_index/')
} else {
router.push('/')
window.location.href="/web/phone_index/";
}
getIndexNews();
nextTick(() => {

6
pages/phone_customerReviews.vue
View File

@ -15,8 +15,8 @@
<div class="text-wrapper_10" style="margin-top: 30px;">
<span class="text_41">公司荣誉</span>
</div>
<div class="text-wrapper_11" style="margin-top: 20px;">
<span class="text_42">Company&nbsp;Honors&nbsp;</span>
<div class="text-wrapper_11" style="margin-top: 20px;width: 100%;text-align: center;">
<span style="color: rgb(118, 133, 151);font-size: 16px;">Company&nbsp;Honors&nbsp;</span>
</div>
<div class="boxgs flex-row flex-wrap">
@ -150,7 +150,7 @@ const animate = () => {
margin:20px 20px 0px 20px;
background-color: #ffffff;
width: 100%;
height: auto;
height: 320px;
font-family: Microsoft YaHei UI-Regular;
border-radius: 4px;

161
pages/phone_index.vue
View File

@ -20,12 +20,12 @@
<div class="group_3 ">
<div class="group_4 flex-col leftBox">
<div class="text-group_1 flex-col justify-between">
<div class="text_7">灵睿的互联网之道</div>
<div class="text_7" style="font-size: 28px;">灵睿的互联网之道</div>
<div class="text_8">
The&nbsp;Way&nbsp;of&nbsp;the&nbsp;Internet
</div>
</div>
<div style="gap: 50px;;display: flex;justify-content: center;margin-top: 50px;">
<div style="gap: 50px;;display: flex;justify-content: center;margin-top: 30px;">
<div @click="openType(1)" :class="typeId == 1 ? 'text_9' : 'text_11'">公司简介</div>
<div @click="openType(2)" :class="typeId == 2 ? 'text_9' : 'text_11'">运营方法论</div>
<div @click="openType(3)" :class="typeId == 3 ? 'text_9' : 'text_11'">互联网营销</div>
@ -55,8 +55,8 @@
我们帮助客户制定个性化的互联网营销策略，覆盖<strong>社交媒体、搜索引擎、视频内容</strong>等多个渠道，确保每个接触点都能精准传达品牌价值。在实际操作中，我们依托<strong>技术优势</strong>，结合行业<strong>最佳实践</strong>，为客户提供<strong>定制化的营销方案</strong>，推动<strong>线上线下的无缝连接。</strong>
灵睿的互联网营销不仅是单一的推广行为，更是一个以用户为中心的全方位战略，帮助企业在快速变化的市场中保持<strong>竞争力</strong>，实现<strong>持续增长。</strong>
</div>
<div class="text-wrapper_2 flex-col">
<nuxt-link to="/aboutUs/" class="text_13">
<div class="text-wrapper_2 flex-col" style="margin: 20px auto;">
<nuxt-link to="/phone_aboutUs/" class="text_13">
<span>查看全部</span>
</nuxt-link>
</div>
@ -74,21 +74,21 @@
</div>
<div class="group_2 flex-col">
<div class="box_5 flex-col">
<span class="text_14 topBox">我们的业务</span>
<span class="text_14 topBox" style="margin-top: 40px;">我们的业务</span>
<span class="text_15 topBox">
Our&nbsp;BusinessWay
</span>
<div style="padding: 20px;">
<div class="leftBox section_2s flex-col" style="margin-right: 30px;">
<div class="group_6 flex-col">
<div class="box_6 flex-row align-center justify-between" style="width: 100%;">
<div class="text-group_2 flex-col justify-between">
<span class="text_17" style="color: #0256FF;">
<div class="box_6 flex-row align-center justify-between" style="width: 100%;align-items: center;">
<div class="text-group_2">
<div class="text_17" style="color: #0256FF;">
专业技术服务
</span>
<span class="text_16" style="color: #0256FF;">
</div>
<div class="text_16" style="color: #0256FF;">
专业提供互联网技术支持，助力企业高效发展
</span>
</div>
</div>
<div class="image-wrapper_3s flex-col align-center">
<img class="label_1s" referrerpolicy="no-referrer" :src="`${cdnUrl}/img/u1s.png`" />
@ -97,68 +97,68 @@
</div>
</div>
<div class="group_10s flex-col"></div>
<div class="group_7 flex-row justify-between">
<div class="group_7 flex-row justify-between align-center">
<div class="image-wrapper_5 flex-col">
<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>
<span class="text_19">
<div class="text-group_3">
<div class="text_18">AI应用与落地</div>
<div class="text_19">
从模型选型、数据处理、算法优化到应用集成与部署的全栈服务
</span>
</div>
</div>
</div>
<div class="group_10 flex-col"></div>
<div class="group_7 flex-row justify-between">
<div class="group_7 flex-row justify-between align-center">
<div class="image-wrapper_5 flex-col">
<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>
<span class="text_19">
<div class="text-group_3">
<div class="text_18">定制软件开发</div>
<div class="text_19">
为您打造用户体验出色、性能稳定可靠的Web应用、移动App及小程序
</span>
</div>
</div>
</div>
<div class="group_10 flex-col"></div>
<div class="group_7 flex-row justify-between">
<div class="group_7 flex-row justify-between align-center">
<div class="image-wrapper_5 flex-col">
<img class="label_3" referrerpolicy="no-referrer"
:src="`${cdnUrl}/img/a-yunweishuju1x.png`" />
</div>
<div class="text-group_3 flex-col justify-between">
<span class="text_18">IT运维服务</span>
<span class="text_19">
<div class="text-group_3">
<div class="text_18">IT运维服务</div>
<div class="text_19">
专业守护数据，防御威胁，护航企业数字安全
</span>
</div>
</div>
</div>
<div class="group_10 flex-col"></div>
<div class="group_7 flex-row justify-between">
<div class="group_7 flex-row justify-between align-center">
<div class="image-wrapper_5 flex-col">
<img class="label_3" referrerpolicy="no-referrer"
:src="`${cdnUrl}/img/wangluoanquanshebei.png`" />
</div>
<div class="text-group_3 flex-col justify-between">
<span class="text_18">网络与信息安全</span>
<span class="text_19">
<div class="text-group_3">
<div class="text_18">网络与信息安全</div>
<div class="text_19">
专业提供网络信息安全防护、实时监测与风险处置服务
</span>
</div>
</div>
</div>
<div class="group_10 flex-col"></div>
<div class="group_7 flex-row justify-between">
<div class="group_7 flex-row justify-between align-center">
<div class="image-wrapper_5 flex-col">
<img class="label_3" referrerpolicy="no-referrer"
:src="`${cdnUrl}/img/yekuogongdianfangan.png`" />
</div>
<div class="text-group_3 flex-col justify-between">
<span class="text_18">智慧化解决方案</span>
<span class="text_19">
<div class="text-group_3">
<div class="text_18">智慧化解决方案</div>
<div class="text_19">
利用物联网、大数据、人工智能等前沿技术，提供智慧化解决方案
</span>
</div>
</div>
</div>
</div>
@ -166,13 +166,13 @@
<div class="rightBox section_2sa flex-col">
<div class="group_6s flex-col">
<div class="box_6 flex-row align-center justify-between" style="width: 100%;">
<div class="text-group_2 flex-col justify-between">
<span class="text_17">
<div class="text-group_2">
<div class="text_17" style="font-size: 20px;">
内容创作与运营
</span>
<span class="text_16" style="color: #FC7428;">
</div>
<div class="text_16" style="color: #FC7428;">
构建全域影响力，赋能品牌长效增长
</span>
</div>
</div>
<div class="image-wrapper_3s flex-col align-center">
<img class="label_1s" referrerpolicy="no-referrer" :src="`${cdnUrl}/img/u1.png`" />
@ -181,65 +181,65 @@
</div>
</div>
<div class="group_10s flex-col"></div>
<div class="group_7 flex-row justify-between">
<div class="group_7 flex-row justify-between align-center">
<div class="image-wrapper_5 flex-col">
<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>
<span class="text_19">
<div class="text-group_3_3">
<div class="text_18">全媒体推广解决方案</div>
<div class="text_19">
覆盖各大主流平台定制【流量矩阵+内容策略+效果追踪】一体化方案
</span>
</div>
</div>
</div>
<div class="group_10 flex-col"></div>
<div class="group_7 flex-row justify-between">
<div class="group_7 flex-row justify-between align-center">
<div class="image-wrapper_5 flex-col">
<img class="label_3" referrerpolicy="no-referrer" :src="`${cdnUrl}/img/pingpai.png`" />
</div>
<div class="text-group_3_3 flex-col justify-between">
<span class="text_18">品牌账号代运营</span>
<span class="text_19">
<div class="text-group_3_3">
<div class="text_18">品牌账号代运营</div>
<div class="text_19">
全链路赋能品牌增长，内容+策略+数据 · 打造品效合一的社交资产
</span>
</div>
</div>
</div>
<div class="group_10 flex-col"></div>
<div class="group_7 flex-row justify-between">
<div class="group_7 flex-row justify-between align-center">
<div class="image-wrapper_5 flex-col">
<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>
<span class="text_19">
<div class="text-group_3_3">
<div class="text_18">线上线下活动策划</div>
<div class="text_19">
专业守护数据，防御威胁，护航企业数字安全
</span>
</div>
</div>
</div>
<div class="group_10 flex-col"></div>
<div class="group_7 flex-row justify-between">
<div class="group_7 flex-row justify-between align-center">
<div class="image-wrapper_5 flex-col">
<img class="label_3" referrerpolicy="no-referrer" :src="`${cdnUrl}/img/news.png`" />
</div>
<div class="text-group_3_3 flex-col justify-between">
<span class="text_18">互联网新闻发布</span>
<span class="text_19">
<div class="text-group_3_3">
<div class="text_18">互联网新闻发布</div>
<div class="text_19">
整合全网权威渠道，依托海量优质媒体资源，定制新闻发布策略
</span>
</div>
</div>
</div>
<div class="group_10 flex-col"></div>
<div class="group_7 flex-row justify-between">
<div class="group_7 flex-row justify-between align-center">
<div class="image-wrapper_5 flex-col">
<img class="label_3" referrerpolicy="no-referrer" :src="`${cdnUrl}/img/daren.png`" />
</div>
<div class="text-group_3_3 flex-col justify-between">
<span class="text_18">IP孵化与达人合作</span>
<span class="text_19">
<div class="text-group_3_3">
<div class="text_18">IP孵化与达人合作</div>
<div class="text_19">
深度孵化+精准匹配，内容资产×流量裂变 · 打造IP与达人的共生生态
</span>
</div>
</div>
</div>
</div>
@ -304,7 +304,7 @@
</div>
<div class="box_16 flex-row">
<div class="text-wrapper_12 flex-col">
<nuxt-link to="/societyDutyNew/" class="text_52">
<nuxt-link to="/phone_societyDutyNew/" class="text_52">
<span>查看更多</span>
</nuxt-link>
</div>
@ -447,13 +447,6 @@ const checkMobile = () => {
onMounted(() => {
checkMobile()
window.addEventListener('resize', checkMobile)
const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
if (coMobile) {
router.push('/phone_index')
} else {
router.push('/')
}
getIndexNews();
nextTick(() => {
// 初始化 ScrollReveal
@ -600,7 +593,7 @@ const retTime = (dateTimeStr: string) => {
return dateTimeStr.split(' ')[0]; // 分割后取日期部分
}
const openUrl = (id: number) => {
window.open(`/info/${id}`)
window.open(`/phone_info/${id}`)
}
</script>
@ -769,10 +762,15 @@ const openUrl = (id: number) => {
width: 100%;
height: 100%;
}
.text_17, .text_16 {
font-size: 16px !important;
.text_16 {
font-size: 14px;
line-height: 24px;
}
.group_10{
width: 91%;
margin-left:15px;
margin-top: 0px;
}
.text_18 {
font-size: 15px !important;
}
@ -783,7 +781,11 @@ const openUrl = (id: number) => {
.group_7 {
padding: 10px !important;
margin: 5px 0 !important;
margin: 0px 0 !important;
height: auto!important;
}
.text-group_3{
height: auto;
}
.section_2sa{
height: 700px;
@ -857,6 +859,7 @@ const openUrl = (id: number) => {
}
.group_10s {
width: 100%;
margin: 0px;
}
.dswper{
margin-top: 10px;

26
pages/phone_proServices.vue
View File

@ -183,7 +183,7 @@
<div
style="position: absolute;bottom: 0px;left: 0px;width: 100%;height: 100%;padding: 20px 10px 0px 20px;">
<div style="font-size: 18px;font-weight: 700;color: #3D3D3D;">安全防护</div>
<div style="font-weight: 400;color: #768597;font-size: 14px;margin-top: 10px;">
<div style="font-weight: 400;color: #768597;font-size: 12px;margin-top: 10px;">
帮助决策者制定针对性防护策略降低网络攻击、数据泄露和业务中断等风险</div>
</div>
</div>
@ -192,7 +192,7 @@
<div
style="position: absolute;bottom: 0px;left: 0px;width: 100%;height: 100%;padding: 20px 10px 0px 20px;">
<div style="font-size: 18px;font-weight: 700;color: #3D3D3D;">漏洞修复</div>
<div style="font-weight: 400;color: #768597;font-size: 14px;margin-top: 10px;">
<div style="font-weight: 400;color: #768597;font-size: 12px;margin-top: 10px;">
专业团队，快速检测、定位并处置安全威胁，最大限度减少损失，保障业务连续性</div>
</div>
</div>
@ -201,7 +201,7 @@
<div
style="position: absolute;bottom: 0px;left: 0px;width: 100%;height: 100%;padding: 20px 10px 0px 20px;">
<div style="font-size: 18px;font-weight: 700;color: #3D3D3D;">安全加固</div>
<div style="font-weight: 400;color: #768597;font-size: 14px;margin-top: 10px;">ios和Android应用防调试
<div style="font-weight: 400;color: #768597;font-size: 12px;margin-top: 10px;">ios和Android应用防调试
防篡改 防窃取 防逆向抵御各类网络攻击和数据泄露风险</div>
</div>
</div>
@ -210,7 +210,7 @@
<div
style="position: absolute;bottom: 0px;left: 0px;width: 100%;height: 100%;padding: 20px 10px 0px 20px;">
<div style="font-size: 18px;font-weight: 700;color: #3D3D3D;">实时监控</div>
<div style="font-weight: 400;color: #666666;font-size: 14px;margin-top: 10px;">
<div style="font-weight: 400;color: #666666;font-size: 12px;margin-top: 10px;">
网络安全实时监控服务提供24小时威胁检测与主动防御，实时识别漏洞，保障数据安全</div>
</div>
</div>
@ -656,11 +656,6 @@ const animate = () => {
cursor: pointer;
/* 强制每个单元格左对齐 */
}
.service-item:hover {
background-color: #4A4C5F;
}
.service-wl {
position: relative;
width: 340px;
@ -670,10 +665,6 @@ const animate = () => {
cursor: pointer;
}
.service-wl:hover {
transform: scale(1.1);
}
.service-yw {
position: relative;
transition: all 0.3s ease;
@ -699,15 +690,6 @@ const animate = () => {
transition: all 0.3s ease;
pointer-events: none;
}
&:hover {
transform: translateY(-5px);
&::before {
transform: scale(1);
opacity: 1;
}
}
}
.service_top1 {

18
pages/phone_proServices_con.vue
View File

@ -494,25 +494,12 @@ const animate = () => {
cursor: pointer;
}
.service-wl:hover {
transform: scale(1.1);
}
.service-yw {
position: relative;
transition: all 0.3s ease;
cursor: pointer;
border-radius: 12px;
overflow: hidden;
&:hover {
transform: translateY(-5px);
&::before {
transform: scale(1);
opacity: 1;
}
}
}
.service_top1 {
@ -696,11 +683,6 @@ const animate = () => {
text-transform: none;
align-items: center;
&:hover {
color: #FC7428;
cursor: pointer;
}
img {
margin-right: 30px;
}

BIN
public/img/home_al/op1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 186 KiB

After

Width:  |  Height:  |  Size: 83 KiB

BIN
public/img/home_al/op15.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 170 KiB

BIN
public/img/home_al/op2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 170 KiB

After

Width:  |  Height:  |  Size: 152 KiB

BIN
public/img/home_al/op6.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 157 KiB

After

Width:  |  Height:  |  Size: 186 KiB