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

style: 调整页面样式以提升移动端用户体验

Browse Source 
- 修改了多个页面的样式，包括字体大小、间距、对齐方式等，以优化移动端显示效果
- 调整了图片和文本的布局，确保在不同设备上的一致性
- 更新了导航链接，使其在移动端更易于点击
This commit is contained in:
王创世 2025-05-23 18:25:06 +08:00
parent da0ccc542a
commit c6c977e4d0
5 changed files with 100 additions and 85 deletions
Show Stats Download Patch File Download Diff File 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 {

13
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">

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;

154
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>
@ -593,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>
@ -762,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;
}
@ -776,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;
@ -850,6 +859,7 @@ const openUrl = (id: number) => {
}
.group_10s {
width: 100%;
margin: 0px;
}
.dswper{
margin-top: 10px;

8
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>