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

style: 调整多个页面的样式，优化布局和响应式设计

Browse Source 
调整了多个页面的样式，包括间距、字体大小、背景颜色等，以优化布局和响应式设计。具体修改包括：
- 调整了 `.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` 中优化了布局和样式。

这些修改旨在提升用户体验和界面一致性。
This commit is contained in:
王创世 2025-05-24 10:44:22 +08:00
parent c6c977e4d0
commit 9bf2ef8ed5
11 changed files with 154 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
assets/index.scss
View File

@ -16,6 +16,11 @@
height: 90px;
justify-content: center;
}
@media screen and (max-width: 786px) {
.box_1 {
height: 60px;
}
}
.image_1 {
width: 154px;

4
components/AppFooter.vue
View File

@ -45,6 +45,7 @@
<!-- 移动端布局 -->
<div class="mobile-footer flex-col">
<div style="background-color: #eeeeee;width:100%;height: 0.5px;margin-bottom: 20px;"></div>
<div class="mobile-nav flex-col">
<span class="mobile-nav-item">企业首页</span>
<span class="mobile-nav-item">产品&amp;服务</span>
@ -87,8 +88,7 @@
.mobile-footer {
display: flex;
padding: 20px;
background-color: #f8f8f8;
background-color: #ffffff;
width: 100%;
}

38
pages/phone_aboutUs.vue
View File

@ -29,15 +29,15 @@
</span>
</div>
<span class="text_top_12" style="height: auto;font-size: 14px;margin-top: 20px;">
<span class="text_top_12" style="text-align: justify;height: auto;font-size: 16px;margin-top: 20px;">
洛阳灵睿网络技术有限公司成立于2006年，深耕互联网行业，专注智慧信息化与数字内容服务领域19年。是集技术研发、创意策划、全媒体运营于一体的高新技术企业。公司以“技术赋能场景，内容驱动价值”为核心使命，专注于为大型公立医院、教育机构、企事业单位、品牌营销策略提供一站式智慧化解决方案与品牌数字化升级服务，助力客户实现效率提升、品牌增值与精准传播。
</span>
<span class="textss13">
<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;">
<div class="text-group_9 flex-col justify-between" style="width: auto;height: 80px;">
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>
@ -47,7 +47,7 @@
</div>
<div class="text-group_10 flex-col justify-between" style="width: auto;height: 80px;">
<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>
@ -56,7 +56,7 @@
<span class="">技术沉淀</span>
</div>
<div class="text-group_11 flex-col justify-between" style="width: auto;height: 80px;">
<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>
@ -66,7 +66,7 @@
</div>
<div class="text-group_12 flex-col justify-between" style="width: auto;height: 80px;">
<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>
@ -98,29 +98,29 @@
</div>
<div class="group_2 flex-col">
<div class="box_2 flex-col">
<div class="group_3 flex-row justify-center align-center"
<div class="group_3 "
style="background: #F8F8F8;flex-wrap: wrap;padding:40px 20px;">
<div class="group_4 flex-col leftBox" style="width: 100%;">
<div class="text-group_1 flex-col justify-between" style="width: 100%;height: auto;">
<span class="text_7" style="position: relative;margin: 0 auto;width: auto;">
<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>
<span class="text_12" style="width: 100%;;height: auto;font-size: 14px;">
<div class="text_12" style="text-align: justify;width: 100%;;height: auto;font-size: 16px;padding-top: 10px;">
灵睿基因一直是一群年轻的青年人组成，我们致力打造专业的团队化运营模式，集合程序猿、设计狗、运营喵的创作者联盟。年轻不是资本，敢重新定义年轻才是，在互联网领域，我们致力做一支专业，积极，上进的年轻团队；80后主导，90后主力，00后紧随。以“为客户创造价值 用互联网思维打造品牌”为使命。以“正直诚信、实干勇敢、协作共赢、创业精神”为价值观。努力发展，破茧成蝶。
</span>
</div>
</div>
<div class="group_5 flex-col justify-center align-center rightBox" style="width: 100%;">
<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">著作权和荣誉证书</span>
<span class="text_24 topBox" style="margin: 40px 0px 10px 0px;">著作权和荣誉证书</span>
<span class="text_15 topBox">Company&nbsp;environment</span>
<div class="dswper" style="margin-top: 30px;width: 100%;">
<swiper ref="swiper_exp" :slidesPerView="2" loop :loopedSlides="2" :autoplay="{ delay: 2000 }"
@ -129,7 +129,7 @@
<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: 30px;">
<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>
@ -346,7 +346,7 @@ const animate = () => {
border-radius: 0px 0px 0px 0px;
align-items: center;
margin: 0 auto;
margin-bottom: 70px;
margin-bottom: 40px;
.spanst {
height: 32px;
@ -381,11 +381,11 @@ const animate = () => {
.box_7 {
background: var(--ruanzhu) 100% no-repeat;
height: 512px;
height: 458px;
}
.rongyu_cla {
margin-top: 50px;
margin-top: 30px;
}
.text_top_12 {

5
pages/phone_concatUs.vue
View File

@ -13,7 +13,7 @@
</div>
<div class="group_2 flex-col" >
<div class="box_2 flex-col">
<div class="group_3 flex-wrap" style="padding: 20px;">
<div class="group_3 flex-wrap" style="padding:20px 20px 40px 20px;">
<div class="group_5 flex-col justify-center align-center rightBox" style="width: 100%;">
<div class="section_1s flex-col"></div>
</div>
@ -41,7 +41,7 @@
</div>
<div class="box_17s flex-col" style="overflow: hidden;">
<span class="text_53" style="margin-top: 30px">热门岗位</span>
<span class="text_53" style="margin-top: 40px">热门岗位</span>
<span class="text_54" style="margin-top: 20px;">Company&nbsp;environment</span>
<div class="hbform">
<div class="flex boxgs">
@ -365,6 +365,7 @@ const animate = () => {
@media (max-width: 768px) {
.group_3 {
background: #ffffff;
gap: 0px;
height: 100%;
}

2
pages/phone_customerReviews.vue
View File

@ -136,7 +136,7 @@ const animate = () => {
}
.bottom_imgss {
background: var(--bg-s);
background: #f7f7f7;
background-repeat:no-repeat;
height: auto;
background-size: 100% 100%;

12
pages/phone_index.vue
View File

@ -277,7 +277,7 @@
<div class="text-wrapper_10">
<span class="text_41">新闻动态</span>
</div>
<div class="text-wrapper_11">
<div class="text-wrapper_11" style="margin-bottom: 20px;">
<span class="text_42">news information</span>
</div>
<div v-for="item in newsList">
@ -782,7 +782,7 @@ const openUrl = (id: number) => {
.group_7 {
padding: 10px !important;
margin: 0px 0 !important;
height: auto!important;
height: 100%!important;
}
.text-group_3{
height: auto;
@ -793,9 +793,12 @@ const openUrl = (id: number) => {
.image-wrapper_5 {
width: 40px !important;
height: 40px !important;
margin-right: 10px !important;
margin-top: 0px;
margin-right: 20px !important;
}
.text-group_3_3{
height: auto;
}
.text-group_3, .text-group_3_3 {
flex: 1 !important;
}
@ -822,6 +825,7 @@ const openUrl = (id: number) => {
.text_19{
width: 100%;
line-height: 25px;
height: auto;
}
.box_12{
height: 100%;

10
pages/phone_info/[id].vue
View File

@ -1,12 +1,13 @@
<template>
<div style="width: 100%;">
<div style="height:90px;background-color: #ffffff;"></div>
<div style="height:60px;background-color: #ffffff;"></div>
<div style="background-color: #eeeeee;width:100%;height: 0.5px;"></div>
<div style="background-color: #F8F8F8;">
<div class="content_class" style="">
<div style="font-size: 20px;font-weight: 700;color: #323232;">{{ info.title }}</div>
<div style="font-size: 14px;font-weight: 400;margin-top: 30px;color: #768597;">
<div>发布人：{{ info.author }}</div>
<div>发布时间：{{ info.release_time_text }} </div>
<div style="font-size: 14px;font-weight: 400;margin-top: 15px;color: #768597;">
<div>发&nbsp;&nbsp;布&nbsp;&nbsp;人：{{ info.author }}</div>
<div style="margin-top: 5px;">发布时间：{{ info.release_time_text }} </div>
</div>
<div style="width: 100%;margin:20px 0px 0px 0px;height: 1px;background-color: #EEEEEE;"></div>
<div class="info_content" v-html="info.content"></div>
@ -65,6 +66,7 @@ const delWeb = () => {
.info_content {
line-height: 28px;
text-align: justify!important;
}
.content_class {

63
pages/phone_proServices.vue
View File

@ -13,23 +13,24 @@
</div>
<div class="group_2 flex-col"
style="background-color: #ffffff;overflow: unset;position: relative;height: 100%;">
<img :src="`${cdnUrl}/img/service_01.png`" style="width: 100%;position: absolute;top: -26px;z-index: 10;">
<!-- <img :src="`${cdnUrl}/img/service_01.png`" style="width: 100%;position: absolute;top: -26px;z-index: 10;"> -->
<div class="service_top1">
<NuxtLink to="/phone_proServices_con/" style="cursor: pointer;width: 50%;text-align: center;">
<div>
<div style="color: #999999;">
内容创作与运营
</div>
</NuxtLink>
<div style="cursor: pointer;width: 50%;text-align: center;">
<div style="color: #0256FF;margin-bottom: 10px;">专业技术服务</div>
<div style="background-color: #0256FF;width:20%;height: 8px;margin: 0 auto;"></div>
<div style="color: #0256FF;margin-bottom: 10px;font-weight: 600;">专业技术服务</div>
<div style="background-color: #0256FF;width:20%;height: 4px;margin: 0 auto;"></div>
</div>
</div>
<div style="background-color: #eeeeee;width:100%;height: 0.5px;"></div>
<div class="service-01" style="text-align: center;padding: 30px 20px 20px 20px;z-index: 30;">
<div style="font-size: 34px;font-weight: 700;">AI应用定制化开发</div>
<div style="color: #768597;font-size: 16px;margin-top: 30px;">精准赋能行业创新，深度定制AI解决方案驱动企业智能升级</div>
<div style="color: #768597;font-size: 14px;margin-top: 10px;">精准赋能行业创新，深度定制AI解决方案驱动</div>
</div>
<div style="padding: 30px 20px 20px 20px;z-index: 30;">
<div style="padding: 20px 20px 20px 20px;z-index: 30;">
<div style="display: flex;flex-direction: column;justify-content: center;width: 100%;gap: 30px;">
<div class="service_top1_width">
<div class="reveal-left" style="display: flex;flex-direction: row;align-items: center;">
@ -39,11 +40,11 @@
<div style="font-size: 18px;font-weight: 700;margin-left: 10px;">项目介绍和业务描述</div>
</div>
<div class="reveal-left"
style="line-height: 24px;margin-top: 20px;font-size: 14px;font-weight: 400;color: #768597;">
style="text-align: justify;line-height: 24px;margin-top: 20px;font-size: 16px;font-weight: 400;color: #768597;">
我们紧跟人工智能发展浪潮，专注于AI技术的应用与落地。无论是将先进的AI模(DeepSeek）进行本地化部署以满足特定场景需求，还是根据您的独特业务挑战开发定制化的AI应用程序，我们都能提供从模型选型、数据处理、算法优化到应用集成与部署的全栈服务，针对金融、医疗、教育等行业定制预训练微调模型与专用知识库模板，提供开箱即用的解决方案。
</div>
<div
style="margin-top: 30px;background: linear-gradient( 138deg, #F7F7F7 0%, #FFFFFF 100%);border-radius: 4px;padding: 10px;">
style="margin-top: 30px;background: linear-gradient( 138deg, #F7F7F7 0%, #FFFFFF 100%);border-radius: 4px;padding: 20px;">
<div style="display: flex;flex-direction: row;justify-content: space-between;">
<div class="service-1"
style="display: flex;flex-direction: column;align-items: center;text-align: center;">
@ -134,9 +135,9 @@
</div>
<div class="service_023">
<div class="service-01" style="text-align: center;padding-top: 30px;z-index: 30;">
<div class="service-01" style="text-align: center;padding-top: 10px;z-index: 30;">
<div style="font-size: 34px;font-weight: 700;">定制软件开发</div>
<div style="color: #768597;font-size: 16px;margin-top: 15px;">全方位的定制化软件开发服务</div>
<div style="color: #768597;font-size: 14px;margin-top:10px;">全方位的定制化软件开发服务</div>
</div>
<div
style="display: flex;flex-direction: column;align-items: center;justify-content: center;width: 100%;gap: 30px;margin-top: 30px;">
@ -150,8 +151,8 @@
</div>
<div style="color: #222222;font-size: 18px;font-weight: 700;margin-left: 10px;">项目介绍和业务描述</div>
</div>
<div style="line-height: 24px;margin-top: 20px;font-size: 14px;font-weight: 400;color: #768597;">
我们专注于提供全方位的定制化软件开发服务，满足您多样化的业务需求。无论是面向特定群体的活动平台（如"多样青春项目"），功能完善的电子商务系统（如"商城项目"），互动性强的活动应用（如"健身打卡活动项目"），还是便捷高效的组织管理工具（如"协会小程序项目"），我们的团队都能运用主流技术栈和敏捷开发模式，为您打造用户体验出色、性能稳定可靠的Web应用、移动App及小程序，驱动业务创新
<div style="text-align: justify;line-height: 24px;margin-top: 20px;font-size: 16px;font-weight: 400;color: #768597;">
我们专注于提供全方位的定制化软件开发服务满足您多样化的业务需求。无论是面向特定群体的活动平台（如"多样青春项目"），功能完善的电子商务系统（如"商城项目"），互动性强的活动应用（如"健身打卡活动项目"），还是便捷高效的组织管理工具（如"协会小程序项目"），我们的团队都能运用主流技术栈和敏捷开发模式，为您打造用户体验出色、性能稳定可靠的Web应用、移动App及小程序，驱动业务创新
</div>
<div
style="gap: 20px;;flex-wrap: wrap; display: flex;flex-direction: row;align-items: center;justify-content: center;width: 100%;margin-top: 30px;">
@ -171,20 +172,20 @@
</div>
</div>
</div>
<div style="padding: 40px 0px 100px 0px;z-index: 30;background-color: #ffffff;">
<div style="padding: 40px 0px 40px 0px;z-index: 30;background-color: #ffffff;">
<div style="text-align: center;z-index: 30;">
<div style="font-size: 34px;font-weight: 700;">IT运维服务</div>
<div style="color: #768597;font-size: 16px;margin-top: 15px;">承接客户网站及应用系统的全面安全防护项目</div>
<div style="color: #768597;font-size: 14px;margin-top: 10px;">承接客户网站及应用系统的全面安全防护项目</div>
</div>
<div
style="flex-wrap: wrap; display: flex;flex-direction: row;align-items: center;justify-content: center;width: 100%;gap: 10px;margin-top: 40px;">
style="flex-wrap: wrap; display: flex;flex-direction: row;align-items: center;justify-content: center;width: 100%;gap: 10px;margin-top: 30px;">
<div class="service-yw" style="position: relative;">
<img :src="`${cdnUrl}/img/service_029.png`" style="width:165px;">
<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: 12px;margin-top: 10px;">
帮助决策者制定针对性防护策略降低网络攻击、数据泄露和业务中断等风险</div>
<div style="font-weight: 400;color: #768597;font-size: 14px;margin-top: 5px;">
针对性防护策略</div>
</div>
</div>
<div class="service-yw" style="position: relative;">
@ -192,8 +193,8 @@
<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: 12px;margin-top: 10px;">
专业团队，快速检测、定位并处置安全威胁，最大限度减少损失，保障业务连续性</div>
<div style="font-weight: 400;color: #768597;font-size: 14px;margin-top: 5px;">
专业团队，快速检测</div>
</div>
</div>
<div class="service-yw" style="position: relative;">
@ -201,8 +202,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: 12px;margin-top: 10px;">ios和Android应用防调试
防篡改 防窃取 防逆向抵御各类网络攻击和数据泄露风险</div>
<div style="font-weight: 400;color: #768597;font-size: 14px;margin-top: 5px;">防调试,篡改,窃取,逆向</div>
</div>
</div>
<div class="service-yw" style="position: relative;">
@ -210,8 +210,8 @@
<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: 12px;margin-top: 10px;">
网络安全实时监控服务提供24小时威胁检测与主动防御，实时识别漏洞，保障数据安全</div>
<div style="font-weight: 400;color: #666666;font-size: 14px;margin-top: 5px;">
网络安全实时监控</div>
</div>
</div>
</div>
@ -221,7 +221,7 @@
<div style="font-size: 34px;font-weight: 700;">网络与信息安全</div>
<div style="color: #768597;font-size: 16px;margin-top: 15px;">专业守护数据，防御威胁，护航企业数字安全</div>
</div>
<div class="service-wl-b" style="flex-wrap: wrap;display: flex;justify-content: center;margin-top: 40px;">
<div class="service-wl-b" style="flex-wrap: wrap;display: flex;justify-content: center;margin-top: 30px;">
<div class="service-wl">
<div style="position: absolute;">
<img :src="`${cdnUrl}/img/service_034.png`" style="width:100%;height: 100%;">
@ -311,13 +311,13 @@
</div>
</div>
</div>
<div style="z-index: 30;background-color: #ffffff;padding:30px 20px;">
<div style="z-index: 30;background-color: #ffffff;padding:40px 20px;">
<div style="text-align: center;z-index: 30;">
<div style="font-size: 34px;font-weight: 700;">智慧化解决方案</div>
<div style="color: #768597;font-size: 16px;margin-top: 15px;">利用物联网、大数据、人工智能等前沿技术，为不同场景提供一体化的智慧化解决方案
<div style="color: #768597;font-size: 14px;margin-top: 10px;">利用物联网、大数据、人工智能等前沿技术，为不同场景提供一体化的智慧化解决方案
</div>
</div>
<div style="display: flex;flex-wrap: wrap;gap: 20px;margin-top: 20px;">
<div style="display: flex;flex-wrap: wrap;gap: 20px;margin-top: 30px;">
<div class="service_bottom_01">
<div class="box1 service_bottom_no"
style="border-radius: 8px;width: 100%;height: 196px;padding: 30px;">
@ -420,9 +420,9 @@
</div>
<div class="service_051" style="z-index: 30;">
<div style="width: 100%;">
<div class="service-02" style="padding:30px 20px 0px 20px;">
<div class="service-02" style="padding:40px 20px 0px 20px;">
<div style="font-size: 34px;font-weight: 700;">硬件基础设施建设</div>
<div style="font-size: 16px;margin-top: 30px;">提供从需求分析、方案设计、设备选型、综合布线到安装调试、环境监控的全流程服务</div>
<div style="font-size: 14px;margin-top: 10px;">提供从需求分析、方案设计、设备选型、综合布线到安装调试、环境监控的全流程服务</div>
</div>
<div class="service-container" style="padding: 20px;">
<div v-for="(item, index) in serviceList" class="service-item">
@ -550,13 +550,12 @@ const animate = () => {
})
sr.reveal('.service-yw', {
origin: "left",
distance: "50px",
distance: "100px",
duration: 800,
easing: 'cubic-bezier(0.5, 0, 0, 1)', // 缓动函数
delay: 100,
opacity: 0,
scale: 0.9,
reset: true,
reset: false,
useDelay: 500,
mobile: true,
})

53
pages/phone_proServices_con.vue
View File

@ -13,34 +13,35 @@
<!-- <div style="position: absolute;bottom: 50px;left: 0;width: 100%;z-index: 100;">
<div class="flex-row justify-center align-center">
<div>
<img :src="`${cdnUrl}/img/left.png" alt="">
<img :src="`${cdnUrl}/img/left.png`" alt="">
</div>
<div style="margin: 0px 20px;">
<img :src="`${cdnUrl}/img/morse.png" alt="">
<img :src="`${cdnUrl}/img/morse.png`" alt="">
</div>
<div>
<img :src="`${cdnUrl}/img/right.png" alt="">
<img :src="`${cdnUrl}/img/right.png`" alt="">
</div>
</div>
</div> -->
</div>
<div class="group_2 flex-col"
style="background-color: #ffffff;overflow: unset;position: relative;height: 539px;">
<img :src="`${cdnUrl}/img/service_01s.png`" style="width: 100%;position: absolute;top: -26px;z-index: 10;">
style="background-color: #ffffff;overflow: unset;position: relative;padding-bottom: 40px;">
<!-- <img :src="`${cdnUrl}/img/service_01s.png`" style="width: 100%;position: absolute;top: -26px;z-index: 10;"> -->
<div class="service_top1">
<div style="cursor: pointer;width: 50%;text-align: center;">
<div style="color: #FC7428;margin-bottom: 10px;">内容创作与运营</div>
<div style="background-color: #FC7428;width:20%;height: 8px;margin: 0 auto;"></div>
<div style="color: #FC7428;margin-bottom: 10px;font-weight: 600;">内容创作与运营</div>
<div style="background-color: #FC7428;width:20%;height: 4px;margin: 0 auto;"></div>
</div>
<NuxtLink to="/phone_proServices/" style="cursor: pointer;width: 50%;text-align: center;">
<div>
<div style="color: #999999;">
专业技术服务
</div>
</NuxtLink>
</div>
<div class="service-01" style="text-align: center;padding-top: 70px;z-index: 30;">
<div style="background-color: #eeeeee;width:100%;height: 0.5px;"></div>
<div class="service-01" style="text-align: center;padding-top: 40px;z-index: 30;">
<div style="font-size: 34px;font-weight: 700;">全媒体推广解决方案</div>
<div style="color: #768597;font-size: 16px;margin-top: 30px;">多维度矩阵覆盖，赋能品牌增长新势能</div>
<div style="color: #768597;font-size: 16px;margin-top: 10px;">多维度矩阵覆盖，赋能品牌增长新势能</div>
</div>
<div style="z-index: 30;padding-top: 30px;">
<swiper ref="swiper_exp" :slidesPerView="1" loop :autoplay="false" :modules="modules"
@ -87,7 +88,7 @@
</div>
<div
style="padding: 40px 0px 0px 0px;z-index: 30;background: url(/img/content_con.png) no-repeat;background-size: 100%;">
<div style="text-align: center;padding-top: 30px;z-index: 30;">
<div style="text-align: center;z-index: 30;">
<div style="font-size: 34px;font-weight: 700;">品牌账号代运营</div>
<div class="flex-row justify-center align-center" style="margin-top: 30px;">
<div @click="openType(1)" :class="typeIndex == 1 ? 'video_wechat' : 'video_platform'">
@ -107,15 +108,15 @@
</div>
</div>
<div
style="padding: 15px;flex-wrap: wrap;display: flex;flex-direction: row;align-items: center;width: 100%;gap: 30px;margin-top: 20px;">
<div v-if="typeIndex == 2" @mouseenter="bgSet(index)" class="service-yw" style="position: relative;flex: 0 1 calc(50% - 15px);"
style="padding: 15px;width: 100%;margin-top: 20px;display: grid;grid-template-columns: repeat(2, 1fr);gap: 10px;justify-content: start;">
<div v-if="typeIndex == 2" @mouseenter="bgSet(index)" class="service-yw" style="position: relative;"
v-for="(item, index) in wchatList" :key="index">
<img :src="`/img/media/${index + 1}.png`" style="width:216px;">
<img :src="`/img/media/${index + 1}.png`" style="width:219px;">
<img v-if="!item.isShow" :src="`${cdnUrl}/img/media/buttom.png`"
style="width: 216px;position: absolute;bottom: 0px;">
<div v-if="!item.isShow" style="position: absolute;bottom: 0;color: #FFFFFF;padding: 15px;">
<div style="font-size: 16px;font-weight: 600;">{{ item.name }}</div>
<div style="font-size: 12px;font-weight: 400;margin-top: 5px;">{{ item.desc }}</div>
style="width: 219px;position: absolute;bottom: 0px;">
<div v-if="!item.isShow" style="position: absolute;bottom: -6px;color: #FFFFFF;padding: 15px;">
<div style="font-size: 15px;font-weight: 600;">{{ item.name }}</div>
<!-- <div style="font-size: 12px;font-weight: 400;margin-top: 5px;">{{ item.desc }}</div> -->
</div>
<div v-if="item.isShow">
<div
@ -129,8 +130,8 @@
</div>
<div style="font-size: 16px;font-weight: 600;margin-top: 10px;">{{ item.title }}
</div>
<div class="three-line-ellipsis" style="font-size: 12px;font-weight: 400;margin-top: 15px;">{{ item.content }}
</div>
<!-- <div class="three-line-ellipsis" style="font-size: 12px;font-weight: 400;margin-top: 15px;">{{ item.content }}
</div> -->
</div>
</div>
</div>
@ -138,12 +139,12 @@
</div>
<div v-if="typeIndex == 1" @mouseenter="bgSetVideo(index)" class="service-yw"
style="position: relative;margin: 0 auto;" v-for="(item, index) in videoList" :key="index">
<img :src="`/img/media/b${index + 1}.png`" style="width:160px;">
<img :src="`/img/media/b${index + 1}.png`" style="width:170px;">
<img v-if="!item.isShow" :src="`${cdnUrl}/img/media/buttom2.png`"
style="width: 160px;position: absolute;bottom: 0px;">
<div v-if="!item.isShow" style="position: absolute;bottom: 0;color: #FFFFFF;padding: 10px;">
style="width: 170px;position: absolute;bottom: 0px;">
<div v-if="!item.isShow" style="position: absolute;bottom: -6px;color: #FFFFFF;padding: 10px;">
<div style="font-size: 15px;font-weight: 600;">{{ item.name }}</div>
<div style="font-size: 12px;font-weight: 400;">{{ item.desc }}</div>
<!-- <div style="font-size: 12px;font-weight: 400;">{{ item.desc }}</div> -->
</div>
<div v-if="item.isShow">
<div
@ -156,8 +157,8 @@
style="width:60px;height: 60px;margin: 0 auto;">
</div>
<div style="font-size: 14px;font-weight: 600;margin-top: 5px;">{{ item.title }}</div>
<div class="three-line-ellipsis" style="font-size: 12px;font-weight: 400;margin-top: 5px;">{{ item.content }}
</div>
<!-- <div class="three-line-ellipsis" style="font-size: 12px;font-weight: 400;margin-top: 5px;">{{ item.content }}
</div> -->
</div>
</div>
</div>

27
pages/phone_societyDuty.vue
View File

@ -12,13 +12,25 @@
</swiper>
</div>
<div class="box_11 flex-col bottom_imgss">
<div class="service_top1">
<NuxtLink to="/phone_societyDutyNew/" style="cursor: pointer;width: 50%;text-align: center;">
<div style="color: #999999;">
公司动态
</div>
</NuxtLink>
<div style="cursor: pointer;width: 50%;text-align: center;">
<div style="color: #FC7428;margin-bottom: 10px;font-weight: 600;">活动影集（部分）</div>
<div style="background-color: #FC7428;width:20%;height: 4px;margin: 0 auto;"></div>
</div>
</div>
<div style="background-color: #eeeeee;width:100%;height: 0.5px;"></div>
<!-- <div class="text-wrapper_10">
<span class="text_41">公司荣誉</span>
</div>
<div class="text-wrapper_11">
<span class="text_42">Company&nbsp;Honors&nbsp;</span>
</div> -->
<div class="group_14 flex-row justify-between align-center" style="flex-wrap: wrap;width: 95%;padding-top: 30px;">
<!-- <div class="group_14 flex-row justify-between align-center" style="flex-wrap: wrap;width: 95%;padding-top: 30px;">
<div class="flex-row">
<div class="text_25">
<span>
@ -36,7 +48,7 @@
</div>
<div class="group_15" style="flex: 0 0 100%;"></div>
</div>
</div> -->
<div class="boxgs flex-row flex-wrap">
@ -236,7 +248,6 @@ const animate = () => {
.boxgs{
width: 100%;
margin: 0 auto;
margin-top: 30px;
padding: 20px;
.box_con{
margin:10px;
@ -268,4 +279,14 @@ const animate = () => {
}
}
}
.service_top1 {
font-size: 18px;
padding-top: 10px;
z-index: 30;
display: flex;
flex-direction: row;
justify-content: space-around;
width: 100%;
}
</style>

36
pages/phone_societyDutyNew.vue
View File

@ -12,7 +12,19 @@
</swiper>
</div>
<div class="box_11 flex-col bottom_imgss" style="padding-bottom: 0px;">
<div class="group_14 flex-row justify-between align-center" style="flex-wrap: wrap;width: 95%;padding-top: 30px;">
<div class="service_top1">
<div style="cursor: pointer;width: 50%;text-align: center;">
<div style="color: #FC7428;margin-bottom: 10px;font-weight: 600;">公司动态</div>
<div style="background-color: #FC7428;width:20%;height: 4px;margin: 0 auto;"></div>
</div>
<NuxtLink to="/phone_societyDuty/" style="cursor: pointer;width: 50%;text-align: center;">
<div style="color: #999999;">
活动影集（部分）
</div>
</NuxtLink>
</div>
<div style="background-color: #eeeeee;width:100%;height: 0.5px;"></div>
<!-- <div class="group_14 flex-row justify-between align-center" style="flex-wrap: wrap;width: 95%;padding-top: 30px;">
<div class="flex-row">
<div class="text_25">
<span style="color: rgb(252, 116, 40);">公司动态</span>
@ -28,17 +40,17 @@
</div>
<div class="group_15" style="flex: 0 0 100%;"></div>
</div>
</div> -->
<div class="boxgs flex-row flex-wrap">
<div class="boxgs_top" style="display: flex;align-items: center;justify-content: center;flex-wrap: wrap;padding: 10px;">
<div style="position: relative;cursor: pointer;" @click="videoShow = true">
<img :src="`${cdnUrl}/img/societyduty/det.png`" style="width: 500px;">
<div style="position: relative;cursor: pointer;width: 100%;" @click="videoShow = true">
<img :src="`${cdnUrl}/img/societyduty/det.png`" style="width: 100%;">
<img :src="`${cdnUrl}/img/societyduty/bf.png`"
style="width: 50px;height: 50px;position: absolute;top: 45%;left: 0;right: 0;margin: 0 auto;">
</div>
<div style="width: 100%;padding-top: 10px;">
<div style="font-size: 24px;color: #3D3D3D;font-weight: 700;">青年企业家岳崇霄:招商引智为洛阳注入创新活水</div>
<div style="font-size: 24px;color: #3D3D3D;font-weight: 700;margin: 10px 0px;">青年企业家岳崇霄:招商引智为洛阳注入创新活水</div>
<div style="color: #FC7428;font-size: 14px;font-weight: 900;margin: 10px 0px;">灵睿网络创始人：岳崇霄</div>
<div style="font-size: 14px;font-weight: 400;color: #3D3D3D;">
<div>岳崇霄，2020年4月，荣获2020年全国向上向善好青年：扶贫助困好青年。 </div>
@ -48,7 +60,7 @@
河南省青联委员、河南省青年企业家协会理事、河南省青少年新媒体协会理事、洛阳市青联常委、洛阳市青年企业家协会副会长、洛阳市党外知识分子联谊会副秘书长、洛阳市青年文艺联合会副秘书长、洛阳市郑州商会副会长、涧西区党外知识分子联谊会副会长、洛阳师范学院客座教授
洛阳职业技术学院客座教授</div>
</div>
<div style="margin-top: 20px;">
<div style="margin: 20px 0px;">
<div @click="videoShow = true"
style="margin: 0 auto;cursor: pointer;;line-height: 36px;text-align: center;width: 109px;height: 36px;background: #222222;color: #ffffff;">
查看详情</div>
@ -67,7 +79,7 @@
<div class="text_cc three-line-ellipsis">
{{ item.subtitle }}
</div>
<div style="margin-top: 10px;display: flex;justify-content: space-between;align-items: center;">
<div style="margin: 20px 0px;display: flex;justify-content: space-between;align-items: center;">
<div style="font-size: 14px;">发布日期：{{ timeDateMy(item.release_time_text) }}</div>
<div style="font-size: 14px;color: #FC7428;display: flex;align-items: center;">
<div>查看详情</div>
@ -308,7 +320,6 @@ const animate = () => {
height: auto;
border: 1px solid #FC7428;
border-radius: 24px;
margin-top: 30px;
}
.box_con {
@ -377,4 +388,13 @@ const animate = () => {
width: 100%;
height: 100%;
}
.service_top1 {
font-size: 18px;
padding-top: 10px;
z-index: 30;
display: flex;
flex-direction: row;
justify-content: space-around;
width: 100%;
}
</style>