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

6
pages/concatUs.vue
View File

@ -1,13 +1,13 @@
<template> <template>
<div style="width: 100%;"> <div style="width: 100%;">
<!-- Swiper 容器 --> <!-- 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 class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
<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-slide>
<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-slide>
</swiper> </swiper>
<!-- <div style="position: absolute;bottom: 50px;left: 0;width: 100%;z-index: 100;"> <!-- <div style="position: absolute;bottom: 50px;left: 0;width: 100%;z-index: 100;">

8
pages/customerReviews.vue
View File

@ -1,13 +1,13 @@
<template> <template>
<div style="width: 100%;"> <div style="width: 100%;">
<!-- Swiper 容器 --> <!-- 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 class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
<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-slide>
<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-slide>
</swiper> </swiper>
</div> </div>
@ -206,7 +206,7 @@ const animate = () => {
.bottom_imgss { .bottom_imgss {
background: var(--bg-s); background: var(--bg-s);
height: 837px; height: 837px;
background-size: 100%; background-size: 100% 100%;
} }
.boxgs { .boxgs {

123
pages/index.vue
View File

@ -3,26 +3,27 @@
<!-- Swiper 容器 --> <!-- Swiper 容器 -->
<div class="group_666" style="position: relative;height: 100vh;"> <div class="group_666" style="position: relative;height: 100vh;">
<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews"> <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> <swiper-slide>
<video class="video_1" autoplay="autoplay" loop="loop" muted="muted" playsinline="playsinline" <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>
<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> </swiper>
<div style="position: absolute;bottom: 50px;left: 0;width: 100%;z-index: 100;"> <div style="position: absolute;bottom: 50px;left: 0;width: 100%;z-index: 100;">
<div class="flex-row justify-center align-center"> <div class="flex-row justify-center align-center">
<div> <div id="swipen_prev" style="cursor: pointer;">
<img :src="`${cdnUrl}/img/left.png`" alt=""> <img :src="`${cdnUrl}/img/left.png`" alt="">
</div> </div>
<div style="margin: 0px 20px;"> <div style="margin: 0px 20px;">
<img :src="`${cdnUrl}/img/morse.png`" alt=""> <img :src="`${cdnUrl}/img/morse.png`" alt="">
</div> </div>
<div> <div id="swipen_next" style="cursor: pointer;">
<img :src="`${cdnUrl}/img/right.png`" alt=""> <img :src="`${cdnUrl}/img/right.png`" alt="">
</div> </div>
</div> </div>
@ -44,9 +45,9 @@
<div @click="openType(3)" :class="typeId == 3 ? 'text_9' : 'text_11'">互联网营销</div> <div @click="openType(3)" :class="typeId == 3 ? 'text_9' : 'text_11'">互联网营销</div>
</div> </div>
<div class="box_3 flex-col" style="justify-content: start;"> <div class="box_3 flex-col" style="justify-content: start;">
<div v-if="typeId ==1" class="box_4 flex-col"></div> <div v-if="typeId == 1" class="box_4 flex-col"></div>
<div v-if="typeId ==2" class="box_4 flex-col" style="margin-left: 135px;"></div> <div v-if="typeId == 2" class="box_4 flex-col" style="margin-left: 135px;"></div>
<div v-if="typeId ==3" class="box_4 flex-col" style="margin-left: 287px;"></div> <div v-if="typeId == 3" class="box_4 flex-col" style="margin-left: 287px;"></div>
</div> </div>
<div class="text_12" v-if="typeId == 1"> <div class="text_12" v-if="typeId == 1">
洛阳灵睿网络技术有限公司 洛阳灵睿网络技术有限公司
@ -58,15 +59,15 @@
专注互联网领域，发散新媒体创思，执着深耕口碑服务，扎实落地品牌内容，共创新信息化与内容服务业态。 专注互联网领域，发散新媒体创思，执着深耕口碑服务，扎实落地品牌内容，共创新信息化与内容服务业态。
</div> </div>
<div class="text_12" v-if="typeId == 2"> <div class="text_12" v-if="typeId == 2">
在灵睿，我们的运营方法论是基于深入的<strong>市场洞察、用户需求分析</strong>和科学的<strong>数据驱动</strong>，通过系统化的策略为品牌赋能。我们从运营的<strong>江湖地位</strong>出发，帮助品牌在竞争激烈的市场中确立<strong>独特的定位和竞争力；</strong>通过精确的运营基本逻辑，确保每一项策略与品牌核心价值相匹配，推动<strong>可持续发展。</strong> 在灵睿，我们的运营方法论是基于深入的<strong>市场洞察、用户需求分析</strong>和科学的<strong>数据驱动</strong>，通过系统化的策略为品牌赋能。我们从运营的<strong>江湖地位</strong>出发，帮助品牌在竞争激烈的市场中确立<strong>独特的定位和竞争力；</strong>通过精确的运营基本逻辑，确保每一项策略与品牌核心价值相匹配，推动<strong>可持续发展。</strong>
我们将运营分为三大核心手段：<strong>内容运营、活动运营和用户运营</strong>。内容运营注重通过高质量、有共鸣的内容与受众建立深度联系；活动运营则通过创意和精准策划，提升品牌曝光和用户参与度；用户运营关注从触达到转化的全过程，通过个性化服务增强用户粘性与忠诚度。 我们将运营分为三大核心手段：<strong>内容运营、活动运营和用户运营</strong>。内容运营注重通过高质量、有共鸣的内容与受众建立深度联系；活动运营则通过创意和精准策划，提升品牌曝光和用户参与度；用户运营关注从触达到转化的全过程，通过个性化服务增强用户粘性与忠诚度。
灵睿深知，运营不仅依赖直觉与经验，更依<strong>赖数据支持。</strong>我们通过精细化的<strong>数据统计与分析</strong>数据统计与分析，实时监测运营效果并做出策略调整，确保每个决策都有<strong>数据背书</strong>。通过这一整套运营体系，我们不仅能为客户提供行之有效的解决方案，更能帮助他们在数字化浪潮中领先一步，实现<strong>持续增长与价值创造。</strong> 灵睿深知，运营不仅依赖直觉与经验，更依<strong>赖数据支持。</strong>我们通过精细化的<strong>数据统计与分析</strong>数据统计与分析，实时监测运营效果并做出策略调整，确保每个决策都有<strong>数据背书</strong>。通过这一整套运营体系，我们不仅能为客户提供行之有效的解决方案，更能帮助他们在数字化浪潮中领先一步，实现<strong>持续增长与价值创造。</strong>
</div> </div>
<div class="text_12" v-if="typeId == 3"> <div class="text_12" v-if="typeId == 3">
在灵睿，我们通过深度的<strong>数据分析</strong>和精确的<strong>用户洞察</strong>，帮助企业实现<strong>品牌的精准传播和长期增长。</strong>我们相信，成功的互联网营销不仅仅是提高曝光率，更是通过<strong>内容创作、活动策划和用户互动</strong>等手段，打造与受众的深层次连接，从而促进<strong>品牌的认知度和忠诚度。</strong> 在灵睿，我们通过深度的<strong>数据分析</strong>和精确的<strong>用户洞察</strong>，帮助企业实现<strong>品牌的精准传播和长期增长。</strong>我们相信，成功的互联网营销不仅仅是提高曝光率，更是通过<strong>内容创作、活动策划和用户互动</strong>等手段，打造与受众的深层次连接，从而促进<strong>品牌的认知度和忠诚度。</strong>
我们帮助客户制定个性化的互联网营销策略，覆盖<strong>社交媒体、搜索引擎、视频内容</strong>等多个渠道，确保每个接触点都能精准传达品牌价值。在实际操作中，我们依托<strong>技术优势</strong>，结合行业<strong>最佳实践</strong>，为客户提供<strong>定制化的营销方案</strong>，推动<strong>线上线下的无缝连接。</strong> 我们帮助客户制定个性化的互联网营销策略，覆盖<strong>社交媒体、搜索引擎、视频内容</strong>等多个渠道，确保每个接触点都能精准传达品牌价值。在实际操作中，我们依托<strong>技术优势</strong>，结合行业<strong>最佳实践</strong>，为客户提供<strong>定制化的营销方案</strong>，推动<strong>线上线下的无缝连接。</strong>
灵睿的互联网营销不仅是单一的推广行为，更是一个以用户为中心的全方位战略，帮助企业在快速变化的市场中保持<strong>竞争力</strong>，实现<strong>持续增长。</strong> 灵睿的互联网营销不仅是单一的推广行为，更是一个以用户为中心的全方位战略，帮助企业在快速变化的市场中保持<strong>竞争力</strong>，实现<strong>持续增长。</strong>
</div> </div>
<div class="text-wrapper_2 flex-col"> <div class="text-wrapper_2 flex-col">
<nuxt-link to="/aboutUs/" class="text_13"> <nuxt-link to="/aboutUs/" class="text_13">
@ -113,7 +114,8 @@
<div class="group_10s flex-col"></div> <div class="group_10s flex-col"></div>
<div class="group_7 flex-row justify-between"> <div class="group_7 flex-row justify-between">
<div class="image-wrapper_5 flex-col"> <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>
<div class="text-group_3 flex-col justify-between"> <div class="text-group_3 flex-col justify-between">
<span class="text_18">AI应用与落地</span> <span class="text_18">AI应用与落地</span>
@ -125,7 +127,8 @@
<div class="group_10 flex-col"></div> <div class="group_10 flex-col"></div>
<div class="group_7 flex-row justify-between"> <div class="group_7 flex-row justify-between">
<div class="image-wrapper_5 flex-col"> <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>
<div class="text-group_3 flex-col justify-between"> <div class="text-group_3 flex-col justify-between">
<span class="text_18">定制软件开发</span> <span class="text_18">定制软件开发</span>
@ -195,7 +198,8 @@
<div class="group_10s flex-col"></div> <div class="group_10s flex-col"></div>
<div class="group_7 flex-row justify-between"> <div class="group_7 flex-row justify-between">
<div class="image-wrapper_5 flex-col"> <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>
<div class="text-group_3_3 flex-col justify-between"> <div class="text-group_3_3 flex-col justify-between">
<span class="text_18">全媒体推广解决方案</span> <span class="text_18">全媒体推广解决方案</span>
@ -219,7 +223,8 @@
<div class="group_10 flex-col"></div> <div class="group_10 flex-col"></div>
<div class="group_7 flex-row justify-between"> <div class="group_7 flex-row justify-between">
<div class="image-wrapper_5 flex-col"> <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>
<div class="text-group_3_3 flex-col justify-between"> <div class="text-group_3_3 flex-col justify-between">
<span class="text_18">线上线下活动策划</span> <span class="text_18">线上线下活动策划</span>
@ -259,23 +264,23 @@
</div> </div>
<div style="background-color: #ffffff;"> <div style="background-color: #ffffff;">
<div class="box_7 flex-col"> <div class="box_7 flex-col">
<span class="text_24 topBox">行业案例</span> <span class="text_24 topBox">行业案例</span>
<span class="text_15 topBox">Industry&nbsp;Cases</span> <span class="text_15 topBox">Industry&nbsp;Cases</span>
<div class="dswper"> <div class="dswper">
<swiper ref="swiper_exp" :slidesPerView="2" loop :autoplay="false" <swiper ref="swiper_exp" :slidesPerView="2" loop :autoplay="false" :modules="modules"
:modules="modules" :watchSlidesProgress="true" @swiper="onSwiperExp"> :watchSlidesProgress="true" @swiper="onSwiperExp">
<swiper-slide v-for="(item, index) in 14" :key="index"> <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-slide>
</swiper> </swiper>
<div class="flex-row justify-center align-center absolute w-full bottom-[-50px]" style="gap: 30px;"> <div class="flex-row justify-center align-center absolute w-full bottom-[-50px]" style="gap: 30px;">
<div v-for="(_, index) in 3" :key="index" style="width: 20px; height: 5px;" <div v-for="(_, index) in 3" :key="index" style="width: 20px; height: 5px;"
:style="{ backgroundColor: activeSlideIndex === index ? '#fc7428' : '#C1C1C1' }"> :style="{ backgroundColor: activeSlideIndex === index ? '#fc7428' : '#C1C1C1' }">
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="box_11 flex-col"> <div class="box_11 flex-col">
<div class="text-wrapper_10"> <div class="text-wrapper_10">
<span class="text_41">新闻动态</span> <span class="text_41">新闻动态</span>
@ -286,9 +291,9 @@
<div class="box_12 flex-row justify-center" v-if="newsList.length > 0"> <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" <img @click="openUrl(newsList[0].id)" class="image_7 leftBoxTop" referrerpolicy="no-referrer"
:src="newsList[0].image" style="cursor: pointer;;object-fit: cover;" /> :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="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 }} {{ newsList[1].title }}
</div> </div>
<div class="two-line-ellipsis" <div class="two-line-ellipsis"
@ -306,9 +311,10 @@
:src="newsList[2].image" style="cursor: pointer;;object-fit: cover;" /> :src="newsList[2].image" style="cursor: pointer;;object-fit: cover;" />
</div> </div>
<div class="box_14 flex-row justify-center" v-if="newsList.length > 0"> <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="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 }} {{ newsList[0].title }}
</div> </div>
<div class="two-line-ellipsis" <div class="two-line-ellipsis"
@ -325,10 +331,11 @@
<img @click="openUrl(newsList[1].id)" class="image_9 bottomBox" referrerpolicy="no-referrer" <img @click="openUrl(newsList[1].id)" class="image_9 bottomBox" referrerpolicy="no-referrer"
:src="newsList[1].image" style="cursor: pointer;;object-fit: cover;" /> :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_8">
<div class="text-group_7" style="margin: 0;"> <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 }} {{ newsList[2].title }}
</div> </div>
<div class="two-line-ellipsis" <div class="two-line-ellipsis"
@ -346,7 +353,7 @@
</div> </div>
<div class="box_16 flex-row"> <div class="box_16 flex-row">
<div class="text-wrapper_12 flex-col"> <div class="text-wrapper_12 flex-col">
<nuxt-link to="/societyDutyNew/" class="text_52"> <nuxt-link to="/societyDutyNew/" class="text_52">
<span>查看更多</span> <span>查看更多</span>
</nuxt-link> </nuxt-link>
</div> </div>
@ -355,7 +362,7 @@
<div class="box_17 flex-col" style="overflow: hidden;"> <div class="box_17 flex-col" style="overflow: hidden;">
<span class="text_53">合作伙伴</span> <span class="text_53">合作伙伴</span>
<span class="text_54">Our&nbsp;Business&nbsp;</span> <span class="text_54">Our&nbsp;Business&nbsp;</span>
<div class="group_29 grid grid-cols-6 gap-6 mr-auto"> <div class="group_29 grid grid-cols-6 gap-6 mr-auto">
<div class="bottom_imgs topSj"></div> <div class="bottom_imgs topSj"></div>
</div> </div>
@ -437,7 +444,7 @@ const onSwiperNews = (swiper: any) => {
} }
const swiperOptionsNews = { const swiperOptionsNews = {
autoplay: { autoplay: {
delay: 4000, delay: 11000,
disableOnInteraction: false, disableOnInteraction: false,
}, },
direction: 'horizontal', direction: 'horizontal',
@ -649,10 +656,12 @@ const openUrl = (id) => {
} }
.bottom_imgs { .bottom_imgs {
background: var(--qall); background: var(--qall) no-repeat;
width: 1230px; width: 1230px;
height: 272px; height: 272px;
background-size: 100%; background-size: 100% 100%;
margin: 0 auto;
} }
.content_box { .content_box {
@ -787,6 +796,32 @@ const openUrl = (id) => {
width: 100%; width: 100%;
height: 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> </style>

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

@ -2,7 +2,7 @@
<div style="width: 100%;"> <div style="width: 100%;">
<div style="height:90px;background-color: #ffffff;"></div> <div style="height:90px;background-color: #ffffff;"></div>
<div style="background-color: #F8F8F8;padding: 30px;"> <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: 32px;font-weight: 700;color: #323232;">{{ info.title }}</div>
<div style="font-size: 14px;font-weight: 400;margin-top: 30px;color: #768597;"> <div style="font-size: 14px;font-weight: 400;margin-top: 30px;color: #768597;">
<span>发布人：{{ info.author }}</span> <span>发布人：{{ info.author }}</span>
@ -13,8 +13,10 @@
<div style="width: 98%;margin: 20px auto;height: 1px;background-color: #EEEEEE;"></div> <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 style="display: flex;justify-content: space-between;align-items: center;">
<div> <div>
<div @click="openNews(1)" style="cursor: pointer;">上一篇：{{info.prev!=null?info.prev.title:'暂无'}}</div> <div @click="openNews(1)" style="cursor: pointer;">上一篇：{{ info.prev != null ? info.prev.title : '暂无' }}
<div @click="openNews(2)" style="margin-top: 20px;cursor: pointer;">下一篇：{{info.next!=null?info.next.title:'暂无'}}</div> </div>
<div @click="openNews(2)" style="margin-top: 20px;cursor: pointer;">
下一篇：{{ info.next != null ? info.next.title : '暂无' }}</div>
</div> </div>
<div @click="delWeb"> <div @click="delWeb">
<div <div
@ -36,7 +38,7 @@ const id = ref(route.params.id)
const openNews = (type) => { const openNews = (type) => {
if (type == 1 && info.value.prev != null) { if (type == 1 && info.value.prev != null) {
window.open('/info/' + info.value.prev.id, '_self'); window.open('/info/' + info.value.prev.id, '_self');
} }
if (type == 2 && info.value.next != null) { if (type == 2 && info.value.next != null) {
window.open('/info/' + info.value.next.id, '_self'); window.open('/info/' + info.value.next.id, '_self');
} }
@ -69,4 +71,18 @@ const delWeb = () => {
.info_content { .info_content {
line-height: 35px; 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> </style>

9
pages/proServices.vue
View File

@ -1,13 +1,13 @@
<template> <template>
<div style="width: 100%;overflow: hidden;"> <div style="width: 100%;overflow: hidden;">
<!-- Swiper 容器 --> <!-- 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 class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
<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-slide>
<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-slide>
</swiper> </swiper>
</div> </div>
@ -1308,10 +1308,11 @@ const animate = () => {
.service-container { .service-container {
margin: 30px 0px 0px 140px; margin: 30px 0px 0px 140px;
gap: 15px;
} }
.service-item { .service-item {
padding: 14px; padding: 10px;
} }
} }
.service-1:hover{ .service-1:hover{

6
pages/proServices_con.vue
View File

@ -1,13 +1,13 @@
<template> <template>
<div style="width: 100%;overflow: hidden;"> <div style="width: 100%;overflow: hidden;">
<!-- Swiper 容器 --> <!-- 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 class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
<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-slide>
<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-slide>
</swiper> </swiper>
<!-- <div style="position: absolute;bottom: 50px;left: 0;width: 100%;z-index: 100;"> <!-- <div style="position: absolute;bottom: 50px;left: 0;width: 100%;z-index: 100;">

6
pages/societyDuty.vue
View File

@ -1,13 +1,13 @@
<template> <template>
<div style="width: 100%;"> <div style="width: 100%;">
<!-- Swiper 容器 --> <!-- 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 class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
<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-slide>
<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-slide>
</swiper> </swiper>
</div> </div>

8
pages/societyDutyNew.vue
View File

@ -1,13 +1,13 @@
<template> <template>
<div style="width: 100%;"> <div style="width: 100%;">
<!-- Swiper 容器 --> <!-- 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 class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
<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-slide>
<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-slide>
</swiper> </swiper>
</div> </div>
@ -49,7 +49,7 @@
洛阳职业技术学院客座教授</div> 洛阳职业技术学院客座教授</div>
</div> </div>
<div style="margin-top: 20px;"> <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;"> style="cursor: pointer;;line-height: 36px;text-align: center;width: 109px;height: 36px;background: #222222;color: #ffffff;">
查看详情</div> 查看详情</div>
</div> </div>