333
This commit is contained in:
parent
59a68745ca
commit
7d0dc5a374
3
app.vue
3
app.vue
@ -4,9 +4,6 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { APIs } from './service/apiList'
|
|
||||||
import type AxiosRequestError from './service/error'
|
|
||||||
import $api from './service/webRequest'
|
|
||||||
useSeoMeta({
|
useSeoMeta({
|
||||||
title: '我的神奇网站',
|
title: '我的神奇网站',
|
||||||
ogTitle: '我的神奇网站',
|
ogTitle: '我的神奇网站',
|
||||||
|
|||||||
@ -25,27 +25,27 @@
|
|||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
</li>
|
</li>
|
||||||
<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') }}
|
{{ $t('index_about') }}
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
</li>
|
</li>
|
||||||
<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') }}
|
{{ $t('index_services') }}
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
</li>
|
</li>
|
||||||
<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') }}
|
{{ $t('index_clients') }}
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
</li>
|
</li>
|
||||||
<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') }}
|
{{ $t('index_news') }}
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
</li>
|
</li>
|
||||||
<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') }}
|
{{ $t('index_contact') }}
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
</li>
|
</li>
|
||||||
@ -65,6 +65,7 @@ import { ref } from 'vue'
|
|||||||
import { useRoute } from 'vue-router'
|
import { useRoute } from 'vue-router'
|
||||||
|
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
|
console.log(route)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|||||||
@ -2,13 +2,13 @@ import { isUndef } from './is'
|
|||||||
|
|
||||||
// 正式环境
|
// 正式环境
|
||||||
export const PROD_ENV = {
|
export const PROD_ENV = {
|
||||||
SERVER_URL: 'https://xxx.com/api', // 服务地址
|
SERVER_URL: '/api/', // 服务地址
|
||||||
IS_DEV: 'false', // 是否是测试环境
|
IS_DEV: 'false', // 是否是测试环境
|
||||||
}
|
}
|
||||||
|
|
||||||
// 测试环境
|
// 测试环境
|
||||||
export const DEV_ENV = {
|
export const DEV_ENV = {
|
||||||
SERVER_URL: 'https://xxx-test.com/api',
|
SERVER_URL: '/api/',
|
||||||
IS_DEV: 'true',
|
IS_DEV: 'true',
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -4,10 +4,6 @@ import { defineNuxtConfig } from 'nuxt/config'
|
|||||||
export default defineNuxtConfig({
|
export default defineNuxtConfig({
|
||||||
ssr: false,
|
ssr: false,
|
||||||
|
|
||||||
routeRules: {
|
|
||||||
'/**': { ssr: false }
|
|
||||||
},
|
|
||||||
|
|
||||||
css: [
|
css: [
|
||||||
'swiper/css',
|
'swiper/css',
|
||||||
'swiper/css/mousewheel',
|
'swiper/css/mousewheel',
|
||||||
@ -21,7 +17,17 @@ export default defineNuxtConfig({
|
|||||||
tailwindcss: {},
|
tailwindcss: {},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
modules: ['@pinia/nuxt', 'nuxt-icons'],
|
modules: ['@pinia/nuxt', 'nuxt-icons'],
|
||||||
compatibilityDate: '2025-03-12',
|
compatibilityDate: '2025-03-12',
|
||||||
|
vite: {
|
||||||
|
server: {
|
||||||
|
proxy: {
|
||||||
|
'/api': {
|
||||||
|
target: "http://naweigetetest2.hschool.com.cn/",
|
||||||
|
changeOrigin: true,
|
||||||
|
rewrite: (path) => path.replace(/^\/api/, ''),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
})
|
})
|
||||||
@ -278,7 +278,7 @@
|
|||||||
<swiper-slide class="swiper-slide-a">
|
<swiper-slide class="swiper-slide-a">
|
||||||
<div class="flex justify-center items-center w-full">
|
<div class="flex justify-center items-center w-full">
|
||||||
<div class="w-[40%] text-right">
|
<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>
|
||||||
<div class="w-[44%] text-left pl-5">
|
<div class="w-[44%] text-left pl-5">
|
||||||
<h2 class="text-2xl font-bold">{{ $t('index_n1') }}</h2>
|
<h2 class="text-2xl font-bold">{{ $t('index_n1') }}</h2>
|
||||||
@ -297,14 +297,14 @@
|
|||||||
<!-- 这里可以使用v-for循环渲染新闻列表 -->
|
<!-- 这里可以使用v-for循环渲染新闻列表 -->
|
||||||
<div class="swiper-slide">
|
<div class="swiper-slide">
|
||||||
<div class="text-center">
|
<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]">
|
<a :href="item.url" target="_blank" class="text-[#0c1923]">
|
||||||
{{ item.title }}
|
{{ item.title }}
|
||||||
</a>
|
</a>
|
||||||
</h3>
|
</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]">
|
<a :href="item.url" target="_blank" class="text-[#0c1923]">
|
||||||
{{ item.description }}
|
{{ item.synopsis }}
|
||||||
</a>
|
</a>
|
||||||
</h5>
|
</h5>
|
||||||
</div>
|
</div>
|
||||||
@ -313,7 +313,7 @@
|
|||||||
</swiper>
|
</swiper>
|
||||||
<img id="swipen_prev" src="/images/group9-1.png" class="w-[30px] cursor-pointer" @click="prevNews">
|
<img id="swipen_prev" src="/images/group9-1.png" class="w-[30px] cursor-pointer" @click="prevNews">
|
||||||
</div>
|
</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>
|
</div>
|
||||||
<div class="absolute right-[10px]">
|
<div class="absolute right-[10px]">
|
||||||
@ -347,7 +347,25 @@ import { Mousewheel, Navigation } from 'swiper/modules'
|
|||||||
import 'swiper/css/mousewheel'
|
import 'swiper/css/mousewheel'
|
||||||
import 'swiper/css/navigation'
|
import 'swiper/css/navigation'
|
||||||
import * as swiperAni from '@/assets/animate/animate.js'
|
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'
|
const bgImage = 'images/Group157.png'
|
||||||
|
|
||||||
@ -360,34 +378,6 @@ let swiperInstance: any = null
|
|||||||
// 新闻轮播实例
|
// 新闻轮播实例
|
||||||
let newsSwiper: 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 = () => {
|
const nextNews = () => {
|
||||||
@ -639,6 +629,6 @@ const scrollToTop = () => {
|
|||||||
|
|
||||||
.news_padd {
|
.news_padd {
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
height: 80px;
|
height: 110px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
175
pages/index_about.vue
Normal file
175
pages/index_about.vue
Normal file
@ -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>
|
||||||
108
pages/index_clients.vue
Normal file
108
pages/index_clients.vue
Normal file
@ -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>
|
||||||
186
pages/index_service.vue
Normal file
186
pages/index_service.vue
Normal file
@ -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>
|
||||||
Loading…
x
Reference in New Issue
Block a user