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

优化AppHeader.vue和关于我们页面的样式及响应式设计

Browse Source 
- 在AppHeader.vue中，调整了logo的显示逻辑，增加了对`phone_info-id`路由的支持，优化了移动端菜单的交互效果。
- 在aboutUs.vue中，增加了Swiper容器的最小高度，提升了页面的视觉效果。
- 在phone_index.vue中，修改了动画配置，确保更好的用户体验。
- 在phone_proServices.vue中，调整了专业技术服务的样式，提升了页面的整体美观性。
This commit is contained in:
王创世 2025-05-22 18:30:57 +08:00
parent bf32ef86e2
commit e0442c3c6c
10 changed files with 1722 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
components/AppHeader.vue
View File

@ -2,13 +2,17 @@
<div class="page flex-col">
<div class="group_1 flex-col" :class="[(isScrolled) && route.name != 'info-id' ? 'topfix' : '']"
@mouseenter="openmosee()" @mouseleave="checkBoxHeight()">
<div class="flex-row" :style="{justifyContent:coMobile?'space-between':'center',backgroundColor:isMobileMenuOpen?'#ffffff':'transparent',}" :class="route.name == 'info-id' ? 'box_1 box_1_info' : 'box_1'">
<img v-if="route.name != 'info-id' && !isScrolled && !isMobileMenuOpen" class="image_1" referrerpolicy="no-referrer"
:src="`${cdnUrl}/img/logo.png`" />
<img v-if="route.name != 'info-id' && isScrolled || isMobileMenuOpen" class="image_1" referrerpolicy="no-referrer"
:src="`${cdnUrl}/img/logo1.png`" />
<img v-if="route.name == 'info-id'" class="image_1" referrerpolicy="no-referrer"
:src="`${cdnUrl}/img/logo1.png`" />
<div class="flex-row"
:style="{ justifyContent: coMobile ? 'space-between' : 'center', backgroundColor: isMobileMenuOpen ? '#ffffff' : 'transparent', }"
:class="route.name == 'info-id' ? 'box_1 box_1_info' : 'box_1'">
<img v-if="route.name != 'info-id' && route.name != 'phone_info-id' && !isScrolled && !isMobileMenuOpen"
class="image_1" referrerpolicy="no-referrer" :src="`${cdnUrl}/img/logo.png`" />
<img v-if="(route.name != 'info-id' && route.name != 'phone_info-id') && isScrolled"
class="image_1" referrerpolicy="no-referrer" :src="`${cdnUrl}/img/logo1.png`" />
<img v-if="(route.name != 'info-id' && route.name != 'phone_info-id') && isMobileMenuOpen"
class="image_1" referrerpolicy="no-referrer" :src="`${cdnUrl}/img/logo1.png`" />
<img v-if="route.name == 'info-id' || route.name == 'phone_info-id'" class="image_1"
referrerpolicy="no-referrer" :src="`${cdnUrl}/img/logo1.png`" />
<!-- Desktop Navigation -->
<div class="desktop-nav">
<div data-title="企业首页"
@ -49,7 +53,8 @@
</div>
<!-- Mobile Hamburger Button -->
<div class="mobile-menu-btn" @click="toggleMobileMenu">
<div class="hamburger" :class="{ 'is-active': isMobileMenuOpen,'is-scrolled':isScrolled }">
<div class="hamburger"
:class="{ 'is-active': isMobileMenuOpen, 'is-scrolled': isScrolled || route.name == 'phone_info-id' }">
<span></span>
<span></span>
<span></span>
@ -60,10 +65,10 @@
<div class="mobile-nav" v-if="isMobileMenuOpen">
<span @click="openUrl('/')" class="mobile-nav-item">企业首页</span>
<span @click="openUrl('/phone_proServices_con/')" class="mobile-nav-item">产品&amp;服务</span>
<span @click="openUrl('/aboutUs/')" class="mobile-nav-item">灵睿&amp;我们</span>
<span @click="openUrl('/customerReviews/')" class="mobile-nav-item">客户&amp;评价</span>
<span @click="openUrl('/societyDutyNew/')" class="mobile-nav-item">社会&amp;责任</span>
<span @click="openUrl('/concatUs/')" class="mobile-nav-item">加入我们</span>
<span @click="openUrl('/phone_aboutUs/')" class="mobile-nav-item">灵睿&amp;我们</span>
<span @click="openUrl('/phone_customerReviews/')" class="mobile-nav-item">客户&amp;评价</span>
<span @click="openUrl('/phone_societyDutyNew/')" class="mobile-nav-item">社会&amp;责任</span>
<span @click="openUrl('/phone_concatUs/')" class="mobile-nav-item">加入我们</span>
</div>
</div>
<transition name="fade-scale" v-if="!coMobile">
@ -120,7 +125,7 @@ const openTop = () => {
window.scrollTo(0, 0);
}
const openmosee = () => {
if(!coMobile){
if (!coMobile) {
isScrolled.value = true;
}
}
@ -217,6 +222,7 @@ console.log(route)
span {
background-color: #000000;
&:nth-child(1) {
transform: rotate(45deg);
top: 10px;
@ -329,8 +335,9 @@ console.log(route)
opacity: 1;
transform: scale(1);
}
.is-scrolled{
span{
.is-scrolled {
span {
background-color: #000000;
}
}

17
pages/aboutUs.vue
View File

@ -1,7 +1,7 @@
<template>
<div style="width: 100%;">
<!-- Swiper 容器 -->
<div class="group_666" style="position: relative;min-height: 350px;">
<div class="group_666" style="position: relative;min-height: 450px;">
<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
<swiper-slide>
<img :src="`${cdnUrl}/img/abus.png`" style="width: 100%;height: 100%;object-fit: cover;">
@ -10,19 +10,6 @@
<img :src="`${cdnUrl}/img/abus.png`" style="width: 100%;height: 100%;object-fit: cover;">
</swiper-slide>
</swiper>
<!-- <div style="position: absolute;bottom: 50px;left: 0;width: 100%;z-index: 100;">
<div class="flex-row justify-center align-center">
<div>
<img :src="`${cdnUrl}/img/left.png" alt="">
</div>
<div style="margin: 0px 20px;">
<img :src="`${cdnUrl}/img/morse.png" alt="">
</div>
<div>
<img :src="`${cdnUrl}/img/right.png" alt="">
</div>
</div>
</div> -->
</div>
<div class="group_2 flex-col">
<div class="box_2 flex-col">
@ -35,8 +22,6 @@
<div class="text-group_1 flex-col" style="width: 100%;">
<span class="text_7" style="width: 100%;position: relative;text-align: center;">
洛阳灵睿网络技术有限公司
<!-- <img :src="`${cdnUrl}/img/about/xing.png`" alt=""
style="position: absolute;top: -10px; right: 0;" /> -->
</span>
<span class="text_8" style="width: 100%;color: #3D3D3D;text-align: center;">
智慧信息化与数字内容服务领航者

409
pages/phone_aboutUs.vue Normal file
View File

@ -0,0 +1,409 @@
<template>
<div style="width: 100%;">
<!-- Swiper 容器 -->
<div class="group_666" style="position: relative;height: 250px;">
<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
<swiper-slide>
<img :src="`${cdnUrl}/img/abus.png`" style="width: 100%;height: 100%;object-fit: cover;">
</swiper-slide>
<swiper-slide>
<img :src="`${cdnUrl}/img/abus.png`" style="width: 100%;height: 100%;object-fit: cover;">
</swiper-slide>
</swiper>
</div>
<div class="group_2 flex-col">
<div class="box_2 flex-col">
<div class="group_3 flex-row justify-center" style="background: #ffffff;height: auto;">
<!-- <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" style="padding: 40px 20px 0px 20px;width: 100%;">
<div class="text-group_1 flex-col" style="width: 100%;">
<span class="text_7"
style="width: 100%;position: relative;text-align: center;font-size: 26px;">
洛阳灵睿网络技术有限公司
</span>
<span class="text_8" style="width: 100%;color: #3D3D3D;text-align: center;">
智慧信息化与数字内容服务领航者
</span>
</div>
<span class="text_top_12" style="height: auto;font-size: 14px;margin-top: 20px;">
洛阳灵睿网络技术有限公司成立于2006年，深耕互联网行业，专注智慧信息化与数字内容服务领域19年。是集技术研发、创意策划、全媒体运营于一体的高新技术企业。公司以“技术赋能场景，内容驱动价值”为核心使命，专注于为大型公立医院、教育机构、企事业单位、品牌营销策略提供一站式智慧化解决方案与品牌数字化升级服务，助力客户实现效率提升、品牌增值与精准传播。
</span>
<span class="textss13">
专注互联网领域，发散新媒体创思，执着深耕口碑服务，扎实落地品牌内容，共创新信息化与内容服务业态。
</span>
<div class="group_28 flex-row justify-between numberTopBox"
style="width: 100%;text-align: center;">
<div class="text-group_9 flex-col justify-between" style="width: auto;height: 80px;">
<div class="text_55" style="font-size: 28px;text-align: center;width: auto;">
<n-number-animation :duration="5000" ref="numberAnimationInstRef" :active="false"
:from="0" :to="1000"></n-number-animation>
<span style="font-size: 20px;">+</span>
</div>
<span class="">服务客户</span>
</div>
<div class="text-group_10 flex-col justify-between" style="width: auto;height: 80px;">
<div class="text_58" style="font-size: 28px;text-align: center;width: auto;">
<n-number-animation :duration="5000" ref="numberAnimationInstRefKH" :active="false"
:from="0" :to="19"></n-number-animation>
<span style="font-size: 20px;">年</span>
</div>
<span class="">技术沉淀</span>
</div>
<div class="text-group_11 flex-col justify-between" style="width: auto;height: 80px;">
<div class="text_61" style="font-size: 28px;text-align: center;width: auto;">
<n-number-animation :duration="5000" ref="numberAnimationInstRefJS" :active="false"
:from="0" :to="100"></n-number-animation>
<span style="font-size: 20px;">+</span>
</div>
<div class="">覆盖行业</div>
</div>
<div class="text-group_12 flex-col justify-between" style="width: auto;height: 80px;">
<div class="text_64" style="font-size: 28px;text-align: center;width: auto;">
<n-number-animation :duration="5000" ref="numberAnimationInstRefHY" :active="false"
:from="0" :to="30"></n-number-animation>
<span style="font-size: 20px;">+</span>
</div>
<span class="">技术团队</span>
</div>
</div>
</div>
</div>
<div class="flex rongyu1s bottomBox">
<div class="flex" style="width: 55%;align-items: center;">
<img style="margin-left: 20px;" :src="`${cdnUrl}/img/about/jiangbei.png`" alt="">
<span class="spanst">荣誉标签：</span>
</div>
<div class="flex" style="width: 85%;overflow: hidden;">
<n-marquee>
<div class="spans" style="margin-right: 50px;display: inline-block;">中国电子商务协会工业电商委员会河南分会单位
</div>
<div class="spans" style="display: inline-block;margin-right: 50px;">新华网、人民网、今日头条新闻联络中心
</div>
<div class="spans" style="display: inline-block;margin-right: 50px;">
灵睿与郑州、洛阳等地的网信以及网监系统保持长期合作获</div>
</n-marquee>
</div>
</div>
</div>
</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: #F8F8F8;flex-wrap: wrap;padding:40px 20px;">
<div class="group_4 flex-col leftBox" style="width: 100%;">
<div class="text-group_1 flex-col justify-between" style="width: 100%;height: auto;">
<span class="text_7" style="position: relative;margin: 0 auto;width: auto;">
睿创团队介绍
<img :src="`${cdnUrl}/img/about/xing.png`" alt=""
style="position: absolute;top: -10px; right: -30px;" />
</span>
</div>
<span class="text_12" style="width: 100%;;height: auto;font-size: 14px;">
灵睿基因一直是一群年轻的青年人组成，我们致力打造专业的团队化运营模式，集合程序猿、设计狗、运营喵的创作者联盟。年轻不是资本，敢重新定义年轻才是，在互联网领域，我们致力做一支专业，积极，上进的年轻团队；80后主导，90后主力，00后紧随。以“为客户创造价值 用互联网思维打造品牌”为使命。以“正直诚信、实干勇敢、协作共赢、创业精神”为价值观。努力发展，破茧成蝶。
</span>
</div>
<div class="group_5 flex-col justify-center align-center rightBox" style="width: 100%;">
<div class="flex-col section_1sb"></div>
</div>
</div>
</div>
</div>
<div class="box_7 flex-col">
<span class="text_24 topBox">著作权和荣誉证书</span>
<span class="text_15 topBox">Company&nbsp;environment</span>
<div class="dswper" style="margin-top: 30px;width: 100%;">
<swiper ref="swiper_exp" :slidesPerView="2" loop :loopedSlides="2" :autoplay="{ delay: 2000 }"
: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%;">
</swiper-slide>
</swiper>
<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;"
:style="{ backgroundColor: activeSlideIndex === index ? '#fc7428' : '#C1C1C1' }">
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
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 ScrollReveal from 'scrollreveal';
import { NNumberAnimation, NMarquee } from 'naive-ui'
let modules = [Autoplay, A11y, EffectCoverflow, EffectFade];
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import 'swiper/css/effect-coverflow';
import 'swiper/css/mousewheel'
import 'swiper/css/grid'
import 'swiper/css/effect-fade'
import 'swiper/css/autoplay'
import * as swiperAni from '@/assets/animate/animate.js'
import $api from '@/service/webRequest'
import { useI18n } from 'vue-i18n'
import { useStore } from '~/store'
const { locale } = useI18n()
const cdnUrl = useCdn()
let newsSwiper: any = null
const onSwiperNews = (swiper: any) => {
newsSwiper = swiper
}
const swiperOptionsNews = {
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
direction: 'horizontal',
slidesPerView: 1,
speed: 500,
effect: 'fade',
loop: true,
modules: [EffectFade, Autoplay, Navigation],
navigation: {
nextEl: '#swipen_prev',
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(() => {
animate()
})
const numberAnimationInstRef = ref()
const numberAnimationInstRefKH = ref()
const numberAnimationInstRefJS = ref()
const numberAnimationInstRefHY = ref()
const animate = () => {
const sr = ScrollReveal();
sr.reveal('.leftBox', {
origin: "left",
distance: "1000px",
duration: 1300,
delay: 0,
opacity: 0,
scale: 0.9,
reset: true,
mobile: true,
})
sr.reveal('.rightBox', {
origin: "right",
distance: "1000px",
duration: 1300,
delay: 100,
opacity: 0,
scale: 0.9,
reset: true,
mobile: true,
})
sr.reveal('.topBox', {
origin: "top",
distance: "1000px",
duration: 1300,
delay: 100,
opacity: 0,
scale: 0.9,
reset: true,
mobile: true,
})
sr.reveal('.bottomBox', {
origin: "bottom",
distance: "1000px",
duration: 1300,
delay: 100,
opacity: 0,
scale: 0.9,
reset: true,
mobile: true,
})
sr.reveal('.numberTopBox', {
origin: "top",
distance: "1000px",
duration: 1300,
delay: 100,
opacity: 0,
scale: 0.9,
reset: true,
mobile: true,
beforeReveal: function (el: any) {
numberAnimationInstRef.value.play()
numberAnimationInstRefKH.value.play()
numberAnimationInstRefJS.value.play()
numberAnimationInstRefHY.value.play()
},
})
sr.reveal('.topSj', {
origin: "bottom",
distance: "1000px",
duration: 1300,
delay: 5,
opacity: 0,
scale: 0.9,
reset: true,
mobile: true,
useDelay: 'always',
interval: 50,
})
}
</script>
<style lang="scss" scoped>
@import "@/assets/animate/animate.min.css";
@import "@/assets/index.scss";
:deep(.dswper .swiper-slide-next) {
transform: translate3d(0px, 0px, -507px) rotateX(0deg) rotateY(0deg) scale(1) !important;
}
:deep(.dswper .swiper-slide-prev) {
transform: translate3d(0px, 0px, -507px) rotateX(0deg) rotateY(0deg) scale(1) !important;
}
.group_666 .swiper-slide img {
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);
}
.bottom_imgs {
background: var(--qall) no-repeat;
width: 1230px;
height: 272px;
background-size: 100% 100%;
margin: 0 auto;
}
.section_1sa {
height: 410px;
background: var(--t1a) 100% no-repeat;
width: 576px;
z-index: 10;
}
.section_1sb {
height: 256px;
background: var(--t1b) no-repeat;
background-size: 100%;
width: 100%;
z-index: 10;
}
.textss13 {
width: 100%;
font-weight: 600;
font-size: 14px;
color: #768597;
line-height: 22px;
font-family: Microsoft YaHei UI-Regular;
text-align: center;
}
.rongyu1s {
width: 90%;
height: 68px;
background: #F8F8F8;
border-radius: 0px 0px 0px 0px;
align-items: center;
margin: 0 auto;
margin-bottom: 70px;
.spanst {
height: 32px;
font-family: Microsoft YaHei UI, Microsoft YaHei UI;
font-weight: bold;
font-size: 14px;
color: #3D3D3D;
line-height: 32px;
text-align: left;
font-style: normal;
text-transform: none;
margin-left: 10px;
}
.spans {
// width: px;
height: 21px;
font-family: Microsoft YaHei UI, Microsoft YaHei UI;
font-weight: 400;
font-size: 14px;
color: #3D3D3D;
line-height: 21px;
text-align: left;
font-style: normal;
text-transform: none;
}
}
.n-marquee {
width: 100%;
}
.box_7 {
background: var(--ruanzhu) 100% no-repeat;
height: 512px;
}
.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: 100%;
text-align: center;
margin: 0 auto;
}
@media (max-width: 786px) {
.group_3 {
gap: 0px;
height: 645px;
}
}
</style>

372
pages/phone_concatUs.vue Normal file
View File

@ -0,0 +1,372 @@
<template>
<div style="width: 100%;">
<!-- Swiper 容器 -->
<div class="group_666" style="position: relative;height: 200px;">
<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
<swiper-slide>
<img :src="`${cdnUrl}/img/joinus.png`" style="width: 100%;height: 100%;object-fit: cover;">
</swiper-slide>
<swiper-slide>
<img :src="`${cdnUrl}/img/joinus.png`" style="width: 100%;height: 100%;object-fit: cover;">
</swiper-slide>
</swiper>
</div>
<div class="group_2 flex-col" >
<div class="box_2 flex-col">
<div class="group_3 flex-wrap" style="padding: 20px;">
<div class="group_5 flex-col justify-center align-center rightBox" style="width: 100%;">
<div class="section_1s flex-col"></div>
</div>
<div class="group_4 flex-col leftBox">
<div class="flex-col justify-between text-center">
<span style="font-size: 24px;font-weight: 600;">洛阳灵睿网络技术有限公司</span>
</div>
<span style="color: #768597;font-size: 15px;margin-top: 10px;">
从一支年轻的创业团队，慢慢发展成为业务遍及全国的信息化，内容支持型互联网公司，我们仍旧保持着始终创业的心态，每一天努力向前，如果你也愿意加入我们，请联系我们的HR，期待与你的会面。
</span>
<div style="margin-top: 30px;">
<div class="text_13s">
<img :src="`${cdnUrl}/img/telphone.png`" alt="" class="imgs">
联系电话：17603796680
</div>
<div class="text_13s" style="margin-top: 15px;">
<img :src="`${cdnUrl}/img/wechat.png`" alt="" class="imgs">
微信：17603796680
</div>
</div>
</div>
</div>
</div>
</div>
<div class="box_17s flex-col" style="overflow: hidden;">
<span class="text_53" style="margin-top: 30px">热门岗位</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
}}</div>
</div>
<div class="flex justify-center align-center flex-wrap" style="padding: 20px;width: 100%;">
<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="a2s">任职要求请联系HR</div>
</div>
<div class="line"></div>
<div class="bottomss">
<div>灵睿网络</div>
<div>{{ item.release_time_text }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
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 ScrollReveal from 'scrollreveal';
import { NNumberAnimation } from 'naive-ui'
let modules = [Autoplay, A11y, EffectCoverflow, EffectFade];
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import 'swiper/css/effect-coverflow';
import 'swiper/css/mousewheel'
import 'swiper/css/grid'
import 'swiper/css/effect-fade'
import 'swiper/css/autoplay'
import * as swiperAni from '@/assets/animate/animate.js'
import $api from '@/service/webRequest'
import { useI18n } from 'vue-i18n'
import { useStore } from '~/store'
const { locale } = useI18n()
const cdnUrl = useCdn()
let newsSwiper: any = null
const onSwiperNews = (swiper: any) => {
newsSwiper = swiper
}
const swiperOptionsNews = {
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
direction: 'horizontal',
slidesPerView: 1,
speed: 500,
effect: 'fade',
loop: true,
modules: [EffectFade, Autoplay, Navigation],
navigation: {
nextEl: '#swipen_prev',
prevEl: '#swipen_next',
},
}
// 新闻数据
onMounted(() => {
animate()
getType();
})
const openType = (item: any) => {
typeId.value = item.id;
getList();
}
const typeId = ref(0)
const typeList = ref([])
const getType = () => {
$api.post("/api/home.recruitment_information/cate", { page: 1, size: 100 })
.then((res: any) => {
console.log(res);
typeId.value = res.data.data.list[0].id;
typeList.value = res.data.data.list;
getList();
})
.catch((err) => {
console.dir(err)
})
}
const list = ref([])
const getList = () => {
$api.get("/api/home.recruitment_information/index?cate_id=" + typeId.value)
.then((res: any) => {
console.log(res)
list.value = res.data.data.list
})
.catch((err) => {
console.dir(err)
})
}
const numberAnimationInstRef = ref()
const numberAnimationInstRefKH = ref()
const numberAnimationInstRefJS = ref()
const numberAnimationInstRefHY = ref()
const animate = () => {
const sr = ScrollReveal();
sr.reveal('.leftBox', {
origin: "left",
distance: "1000px",
duration: 1300,
delay: 100,
opacity: 0,
scale: 0.9,
reset: true,
mobile: true,
})
sr.reveal('.rightBox', {
origin: "right",
distance: "1000px",
duration: 1300,
delay: 100,
opacity: 0,
scale: 0.9,
reset: true,
mobile: true,
})
sr.reveal('.topBox', {
origin: "top",
distance: "1000px",
duration: 1300,
delay: 100,
opacity: 0,
scale: 0.9,
reset: true,
mobile: true,
})
sr.reveal('.bottomBox', {
origin: "bottom",
distance: "1000px",
duration: 1300,
delay: 100,
opacity: 0,
scale: 0.9,
reset: true,
mobile: true,
})
sr.reveal('.numberTopBox', {
origin: "top",
distance: "1000px",
duration: 1300,
delay: 100,
opacity: 0,
scale: 0.9,
reset: true,
mobile: true,
beforeReveal: function (el: any) {
numberAnimationInstRef.value.play()
numberAnimationInstRefKH.value.play()
numberAnimationInstRefJS.value.play()
numberAnimationInstRefHY.value.play()
},
})
sr.reveal('.topSj', {
origin: "bottom",
distance: "1000px",
duration: 1300,
delay: 5,
opacity: 0,
scale: 0.9,
reset: true,
mobile: true,
useDelay: 'always',
interval: 50,
})
}
</script>
<style lang="scss" scoped>
@import "@/assets/animate/animate.min.css";
@import "@/assets/index.scss";
:deep(.dswper .swiper-slide-next) {
transform: translate3d(0px, 0px, -507px) rotateX(0deg) rotateY(0deg) scale(1) !important;
}
:deep(.dswper .swiper-slide-prev) {
transform: translate3d(0px, 0px, -507px) rotateX(0deg) rotateY(0deg) scale(1) !important;
}
.group_666 .swiper-slide img {
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);
}
.section_1s {
height: 260px;
background: var(--allpeople) no-repeat;
background-size: 100%;
width: 100%;
z-index: 10;
}
.text_13s {
width: 100%;
height: 48px;
line-height: 44px;
border-radius: 4px 4px 4px 4px;
border: 1px solid #768597;
color: #768597;
font-size: 16px;
font-family: Microsoft YaHei UI-Regular;
font-weight: 400;
text-align: center;
white-space: nowrap;
margin-right: 22px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
.imgs {
width: 24px;
height: 24px;
margin-right: 10px;
}
}
.box_17s {
width: 100%;
background: #F8F8F8;
justify-content: flex-center;
padding-bottom: 40px;
}
.hbform {
width: 100%;
}
.boxgs {
width: 100%;
margin-top: 30px;
justify-content: center;
align-items: center;
gap: 20px;
padding: 0px 20px;
.title {
width: 100%;
padding:10px;
background: #FFFFFF;
border-radius: 78px 78px 78px 78px;
text-align: center;
font-weight: 400;
font-size: 14px;
color: #222222;
cursor: pointer;
&.active {
background: linear-gradient(360deg, #FC7428 0%, #FF9357 100%);
color: #FFFFFF;
}
}
}
.box_18s {
width: 100%;
height: 149px;
background: var(--lianxiyp) 100% no-repeat;
z-index: 10;
justify-content: center;
.line {
width: 347px;
height: 1px;
background: #D8D8D8;
margin: 0 auto;
}
.titless {
width: 100%;
padding-top: 20px;
padding-left: 20px;
.a1s {
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: 700;
font-size: 18px;
color: #3D3D3D;
}
.a2s {
margin: 15px 0;
font-family: Microsoft YaHei, Microsoft YaHei;
font-weight: 400;
font-size: 12px;
color: #768597;
}
}
.bottomss {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
color: #768597;
}
}
@media (max-width: 768px) {
.group_3 {
gap: 0px;
height: 100%;
}
}
</style>

185
pages/phone_customerReviews.vue Normal file
View File

@ -0,0 +1,185 @@
<template>
<div style="width: 100%;">
<!-- Swiper 容器 -->
<div class="group_666" style="position: relative;height: 250px;">
<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
<swiper-slide>
<img :src="`${cdnUrl}/img/customer/topnav.png`" style="width: 100%;height: 100%;object-fit: cover;">
</swiper-slide>
<swiper-slide>
<img :src="`${cdnUrl}/img/customer/topnav.png`" style="width: 100%;height: 100%;object-fit: cover;">
</swiper-slide>
</swiper>
</div>
<div class="box_11 flex-col bottom_imgss">
<div class="text-wrapper_10" style="margin-top: 30px;">
<span class="text_41">公司荣誉</span>
</div>
<div class="text-wrapper_11" style="margin-top: 20px;">
<span class="text_42">Company&nbsp;Honors&nbsp;</span>
</div>
<div class="boxgs flex-row flex-wrap">
<div class="box_con flex-col leftBox" v-for="(item, index) in lists" :key="index">
<div class="align-center" style="justify-content: center;padding: 10px;">
<img :src="`${cdnUrl}/img/customer/${index}.png`" alt="">
</div>
<div class="flex-col"
style="justify-content: center;border-top: 1px solid #EEEEEE;padding-bottom: 10px;">
<span class="text_tt">
{{ item.title }}
</span>
<span class="text_cc">
{{ item.value }}
</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
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 ScrollReveal from 'scrollreveal';
import { NNumberAnimation } from 'naive-ui'
let modules = [Autoplay, A11y, EffectCoverflow, EffectFade];
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import 'swiper/css/effect-coverflow';
import 'swiper/css/mousewheel'
import 'swiper/css/grid'
import 'swiper/css/effect-fade'
import 'swiper/css/autoplay'
import * as swiperAni from '@/assets/animate/animate.js'
import $api from '@/service/webRequest'
import { useI18n } from 'vue-i18n'
import { useStore } from '~/store'
const { locale } = useI18n()
const cdnUrl = useCdn()
let newsSwiper: any = null
const onSwiperNews = (swiper: any) => {
newsSwiper = swiper
}
const swiperOptionsNews = {
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
direction: 'horizontal',
slidesPerView: 1,
speed: 500,
effect: 'fade',
loop: true,
modules: [EffectFade, Autoplay, Navigation],
navigation: {
nextEl: '#swipen_prev',
prevEl: '#swipen_next',
},
}
const lists = ref([
{ title: '扶贫助困情系家乡', value: '-洛阳市郑州商会-' },
{ title: '互联网技术服务合作单位', value: '-洛阳百艺建筑装饰-' },
{ title: '平安洛阳微信平台技术服务单位', value: '-洛阳市公安局-' },
{ title: '健康洛阳微信平台技术合作单位', value: '-河南科技大学第一附属医院-' },
{ title: '爱心捐助奉献奖', value: '-洛阳市郑州商会-' },
{ title: '精彩洛阳微信平台技术服务单位', value: '-洛阳市宣传部网信办-' },
{ title: '青年说短视频征集大赛', value: '-洛阳市公安局-' },
{ title: '青年说短视频征集大赛', value: '-河南科技大学第一附属医院-' }
]);
// 新闻数据
onMounted(() => {
nextTick(() => {
animate()
})
})
const animate = () => {
const sr = ScrollReveal();
sr.reveal('.leftBox', {
origin: "left",
distance: "1000px",
duration: 500,
delay: 100,
opacity: 0,
scale: 0.9,
reset: true,
mobile: true,
})
}
</script>
<style lang="scss" scoped>
@import "@/assets/animate/animate.min.css";
@import "@/assets/index.scss";
.group_666 .swiper-slide img {
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);
}
.bottom_imgss {
background: var(--bg-s);
background-repeat:no-repeat;
height: auto;
background-size: 100% 100%;
}
.boxgs {
width: 100%;
margin: 0 auto;
justify-content: center;
.box_con {
margin:20px 20px 0px 20px;
background-color: #ffffff;
width: 100%;
height: auto;
font-family: Microsoft YaHei UI-Regular;
border-radius: 4px;
.text_tt {
display: inline-block;
width: 100%;
margin-top: 15px;
overflow-wrap: break-word;
color: #3D3D3D;
font-size: 18px;
font-weight: 500;
text-align: center;
white-space: nowrap;
}
.text_cc {
display: inline-block;
width: 100%;
height: 30px;
overflow-wrap: break-word;
color: #999999;
font-size: 14px;
font-weight: 400;
text-align: center;
line-height: 30px;
}
}
img{
width: 100%;
}
}
</style>

2
pages/phone_index.vue
View File

@ -527,7 +527,7 @@ const animate = () => {
delay: 100,
opacity: 0,
scale: 0.9,
reset: true,
reset: false,
mobile: true,
beforeReveal: function (el: any) {
// numberAnimationInstRef.value.play()

77
pages/phone_info/[id].vue Normal file
View File

@ -0,0 +1,77 @@
<template>
<div style="width: 100%;">
<div style="height:90px;background-color: #ffffff;"></div>
<div style="background-color: #F8F8F8;">
<div class="content_class" style="">
<div style="font-size: 20px;font-weight: 700;color: #323232;">{{ info.title }}</div>
<div style="font-size: 14px;font-weight: 400;margin-top: 30px;color: #768597;">
<div>发布人：{{ info.author }}</div>
<div>发布时间：{{ info.release_time_text }} </div>
</div>
<div style="width: 100%;margin:20px 0px 0px 0px;height: 1px;background-color: #EEEEEE;"></div>
<div class="info_content" v-html="info.content"></div>
<div style="width: 100%;margin: 20px auto;height: 1px;background-color: #EEEEEE;"></div>
<div style="display: flex;justify-content: space-between;align-items: center;">
<div style="width: 100%;">
<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>
</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('/phone_info/' + info.value.prev.id, '_self');
}
if (type == 2 && info.value.next != null) {
window.open('/phone_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.scss";
.info_content img {
width: 100% !important;
margin: 0 auto;
margin-bottom: 10px;
}
.info_content {
line-height: 28px;
}
.content_class {
width: 100%;
min-height: 500px;
margin: 0 auto;
background-color: #ffffff;
padding: 30px;
}
</style>

2
pages/phone_proServices.vue
View File

@ -21,7 +21,7 @@
</div>
</NuxtLink>
<div style="cursor: pointer;width: 50%;text-align: center;">
<div style="color: #0256FF;margin-bottom: 20px;">专业技术服务</div>
<div style="color: #0256FF;margin-bottom: 10px;">专业技术服务</div>
<div style="background-color: #0256FF;width:20%;height: 8px;margin: 0 auto;"></div>
</div>
</div>

271
pages/phone_societyDuty.vue Normal file
View File

@ -0,0 +1,271 @@
<template>
<div style="width: 100%;">
<!-- Swiper 容器 -->
<div class="group_666" style="position: relative;height: 250px;">
<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
<swiper-slide>
<img :src="`${cdnUrl}/img/societyduty/shehui.png`" style="width: 100%;height: 100%;object-fit: cover;">
</swiper-slide>
<swiper-slide>
<img :src="`${cdnUrl}/img/societyduty/shehui.png`" style="width: 100%;height: 100%;object-fit: cover;">
</swiper-slide>
</swiper>
</div>
<div class="box_11 flex-col bottom_imgss">
<!-- <div class="text-wrapper_10">
<span class="text_41">公司荣誉</span>
</div>
<div class="text-wrapper_11">
<span class="text_42">Company&nbsp;Honors&nbsp;</span>
</div> -->
<div class="group_14 flex-row justify-between align-center" style="flex-wrap: wrap;width: 95%;padding-top: 30px;">
<div class="flex-row">
<div class="text_25">
<span>
<NuxtLink to="/phone_societyDutyNew/">
公司动态
</NuxtLink>
</span>
</div>
<div class="text_25">
<span style="color: rgb(252, 116, 40);">活动影集（部分）</span>
<div
style="left: 20px;width: 100%;height: 1px;background-color: #fc7428;position: absolute;bottom: -21px;">
</div>
</div>
</div>
<div class="group_15" style="flex: 0 0 100%;"></div>
</div>
<div class="boxgs flex-row flex-wrap">
<div class="box_con flex-col" v-for="(item,index) in lists" :key="index">
<div class="align-center" style="justify-content: center;">
<img :src="`${cdnUrl}/img/societyduty/s${index+1}.png`" style="width: 100%;">
</div>
<div class="flex-col" style="justify-content: center;margin-top: 5px;">
<span class="text_tt">
{{item.title}}
</span>
<!-- <span class="text_cc">
{{item.value}}
</span> -->
</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
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 ScrollReveal from 'scrollreveal';
import { NNumberAnimation } from 'naive-ui'
let modules = [Autoplay, A11y, EffectCoverflow,EffectFade];
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import 'swiper/css/effect-coverflow';
import 'swiper/css/mousewheel'
import 'swiper/css/grid'
import 'swiper/css/effect-fade'
import 'swiper/css/autoplay'
import * as swiperAni from '@/assets/animate/animate.js'
import $api from '@/service/webRequest'
import { useI18n } from 'vue-i18n'
import { useStore } from '~/store'
const { locale } = useI18n()
const cdnUrl = useCdn()
let newsSwiper: any = null
const onSwiperNews = (swiper: any) => {
newsSwiper = swiper
}
const swiperOptionsNews = {
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
direction: 'horizontal',
slidesPerView: 1,
speed: 500,
effect: 'fade',
loop: true,
modules: [EffectFade,Autoplay,Navigation],
navigation: {
nextEl: '#swipen_prev',
prevEl: '#swipen_next',
},
}
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(() => {
nextTick(() => {
animate()
})
})
const numberAnimationInstRef = ref()
const numberAnimationInstRefKH = ref()
const numberAnimationInstRefJS = ref()
const numberAnimationInstRefHY = ref()
const animate = () => {
const sr = ScrollReveal();
sr.reveal('.leftBox', {
origin: "left",
distance: "1000px",
duration: 1300,
delay: 100,
opacity: 0,
scale: 0.9,
reset: true,
mobile: true,
})
sr.reveal('.rightBox', {
origin: "right",
distance: "1000px",
duration: 1300,
delay: 100,
opacity: 0,
scale: 0.9,
reset: true,
mobile: true,
})
sr.reveal('.topBox', {
origin: "top",
distance: "1000px",
duration: 1300,
delay: 100,
opacity: 0,
scale: 0.9,
reset: true,
mobile: true,
})
sr.reveal('.bottomBox', {
origin: "bottom",
distance: "1000px",
duration: 1300,
delay: 100,
opacity: 0,
scale: 0.9,
reset: true,
mobile: true,
})
sr.reveal('.numberTopBox', {
origin: "top",
distance: "1000px",
duration: 1300,
delay: 100,
opacity: 0,
scale: 0.9,
reset: true,
mobile: true,
beforeReveal: function (el: any) {
numberAnimationInstRef.value.play()
numberAnimationInstRefKH.value.play()
numberAnimationInstRefJS.value.play()
numberAnimationInstRefHY.value.play()
},
})
sr.reveal('.topSj', {
origin: "bottom",
distance: "1000px",
duration: 1300,
delay: 5,
opacity: 0,
scale: 0.9,
reset: true,
mobile: true,
useDelay: 'always',
interval: 50,
})
}
</script>
<style lang="scss" scoped>
@import "@/assets/animate/animate.min.css";
@import "@/assets/index.scss";
.group_666 .swiper-slide img {
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);
}
.bottom_imgss{
// background: url(/public/img/customer/bg-s.png);
background: #F8F8F8;
height: auto;
// background-size: 100%;
}
.boxgs{
width: 100%;
margin: 0 auto;
margin-top: 30px;
padding: 20px;
.box_con{
margin:10px;
background-color: #ffffff;
width: 100%;
height: auto;
font-family: Microsoft YaHei UI-Regular;
border-radius:4px;
.text_tt{
display: inline-block;
width: 100%;
margin-top: 15px;
color: #3D3D3D ;
font-size: 16px;
font-weight: 500;
text-align: center;
padding: 0 25px 20px 25px;
}
.text_cc{
display: inline-block;
width: 100%;
height: 30px;
overflow-wrap: break-word;
color: #999999 ;
font-size: 14px;
font-weight: 400;
text-align: center;
line-height: 30px;
}
}
}
</style>

380
pages/phone_societyDutyNew.vue Normal file
View File

@ -0,0 +1,380 @@
<template>
<div style="width: 100%;">
<!-- Swiper 容器 -->
<div class="group_666" style="position: relative;height: 250px;">
<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
<swiper-slide>
<img :src="`${cdnUrl}/img/societyduty/shehui.png`" style="width: 100%;height: 100%;object-fit: cover;">
</swiper-slide>
<swiper-slide>
<img :src="`${cdnUrl}/img/societyduty/shehui.png`" style="width: 100%;height: 100%;object-fit: cover;">
</swiper-slide>
</swiper>
</div>
<div class="box_11 flex-col bottom_imgss" style="padding-bottom: 0px;">
<div class="group_14 flex-row justify-between align-center" style="flex-wrap: wrap;width: 95%;padding-top: 30px;">
<div class="flex-row">
<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;">
</div>
</div>
<div class="text_25">
<NuxtLink to="/phone_societyDuty/">
<span>活动影集（部分）</span>
</NuxtLink>
</div>
</div>
<div class="group_15" style="flex: 0 0 100%;"></div>
</div>
<div class="boxgs flex-row flex-wrap">
<div class="boxgs_top" style="display: flex;align-items: center;justify-content: center;flex-wrap: wrap;padding: 10px;">
<div style="position: relative;cursor: pointer;" @click="videoShow = true">
<img :src="`${cdnUrl}/img/societyduty/det.png`" style="width: 500px;">
<img :src="`${cdnUrl}/img/societyduty/bf.png`"
style="width: 50px;height: 50px;position: absolute;top: 45%;left: 0;right: 0;margin: 0 auto;">
</div>
<div style="width: 100%;padding-top: 10px;">
<div style="font-size: 24px;color: #3D3D3D;font-weight: 700;">青年企业家岳崇霄:招商引智为洛阳注入创新活水</div>
<div style="color: #FC7428;font-size: 14px;font-weight: 900;margin: 10px 0px;">灵睿网络创始人：岳崇霄</div>
<div style="font-size: 14px;font-weight: 400;color: #3D3D3D;">
<div>岳崇霄，2020年4月，荣获2020年全国向上向善好青年：扶贫助困好青年。 </div>
<div>洛阳灵睿网络技术有限公司 创始人</div>
<div>河南灵睿科技集团有限公司 董事长</div>
<div>
河南省青联委员、河南省青年企业家协会理事、河南省青少年新媒体协会理事、洛阳市青联常委、洛阳市青年企业家协会副会长、洛阳市党外知识分子联谊会副秘书长、洛阳市青年文艺联合会副秘书长、洛阳市郑州商会副会长、涧西区党外知识分子联谊会副会长、洛阳师范学院客座教授
洛阳职业技术学院客座教授</div>
</div>
<div style="margin-top: 20px;">
<div @click="videoShow = true"
style="margin: 0 auto;cursor: pointer;;line-height: 36px;text-align: center;width: 109px;height: 36px;background: #222222;color: #ffffff;">
查看详情</div>
</div>
</div>
</div>
<div class="box_con flex-row" style="flex-wrap: wrap;margin-top: 20px;" v-for="(item, index) in newList" :key="index" @click="openNewInfo(item)">
<div class="align-center" >
<img :src="item.image" style="width: 100vw;height: 180px;object-fit: cover;border-radius: 8px;">
</div>
<div class="flex-col" style="width: 100%;position: relative;padding: 10px;">
<div class="text_tt">
{{ item.title }}
</div>
<div class="text_cc three-line-ellipsis">
{{ item.subtitle }}
</div>
<div style="margin-top: 10px;display: flex;justify-content: space-between;align-items: center;">
<div style="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="`${cdnUrl}/img/societyduty/r.png`" alt="">
</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="`${cdnUrl}/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 ScrollReveal from 'scrollreveal';
import { NNumberAnimation } from 'naive-ui'
let modules = [Autoplay, A11y, EffectCoverflow, EffectFade];
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import 'swiper/css/effect-coverflow';
import 'swiper/css/mousewheel'
import 'swiper/css/grid'
import 'swiper/css/effect-fade'
import 'swiper/css/autoplay'
import * as swiperAni from '@/assets/animate/animate.js'
import $api from '@/service/webRequest'
import { useI18n } from 'vue-i18n'
import { useStore } from '~/store'
const { locale } = useI18n()
const videoShow = ref(false);
const cdnUrl = useCdn()
let newsSwiper: any = null
const onSwiperNews = (swiper: any) => {
newsSwiper = swiper
}
const swiperOptionsNews = {
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
direction: 'horizontal',
slidesPerView: 1,
speed: 500,
effect: 'fade',
loop: true,
modules: [EffectFade, Autoplay, Navigation],
navigation: {
nextEl: '#swipen_prev',
prevEl: '#swipen_next',
},
}
const openNewInfo = (item) => {
window.open(`/phone_info/${item.id}`)
}
// 新闻数据
onMounted(() => {
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()
const numberAnimationInstRefHY = ref()
const animate = () => {
const sr = ScrollReveal();
sr.reveal('.leftBox', {
origin: "left",
distance: "1000px",
duration: 1300,
delay: 100,
opacity: 0,
scale: 0.9,
reset: true,
mobile: true,
})
sr.reveal('.rightBox', {
origin: "right",
distance: "1000px",
duration: 1300,
delay: 100,
opacity: 0,
scale: 0.9,
reset: true,
mobile: true,
})
sr.reveal('.topBox', {
origin: "top",
distance: "1000px",
duration: 1300,
delay: 100,
opacity: 0,
scale: 0.9,
reset: true,
mobile: true,
})
sr.reveal('.bottomBox', {
origin: "bottom",
distance: "1000px",
duration: 1300,
delay: 100,
opacity: 0,
scale: 0.9,
reset: true,
mobile: true,
})
sr.reveal('.numberTopBox', {
origin: "top",
distance: "1000px",
duration: 1300,
delay: 100,
opacity: 0,
scale: 0.9,
reset: true,
mobile: true,
beforeReveal: function (el: any) {
numberAnimationInstRef.value.play()
numberAnimationInstRefKH.value.play()
numberAnimationInstRefJS.value.play()
numberAnimationInstRefHY.value.play()
},
})
sr.reveal('.topSj', {
origin: "bottom",
distance: "1000px",
duration: 1300,
delay: 5,
opacity: 0,
scale: 0.9,
reset: true,
mobile: true,
useDelay: 'always',
interval: 50,
})
}
</script>
<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;
}
.group_666 .swiper-slide img {
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);
}
.bottom_imgss {
// background: url(/public/img/customer/bg-s.png);
background: #F8F8F8;
// background-size: 100%;
}
.boxgs {
width: 100%;
margin: 0 auto;
padding: 20px;
.boxgs_top {
background: var(--newstop) 100% 100% no-repeat;
width: 100%;
height: auto;
border: 1px solid #FC7428;
border-radius: 24px;
margin-top: 30px;
}
.box_con {
background-color: #ffffff;
width: 100%;
font-family: Microsoft YaHei UI-Regular;
border-radius: 4px;
.text_tt {
font-size: 22px;
width: 100%;
margin-top: 10px;
color: #3D3D3D;
font-weight: 700;
}
.text_cc {
width: 100%;
color: #768597;
font-size: 14px;
font-weight: 400;
margin-top: 10px;
}
}
}
.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: -60px;
right: 0px;
width: 40px;
height: 40px;
background: var(--close) no-repeat 0 0;
background-size: 100% auto;
border: 6px solid #979797;
}
.pop_video_cont {
width: 90%;
border: 6px solid #979797;
background: #000;
}
.pop_video_cont video {
display: block;
width: 100%;
height: 100%;
}
</style>