naweigete-web/pages/index_service.vue

<template>
    <div class="bg-white">
        <!-- Banner section with background image -->
        <div class="aboutimgBg h-[300px] md:h-[600px]" :style="{
            backgroundImage: `url(${bgImage4})`,
            backgroundSize: 'cover',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center'
        }">
            <div class="banDes">
                <div class="serveTit text-center">
                    <h2 class="text-3xl md:text-[50px] font-bold animated fadeInLeft">{{ $t('servers_b1') }}</h2>
                </div>
            </div>
        </div>

        <!-- Service content section -->
        <div class="servicesBg py-6 md:py-12 relative">
            <div class="container mx-auto px-4">
                <div class="serveBox1">
                    <h3 class="animated fadeInUp text-lg md:text-2xl px-4" :style="{marginTop: '-60px'}">{{ $t('servers_b2') }}</h3>
                </div>
            </div>
        </div>

        <!-- Service boxes section -->
        <div class="servicesBg py-8 md:py-12 mt-8 md:mt-[100px]">
            <div class="container mx-auto px-4">
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 md:gap-12">
                    <!-- Service box 1 -->
                    <div class="serveBox2 mb-10 md:mb-[100px]">
                        <img class="serveimg1 w-[120px] h-[120px] md:w-[150px] md:h-[150px] object-cover mx-auto mb-4" src="/images/service180.png">
                        <h3 class="animated fadeInUp text-xl md:text-3xl font-bold text-center">
                            {{ $t('servers_b3') }}
                        </h3>
                        <h4 class="animated fadeInUp text-base md:text-xl text-[#606060] text-center mt-3 md:mt-4 px-4">
                            {{ $t('servers_b4') }}
                        </h4>
                    </div>

                    <!-- Service box 2 -->
                    <div class="serveBox2 mb-10 md:mb-[100px]">
                        <img class="serveimg1 w-[120px] h-[120px] md:w-[150px] md:h-[150px] object-cover mx-auto mb-4" src="/images/service181.png">
                        <h3 class="animated fadeInUp text-xl md:text-3xl font-bold text-center">
                            {{ $t('servers_b5') }}
                        </h3>
                        <h4 class="animated fadeInUp text-base md:text-xl text-[#606060] text-center mt-3 md:mt-4 px-4">
                            {{ $t('servers_b6') }}
                        </h4>
                    </div>

                    <!-- Service box 3 -->
                    <div class="serveBox2 mb-10 md:mb-[100px]">
                        <img class="serveimg1 w-[120px] h-[120px] md:w-[150px] md:h-[150px] object-cover mx-auto mb-4" src="/images/service182.png">
                        <h3 class="animated fadeInUp text-xl md:text-3xl font-bold text-center">
                            {{ $t('servers_b7') }}
                        </h3>
                        <h4 class="animated fadeInUp text-base md:text-xl text-[#606060] text-center mt-3 md:mt-4 px-4">
                            {{ $t('servers_b8') }}
                        </h4>
                    </div>

                    <!-- Service box 4 -->
                    <div class="serveBox2 mb-10 md:mb-[100px]">
                        <img class="serveimg1 w-[120px] h-[120px] md:w-[150px] md:h-[150px] object-cover mx-auto mb-4" src="/images/service187.png">
                        <h3 class="animated fadeInUp text-xl md:text-3xl font-bold text-center">
                            {{ $t('servers_b9') }}
                        </h3>
                        <h4 class="animated fadeInUp text-base md:text-xl text-[#606060] text-center mt-3 md:mt-4 px-4">
                            {{ $t('servers_b10') }}
                        </h4>
                    </div>

                    <!-- Service box 5 -->
                    <div class="serveBox2 mb-10 md:mb-[100px]">
                        <img class="serveimg1 w-[120px] h-[120px] md:w-[150px] md:h-[150px] object-cover mx-auto mb-4" src="/images/service204.png">
                        <h3 class="animated fadeInUp text-xl md:text-3xl font-bold text-center">
                            {{ $t('servers_b11') }}
                        </h3>
                        <h4 class="animated fadeInUp text-base md:text-xl text-[#606060] text-center mt-3 md:mt-4 px-4">
                            {{ $t('servers_b12') }}
                        </h4>
                    </div>

                    <!-- Service box 6 -->
                    <div class="serveBox2 mb-10 md:mb-[100px]">
                        <img class="serveimg1 w-[120px] h-[120px] md:w-[150px] md:h-[150px] object-cover mx-auto mb-4" src="/images/service188.png">
                        <h3 class="animated fadeInUp text-xl md:text-3xl font-bold text-center">
                            {{ $t('servers_b13') }}
                        </h3>
                        <h4 class="animated fadeInUp text-base md:text-xl text-[#606060] text-center mt-3 md:mt-4 px-4">
                            {{ $t('servers_b14') }}
                        </h4>
                    </div>
                </div>
            </div>
        </div>

        <!-- Contact section with background image -->
        <div class="servicesBg2 py-10 md:py-16 text-center h-[350px] md:h-[600px]" :style="{
             backgroundImage: `url(${bgImage5})`,
            backgroundSize: 'cover',
            backgroundPosition: 'center center',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center'
        }">
            <div class="servicesTit text-center container mx-auto px-4">
                <h2 class="animated fadeInLeft text-xl md:text-3xl font-bold mb-3 md:mb-4">{{ $t('servers_b15') }}</h2>
                <h3 class="animated fadeInLeft text-lg md:text-2xl mb-3 md:mb-4">{{ $t('servers_b16') }}</h3>
                <h4 class="animated fadeInLeft">
                    <NuxtLink to="/index_contact/" class="text-[#0c1923] text-base md:text-2xl">{{ $t('index_contact') }}</NuxtLink>
                </h4>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue'

// 添加第四个背景图片
import bgImage4 from '../public/images/servicegroup.png'

import bgImage5 from '../public/images/serve4.png'

onMounted(() => {
    // 可以在这里添加任何需要在组件挂载后执行的代码
})
</script>

<style lang="scss" scoped>
@import "@/assets/animate/animate.min.css";

.aboutimgBg,
.servicesBg2 {
    position: relative;
}

.container {
    max-width: 100%;
    @media (min-width: 768px) {
        max-width: 1310px;
    }
}

.serveTit h2::after {
    content: '';
    margin: 0 auto;
    width: 180px;
    height: 18px;
    @media (min-width: 768px) {
        width: 300px;
        height: 28px;
        margin-top: -10px;
    }
    background: #A8CBFF;
    display: block;
    margin-top: -20px;
}

.serveBox1 h3 {
    font-weight: 500;
    text-align: center;
    font-size: 18px;
    @media (min-width: 768px) {
        font-size: 24px;
        line-height: 31px;
    }
    color: #606060;
    line-height: 1.5;
}

.serveBox2 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.servicesTit h2::after {
    content: '';
    margin: 0 auto;
    margin-top: -10px;
    width: 120px;
    height: 14px;
    @media (min-width: 768px) {
        margin-top: -14px;
        width: 236px;
        height: 20px;
    }
    background: #A8CBFF;
    display: block;
}

.servicesTit h4 {
    font-weight: 500;
    font-size: 18px;
    @media (min-width: 768px) {
        font-size: 24px;
        width: 209px;
        height: 56px;
        line-height: 56px;
        margin-top: 44px;
    }
    color: #000000;
    width: 160px;
    height: 44px;
    line-height: 44px;
    margin: 0 auto;
    display: block;
    margin-top: 24px;
    border: 1px solid #000000;
    border-radius: 28px 28px 28px 28px;
}
</style>