naweigete-web/pages/index_service.vue

<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>