From 7d0dc5a374cb0f6dbdb2430befd3cee82b88152f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A6=86=E9=92=B1=E8=90=BD=E5=B0=BD=E6=A7=BF=E8=8A=B1?=
 =?UTF-8?q?=E7=A8=80?= <2675540038@qq.com>
Date: Thu, 13 Mar 2025 17:37:54 +0800
Subject: [PATCH] 333

---
 app.vue                  |   3 -
 components/AppHeader.vue |  11 +--
 global/env.ts            |   4 +-
 nuxt.config.ts           |  16 ++--
 pages/index.vue          |  58 +++++-------
 pages/index_about.vue    | 175 ++++++++++++++++++++++++++++++++++++
 pages/index_clients.vue  | 108 +++++++++++++++++++++++
 pages/index_service.vue  | 186 +++++++++++++++++++++++++++++++++++++++
 8 files changed, 512 insertions(+), 49 deletions(-)
 create mode 100644 pages/index_about.vue
 create mode 100644 pages/index_clients.vue
 create mode 100644 pages/index_service.vue

diff --git a/app.vue b/app.vue
index 6461053..76ecf26 100644
--- a/app.vue
+++ b/app.vue
@@ -4,9 +4,6 @@
 </template>
 
 <script lang="ts" setup>
-import { APIs } from './service/apiList'
-import type AxiosRequestError from './service/error'
-import $api from './service/webRequest'
 useSeoMeta({
   title: '我的神奇网站',
   ogTitle: '我的神奇网站',
diff --git a/components/AppHeader.vue b/components/AppHeader.vue
index 9a8be9d..0389ae0 100644
--- a/components/AppHeader.vue
+++ b/components/AppHeader.vue
@@ -25,27 +25,27 @@
               </NuxtLink>
             </li>
             <li>
-              <NuxtLink to="index_about" :class="{ 'active': route.path === 'index_about' }">
+              <NuxtLink to="index_about" :class="{ 'active': route.path === '/index_about' }">
                 {{ $t('index_about') }}
               </NuxtLink>
             </li>
             <li>
-              <NuxtLink to="index_services" :class="{ 'active': route.path === 'index_services/' }">
+              <NuxtLink to="index_service" :class="{ 'active': route.path === '/index_service' }">
                 {{ $t('index_services') }}
               </NuxtLink>
             </li>
             <li>
-              <NuxtLink to="index_clients" :class="{ 'active': route.path === 'index_clients' }">
+              <NuxtLink to="index_clients" :class="{ 'active': route.path === '/index_clients' }">
                 {{ $t('index_clients') }}
               </NuxtLink>
             </li>
             <li>
-              <NuxtLink to="index_news" :class="{ 'active': route.path === 'index_news' }">
+              <NuxtLink to="index_news" :class="{ 'active': route.path === '/index_news' }">
                 {{ $t('index_news') }}
               </NuxtLink>
             </li>
             <li>
-              <NuxtLink to="index_contact" :class="{ 'active': route.path === 'index_contact' }">
+              <NuxtLink to="index_contact" :class="{ 'active': route.path === '/index_contact' }">
                 {{ $t('index_contact') }}
               </NuxtLink>
             </li>
@@ -65,6 +65,7 @@ import { ref } from 'vue'
 import { useRoute } from 'vue-router'
 
 const route = useRoute()
+console.log(route)
 </script>
 
 <style lang="scss" scoped>
diff --git a/global/env.ts b/global/env.ts
index 1bfc253..36c6a07 100644
--- a/global/env.ts
+++ b/global/env.ts
@@ -2,13 +2,13 @@ import { isUndef } from './is'
 
 // 正式环境
 export const PROD_ENV = {
-	SERVER_URL: 'https://xxx.com/api', // 服务地址
+	SERVER_URL: '/api/', // 服务地址
 	IS_DEV: 'false', // 是否是测试环境
 }
 
 // 测试环境
 export const DEV_ENV = {
-	SERVER_URL: 'https://xxx-test.com/api',
+	SERVER_URL: '/api/',
 	IS_DEV: 'true',
 }
 
diff --git a/nuxt.config.ts b/nuxt.config.ts
index ce61653..4852d30 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -4,10 +4,6 @@ import { defineNuxtConfig } from 'nuxt/config'
 export default defineNuxtConfig({
   ssr: false,
 
-  routeRules: {
-    '/**': { ssr: false }
-  },
-
   css: [
     'swiper/css',
     'swiper/css/mousewheel',
@@ -21,7 +17,17 @@ export default defineNuxtConfig({
       tailwindcss: {},
     },
   },
-
   modules: ['@pinia/nuxt', 'nuxt-icons'],
   compatibilityDate: '2025-03-12',
+  vite: {
+    server: {
+      proxy: {
+        '/api': {
+          target: "http://naweigetetest2.hschool.com.cn/",
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/api/, ''),
+        }
+      }
+    }
+  }
 })
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index dd56493..453d7a4 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -278,7 +278,7 @@
 			<swiper-slide class="swiper-slide-a">
 				<div class="flex justify-center items-center w-full">
 					<div class="w-[40%] text-right">
-						<img id="img1" src="/images/Group157.png" class="w-[80%] border-r-[10px] border-[#214ADB] inline-block">
+						<img id="img1" :src="leftImg" class="w-[80%] border-r-[10px] border-[#214ADB] inline-block">
 					</div>
 					<div class="w-[44%] text-left pl-5">
 						<h2 class="text-2xl font-bold">{{ $t('index_n1') }}</h2>
@@ -297,14 +297,14 @@
 									<!-- 这里可以使用v-for循环渲染新闻列表 -->
 									<div class="swiper-slide">
 										<div class="text-center">
-											<h3 class="font-semibold text-2xl">
+											<h3 class="font-semibold text-2xl line-clamp-1">
 												<a :href="item.url" target="_blank" class="text-[#0c1923]">
 													{{ item.title }}
 												</a>
 											</h3>
-											<h5 class="text-[#606060] mt-[25px] leading-[25px]">
+											<h5 class="text-[#606060] mt-[25px] leading-[25px] line-clamp-2">
 												<a :href="item.url" target="_blank" class="text-[#0c1923]">
-													{{ item.description }}
+													{{ item.synopsis }}
 												</a>
 											</h5>
 										</div>
@@ -313,7 +313,7 @@
 							</swiper>
 							<img id="swipen_prev" src="/images/group9-1.png" class="w-[30px] cursor-pointer" @click="prevNews">
 						</div>
-						<div class="w-full h-[1px] bg-black mt-10"></div>
+						<div class="w-full h-[1px] bg-black mt-3"></div>
 					</div>
 				</div>
 				<div class="absolute right-[10px]">
@@ -347,7 +347,25 @@ import { Mousewheel, Navigation } from 'swiper/modules'
 import 'swiper/css/mousewheel'
 import 'swiper/css/navigation'
 import * as swiperAni from '@/assets/animate/animate.js'
+import $api from '@/service/webRequest'
 
+// 新闻数据
+const leftImg = ref();
+const newsList = ref([])
+onMounted(() => {
+	getNewsList();
+})
+const getNewsList = () => {
+  $api.get("/api/article/new/list")
+    .then((res: any) => {
+		console.log(res)
+      newsList.value = res.data.data
+	  leftImg.value = res.data.data[0].image_input[0]
+    })
+    .catch((err) => {
+      console.dir(err)
+    })
+}
 // 导入背景图片
 const bgImage = 'images/Group157.png'
 
@@ -360,34 +378,6 @@ let swiperInstance: any = null
 // 新闻轮播实例
 let newsSwiper: any = null
 
-// 新闻数据
-const newsList = ref([
-  {
-    title: '新闻标题1',
-    description: '新闻描述内容1，这里是新闻的简短描述。',
-    url: '/news/1'
-  },
-  {
-    title: '新闻标题2',
-    description: '新闻描述内容2，这里是新闻的简短描述。',
-    url: '/news/2'
-  },
-  {
-    title: '新闻标题3',
-    description: '新闻描述内容3，这里是新闻的简短描述。',
-    url: '/news/3'
-  },
-  {
-    title: '新闻标题4',
-    description: '新闻描述内容4，这里是新闻的简短描述。',
-    url: '/news/4'
-  },
-  {
-    title: '新闻标题5',
-    description: '新闻描述内容5，这里是新闻的简短描述。',
-    url: '/news/5'
-  }
-])
 
 // 新闻轮播控制
 const nextNews = () => {
@@ -639,6 +629,6 @@ const scrollToTop = () => {
 
 .news_padd {
   margin-top: 20px;
-  height: 80px;
+  height: 110px;
 }
 </style>
diff --git a/pages/index_about.vue b/pages/index_about.vue
new file mode 100644
index 0000000..6172398
--- /dev/null
+++ b/pages/index_about.vue
@@ -0,0 +1,175 @@
+<template>
+    <div class="bg-white">
+        <!-- Banner section with background image -->
+        <div class="aboutimgBg" :style="{
+            backgroundColor: '#fff',
+            backgroundImage: `url(/images/group195.png)`,
+            backgroundPosition: 'center center',
+            backgroundRepeat: 'no-repeat',
+            backgroundSize: 'cover',
+            height: '600px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+        }">
+            <div class="banDes">
+                <div class="aboutTit text-center">
+                    <h2 class="font-semibold animated fadeInLeft" style="font-size: 40px;">{{ $t('index_name') }}</h2>
+                </div>
+            </div>
+        </div>
+
+        <!-- Main content section -->
+        <div class="mainBg py-12 z-10 relative" style="min-height: 110vh;">
+            <div class="oneBox1Bg">
+                <div class="container mx-auto px-4">
+                    <div class="oneBox1 text-center" style="margin-top: -100px;">
+                        <h3 class="text-2xl  text-[#606060] h-[144px] animated fadeInUp">{{ $t('about_a1') }}</h3>
+                    </div>
+                    <div class="oneBox1Bg1 ">
+                        <h2 class="text-3xl font-bold text-center text-[#E2E2E2] mb-6 animated fadeInUp">{{ $t('about_a2') }}</h2>
+                        <div class="oneBox1Bg1xiah w-24 h-[2px] bg-[#E2E2E2] mx-auto mb-12"></div>
+                        <!-- Three column section -->
+                        <div class="oneBox1Bg1img flex justify-center items-center flex-wrap gap-8 mb-16 mt-10">
+                            <div class="flex flex-col items-center animated fadeInUp">
+                                <img class="w-[150px] h-[150px] object-cover mb-4" src="/images/group53.png">
+                                <div class="oneBox1Bg1imgt">
+                                    <h3 class="text-2xl font-medium text-[#333]">{{ $t('about_a3') }}</h3>
+                                </div>
+                            </div>
+
+                            <span class="oneBox1Bg1img1span h-40 w-px bg-[#ddd] hidden md:block"></span>
+
+                            <div class="flex flex-col items-center animated fadeInUp">
+                                <img class="w-[150px] h-[150px] object-cover mb-4" src="/images/group52.png">
+                                <div class="oneBox1Bg1imgt">
+                                    <h3 class="text-2xl font-medium text-[#333]">{{ $t('about_a4') }}</h3>
+                                </div>
+                            </div>
+
+                            <span class="oneBox1Bg1img1span h-40 w-px bg-[#ddd] hidden md:block"></span>
+
+                            <div class="flex flex-col items-center animated fadeInUp">
+                                <img class="w-[150px] h-[150px] object-cover mb-4" src="/images/group51.png">
+                                <div class="oneBox1Bg1imgt">
+                                    <h3 class="text-2xl font-medium text-[#333]">{{ $t('about_a5') }}</h3>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div class="oneBox1Bg1h text-center mb-6 animated fadeInUp">
+                            <h3 class="text-2xl  text-[#606060]">{{ $t('about_a6') }}</h3>
+                        </div>
+                        <div class="oneBox1Bg1xiah1"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Second banner section with background image -->
+        <div class="aboutimgBg1 text-center py-16" :style="{
+            backgroundImage: `url(/images/maskgroup1.png)`,
+            backgroundPosition: 'center center',
+            backgroundRepeat: 'no-repeat',
+            backgroundSize: 'cover',
+            color: 'white',
+            height: '700px'
+        }">
+            <div class="aboutTit2 container mx-auto px-4">
+                <div class="text-[#000]  text-3xl animated fadeInLeft">{{ $t('about_a7') }}</div>
+                <div class="oneBox1Bg1xiah2 w-100 h-[2px] bg-[#606060] mx-auto my-8 animated fadeInLeft"></div>
+                <div class="oneBox1Bg2h max-w-1xl  mt-[100px]">
+                    <h3 class="text-[#606060] text-[24px]  leading-relaxed animated fadeInLeft">{{ $t('about_a8') }}</h3>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted } from 'vue'
+
+onMounted(() => {
+})
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/animate/animate.min.css";
+
+.aboutimgBg,
+.aboutimgBg1 {
+    position: relative;
+}
+
+.container {
+    max-width: 1310px;
+}
+
+.aboutTit h2::after {
+    content: '';
+    margin-top: -30px;
+    width: 598px;
+    height: 34px;
+    background: #A8CBFF;
+    display: block;
+}
+
+.oneBox1Bg1 {
+    height: 500px;
+    width: 1240px;
+    margin-top: 150px;
+}
+
+.oneBox1Bg1 h2 {
+    font-weight: 500;
+    text-align: center;
+    height: 51px;
+    font-size: 34px;
+    color: #000000;
+    line-height: 40px;
+}
+
+.oneBox1Bg1xiah {
+    margin: 0 auto;
+    width: 100%;
+}
+
+.oneBox1Bg1img1span {
+    margin-left: 125px;
+    margin-right: 125px;
+    border-right: 2px solid #E2E2E2;
+    display: inline-block;
+    height: 240px;
+    margin-top: -5px;
+}
+
+.oneBox1Bg1imgt {
+    font-weight: 500;
+    font-size: 24px;
+    color: #1C1C1C;
+    line-height: 28px;
+    text-align: center;
+    margin-top: 31px;
+}
+
+.oneBox1Bg1imgt h3::after {
+    content: '';
+    margin-top: -11px;
+    width: 60px;
+    height: 16px;
+    background: #A8CBFF;
+    display: block;
+}
+
+.oneBox1Bg1h {
+    padding-top: 53px;
+    text-align: center;
+}
+
+.oneBox1Bg1xiah1 {
+    border-top: 2px solid #E2E2E2;
+    margin-left: -61px;
+    width: 1240px;
+    margin-top: 55px;
+}
+</style>
\ No newline at end of file
diff --git a/pages/index_clients.vue b/pages/index_clients.vue
new file mode 100644
index 0000000..b807708
--- /dev/null
+++ b/pages/index_clients.vue
@@ -0,0 +1,108 @@
+<template>
+    <div class="bg-white">
+        <!-- Banner section with background image -->
+        <div class="aboutimgBg" :style="{
+            backgroundImage: `url(/images/maskgroup2.png)`,
+            backgroundSize: 'cover',
+            height: '600px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+        }">
+            <div class="banDes">
+                <div class="clientTit text-center">
+                    <h2 class="text-[50px] font-bold animated fadeInLeft">{{ $t('clients_b1') }}</h2>
+                </div>
+            </div>
+        </div>
+
+        <!-- Clients content section -->
+        <div class="mainBg pb-[100px]">
+            <div class="oneBox1Bg">
+                <div class="container mx-auto px-4">
+                    <div class="clientBox1">
+                        <h3 style="margin-top: -120px; line-height: 31px;" class="animated fadeInUp text-2xl font-medium text-center text-[#606060]">{{ $t('clients_b2') }}</h3>
+                    </div>
+                    <div class="clientBg1 mt-[100px]">
+                        <div class="clientBg1img flex flex-row items-center justify-between">
+                            <div class="clientBg1imgdx w-[300px]">
+                                <img class="oneBox1Bg1img1 w-full h-auto object-contain" src="/images/image8.png" alt="Client">
+                            </div>
+                            <div class="clientBg1imgt text-left pl-[30px]" style="flex: 1;">
+                                <h3 class="text-[40px] font-bold mb-2">{{ $t('clients_b3') }}</h3>
+                                <h4 class="text-xl text-[#606060] mt-[30px]">{{ $t('clients_b4') }}</h4>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="clientxiah1 w-full h-[1px] bg-gray-200 my-8"></div>
+                        
+                        <div class="clientimg flex flex-wrap justify-center gap-6 mt-8">
+                            <img src="/images/maskgroup3.png" class="w-[200px] h-auto" alt="Client">
+                            <img src="/images/image8.png" class="w-[200px] h-auto" alt="Client">
+                            <img src="/images/clients56.png" class="w-[200px] h-auto" alt="Client">
+                            <img src="/images/clients11.png" class="w-[200px] h-auto" alt="Client">
+                            <img src="/images/clients11.png" class="w-[200px] h-auto" alt="Client">
+                        </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted } from 'vue'
+
+onMounted(() => {
+    // You can add any code that needs to run after component is mounted
+})
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/animate/animate.min.css";
+
+.aboutimgBg {
+    position: relative;
+}
+
+.container {
+    max-width: 1310px;
+}
+
+.clientTit h2::after {
+    content: '';
+    margin: 0 auto;
+    width: 300px;
+    height: 28px;
+    background: #A8CBFF;
+    display: block;
+    margin-top: -30px;
+}
+
+.clientBox1 h3 {
+    font-weight: 500;
+    text-align: center;
+    font-size: 24px;
+    color: #606060;
+    line-height: 31px;
+}
+
+@media (max-width: 768px) {
+    .clientimg {
+        flex-direction: column;
+        align-items: center;
+    }
+    
+    .clientimg img {
+        margin-bottom: 20px;
+    }
+}
+.clientBg1imgt h3::after {
+    content: '';
+    margin-top: -20px;
+    width: 250px;
+    height: 20px;
+    background: #A8CBFF;
+    display: block;
+    margin-left: -4px;
+}
+</style>
diff --git a/pages/index_service.vue b/pages/index_service.vue
new file mode 100644
index 0000000..c7410b9
--- /dev/null
+++ b/pages/index_service.vue
@@ -0,0 +1,186 @@
+<template>
+    <div class="bg-white">
+        <!-- Banner section with background image -->
+        <div class="aboutimgBg" :style="{
+            backgroundImage: `url(/images/servicegroup.png)`,
+            backgroundSize: 'cover',
+            height: '600px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+        }">
+            <div class="banDes">
+                <div class="serveTit text-center">
+                    <h2 class="text-[50px] font-bold animated fadeInLeft">{{ $t('servers_b1') }}</h2>
+                </div>
+            </div>
+        </div>
+
+        <!-- Service content section -->
+        <div class="servicesBg py-12 relative">
+            <div class="container mx-auto px-4">
+                <div class="serveBox1">
+                    <h3 class="animated fadeInUp" style="margin-top: -120px; line-height: 31px;">{{ $t('servers_b2') }}</h3>
+                </div>
+            </div>
+        </div>
+
+        <!-- Service boxes section -->
+        <div class="servicesBg py-12 mt-[100px]">
+            <div class="container mx-auto px-4">
+                <!-- Service box 1 -->
+                <div class="serveBox2">
+                    <img class="serveimg1 w-[150px] h-[150px] object-cover mx-auto mb-4" src="/images/service180.png">
+                    <h3 class="animated fadeInUp text-3xl font-bold text-center">
+                        {{ $t('servers_b3') }}
+                    </h3>
+                    <h4 class="animated fadeInUp text-xl text-[#606060] text-center mt-4">
+                        {{ $t('servers_b4') }}
+                    </h4>
+                </div>
+
+                <!-- Service box 2 -->
+                <div class="serveBox2">
+                    <img class="serveimg1 w-[150px] h-[150px] object-cover mx-auto mb-4" src="/images/service181.png">
+                    <h3 class="animated fadeInUp text-3xl font-bold text-center">
+                        {{ $t('servers_b5') }}
+                    </h3>
+                    <h4 class="animated fadeInUp text-xl text-[#606060] text-center mt-4">
+                        {{ $t('servers_b6') }}
+                    </h4>
+                </div>
+
+                <!-- Service box 3 -->
+                <div class="serveBox2">
+                    <img class="serveimg1 w-[150px] h-[150px] object-cover mx-auto mb-4" src="/images/service182.png">
+                    <h3 class="animated fadeInUp text-3xl font-bold text-center">
+                        {{ $t('servers_b7') }}
+                    </h3>
+                    <h4 class="animated fadeInUp text-xl text-[#606060] text-center mt-4">
+                        {{ $t('servers_b8') }}
+                    </h4>
+                </div>
+
+                <!-- Service box 4 -->
+                <div class="serveBox2">
+                    <img class="serveimg1 w-[150px] h-[150px] object-cover mx-auto mb-4" src="/images/service187.png">
+                    <h3 class="animated fadeInUp text-3xl font-bold text-center">
+                        {{ $t('servers_b9') }}
+                    </h3>
+                    <h4 class="animated fadeInUp text-xl text-[#606060] text-center mt-4">
+                        {{ $t('servers_b10') }}
+                    </h4>
+                </div>
+
+                <!-- Service box 5 -->
+                <div class="serveBox2">
+                    <img class="serveimg1 w-[150px] h-[150px] object-cover mx-auto mb-4" src="/images/service204.png">
+                    <h3 class="animated fadeInUp text-3xl font-bold text-center">
+                        {{ $t('servers_b11') }}
+                    </h3>
+                    <h4 class="animated fadeInUp text-xl text-[#606060] text-center mt-4">
+                        {{ $t('servers_b12') }}
+                    </h4>
+                </div>
+
+                <!-- Service box 6 -->
+                <div class="serveBox2">
+                    <img class="serveimg1 w-[150px] h-[150px] object-cover mx-auto mb-4" src="/images/service188.png">
+                    <h3 class="animated fadeInUp text-3xl font-bold text-center">
+                        {{ $t('servers_b13') }}
+                    </h3>
+                    <h4 class="animated fadeInUp text-xl text-[#606060] text-center mt-4">
+                        {{ $t('servers_b14') }}
+                    </h4>
+                </div>
+            </div>
+        </div>
+
+        <!-- Contact section with background image -->
+        <div class="servicesBg2 py-16 text-center" :style="{
+            backgroundImage: `url(/images/serve4.png)`,
+            backgroundSize: 'cover',
+            backgroundPosition: 'center center',
+            height: '600px',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center'
+        }">
+            <div class="servicesTit text-center container mx-auto px-4">
+                <h2 class="animated fadeInLeft text-3xl font-bold mb-4">{{ $t('servers_b15') }}</h2>
+                <h3 class="animated fadeInLeft text-2xl mb-4">{{ $t('servers_b16') }}</h3>
+                <h4 class="animated fadeInLeft">
+                    <NuxtLink to="/contact" class="text-[#0c1923]">{{ $t('index_contact') }}</NuxtLink>
+                </h4>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted } from 'vue'
+
+onMounted(() => {
+    // 可以在这里添加任何需要在组件挂载后执行的代码
+})
+</script>
+
+<style lang="scss" scoped>
+@import "@/assets/animate/animate.min.css";
+
+.aboutimgBg,
+.servicesBg2 {
+    position: relative;
+}
+
+.container {
+    max-width: 1310px;
+}
+
+.serveTit h2::after {
+    content: '';
+    margin: 0 auto;
+    width: 300px;
+    height: 28px;
+    background: #A8CBFF;
+    display: block;
+    margin-top: -30px;
+}
+
+.serveBox1 h3 {
+    font-weight: 500;
+    text-align: center;
+    font-size: 24px;
+    color: #606060;
+    line-height: 31px;
+}
+
+.serveBox2 {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 100px;
+}
+.servicesTit h2::after {
+    content: '';
+    margin: 0 auto;
+    margin-top: -14px;
+    width: 236px;
+    height: 20px;
+    background: #A8CBFF;
+    display: block;
+}
+.servicesTit h4 {
+    font-weight: 500;
+    font-size: 24px;
+    color: #000000;
+    width: 209px;
+    height: 56px;
+    line-height: 56px;
+    margin: 0 auto;
+    display: block;
+    margin-top: 44px;
+    border: 1px solid #000000;
+    border-radius: 28px 28px 28px 28px;
+}
+</style>