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

feat: 添加移动端适配和样式优化

Browse Source 
- 在多个页面添加移动端检测并重定向到对应的移动端页面
- 优化移动端布局样式，包括间距、背景和高度调整
- 为社会责任页面添加分页功能
- 统一图片资源使用CDN地址
- 修复导航链接问题
- 添加新的背景变量和样式
- 优化动画效果和滚动触发
- 调整页面元素间距和响应式布局
This commit is contained in:
王创世 2025-05-28 17:54:36 +08:00
parent 625cf4a0e2
commit 601f99ec80
16 changed files with 295 additions and 141 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -8,7 +8,7 @@ dist
# Node dependencies
node_modules
.history
# Logs
logs
*.log

1
assets/css/common.scss
View File

@ -9,6 +9,7 @@
--bg-b: url('https://cdn.web.0rui.cn/img/bg-b.png');
--bg-4: url('https://cdn.web.0rui.cn/img/bg-4.png');
--bg-5: url('https://cdn.web.0rui.cn/img/bg-5.png');
--bg-6: url('https://cdn.web.0rui.cn/img/bg-6.png');
--qall: url('https://cdn.web.0rui.cn/img/qall.png');
--close: url('https://cdn.web.0rui.cn/img/close.png');
--t1a: url('https://cdn.web.0rui.cn/img/about/t1a.png');

2
assets/index.scss
View File

@ -110,7 +110,7 @@
height: 681px;
background: var(--bg-c) 100% no-repeat;
background-size: 100% 100%;
gap: 150px;
gap: 40px;
}
@media (max-width: 1440px) {

30
components/AppFooter.vue
View File

@ -36,10 +36,8 @@
洛阳公司地址：洛阳市 洛龙区 世贸中心D座1816室
</span>
</div>
<img class="image_29" referrerpolicy="no-referrer"
src="public/img/wb.png" />
<img class="image_30" referrerpolicy="no-referrer"
src="public/img/wx.png" />
<img class="image_29" referrerpolicy="no-referrer" src="public/img/wb.png" />
<img class="image_30" referrerpolicy="no-referrer" src="public/img/wx.png" />
</div>
</div>
@ -47,12 +45,24 @@
<div class="mobile-footer flex-col">
<div style="background-color: #eeeeee;width:100%;height: 0.5px;margin-bottom: 20px;"></div>
<div class="mobile-nav flex-col">
<span class="mobile-nav-item">企业首页</span>
<span class="mobile-nav-item">产品&amp;服务</span>
<span class="mobile-nav-item">灵睿&amp;我们</span>
<span class="mobile-nav-item">客户&amp;评价</span>
<span class="mobile-nav-item">社会&amp;责任</span>
<span class="mobile-nav-item">联系我们</span>
<NuxtLink to="/" class="mobile-nav-item">
<span >企业首页</span>
</NuxtLink>
<NuxtLink to="/phone_proServices_con/" class="mobile-nav-item">
<span >产品&amp;服务</span>
</NuxtLink>
<NuxtLink to="/phone_aboutUs/" class="mobile-nav-item">
<span >灵睿&amp;我们</span>
</NuxtLink>
<NuxtLink to="/phone_customerReviews/" class="mobile-nav-item">
<span >客户&amp;评价</span>
</NuxtLink>
<NuxtLink to="/phone_societyDutyNew/" class="mobile-nav-item">
<span >社会&amp;责任</span>
</NuxtLink>
<NuxtLink to="/phone_concatUs/" class="mobile-nav-item">
<span >加入我们</span>
</NuxtLink>
<span class="mobile-contact">联系电话：400-080-0379</span>
</div>
<div class="mobile-info flex-col">

2
components/AppHeader.vue
View File

@ -178,7 +178,7 @@ console.log(route)
display: flex;
align-items: center;
gap: 20px;
padding-left: 150px;
padding-left: 340px;
@media (max-width: 768px) {
display: none;

6
pages/aboutUs.vue
View File

@ -131,7 +131,7 @@
<swiper ref="swiper_exp" :slidesPerView="5" loop :loopedSlides="3" :autoplay="{ delay: 2000 }"
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%;">
<img :src="`${cdnUrl}/img/about/${item}.jpg`" style="width: 100%;">
</swiper-slide>
</swiper>
<!-- <div class="dswper_left">
@ -217,6 +217,10 @@ const swiper_exp = ref();
// 新闻数据
onMounted(() => {
const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
if (coMobile) {
window.location.href="/web/phone_aboutUs/";
}
animate()
})
const numberAnimationInstRef = ref()

15
pages/concatUs.vue
View File

@ -61,13 +61,14 @@
<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
<div v-for="(item, index) in typeList" @click="openType(item)"
:class="typeId == item.id ? 'title active' : 'title'">{{ item.name
}}</div>
</div>
<div class="flex justify-center align-center flex-wrap" style="margin-top: 30px;">
<div v-for="item in list" class="flex-col box_18s" style="margin-bottom: 20px;">
<div class="titless">
<div class="a1s">{{ item.name}}</div>
<div class="a1s">{{ item.name }}</div>
<div class="a2s">任职要求请联系HR</div>
</div>
<div class="line"></div>
@ -128,7 +129,11 @@ const swiperOptionsNews = {
}
// 新闻数据
onMounted(() => {
animate()
const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
if (coMobile) {
window.location.href = "/web/phone_concatUs/";
}
animate()
getType();
})
const openType = (item: any) => {
@ -151,7 +156,7 @@ const getType = () => {
}
const list = ref([])
const getList = () => {
$api.get("/api/home.recruitment_information/index?cate_id="+typeId.value)
$api.get("/api/home.recruitment_information/index?cate_id=" + typeId.value)
.then((res: any) => {
console.log(res)
list.value = res.data.data.list
@ -263,6 +268,7 @@ const animate = () => {
transition: 6s linear;
transform: scale(1, 1);
}
.section_1s {
height: 360px;
background: var(--allpeople) 100% no-repeat;
@ -379,6 +385,7 @@ const animate = () => {
padding: 20px;
color: #768597;
}
&:hover {
cursor: pointer;
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);

4
pages/customerReviews.vue
View File

@ -101,6 +101,10 @@ const lists = ref([
]);
// 新闻数据
onMounted(() => {
const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
if (coMobile) {
window.location.href="/web/phone_customerReviews/";
}
nextTick(() => {
animate()
})

8
pages/phone_aboutUs.vue
View File

@ -126,7 +126,7 @@
<swiper ref="swiper_exp" :slidesPerView="2" loop :loopedSlides="2" :autoplay="{ delay: 2000 }"
: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%;">
<img :src="`${cdnUrl}/img/about/${item}.jpg`" style="width: 100%;">
</swiper-slide>
</swiper>
<div class="rongyu_cla flex-row justify-center align-center absolute w-full" style="gap: 10px;">
@ -380,8 +380,10 @@ const animate = () => {
}
.box_7 {
background: var(--ruanzhu) 100% no-repeat;
height: 458px;
background: var(--ruanzhu) no-repeat;
background-size: 100% 100%;
height: auto;
padding-bottom: 70px;
}
.rongyu_cla {

194
pages/phone_index.vue
View File

@ -81,7 +81,8 @@
<div style="padding: 20px;">
<div class="leftBox section_2s flex-col" style="margin-right: 30px;">
<div class="group_6 flex-col">
<div class="box_6 flex-row align-center justify-between" style="width: 100%;align-items: center;">
<div class="box_6 flex-row align-center justify-between"
style="width: 100%;align-items: center;">
<div class="text-group_2">
<div class="text_17" style="color: #0256FF;">
专业技术服务
@ -252,13 +253,8 @@
<span class="text_24 topBox">行业案例</span>
<span class="text_15 topBox">Industry&nbsp;Cases</span>
<div class="dswper">
<swiper ref="swiper_exp"
:slidesPerView="isMobile ? 1 : 2"
loop
:autoplay="false"
:modules="modules"
:watchSlidesProgress="true"
@swiper="onSwiperExp">
<swiper ref="swiper_exp" :slidesPerView="isMobile ? 1 : 2" loop :autoplay="false" :modules="modules"
:watchSlidesProgress="true" @swiper="onSwiperExp">
<swiper-slide v-for="(item, index) in 14" :key="index">
<div style="padding: 20px;">
<img class="hy_my_home" :src="`${$cdnUrl}/img/home_al/op${item}.png`">
@ -277,31 +273,31 @@
<div class="text-wrapper_10">
<span class="text_41">新闻动态</span>
</div>
<div class="text-wrapper_11" style="margin-bottom: 20px;">
<span class="text_42">news information</span>
<div class="text-wrapper_11" style="margin-bottom: 20px;width: 100%;">
<span style="color: rgb(118, 133, 151);font-size: 16px;">news information</span>
</div>
<div v-for="item in newsList">
<div class="box_12 flex-row justify-center">
<img @click="openUrl(item.id)" class="image_7 leftBoxTop" referrerpolicy="no-referrer"
:src="item.image" style="cursor: pointer;;object-fit: cover;" />
<div class="box_13 flex-col" @click="openUrl(item.id)">
<div class="text-group_6">
<div class="one-line-ellipsis news_title_home">
{{ item.title }}
<img @click="openUrl(item.id)" class="image_7 leftBoxTop" referrerpolicy="no-referrer"
:src="item.image" style="cursor: pointer;;object-fit: cover;" />
<div class="box_13 flex-col" @click="openUrl(item.id)">
<div class="text-group_6">
<div class="one-line-ellipsis news_title_home">
{{ item.title }}
</div>
<div class="two-line-ellipsis"
style="color: #768597;font-size: 14px;font-weight: 400;margin-top: 20px;">
{{ item.subtitle }}
</div>
</div>
<div class="two-line-ellipsis"
style="color: #768597;font-size: 14px;font-weight: 400;margin-top: 20px;">
{{ item.subtitle }}
<div class="group_22 flex-row">
<div class="section_6 flex-col"></div>
<span class="text_44">{{ item.cate.name }}</span>
<span class="text_45">{{ retTime(item.release_time_text) }}</span>
</div>
</div>
<div class="group_22 flex-row">
<div class="section_6 flex-col"></div>
<span class="text_44">{{ item.cate.name }}</span>
<span class="text_45">{{ retTime(item.release_time_text) }}</span>
</div>
</div>
</div>
</div>
<div class="box_16 flex-row">
<div class="text-wrapper_12 flex-col">
<nuxt-link to="/phone_societyDutyNew/" class="text_52">
@ -339,15 +335,8 @@
<div v-if="videoShow" class="pop" style="display: block;">
<div class="abs popCont pop_video_cont" :style="isMobile ? { width: '90%' } : {}">
<a @click="videoShow = false" class="abs pop_video_close closePop"></a>
<video
:x5-playsinline="true"
:playsinline="true"
:webkit-playsinline="true"
preload="auto"
x5-video-orientation="portraint"
:controls="true"
:autoplay="true"
:src="`${cdnUrl}/img/222.mp4`"
<video :x5-playsinline="true" :playsinline="true" :webkit-playsinline="true" preload="auto"
x5-video-orientation="portraint" :controls="true" :autoplay="true" :src="`${cdnUrl}/img/222.mp4`"
:draggable="true"></video>
</div>
</div>
@ -601,15 +590,17 @@ const openUrl = (id: number) => {
@import "@/assets/animate/animate.min.css";
@import "@/assets/index.scss";
.text_7, .text_8 {
.text_7,
.text_8 {
text-align: center;
width: 100%;
}
.text_9, .text_11 {
.text_9,
.text_11 {
font-size: 16px !important;
text-align: center;
padding-right:0px
padding-right: 0px
}
.text_12 {
@ -618,10 +609,13 @@ const openUrl = (id: number) => {
padding: 0 15px;
width: 100%;
}
.text-wrapper_2{
.text-wrapper_2 {
margin: 0 auto;
}
.leftBox, .rightBox {
.leftBox,
.rightBox {
width: 100% !important;
margin: 10px 0 !important;
}
@ -638,18 +632,21 @@ const openUrl = (id: number) => {
width: 100% !important;
height: auto !important;
}
.section_1{
.section_1 {
height: 323px;
width: 100%;
width: 100%;
}
.image-wrapper_2{
.image-wrapper_2 {
border-radius: 10px;
}
.contactForm {
.inputform {
flex-direction: column !important;
width: 100% !important;
padding:20px 20px 10px 20px;
padding: 20px 20px 10px 20px;
}
.contactInput {
@ -657,7 +654,7 @@ const openUrl = (id: number) => {
margin: 10px 0 !important;
height: 40px !important;
font-size: 14px !important;
border-radius: 6px!important;
border-radius: 6px !important;
background: #FFFFFF;
padding-left: 10px;
}
@ -666,36 +663,47 @@ const openUrl = (id: number) => {
width: 100% !important;
height: 120px !important;
font-size: 14px !important;
border-radius: 6px!important;
border-radius: 6px !important;
padding: 10px;
}
}
.box_12, .box_14 {
.box_12,
.box_14 {
flex-direction: column !important;
}
.box_3{
.box_3 {
width: 100%;
}
.box_7,.box_13,.box_18{
.box_7,
.box_13,
.box_18 {
height: 100%;
}
.image_7, .image_8, .image_9 {
.image_7,
.image_8,
.image_9 {
width: 100% !important;
}
.text_24{
.text_24 {
margin-top: 30px;
}
.group_22{
.group_22 {
width: 100%;
margin: 27px 0 23px 15px;
}
.news_my_home {
width: 100% !important;
margin: 10px 0 !important;
padding: 15px !important;
}
.contactBut {
width: 108px;
border-radius: 4px 4px 4px 4px;
@ -703,13 +711,14 @@ const openUrl = (id: number) => {
bottom: 20px;
right: 30px;
height: 36px;
background-color: #222222;
background-color: rgb(252, 116, 40);
border: none;
font-weight: 400;
font-size: 16px;
line-height: 28px;
color: #FFFFFF;
}
.group_29 {
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px !important;
@ -762,15 +771,18 @@ const openUrl = (id: number) => {
width: 100%;
height: 100%;
}
.text_16 {
font-size: 14px;
line-height: 24px;
}
.group_10{
.group_10 {
width: 91%;
margin-left:15px;
margin-left: 15px;
margin-top: 0px;
}
.text_18 {
font-size: 15px !important;
}
@ -782,24 +794,30 @@ const openUrl = (id: number) => {
.group_7 {
padding: 10px !important;
margin: 0px 0 !important;
height: 100%!important;
height: 100% !important;
}
.text-group_3{
.text-group_3 {
height: auto;
}
.section_2sa{
.section_2sa {
height: 700px;
}
.image-wrapper_5 {
width: 40px !important;
height: 40px !important;
margin-top: 0px;
margin-right: 20px !important;
}
.text-group_3_3{
.text-group_3_3 {
height: auto;
}
.text-group_3, .text-group_3_3 {
.text-group_3,
.text-group_3_3 {
flex: 1 !important;
}
@ -819,64 +837,88 @@ const openUrl = (id: number) => {
transform: none !important;
color: inherit !important;
}
.text-group_1,.group_7,.group_6s{
.text-group_1,
.group_7,
.group_6s {
width: 100%;
}
.text_19{
.text_19 {
width: 100%;
line-height: 25px;
height: auto;
}
.box_12{
.box_12 {
height: 100%;
margin-top: 0px;
}
.group_6 {
width: 100%;
}
.box_13{
.box_13 {
width: 100%;
margin:0px;
margin: 0px;
}
.section_2s{
.section_2s {
height: 710px;
}
.box_5{
.box_5 {
height: auto;
}
.text-group_2{
.text-group_2 {
width: 55%;
height: auto;
}
.text_17,.text_16{
.text_17,
.text_16 {
width: auto;
}
.box_6{
padding:0px 15px 15px 15px;
.box_6 {
padding: 0px 15px 15px 15px;
height: 100%;
}
.image-wrapper_5{
.image-wrapper_5 {
width: 30%;
}
.text-group_3{
.text-group_3 {
width: 70%;
}
.group_10s {
width: 100%;
margin: 0px;
}
.dswper{
.dswper {
margin-top: 10px;
}
.text-wrapper_10{
.text-wrapper_10 {
margin-top: 30px;
}
@media (max-width: 768px) {
.group_3 {
height: auto;
padding: 20px;
background-size:auto;
background-size: auto;
}
.box_18 {
background: var(--bg-6) 100% no-repeat;
background-size: 100% 100%;
}
}
</style>

33
pages/phone_proServices.vue
View File

@ -12,7 +12,7 @@
</swiper>
</div>
<div class="group_2 flex-col"
style="background-color: #ffffff;overflow: unset;position: relative;height: 100%;">
style="background-color: #ffffff;overflow: unset;position: relative;min-height: 1157px;">
<!-- <img :src="`${cdnUrl}/img/service_01.png`" style="width: 100%;position: absolute;top: -26px;z-index: 10;"> -->
<div class="service_top1">
<NuxtLink to="/phone_proServices_con/" style="cursor: pointer;width: 50%;text-align: center;">
@ -134,7 +134,7 @@
</div>
</div>
<div class="service_023">
<div class="service_023" style="min-height: 996px;">
<div class="service-01" style="text-align: center;padding-top: 10px;z-index: 30;">
<div style="font-size: 34px;font-weight: 700;">定制软件开发</div>
<div style="color: #768597;font-size: 14px;margin-top:10px;">全方位的定制化软件开发服务</div>
@ -172,7 +172,7 @@
</div>
</div>
</div>
<div style="padding: 40px 0px 40px 0px;z-index: 30;background-color: #ffffff;">
<div style="min-height: 619px;padding: 40px 0px 40px 0px;z-index: 30;background-color: #ffffff;">
<div style="text-align: center;z-index: 30;">
<div style="font-size: 34px;font-weight: 700;">IT运维服务</div>
<div style="color: #768597;font-size: 14px;margin-top: 10px;">承接客户网站及应用系统的全面安全防护项目</div>
@ -216,12 +216,12 @@
</div>
</div>
</div>
<div class="service_033" style="padding-top: 30px;z-index: 30;">
<div class="service_033" style="padding-top: 30px;z-index: 30;min-height: 1576px;">
<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-b" style="flex-wrap: wrap;display: flex;justify-content: center;margin-top: 30px;">
<div style="flex-wrap: wrap;display: flex;justify-content: center;margin-top: 30px;">
<div class="service-wl">
<div style="position: absolute;">
<img :src="`${cdnUrl}/img/service_034.png`" style="width:100%;height: 100%;">
@ -266,7 +266,7 @@
多重加密技术对应用运行时的进程空间进行防护，采用动态加解密技术，阻止各种调试器进行内存调试、注入和dump</div>
</div>
</div>
<div class="service-wl-b" style="flex-wrap: wrap;display: flex;justify-content: center;gap: 0px;">
<div style="flex-wrap: wrap;display: flex;justify-content: center;gap: 0px;">
<div class="service-wl">
<div style="position: absolute;">
<img :src="`${cdnUrl}/img/service_034.png`" style="width:100%;height: 100%;">
@ -311,7 +311,7 @@
</div>
</div>
</div>
<div style="z-index: 30;background-color: #ffffff;padding:40px 20px;">
<div style="min-height: 1705px;z-index: 30;background-color: #ffffff;padding:40px 20px;">
<div style="text-align: center;z-index: 30;">
<div style="font-size: 34px;font-weight: 700;">智慧化解决方案</div>
<div style="color: #768597;font-size: 14px;margin-top: 10px;">利用物联网、大数据、人工智能等前沿技术，为不同场景提供一体化的智慧化解决方案
@ -499,7 +499,9 @@ const swiperOptionsNews = {
// 新闻数据
onMounted(() => {
animate();
nextTick(() => {
animate();
})
})
const animate = () => {
const sr = ScrollReveal();
@ -516,14 +518,15 @@ const animate = () => {
})
sr.reveal('.service_bottom_01', {
origin: "left",
origin: "right",
distance: "550px",
duration: 800,
delay: 100,
opacity: 0,
scale: 0.9,
reset: true,
reset: false,
useDelay: 130,
viewFactor: 0.3,
mobile: true,
})
sr.reveal('.service-01', {
@ -555,23 +558,25 @@ const animate = () => {
delay: 100,
opacity: 0,
scale: 0.9,
reset: false,
reset: true,
useDelay: 500,
mobile: true,
})
sr.reveal('.service-wl', {
origin: "left",
distance: "50px",
distance: "550px",
duration: 800,
delay: 200,
delay: 100,
opacity: 0,
scale: 0.9,
reset: true,
viewFactor: 0.1,
useDelay: 130,
mobile: true,
})
// sr.reveal('.service-wl-b', {
// origin: "left",
// distance: "50px",
// distance: "500px",
// duration: 800,
// delay: 300,
// opacity: 0,

51
pages/phone_societyDuty.vue
View File

@ -52,13 +52,13 @@
<div class="boxgs flex-row flex-wrap">
<div class="box_con flex-col" v-for="(item,index) in lists" :key="index">
<div class="box_con flex-col" v-for="(item,index) in newsList" :key="index">
<div class="align-center" style="justify-content: center;">
<img :src="`${cdnUrl}/img/societyduty/s${index+1}.png`" style="width: 100%;">
<img :src="item.image" style="width: 100%;">
</div>
<div class="flex-col" style="justify-content: center;margin-top: 5px;">
<span class="text_tt">
{{item.title}}
{{item.name}}
</span>
<!-- <span class="text_cc">
{{item.value}}
@ -67,12 +67,16 @@
</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>
</template>
<script lang="ts" setup>
import { NPagination } from 'naive-ui'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { nextTick, ref } from 'vue'
import 'swiper/css'
@ -138,10 +142,29 @@ const lists = ref([
]);
// 新闻数据
onMounted(() => {
getIndexNews();
nextTick(() => {
animate()
})
})
const page = ref(1);
const total = ref(0);
const getPageList = async () => {
page.value = page.value + 1;
getIndexNews();
}
const newsList = ref([])
const getIndexNews = () => {
$api.get(`/api/home.news/images?page=${page.value}limit=12`)
.then((res: any) => {
console.log(res)
newsList.value = res.data.data.list
})
.catch((err) => {
console.dir(err)
})
}
const numberAnimationInstRef = ref()
const numberAnimationInstRefKH = ref()
const numberAnimationInstRefJS = ref()
@ -224,6 +247,24 @@ const animate = () => {
@import "@/assets/animate/animate.min.css";
@import "@/assets/index.scss";
::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 {

4
pages/proServices.vue
View File

@ -1045,6 +1045,10 @@ const swiperOptionsNews = {
// 新闻数据
onMounted(() => {
const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
if (coMobile) {
window.location.href="/web/phone_proServices/";
}
animate()
})
const animate = () => {

4
pages/proServices_con.vue
View File

@ -379,6 +379,10 @@ const swiperOptionsNews = {
// 新闻数据
onMounted(() => {
const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
if (coMobile) {
window.location.href="/web/phone_proServices_con/";
}
animate()
})
const animate = () => {

76
pages/societyDuty.vue
View File

@ -40,13 +40,13 @@
<div class="boxgs flex-row flex-wrap">
<div class="box_con flex-col" v-for="(item,index) in lists" :key="index">
<div class="box_con flex-col" v-for="(item,index) in newsList" :key="index">
<div class="align-center" style="justify-content: center;">
<img width="277px" height="189px" :src="`${cdnUrl}/img/societyduty/s${index+1}.png`" alt="">
<img width="277px" height="189px" :src="item.image" alt="">
</div>
<div class="flex-col" style="justify-content: center;margin-top: 5px;">
<span class="text_tt">
{{item.title}}
{{item.name}}
</span>
<!-- <span class="text_cc">
{{item.value}}
@ -55,12 +55,17 @@
</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>
</template>
<script lang="ts" setup>
import { NPagination } from 'naive-ui'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { nextTick, ref } from 'vue'
import 'swiper/css'
@ -104,32 +109,35 @@ const swiperOptionsNews = {
},
}
let vesSwiper: any = null
const onSwiperExp = (swiper: any) => {
vesSwiper = swiper
}
const swiper_exp = ref();
const lists = ref([
{title: '21年西工硅巷青创加速营仪式开营'},
{title: '21年西工硅巷青创加速营活动进行中'},
{title: '香港青英会15 周年、第16 届执委会暨第7屆理事会就职仪式'},
{title: '青年企业家助力河南高质量发展暨河南青年创新创业论坛'},
{title: '郑州市儿童福利院慰问活动'},
{title: '河南青年科技创新论坛'},
{title: '洛阳市青年联合会第九届委员会常务委员第一次会议'},
{title: '团省委省青联2023年新春送温暖慰问活动'},
{title: '荥阳市乔楼镇付河村“扶贫助困 情系家乡”志愿活动'},
{title: '东方医院活动'},
{title: '中国青年梦想季活动-中国'},
{title: '河南省青年企业家协会第十一届常务理事选举'}
]);
// 新闻数据
onMounted(() => {
const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
if (coMobile) {
window.location.href="/web/phone_societyDuty/";
}
getIndexNews();
nextTick(() => {
animate()
})
})
const page = ref(1);
const total = ref(0);
const getPageList = async () => {
page.value = page.value + 1;
getIndexNews();
}
const newsList = ref([])
const getIndexNews = () => {
$api.get(`/api/home.news/images?page=${page.value}limit=12`)
.then((res: any) => {
console.log(res)
newsList.value = res.data.data.list
})
.catch((err) => {
console.dir(err)
})
}
const numberAnimationInstRef = ref()
const numberAnimationInstRefKH = ref()
const numberAnimationInstRefJS = ref()
@ -211,6 +219,24 @@ const animate = () => {
<style lang="scss" scoped>
@import "@/assets/animate/animate.min.css";
@import "@/assets/index.scss";
::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;
}
@ -230,7 +256,7 @@ const animate = () => {
.bottom_imgss{
// background: url(/public/img/customer/bg-s.png);
background: #F8F8F8;
height: 1047px;
height: 100%;
// background-size: 100%;
}
.boxgs{

4
pages/societyDutyNew.vue
View File

@ -151,6 +151,10 @@ const openNewInfo = (item) => {
// 新闻数据
onMounted(() => {
const coMobile = /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
if (coMobile) {
window.location.href="/web/phone_societyDutyNew/";
}
animate()
getNewsList();
})