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

1.制作首页静态页

Browse Source 
2.首页静态页增加动态特效
3.增加首页静态页手机页面
This commit is contained in:
王创世 2025-04-12 17:45:12 +08:00
parent 105049c36e
commit c20d659bc7
8 changed files with 1253 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/index.css
View File

@ -134,6 +134,7 @@
.group_2 { .group_2 {
position: relative; position: relative;
width: 100%; width: 100%;
overflow: hidden;
} }
.box_2 { .box_2 {
@ -946,6 +947,7 @@
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1);
width: 100%; width: 100%;
justify-content: flex-center; justify-content: flex-center;
overflow: hidden;
} }
.text-wrapper_10 { .text-wrapper_10 {

93
components/AppFooter.vue
View File

@ -1,5 +1,6 @@
<template> <template>
<div class="group_30 flex-col"> <!-- PC端布局 -->
<div class="group_30 flex-col pc-footer">
<div class="text-wrapper_13 flex-row"> <div class="text-wrapper_13 flex-row">
<span class="text_67">企业首页</span> <span class="text_67">企业首页</span>
<span class="text_68">产品&nbsp;&amp;服务</span> <span class="text_68">产品&nbsp;&amp;服务</span>
@ -29,10 +30,100 @@
src="public/images/wx.png" /> src="public/images/wx.png" />
</div> </div>
</div> </div>
<!-- 移动端布局 -->
<div class="mobile-footer flex-col">
<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>
<span class="mobile-contact">联系电话：400-080-0379</span>
</div>
<div class="mobile-info flex-col">
<span class="mobile-company">洛阳灵睿网络技术有限公司</span>
<span class="mobile-legal">法律顾问：河南森合律师事务机构</span>
<span class="mobile-copyright">©2021 洛阳灵睿网络技术有限公司 All rights reserved.</span>
<span class="mobile-icp">豫ICP备15023627号-3</span>
<span class="mobile-address">洛阳公司地址：洛阳市 洛龙区 世贸中心D座1816室</span>
</div>
<div class="mobile-social flex-row">
<img class="mobile-social-icon" referrerpolicy="no-referrer" src="public/images/wb.png" />
<img class="mobile-social-icon" referrerpolicy="no-referrer" src="public/images/wx.png" />
</div>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '@/assets/index.css'; @import '@/assets/index.css';
/* PC端默认样式保持不变 */
.mobile-footer {
display: none;
}
/* 移动端样式 */
@media screen and (max-width: 768px) {
.pc-footer {
display: none;
}
.mobile-footer {
display: flex;
padding: 20px;
background-color: #f8f8f8;
width: 100%;
}
.mobile-nav {
gap: 15px;
margin-bottom: 20px;
text-align: center;
}
.mobile-nav-item {
font-size: 14px;
color: #333;
}
.mobile-contact {
font-size: 14px;
color: #666;
margin-top: 10px;
}
.mobile-info {
gap: 10px;
text-align: center;
margin-bottom: 20px;
}
.mobile-company {
font-size: 14px;
color: #333;
}
.mobile-legal,
.mobile-copyright,
.mobile-icp,
.mobile-address {
font-size: 12px;
color: #666;
}
.mobile-social {
justify-content: center;
gap: 20px;
}
.mobile-social-icon {
width: 24px;
height: 24px;
}
}
</style> </style>

123
components/AppHeader.vue
View File

@ -3,6 +3,9 @@
<div class="group_1 flex-col"> <div class="group_1 flex-col">
<div class="box_1 flex-row"> <div class="box_1 flex-row">
<img class="image_1" referrerpolicy="no-referrer" src="public/images/logo.png" /> <img class="image_1" referrerpolicy="no-referrer" src="public/images/logo.png" />
<!-- Desktop Navigation -->
<div class="desktop-nav">
<span class="text_1">企业首页</span> <span class="text_1">企业首页</span>
<span class="text_2">产品&nbsp;&amp;服务</span> <span class="text_2">产品&nbsp;&amp;服务</span>
<span class="text_3">灵睿&nbsp;&amp;我们</span> <span class="text_3">灵睿&nbsp;&amp;我们</span>
@ -10,6 +13,26 @@
<span class="text_5">社会&amp;责任</span> <span class="text_5">社会&amp;责任</span>
<span class="text_6">联系我们</span> <span class="text_6">联系我们</span>
</div> </div>
<!-- Mobile Hamburger Button -->
<div class="mobile-menu-btn" @click="toggleMobileMenu">
<div class="hamburger" :class="{ 'is-active': isMobileMenuOpen }">
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<!-- Mobile Navigation -->
<div class="mobile-nav" v-if="isMobileMenuOpen">
<span class="mobile-nav-item">企业首页</span>
<span class="mobile-nav-item">产品&nbsp;&amp;服务</span>
<span class="mobile-nav-item">灵睿&nbsp;&amp;我们</span>
<span class="mobile-nav-item">客户&amp;评价</span>
<span class="mobile-nav-item">社会&amp;责任</span>
<span class="mobile-nav-item">联系我们</span>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -19,12 +42,112 @@ import { ref } from 'vue'
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { useStore } from '~/store' import { useStore } from '~/store'
const store = useStore() const store = useStore()
const route = useRoute() const route = useRoute()
const { locale } = useI18n() const { locale } = useI18n()
const isMobileMenuOpen = ref(false)
const toggleMobileMenu = () => {
isMobileMenuOpen.value = !isMobileMenuOpen.value
}
console.log(route) console.log(route)
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '@/assets/index.css'; @import '@/assets/index.css';
.box_1 {
justify-content: space-between;
padding: 0 20px;
align-items: center;
position: relative;
}
.desktop-nav {
display: flex;
align-items: center;
gap: 20px;
@media (max-width: 768px) {
display: none;
}
}
.mobile-menu-btn {
display: none;
cursor: pointer;
@media (max-width: 768px) {
display: block;
}
}
.hamburger {
width: 30px;
height: 24px;
position: relative;
span {
display: block;
position: absolute;
height: 3px;
width: 100%;
background: #000;
border-radius: 3px;
transition: all 0.3s ease;
&:nth-child(1) { top: 0; }
&:nth-child(2) { top: 10px; }
&:nth-child(3) { top: 20px; }
}
&.is-active {
span {
&:nth-child(1) {
transform: rotate(45deg);
top: 10px;
}
&:nth-child(2) {
opacity: 0;
}
&:nth-child(3) {
transform: rotate(-45deg);
top: 10px;
}
}
}
}
.mobile-nav {
display: none;
flex-direction: column;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: white;
padding: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
z-index: 100;
@media (max-width: 768px) {
display: flex;
}
.mobile-nav-item {
padding: 15px 0;
border-bottom: 1px solid #eee;
cursor: pointer;
&:last-child {
border-bottom: none;
}
&:hover {
color: #666;
}
}
}
</style> </style>

50
package-lock.json generated
View File

@ -14,6 +14,7 @@
"js-cookie": "^3.0.5", "js-cookie": "^3.0.5",
"nuxt-icons": "^3.2.1", "nuxt-icons": "^3.2.1",
"pinia": "^2.1.7", "pinia": "^2.1.7",
"scrollreveal": "^4.0.9",
"swiper": "^11.2.5", "swiper": "^11.2.5",
"vue-i18n": "^9.8.0", "vue-i18n": "^9.8.0",
"vue-swiper-animate": "^1.0.0" "vue-swiper-animate": "^1.0.0"
@ -7975,6 +7976,21 @@
"url": "https://github.com/sponsors/sindresorhus" "url": "https://github.com/sponsors/sindresorhus"
} }
}, },
"node_modules/is-dom-node": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/is-dom-node/-/is-dom-node-1.0.4.tgz",
"integrity": "sha512-NEnTHKCeyGJTL0cKdzATF8SWzyTMYf5CbNKWBvsXvyMxZG32g+a09qkeCbrfQNLTD85CbPeHb4YjIJCjyzF0yA==",
"license": "MIT"
},
"node_modules/is-dom-node-list": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/is-dom-node-list/-/is-dom-node-list-1.2.1.tgz",
"integrity": "sha512-P1H071iT5TGG8pAHslhrLDo/tQLYc8tGuWABVqhGU4l2mm7aDNb9cx2myQ2AujEQO6B2cAujcW4a0/+6UfXInw==",
"license": "MIT",
"dependencies": {
"is-dom-node": "^1.0.4"
}
},
"node_modules/is-extglob": { "node_modules/is-extglob": {
"version": "2.1.1", "version": "2.1.1",
"resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@ -8842,6 +8858,12 @@
"node": ">=16 || 14 >=14.17" "node": ">=16 || 14 >=14.17"
} }
}, },
"node_modules/miniraf": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/miniraf/-/miniraf-1.0.0.tgz",
"integrity": "sha512-XpvhtJYzVrpXe+JoAthrT9E40NIrSDDMcdHEYL2M+lR/OCas0nadetcBBq/MWYqlgV5aDWVQ3mfAqd+fG6Y/EQ==",
"license": "MIT"
},
"node_modules/minizlib": { "node_modules/minizlib": {
"version": "3.0.1", "version": "3.0.1",
"resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.0.1.tgz", "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-3.0.1.tgz",
@ -10998,6 +11020,12 @@
"integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==", "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==",
"license": "MIT" "license": "MIT"
}, },
"node_modules/rematrix": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/rematrix/-/rematrix-0.3.0.tgz",
"integrity": "sha512-xB/9ZvJIKaDgXX0qkvV9/pLD8zK23A6TVV6F8Vhsl+SrxbBeVYutz5uszxgC6Rt3RP9LZiH8OXaYjr+x6WXWmQ==",
"license": "MIT"
},
"node_modules/require-directory": { "node_modules/require-directory": {
"version": "2.1.1", "version": "2.1.1",
"resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz", "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
@ -11312,6 +11340,18 @@
"compute-scroll-into-view": "^1.0.20" "compute-scroll-into-view": "^1.0.20"
} }
}, },
"node_modules/scrollreveal": {
"version": "4.0.9",
"resolved": "https://registry.npmjs.org/scrollreveal/-/scrollreveal-4.0.9.tgz",
"integrity": "sha512-fefGvzVS8YbXbDK1+T0kvy2yqxaiBJZeGUhPeqajf+7sGqtX4xikbKGAlzQuPCpswAMswx94ZwhDjXKnRIqW1w==",
"hasInstallScript": true,
"license": "GPL-3.0",
"dependencies": {
"miniraf": "1.0.0",
"rematrix": "0.3.0",
"tealight": "0.3.6"
}
},
"node_modules/scule": { "node_modules/scule": {
"version": "1.3.0", "version": "1.3.0",
"resolved": "https://registry.npmjs.org/scule/-/scule-1.3.0.tgz", "resolved": "https://registry.npmjs.org/scule/-/scule-1.3.0.tgz",
@ -12212,6 +12252,16 @@
"node": ">=18" "node": ">=18"
} }
}, },
"node_modules/tealight": {
"version": "0.3.6",
"resolved": "https://registry.npmjs.org/tealight/-/tealight-0.3.6.tgz",
"integrity": "sha512-Dys3N8jFBThD9pNVpPCyUiu6DfWcTBdqWQJIvnAuVaFkGEdrPBJ43070vVbn6sTlLvn2IQK2zFW4FrVIrTo8eQ==",
"license": "MIT",
"dependencies": {
"is-dom-node": "^1.0.4",
"is-dom-node-list": "^1.2.1"
}
},
"node_modules/terser": { "node_modules/terser": {
"version": "5.39.0", "version": "5.39.0",
"resolved": "https://registry.npmjs.org/terser/-/terser-5.39.0.tgz", "resolved": "https://registry.npmjs.org/terser/-/terser-5.39.0.tgz",

1
package.json
View File

@ -35,6 +35,7 @@
"js-cookie": "^3.0.5", "js-cookie": "^3.0.5",
"nuxt-icons": "^3.2.1", "nuxt-icons": "^3.2.1",
"pinia": "^2.1.7", "pinia": "^2.1.7",
"scrollreveal": "^4.0.9",
"swiper": "^11.2.5", "swiper": "^11.2.5",
"vue-i18n": "^9.8.0", "vue-i18n": "^9.8.0",
"vue-swiper-animate": "^1.0.0" "vue-swiper-animate": "^1.0.0"

170
pages/index.vue
View File

@ -1,9 +1,11 @@
<template> <template>
<div style="width: 100%;"> <div style="width: 100%;">
<!-- Swiper 容器 --> <!-- Swiper 容器 -->
<div style="position: relative;"> <div class="group_666" style="position: relative;">
<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews" <swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
@slideChange="onSlideChangeNews"> <swiper-slide>
<img src="public/images/banner.png" style="width: 100%;">
</swiper-slide>
<swiper-slide> <swiper-slide>
<img src="public/images/banner.png" style="width: 100%;"> <img src="public/images/banner.png" style="width: 100%;">
</swiper-slide> </swiper-slide>
@ -25,7 +27,7 @@
<div class="group_2 flex-col"> <div class="group_2 flex-col">
<div class="box_2 flex-col"> <div class="box_2 flex-col">
<div class="group_3 flex-row justify-center align-center"> <div class="group_3 flex-row justify-center align-center">
<div class="group_4 flex-col"> <div class="group_4 flex-col leftBox">
<div class="text-group_1 flex-col justify-between"> <div class="text-group_1 flex-col justify-between">
<span class="text_7">灵睿的互联网之道</span> <span class="text_7">灵睿的互联网之道</span>
<span class="text_8"> <span class="text_8">
@ -47,7 +49,7 @@
<span class="text_13">查看全部</span> <span class="text_13">查看全部</span>
</div> </div>
</div> </div>
<div class="group_5 flex-col justify-center align-center"> <div class="group_5 flex-col justify-center align-center rightBox">
<div class="section_1 flex-col"> <div class="section_1 flex-col">
<div class="image-wrapper_2 flex-col"> <div class="image-wrapper_2 flex-col">
<img class="image_5" referrerpolicy="no-referrer" src="public/images/bf.png" /> <img class="image_5" referrerpolicy="no-referrer" src="public/images/bf.png" />
@ -62,15 +64,15 @@
</div> </div>
<div class="group_2 flex-col"> <div class="group_2 flex-col">
<div class="box_5 flex-col"> <div class="box_5 flex-col">
<span class="text_14">我们的业务</span> <span class="text_14 topBox">我们的业务</span>
<span class="text_15"> <span class="text_15 topBox">
The&nbsp;Way&nbsp;of&nbsp;the&nbsp;Internet The&nbsp;Way&nbsp;of&nbsp;the&nbsp;Internet
</span> </span>
<div class="flex-row justify-center align-center"> <div class="flex-row justify-center align-center">
<div> <div class="leftBox">
<img class="image_6" referrerpolicy="no-referrer" src="public/images/t3.png" /> <img class="image_6" referrerpolicy="no-referrer" src="public/images/t3.png" />
</div> </div>
<div class="section_2 flex-col"> <div class="rightBox section_2 flex-col">
<div class="group_6 flex-col"> <div class="group_6 flex-col">
<div class="box_6 flex-row justify-between"> <div class="box_6 flex-row justify-between">
<div class="image-wrapper_3 flex-col align-center"> <div class="image-wrapper_3 flex-col align-center">
@ -194,8 +196,8 @@
<span class="text_42">Our&nbsp;Business&nbsp;</span> <span class="text_42">Our&nbsp;Business&nbsp;</span>
</div> </div>
<div class="box_12 flex-row justify-center"> <div class="box_12 flex-row justify-center">
<img class="image_7" referrerpolicy="no-referrer" src="public/images/news1.png" /> <img class="image_7 leftBox" referrerpolicy="no-referrer" src="public/images/news1.png" />
<div class="box_13 flex-col"> <div class="box_13 flex-col topBox">
<div class="text-group_6 flex-col justify-between"> <div class="text-group_6 flex-col justify-between">
<span class="text_43"> <span class="text_43">
洛阳市郑州商会在洛阳灵睿网络技术有限... 洛阳市郑州商会在洛阳灵睿网络技术有限...
@ -212,10 +214,10 @@
<span class="text_45">2025-06-24</span> <span class="text_45">2025-06-24</span>
</div> </div>
</div> </div>
<img class="image_8" referrerpolicy="no-referrer" src="public/images/news2.png" /> <img class="image_8 rightBox" referrerpolicy="no-referrer" src="public/images/news2.png" />
</div> </div>
<div class="box_14 flex-row justify-center"> <div class="box_14 flex-row justify-center">
<div class="group_23 flex-col"> <div class="group_23 flex-col leftBox">
<div class="text-group_7 flex-col justify-between"> <div class="text-group_7 flex-col justify-between">
<span class="text_46"> <span class="text_46">
洛阳市郑州商会在洛阳灵睿网络技术有限... 洛阳市郑州商会在洛阳灵睿网络技术有限...
@ -232,8 +234,8 @@
<span class="text_48">2025-06-24</span> <span class="text_48">2025-06-24</span>
</div> </div>
</div> </div>
<img class="image_9" referrerpolicy="no-referrer" src="public/images/news3.png" /> <img class="image_9 bottomBox" referrerpolicy="no-referrer" src="public/images/news3.png" />
<div class="group_26 flex-col"> <div class="group_26 flex-col rightBox">
<div class="text-group_8 flex-col justify-between"> <div class="text-group_8 flex-col justify-between">
<span class="text_49"> <span class="text_49">
洛阳市郑州商会在洛阳灵睿网络技术有限... 洛阳市郑州商会在洛阳灵睿网络技术有限...
@ -257,12 +259,14 @@
</div> </div>
</div> </div>
</div> </div>
<div class="box_17 flex-col"> <div class="box_17 flex-col" style="overflow: hidden;">
<span class="text_53">合作伙伴</span> <span class="text_53">合作伙伴</span>
<span class="text_54">Our&nbsp;Business&nbsp;</span> <span class="text_54">Our&nbsp;Business&nbsp;</span>
<div class="group_28 flex-row justify-center"> <div class="group_28 flex-row justify-center numberTopBox">
<div class="text-group_9 flex-col justify-between"> <div class="text-group_9 flex-col justify-between">
<span class="text_55">5000+</span> <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"> <span class="text_56">
19年技术沉淀，只为提供更在专业的服务，行业解决方案 19年技术沉淀，只为提供更在专业的服务，行业解决方案
</span> </span>
@ -270,7 +274,7 @@
<span class="text_57">服务客户</span> <span class="text_57">服务客户</span>
<div class="section_7 flex-col"></div> <div class="section_7 flex-col"></div>
<div class="text-group_10 flex-col justify-between"> <div class="text-group_10 flex-col justify-between">
<span class="text_58">19+</span> <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"> <span class="text_59">
19年技术沉淀，只为提供更在专业的服务，行业解决方案 19年技术沉淀，只为提供更在专业的服务，行业解决方案
</span> </span>
@ -278,7 +282,7 @@
<span class="text_60">技术沉淀</span> <span class="text_60">技术沉淀</span>
<div class="section_8 flex-col"></div> <div class="section_8 flex-col"></div>
<div class="text-group_11 flex-col justify-between"> <div class="text-group_11 flex-col justify-between">
<span class="text_61">100+</span> <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"> <span class="text_62">
19年技术沉淀，只为提供更在专业的服务，行业解决方案 19年技术沉淀，只为提供更在专业的服务，行业解决方案
</span> </span>
@ -286,7 +290,7 @@
<span class="text_63">覆盖行业</span> <span class="text_63">覆盖行业</span>
<div class="section_9 flex-col"></div> <div class="section_9 flex-col"></div>
<div class="text-group_12 flex-col justify-between"> <div class="text-group_12 flex-col justify-between">
<span class="text_64">30+</span> <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"> <span class="text_65">
19年技术沉淀，只为提供更在专业的服务，行业解决方案 19年技术沉淀，只为提供更在专业的服务，行业解决方案
</span> </span>
@ -294,8 +298,8 @@
<span class="text_66">技术团队</span> <span class="text_66">技术团队</span>
</div> </div>
<div class="group_29 grid grid-cols-6 gap-6 mr-auto"> <div class="group_29 grid grid-cols-6 gap-6 mr-auto">
<div v-for="item in 18"> <div v-for="item in 18" class="">
<img class="image_11" referrerpolicy="no-referrer" src="public/images/q1.png"/> <img class="image_11 topSj" referrerpolicy="no-referrer" src="public/images/q1.png" />
</div> </div>
</div> </div>
</div> </div>
@ -306,31 +310,40 @@
import { Swiper, SwiperSlide } from 'swiper/vue' import { Swiper, SwiperSlide } from 'swiper/vue'
import { nextTick, ref } from 'vue' import { nextTick, ref } from 'vue'
import 'swiper/css' import 'swiper/css'
import { Autoplay, Navigation, Pagination, Scrollbar, A11y, EffectCoverflow } from "swiper/modules"; import { Autoplay, Navigation, Pagination, Scrollbar, A11y, EffectCoverflow,EffectFade } from "swiper/modules";
import ScrollReveal from 'scrollreveal';
let modules = [Autoplay, A11y, EffectCoverflow]; import { NNumberAnimation } from 'naive-ui'
let modules = [Autoplay, A11y, EffectCoverflow,EffectFade];
import "swiper/css"; import "swiper/css";
import "swiper/css/navigation"; import "swiper/css/navigation";
import "swiper/css/pagination"; import "swiper/css/pagination";
import 'swiper/css/effect-coverflow'; 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 * as swiperAni from '@/assets/animate/animate.js'
import $api from '@/service/webRequest' import $api from '@/service/webRequest'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { useStore } from '~/store' import { useStore } from '~/store'
const { locale } = useI18n() const { locale } = useI18n()
let newsSwiper: any = null let newsSwiper: any = null
const onSwiperNews = (swiper: any) => { const onSwiperNews = (swiper: any) => {
newsSwiper = swiper newsSwiper = swiper
} }
const swiperOptionsNews = { const swiperOptionsNews = {
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
direction: 'horizontal', direction: 'horizontal',
slidesPerView: 1, slidesPerView: 1,
speed: 700, speed: 500,
loop: false, effect: 'fade',
modules: [Navigation], loop: true,
modules: [EffectFade,Autoplay,Navigation],
navigation: { navigation: {
nextEl: '#swipen_prev', nextEl: '#swipen_prev',
prevEl: '#swipen_next', prevEl: '#swipen_next',
@ -345,12 +358,88 @@ const swiper_exp = ref();
// 新闻数据 // 新闻数据
onMounted(() => { 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> </script>
<style lang="scss" scoped> <style lang="scss">
@import "@/assets/animate/animate.min.css"; @import "@/assets/animate/animate.min.css";
@import "@/assets/index.css"; @import "@/assets/index.css";
@ -361,4 +450,19 @@ onMounted(() => {
:deep(.dswper .swiper-slide-prev) { :deep(.dswper .swiper-slide-prev) {
transform: translate3d(0px, 0px, -507px) rotateX(0deg) rotateY(0deg) scale(1) !important; 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);
}
</style> </style>

842
pages/phone_index.vue Normal file
View File

@ -0,0 +1,842 @@
<template>
<div style="width: 100%;">
<!-- Swiper 容器 -->
<div class="group_666" style="position: relative;">
<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews">
<swiper-slide>
<img src="public/images/banner.png" style="width: 100%;">
</swiper-slide>
<swiper-slide>
<img src="public/images/banner.png" style="width: 100%;">
</swiper-slide>
</swiper>
<div class="nav-container">
<div class="flex-row justify-center align-center">
<div>
<img src="public/images/left.png" alt="" class="nav-arrow">
</div>
<div style="margin: 0px 20px;">
<img src="public/images/morse.png" alt="" class="logo-img">
</div>
<div>
<img src="public/images/right.png" alt="" class="nav-arrow">
</div>
</div>
</div>
</div>
<div class="group_2 flex-col">
<div class="box_2 flex-col">
<div class="group_3 flex-col justify-center align-center">
<div class="group_4 flex-col leftBox">
<div class="text-group_1 flex-col justify-between">
<span class="text_7">灵睿的互联网之道</span>
<span class="text_8">
The&nbsp;Way&nbsp;of&nbsp;the&nbsp;Internet
</span>
</div>
<div class="text-wrapper_1 flex-row justify-center align-center" style="gap: 20px;">
<div class="text_9">公司简介</div>
<div class="text_10">运营方法论</div>
<div class="text_11">互联网营销</div>
</div>
<div class="box_3 flex-col">
<div class="box_4 flex-col"></div>
</div>
<span class="text_12">
灵睿是一家专业提供互联网技术及应用化服务的科技企业。公司成立于2006年，总部位于十三朝古都洛阳，在郑州、洛阳、许昌三地设立四家公司，是洛阳及河南建立较早、实力较强、规模较大的互联网骨干技术服务企业。公司致力于互联网+工业、互联网+医疗、互联网+教育、互联网+旅游、互联网+农业五个方面的发展。目前为近三千家企业提供互联网服务，并为上百家国有大型企业以及党政部门、事业机关单位提供互联网应用化服务。
</span>
<div class="text-wrapper_2 flex-col">
<span class="text_13">查看全部</span>
</div>
</div>
<div class="group_5 flex-col justify-center align-center rightBox">
<div class="section_1 flex-col">
<div class="image-wrapper_2 flex-col">
<img class="image_5" referrerpolicy="no-referrer" src="public/images/bf.png" />
</div>
</div>
<div class="orange-bg"></div>
</div>
</div>
</div>
</div>
<div class="group_2 flex-col">
<div class="box_5 flex-col">
<span class="text_14 topBox">我们的业务</span>
<span class="text_15 topBox">
The&nbsp;Way&nbsp;of&nbsp;the&nbsp;Internet
</span>
<div class="flex-col justify-center align-center business-container">
<!-- <div class="leftBox business-image">
<img class="image_6" referrerpolicy="no-referrer" src="public/images/t3.png" />
</div> -->
<div class="rightBox section_2 flex-col">
<div class="group_6 flex-col">
<div class="box_6 flex-row align-center">
<div class="image-wrapper_3 flex-col align-center">
<img class="label_1" referrerpolicy="no-referrer" src="public/images/u1.png" />
</div>
<div class="text-group_2 flex-col justify-between">
<span class="text_17">
专业网站建设与企业官网设计定制服务
</span>
<span class="text_16">
助力企业数字化转型升级，PC端/移动端/H5提供一站式网站开发、搭建
</span>
</div>
</div>
</div>
<div class="group_7 flex-row">
<div class="image-wrapper_5 flex-col align-center">
<img class="label_1" referrerpolicy="no-referrer" src="public/images/r4.png" />
</div>
<div class="text-group_2 flex-col justify-between">
<span class="text_17">企业数字化自媒体托管专家</span>
<span class="text_16">
业团队代运营+AI智能内容生成+多平台精准投放，助您专注核心业务
</span>
</div>
</div>
<div class="group_10 flex-col"></div>
<div class="group_7 flex-row">
<div class="image-wrapper_5 flex-col align-center">
<img class="label_1" referrerpolicy="no-referrer" src="public/images/r3.png" />
</div>
<div class="text-group_2 flex-col justify-between">
<span class="text_17">全流程抖音短视频制作服务</span>
<span class="text_16">
助您快速打造高播放量、高互动率的爆款短视频
</span>
</div>
</div>
<div class="group_12 flex-col"></div>
<div class="group_7 flex-row">
<div class="image-wrapper_5 flex-col align-center">
<img class="label_1" referrerpolicy="no-referrer" src="public/images/r2.png" />
</div>
<div class="text-group_2 flex-col justify-between">
<span class="text_17">全栈H5开发解决方案</span>
<span class="text_16">
基于HTML5/CSS3/JavaScript核心技术助力实现高转化率与沉浸式用户体验
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="box_7 flex-col">
<span class="text_24">行业案例</span>
<div class="group_14 flex-row justify-between align-center" style="flex-wrap: wrap;">
<div class="industry-tabs justify-center align-center " style="gap: 20px;">
<div class="text_25 active-tab">
<span>医疗</span>
<div class="tab-indicator"></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="group_15" style="flex: 0 0 100%;"></div>
</div>
<div class="dswper">
<swiper ref="swiper_exp" :slidesPerView="1.2" loop :loopedSlides="3" :autoplay="false" centeredSlides
:modules="modules" :watchSlidesProgress="true" @swiper="onSwiperExp" effect="coverflow"
:breakpoints="swiperBreakpoints">
<swiper-slide>
<img src="public/images/op1.png" style="width: 100%;">
</swiper-slide>
<swiper-slide>
<img src="public/images/op1.png" style="width: 100%;">
</swiper-slide>
<swiper-slide>
<img src="public/images/op1.png" style="width: 100%;">
</swiper-slide>
<swiper-slide>
<img src="public/images/op1.png" style="width: 100%;">
</swiper-slide>
<swiper-slide>
<img src="public/images/op1.png" style="width: 100%;">
</swiper-slide>
</swiper>
<div class="dswper_left">
<img src="public/images/opl.png">
</div>
<div class="dswper_right">
<img src="public/images/opr.png">
</div>
<div class="flex-row justify-center align-center absolute w-full bottom-[-50px] pagination-dots">
<div class="dot active-dot"></div>
<div class="dot"></div>
<div class="dot"></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>
</div>
<div class="news-container">
<img class="image_7 leftBox" referrerpolicy="no-referrer" src="public/images/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">
为深入学习贯彻党的二十大精神，落实省、市委决策，
充分发挥民营企业的凝聚力、向心力和创造力，赴..
</span>
</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>
</div>
</div>
<img class="image_8 rightBox" referrerpolicy="no-referrer" src="public/images/news2.png" />
<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">
为深入学习贯彻党的二十大精神，落实省、市委决策，
充分发挥民营企业的凝聚力、向心力和创造力，赴..
</span>
</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>
</div>
</div>
<img class="image_9 bottomBox" referrerpolicy="no-referrer" src="public/images/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">
为深入学习贯彻党的二十大精神，落实省、市委决策，
充分发挥民营企业的凝聚力、向心力和创造力，赴..
</span>
</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>
</div>
</div>
</div>
<div class="box_16 flex-row">
<div class="text-wrapper_12 flex-col">
<span class="text_52">查看更多</span>
</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="partner-stats flex-col justify-center numberTopBox">
<div class="stat-item">
<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>
<div class="section_7 flex-col"></div>
<div class="stat-item">
<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>
<div class="section_8 flex-col"></div>
<div class="stat-item">
<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>
<div class="section_9 flex-col"></div>
<div class="stat-item">
<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>
<div class="group_29 partner-grid">
<div v-for="item in 18" class="">
<img class="image_11 topSj" referrerpolicy="no-referrer" src="public/images/q1.png" />
</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()
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 swiperBreakpoints = {
320: {
slidesPerView: 1.2,
spaceBetween: 10
},
768: {
slidesPerView: 2,
spaceBetween: 20
},
1024: {
slidesPerView: 3,
spaceBetween: 30
}
}
// 新闻数据
onMounted(() => {
nextTick(() => {
animate()
// 添加移动端检测
checkMobile()
})
})
// 检测移动设备并应用相应样式
const checkMobile = () => {
const isMobile = window.innerWidth <= 768
document.body.classList.toggle('is-mobile', isMobile)
// 监听窗口大小变化
window.addEventListener('resize', () => {
const isMobile = window.innerWidth <= 768
document.body.classList.toggle('is-mobile', isMobile)
})
}
const numberAnimationInstRef = ref()
const numberAnimationInstRefKH = ref()
const numberAnimationInstRefJS = ref()
const numberAnimationInstRefHY = ref()
const animate = () => {
const sr = ScrollReveal();
sr.reveal('.leftBox', {
origin: "left",
distance: "500px", // 减少移动设备上的距离
duration: 1000, // 减少动画时间
delay: 100,
opacity: 0,
scale: 0.9,
reset: true,
mobile: true,
})
sr.reveal('.rightBox', {
origin: "right",
distance: "500px", // 减少移动设备上的距离
duration: 1000, // 减少动画时间
delay: 100,
opacity: 0,
scale: 0.9,
reset: true,
mobile: true,
})
sr.reveal('.topBox', {
origin: "top",
distance: "500px", // 减少移动设备上的距离
duration: 1000, // 减少动画时间
delay: 100,
opacity: 0,
scale: 0.9,
reset: true,
mobile: true,
})
sr.reveal('.bottomBox', {
origin: "bottom",
distance: "500px", // 减少移动设备上的距离
duration: 1000, // 减少动画时间
delay: 100,
opacity: 0,
scale: 0.9,
reset: true,
mobile: true,
})
sr.reveal('.numberTopBox', {
origin: "top",
distance: "500px", // 减少移动设备上的距离
duration: 1000, // 减少动画时间
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: "500px", // 减少移动设备上的距离
duration: 1000, // 减少动画时间
delay: 5,
opacity: 0,
scale: 0.9,
reset: true,
mobile: true,
useDelay: 'always',
interval: 50,
})
}
</script>
<style lang="scss">
@import "@/assets/animate/animate.min.css";
@import "@/assets/index.css";
/* 移动端通用样式 */
body.is-mobile {
font-size: 14px;
}
/* 轮播图样式调整 */
:deep(.dswper .swiper-slide-next) {
transform: translate3d(0px, 0px, -300px) rotateX(0deg) rotateY(0deg) scale(1) !important;
}
:deep(.dswper .swiper-slide-prev) {
transform: translate3d(0px, 0px, -300px) rotateX(0deg) rotateY(0deg) scale(1) !important;
}
.group_666 .swiper-slide img {
width: 100%;
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);
}
/* 移动端导航按钮 */
.nav-arrow {
max-width: 30px;
height: auto;
}
.logo-img {
max-width: 120px;
height: auto;
}
/* 橙色背景块 */
.orange-bg {
background-color: rgba(252, 116, 40, 1);
width: 100%;
height: 100%;
z-index: 1;
position: absolute;
right: -15px;
bottom: -15px;
}
/* 业务部分 */
.business-container {
flex-direction: column;
}
.business-image {
width: 100%;
margin-bottom: 20px;
}
/* 行业案例标签栏 */
.industry-tabs {
display: flex;
overflow-x: auto;
width: 100%;
padding: 10px 0;
margin-bottom: 15px;
-webkit-overflow-scrolling: touch;
}
.text_25 {
white-space: nowrap;
margin-right: 15px;
position: relative;
width: auto;
margin:0px;
}
.active-tab {
color: #fc7428;
}
.tab-indicator {
width: 100%;
height: 1px;
background-color: #fc7428;
position: absolute;
bottom: -10px;
}
/* 更多案例按钮 */
.more-cases {
width: 100%;
justify-content: flex-end;
margin: 10px 0;
}
.more-icon {
max-width: 20px;
}
/* 翻页按钮 */
.dswper_left,
.dswper_right {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.dswper_left img,
.dswper_right img {
max-width: 100%;
}
/* 分页指示点 */
.pagination-dots {
bottom: -30px !important;
}
.dot {
width: 20px;
height: 4px;
background-color: #C1C1C1;
margin: 0 5px;
}
.active-dot {
background-color: #fc7428;
}
/* 新闻动态部分 */
.news-container {
display: flex;
flex-direction: column;
gap: 20px;
}
/* 合作伙伴部分 */
.partner-stats {
flex-direction: column;
align-items: center;
}
.stat-item {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20px;
width: 100%;
}
.partner-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
width: 100%;
}
.nav-container {
position: absolute;
bottom: 30px;
left: 0;
width: 100%;
z-index: 100;
}
/* 响应式断点 */
@media (max-width: 768px) {
.text-group_1 {
width: 100%;
text-align: center;
}
.text_7 {
width: 100%;
text-align: center;
}
.text_8 {
width: 100%;
text-align: center;
}
.text_9 {
text-align: center;
margin: 0px;
font-size: 18px;
}
.text_10 {
text-align: center;
margin: 0px;
font-size: 18px;
}
.text_11 {
text-align: center;
margin: 0px;
font-size: 18px;
}
.text_12 {
width: 100%;
text-align: center;
padding: 10px;
margin: 0px;
height: 100%;
}
.text_14 {
margin: 20px 0px 10px 0px;
}
.text-wrapper_1 {
margin-top: 30px;
width: 100%;
}
.text-wrapper_2 {
margin: 0px auto;
}
.section_1 {
width: 90%;
height: 330px;
}
.image_5 {
width: 50px;
height: 50px;
}
.orange-bg {
right: 0px;
bottom: 0px;
}
.group_5 {
width: 100%;
}
.section_2 {
width: 100%;
}
.box_6 {
width: 100%;
}
.group_6 {
width: 100%;
}
.group_7 {
width: 100%;
}
.text-group_2 {
width: 80%;
margin-left: 10px;
}
.image-wrapper_3 {
width: 35px;
height: 35px;
}
.text_32{
margin-left:0px;
}
.more-cases{
width: auto;
}
.label_1 {
width: 35px;
height: 35px;
}
.group_3 {
height: 100%;
padding-top: 20px;
background: url(public/images/bg-c.png) no-repeat;
}
.logo-img {
width: 15px;
height: auto;
}
.text_16 {
width: 100%;
font-size: 14px;
height: auto;
line-height: 20px;
margin-top: 5px;
}
.text_17 {
width: 100%;
font-size: 17px;
}
.box_3 {
width: 100%;
text-align: center;
margin-top: 10px;
}
.nav-arrow {
width: 15px;
height: auto;
}
.nav-container {
bottom: 10px;
}
.box_4 {
margin-left: 20px;
}
.business-container {
flex-direction: row;
}
.business-image {
width: 45%;
margin-bottom: 0;
}
.news-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.partner-stats {
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.stat-item {
width: 48%;
}
.partner-grid {
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 1024px) {
.partner-stats {
flex-direction: row;
flex-wrap: nowrap;
}
.stat-item {
width: 23%;
}
.partner-grid {
grid-template-columns: repeat(6, 1fr);
}
}
</style>

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.2 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB