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-15 18:35:29 +08:00
parent 22c8b0ef0f
commit 2b3ecd7164
53 changed files with 1182 additions and 1043 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
README-CDN.md Normal file
View File

@ -0,0 +1,58 @@
# 灵睿官网3.0 - CDN图片处理指南
## 静态生成模式下的CDN图片处理
本项目已配置为支持在使用 `nuxt generate` 静态生成模式下自动处理图片CDN路径。以下是相关功能和使用方法的说明。
### 配置说明
1. CDN基础URL已配置为 `https://cdn.web.0rui.cn/`
2. 在 `nuxt.config.ts` 中已添加相关配置
3. 创建了专用的CDN图片处理插件和组件
### 使用方法
#### 方法一：使用CdnImage组件（推荐）
```vue
<template>
<!-- 使用CdnImage组件自动处理CDN路径 -->
<CdnImage src="public/img/logo.png" class="image_1" referrerpolicy="no-referrer" />
</template>
```
#### 方法二：使用全局$cdnImage方法
```vue
<template>
<img :src="$cdnImage('public/img/logo.png')" class="image_1" referrerpolicy="no-referrer" />
</template>
<script setup>
const { $cdnImage } = useNuxtApp()
</script>
```
### 路径处理规则
- 以 `public/` 开头的路径会自动转换为 `https://cdn.web.0rui.cn/img/...`
- 已经是完整URL的路径（以http://或https://开头）不会被修改
- 其他路径会直接拼接CDN基础URL
### 开发与生产环境
- 在开发环境中，默认使用本地路径，不进行CDN转换
- 在生产环境（静态生成）中，自动应用CDN路径
- 如需在开发环境中测试CDN路径，可以使用 `<CdnImage src="..." :forceCdn="true" />` 强制启用CDN
### 静态生成命令
```bash
# 生成静态网站
npm run generate
# 预览生成的静态网站
npm run preview
```
生成的静态文件将位于 `.output/public` 目录中，可以部署到任何静态文件服务器。

4
app.vue
View File

@ -1,10 +1,14 @@
<template>
<n-config-provider :locale="zhCN">
<AppHeader />
<NuxtPage />
<AppFooter/>
</n-config-provider>
</template>
<script lang="ts" setup>
import { NConfigProvider } from 'naive-ui'
import { zhCN, dateZhCN } from 'naive-ui'
import $api from '@/service/webRequest'
import { useStore } from '~/store'
import { useI18n } from 'vue-i18n'

110
assets/index.css
View File

@ -196,44 +196,19 @@
}
.text_9 {
width: 88px;
height: 22px;
overflow-wrap: break-word;
color: rgba(252, 116, 40, 1);
font-size: 22px;
font-family: Microsoft YaHei UI-Bold;
font-weight: 700;
text-align: left;
white-space: nowrap;
line-height: 22px;
padding-right: 40px;
cursor: pointer;
}
.text_10 {
width: 110px;
height: 22px;
overflow-wrap: break-word;
color: rgba(34, 34, 34, 1);
font-size: 22px;
font-family: Microsoft YaHei UI-Regular;
font-weight: NaN;
text-align: left;
white-space: nowrap;
line-height: 22px;
margin-left: 70px;
}
.text_11 {
width: 110px;
height: 22px;
overflow-wrap: break-word;
color: rgba(34, 34, 34, 1);
font-size: 22px;
font-family: Microsoft YaHei UI-Regular;
font-weight: NaN;
text-align: left;
white-space: nowrap;
line-height: 22px;
margin-left: 58px;
padding-right: 40px;
cursor: pointer;
}
.box_3 {
@ -251,7 +226,7 @@
.text_12 {
width: 584px;
height: 166px;
height: auto;
overflow-wrap: break-word;
color: rgba(118, 133, 151, 1);
font-size: 16px;
@ -265,8 +240,8 @@
.text-wrapper_2 {
background-color: rgba(34, 34, 34, 1);
height: 36px;
margin-top: 51px;
width: 108px;
margin-top: 20px;
}
.text_13 {
@ -300,8 +275,8 @@
}
.image_5 {
width: 86px;
height: 86px;
width: 70px;
height: 70px;
position: absolute;
top: 50%;
left: 50%;
@ -332,7 +307,7 @@
font-weight: 700;
text-align: center;
white-space: nowrap;
margin: 30px 0px;
margin:70px 0px 10px 0px;
}
.text_15 {
@ -340,7 +315,6 @@
font-size: 16px;
text-align: center;
white-space: nowrap;
margin-bottom: 30px;
}
.section_2 {
@ -428,7 +402,7 @@
height: 32px;
overflow-wrap: break-word;
color: rgba(252, 116, 40, 1);
font-size: 18px;
font-size: 24px;
font-family: Microsoft YaHei UI-Bold;
font-weight: 700;
text-align: left;
@ -446,7 +420,7 @@
font-weight: NaN;
text-align: left;
line-height: 32px;
margin-top: -1px;
margin-top: 10px;
}
.group_7 {
@ -664,7 +638,7 @@
.box_7 {
width: 100%;
height: 645px;
height: 586px;
background: url(public/img/bg-3.png) 100% no-repeat;
background-size: 100% 100%;
margin-top: 2px;
@ -677,7 +651,7 @@
font-weight: 700;
text-align: center;
white-space: nowrap;
margin: 30px 0px;
margin:70px 0px 10px 0px;
}
.group_14 {
@ -693,9 +667,9 @@
}
.dswper {
width: 80%;
width: 63%;
margin: 0 auto;
margin-top: 84px;
margin-top: 30px;
position: relative;
}
@media screen and (max-width: 1440px) {
@ -1005,14 +979,15 @@
}
.box_11 {
padding: 50px 0px;
background-color: rgba(255, 255, 255, 1);
width: 100%;
justify-content: flex-center;
overflow: hidden;
padding-bottom: 50px;
}
.text-wrapper_10 {
margin-top: 70px;
text-align: center;
}
@ -1024,7 +999,7 @@
}
.text-wrapper_11 {
margin-top: 30px;
margin-top:10px;
text-align: center;
}
@ -1372,7 +1347,7 @@
font-weight: 700;
white-space: nowrap;
line-height: 32px;
margin-top: 50px;
margin-top: 70px;
text-align: center;
}
@ -1381,7 +1356,7 @@
font-size: 16px;
white-space: nowrap;
line-height: 16px;
margin-top: 30px;
margin-top: 10px;
text-align: center;
}
@ -1592,9 +1567,8 @@
.group_29 {
width: 63%;
height: 60px;
margin: 0 auto;
margin-top: 50px;
margin-top: 30px;
}
@media screen and (max-width: 1440px){
.group_29 {
@ -2012,4 +1986,46 @@ button:active {
.align-end {
display: flex;
align-items: flex-end;
}
.three-line-ellipsis {
display: -webkit-box;
/* 使用弹性盒模型 */
-webkit-box-orient: vertical;
/* 内容垂直排列 */
-webkit-line-clamp: 3;
/* 限制显示的行数 */
overflow: hidden;
/* 隐藏超出部分 */
text-overflow: ellipsis;
/* 超出部分显示省略号 */
word-break: break-all;
/* 允许单词内换行（可选） */
}
.one-line-ellipsis {
display: -webkit-box;
/* 使用弹性盒模型 */
-webkit-box-orient: vertical;
/* 内容垂直排列 */
-webkit-line-clamp: 1;
/* 限制显示的行数 */
overflow: hidden;
/* 隐藏超出部分 */
text-overflow: ellipsis;
/* 超出部分显示省略号 */
word-break: break-all;
/* 允许单词内换行（可选） */
}
.two-line-ellipsis{
display: -webkit-box;
/* 使用弹性盒模型 */
-webkit-box-orient: vertical;
/* 内容垂直排列 */
-webkit-line-clamp: 2;
/* 限制显示的行数 */
overflow: hidden;
/* 隐藏超出部分 */
text-overflow: ellipsis;
/* 超出部分显示省略号 */
word-break: break-all;
/* 允许单词内换行（可选） */
}

36
components/AppHeader.vue
View File

@ -1,37 +1,37 @@
<template>
<div class="page flex-col">
<div class="group_1 flex-col">
<div class="box_1 flex-row">
<img class="image_1" referrerpolicy="no-referrer" src="public/img/logo.png" />
<div class="flex-row" :class="route.name=='info-id'?'box_1 box_1_info':'box_1'">
<img v-if="route.name!='info-id'" class="image_1" referrerpolicy="no-referrer" src="public/img/logo.png" />
<img v-if="route.name=='info-id'" class="image_1" referrerpolicy="no-referrer" src="public/img/logo1.png" />
<!-- Desktop Navigation -->
<div class="desktop-nav">
<span class="text_1">
<span :class="route.name=='info-id'?'text_black text_1':'text_1'">
<NuxtLink to="/" :class="{ 'active': route.path === '/' }">
企业首页
</NuxtLink>
</span>
<span class="text_2">
<span :class="route.name=='info-id'?'text_black text_2':'text_2'">
<NuxtLink to="/proServices/" :class="{ 'active': route.path === '/proServices/' || route.path === '/proServices_con/' || route.path === '/proServices_con' || route.path === '/proServices' }">
产品&amp;服务
</NuxtLink>
</span>
<span class="text_3">
<span :class="route.name=='info-id'?'text_black text_3':'text_3'">
<NuxtLink to="/aboutUs/" :class="{ 'active': route.path === '/aboutUs/' || route.path === '/aboutUs' }">
灵睿&amp;我们
</NuxtLink>
</span>
<span class="text_4">
<span :class="route.name=='info-id'?'text_black text_4':'text_4'">
<NuxtLink to="/customerReviews/" :class="{ 'active': route.path === '/customerReviews/' || route.path === '/customerReviews' }">
客户&amp;评价
</NuxtLink>
</span>
<span class="text_5">
<span :class="route.name=='info-id'?'text_5_info':'text_5'">
<NuxtLink to="/societyDuty/" :class="{ 'active': route.path === '/societyDuty/' || route.path === '/societyDuty' || route.path === '/societyDutyNew/' || route.path === '/societyDutyNew' }">
社会&amp;责任
</NuxtLink>
</span>
<span class="text_6">
<span :class="route.name=='info-id'?'text_black text_6':'text_6'">
<NuxtLink to="/concatUs/" :class="{ 'active': route.path === '/concatUs/' || route.path === '/concatUs'}">
加入我们
</NuxtLink>
@ -202,4 +202,22 @@ console.log(route)
}
}
.text_black{
color: #000000!important;
}
.text_5_info{
background-color: #FC7428;
height: 70px !important;
width: 120px !important;
line-height: 70px !important;
padding: 0px 20px !important;
margin-left: 30px;
color: #ffffff!important;
text-align: center;
}
.box_1_info {
height: 50px !important;
margin: 0px !important;
padding-top: 20px !important;
}
</style>

0
components/CdnImageExample.vue Normal file
View File

27
nuxt.config.ts
View File

@ -5,11 +5,13 @@ export default defineNuxtConfig({
app: {
baseURL:'/web/',
},
nitro: {
routeRules: {
'/**': { trailingSlash: false }
}
},
router: {
// extendRoutes(routes, resolve) {
// routes.push({
@ -19,12 +21,30 @@ export default defineNuxtConfig({
// });
// }
},
// 设置为false以启用客户端渲染，适合静态生成
ssr: false,
// 静态生成配置
generate: {
routes: [
'/',
'/aboutUs',
'/proServices',
'/proServices_con',
'/societyDuty',
'/societyDutyNew',
'/concatUs',
'/customerReviews'
]
},
css: [
'swiper/css',
'swiper/css/mousewheel',
'@/assets/css/common.scss'
],
devtools: { enabled: true },
postcss: {
@ -33,8 +53,9 @@ export default defineNuxtConfig({
tailwindcss: {},
},
},
modules: ['@pinia/nuxt', 'nuxt-icons'],
compatibilityDate: '2025-03-12',
vite: {
server: {
proxy: {
@ -45,5 +66,7 @@ export default defineNuxtConfig({
}
}
}
}
},
compatibilityDate: '2025-05-15'
})

3
package.json
View File

@ -6,7 +6,8 @@
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
"postinstall": "nuxt prepare",
"build:static": "node scripts/build-static.js"
},
"devDependencies": {
"@nuxt/devtools": "latest",

40
pages/aboutUs.vue
View File

@ -1,7 +1,7 @@
<template>
<div style="width: 100%;">
<!-- Swiper 容器 -->
<div class="group_666" style="position: relative;">
<div class="group_666" style="position: relative;height: 550px;">
<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
<swiper-slide>
<img src="public/img/abus.png" style="width: 100%;">
@ -26,13 +26,12 @@
</div>
<div class="group_2 flex-col">
<div class="box_2 flex-col">
<div class="group_3 flex-row justify-center align-center" style="background: #ffffff;height: 500px;">
<div class="group_3 flex-row justify-center" style="background: #ffffff;height: 480px;gap: 30px;">
<div class="group_5 flex-col justify-center align-center rightBox">
<div class="flex-col section_1sa"></div>
</div>
<div class="group_4 flex-col leftBox">
<div class="group_4 flex-col leftBox" style="padding-top: 40px;">
<div class="text-group_1 flex-col justify-between" style="width: 100%;">
<span class="text_7" style="width: 432px;position: relative;">
洛阳灵睿网络技术有限公司
@ -43,7 +42,7 @@
</span>
</div>
<span class="text_12" style="height: auto;font-size: 14px;">
<span class="text_12" style="height: auto;font-size: 14px;margin-top: 40px;">
洛阳灵睿网络技术有限公司成立于2006年，深耕互联网行业，专注智慧信息化与数字内容服务领域19年。是集技术研发、创意策划、全媒体运营于一体的高新技术企业。公司以“技术赋能场景，内容驱动价值”为核心使命，专注于为大型公立医院、教育机构、企事业单位、品牌营销策略提供一站式智慧化解决方案与品牌数字化升级服务，助力客户实现效率提升、品牌增值与精准传播。
</span>
<span class="textss13">
@ -84,11 +83,11 @@
</div>
</div>
<div class="flex rongyu1s bottomBox">
<div class="flex" style="width: 12%;align-items: center;">
<div class="flex" style="width: 13%;align-items: center;">
<img style="margin-left: 20px;" src="/public/img/about/jiangbei.png" alt="">
<span class="spanst">荣誉标签：</span>
</div>
<div class="flex" style="width: 88%;justify-content: space-between;">
<div class="flex" style="width: 87%;justify-content: space-between;">
<span class="spans">中国电子商务协会工业电商委员会河南分会单位</span>
<span class="spans">新华网、人民网、今日头条新闻联络中心</span>
<span class="spans" style="margin-right:20px;">灵睿与郑州、洛阳等地的网信以及网监系统保持长期合作获。</span>
@ -126,8 +125,8 @@
<span class="text_15 topBox">Company&nbsp;environment</span>
<div class="dswper" style="margin-top: 0;">
<swiper ref="swiper_exp" :slidesPerView="5" loop :loopedSlides="3" :autoplay="false" centeredSlides
<div class="dswper" style="margin-top: 30px;">
<swiper ref="swiper_exp" :slidesPerView="5" loop :loopedSlides="3" :autoplay="true" centeredSlides
:modules="modules" :watchSlidesProgress="true" @swiper="onSwiperExp" >
<swiper-slide v-for="(item,index) in 21" :key="index" style="padding: 0 10px;">
<img :src="`/img/about/${item}.jpg`" style="width: 100%;">
@ -139,17 +138,17 @@
<div class="dswper_right">
<img src="public/img/opr.png">
</div> -->
<div class="flex-row justify-center align-center absolute w-full bottom-[-20px]" style="gap: 30px;">
<div style="width: 25px;height:5px;background-color: #fc7428;"></div>
<div style="width: 25px;height:5px;background-color: #C1C1C1;"></div>
<div style="width: 25px;height:5px;background-color: #C1C1C1;"></div>
<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: 25px; height: 5px;"
:style="{ backgroundColor: activeSlideIndex === index ? '#fc7428' : '#C1C1C1' }">
</div>
</div>
</div>
</div>
<div class="box_17 flex-col" style="overflow: hidden;">
<span class="text_53">部分伙伴</span>
<span class="text_54">Our&nbsp;Business&nbsp;</span>
<span class="text_54" style="margin-top: 30px;">Our&nbsp;Business&nbsp;</span>
<div class="group_29 grid grid-cols-6 gap-6 mr-auto">
<div class="bottom_imgs topSj"></div>
<!-- <div v-for="item in 18" class="">
@ -203,18 +202,21 @@ const swiperOptionsNews = {
prevEl: '#swipen_next',
},
}
const activeSlideIndex=ref(0);
let vesSwiper: any = null
const onSwiperExp = (swiper: any) => {
vesSwiper = swiper
// 监听幻灯片变化事件
swiper.on('slideChange', () => {
// 更新当前活动幻灯片索引
activeSlideIndex.value = swiper.realIndex % 3
})
}
const swiper_exp = ref();
// 新闻数据
onMounted(() => {
nextTick(() => {
animate()
})
})
const numberAnimationInstRef = ref()
const numberAnimationInstRefKH = ref()
@ -227,7 +229,7 @@ const animate = () => {
origin: "left",
distance: "1000px",
duration: 1300,
delay: 100,
delay: 0,
opacity: 0,
scale: 0.9,
reset: true,
@ -352,7 +354,7 @@ const animate = () => {
font-family: Microsoft YaHei UI-Regular;
}
.rongyu1s{
width: 1340px;
width: 63%;
height: 68px;
background: #F8F8F8;
border-radius: 0px 0px 0px 0px;

19
pages/concatUs.vue
View File

@ -1,7 +1,7 @@
<template>
<div style="width: 100%;">
<!-- Swiper 容器 -->
<div class="group_666" style="position: relative;">
<div class="group_666" style="position: relative;height: 550px;">
<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
<swiper-slide>
<img src="public/img/joinus.png" style="width: 100%;">
@ -26,7 +26,7 @@
</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 flex-row justify-center align-center" style="height: 505px;gap: 72px;">
<div class="group_5 flex-col justify-center align-center rightBox">
<div class="section_1s flex-col"></div>
@ -40,7 +40,7 @@
<span class="text_12">
从一支年轻的创业团队，慢慢发展成为业务遍及全国的信息化，内容支持型互联网公司，我们仍旧保持着始终创业的心态，每一天努力向前，如果你也愿意加入我们，请联系我们的HR，期待与你的会面。
</span>
<div class="flex" style="margin-top: 0px;">
<div class="flex" style="margin-top: 40px;">
<span class="text_13s">
<img src="public/img/telphone.png" alt="" class="imgs">
联系电话：15503791530
@ -58,7 +58,7 @@
<div class="box_17s flex-col" style="overflow: hidden;">
<span class="text_53">热门岗位</span>
<span class="text_54">Company&nbsp;environment</span>
<span class="text_54" style="margin-top: 20px;">Company&nbsp;environment</span>
<div class="hbform">
<div class="flex boxgs">
<div v-for="(item, index) in typeList" @click="openType(item)" :class="typeId == item.id ? 'title active' : 'title'">{{ item.name
@ -126,18 +126,9 @@ const swiperOptionsNews = {
prevEl: '#swipen_next',
},
}
let vesSwiper: any = null
const onSwiperExp = (swiper: any) => {
vesSwiper = swiper
}
const swiper_exp = ref();
// 新闻数据
onMounted(() => {
nextTick(() => {
animate()
})
getType();
})
const openType = (item: any) => {
@ -391,7 +382,7 @@ const animate = () => {
}
.a2s {
margin: 20px 0;
margin: 15px 0;
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: 400;
font-size: 12px;

9
pages/customerReviews.vue
View File

@ -1,7 +1,7 @@
<template>
<div style="width: 100%;">
<!-- Swiper 容器 -->
<div class="group_666" style="position: relative;">
<div class="group_666" style="position: relative;height: 600px;">
<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
<swiper-slide>
<img src="public/img/customer/topnav.png" style="width: 100%;">
@ -25,10 +25,10 @@
</div> -->
</div>
<div class="box_11 flex-col bottom_imgss">
<div class="text-wrapper_10">
<div class="text-wrapper_10" style="margin-top: 70px;">
<span class="text_41">公司荣誉</span>
</div>
<div class="text-wrapper_11">
<div class="text-wrapper_11" style="margin-top: 20px;">
<span class="text_42">Company&nbsp;Honors&nbsp;</span>
</div>
@ -218,8 +218,7 @@ const animate = () => {
.bottom_imgss {
background: url(/public/img/customer/bg-s.png);
width: 1920px;
height: 800px;
height: 837px;
background-size: 100%;
}

598
pages/index.vue
View File

@ -1,13 +1,17 @@
<template>
<div style="width: 100%;">
<!-- Swiper 容器 -->
<div class="group_666" style="position: relative;">
<div class="group_666" style="position: relative;height: 100vh;">
<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
<swiper-slide>
<img src="public/img/banner.png" style="width: 100%;">
</swiper-slide>
<swiper-slide>
<img src="public/img/banner.png" style="width: 100%;">
<img src="public/img/banner2.png" style="width: 100%;">
</swiper-slide>
<swiper-slide>
<video class="video_1" autoplay="autoplay" loop="loop" muted="muted" playsinline="playsinline"
src="public/img/1212.mp4"></video>
</swiper-slide>
</swiper>
<div style="position: absolute;bottom: 50px;left: 0;width: 100%;z-index: 100;">
@ -34,22 +38,44 @@
The&nbsp;Way&nbsp;of&nbsp;the&nbsp;Internet
</span>
</div>
<div class="text-wrapper_1 flex-row">
<span class="text_9">公司简介</span>
<span class="text_10">运营方法论</span>
<span class="text_11">互联网营销</span>
<div style="display: flex;justify-content: start;margin-top: 50px;">
<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>
</div>
<div class="box_3 flex-col">
<div class="box_4 flex-col"></div>
<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 ==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>
<div class="text_12" v-if="typeId == 1">
洛阳灵睿网络技术有限公司
<br>
——智慧信息化与数字内容服务领航者
<br>
洛阳灵睿网络技术有限公司成立于2006年，深耕互联网行业，专注智慧信息化与数字内容服务领域19年。是集技术研发、创意策划、全媒体运营于一体的高新技术企业。公司以“技术赋能场景，内容驱动价值”为核心使命，专注于为大型公立医院、教育机构、企事业单位、品牌营销策略提供一站式智慧化解决方案与品牌数字化升级服务，助力客户实现效率提升、品牌增值与精准传播。
<br>
专注互联网领域，发散新媒体创思，执着深耕口碑服务，扎实落地品牌内容，共创新信息化与内容服务业态。
</div>
<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>
</div>
<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>
</div>
<span class="text_12">
灵睿是一家专业提供互联网技术及应用化服务的科技企业。公司成立于2006年，总部位于十三朝古都洛阳，在郑州、洛阳、许昌三地设立四家公司，是洛阳及河南建立较早、实力较强、规模较大的互联网骨干技术服务企业。公司致力于互联网+工业、互联网+医疗、互联网+教育、互联网+旅游、互联网+农业五个方面的发展。目前为近三千家企业提供互联网服务，并为上百家国有大型企业以及党政部门、事业机关单位提供互联网应用化服务。
</span>
<div class="text-wrapper_2 flex-col">
<span class="text_13">查看全部</span>
<nuxt-link to="/aboutUs/" class="text_13">
<span>查看全部</span>
</nuxt-link>
</div>
</div>
<div class="group_5 flex-col justify-center align-center rightBox">
<div @click="videoShow = true"
class="group_5 flex-col justify-center align-center rightBox cursor-pointer">
<div class="section_1 flex-col">
<div class="image-wrapper_2 flex-col">
<img class="image_5" referrerpolicy="no-referrer" src="public/img/bf.png" />
@ -66,7 +92,7 @@
<span class="text_15 topBox">
Our&nbsp;BusinessWay
</span>
<div class="flex-row justify-center align-center">
<div class="flex-row justify-center align-center" style="margin-top: 30px;">
<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">
@ -81,7 +107,7 @@
<div class="image-wrapper_3s flex-col align-center">
<img class="label_1s" referrerpolicy="no-referrer" src="public/img/u1s.png" />
</div>
</div>
</div>
<div class="group_10s flex-col"></div>
@ -111,7 +137,8 @@
<div class="group_10 flex-col"></div>
<div class="group_7 flex-row justify-between">
<div class="image-wrapper_5 flex-col">
<img class="label_3" referrerpolicy="no-referrer" src="public/img/a-yunweishuju1x.png" />
<img class="label_3" referrerpolicy="no-referrer"
src="public/img/a-yunweishuju1x.png" />
</div>
<div class="text-group_3 flex-col justify-between">
<span class="text_18">IT运维服务</span>
@ -123,7 +150,8 @@
<div class="group_10 flex-col"></div>
<div class="group_7 flex-row justify-between">
<div class="image-wrapper_5 flex-col">
<img class="label_3" referrerpolicy="no-referrer" src="public/img/wangluoanquanshebei.png" />
<img class="label_3" referrerpolicy="no-referrer"
src="public/img/wangluoanquanshebei.png" />
</div>
<div class="text-group_3 flex-col justify-between">
<span class="text_18">网络与信息安全</span>
@ -135,7 +163,8 @@
<div class="group_10 flex-col"></div>
<div class="group_7 flex-row justify-between">
<div class="image-wrapper_5 flex-col">
<img class="label_3" referrerpolicy="no-referrer" src="public/img/yekuogongdianfangan.png" />
<img class="label_3" referrerpolicy="no-referrer"
src="public/img/yekuogongdianfangan.png" />
</div>
<div class="text-group_3 flex-col justify-between">
<span class="text_18">智慧化解决方案</span>
@ -150,7 +179,7 @@
<div class="group_6s flex-col">
<div class="box_6 flex-row align-center justify-between">
<div class="text-group_2 flex-col justify-between">
<span class="text_17" >
<span class="text_17">
内容创作与运营
</span>
<span class="text_16" style="color: #FC7428;">
@ -160,7 +189,7 @@
<div class="image-wrapper_3s flex-col align-center">
<img class="label_1s" referrerpolicy="no-referrer" src="public/img/u1.png" />
</div>
</div>
</div>
<div class="group_10s flex-col"></div>
@ -228,42 +257,16 @@
</div>
</div>
</div>
<div class="box_7 flex-col">
<div style="background-color: #ffffff;">
<div class="box_7 flex-col">
<span class="text_24 topBox">行业案例</span>
<span class="text_15 topBox">Industry&nbsp;Cases</span>
<!-- <div class="group_14 flex-row justify-between align-center" style="flex-wrap: wrap;">
<div class="flex-row">
<div class="text_25">
<span>医疗</span>
<div
style="width: 100%;height: 1px;background-color: #fc7428;position: absolute;bottom: -21px;">
</div>
</div>
<div class="text_25">党政</div>
<div class="text_25">建筑</div>
<div class="text_25">物流</div>
<div class="text_25">教育</div>
<div class="text_25">文旅</div>
<div class="text_25">餐饮</div>
</div>
<div class="flex-row justify-center align-center">
<div style="margin-right: 10px;">
<span class="text_32">更多案例</span>
</div>
<div>
<img src="public/img/anli.png" />
</div>
</div>
<div class="group_15" style="flex: 0 0 100%;"></div>
</div> -->
<div class="dswper">
<swiper ref="swiper_exp" :slidesPerView="3" loop :loopedSlides="5" :autoplay="false" centeredSlides
:modules="modules" :watchSlidesProgress="true" @swiper="onSwiperExp" :grid="{fill:'column',rows: 1}" spaceBetween="20">
<swiper-slide v-for="(item,index) in 14" :key="index">
<img :src="`/img/home_al/op${item}.png`" style="width: 100%;">
<swiper ref="swiper_exp" :slidesPerView="2" loop :autoplay="false"
:modules="modules" :watchSlidesProgress="true" @swiper="onSwiperExp">
<swiper-slide v-for="(item, index) in 14" :key="index">
<img :src="`/img/home_al/op${item}.png`" style="width: 585px;height: 300px; margin: 0 auto;">
</swiper-slide>
</swiper>
<!-- <div class="dswper_left">
<img src="public/img/opl.png">
@ -272,173 +275,129 @@
<img src="public/img/opr.png">
</div> -->
<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: 25px; height: 5px;"
<div v-for="(_, index) in 3" :key="index" style="width: 20px; height: 5px;"
:style="{ backgroundColor: activeSlideIndex === index ? '#fc7428' : '#C1C1C1' }">
</div>
</div>
</div>
</div>
</div>
<div class="box_11 flex-col">
<div class="text-wrapper_10">
<span class="text_41">新闻动态</span>
</div>
<div class="text-wrapper_11">
<span class="text_42">Our&nbsp;Business&nbsp;</span>
<span class="text_42">news information</span>
</div>
<div class="box_12 flex-row justify-center">
<img class="image_7 leftBox" referrerpolicy="no-referrer" src="public/img/news1.png" />
<div class="box_13 flex-col topBox">
<div class="text-group_6 flex-col justify-between">
<span class="text_43">
洛阳市郑州商会在洛阳灵睿网络技术有限...
</span>
<span class="paragraph_1">
为深入学习贯彻党的二十大精神，落实省、市委决策，
<br />
充分发挥民营企业的凝聚力、向心力和创造力，赴..
</span>
<div class="box_12 flex-row justify-center" v-if="newsList.length > 0">
<img @click="openUrl(newsList[0].id)" class="image_7 leftBoxTop" referrerpolicy="no-referrer"
:src="newsList[0].image" style="cursor: pointer;;object-fit: cover;" />
<div class="box_13 flex-col topBox" @click="openUrl(newsList[1].id)" style="cursor: pointer;">
<div class="text-group_6">
<div class="one-line-ellipsis" style="font-size: 18px;font-weight: 700;padding-top: 10px;">
{{ newsList[1].title }}
</div>
<div class="two-line-ellipsis"
style="color: #768597;font-size: 14px;font-weight: 400;margin-top: 20px;">
{{ newsList[1].subtitle }}
</div>
</div>
<div class="group_22 flex-row">
<div class="section_6 flex-col"></div>
<span class="text_44">行业动态</span>
<span class="text_45">2025-06-24</span>
<span class="text_44">{{ newsList[1].cate.name }}</span>
<span class="text_45">{{ retTime(newsList[1].release_time_text) }}</span>
</div>
</div>
<img class="image_8 rightBox" referrerpolicy="no-referrer" src="public/img/news2.png" />
<img @click="openUrl(newsList[2].id)" class="image_8 rightBox" referrerpolicy="no-referrer"
:src="newsList[2].image" style="cursor: pointer;;object-fit: cover;" />
</div>
<div class="box_14 flex-row justify-center">
<div class="group_23 flex-col leftBox">
<div class="text-group_7 flex-col justify-between">
<span class="text_46">
洛阳市郑州商会在洛阳灵睿网络技术有限...
</span>
<span class="paragraph_2">
为深入学习贯彻党的二十大精神，落实省、市委决策，
<br />
充分发挥民营企业的凝聚力、向心力和创造力，赴..
</span>
<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="text-group_7">
<div class="one-line-ellipsis" style="font-size: 18px;font-weight: 700;padding-top: 10px;">
{{ newsList[0].title }}
</div>
<div class="two-line-ellipsis"
style="color: #768597;font-size: 14px;font-weight: 400;margin-top: 20px;">
{{ newsList[0].subtitle }}
</div>
</div>
<div class="group_24 flex-row">
<div class="group_25 flex-col"></div>
<span class="text_47">行业动态</span>
<span class="text_48">2025-06-24</span>
<span class="text_47">{{ newsList[0].cate.name }}</span>
<span class="text_48">{{ retTime(newsList[0].release_time_text) }}</span>
</div>
</div>
<img class="image_9 bottomBox" referrerpolicy="no-referrer" src="public/img/news3.png" />
<div class="group_26 flex-col rightBox">
<div class="text-group_8 flex-col justify-between">
<span class="text_49">
洛阳市郑州商会在洛阳灵睿网络技术有限...
</span>
<span class="paragraph_3">
为深入学习贯彻党的二十大精神，落实省、市委决策，
<br />
充分发挥民营企业的凝聚力、向心力和创造力，赴..
</span>
<img @click="openUrl(newsList[1].id)" class="image_9 bottomBox" referrerpolicy="no-referrer"
:src="newsList[1].image" style="cursor: pointer;;object-fit: cover;" />
<div class="group_26 flex-col rightBox" @click="openUrl(newsList[2].id)" style="cursor: pointer;">
<div class="text-group_8">
<div class="text-group_7" style="margin: 0;">
<div class="one-line-ellipsis" style="font-size: 18px;font-weight: 700;padding-top: 10px;">
{{ newsList[2].title }}
</div>
<div class="two-line-ellipsis"
style="color: #768597;font-size: 14px;font-weight: 400;margin-top: 20px;">
{{ newsList[2].subtitle }}
</div>
</div>
</div>
<div class="box_15 flex-row">
<div class="group_27 flex-col"></div>
<span class="text_50">行业动态</span>
<span class="text_51">2025-06-24</span>
<span class="text_50">{{ newsList[2].cate.name }}</span>
<span class="text_51">{{ retTime(newsList[2].release_time_text) }}</span>
</div>
</div>
</div>
<div class="box_16 flex-row">
<div class="text-wrapper_12 flex-col">
<span class="text_52">查看更多</span>
<nuxt-link to="/societyDutyNew/" class="text_52">
<span>查看更多</span>
</nuxt-link>
</div>
</div>
</div>
<div class="box_17 flex-col" style="overflow: hidden;">
<span class="text_53">合作伙伴</span>
<span class="text_54">Our&nbsp;Business&nbsp;</span>
<!-- <div class="group_28 flex-row justify-center numberTopBox">
<div class="text-group_9 flex-col justify-between">
<span class="text_55">
<n-number-animation :duration="5000" ref="numberAnimationInstRef" :active="false" :from="0" :to="5000"></n-number-animation>+
</span>
<span class="text_56">
19年技术沉淀，只为提供更在专业的服务，行业解决方案
</span>
</div>
<span class="text_57">服务客户</span>
<div class="section_7 flex-col"></div>
<div class="text-group_10 flex-col justify-between">
<span class="text_58"><n-number-animation :duration="5000" ref="numberAnimationInstRefKH" :active="false" :from="0" :to="19"></n-number-animation>+</span>
<span class="text_59">
19年技术沉淀，只为提供更在专业的服务，行业解决方案
</span>
</div>
<span class="text_60">技术沉淀</span>
<div class="section_8 flex-col"></div>
<div class="text-group_11 flex-col justify-between">
<span class="text_61"><n-number-animation :duration="5000" ref="numberAnimationInstRefJS" :active="false" :from="0" :to="100"></n-number-animation>+</span>
<span class="text_62">
19年技术沉淀，只为提供更在专业的服务，行业解决方案
</span>
</div>
<span class="text_63">覆盖行业</span>
<div class="section_9 flex-col"></div>
<div class="text-group_12 flex-col justify-between">
<span class="text_64"><n-number-animation :duration="5000" ref="numberAnimationInstRefHY" :active="false" :from="0" :to="30"></n-number-animation>+</span>
<span class="text_65">
19年技术沉淀，只为提供更在专业的服务，行业解决方案
</span>
</div>
<span class="text_66">技术团队</span>
</div> -->
<div class="group_29 grid grid-cols-6 gap-6 mr-auto">
<div class="bottom_imgs topSj"></div>
<!-- <div v-for="item in 18" class="">
<img class="image_11 topSj" referrerpolicy="no-referrer" src="public/img/q1.png" />
</div> -->
</div>
</div>
<div class="box_18 flex-col" style="overflow: hidden;">
<span class="text_53" style="color: #fff;">联系我们</span>
<span class="text_54" style="color: #fff;">cooperative&nbsp;partner&nbsp;</span>
<div class="numberTopBox" style="margin:0 auto;">
<form class="contactForm mt-6 w-full" @submit.prevent="submitForm">
<div class="inputform">
<input
v-model="formData.name"
class="contactInput mt-[15px] md:mt-[30px] w-full md:w-[700px]"
type="text"
placeholder="输入您的姓名"
/>
<input
v-model="formData.mobile"
class="contactInput mt-[15px] md:ml-[30px] md:mt-[30px] w-full md:w-[700px]"
type="text"
placeholder="请输入您的联系电话"
/>
<input
v-model="formData.emil"
class="contactInput mt-[15px] md:ml-[30px] md:mt-[30px] w-full md:w-[700px]"
type="text"
placeholder="请输入您的邮箱"
/>
<input v-model="formData.name" class="contactInput mt-[15px] md:mt-[30px] w-full md:w-[700px]"
type="text" placeholder="输入您的姓名" />
<input v-model="formData.mobile"
class="contactInput mt-[15px] md:ml-[30px] md:mt-[30px] w-full md:w-[700px]" type="text"
placeholder="请输入您的联系电话" />
<input v-model="formData.emil"
class="contactInput mt-[15px] md:ml-[30px] md:mt-[30px] w-full md:w-[700px]" type="text"
placeholder="请输入您的邮箱" />
</div>
<div class="relative mt-4 md:mt-8 w-full md:w-[1200px]">
<textarea
v-model="formData.message"
id="myTextarea"
placeholder="为了更好地帮助您，请尽量提供详细的信息"
rows="5"
maxlength="100"
class="w-full md:w-[1200px]"
></textarea>
<button
type="submit"
class="contactBut"
>
{{ '提交' }}
</button>
</div>
</form>
<div class="relative mt-4 md:mt-8 w-full md:w-[1200px]">
<textarea v-model="formData.message" id="myTextarea" placeholder="为了更好地帮助您，请尽量提供详细的信息" rows="5"
maxlength="100" class="w-full md:w-[1200px]"></textarea>
<button type="submit" class="contactBut">
{{ '提交' }}
</button>
</div>
</form>
</div>
</div>
<div v-if="videoShow" class="pop" style="display: block;">
<div class="abs popCont pop_video_cont">
<a @click="videoShow = false" class="abs pop_video_close closePop"></a>
<video x5-playsinline="" playsinline="" webkit-playsinline="" preload=""
x5-video-orientation="portraint" controls="" autoplay src="public/img/222.mp4"
draggable="true"></video>
</div>
</div>
</div>
@ -448,10 +407,10 @@
import { Swiper, SwiperSlide } from 'swiper/vue'
import { nextTick, ref } from 'vue'
import 'swiper/css'
import { Autoplay, Navigation, Pagination, Scrollbar, A11y, EffectCoverflow,EffectFade } from "swiper/modules";
import { Autoplay, Navigation, Pagination, Scrollbar, A11y, EffectCoverflow, EffectFade } from "swiper/modules";
import ScrollReveal from 'scrollreveal';
import { NNumberAnimation } from 'naive-ui'
let modules = [Autoplay, A11y, EffectCoverflow,EffectFade];
let modules = [Autoplay, A11y, EffectCoverflow, EffectFade];
import "swiper/css";
import "swiper/css/navigation";
@ -467,13 +426,22 @@ import { useI18n } from 'vue-i18n'
import { useStore } from '~/store'
const { locale } = useI18n()
const typeId = ref(1);
const openType = (type) => {
console.log(type);
typeId.value = type;
}
const videoShow = ref(false)
let newsSwiper: any = null
const onSwiperNews = (swiper: any) => {
newsSwiper = swiper
}
const swiperOptionsNews = {
autoplay: {
delay: 5000,
delay: 4000,
disableOnInteraction: false,
},
direction: 'horizontal',
@ -481,7 +449,7 @@ const swiperOptionsNews = {
speed: 500,
effect: 'fade',
loop: true,
modules: [EffectFade,Autoplay,Navigation],
modules: [EffectFade, Autoplay, Navigation],
navigation: {
nextEl: '#swipen_prev',
prevEl: '#swipen_next',
@ -501,15 +469,19 @@ const swiper_exp = ref();
const activeSlideIndex = ref(0);
// 表单数据
const formData = reactive({
name: '',
mobile: '',
emil:'',
message: ''
name: '',
mobile: '',
emil: '',
message: ''
})
// 新闻数据
onMounted(() => {
getIndexNews();
nextTick(() => {
animate()
// 初始化 ScrollReveal
setTimeout(() => {
animate()
}, 500)
})
})
// const numberAnimationInstRef = ref()
@ -519,6 +491,16 @@ onMounted(() => {
const animate = () => {
const sr = ScrollReveal();
sr.reveal('.leftBoxTop', {
origin: "left",
distance: "1000px",
duration: 1300,
delay: 100,
opacity: 0,
scale: 0.9,
reset: true,
mobile: true,
})
sr.reveal('.leftBox', {
origin: "left",
distance: "1000px",
@ -575,58 +557,72 @@ const animate = () => {
// numberAnimationInstRefHY.value.play()
},
})
sr.reveal('.topSj', {
sr.reveal('.group_29 ', {
origin: "bottom",
distance: "1000px",
duration: 1300,
delay: 5,
distance: "500px",
opacity: 0,
scale: 0.9,
reset: true,
reset: false,
mobile: true,
useDelay: 'always',
interval: 50,
})
}
// 表单提交方法
const submitForm = () => {
console.log(formData);
// 这里可以添加表单验证逻辑
if (!formData.name) {
alert('请输入您的姓名')
return
}
if (!formData.mobile) {
alert('请输入您的手机号码')
return
}
if (!formData.message) {
alert('请输入您的留言内容')
return
}
$api.post("/api/home.leave_word/add" , formData)
console.log(formData);
// 这里可以添加表单验证逻辑
if (!formData.name) {
alert('请输入您的姓名')
return
}
if (!formData.mobile) {
alert('请输入您的手机号码')
return
}
if (!formData.message) {
alert('请输入您的留言内容')
return
}
$api.post("/api/home.leave_word/add", formData)
.then((res: any) => {
console.log(res)
if(res.status == 200){
alert('留言成功')
}else{
alert('失败')
}
formData.name = '';
formData.mobile = '';
formData.emil = '';
formData.message = '';
if (res.status == 200) {
alert('留言成功')
} else {
alert('失败')
}
formData.name = '';
formData.mobile = '';
formData.emil = '';
formData.message = '';
})
.catch((err) => {
console.dir(err)
})
// 重置表单
// formData.name = ''
// formData.mobile = ''
// formData.content = ''
// 重置表单
// formData.name = ''
// formData.mobile = ''
// formData.content = ''
}
const newsList = ref([])
const getIndexNews = () => {
$api.get("/api/home.news/index?page=1&limit=3")
.then((res: any) => {
console.log(res)
newsList.value = res.data.data.list
})
.catch((err) => {
console.dir(err)
})
}
const retTime = (dateTimeStr) => {
return dateTimeStr.split(' ')[0]; // 分割后取日期部分
}
const openUrl = (id) => {
window.open(`/info/${id}`)
}
</script>
@ -643,74 +639,156 @@ const submitForm = () => {
}
.group_666 .swiper-slide img {
width: 100%;
height: 500px;
height: auto;
transition: 1s linear 2s;
transform: scale(1.1, 1.1);
width: 100%;
height: 500px;
height: auto;
transition: 1s linear 2s;
transform: scale(1.1, 1.1);
}
.group_666 .swiper-slide-active img,
.swiper-slide-duplicate-active img {
transition: 6s linear;
transform: scale(1, 1);
transition: 6s linear;
transform: scale(1, 1);
}
.bottom_imgs{
.bottom_imgs {
background: url(/public/img/qall.png);
width: 1230px;
height: 272px;
background-size: 100%;
background-size: 100%;
}
.content_box{
background: url(/public/img/m1.png);;
width: 561px;height: 521px;
.content_box {
background: url(/public/img/m1.png);
width: 561px;
height: 521px;
z-index: 1;
position: absolute;
right: -12px;
bottom: -13px;
background-size: 100%;
right: -12px;
bottom: -13px;
background-size: 100%;
}
.contactForm{
.contactForm {
width: 100%;
.inputform{
.inputform {
display: flex;
justify-content: center;
align-items: center;
width: 1200px;
}
}
.contactInput{
.contactInput {
width: 380px;
height: 50px;
background: #FFFFFF;
border-radius: 6px 6px 6px 6px;
padding-left: 20px;
height: 50px;
background: #FFFFFF;
border-radius: 6px 6px 6px 6px;
padding-left: 20px;
}
.contactInput::placeholder {color: #768597; }
.contactInput:focus {outline: none;}
#myTextarea{
.contactInput::placeholder {
color: #768597;
}
.contactInput:focus {
outline: none;
}
#myTextarea {
width: 1200px;
height: 167px;
background: #FFFFFF;
border-radius: 6px 6px 6px 6px;
opacity: 0.8;
padding-left: 20px;padding-top: 20px;
padding-left: 20px;
padding-top: 20px;
resize: none;
}
#myTextarea::placeholder {color: #768597; }
#myTextarea:focus {outline: none;}
.char-count {position: absolute;bottom: 5px; /* 根据需要调整距离底部的位置 */right: 10px; /* 根据需要调整距离右侧的位置 */font-size: 12px; /* 根据需要调整字体大小 */color: #A8CBFF;}
@media (max-width: 768px) {
.contactInput {
font-size: 18px;
height: 40px;
}
#myTextarea::placeholder {
color: #768597;
}
.contactBut{width: 108px;
#myTextarea:focus {
outline: none;
}
.char-count {
position: absolute;
bottom: 5px;
/* 根据需要调整距离底部的位置 */
right: 10px;
/* 根据需要调整距离右侧的位置 */
font-size: 12px;
/* 根据需要调整字体大小 */
color: #A8CBFF;
}
@media (max-width: 768px) {
.contactInput {
font-size: 18px;
height: 40px;
}
}
.contactBut {
width: 108px;
border-radius: 4px 4px 4px 4px;
position: absolute;
bottom: 20px;
right: 30px;
height: 36px; background-color: #222222; border: none; font-weight: 400;font-size: 16px;line-height: 28px;color: #FFFFFF;}
position: absolute;
bottom: 20px;
right: 30px;
height: 36px;
background-color: #222222;
border: none;
font-weight: 400;
font-size: 16px;
line-height: 28px;
color: #FFFFFF;
}
.pop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .8);
z-index: 200;
display: none;
}
.popCont {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.pop_video_close {
border-radius: 50%;
position: absolute;
top: 0;
right: -75px;
width: 50px;
height: 50px;
background: url('/public/img/close.png') no-repeat 0 0;
background-size: 100% auto;
border: 6px solid #979797;
}
.pop_video_cont {
width: 600px;
border: 6px solid #979797;
background: #000;
}
.pop_video_cont video {
display: block;
width: 100%;
height: 100%;
}
strong{
}
</style>

72
pages/info/[id].vue Normal file
View File

@ -0,0 +1,72 @@
<template>
<div style="width: 100%;">
<div style="height:71px;background-color: #ffffff;"></div>
<div style="background-color: #F8F8F8;padding: 30px;">
<div style="width: 60%;min-height: 500px;margin: 0 auto;background-color: #ffffff;padding: 30px;">
<div style="font-size: 32px;font-weight: 700;color: #323232;">{{ info.title }}</div>
<div style="font-size: 14px;font-weight: 400;margin-top: 30px;color: #768597;">
<span>发布人：{{ info.author }}</span>
<span style="margin-left: 150px;">发布时间：{{ info.release_time_text }} </span>
</div>
<div style="width: 98%;margin: 20px auto;height: 1px;background-color: #EEEEEE;"></div>
<div class="info_content" v-html="info.content"></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>
<div @click="openNews(1)" style="cursor: pointer;">上一篇：{{info.prev!=null?info.prev.title:'暂无'}}</div>
<div @click="openNews(2)" style="margin-top: 20px;cursor: pointer;">下一篇：{{info.next!=null?info.next.title:'暂无'}}</div>
</div>
<div @click="delWeb">
<div
style="color: #999999;;cursor: pointer;;border: 1px solid #999999;width: 108px;height: 40px;line-height: 40px;text-align: center;">
返回列表</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { nextTick, ref } from 'vue'
const route = useRoute()
import $api from '@/service/webRequest'
import { Item } from 'ant-design-vue/es/menu'
const id = ref(route.params.id)
const openNews = (type) => {
if (type == 1 && info.value.prev != null) {
window.open('/info/' + info.value.prev.id, '_self');
}
if (type == 2 && info.value.next != null) {
window.open('/info/' + info.value.next.id, '_self');
}
}
// 新闻数据
onMounted(() => {
getInfo();
})
const info = ref({});
const getInfo = async () => {
const res = await $api.get('/api/home.news/detail?id=' + id.value)
console.log(res);
info.value = res.data.data;
}
const delWeb = () => {
window.close();
}
</script>
<style lang="scss">
@import "@/assets/animate/animate.min.css";
@import "@/assets/index.css";
.info_content img {
width: 80% !important;
margin: 0 auto;
margin-bottom: 10px;
}
.info_content {
line-height: 35px;
}
</style>

28
pages/proServices.vue
View File

@ -1,7 +1,7 @@
<template>
<div style="width: 100%;overflow: hidden;">
<!-- Swiper 容器 -->
<div class="group_666" style="position: relative;">
<div class="group_666" style="position: relative;height: 600px;">
<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
<swiper-slide>
<img src="public/img/service.png" style="width: 100%;">
@ -38,7 +38,7 @@
<div style="background-color: #0256FF;width:40%;height: 8px;margin: 0 auto;"></div>
</div>
</div>
<div class="service-01" style="text-align: center;padding-top: 30px;z-index: 30;">
<div class="service-01" style="text-align: center;padding-top: 70px;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>
@ -52,7 +52,7 @@
<div style="font-size: 18px;font-weight: 700;margin-left: 10px;">项目介绍和业务描述</div>
</div>
<div class="reveal-left"
style="margin-top: 30px;font-size: 14px;font-weight: 400;color: #768597;">
style="line-height: 24px;margin-top: 20px;font-size: 14px;font-weight: 400;color: #768597;">
我们紧跟人工智能发展浪潮，专注于AI技术的应用与落地。无论是将先进的AI模(DeepSeek）进行本地化部署以满足特定场景需求，还是根据您的独特业务挑战开发定制化的AI应用程序，我们都能提供从模型选型、数据处理、算法优化到应用集成与部署的全栈服务，针对金融、医疗、教育等行业定制预训练微调模型与专用知识库模板，提供开箱即用的解决方案。
</div>
<div
@ -154,7 +154,7 @@
</div>
<div style="color: #222222;font-size: 18px;font-weight: 700;margin-left: 10px;">项目介绍和业务描述</div>
</div>
<div style="margin-top: 30px;font-size: 14px;font-weight: 400;color: #768597;">
<div style="line-height: 24px;margin-top: 20px;font-size: 14px;font-weight: 400;color: #768597;">
我们专注于提供全方位的定制化软件开发服务，满足您多样化的业务需求。无论是面向特定群体的活动平台（如"多样青春项目"），功能完善的电子商务系统（如"商城项目"），互动性强的活动应用（如"健身打卡活动项目"），还是便捷高效的组织管理工具（如"协会小程序项目"），我们的团队都能运用主流技术栈和敏捷开发模式，为您打造用户体验出色、性能稳定可靠的Web应用、移动App及小程序，驱动业务创新
</div>
<div
@ -181,7 +181,7 @@
<div style="color: #768597;font-size: 16px;margin-top: 15px;">承接客户网站及应用系统的全面安全防护项目</div>
</div>
<div
style="display: flex;flex-direction: row;align-items: center;justify-content: center;width: 100%;gap: 30px;margin-top: 30px;">
style="display: flex;flex-direction: row;align-items: center;justify-content: center;width: 100%;gap: 30px;margin-top: 40px;">
<div class="service-yw" style="position: relative;">
<img src="public/img/service_029.png" style="width:275px;">
<div style="position: absolute;bottom: 0px;left: 0px;width: 100%;height: 100%;padding: 30px;">
@ -217,11 +217,11 @@
</div>
</div>
<div class="service_033" style="padding-top: 60px;z-index: 30;">
<div style="text-align: center;padding-top: 30px;z-index: 30;">
<div 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>
<div class="service-wl-a" style="display: flex;justify-content: center;gap: 30px;margin-top: 30px;">
<div class="service-wl-a" style="display: flex;justify-content: center;gap: 30px;margin-top: 40px;">
<div class="service-wl">
<div style="position: absolute;">
<img src="public/img/service_034.png" style="width:100%;height: 100%;">
@ -312,7 +312,7 @@
</div>
</div>
<div style="padding-top: 50px;z-index: 30;background-color: #ffffff;height: 715px;">
<div style="text-align: center;padding-top: 30px;z-index: 30;">
<div style="text-align: center;padding-top: 20px;z-index: 30;">
<div style="font-size: 34px;font-weight: 700;">智慧化解决方案</div>
<div style="color: #768597;font-size: 16px;margin-top: 15px;">利用物联网、大数据、人工智能等前沿技术，为不同场景提供一体化的智慧化解决方案
</div>
@ -567,7 +567,7 @@
</div>
</div>
<div class="service_051" style="z-index: 30;">
<div style="width: 80%;">
<div style="width: 100%;">
<div class="service-02">
<div style="font-size: 34px;font-weight: 700;">硬件基础设施建设</div>
<div style="font-size: 16px;margin-top: 30px;">提供从需求分析、方案设计、设备选型、综合布线到安装调试、环境监控的全流程服务</div>
@ -1057,9 +1057,7 @@ const swiperOptionsNews = {
// 新闻数据
onMounted(() => {
nextTick(() => {
animate()
})
})
const animate = () => {
const sr = ScrollReveal();
@ -1166,7 +1164,7 @@ const animate = () => {
width: 100%;
height: 100%;
background-size: 100%;
height: 800px;
height: 770px;
}
.service_bottom {
@ -1193,7 +1191,7 @@ const animate = () => {
/* 强制固定 3 列 */
gap: 20px;
max-width: 715px;
margin: 80px 0px 0px 250px;
margin: 40px 0px 0px 367px;
}
.service-item {
@ -1280,12 +1278,12 @@ const animate = () => {
margin: 0 auto;
width: 62%;
position: relative;
margin-top: 30px
margin-top: 40px
}
.service-02 {
text-align: center;
padding-top: 30px;
padding-top: 70px;
z-index: 30;
color: #ffffff;
}

815
pages/proServices_con.vue
View File

File diff suppressed because it is too large Load Diff

12
pages/societyDuty.vue
View File

@ -1,7 +1,7 @@
<template>
<div style="width: 100%;">
<!-- Swiper 容器 -->
<div class="group_666" style="position: relative;">
<div class="group_666" style="position: relative;height: 600px;">
<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
<swiper-slide>
<img src="public/img/societyduty/shehui.png" style="width: 100%;">
@ -31,7 +31,7 @@
<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: 1200px;">
<div class="group_14 flex-row justify-between align-center" style="flex-wrap: wrap;width: 1200px;padding-top: 30px;">
<div class="flex-row">
<div class="text_25">
<span>
@ -43,7 +43,7 @@
<div class="text_25">
<span style="color: rgb(252, 116, 40);">活动影集（部分）</span>
<div
style="width: 100%;height: 1px;background-color: #fc7428;position: absolute;bottom: -21px;">
style=" left: 20px;width: 100%;height: 1px;background-color: #fc7428;position: absolute;bottom: -21px;">
</div>
</div>
@ -251,16 +251,16 @@ const animate = () => {
.bottom_imgss{
// background: url(/public/img/customer/bg-s.png);
background: #F8F8F8;
width: 1920px;
height: 1047px;
// background-size: 100%;
}
.boxgs{
width: 1300px;
width: 1200px;
margin: 0 auto;
margin-top: 30px;
padding-top: 20px;
.box_con{
margin:20px;
margin:10px;
background-color: #ffffff;
width: 277px;
height: 276px;

232
pages/societyDutyNew.vue
View File

@ -1,7 +1,7 @@
<template>
<div style="width: 100%;">
<!-- Swiper 容器 -->
<div class="group_666" style="position: relative;">
<div class="group_666" style="position: relative;height: 600px;">
<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
<swiper-slide>
<img src="public/img/societyduty/shehui.png" style="width: 100%;">
@ -31,7 +31,7 @@
<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: 1200px;">
<div class="group_14 flex-row justify-between align-center" style="flex-wrap: wrap;width: 1200px;padding-top: 30px;">
<div class="flex-row">
<div class="text_25">
<span style="color: rgb(252, 116, 40);">公司动态</span>
@ -40,9 +40,11 @@
</div>
</div>
<div class="text_25">
<span >活动影集（部分）</span>
<NuxtLink to="/societyDuty/">
<span>活动影集（部分）</span>
</NuxtLink>
</div>
</div>
<!-- <div class="flex-row justify-center align-center">
<div style="margin-right: 10px;">
@ -54,43 +56,84 @@
</div> -->
<div class="group_15" style="flex: 0 0 100%;"></div>
</div>
<div class="boxgs flex-row flex-wrap">
<div class="boxgs_top">
<div></div>
<div>
<div class="boxgs flex-row flex-wrap">
<div class="boxgs_top" style="display: flex;align-items: center;justify-content: center;">
<div style="position: relative;cursor: pointer;" @click="videoShow = true">
<img src="public/img/societyduty/det.png" style="width: 500px;height: 325px;">
<img src="public/img/societyduty/bf.png"
style="width: 50px;height: 50px;position: absolute;top: 45%;left: 0;right: 0;margin: 0 auto;">
</div>
<div style="width: 53%;padding-left: 30px;">
<div style="font-size: 24px;color: #3D3D3D;font-weight: 700;">青年企业家岳崇霄:招商引智为洛阳注入创新活水</div>
<div style="color: #FC7428;font-size: 14px;font-weight: 900;margin: 20px 0px;">灵睿网络创始人：岳崇霄</div>
<div style="font-size: 14px;font-weight: 400;color: #3D3D3D;">
<div>岳崇霄，2020年4月，荣获2020年全国向上向善好青年：扶贫助困好青年。 </div>
<div>洛阳灵睿网络技术有限公司 创始人</div>
<div>河南灵睿科技集团有限公司 董事长</div>
<div>
河南省青联委员、河南省青年企业家协会理事、河南省青少年新媒体协会理事、洛阳市青联常委、洛阳市青年企业家协会副会长、洛阳市党外知识分子联谊会副秘书长、洛阳市青年文艺联合会副秘书长、洛阳市郑州商会副会长、涧西区党外知识分子联谊会副会长、洛阳师范学院客座教授
洛阳职业技术学院客座教授</div>
</div>
<div style="margin-top: 20px;">
<div
style="cursor: pointer;;line-height: 36px;text-align: center;width: 109px;height: 36px;background: #222222;color: #ffffff;">
查看详情</div>
</div>
</div>
</div>
<div class="box_con flex-row" v-for="(item,index) in lists" :key="index">
<div class="align-center" style="justify-content: center;">
<img width="277px" height="189px" :src="`/img/societyduty/s${index+1}.png`" alt="">
<div class="box_con flex-row" v-for="(item, index) in newList" :key="index" @click="openNewInfo(item)">
<div class="align-center" style="padding-left: 20px;">
<img :src="item.image" style="height: 180px;width: 250px;object-fit: cover;border-radius: 8px;">
</div>
<div class="flex-col" style="justify-content: center;margin-top: 5px;">
<span class="text_tt">
{{item.title}}
</span>
<span class="text_cc">
{{item.title}}
</span>
<div class="flex-col" style="margin-top: 5px;width: 75%;padding-left: 20px;position: relative;">
<div class="text_tt">
{{ item.title }}
</div>
<div class="text_cc three-line-ellipsis">
{{ item.subtitle }}
</div>
<div
style="display: flex;justify-content: space-between;align-items: center;position: absolute;bottom: 20px;width: 98%;">
<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>
<div style="margin-left: 10px;">
<img src="public/img/societyduty/r.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex flex-row justify-center py-5" style="background-color: #F8F8F8;padding-bottom: 40px;">
<n-pagination v-model:page="page" :page-sizes="[10]" :item-count="total" size="large"
@update:page="getPageList">
</n-pagination>
</div>
<div v-if="videoShow" class="pop" style="display: block;">
<div class="abs popCont pop_video_cont">
<a @click="videoShow = false" class="abs pop_video_close closePop"></a>
<video x5-playsinline="" playsinline="" webkit-playsinline="" preload=""
x5-video-orientation="portraint" controls="" autoplay src="public/img/yue.mp4"
draggable="true"></video>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { NPagination } from 'naive-ui'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { nextTick, ref } from 'vue'
import 'swiper/css'
import { Autoplay, Navigation, Pagination, Scrollbar, A11y, EffectCoverflow,EffectFade } from "swiper/modules";
import { Autoplay, Navigation, Pagination, Scrollbar, A11y, EffectCoverflow, EffectFade } from "swiper/modules";
import ScrollReveal from 'scrollreveal';
import { NNumberAnimation } from 'naive-ui'
let modules = [Autoplay, A11y, EffectCoverflow,EffectFade];
let modules = [Autoplay, A11y, EffectCoverflow, EffectFade];
import "swiper/css";
import "swiper/css/navigation";
@ -106,6 +149,8 @@ import { useI18n } from 'vue-i18n'
import { useStore } from '~/store'
const { locale } = useI18n()
const videoShow = ref(false);
let newsSwiper: any = null
const onSwiperNews = (swiper: any) => {
newsSwiper = swiper
@ -120,31 +165,45 @@ const swiperOptionsNews = {
speed: 500,
effect: 'fade',
loop: true,
modules: [EffectFade,Autoplay,Navigation],
modules: [EffectFade, Autoplay, Navigation],
navigation: {
nextEl: '#swipen_prev',
prevEl: '#swipen_next',
},
}
let vesSwiper: any = null
const onSwiperExp = (swiper: any) => {
vesSwiper = swiper
const openNewInfo = (item) => {
window.open(`/info/${item.id}`)
}
const swiper_exp = ref();
const lists = ref([
{title: '21年西工硅巷青创加速营仪式开营'},
{title: '21年西工硅巷青创加速营活动进行中'},
{title: '香港青英会15 周年、第16 届执委会暨第7屆理事会就职仪式'},
{title: '青年企业家助力河南高质量发展暨河南青年创新创业论坛'},
]);
// 新闻数据
onMounted(() => {
nextTick(() => {
animate()
})
animate()
getNewsList();
})
const timeDateMy = (dateStr) => {
const date = new Date(dateStr);
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
const day = String(date.getDate()).padStart(2, '0');
return `${year}.${month}.${day}`;
}
const page = ref(1);
const total = ref(0);
const getPageList = async () => {
page.value = page.value + 1;
getNewsList();
}
const newList = ref([]);
const getNewsList = async () => {
const res = await $api.post('/api/home.news/index', {
limit: 10,
page: page.value,
})
total.value = res.data.data.count;
newList.value = res.data.data.list;
}
const numberAnimationInstRef = ref()
const numberAnimationInstRefKH = ref()
const numberAnimationInstRefJS = ref()
@ -227,65 +286,92 @@ const animate = () => {
@import "@/assets/animate/animate.min.css";
@import "@/assets/index.css";
::v-deep .n-pagination .n-pagination-item:not(.n-pagination-item--disabled).n-pagination-item--active {
color: #ffffff;
background-color: #FC7428;
border: 1px solid #FC7428;
}
::v-deep .n-pagination .n-pagination-item:not(.n-pagination-item--disabled):hover.n-pagination-item--button {
color: #FC7428;
}
::v-deep .n-pagination .n-pagination-item:not(.n-pagination-item--disabled):hover {
color: #FC7428;
border: 1px solid #FC7428;
}
::v-deep .n-pagination .n-pagination-item {
border: 1px solid #999999;
}
.group_666 .swiper-slide img {
width: 100%;
height: 500px;
height: auto;
transition: 1s linear 2s;
transform: scale(1.1, 1.1);
width: 100%;
height: 500px;
height: auto;
transition: 1s linear 2s;
transform: scale(1.1, 1.1);
}
.group_666 .swiper-slide-active img,
.swiper-slide-duplicate-active img {
transition: 6s linear;
transform: scale(1, 1);
transition: 6s linear;
transform: scale(1, 1);
}
.bottom_imgss{
.bottom_imgss {
// background: url(/public/img/customer/bg-s.png);
background: #F8F8F8;
width: 1920px;
height: 1047px;
// background-size: 100%;
// background-size: 100%;
}
.boxgs{
width: 1200px;
margin: 0 auto;
.boxgs {
width: 1200px;
margin: 0 auto;
margin-top: 30px;
.boxgs_top{
background: url(/img/societyduty/newstop.png) 100% 100% no-repeat;
width: 100%;height: 385px;border: 1px solid #FC7428;border-radius: 24px;
.boxgs_top {
background: url(/img/societyduty/newstop.png) 100% 100% no-repeat;
width: 100%;
height: 385px;
border: 1px solid #FC7428;
border-radius: 24px;
margin-top: 30px;
}
.box_con{
margin:20px;
.box_con {
margin: 20px;
background-color: #ffffff;
width: 100%;
height: 220px;
font-family: Microsoft YaHei UI-Regular;
border-radius:4px;
.text_tt{
display: inline-block;
border-radius: 4px;
.text_tt {
font-size: 22px;
width: 100%;
margin-top: 15px;
color: #3D3D3D ;
font-size: 16px;
font-weight: 500;
text-align: center;
padding: 0 25px 20px 25px;
color: #3D3D3D;
font-weight: 700;
}
.text_cc{
display: inline-block;
.text_cc {
width: 100%;
height: 30px;
overflow-wrap: break-word;
color: #999999 ;
color: #768597;
font-size: 14px;
font-weight: 400;
text-align: center;
line-height: 30px;
margin-top: 20px;
}
&:hover {
cursor: pointer;
box-shadow: 0 0 10px rgba(252, 116, 40, 0.5);
transition: all 0.3s ease;
border-radius: 8px;
//放大
transform: scale(1.05);
}
}
}
</style>

62
plugins/cdn-image.ts Normal file
View File

@ -0,0 +1,62 @@
// 插件用于处理静态生成模式下的图片CDN路径
import { defineNuxtPlugin } from '#app'
export default defineNuxtPlugin(() => {
// CDN基础URL
const cdnBaseUrl = 'https://cdn.web.0rui.cn/'
// 创建一个全局方法用于转换图片路径
return {
provide: {
// 转换图片路径为CDN路径
cdnImage: (path: string) => {
// 如果路径已经是完整的URL，则直接返回
if (path.startsWith('http://') || path.startsWith('https://')) {
return path
}
// 判断是否为图片资源
const isImage = /\.(jpg|jpeg|png|gif|svg|webp)$/i.test(path)
if (!isImage) {
return path // 非图片资源直接返回原路径
}
// 处理以public开头的路径
if (path.startsWith('public/')) {
return `${cdnBaseUrl}${path.replace('public/', '')}`
}
// 处理以/public开头的路径
if (path.startsWith('/public/')) {
return `${cdnBaseUrl}${path.replace('/public/', '')}`
}
// 处理以img/开头的路径
if (path.startsWith('img/')) {
return `${cdnBaseUrl}${path}`
}
// 处理以/img开头的路径
if (path.startsWith('/img/')) {
return `${cdnBaseUrl}${path.substring(1)}`
}
// 处理以_nuxt开头的路径
if (path.startsWith('/_nuxt/')) {
// 提取_nuxt后面的路径部分
const pathWithoutPrefix = path.replace('/_nuxt/', '')
// 如果路径包含img/，保留该结构
if (pathWithoutPrefix.includes('img/')) {
return `${cdnBaseUrl}${pathWithoutPrefix}`
} else {
// 否则添加img/前缀
return `${cdnBaseUrl}img/${pathWithoutPrefix}`
}
}
// 其他情况，直接拼接CDN基础URL和路径
return `${cdnBaseUrl}img/${path}`
}
}
}
})

BIN
public/img/1212.mp4 Normal file
View File

Binary file not shown.

BIN
public/img/222.mp4 Normal file
View File

Binary file not shown.

BIN
public/img/banner.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 MiB

After

Width:  |  Height:  |  Size: 3.6 MiB

BIN
public/img/banner2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 978 KiB

BIN
public/img/close.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
public/img/con_1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 329 B

BIN
public/img/con_2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
public/img/logo1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.3 KiB

BIN
public/img/media/1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 103 KiB

After

Width:  |  Height:  |  Size: 380 KiB

BIN
public/img/media/2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 74 KiB

After

Width:  |  Height:  |  Size: 238 KiB

BIN
public/img/media/3.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 100 KiB

After

Width:  |  Height:  |  Size: 100 KiB

BIN
public/img/media/4.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 87 KiB

After

Width:  |  Height:  |  Size: 305 KiB

BIN
public/img/media/5.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 93 KiB

After

Width:  |  Height:  |  Size: 327 KiB

BIN
public/img/media/a1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 62 KiB

BIN
public/img/media/a2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 59 KiB

BIN
public/img/media/a3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
public/img/media/a4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.2 KiB

BIN
public/img/media/a5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.9 KiB

BIN
public/img/media/b1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 486 KiB

BIN
public/img/media/b2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 514 KiB

BIN
public/img/media/b3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 467 KiB

BIN
public/img/media/b4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 391 KiB

BIN
public/img/media/buttom.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
public/img/media/buttom2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.0 KiB

BIN
public/img/media/left.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
public/img/media/v1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
public/img/media/v2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 39 KiB

BIN
public/img/media/v3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 61 KiB

BIN
public/img/media/v4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
public/img/shouyevideo.mp4
View File

Binary file not shown.

BIN
public/img/societyduty/bf.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
public/img/societyduty/det.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 877 KiB

BIN
public/img/societyduty/r.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 254 B

BIN
public/img/societyduty/组 4775.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 267 KiB

BIN
public/img/yue.mp4 Normal file
View File

Binary file not shown.

100
scripts/build-static.js Normal file
View File

@ -0,0 +1,100 @@
// 静态生成构建脚本
const fs = require('fs');
const path = require('path');
const { execSync } = require('child_process');
// CDN基础URL
const CDN_BASE_URL = 'https://cdn.web.0rui.cn/';
// 输出目录
const OUTPUT_DIR = path.resolve(__dirname, '../.output/public');
// 执行静态生成
console.log('开始执行静态生成...');
try {
// 执行nuxt generate命令
execSync('npm run generate', { stdio: 'inherit' });
console.log('静态生成完成！');
// 检查输出目录是否存在
if (!fs.existsSync(OUTPUT_DIR)) {
console.error('错误：输出目录不存在！');
process.exit(1);
}
console.log('开始处理HTML文件中的图片路径...');
// 递归处理目录中的所有HTML文件
processDirectory(OUTPUT_DIR);
console.log('所有HTML文件处理完成！');
console.log(`静态网站已生成到: ${OUTPUT_DIR}`);
console.log('可以使用 npm run preview 预览生成的静态网站');
} catch (error) {
console.error('构建过程中发生错误:', error);
process.exit(1);
}
/**
* 递归处理目录中的所有HTML文件
* @param {string} dir 目录路径
*/
function processDirectory(dir) {
const files = fs.readdirSync(dir);
for (const file of files) {
const filePath = path.join(dir, file);
const stat = fs.statSync(filePath);
if (stat.isDirectory()) {
// 递归处理子目录
processDirectory(filePath);
} else if (file.endsWith('.html')) {
// 处理HTML文件
processHtmlFile(filePath);
}
}
}
/**
* 处理HTML文件中的图片路径
* @param {string} filePath HTML文件路径
*/
function processHtmlFile(filePath) {
console.log(`处理文件: ${path.relative(OUTPUT_DIR, filePath)}`);
let content = fs.readFileSync(filePath, 'utf8');
// 替换HTML中的图片路径
// 匹配 src="public/img/xxx.png" 模式
content = content.replace(/src=\"(public\/img\/[^\"]+)\"/g, (match, p1) => {
return `src=\"${CDN_BASE_URL}${p1.replace('public/', '')}\"`;
});
// 匹配 src=\"/public/img/xxx.png\" 模式
content = content.replace(/src=\"(\/public\/img\/[^\"]+)\"/g, (match, p1) => {
return `src=\"${CDN_BASE_URL}${p1.replace('/public/', '')}\"`;
});
// 匹配 src=\"/img/xxx.png\" 模式
content = content.replace(/src=\"(\/img\/[^\"]+)\"/g, (match, p1) => {
return `src=\"${CDN_BASE_URL}${p1.replace('/img/', '')}\"`;
});
// 匹配 src=\"img/xxx.png\" 模式
content = content.replace(/src=\"(img\/[^\"]+)\"/g, (match, p1) => {
return `src=\"${CDN_BASE_URL}${p1.replace('img/', '')}\"`;
});
// 移除_nuxt前缀的图片路径
content = content.replace(/src=\"\/_nuxt\/img\/([^\"]+)\"/g, (match, p1) => {
return `src=\"${CDN_BASE_URL}${p1}\"`;
});
// 匹配 src="/_nuxt/assets/images/xxx.png" 模式
content = content.replace(/src=\"\/_nuxt\/assets\/images\/([^\"]+)\"/g, (match, p1) => {
return `src=\"${CDN_BASE_URL}${p1}\"`;
});
fs.writeFileSync(filePath, content, 'utf8');
}