111
This commit is contained in:
parent
7d0dc5a374
commit
b14279cb68
8
app.vue
8
app.vue
@ -5,10 +5,10 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
useSeoMeta({
|
||||
title: '我的神奇网站',
|
||||
ogTitle: '我的神奇网站',
|
||||
description: '这是我的神奇网站，让我给你介绍一切。',
|
||||
ogDescription: '这是我的神奇网站，让我给你介绍一切。',
|
||||
title: '河南纳威格特商贸有限公司',
|
||||
ogTitle: '河南纳威格特商贸有限公司',
|
||||
description: '河南纳威格特商贸有限公司',
|
||||
ogDescription: '河南纳威格特商贸有限公司',
|
||||
ogImage: 'https://example.com/image.png',
|
||||
twitterCard: 'summary_large_image',
|
||||
})
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
<template>
|
||||
<header class="w-full bg-white text-white py-6 absolute top-0 left-0 " style="height: 100px;z-index: 2;">
|
||||
<header class="w-full bg-white text-white pt-6 absolute top-0 left-0 " style="height: 100px;z-index: 100;">
|
||||
<nav class="container mx-auto px-4">
|
||||
<div class="flex justify-between items-center">
|
||||
<!-- Logo section -->
|
||||
<div class="text-center">
|
||||
<div class="nwTitle">河南纳威格特商贸有限公司</div>
|
||||
<div class="nwTitle1">Henan Navigate Trading Co., Ltd</div>
|
||||
<div class="nwTitle text-2xl md:text-[26px]">河南纳威格特商贸有限公司</div>
|
||||
<div class="nwTitle1 text-xs md:text-sm">Henan Navigate Trading Co., Ltd</div>
|
||||
</div>
|
||||
<!-- Mobile menu button -->
|
||||
<div class="hdRig md:hidden">
|
||||
<button class="hdBtn" @click="toggleMenu">
|
||||
<span class="block w-6 h-0.5 bg-gray-800 mb-1.5"></span>
|
||||
<span class="block w-6 h-0.5 bg-gray-800 mb-1.5"></span>
|
||||
<span class="block w-6 h-0.5 bg-gray-800"></span>
|
||||
<span class="block w-6 h-0.5 bg-gray-800 mb-1.5" :class="{ 'transform rotate-45 translate-y-2': isMenuOpen }"></span>
|
||||
<span class="block w-6 h-0.5 bg-gray-800 mb-1.5" :class="{ 'opacity-0': isMenuOpen }"></span>
|
||||
<span class="block w-6 h-0.5 bg-gray-800" :class="{ 'transform -rotate-45 -translate-y-2': isMenuOpen }"></span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -56,29 +56,85 @@
|
||||
<span @click="$i18n.locale = 'en'" class="cursor-pointer">English</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu -->
|
||||
|
||||
</nav>
|
||||
<div v-show="isMenuOpen" class="mobile-menu md:hidden mt-4 px-2">
|
||||
<ul class="flex flex-col">
|
||||
<li class="py-2">
|
||||
<NuxtLink to="/" :class="{ 'active': route.path === '/' }" @click="closeMenu">
|
||||
{{ $t('home') }}
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<NuxtLink to="index_about" :class="{ 'active': route.path === '/index_about' }" @click="closeMenu">
|
||||
{{ $t('index_about') }}
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<NuxtLink to="index_service" :class="{ 'active': route.path === '/index_service' }" @click="closeMenu">
|
||||
{{ $t('index_services') }}
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<NuxtLink to="index_clients" :class="{ 'active': route.path === '/index_clients' }" @click="closeMenu">
|
||||
{{ $t('index_clients') }}
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<NuxtLink to="index_news" :class="{ 'active': route.path === '/index_news' }" @click="closeMenu">
|
||||
{{ $t('index_news') }}
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<NuxtLink to="index_contact" :class="{ 'active': route.path === '/index_contact' }" @click="closeMenu">
|
||||
{{ $t('index_contact') }}
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li class="py-3 flex space-x-4">
|
||||
<span @click="changeLanguage('zh')" class="cursor-pointer">中文版</span>
|
||||
<span @click="changeLanguage('en')" class="cursor-pointer">English</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const route = useRoute()
|
||||
const isMenuOpen = ref(false)
|
||||
const { locale } = useI18n()
|
||||
|
||||
const toggleMenu = () => {
|
||||
isMenuOpen.value = !isMenuOpen.value
|
||||
}
|
||||
|
||||
const closeMenu = () => {
|
||||
isMenuOpen.value = false
|
||||
}
|
||||
|
||||
const changeLanguage = (lang: string) => {
|
||||
locale.value = lang
|
||||
closeMenu()
|
||||
}
|
||||
|
||||
console.log(route)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.nwTitle {
|
||||
color: #1C1C1C;
|
||||
font-size: 26px;
|
||||
line-height: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.nwTitle1 {
|
||||
color: #1C1C1C;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
letter-spacing: 2.7px;
|
||||
}
|
||||
@ -144,4 +200,53 @@ console.log(route)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-menu {
|
||||
background-color: white;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
animation: fadeIn 0.3s ease;
|
||||
|
||||
li {
|
||||
a {
|
||||
display: block;
|
||||
padding: 0 10px;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: #9C9C9C;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&.active, &:hover {
|
||||
color: #214ADB;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
color: #1C1C1C;
|
||||
font-weight: bold;
|
||||
|
||||
&:hover {
|
||||
color: #214ADB;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
header {
|
||||
height: auto !important;
|
||||
min-height: 80px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,13 +0,0 @@
|
||||
<template>
|
||||
<div class="box">hell123o</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { useStore } from '@/store/index'
|
||||
|
||||
const store = useStore()
|
||||
function changeName(): void {
|
||||
store.name = 'new Name'
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
521
pages/index.vue
521
pages/index.vue
@ -7,47 +7,53 @@
|
||||
backgroundImage: `url(${bgImage})`,
|
||||
backgroundPosition: 'center center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundSize: '100% 100%',
|
||||
backgroundSize: 'cover',
|
||||
}">
|
||||
<div class="ani text-xl font-light tracking-[0.3em]" swiper-animate-effect="fadeInUp"
|
||||
<div class="ani md:text-xl text-base font-light tracking-[0.3em]" swiper-animate-effect="fadeInUp"
|
||||
swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
|
||||
{{ $t('index_name') }}
|
||||
</div>
|
||||
<div class="ani w-[45%] h-px bg-white my-5" swiper-animate-effect="fadeInUp"
|
||||
<div class="ani w-[80%] md:w-[45%] h-px bg-white my-5" swiper-animate-effect="fadeInUp"
|
||||
swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
|
||||
</div>
|
||||
<div class="text-3xl font-semibold ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s"
|
||||
swiper-animate-delay="0.4s">{{ $t('index_main') }}</div>
|
||||
<div class="w-[45%] h-px bg-white my-5 ani" swiper-animate-effect="fadeInUp"
|
||||
<div class="md:text-3xl text-xl font-semibold ani" swiper-animate-effect="fadeInUp"
|
||||
swiper-animate-duration="0.5s" swiper-animate-delay="0.4s">{{ $t('index_main') }}</div>
|
||||
<div class="w-[80%] md:w-[45%] h-px bg-white my-5 ani" swiper-animate-effect="fadeInUp"
|
||||
swiper-animate-duration="0.5s" swiper-animate-delay="0.3s"></div>
|
||||
<div class="text-lg font-light ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s"
|
||||
swiper-animate-delay="0.3s">{{ $t('index_get_to') }}</div>
|
||||
<div class="array" style=" margin-top: 50px;">
|
||||
<img style="width: 50px;height: 50px;" src="/images/group9.png">
|
||||
<div class="md:text-lg text-base font-light ani" swiper-animate-effect="fadeInUp"
|
||||
swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">{{ $t('index_get_to') }}</div>
|
||||
<div class="array" style="margin-top: 30px; margin-bottom: 20px;">
|
||||
<img class="w-[40px] h-[40px] md:w-[50px] md:h-[50px]" src="/images/group9.png">
|
||||
</div>
|
||||
<!-- 社交图标 -->
|
||||
<div class="absolute bottom-[42px] w-full ani" swiper-animate-effect="fadeInUp"
|
||||
<div class="absolute bottom-[20px] md:bottom-[42px] w-full ani" swiper-animate-effect="fadeInUp"
|
||||
swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
|
||||
<div class="flex justify-center w-full">
|
||||
<img @click="shareToInstagram" src="/images/group11.png"
|
||||
class="w-[30px] h-[30px] cursor-pointer">
|
||||
<span class="mx-[17px] border-r-2 border-white h-[30px] mb-[-12px]"></span>
|
||||
<img @click="shareToYoutube" src="/images/group14.png" class="w-[30px] h-[30px] cursor-pointer">
|
||||
<span class="mx-[17px] border-r-2 border-white h-[30px] mb-[-12px]"></span>
|
||||
class="w-[25px] h-[25px] md:w-[30px] md:h-[30px] cursor-pointer">
|
||||
<span
|
||||
class="mx-[10px] md:mx-[17px] border-r-2 border-white h-[25px] md:h-[30px] mb-[-12px]"></span>
|
||||
<img @click="shareToYoutube" src="/images/group14.png"
|
||||
class="w-[25px] h-[25px] md:w-[30px] md:h-[30px] cursor-pointer">
|
||||
<span
|
||||
class="mx-[10px] md:mx-[17px] border-r-2 border-white h-[25px] md:h-[30px] mb-[-12px]"></span>
|
||||
<img @click="shareToInstagram" src="/images/group13.png"
|
||||
class="w-[30px] h-[30px] cursor-pointer">
|
||||
<span class="mx-[17px] border-r-2 border-white h-[30px] mb-[-12px]"></span>
|
||||
<img @click="shareToYoutube" src="/images/group12.png" class="w-[30px] h-[30px] cursor-pointer">
|
||||
class="w-[25px] h-[25px] md:w-[30px] md:h-[30px] cursor-pointer">
|
||||
<span
|
||||
class="mx-[10px] md:mx-[17px] border-r-2 border-white h-[25px] md:h-[30px] mb-[-12px]"></span>
|
||||
<img @click="shareToYoutube" src="/images/group12.png"
|
||||
class="w-[25px] h-[25px] md:w-[30px] md:h-[30px] cursor-pointer">
|
||||
</div>
|
||||
|
||||
<!-- 导航链接 -->
|
||||
<div class="w-[45%] h-[2px] bg-white mx-auto my-5"></div>
|
||||
<div class="flex w-1/2 justify-around mx-auto">
|
||||
<NuxtLink to="/about" class="text-white">{{ $t('index_about') }}</NuxtLink>
|
||||
<NuxtLink to="/services" class="text-white">{{ $t('index_services') }}</NuxtLink>
|
||||
<NuxtLink to="/clients" class="text-white">{{ $t('index_clients') }}</NuxtLink>
|
||||
<NuxtLink to="/news" class="text-white">{{ $t('index_news') }}</NuxtLink>
|
||||
<NuxtLink to="/contact" class="text-white">{{ $t('index_contact') }}</NuxtLink>
|
||||
<div class="w-[80%] md:w-[45%] h-[2px] bg-white mx-auto my-3 md:my-5"></div>
|
||||
<div
|
||||
class="flex flex-wrap w-full md:w-1/2 justify-around px-2 md:px-0 mx-auto text-xs md:text-base">
|
||||
<NuxtLink to="/about" class="text-white mb-1 md:mb-0">{{ $t('index_about') }}</NuxtLink>
|
||||
<NuxtLink to="/services" class="text-white mb-1 md:mb-0">{{ $t('index_services') }}</NuxtLink>
|
||||
<NuxtLink to="/clients" class="text-white mb-1 md:mb-0">{{ $t('index_clients') }}</NuxtLink>
|
||||
<NuxtLink to="/news" class="text-white mb-1 md:mb-0">{{ $t('index_news') }}</NuxtLink>
|
||||
<NuxtLink to="/contact" class="text-white mb-1 md:mb-0">{{ $t('index_contact') }}</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
@ -57,119 +63,138 @@
|
||||
backgroundImage: `url(${bgImage2})`,
|
||||
backgroundPosition: 'center center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundSize: '100% 100%',
|
||||
backgroundSize: 'cover',
|
||||
height: '100%'
|
||||
}">
|
||||
<div class="px-[150px]">
|
||||
<div class="flex items-center text-left">
|
||||
<div class="w-1/2">
|
||||
<h2 class="text-3xl t1 inline-block ani" swiper-animate-effect="fadeInUp"
|
||||
<div class="px-4 md:px-[150px]">
|
||||
<div class="flex flex-col md:flex-row items-center text-left">
|
||||
<div class="w-full md:w-1/2 mb-5 md:mb-0">
|
||||
<h2 class="text-xl md:text-3xl t1 inline-block ani" swiper-animate-effect="fadeInUp"
|
||||
swiper-animate-duration="0.5s" swiper-animate-delay="0.1s">{{ $t('index_m1') }}</h2>
|
||||
<h4 class="text-lg mt-10 leading-[35px] ani" swiper-animate-effect="fadeInUp"
|
||||
swiper-animate-duration="0.5s" swiper-animate-delay="0.1s">{{ $t('index_m2') }}</h4>
|
||||
<div class="w-[18%] h-[2px] bg-white my-5 ani" swiper-animate-effect="fadeInUp"
|
||||
swiper-animate-duration="0.5s" swiper-animate-delay="0.1s"></div>
|
||||
<h4 class="text-base md:text-lg mt-5 md:mt-10 leading-[25px] md:leading-[35px] ani"
|
||||
swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s"
|
||||
swiper-animate-delay="0.1s">{{ $t('index_m2') }}</h4>
|
||||
<div class="w-[30%] md:w-[18%] h-[2px] bg-white my-3 md:my-5 ani"
|
||||
swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s"
|
||||
swiper-animate-delay="0.1s"></div>
|
||||
<div class="flex items-center ani" swiper-animate-effect="fadeInUp"
|
||||
swiper-animate-duration="0.5s" swiper-animate-delay="0.1s">
|
||||
<NuxtLink to="/content" class="text-white">{{ $t('index_m3') }}</NuxtLink>
|
||||
<img src="/images/group7.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-1/2 text-center ani" swiper-animate-effect="fadeInUp"
|
||||
<div class="w-full md:w-1/2 text-center ani" swiper-animate-effect="fadeInUp"
|
||||
swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
|
||||
<img src="/images/maskgroup.png" class="w-[400px] mx-auto">
|
||||
<img src="/images/maskgroup.png" class="w-[250px] md:w-[400px] mx-auto">
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full h-px bg-white my-10"></div>
|
||||
<div class="w-full h-px bg-white my-5 md:my-10"></div>
|
||||
</div>
|
||||
|
||||
<div class="flex w-full justify-center">
|
||||
<div class="w-[205px] ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s"
|
||||
swiper-animate-delay="0.1s">
|
||||
<h4 class="t2 text-xl font-semibold">{{ $t('index_m4') }}</h4>
|
||||
<div class="mt-[15px] leading-[26px] tracking-[1px]">{{ $t('index_m4_1') }}</div>
|
||||
<div class="flex flex-col md:flex-row w-full justify-center px-4 md:px-0">
|
||||
<div class="w-full md:w-[205px] mb-5 md:mb-0 ani" swiper-animate-effect="zoomIn"
|
||||
swiper-animate-duration="0.5s" swiper-animate-delay="0.1s">
|
||||
<h4 class="t2 text-lg md:text-xl font-semibold">{{ $t('index_m4') }}</h4>
|
||||
<div class="mt-[10px] md:mt-[15px] leading-[22px] md:leading-[26px] tracking-[1px]">{{
|
||||
$t('index_m4_1') }}</div>
|
||||
</div>
|
||||
<span class="mx-[60px] -mb-3 border-r-2 border-white h-[145px] inline-block ani"
|
||||
<span class="hidden md:inline-block mx-[60px] -mb-3 border-r-2 border-white h-[145px] ani"
|
||||
swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s"
|
||||
swiper-animate-delay="0.1s"></span>
|
||||
<div class="w-[205px] ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s"
|
||||
swiper-animate-delay="0.1s">
|
||||
<h4 class="t2 text-xl font-semibold">{{ $t('index_m5') }}</h4>
|
||||
<div class="mt-[15px] leading-[26px] tracking-[1px]">{{ $t('index_m5_1') }}</div>
|
||||
<div class="w-full md:w-[205px] mb-5 md:mb-0 ani" swiper-animate-effect="zoomIn"
|
||||
swiper-animate-duration="0.5s" swiper-animate-delay="0.1s">
|
||||
<h4 class="t2 text-lg md:text-xl font-semibold">{{ $t('index_m5') }}</h4>
|
||||
<div class="mt-[10px] md:mt-[15px] leading-[22px] md:leading-[26px] tracking-[1px]">{{
|
||||
$t('index_m5_1') }}</div>
|
||||
</div>
|
||||
<span class="mx-[60px] -mb-3 border-r-2 border-white h-[145px] inline-block ani"
|
||||
<span class="hidden md:inline-block mx-[60px] -mb-3 border-r-2 border-white h-[145px] ani"
|
||||
swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s"
|
||||
swiper-animate-delay="0.1s"></span>
|
||||
<div class="w-[205px] ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s"
|
||||
<div class="w-full md:w-[205px] ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s"
|
||||
swiper-animate-delay="0.1s">
|
||||
<h4 class="t2 text-xl font-semibold">{{ $t('index_m6') }}</h4>
|
||||
<div class="mt-[15px] leading-[26px] tracking-[1px]">{{ $t('index_m6_1') }}</div>
|
||||
<h4 class="t2 text-lg md:text-xl font-semibold">{{ $t('index_m6') }}</h4>
|
||||
<div class="mt-[10px] md:mt-[15px] leading-[22px] md:leading-[26px] tracking-[1px]">{{
|
||||
$t('index_m6_1') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="array absolute bottom-[50px]">
|
||||
<img class="w-[50px] h-[50px]" src="/images/group9.png" alt="">
|
||||
<img class="w-[40px] h-[40px] md:w-[50px] md:h-[50px]" src="/images/group9.png" alt="">
|
||||
</div>
|
||||
|
||||
<div class="absolute bottom-42 px-4 flex justify-between items-center right-2 ">
|
||||
<div class="float-left flex">
|
||||
<div v-if="!isMobile"
|
||||
class="absolute bottom-42 px-4 flex flex-col md:flex-row justify-between items-center right-2">
|
||||
<div class="float-left flex mb-3 md:mb-0">
|
||||
<img src="/images/group191.png" class="h-full mt-[10px]">
|
||||
<span class="ml-2 box2ybs1">{{ $t('index_m7') }}</span>
|
||||
<span class="box2ybs1">{{ $t('index_m7') }}</span>
|
||||
<span class="mx-4 box2ybs2"></span>
|
||||
</div>
|
||||
<div class="float-right text-center">
|
||||
<img @click="scrollToTop" src="/images/group97.png" class="w-[35px] h-[35px] cursor-pointer">
|
||||
<div class="w-[33px] h-[1px] bg-[#DEDEDE] mx-auto my-2"></div>
|
||||
<img @click="scrollToTop" src="/images/group97.png"
|
||||
class="w-[30px] h-[30px] md:w-[35px] md:h-[35px] cursor-pointer">
|
||||
<div class="w-[28px] md:w-[33px] h-[1px] bg-[#DEDEDE] mx-auto my-2"></div>
|
||||
<div class="mr-2 md:mr-0">
|
||||
<img @click="shareToInstagram" src="/images/group11.png"
|
||||
class="w-[35px] h-[35px] cursor-pointer">
|
||||
<div class="w-[33px] h-[1px] bg-[#DEDEDE] mx-auto my-2"></div>
|
||||
<img @click="shareToYoutube" src="/images/group14.png" class="w-[35px] h-[35px] cursor-pointer">
|
||||
<div class="w-[33px] h-[1px] bg-[#DEDEDE] mx-auto my-2"></div>
|
||||
<img @click="shareToFacebook" src="/images/group13.png"
|
||||
class="w-[35px] h-[35px] cursor-pointer">
|
||||
<div class="w-[33px] h-[1px] bg-[#DEDEDE] mx-auto my-2"></div>
|
||||
<img @click="shareToX" src="/images/group12.png" class="w-[35px] h-[35px] cursor-pointer">
|
||||
class="w-[30px] h-[30px] md:w-[35px] md:h-[35px] cursor-pointer">
|
||||
<div class="w-[28px] md:w-[33px] h-[1px] bg-[#DEDEDE] mx-auto my-2"></div>
|
||||
</div>
|
||||
<div class="mr-2 md:mr-0">
|
||||
<img @click="shareToYoutube" src="/images/group14.png"
|
||||
class="w-[30px] h-[30px] md:w-[35px] md:h-[35px] cursor-pointer">
|
||||
<div class="w-[28px] md:w-[33px] h-[1px] bg-[#DEDEDE] mx-auto my-2"></div>
|
||||
</div>
|
||||
<div class="mr-2 md:mr-0">
|
||||
<img @click="shareToFacebook" src="/images/group13.png"
|
||||
class="w-[30px] h-[30px] md:w-[35px] md:h-[35px] cursor-pointer">
|
||||
<div class="w-[28px] md:w-[33px] h-[1px] bg-[#DEDEDE] mx-auto my-2"></div>
|
||||
</div>
|
||||
<div>
|
||||
<img @click="shareToX" src="/images/group12.png"
|
||||
class="w-[30px] h-[30px] md:w-[35px] md:h-[35px] cursor-pointer">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</swiper-slide>
|
||||
|
||||
|
||||
|
||||
<!-- 第三个滑块 -->
|
||||
<swiper-slide class="swiper-slide-a" :style="{
|
||||
height: '100%'
|
||||
}">
|
||||
<h3 class="t3 text-2xl font-semibold ani" swiper-animate-effect="fadeInUp"
|
||||
<h3 class="t3 text-xl md:text-2xl font-semibold ani" swiper-animate-effect="fadeInUp"
|
||||
swiper-animate-duration="0.5s" swiper-animate-delay="0.1s">{{ $t('index_s1') }}</h3>
|
||||
<div class="w-1/2 mt-[30px] text-sm text-[#606060] text-center ani" swiper-animate-effect="fadeInUp"
|
||||
swiper-animate-duration="0.5s" swiper-animate-delay="0.1s">
|
||||
<div class="w-[90%] md:w-1/2 mt-[20px] md:mt-[30px] text-xs md:text-sm text-[#606060] text-center ani"
|
||||
swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.1s">
|
||||
{{ $t('index_s2') }}
|
||||
</div>
|
||||
<div class="px-[150px] py-5">
|
||||
<div class="flex">
|
||||
<div class="relative ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s"
|
||||
swiper-animate-delay="0.1s">
|
||||
<img src="/images/group160.png" class="w-[80%] mx-auto">
|
||||
<div class="absolute left-[65px] bottom-[20px] text-xl text-white">
|
||||
<div class="px-4 md:px-[150px] py-3 md:py-5">
|
||||
<div class="flex flex-wrap md:flex-row justify-center">
|
||||
<div class="relative w-1/2 md:w-1/3 mb-4 md:mb-0 ani" swiper-animate-effect="zoomIn"
|
||||
swiper-animate-duration="0.5s" swiper-animate-delay="0.1s">
|
||||
<img src="/images/group160.png" class="w-[90%] md:w-[80%] mx-auto">
|
||||
<div
|
||||
class="absolute left-[10%] md:left-[65px] bottom-[30px] md:bottom-[20px] text-xs md:text-xl text-white">
|
||||
{{ $t('index_s3') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s"
|
||||
swiper-animate-delay="0.1s">
|
||||
<img src="/images/group161.png" class="w-[80%] mx-auto">
|
||||
<div class="absolute left-[65px] bottom-[20px] text-xl text-white">
|
||||
<div class="relative w-1/2 md:w-1/3 mb-4 md:mb-0 ani" swiper-animate-effect="zoomIn"
|
||||
swiper-animate-duration="0.5s" swiper-animate-delay="0.1s">
|
||||
<img src="/images/group161.png" class="w-[90%] md:w-[80%] mx-auto">
|
||||
<div
|
||||
class="absolute left-[10%] md:left-[65px] bottom-[30px] md:bottom-[20px] text-xs md:text-xl text-white">
|
||||
{{ $t('index_s4') }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s"
|
||||
swiper-animate-delay="0.1s">
|
||||
<img src="/images/group162.png" class="w-[80%] mx-auto">
|
||||
<div class="absolute left-[65px] bottom-[20px] text-xl text-white">
|
||||
<div class="relative w-1/2 md:w-1/3 mb-4 md:mb-0 ani mx-auto" swiper-animate-effect="zoomIn"
|
||||
swiper-animate-duration="0.5s" swiper-animate-delay="0.1s">
|
||||
<img src="/images/group162.png" class="w-[90%] md:w-[80%] mx-auto">
|
||||
<div
|
||||
class="absolute left-[10%] md:left-[65px] bottom-[30px] md:bottom-[20px] text-xs md:text-xl text-white">
|
||||
{{ $t('index_s5') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full h-px bg-[#1C1C1C] my-5"></div>
|
||||
<div class="w-full h-px bg-[#1C1C1C] my-3 md:my-5"></div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s"
|
||||
@ -179,28 +204,36 @@
|
||||
</div>
|
||||
|
||||
<div class="array absolute bottom-[50px]">
|
||||
<img class="w-[50px] h-[50px]" src="/images/group40.png" alt="">
|
||||
<img class="w-[40px] h-[40px] md:w-[50px] md:h-[50px]" src="/images/group40.png" alt="">
|
||||
</div>
|
||||
|
||||
<div class="absolute bottom-42 px-4 flex justify-between items-center right-2">
|
||||
<div class="float-left flex">
|
||||
<img src="/images/group194.png" class="h-full mt-[10px]">
|
||||
<div v-if="!isMobile"
|
||||
class="absolute bottom-42 px-4 flex flex-col md:flex-row justify-between items-center right-2">
|
||||
<div class="float-left flex mb-3 md:mb-0">
|
||||
<img src="/images/group191.png" class="h-full mt-[10px]">
|
||||
<div style="width: 100px;">
|
||||
<div class="text-[#337ab7] cursor-pointer hover:text-[#175FCB]">{{ $t('index_contact') }}
|
||||
<div class="text-[#337ab7] cursor-pointer hover:text-[#175FCB] text-sm md:text-base">{{
|
||||
$t('index_contact') }}
|
||||
</div>
|
||||
<div class="box3zx1"></div>
|
||||
<div class="text-[#337ab7] cursor-pointer hover:text-[#175FCB]">{{ $t('index_news') }}</div>
|
||||
<div class="text-[#337ab7] cursor-pointer hover:text-[#175FCB] text-sm md:text-base">{{
|
||||
$t('index_news') }}</div>
|
||||
<div class="box3zx1"></div>
|
||||
<div class="text-[#337ab7] cursor-pointer hover:text-[#175FCB]">{{ $t('index_about') }}
|
||||
<div class="text-[#337ab7] cursor-pointer hover:text-[#175FCB] text-sm md:text-base">{{
|
||||
$t('index_about') }}
|
||||
</div>
|
||||
<div class="box3zx1"></div>
|
||||
<div class="text-[#337ab7] cursor-pointer hover:text-[#175FCB]">{{ $t('index_services') }}
|
||||
<div class="text-[#337ab7] cursor-pointer hover:text-[#175FCB] text-sm md:text-base">{{
|
||||
$t('index_services') }}
|
||||
</div>
|
||||
<div class="box3zx1"></div>
|
||||
<div class="text-[#337ab7] cursor-pointer hover:text-[#175FCB]">{{ $t('index_clients') }}
|
||||
<div class="text-[#337ab7] cursor-pointer hover:text-[#175FCB] text-sm md:text-base">{{
|
||||
$t('index_clients') }}
|
||||
</div>
|
||||
</div>
|
||||
<span class="mx-4 box2ybs3"></span>
|
||||
<div class="box19y">
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="float-right text-center">
|
||||
<img @click="scrollToTop" src="/images/group97-1.png" class="w-[35px] h-[35px] cursor-pointer">
|
||||
@ -218,6 +251,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
|
||||
<!-- 第四个滑块 -->
|
||||
<swiper-slide class="swiper-slide-a" :style="{
|
||||
backgroundImage: `url('/images/group159.png')`,
|
||||
@ -229,7 +263,7 @@
|
||||
textAlign: 'left'
|
||||
}">
|
||||
<div class="flex justify-center">
|
||||
<div class="w-[30%]">
|
||||
<div :class="isMobile ? 'w-[100%] px-[30px]' : 'w-[30%]'">
|
||||
<h2 class="ani t4 text-3xl" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s"
|
||||
swiper-animate-delay="0.1s">{{ $t('index_a1') }}</h2>
|
||||
<div class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s"
|
||||
@ -250,9 +284,9 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-[45%]"></div>
|
||||
<div v-if="!isMobile" class="w-[45%]"></div>
|
||||
</div>
|
||||
<div class="box2yb absolute px-4 bottom-42 right-2">
|
||||
<div v-if="!isMobile" class="box2yb absolute px-4 bottom-42 right-2">
|
||||
<div class="box2yb191 float-left pr-[14px] flex">
|
||||
<img src="/images/group191.png" class="h-full mt-[10px]">
|
||||
<span class="box2ybs1">{{ $t('index_m7') }}</span>
|
||||
@ -276,54 +310,60 @@
|
||||
</swiper-slide>
|
||||
<!--第五个滑块-->
|
||||
<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="leftImg" class="w-[80%] border-r-[10px] border-[#214ADB] inline-block">
|
||||
<div class="flex flex-col md:flex-row justify-center items-center w-full">
|
||||
<div class="w-full md:w-[40%] text-center md:text-right mb-5 md:mb-0">
|
||||
<img id="img1" :src="leftImg"
|
||||
class="w-[80%] mx-auto md:ml-auto md:mr-0 border-r-[10px] border-[#214ADB] inline-block">
|
||||
</div>
|
||||
<div class="w-[44%] text-left pl-5">
|
||||
<div class="w-full md:w-[44%] text-left md:pl-5 px-4">
|
||||
<h2 class="text-2xl font-bold">{{ $t('index_n1') }}</h2>
|
||||
<div class="my-[20px]">{{ $t('index_n2') }}</div>
|
||||
<div class="h-[1px] w-[150px] bg-[#0c1923]"></div>
|
||||
<div class="flex mt-[10px]">
|
||||
<div><NuxtLink to="/content" class="text-[#0c1923]">{{ $t('index_m3') }}</NuxtLink></div>
|
||||
<div>
|
||||
<NuxtLink to="/content" class="text-[#0c1923]">{{ $t('index_m3') }}</NuxtLink>
|
||||
</div>
|
||||
<div>
|
||||
<img src="/images/group7-1.png" class="w-5 ml-[5px]">
|
||||
</div>
|
||||
</div>
|
||||
<div class="news_padd flex items-center">
|
||||
<img id="swipen_next" src="/images/group10.png" class="w-[30px] cursor-pointer" @click="nextNews">
|
||||
<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews" >
|
||||
<swiper-slide v-for="(item, index) in newsList" :key="index" :virtualIndex="index" class="swiper-wrapper w-full">
|
||||
<img id="swipen_next" src="/images/group10.png" class="w-[30px] cursor-pointer">
|
||||
<swiper class="swiper-container h-full" @swiper="onSwiperNews" v-bind="swiperOptionsNews"
|
||||
@slideChange="onSlideChangeNews">
|
||||
<swiper-slide v-for="(item, index) in newsList" :key="index" :virtualIndex="index"
|
||||
class="swiper-wrapper w-full">
|
||||
<!-- 这里可以使用v-for循环渲染新闻列表 -->
|
||||
<div class="swiper-slide">
|
||||
<div class="text-center">
|
||||
<h3 class="font-semibold text-2xl line-clamp-1">
|
||||
<a :href="item.url" target="_blank" class="text-[#0c1923]">
|
||||
{{ item.title }}
|
||||
{{ locale == "en" ? item.en_title : item.title }}
|
||||
</a>
|
||||
</h3>
|
||||
<h5 class="text-[#606060] mt-[25px] leading-[25px] line-clamp-2">
|
||||
<a :href="item.url" target="_blank" class="text-[#0c1923]">
|
||||
{{ item.synopsis }}
|
||||
{{ locale == "en" ? item.en_synopsis : item.synopsis }}
|
||||
</a>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
</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">
|
||||
</div>
|
||||
<div class="w-full h-[1px] bg-black mt-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute right-[10px]">
|
||||
<div v-if="!isMobile" class="absolute right-[10px]">
|
||||
<div class="box2yb191 float-left pr-[14px] flex">
|
||||
<img src="/images/group194.png" class="h-full mt-[10px]">
|
||||
<span class="box2ybs4 text-[#175FCB]">Navigation</span>
|
||||
<span class="box2ybs4 text-[#175FCB]">{{ $t('index_m7') }}</span>
|
||||
<span class="box2ybs5 border-r-[2px] border-[#A8CBFF]"></span>
|
||||
</div>
|
||||
<div class="box1ybi float-right">
|
||||
<img class="back-to-top py-[6px] cursor-pointer" src="/images/group97-1.png" @click="scrollToTop">
|
||||
<img class="back-to-top py-[6px] cursor-pointer" src="/images/group97-1.png"
|
||||
@click="scrollToTop">
|
||||
<div class="box1ybz"></div>
|
||||
<img @click="shareToInstagram" src="/images/group11-1.png" class="py-[6px] cursor-pointer">
|
||||
<div class="box1ybz"></div>
|
||||
@ -348,19 +388,23 @@ import 'swiper/css/mousewheel'
|
||||
import 'swiper/css/navigation'
|
||||
import * as swiperAni from '@/assets/animate/animate.js'
|
||||
import $api from '@/service/webRequest'
|
||||
|
||||
import { useI18n } from 'vue-i18n'
|
||||
const { locale } = useI18n()
|
||||
// 新闻数据
|
||||
const leftImg = ref();
|
||||
const newsList = ref([])
|
||||
const isMobile = ref(false)
|
||||
onMounted(() => {
|
||||
//获取是在pc还是手机端
|
||||
isMobile.value = window.innerWidth < 768
|
||||
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]
|
||||
newsList.value = res.data.data.list
|
||||
leftImg.value = res.data.data.list[0].image_input[0]
|
||||
})
|
||||
.catch((err) => {
|
||||
console.dir(err)
|
||||
@ -377,43 +421,41 @@ let swiperInstance: any = null
|
||||
|
||||
// 新闻轮播实例
|
||||
let newsSwiper: any = null
|
||||
|
||||
|
||||
// 新闻轮播控制
|
||||
const nextNews = () => {
|
||||
if (newsSwiper) {
|
||||
newsSwiper.slideNext()
|
||||
}
|
||||
}
|
||||
|
||||
const prevNews = () => {
|
||||
if (newsSwiper) {
|
||||
newsSwiper.slidePrev()
|
||||
}
|
||||
}
|
||||
|
||||
// Swiper配置
|
||||
const swiperOptions = {
|
||||
direction: 'vertical',
|
||||
slidesPerView: 1,
|
||||
speed: 700,
|
||||
mousewheel: true,
|
||||
loop: false,
|
||||
modules: [Mousewheel],
|
||||
speed: 800,
|
||||
modules: [Mousewheel, Navigation],
|
||||
// 添加断点配置，在小屏幕上调整行为
|
||||
on: {
|
||||
init: function () {
|
||||
swiperAnimateCache(this);
|
||||
swiperAnimate(this);
|
||||
},
|
||||
slideChangeTransitionEnd: function () {
|
||||
swiperAnimate(this);
|
||||
},
|
||||
},
|
||||
}
|
||||
// Swiper配置
|
||||
const swiperOptionsNews = {
|
||||
direction: 'horizontal',
|
||||
slidesPerView: 1,
|
||||
speed: 700,
|
||||
mousewheel: true,
|
||||
loop: false,
|
||||
modules: [Mousewheel, Navigation],
|
||||
modules: [Navigation],
|
||||
navigation: {
|
||||
nextEl: '#swipen_next',
|
||||
prevEl: '#swipen_prev',
|
||||
nextEl: '#swipen_prev',
|
||||
prevEl: '#swipen_next',
|
||||
},
|
||||
}
|
||||
const onSlideChangeNews = (swiper: any) => {
|
||||
console.log(newsList.value[swiper.activeIndex]);
|
||||
leftImg.value = newsList.value[swiper.activeIndex].image_input[0]
|
||||
|
||||
}
|
||||
const onSwiperNews = (swiper: any) => {
|
||||
newsSwiper = swiper
|
||||
}
|
||||
@ -473,24 +515,87 @@ const scrollToTop = () => {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 20px, 0);
|
||||
.box2ybs2 {
|
||||
margin-left: -14px;
|
||||
border-right: 2px solid #ffffff;
|
||||
display: inline-block;
|
||||
height: 224px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
.box2ybs1 {
|
||||
writing-mode: vertical-rl;
|
||||
transform: rotate(360deg);
|
||||
padding-right: 20px;
|
||||
padding-left: 5px;
|
||||
color: #DEDEDE;
|
||||
letter-spacing: 2px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.animate-fadeInUp {
|
||||
animation: fadeInUp 0.5s ease-out forwards;
|
||||
// 添加媒体查询，针对手机端优化
|
||||
@media (max-width: 768px) {
|
||||
.t1::after {
|
||||
width: 150px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.t2::after {
|
||||
width: 80px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.t3::after {
|
||||
width: 250px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.t4::after {
|
||||
width: 80px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.t5::after {
|
||||
width: 80px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.box2ybs3 {
|
||||
height: 180px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.box19y span {
|
||||
margin-left: 0.1rem;
|
||||
border-right: 2px solid #A8CBFF;
|
||||
display: inline-block;
|
||||
height: 224px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.box3zx1 {
|
||||
width: 33px;
|
||||
height: 2px;
|
||||
border-top: solid #A8CBFF;
|
||||
margin: 15px auto
|
||||
}
|
||||
|
||||
.box2ybs4 {
|
||||
writing-mode: vertical-rl;
|
||||
transform: rotate(360deg);
|
||||
padding-right: 10px;
|
||||
padding-left: 5px;
|
||||
color: #175FCB;
|
||||
letter-spacing: 2px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.array {
|
||||
animation: start 1.5s infinite ease-in-out;
|
||||
-webkit-animation: start 1.5s infinite ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes start {
|
||||
@ -511,124 +616,4 @@ const scrollToTop = () => {
|
||||
transform: translate(0, 10px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale3d(0.3, 0.3, 0.3);
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-zoomIn {
|
||||
animation: zoomIn 0.5s ease-out forwards;
|
||||
}
|
||||
|
||||
.t1::after {
|
||||
content: '';
|
||||
margin-top: -13px;
|
||||
width: 205px;
|
||||
height: 20px;
|
||||
background: #175FCB;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.t2::after {
|
||||
content: '';
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
background: #175FCB;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
margin-top: -13px;
|
||||
}
|
||||
|
||||
.box2ybs1 {
|
||||
writing-mode: vertical-rl;
|
||||
transform: rotate(360deg);
|
||||
padding-right: 20px;
|
||||
color: #DEDEDE;
|
||||
letter-spacing: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box2ybs2 {
|
||||
margin-left: -14px;
|
||||
display: inline-block;
|
||||
height: 224px;
|
||||
margin-top: 10px;
|
||||
border-right: 2px solid #DEDEDE;
|
||||
}
|
||||
|
||||
.box2ybs3 {
|
||||
margin-left: -7px;
|
||||
border-right: 2px solid #A8CBFF;
|
||||
display: inline-block;
|
||||
height: 224px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.box2ybs4 {
|
||||
writing-mode: vertical-rl;
|
||||
transform: rotate(360deg);
|
||||
padding-right: 20px;
|
||||
letter-spacing: 5px;
|
||||
text-align: center;
|
||||
}
|
||||
.box2ybs5 {
|
||||
margin-left: -14px;
|
||||
display: inline-block;
|
||||
height: 224px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.box3zx1 {
|
||||
width: 33px;
|
||||
height: 2px;
|
||||
border-top: solid #A8CBFF;
|
||||
margin: 15px auto;
|
||||
}
|
||||
|
||||
.t3::after {
|
||||
content: '';
|
||||
width: 350px;
|
||||
height: 20px;
|
||||
background: #A8CBFF;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
margin-top: -13px;
|
||||
}
|
||||
.t4::after {
|
||||
content: '';
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
background: #A3C8FF;
|
||||
display: block;
|
||||
margin-top: -13px;
|
||||
}
|
||||
// 如果你有其他需要不同延迟的元素，可以添加更多类
|
||||
.delay-700 {
|
||||
animation-delay: 700ms;
|
||||
}
|
||||
.t5::after {
|
||||
content: '';
|
||||
width: 100px;
|
||||
height: 20px;
|
||||
background: #214ADB;
|
||||
display: block;
|
||||
margin-top: -13px;
|
||||
}
|
||||
|
||||
.box1ybz {
|
||||
width: 33px;
|
||||
height: 2px;
|
||||
background-color: #A8CBFF;
|
||||
margin: 2px auto;
|
||||
}
|
||||
|
||||
.news_padd {
|
||||
margin-top: 20px;
|
||||
height: 110px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,85 +1,83 @@
|
||||
<template>
|
||||
<div class="bg-white">
|
||||
<!-- Banner section with background image -->
|
||||
<div class="aboutimgBg" :style="{
|
||||
<div class="aboutimgBg h-[300px] md:h-[600px]" :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>
|
||||
<h2 class="font-semibold animated fadeInLeft text-2xl md:text-4xl">{{ $t('index_name') }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main content section -->
|
||||
<div class="mainBg py-12 z-10 relative" style="min-height: 110vh;">
|
||||
<div class="mainBg py-6 md:py-12 z-10 relative min-h-[80vh] md:min-h-[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 class="oneBox1 text-center mt-[-50px] md:mt-[-100px]">
|
||||
<h3 class="text-lg md:text-2xl text-[#606060] h-auto md:h-[144px] animated fadeInUp px-4">{{ $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>
|
||||
<div class="oneBox1Bg1 w-full md:w-[1240px] mt-12 md:mt-[150px]">
|
||||
<h2 class="text-2xl md:text-3xl font-bold text-center text-[#E2E2E2] mb-4 md:mb-6 animated fadeInUp">{{ $t('about_a2') }}</h2>
|
||||
<div class="oneBox1Bg1xiah w-16 md:w-24 h-[2px] bg-[#E2E2E2] mx-auto mb-8 md:mb-12"></div>
|
||||
<!-- Three column section -->
|
||||
<div class="oneBox1Bg1img flex justify-center items-center flex-wrap gap-8 mb-16 mt-10">
|
||||
<div class="oneBox1Bg1img flex flex-col md:flex-row justify-center items-center flex-wrap gap-8 mb-10 md:mb-16 mt-6 md: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">
|
||||
<img class="w-[120px] h-[120px] md:w-[150px] md: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>
|
||||
<h3 class="text-xl md: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>
|
||||
<span class="oneBox1Bg1img1span h-px w-40 md:h-40 md:w-px bg-[#ddd] my-6 md:my-0 block md:hidden"></span>
|
||||
|
||||
<div class="flex flex-col items-center animated fadeInUp">
|
||||
<img class="w-[150px] h-[150px] object-cover mb-4" src="/images/group52.png">
|
||||
<img class="w-[120px] h-[120px] md:w-[150px] md: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>
|
||||
<h3 class="text-xl md: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>
|
||||
<span class="oneBox1Bg1img1span h-px w-40 md:h-40 md:w-px bg-[#ddd] my-6 md:my-0 block md:hidden"></span>
|
||||
|
||||
<div class="flex flex-col items-center animated fadeInUp">
|
||||
<img class="w-[150px] h-[150px] object-cover mb-4" src="/images/group51.png">
|
||||
<img class="w-[120px] h-[120px] md:w-[150px] md: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>
|
||||
<h3 class="text-xl md: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 class="oneBox1Bg1h text-center mb-4 md:mb-6 animated fadeInUp px-4">
|
||||
<h3 class="text-lg md:text-2xl text-[#606060]">{{ $t('about_a6') }}</h3>
|
||||
</div>
|
||||
<div class="oneBox1Bg1xiah1"></div>
|
||||
<div class="oneBox1Bg1xiah1 w-full md:w-[1240px] mx-auto md:mx-[-61px]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Second banner section with background image -->
|
||||
<div class="aboutimgBg1 text-center py-16" :style="{
|
||||
<div class="aboutimgBg1 text-center py-8 md:py-16 h-auto min-h-[400px] md:h-[700px]" :style="{
|
||||
backgroundImage: `url(/images/maskgroup1.png)`,
|
||||
backgroundPosition: 'center center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundSize: 'cover',
|
||||
color: 'white',
|
||||
height: '700px'
|
||||
color: 'white'
|
||||
}">
|
||||
<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 class="text-[#000] text-xl md:text-3xl animated fadeInLeft">{{ $t('about_a7') }}</div>
|
||||
<div class="oneBox1Bg1xiah2 w-20 md:w-[100px] h-[2px] bg-[#606060] mx-auto my-4 md:my-8 animated fadeInLeft"></div>
|
||||
<div class="oneBox1Bg2h max-w-1xl mt-8 md:mt-[100px]">
|
||||
<h3 class="text-[#606060] text-base md:text-[24px] leading-relaxed animated fadeInLeft px-4">{{ $t('about_a8') }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -102,32 +100,52 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 100%;
|
||||
@media (min-width: 768px) {
|
||||
max-width: 1310px;
|
||||
}
|
||||
}
|
||||
|
||||
.aboutTit h2::after {
|
||||
content: '';
|
||||
margin-top: -20px;
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
@media (min-width: 768px) {
|
||||
margin-top: -30px;
|
||||
width: 598px;
|
||||
height: 34px;
|
||||
}
|
||||
background: #A8CBFF;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.oneBox1Bg1 {
|
||||
height: auto;
|
||||
width: 100%;
|
||||
margin-top: 50px;
|
||||
@media (min-width: 768px) {
|
||||
height: 500px;
|
||||
width: 1240px;
|
||||
margin-top: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
.oneBox1Bg1 h2 {
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
height: auto;
|
||||
font-size: 24px;
|
||||
@media (min-width: 768px) {
|
||||
height: 51px;
|
||||
font-size: 34px;
|
||||
}
|
||||
color: #000000;
|
||||
line-height: 1.2;
|
||||
@media (min-width: 768px) {
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.oneBox1Bg1xiah {
|
||||
margin: 0 auto;
|
||||
@ -135,41 +153,64 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.oneBox1Bg1img1span {
|
||||
margin-left: 125px;
|
||||
margin-right: 125px;
|
||||
margin-left: 100px;
|
||||
margin-right: 100px;
|
||||
@media (min-width: 768px) {
|
||||
border-right: 2px solid #E2E2E2;
|
||||
display: inline-block;
|
||||
height: 240px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
}
|
||||
|
||||
.oneBox1Bg1imgt {
|
||||
font-weight: 500;
|
||||
font-size: 20px;
|
||||
@media (min-width: 768px) {
|
||||
font-size: 24px;
|
||||
}
|
||||
color: #1C1C1C;
|
||||
line-height: 24px;
|
||||
@media (min-width: 768px) {
|
||||
line-height: 28px;
|
||||
}
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
@media (min-width: 768px) {
|
||||
margin-top: 31px;
|
||||
}
|
||||
}
|
||||
|
||||
.oneBox1Bg1imgt h3::after {
|
||||
content: '';
|
||||
margin-top: -8px;
|
||||
width: 40px;
|
||||
height: 12px;
|
||||
@media (min-width: 768px) {
|
||||
margin-top: -11px;
|
||||
width: 60px;
|
||||
height: 16px;
|
||||
}
|
||||
background: #A8CBFF;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.oneBox1Bg1h {
|
||||
padding-top: 30px;
|
||||
@media (min-width: 768px) {
|
||||
padding-top: 53px;
|
||||
}
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.oneBox1Bg1xiah1 {
|
||||
border-top: 2px solid #E2E2E2;
|
||||
width: 100%;
|
||||
margin-top: 30px;
|
||||
@media (min-width: 768px) {
|
||||
margin-left: -61px;
|
||||
width: 1240px;
|
||||
margin-top: 55px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,47 +1,46 @@
|
||||
<template>
|
||||
<div class="bg-white">
|
||||
<!-- Banner section with background image -->
|
||||
<div class="aboutimgBg" :style="{
|
||||
<div class="aboutimgBg h-[300px] md:h-[600px]" :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>
|
||||
<h2 class="text-3xl md:text-[50px] font-bold animated fadeInLeft">{{ $t('clients_b1') }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Clients content section -->
|
||||
<div class="mainBg pb-[100px]">
|
||||
<div class="mainBg pb-10 md: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>
|
||||
<h3 class="animated fadeInUp text-lg md:text-2xl font-medium text-center text-[#606060] px-4 mt-[-60px] md:mt-[-120px]">{{ $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]">
|
||||
<div class="clientBg1 mt-12 md:mt-[100px]">
|
||||
<div class="clientBg1img flex flex-col md:flex-row items-center justify-between">
|
||||
<div class="clientBg1imgdx w-full md:w-[300px] mb-6 md:mb-0">
|
||||
<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 class="clientBg1imgt text-center md:text-left pl-0 md:pl-[30px]" style="flex: 1;">
|
||||
<h3 class="text-2xl md:text-[40px] font-bold mb-2">{{ $t('clients_b3') }}</h3>
|
||||
<h4 class="text-base md:text-xl text-[#606060] mt-4 md:mt-[30px] px-4 md:px-0">{{ $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 class="clientimg flex flex-wrap justify-center gap-4 md:gap-6 mt-8">
|
||||
<img src="/images/maskgroup3.png" class="w-[150px] md:w-[200px] h-auto mb-4 md:mb-0" alt="Client">
|
||||
<img src="/images/image8.png" class="w-[150px] md:w-[200px] h-auto mb-4 md:mb-0" alt="Client">
|
||||
<img src="/images/clients56.png" class="w-[150px] md:w-[200px] h-auto mb-4 md:mb-0" alt="Client">
|
||||
<img src="/images/clients11.png" class="w-[150px] md:w-[200px] h-auto mb-4 md:mb-0" alt="Client">
|
||||
<img src="/images/clients11.png" class="w-[150px] md:w-[200px] h-auto mb-4 md:mb-0" alt="Client">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -65,44 +64,63 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 100%;
|
||||
@media (min-width: 768px) {
|
||||
max-width: 1310px;
|
||||
}
|
||||
}
|
||||
|
||||
.clientTit h2::after {
|
||||
content: '';
|
||||
margin: 0 auto;
|
||||
width: 180px;
|
||||
height: 20px;
|
||||
@media (min-width: 768px) {
|
||||
width: 300px;
|
||||
height: 28px;
|
||||
margin-top: -30px;
|
||||
}
|
||||
background: #A8CBFF;
|
||||
display: block;
|
||||
margin-top: -30px;
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
.clientBox1 h3 {
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
@media (min-width: 768px) {
|
||||
font-size: 24px;
|
||||
color: #606060;
|
||||
line-height: 31px;
|
||||
}
|
||||
color: #606060;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.clientBg1imgt h3::after {
|
||||
content: '';
|
||||
width: 150px;
|
||||
height: 16px;
|
||||
@media (min-width: 768px) {
|
||||
margin-top: -20px;
|
||||
width: 250px;
|
||||
height: 20px;
|
||||
margin-left: -4px;
|
||||
}
|
||||
background: #A8CBFF;
|
||||
display: block;
|
||||
margin-top: -14px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
@media (min-width: 768px) {
|
||||
margin-left: -4px;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.clientimg {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: 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>
|
||||
|
||||
244
pages/index_contact.vue
Normal file
244
pages/index_contact.vue
Normal file
@ -0,0 +1,244 @@
|
||||
<template>
|
||||
<div class="bg-white">
|
||||
<!-- Contact section -->
|
||||
<div class="box2">
|
||||
<div class="flex flex-wrap justify-center items-center pb-[50px] md:pb-[50px] px-4 md:px-0">
|
||||
<div class="w-full md:w-[45%] mb-6 md:mb-0">
|
||||
<img src="/images/contact1.png" class="w-full h-full object-cover" alt="Contact Image">
|
||||
</div>
|
||||
<div class="w-full md:w-[55%] px-4 md:px-[115px] pt-6 md:pt-[115px]">
|
||||
<div class="contactTit">
|
||||
<h2 class="text-[28px] md:text-[40px] font-bold">{{ $t('contact_b1') }}</h2>
|
||||
<div class="contactBox5zd w-[50px] h-[3px] bg-blue-600 mb-4 md:mb-8"></div>
|
||||
|
||||
<!-- 重新结构化联系信息区域 -->
|
||||
<div class="flex flex-col md:flex-row md:items-center mb-3 md:mb-10">
|
||||
<div class="flex items-center mb-3 md:mb-0 md:mr-6">
|
||||
<img src="/images/contact6.png" class="w-[30px] h-[30px] md:w-[35px] md:h-[35px] mr-2" alt="Phone">
|
||||
<span class="text-base md:text-lg break-all">+86-186-379-00319</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<img src="/images/contact5.png" class="w-[30px] h-[30px] md:w-[35px] md:h-[35px] mr-2" alt="Email">
|
||||
<span class="text-base md:text-lg break-all">hwang@joker019.com</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="contactForm mt-6 md:mt-12 w-full md:w-[700px]" @submit.prevent="submitForm">
|
||||
<input
|
||||
v-model="formData.name"
|
||||
class="contactInput w-full md:w-[700px]"
|
||||
type="text"
|
||||
:placeholder="$t('contact_b2')"
|
||||
/>
|
||||
<input
|
||||
v-model="formData.mobile"
|
||||
class="contactInput mt-[15px] md:mt-[30px] w-full md:w-[700px]"
|
||||
type="text"
|
||||
:placeholder="$t('contact_b3')"
|
||||
/>
|
||||
<div class="relative mt-4 md:mt-8 w-full md:w-[700px]">
|
||||
<textarea
|
||||
v-model="formData.content"
|
||||
id="myTextarea"
|
||||
:placeholder="$t('contact_b4')"
|
||||
rows="6"
|
||||
maxlength="100"
|
||||
class="w-full md:w-[700px]"
|
||||
></textarea>
|
||||
<div class="char-count">{{ formData.content.length }}/100</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end mt-4 md:mt-6">
|
||||
<button
|
||||
type="submit"
|
||||
class="contactBut"
|
||||
>
|
||||
{{ $t('contact_b5') }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<h8 class="text-[22px] md:text-[30px] block mt-6 md:mt-8">{{ $t('contact_b6') }}</h8>
|
||||
<div class="contactdx8"></div>
|
||||
|
||||
<div class="contactImg1 flex space-x-4 md:space-x-6 mt-4 md:mt-8">
|
||||
<img @click="shareToYoutube" class="w-8 h-8 md:w-10 md:h-10 cursor-pointer hover:opacity-80 transition" src="/images/contact2.png" alt="Youtube">
|
||||
<img @click="shareToFacebook" class="w-8 h-8 md:w-10 md:h-10 cursor-pointer hover:opacity-80 transition" src="/images/contact7.png" alt="Facebook">
|
||||
<img @click="shareToInstagram" class="w-8 h-8 md:w-10 md:h-10 cursor-pointer hover:opacity-80 transition" src="/images/contact8.png" alt="Instagram">
|
||||
<img @click="shareToX" class="w-8 h-8 md:w-10 md:h-10 cursor-pointer hover:opacity-80 transition" src="/images/contact9.png" alt="Twitter">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
// 表单数据
|
||||
const formData = reactive({
|
||||
name: '',
|
||||
mobile: '',
|
||||
content: ''
|
||||
})
|
||||
|
||||
// 表单提交方法
|
||||
const submitForm = () => {
|
||||
// 这里可以添加表单验证逻辑
|
||||
if (!formData.name) {
|
||||
alert(t('contact_name_required'))
|
||||
return
|
||||
}
|
||||
|
||||
if (!formData.mobile) {
|
||||
alert(t('contact_mobile_required'))
|
||||
return
|
||||
}
|
||||
|
||||
// 在实际应用中，这里应该调用API提交表单数据
|
||||
console.log('提交表单数据:', formData)
|
||||
|
||||
// 模拟提交成功
|
||||
alert(t('contact_submit_success'))
|
||||
|
||||
// 重置表单
|
||||
formData.name = ''
|
||||
formData.mobile = ''
|
||||
formData.content = ''
|
||||
}
|
||||
|
||||
// 社交媒体分享方法
|
||||
const shareToYoutube = () => {
|
||||
window.open('https://www.youtube.com/channel/YOUR_CHANNEL_ID', '_blank')
|
||||
}
|
||||
|
||||
const shareToFacebook = () => {
|
||||
window.open('https://www.facebook.com/YOUR_PAGE', '_blank')
|
||||
}
|
||||
|
||||
const shareToInstagram = () => {
|
||||
window.open('https://www.instagram.com/YOUR_ACCOUNT', '_blank')
|
||||
}
|
||||
|
||||
const shareToX = () => {
|
||||
window.open('https://twitter.com/YOUR_ACCOUNT', '_blank')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 可以添加一些特定的样式，但大部分已经通过Tailwind实现 */
|
||||
.animated {
|
||||
animation-duration: 1s;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.fadeInLeft {
|
||||
animation-name: fadeInLeft;
|
||||
}
|
||||
|
||||
@keyframes fadeInLeft {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
.contactTit h2::after {
|
||||
content: '';
|
||||
margin-top: -25px;
|
||||
width: 229px;
|
||||
height: 24px;
|
||||
background: #A8CBFF;
|
||||
display: block;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.contactTit h2::after {
|
||||
margin-top: -15px;
|
||||
width: 160px;
|
||||
height: 18px;
|
||||
}
|
||||
}
|
||||
.contactBox5zd {
|
||||
width: 100%;
|
||||
margin-bottom: 14px;
|
||||
border-top: 2px solid #175FCB;
|
||||
}
|
||||
.contactTit h3 span {
|
||||
font-weight: 400;
|
||||
font-size: 22px;
|
||||
color: #1C1C1C;
|
||||
line-height: 26px;
|
||||
text-align: left;
|
||||
margin-left: 4px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.contactTit h3 span {
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
.contactInput{border: 0px solid;border-bottom:1px solid #A8CBFF;font-size: 24px;color: #A8CBFF;height: 50px;}
|
||||
.contactInput::placeholder {color: #A8CBFF;}
|
||||
.contactInput:focus {outline: none;}
|
||||
@media (max-width: 768px) {
|
||||
.contactInput {
|
||||
font-size: 18px;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
#myTextarea {padding: 10px;border-radius: 10px;margin-top: 32px;border: 1px solid #A8CBFF;font-weight: 400;font-size: 22px;color: #A8CBFF;line-height: 22px;resize: none; /* 禁止用户调整文本域大小 */}
|
||||
#myTextarea::placeholder {color: #A8CBFF;}
|
||||
#myTextarea:focus {outline: none;}
|
||||
@media (max-width: 768px) {
|
||||
#myTextarea {
|
||||
font-size: 16px;
|
||||
line-height: 18px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
.char-count {position: absolute;bottom: 5px; /* 根据需要调整距离底部的位置 */right: 10px; /* 根据需要调整距离右侧的位置 */font-size: 12px; /* 根据需要调整字体大小 */color: #A8CBFF;}
|
||||
.text-area-container {position: relative;width: 100%;}
|
||||
.contactBut{ background-color: #ffffff; border: none; font-weight: bold;font-size: 22px;line-height: 28px;color: #175FCB;}
|
||||
.contactBut::after {
|
||||
content: '';margin-top: -10px;width: 123px;height:14px;background: #A8CBFF;display: block;margin-left: 2px;margin-bottom: 40px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.contactBut {
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
}
|
||||
.contactBut::after {
|
||||
width: 100px;
|
||||
height: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
.contactForm{width: 100%;}
|
||||
.contactTit h8 {
|
||||
font-weight: bold;
|
||||
font-size: 24px;
|
||||
color: #175FCB;
|
||||
line-height: 28px;
|
||||
text-align: left;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.contactTit h8 {
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
.contactdx8{
|
||||
width: 100%;
|
||||
margin-top: 5px;
|
||||
border-top: 2px solid #175FCB;
|
||||
}
|
||||
</style>
|
||||
353
pages/index_news.vue
Normal file
353
pages/index_news.vue
Normal file
@ -0,0 +1,353 @@
|
||||
<template>
|
||||
<div class="bg-white">
|
||||
<!-- Banner section with background image -->
|
||||
<div class="aboutimgBg">
|
||||
<div class="pl-4 md:pl-[200px]">
|
||||
<div class="newsTit">
|
||||
<h2 class="animated fadeInLeft text-2xl md:text-[40px] font-bold">{{ $t('list_b1') }}</h2>
|
||||
<h3 class="animated fadeInLeft text-lg md:text-[25px] font-medium mt-3 md:mt-[30px] text-[#606060]">{{ $t('list_b2') }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Featured news section -->
|
||||
<div class="newsBox1 container mx-auto px-4 py-8 flex flex-col md:flex-row flex-wrap" v-if="newsList.length > 0">
|
||||
<div class="newsBox1lider w-full md:w-[38%] mb-6 md:mb-0">
|
||||
<img id="featuredImage" :src="topImg" class="h-[200px] md:h-[300px] w-full object-cover rounded-[5px]" />
|
||||
</div>
|
||||
|
||||
<div class="newsTit1 w-full md:w-[62%] relative pl-0 md:pl-4 mt-6 md:mt-0">
|
||||
<div id="swipen_next" class="absolute left-0 md:left-4 top-[70%] -translate-y-1/2 cursor-pointer z-10" @click="prevSlide">
|
||||
<img src="/images/group10.png" class="w-[40px] md:w-[50px]" alt="Previous" />
|
||||
</div>
|
||||
<div id="swipen_prev" class="absolute right-0 md:right-4 top-[70%] -translate-y-1/2 cursor-pointer z-10" @click="nextSlide">
|
||||
<img src="/images/group9-1.png" class="w-[40px] md:w-[50px]" alt="Next" />
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end items-center mb-4">
|
||||
<div class="relative pr-3 md:pr-5">
|
||||
<h2 class="t7 m-0">
|
||||
<span id="time1" class="newsSpan1 text-2xl md:text-[40px]">{{ formatYear(currentNews.inputtime || currentNews.add_time) }}/</span>
|
||||
<span id="time2" class="newsSpan2 text-xl md:text-[28px]">{{ formatDate(currentNews.inputtime || currentNews.add_time) }}</span>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<span class="t6 text-lg md:text-[25px] font-semibold">{{ $t('list_b1') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="newsdi w-full h-[1px] bg-gray-300 my-3 md:my-4"></div>
|
||||
|
||||
<div class="listSwiper overflow-hidden w-full md:w-[90%] h-[115px] md:h-[200px]">
|
||||
<div class="swiper-wrapper w-full">
|
||||
<span v-if="!isMobile" class="newsbs2 hidden md:inline-block"></span>
|
||||
<div v-for="(news, index) in newsList" :key="index"
|
||||
:class="['swiper-slide pl-[50px] pr-[40px] md:pl-[118px] pt-3 md:pt-[20px]', {'hidden': currentIndex !== index}]">
|
||||
<h2 class="text-xl md:text-3xl font-bold mb-3 md:mb-4 line-clamp-1">
|
||||
<NuxtLink :to="'/news/' + news.id" target="_blank" class="text-[#0c1923] hover:text-blue-600">
|
||||
{{ getCurrentLanguage() === 'zh' ? news.title : news.en_title || news.title }}
|
||||
</NuxtLink>
|
||||
</h2>
|
||||
<h3 class="line-clamp-2 text-gray-600 text-base md:text-lg mb-4 md:mb-6">
|
||||
{{ getCurrentLanguage() === 'zh' ? news.synopsis : news.en_synopsis || news.synopsis }}
|
||||
</h3>
|
||||
<h4 v-if="!isMobile" class="mt-6 md:mt-10">
|
||||
<NuxtLink :to="'/news/' + news.id" target="_blank"
|
||||
class="text-[#0c1923] px-4 py-1 md:px-5 md:py-2.5 text-sm md:text-base rounded-[10px] border border-solid border-[#0c1923] hover:bg-gray-100">
|
||||
{{ $t('list_b3') }}
|
||||
</NuxtLink>
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- News list section -->
|
||||
<div class="container mx-auto px-4 py-8 md:py-12">
|
||||
<div v-for="(news, index) in allNewsList" :key="'all-'+index" class="newsBox2 min-h-[200px] md:min-h-[300px] h-auto md:h-[300px] flex flex-col md:flex-row flex-wrap items-start md:items-center p-4 md:p-[20px] mb-8 md:mb-12 border-b border-gray-200">
|
||||
<div class="newsTit2 w-full md:w-2/3 pr-0 md:pr-6 mb-4 md:mb-0">
|
||||
<h2>
|
||||
<span class="newsSpan1 text-2xl md:text-[40px]">{{ formatYear(news.add_time) }}/</span>
|
||||
<span class="newsSpan2 text-xl md:text-[28px]">{{ formatDate(news.add_time) }}</span>
|
||||
</h2>
|
||||
<div class="newsBox2di w-full md:w-[473px]"></div>
|
||||
<h3 class="text-xl md:text-2xl font-bold mb-2 md:mb-4 pt-3 md:pt-[20px] line-clamp-1">
|
||||
<NuxtLink :to="'/news/' + news.id" target="_blank" class="text-[#0c1923] hover:text-blue-600">
|
||||
{{ getCurrentLanguage() == 'zh' ? news.title : (news.en_title || news.title) }}
|
||||
</NuxtLink>
|
||||
</h3>
|
||||
<h4 class="text-gray-600 text-base md:text-lg line-clamp-2">
|
||||
{{ getCurrentLanguage() == 'zh' ? news.synopsis : (news.en_synopsis || news.synopsis) }}
|
||||
</h4>
|
||||
</div>
|
||||
<img :src="news.thumb || '/images/newsgroup1.png'" class="news2g10 w-full md:w-1/3 h-[200px] md:h-full object-cover rounded-lg" alt="News thumbnail" />
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div id="pages" class="text-center mt-6 md:mt-8">
|
||||
<button
|
||||
v-for="page in totalPages"
|
||||
:key="page"
|
||||
@click="changePage(page)"
|
||||
:class="['mx-1 px-3 py-1 md:px-4 md:py-2 text-sm md:text-base rounded', currentPage === page ? 'bg-blue-500 text-white' : 'bg-gray-200 hover:bg-gray-300']">
|
||||
{{ page }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import $api from '@/service/webRequest'
|
||||
|
||||
// 分页相关变量
|
||||
const currentPage = ref(1)
|
||||
const itemsPerPage = 5
|
||||
const totalItems = ref(0)
|
||||
|
||||
// 新闻数据
|
||||
const mockNewsData = ref([])
|
||||
const allNewsList = ref([])
|
||||
const isMobile = ref(false)
|
||||
onMounted(() => {
|
||||
isMobile.value = window.innerWidth < 768
|
||||
getNewsList()
|
||||
getFeaturedNews()
|
||||
})
|
||||
|
||||
const topImg = ref('')
|
||||
// 获取轮播展示的新闻（前5条）
|
||||
const getFeaturedNews = () => {
|
||||
$api.get("/api/article/new/list", { params: { page: 1, limit: 5 } })
|
||||
.then((res: any) => {
|
||||
mockNewsData.value = res.data.data.list
|
||||
topImg.value = res.data.data.list[0].image_input[0]
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error("获取轮播新闻失败:", err)
|
||||
})
|
||||
}
|
||||
|
||||
// 获取分页新闻列表
|
||||
const getNewsList = () => {
|
||||
$api.get("/api/article/new/list", { params: { page: currentPage.value, limit: itemsPerPage } })
|
||||
.then((res: any) => {
|
||||
allNewsList.value = res.data.data.list
|
||||
// 获取总条数用于分页
|
||||
totalItems.value = res.data.data.count
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error("获取新闻列表失败:", err)
|
||||
})
|
||||
}
|
||||
|
||||
const { locale } = useI18n()
|
||||
const currentIndex = ref(0)
|
||||
|
||||
// 轮播新闻列表
|
||||
const newsList = computed(() => mockNewsData.value)
|
||||
|
||||
// 计算总页数
|
||||
const totalPages = computed(() => Math.ceil(totalItems.value / itemsPerPage))
|
||||
|
||||
// 当前轮播的新闻
|
||||
const currentNews = computed(() => {
|
||||
return newsList.value[currentIndex.value] || {
|
||||
id: 0,
|
||||
title: '',
|
||||
description: '',
|
||||
inputtime: ''
|
||||
}
|
||||
})
|
||||
|
||||
// 轮播控制方法
|
||||
const prevSlide = () => {
|
||||
topImg.value = mockNewsData.value[currentIndex.value - 1].image_input[0]
|
||||
currentIndex.value = (currentIndex.value - 1 + newsList.value.length) % newsList.value.length
|
||||
}
|
||||
|
||||
const nextSlide = () => {
|
||||
topImg.value = mockNewsData.value[currentIndex.value + 1].image_input[0]
|
||||
currentIndex.value = (currentIndex.value + 1) % newsList.value.length
|
||||
}
|
||||
|
||||
// 分页方法
|
||||
const changePage = (page: number) => {
|
||||
currentPage.value = page
|
||||
getNewsList() // 切换页码时重新获取数据
|
||||
}
|
||||
|
||||
// 格式化年份 - 处理字符串格式的日期 "2023-02-15 16:50"
|
||||
const formatYear = (dateStr: string) => {
|
||||
if (!dateStr) return ''
|
||||
// 从日期字符串中提取年份
|
||||
const year = dateStr.split(' ')[0].split('-')[0]
|
||||
return year
|
||||
}
|
||||
|
||||
// 格式化日期 - 处理字符串格式的日期 "2023-02-15 16:50"
|
||||
const formatDate = (dateStr: string) => {
|
||||
if (!dateStr) return ''
|
||||
// 从日期字符串中提取月和日
|
||||
const dateParts = dateStr.split(' ')[0].split('-')
|
||||
if (dateParts.length < 3) return ''
|
||||
|
||||
const month = dateParts[1]
|
||||
const day = dateParts[2]
|
||||
return `${month}/${day}`
|
||||
}
|
||||
|
||||
const getCurrentLanguage = () => {
|
||||
console.log(locale.value);
|
||||
|
||||
return locale.value
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/assets/animate/animate.min.css";
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
@media (min-width: 768px) {
|
||||
max-width: 1310px;
|
||||
}
|
||||
}
|
||||
|
||||
.aboutimgBg {
|
||||
background-image: url(/images/newsgroup3.png);
|
||||
background-size: cover;
|
||||
height: 300px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: start;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
height: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
.newsTit h2::after {
|
||||
content: '';
|
||||
width: 120px;
|
||||
height: 20px;
|
||||
@media (min-width: 768px) {
|
||||
width: 200px;
|
||||
height: 28px;
|
||||
margin-top: -30px;
|
||||
}
|
||||
background: #A8CBFF;
|
||||
display: block;
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
.ellipsis-3 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.newsBox1 {
|
||||
margin-top: 20px;
|
||||
@media (min-width: 768px) {
|
||||
margin-top: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.newsBox2 {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.newsBox2:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.newsSpan1 {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.newsSpan2 {
|
||||
color: #1C1C1C;
|
||||
letter-spacing: 2px;
|
||||
@media (min-width: 768px) {
|
||||
letter-spacing: 5px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.newsbs2 {
|
||||
position: absolute;
|
||||
margin-left: 81px;
|
||||
border-right: 2px solid #1C1C1C;
|
||||
display: inline-block;
|
||||
height: 300px;
|
||||
@media (min-width: 768px) {
|
||||
height: 344px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.t6::after {
|
||||
content: '';
|
||||
width: 100px;
|
||||
height: 15px;
|
||||
@media (min-width: 768px) {
|
||||
width: 175px;
|
||||
height: 20px;
|
||||
margin-top: -18px;
|
||||
}
|
||||
background: #A3C8FF;
|
||||
display: block;
|
||||
margin-top: -14px;
|
||||
}
|
||||
|
||||
.t7::after {
|
||||
content: '';
|
||||
width: 2px;
|
||||
height: 16px;
|
||||
@media (min-width: 768px) {
|
||||
width: 3px;
|
||||
height: 21px;
|
||||
top: 20px;
|
||||
}
|
||||
background: #000000;
|
||||
display: block;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 15px;
|
||||
}
|
||||
|
||||
.newsTit2 h2::after {
|
||||
content: '';
|
||||
margin-top: -20px;
|
||||
width: 120px;
|
||||
height: 20px;
|
||||
@media (min-width: 768px) {
|
||||
margin-top: -29px;
|
||||
width: 200px;
|
||||
height: 31px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
background: #A8CBFF;
|
||||
display: block;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.newsBox2di {
|
||||
width: 100%;
|
||||
border-top: 1px solid #1C1C1C;
|
||||
@media (min-width: 768px) {
|
||||
width: 473px;
|
||||
border-top: 2px solid #1C1C1C;
|
||||
margin-left: 0px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,116 +1,116 @@
|
||||
<template>
|
||||
<div class="bg-white">
|
||||
<!-- Banner section with background image -->
|
||||
<div class="aboutimgBg" :style="{
|
||||
<div class="aboutimgBg h-[300px] md:h-[600px]" :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>
|
||||
<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-12 relative">
|
||||
<div class="servicesBg py-6 md: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>
|
||||
<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-12 mt-[100px]">
|
||||
<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">
|
||||
<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">
|
||||
<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-xl text-[#606060] text-center mt-4">
|
||||
<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">
|
||||
<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">
|
||||
<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-xl text-[#606060] text-center mt-4">
|
||||
<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">
|
||||
<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">
|
||||
<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-xl text-[#606060] text-center mt-4">
|
||||
<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">
|
||||
<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">
|
||||
<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-xl text-[#606060] text-center mt-4">
|
||||
<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">
|
||||
<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">
|
||||
<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-xl text-[#606060] text-center mt-4">
|
||||
<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">
|
||||
<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">
|
||||
<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-xl text-[#606060] text-center mt-4">
|
||||
<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-16 text-center" :style="{
|
||||
<div class="servicesBg2 py-10 md:py-16 text-center h-[350px] md:h-[600px]" :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>
|
||||
<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="/contact" class="text-[#0c1923]">{{ $t('index_contact') }}</NuxtLink>
|
||||
<NuxtLink to="/contact" class="text-[#0c1923] text-base md:text-2xl">{{ $t('index_contact') }}</NuxtLink>
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
@ -134,52 +134,77 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.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: -30px;
|
||||
margin-top: -20px;
|
||||
}
|
||||
|
||||
.serveBox1 h3 {
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
@media (min-width: 768px) {
|
||||
font-size: 24px;
|
||||
color: #606060;
|
||||
line-height: 31px;
|
||||
}
|
||||
color: #606060;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.serveBox2 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
|
||||
.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;
|
||||
color: #000000;
|
||||
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: 44px;
|
||||
margin-top: 24px;
|
||||
border: 1px solid #000000;
|
||||
border-radius: 28px 28px 28px 28px;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user