123
This commit is contained in:
parent
b14279cb68
commit
682614ed29
50
app.vue
50
app.vue
@ -4,6 +4,10 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import $api from '@/service/webRequest'
|
||||
import { useStore } from '~/store'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
const { locale } = useI18n()
|
||||
useSeoMeta({
|
||||
title: '河南纳威格特商贸有限公司',
|
||||
ogTitle: '河南纳威格特商贸有限公司',
|
||||
@ -12,13 +16,45 @@ useSeoMeta({
|
||||
ogImage: 'https://example.com/image.png',
|
||||
twitterCard: 'summary_large_image',
|
||||
})
|
||||
// $api.get(APIs.login)
|
||||
// .then(() => {
|
||||
// //
|
||||
// })
|
||||
// .catch((err: AxiosRequestError) => {
|
||||
// console.dir(err)
|
||||
// })
|
||||
const store = useStore()
|
||||
onMounted(() => {
|
||||
//判断store.是否是英文
|
||||
if(localStorage.getItem('isEnglish') === 'en') {
|
||||
locale.value = 'en'
|
||||
}else{
|
||||
locale.value = 'zh'
|
||||
}
|
||||
getCompany()
|
||||
getSerList();
|
||||
})
|
||||
const getCompany = async () => {
|
||||
try {
|
||||
const response = await $api.get('/api/sys_config?name=official_website');
|
||||
console.log(response);
|
||||
|
||||
// 保存 API 返回的数据到 store 中
|
||||
store.saveTempApiData(response.data.data.config)
|
||||
|
||||
// 现在数据已经保存到 store 中，可以在任何组件中访问
|
||||
console.log('数据已保存到临时存储')
|
||||
} catch (error) {
|
||||
console.error('获取数据失败', error)
|
||||
}
|
||||
}
|
||||
const getSerList = async () => {
|
||||
try {
|
||||
const response = await $api.get('/api/share_list?page=1&limit=100');
|
||||
console.log(response);
|
||||
|
||||
// 保存 API 返回的数据到 store 中
|
||||
store.saveSerApiData(response.data.data.list)
|
||||
|
||||
// 现在数据已经保存到 store 中，可以在任何组件中访问
|
||||
console.log('数据已保存到临时存储')
|
||||
} catch (error) {
|
||||
console.error('获取数据失败', error)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
@ -4,8 +4,8 @@
|
||||
<div class="flex justify-between items-center">
|
||||
<!-- Logo section -->
|
||||
<div class="text-center">
|
||||
<div class="nwTitle text-2xl md:text-[26px]">河南纳威格特商贸有限公司</div>
|
||||
<div class="nwTitle1 text-xs md:text-sm">Henan Navigate Trading Co., Ltd</div>
|
||||
<div class="nwTitle text-2xl md:text-[26px]">{{ store.tempApiData.company_name}}</div>
|
||||
<div class="nwTitle1 text-xs md:text-sm">{{store.tempApiData.en_company_name }}</div>
|
||||
</div>
|
||||
<!-- Mobile menu button -->
|
||||
<div class="hdRig md:hidden">
|
||||
@ -25,35 +25,35 @@
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="index_about" :class="{ 'active': route.path === '/index_about' }">
|
||||
<NuxtLink to="/index_about/" :class="{ 'active': route.path === '/index_about/' }">
|
||||
{{ $t('index_about') }}
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="index_service" :class="{ 'active': route.path === '/index_service' }">
|
||||
<NuxtLink to="/index_service/" :class="{ 'active': route.path === '/index_service/' }">
|
||||
{{ $t('index_services') }}
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="index_clients" :class="{ 'active': route.path === '/index_clients' }">
|
||||
<NuxtLink to="/index_clients/" :class="{ 'active': route.path === '/index_clients/' }">
|
||||
{{ $t('index_clients') }}
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="index_news" :class="{ 'active': route.path === '/index_news' }">
|
||||
<NuxtLink to="/index_news/" :class="{ 'active': route.path === '/index_news/' }">
|
||||
{{ $t('index_news') }}
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li>
|
||||
<NuxtLink to="index_contact" :class="{ 'active': route.path === '/index_contact' }">
|
||||
<NuxtLink to="/index_contact/" :class="{ 'active': route.path === '/index_contact/' }">
|
||||
{{ $t('index_contact') }}
|
||||
</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="header_lang hidden md:flex space-x-4">
|
||||
<span @click="$i18n.locale = 'zh'" class="cursor-pointer">中文版</span>
|
||||
<span @click="$i18n.locale = 'en'" class="cursor-pointer">English</span>
|
||||
<span @click="changeLanguage('zh')" class="cursor-pointer">中文版</span>
|
||||
<span @click="changeLanguage('en')" class="cursor-pointer">English</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -68,27 +68,27 @@
|
||||
</NuxtLink>
|
||||
</li>
|
||||
<li class="py-2">
|
||||
<NuxtLink to="index_about" :class="{ 'active': route.path === '/index_about' }" @click="closeMenu">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<NuxtLink to="/index_contact/" :class="{ 'active': route.path === '/index_contact/' }" @click="closeMenu">
|
||||
{{ $t('index_contact') }}
|
||||
</NuxtLink>
|
||||
</li>
|
||||
@ -105,7 +105,8 @@
|
||||
import { ref } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
import { useStore } from '~/store'
|
||||
const store = useStore()
|
||||
const route = useRoute()
|
||||
const isMenuOpen = ref(false)
|
||||
const { locale } = useI18n()
|
||||
@ -120,6 +121,8 @@ const closeMenu = () => {
|
||||
|
||||
const changeLanguage = (lang: string) => {
|
||||
locale.value = lang
|
||||
localStorage.setItem('isEnglish', lang)
|
||||
//store.setIsEnglish(lang)
|
||||
closeMenu()
|
||||
}
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@ import { isUndef } from './is'
|
||||
|
||||
// 正式环境
|
||||
export const PROD_ENV = {
|
||||
SERVER_URL: '/api/', // 服务地址
|
||||
SERVER_URL: 'http://naweigetetest2.hschool.com.cn/', // 服务地址
|
||||
IS_DEV: 'false', // 是否是测试环境
|
||||
}
|
||||
|
||||
|
||||
@ -2,8 +2,24 @@
|
||||
import { defineNuxtConfig } from 'nuxt/config'
|
||||
|
||||
export default defineNuxtConfig({
|
||||
app: {
|
||||
baseURL:'/web/',
|
||||
},
|
||||
nitro: {
|
||||
routeRules: {
|
||||
'/**': { trailingSlash: false }
|
||||
}
|
||||
},
|
||||
router: {
|
||||
extendRoutes(routes, resolve) {
|
||||
routes.push({
|
||||
name: 'index_info',
|
||||
path: '/params/:param1', // * 表示可选的多个参数
|
||||
component: resolve(__dirname, 'pages/index_info.vue')
|
||||
});
|
||||
}
|
||||
},
|
||||
ssr: false,
|
||||
|
||||
css: [
|
||||
'swiper/css',
|
||||
'swiper/css/mousewheel',
|
||||
|
||||
292
pages/index.vue
292
pages/index.vue
@ -11,13 +11,14 @@
|
||||
}">
|
||||
<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') }}
|
||||
{{ locale == 'zh' ? store.tempApiData.company_name : store.tempApiData.en_company_name }}
|
||||
</div>
|
||||
<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="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>
|
||||
swiper-animate-duration="0.5s" swiper-animate-delay="0.4s">{{ locale == 'zh' ?
|
||||
top_one.home_one_text : top_one.en_home_one_text }}</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="md:text-lg text-base font-light ani" swiper-animate-effect="fadeInUp"
|
||||
@ -29,11 +30,13 @@
|
||||
<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-[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"
|
||||
<template v-for="(item, index) in store.serApiData">
|
||||
<img @click="shareToLink(item)" :src="item.img"
|
||||
class="w-[25px] h-[25px] md:w-[30px] md:h-[30px] cursor-pointer">
|
||||
<span v-if="index !== store.serApiData.length - 1"
|
||||
class="mx-[10px] md:mx-[17px] border-r-2 border-white h-[25px] md:h-[30px] mb-[-12px]"></span>
|
||||
</template>
|
||||
<!-- <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>
|
||||
@ -42,18 +45,21 @@
|
||||
<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">
|
||||
class="w-[25px] h-[25px] md:w-[30px] md:h-[30px] cursor-pointer"> -->
|
||||
</div>
|
||||
|
||||
<!-- 导航链接 -->
|
||||
<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>
|
||||
<NuxtLink to="/index_about/" class="text-white mb-1 md:mb-0">{{ $t('index_about') }}</NuxtLink>
|
||||
<NuxtLink to="/index_service/" class="text-white mb-1 md:mb-0">{{ $t('index_services') }}
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/index_clients/" class="text-white mb-1 md:mb-0">{{ $t('index_clients') }}
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/index_news/" class="text-white mb-1 md:mb-0">{{ $t('index_news') }}</NuxtLink>
|
||||
<NuxtLink to="/index_contact/" class="text-white mb-1 md:mb-0">{{ $t('index_contact') }}
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
@ -70,22 +76,25 @@
|
||||
<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>
|
||||
swiper-animate-duration="0.5s" swiper-animate-delay="0.1s">{{ locale == 'zh' ?
|
||||
top_two.home_two_title : top_two.en_home_two_title }}</h2>
|
||||
<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>
|
||||
swiper-animate-delay="0.1s">{{
|
||||
locale == 'zh' ?
|
||||
top_two.home_two_desc : top_two.en_home_two_desc }}</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>
|
||||
<NuxtLink to="/index_clients" class="text-white">{{ $t('index_m3') }}</NuxtLink>
|
||||
<img src="/images/group7.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<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-[250px] md:w-[400px] mx-auto">
|
||||
<img :src="top_two.home_two_img" class="w-[250px] md:w-[400px] mx-auto">
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full h-px bg-white my-5 md:my-10"></div>
|
||||
@ -94,27 +103,33 @@
|
||||
<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>
|
||||
<h4 class="t2 text-lg md:text-xl font-semibold">{{ locale == 'zh' ?
|
||||
top_two.home_two_left_title : top_two.en_home_two_left_title }}</h4>
|
||||
<div class="mt-[10px] md:mt-[15px] leading-[22px] md:leading-[26px] tracking-[1px]">{{ locale ==
|
||||
'zh' ?
|
||||
top_two.home_two_left_desc : top_two.en_home_two_left_desc }}</div>
|
||||
</div>
|
||||
<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-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>
|
||||
<h4 class="t2 text-lg md:text-xl font-semibold">{{ locale == 'zh' ?
|
||||
top_two.home_two_center_title : top_two.en_home_two_center_title }}</h4>
|
||||
<div class="mt-[10px] md:mt-[15px] leading-[22px] md:leading-[26px] tracking-[1px]">{{ locale ==
|
||||
'zh' ?
|
||||
top_two.home_two_center_desc : top_two.en_home_two_center_desc }}</div>
|
||||
</div>
|
||||
<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-full md:w-[205px] 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_m6') }}</h4>
|
||||
<div class="mt-[10px] md:mt-[15px] leading-[22px] md:leading-[26px] tracking-[1px]">{{
|
||||
$t('index_m6_1') }}</div>
|
||||
<h4 class="t2 text-lg md:text-xl font-semibold">{{ locale == 'zh' ?
|
||||
top_two.home_two_right_title : top_two.en_home_two_right_title }}</h4>
|
||||
<div class="mt-[10px] md:mt-[15px] leading-[22px] md:leading-[26px] tracking-[1px]">{{ locale ==
|
||||
'zh' ?
|
||||
top_two.home_two_right_desc : top_two.en_home_two_right_desc }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -133,7 +148,13 @@
|
||||
<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">
|
||||
<temple v-for="(item, index) in store.serApiData">
|
||||
<img @click="shareToLink(item)" :src="item.img"
|
||||
class="w-[30px] h-[30px] md:w-[35px] md:h-[35px] cursor-pointer">
|
||||
<div v-if="index !== store.serApiData.length - 1"
|
||||
class="w-[28px] md:w-[33px] h-[1px] bg-[#DEDEDE] mx-auto my-2"></div>
|
||||
</temple>
|
||||
<!-- <div class="mr-2 md:mr-0">
|
||||
<img @click="shareToInstagram" src="/images/group11.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>
|
||||
@ -151,7 +172,7 @@
|
||||
<div>
|
||||
<img @click="shareToX" src="/images/group12.png"
|
||||
class="w-[30px] h-[30px] md:w-[35px] md:h-[35px] cursor-pointer">
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -162,36 +183,25 @@
|
||||
height: '100%'
|
||||
}">
|
||||
<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>
|
||||
swiper-animate-duration="0.5s" swiper-animate-delay="0.1s">{{ locale == 'zh' ?
|
||||
top_three.home_three_title : top_three.en_home_three_title }}</h3>
|
||||
<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') }}
|
||||
{{ locale == 'zh' ? top_three.home_three_desc : top_three.en_home_three_desc }}
|
||||
</div>
|
||||
<div class="px-4 md:px-[150px] py-3 md:py-5">
|
||||
<div class="flex flex-wrap md:flex-row justify-center">
|
||||
<div class="flex flex-wrap md:flex-row justify-center" v-if="top_three.home_three_img">
|
||||
<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>
|
||||
<img :src="top_three.home_three_img[0]" class="w-[90%] md:w-[80%] mx-auto">
|
||||
</div>
|
||||
<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>
|
||||
<img :src="top_three.home_three_img[1]" class="w-[90%] md:w-[80%] mx-auto">
|
||||
</div>
|
||||
<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>
|
||||
<img :src="top_three.home_three_img[2]" class="w-[90%] md:w-[80%] mx-auto">
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full h-px bg-[#1C1C1C] my-3 md:my-5"></div>
|
||||
@ -199,7 +209,7 @@
|
||||
|
||||
<div class="flex items-center ani" swiper-animate-effect="zoomIn" swiper-animate-duration="0.5s"
|
||||
swiper-animate-delay="0.1s">
|
||||
<NuxtLink to="/content" class="text-[#0c1923]">{{ $t('index_m3') }}</NuxtLink>
|
||||
<NuxtLink to="/index_clients" class="text-[#0c1923]">{{ $t('index_m3') }}</NuxtLink>
|
||||
<img src="/images/group7-1.png" alt="">
|
||||
</div>
|
||||
|
||||
@ -212,23 +222,24 @@
|
||||
<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] text-sm md:text-base">{{
|
||||
$t('index_contact') }}
|
||||
<div class="text-[#337ab7] cursor-pointer hover:text-[#175FCB] text-sm md:text-base">
|
||||
<NuxtLink to="/index_contact/"> {{ $t('index_contact') }}</NuxtLink>
|
||||
</div>
|
||||
<div class="box3zx1"></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] text-sm md:text-base">{{
|
||||
$t('index_about') }}
|
||||
<div class="text-[#337ab7] cursor-pointer hover:text-[#175FCB] text-sm md:text-base">
|
||||
<NuxtLink to="/index_news/">{{ $t('index_news') }}</NuxtLink>
|
||||
</div>
|
||||
<div class="box3zx1"></div>
|
||||
<div class="text-[#337ab7] cursor-pointer hover:text-[#175FCB] text-sm md:text-base">{{
|
||||
$t('index_services') }}
|
||||
<div class="text-[#337ab7] cursor-pointer hover:text-[#175FCB] text-sm md:text-base">
|
||||
<NuxtLink to="/index_about/">{{ $t('index_about') }}</NuxtLink>
|
||||
</div>
|
||||
<div class="box3zx1"></div>
|
||||
<div class="text-[#337ab7] cursor-pointer hover:text-[#175FCB] text-sm md:text-base">{{
|
||||
$t('index_clients') }}
|
||||
<div class="text-[#337ab7] cursor-pointer hover:text-[#175FCB] text-sm md:text-base">
|
||||
<NuxtLink to="/index_service/">{{ $t('index_services') }}</NuxtLink>
|
||||
</div>
|
||||
<div class="box3zx1"></div>
|
||||
<div class="text-[#337ab7] cursor-pointer hover:text-[#175FCB] text-sm md:text-base">
|
||||
<NuxtLink to="/index_clients/">{{ $t('index_clients') }}</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box19y">
|
||||
@ -238,7 +249,13 @@
|
||||
<div class="float-right text-center">
|
||||
<img @click="scrollToTop" src="/images/group97-1.png" class="w-[35px] h-[35px] cursor-pointer">
|
||||
<div class="w-[33px] h-[2px] bg-[#A8CBFF] mx-auto my-2"></div>
|
||||
<img @click="shareToInstagram" src="/images/group11-1.png"
|
||||
<template v-for="(item, index) in store.serApiData">
|
||||
<img @click="shareToLink(item)" :src="item.img_two"
|
||||
class="w-[35px] h-[35px] cursor-pointer">
|
||||
<div v-if="index !== store.serApiData.length - 1"
|
||||
class="w-[33px] h-[2px] bg-[#A8CBFF] mx-auto my-2"></div>
|
||||
</template>
|
||||
<!-- <img @click="shareToInstagram" src="/images/group11-1.png"
|
||||
class="w-[35px] h-[35px] cursor-pointer">
|
||||
<div class="w-[33px] h-[2px] bg-[#A8CBFF] mx-auto my-2"></div>
|
||||
<img @click="shareToYoutube" src="/images/group14-1.png"
|
||||
@ -247,14 +264,14 @@
|
||||
<img @click="shareToFacebook" src="/images/group13-1.png"
|
||||
class="w-[35px] h-[35px] cursor-pointer">
|
||||
<div class="w-[33px] h-[2px] bg-[#A8CBFF] mx-auto my-2"></div>
|
||||
<img @click="shareToX" src="/images/group12-1.png" class="w-[35px] h-[35px] cursor-pointer">
|
||||
<img @click="shareToX" src="/images/group12-1.png" class="w-[35px] h-[35px] cursor-pointer"> -->
|
||||
</div>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
|
||||
<!-- 第四个滑块 -->
|
||||
<swiper-slide class="swiper-slide-a" :style="{
|
||||
backgroundImage: `url('/images/group159.png')`,
|
||||
backgroundImage: `url(${bgImage4})`,
|
||||
backgroundPosition: 'center center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundSize: '100% 100%',
|
||||
@ -265,19 +282,20 @@
|
||||
<div class="flex justify-center">
|
||||
<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>
|
||||
swiper-animate-delay="0.1s">{{ locale == 'zh'
|
||||
? top_four.home_four_title : top_four.en_home_four_title }}</h2>
|
||||
<div class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s"
|
||||
swiper-animate-delay="0.1s"
|
||||
style="line-height: 25px;margin-top: 30px;color: #606060;font-size: 14px;">{{ $t('index_a2')
|
||||
}}
|
||||
</div>
|
||||
style="line-height: 25px;margin-top: 30px;color: #606060;font-size: 14px;">
|
||||
{{ locale == 'zh'
|
||||
? top_four.home_four_desc : top_four.en_home_four_desc }}</div>
|
||||
<div class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.5s"
|
||||
swiper-animate-delay="0.1s"
|
||||
style="width: 100%; height: 1px; background-color: #F1F1F1; margin: 20px auto;"></div>
|
||||
<div class="ani flex items-center justify-end" swiper-animate-effect="fadeInLeft"
|
||||
swiper-animate-duration="0.5s" swiper-animate-delay="0.1s">
|
||||
<div>
|
||||
<NuxtLink to="/content" class="text-[#0c1923]">{{ $t('index_m3') }}</NuxtLink>
|
||||
<NuxtLink to="/index_about/" class="text-[#0c1923]">{{ $t('index_m3') }}</NuxtLink>
|
||||
</div>
|
||||
<div>
|
||||
<img src="/images/group6.png" class="w-5 ml-[5px]">
|
||||
@ -295,13 +313,10 @@
|
||||
<div class="box1ybi float-right">
|
||||
<img class="back-to-top py-[6px] cursor-pointer" src="/images/group97.png" @click="scrollToTop">
|
||||
<div class="box1ybz"></div>
|
||||
<img @click="shareToInstagram" src="/images/group11.png" class="py-[6px] cursor-pointer">
|
||||
<div class="box1ybz"></div>
|
||||
<img @click="shareToYoutube" src="/images/group14.png" class="py-[6px] cursor-pointer">
|
||||
<div class="box1ybz"></div>
|
||||
<img @click="shareToFacebook" src="/images/group13.png" class="py-[6px] cursor-pointer">
|
||||
<div class="box1ybz"></div>
|
||||
<img @click="shareToX" src="/images/group12.png" class="py-[6px] cursor-pointer">
|
||||
<template v-for="(item, index) in store.serApiData">
|
||||
<img @click="shareToLink(item)" :src="item.img" class="py-[6px] cursor-pointer">
|
||||
<div class="box1ybz"></div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="array absolute bottom-[50px]">
|
||||
@ -321,7 +336,7 @@
|
||||
<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>
|
||||
<NuxtLink to="/index_clients" class="text-[#0c1923]">{{ $t('index_m3') }}</NuxtLink>
|
||||
</div>
|
||||
<div>
|
||||
<img src="/images/group7-1.png" class="w-5 ml-[5px]">
|
||||
@ -337,14 +352,16 @@
|
||||
<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]">
|
||||
<nuxtLink :to="`/info/${item.id}`" target="_blank"
|
||||
class="text-[#0c1923]">
|
||||
{{ locale == "en" ? item.en_title : item.title }}
|
||||
</a>
|
||||
</nuxtLink>
|
||||
</h3>
|
||||
<h5 class="text-[#606060] mt-[25px] leading-[25px] line-clamp-2">
|
||||
<a :href="item.url" target="_blank" class="text-[#0c1923]">
|
||||
<nuxtLink :to="`/info/${item.id}`" target="_blank"
|
||||
class="text-[#0c1923]">
|
||||
{{ locale == "en" ? item.en_synopsis : item.synopsis }}
|
||||
</a>
|
||||
</nuxtLink>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
@ -364,14 +381,12 @@
|
||||
<div class="box1ybi float-right">
|
||||
<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>
|
||||
<img @click="shareToYoutube" src="/images/group14-1.png" class="py-[6px] cursor-pointer">
|
||||
<div class="box1ybz"></div>
|
||||
<img @click="shareToFacebook" src="/images/group13-1.png" class="py-[6px] cursor-pointer">
|
||||
<div class="box1ybz"></div>
|
||||
<img @click="shareToX" src="/images/group12-1.png" class="py-[6px] cursor-pointer">
|
||||
<div class="box1ybz2"></div>
|
||||
<template v-for="(item, index) in store.serApiData">
|
||||
<img @click="shareToLink(item)" :src="item.img_two"
|
||||
class="h-[35px] w-[35px] cursor-pointer">
|
||||
<div v-if="index !== store.serApiData.length - 1" class="box1ybz2"></div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</swiper-slide>
|
||||
@ -389,15 +404,21 @@ import 'swiper/css/navigation'
|
||||
import * as swiperAni from '@/assets/animate/animate.js'
|
||||
import $api from '@/service/webRequest'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useStore } from '~/store'
|
||||
const { locale } = useI18n()
|
||||
// 新闻数据
|
||||
const leftImg = ref();
|
||||
const newsList = ref([])
|
||||
const isMobile = ref(false)
|
||||
const store = useStore()
|
||||
onMounted(() => {
|
||||
//获取是在pc还是手机端
|
||||
isMobile.value = window.innerWidth < 768
|
||||
getNewsList();
|
||||
topOneList();
|
||||
topTwoList();
|
||||
topThreeList();
|
||||
topFourList();
|
||||
})
|
||||
const getNewsList = () => {
|
||||
$api.get("/api/article/new/list")
|
||||
@ -410,11 +431,58 @@ const getNewsList = () => {
|
||||
console.dir(err)
|
||||
})
|
||||
}
|
||||
const top_one=ref({});
|
||||
const top_two=ref({});
|
||||
const top_three=ref({});
|
||||
const top_four=ref({});
|
||||
const topOneList = () => {
|
||||
$api.get("/api/sys_config?name=top_one")
|
||||
.then((res: any) => {
|
||||
console.log(res)
|
||||
top_one.value = res.data.data.config
|
||||
})
|
||||
.catch((err) => {
|
||||
console.dir(err)
|
||||
})
|
||||
}
|
||||
const topTwoList = () => {
|
||||
$api.get("/api/sys_config?name=top_two")
|
||||
.then((res: any) => {
|
||||
console.log(res)
|
||||
top_two.value = res.data.data.config
|
||||
})
|
||||
.catch((err) => {
|
||||
console.dir(err)
|
||||
})
|
||||
}
|
||||
const topThreeList = () => {
|
||||
$api.get("/api/sys_config?name=top_three")
|
||||
.then((res: any) => {
|
||||
console.log(res)
|
||||
top_three.value = res.data.data.config
|
||||
})
|
||||
.catch((err) => {
|
||||
console.dir(err)
|
||||
})
|
||||
}
|
||||
const topFourList = () => {
|
||||
$api.get("/api/sys_config?name=top_four")
|
||||
.then((res: any) => {
|
||||
console.log(res)
|
||||
top_four.value = res.data.data.config
|
||||
})
|
||||
.catch((err) => {
|
||||
console.dir(err)
|
||||
})
|
||||
}
|
||||
// 导入背景图片
|
||||
const bgImage = 'images/Group157.png'
|
||||
|
||||
// 添加第二个背景图片
|
||||
const bgImage2 = '/images/Group157.png'
|
||||
const bgImage2 = 'images/Group157.png'
|
||||
|
||||
// 添加第四个背景图片
|
||||
const bgImage4 = 'images/group159.png'
|
||||
|
||||
// Swiper实例
|
||||
let swiperInstance: any = null
|
||||
@ -479,22 +547,10 @@ const onSlideChange = () => {
|
||||
}
|
||||
|
||||
// 社交分享功能
|
||||
const shareToInstagram = () => {
|
||||
const shareToLink = (item) => {
|
||||
// 实现Instagram分享
|
||||
window.open(item.link, '_blank');
|
||||
}
|
||||
|
||||
const shareToYoutube = () => {
|
||||
// 实现YouTube分享
|
||||
}
|
||||
|
||||
const shareToFacebook = () => {
|
||||
// 实现Facebook分享
|
||||
}
|
||||
|
||||
const shareToX = () => {
|
||||
// 实现X/Twitter分享
|
||||
}
|
||||
|
||||
// 添加回到顶部功能
|
||||
const scrollToTop = () => {
|
||||
if (swiperInstance) {
|
||||
@ -533,6 +589,25 @@ const scrollToTop = () => {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
// 添加媒体查询，针对手机端优化
|
||||
@media (max-width: 768px) {
|
||||
.t1::after {
|
||||
@ -569,6 +644,10 @@ const scrollToTop = () => {
|
||||
|
||||
}
|
||||
|
||||
.box19y {
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.box19y span {
|
||||
margin-left: 0.1rem;
|
||||
border-right: 2px solid #A8CBFF;
|
||||
@ -616,4 +695,15 @@ const scrollToTop = () => {
|
||||
transform: translate(0, 10px);
|
||||
}
|
||||
}
|
||||
|
||||
.box1ybz {
|
||||
width: 33px;
|
||||
border-top: 1px solid #DEDEDE;
|
||||
}
|
||||
|
||||
.box1ybz2 {
|
||||
padding-top: 10px;
|
||||
width: 33px;
|
||||
border-top: 1px solid #a8cbff;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<!-- Banner section with background image -->
|
||||
<div class="aboutimgBg h-[300px] md:h-[600px]" :style="{
|
||||
backgroundColor: '#fff',
|
||||
backgroundImage: `url(/images/group195.png)`,
|
||||
backgroundImage: `url(${bgImage4})`,
|
||||
backgroundPosition: 'center center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundSize: 'cover',
|
||||
@ -13,7 +13,7 @@
|
||||
}">
|
||||
<div class="banDes">
|
||||
<div class="aboutTit text-center">
|
||||
<h2 class="font-semibold animated fadeInLeft text-2xl md:text-4xl">{{ $t('index_name') }}</h2>
|
||||
<h2 class="font-semibold animated fadeInLeft text-2xl md:text-4xl">{{ locale=='zh'?info.about_title:info.en_about_title }}</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -33,7 +33,7 @@
|
||||
<div class="flex flex-col items-center animated fadeInUp">
|
||||
<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-xl md:text-2xl font-medium text-[#333]">{{ $t('about_a3') }}</h3>
|
||||
<h3 class="text-xl md:text-2xl font-medium text-[#333]">{{ locale=='zh'?info.about_desc:info.en_about_desc }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -67,7 +67,7 @@
|
||||
|
||||
<!-- Second banner section with background image -->
|
||||
<div class="aboutimgBg1 text-center py-8 md:py-16 h-auto min-h-[400px] md:h-[700px]" :style="{
|
||||
backgroundImage: `url(/images/maskgroup1.png)`,
|
||||
backgroundImage: `url(${bgImage5})`,
|
||||
backgroundPosition: 'center center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundSize: 'cover',
|
||||
@ -86,9 +86,26 @@
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
import bgImage4 from '../public/images/group195.png'
|
||||
import bgImage5 from '../public/images/maskgroup1.png'
|
||||
import $api from '@/service/webRequest'
|
||||
import { useStore } from '~/store'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
const { locale } = useI18n()
|
||||
onMounted(() => {
|
||||
getInfo();
|
||||
})
|
||||
const info=ref({});
|
||||
const getInfo=()=>{
|
||||
$api.get("/api/sys_config?name=about_us")
|
||||
.then((res: any) => {
|
||||
console.log(res)
|
||||
info.value = res.data.data.config
|
||||
})
|
||||
.catch((err) => {
|
||||
console.dir(err)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -183,7 +200,7 @@ onMounted(() => {
|
||||
|
||||
.oneBox1Bg1imgt h3::after {
|
||||
content: '';
|
||||
margin-top: -8px;
|
||||
margin: 0 auto;
|
||||
width: 40px;
|
||||
height: 12px;
|
||||
@media (min-width: 768px) {
|
||||
@ -193,6 +210,7 @@ onMounted(() => {
|
||||
}
|
||||
background: #A8CBFF;
|
||||
display: block;
|
||||
margin-top: -8px;
|
||||
}
|
||||
|
||||
.oneBox1Bg1h {
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="bg-white">
|
||||
<!-- Banner section with background image -->
|
||||
<div class="aboutimgBg h-[300px] md:h-[600px]" :style="{
|
||||
backgroundImage: `url(/images/maskgroup2.png)`,
|
||||
backgroundImage: `url(${bgImage5})`,
|
||||
backgroundSize: 'cover',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
@ -24,23 +24,32 @@
|
||||
</div>
|
||||
<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 class="clientBg1imgdx w-full md:w-[300px] mb-6 md:mb-0 flex justify-center md:justify-start">
|
||||
<img class="oneBox1Bg1img1 w-[150px] md:w-[400px] h-[200px] md:h-[400px] object-contain" :src="info.image" alt="Client">
|
||||
</div>
|
||||
<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>
|
||||
<h3 style="display: inline-block;" class="text-2xl md:text-[40px] font-bold mb-2">{{ locale == 'zh' ? info.name : info.en_name }}</h3>
|
||||
<h4 class="text-base md:text-xl text-[#606060] mt-4 md:mt-[30px] px-4 md:px-0">{{ locale == 'zh' ? info.context : info.en_context }}</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-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 class="mt-8">
|
||||
<!-- 使用 Swiper 实现左右滚动 -->
|
||||
<swiper
|
||||
:modules="[SwiperAutoplay]"
|
||||
:slides-per-view="slidesPerView"
|
||||
:loop="true"
|
||||
:autoplay="{
|
||||
delay: 3000,
|
||||
disableOnInteraction: false
|
||||
}"
|
||||
class="client-swiper"
|
||||
>
|
||||
<swiper-slide v-for="item in list" :key="item.id" class="flex justify-center">
|
||||
<img @click="info = item" :src="item.image" class="w-[150px] md:w-[200px] h-auto cursor-pointer" alt="Client">
|
||||
</swiper-slide>
|
||||
</swiper>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -49,11 +58,47 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onMounted } from 'vue'
|
||||
import { onMounted, ref, computed } from 'vue'
|
||||
import $api from '@/service/webRequest'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useStore } from '~/store'
|
||||
// 导入 Swiper 相关模块
|
||||
import { Swiper, SwiperSlide } from 'swiper/vue'
|
||||
import { Navigation, Pagination, Autoplay } from 'swiper/modules'
|
||||
import 'swiper/css'
|
||||
import 'swiper/css/navigation'
|
||||
import 'swiper/css/pagination'
|
||||
|
||||
// 添加第五个背景图片
|
||||
import bgImage5 from '../public/images/maskgroup2.png'
|
||||
|
||||
const { locale } = useI18n()
|
||||
const SwiperNavigation = Navigation
|
||||
const SwiperPagination = Pagination
|
||||
const SwiperAutoplay = Autoplay
|
||||
|
||||
onMounted(() => {
|
||||
// You can add any code that needs to run after component is mounted
|
||||
getList();
|
||||
})
|
||||
const list = ref([])
|
||||
const info = ref({})
|
||||
|
||||
// 根据屏幕宽度计算显示的幻灯片数量
|
||||
const slidesPerView = computed(() => {
|
||||
return window.innerWidth < 768 ? 2 : 5
|
||||
})
|
||||
|
||||
const getList = () => {
|
||||
$api.get("/api/caseinfo/customer")
|
||||
.then((res: any) => {
|
||||
console.log(res)
|
||||
list.value = res.data.data
|
||||
info.value = res.data.data[0]
|
||||
})
|
||||
.catch((err) => {
|
||||
console.dir(err)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -103,7 +148,7 @@ onMounted(() => {
|
||||
height: 16px;
|
||||
@media (min-width: 768px) {
|
||||
margin-top: -20px;
|
||||
width: 250px;
|
||||
width: 100%;
|
||||
height: 20px;
|
||||
margin-left: -4px;
|
||||
}
|
||||
@ -119,8 +164,8 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.clientimg {
|
||||
justify-content: center;
|
||||
.client-swiper {
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -15,11 +15,11 @@
|
||||
<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>
|
||||
<span class="text-base md:text-lg break-all">{{ store.tempApiData.luoyang_sales_hotline }}</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>
|
||||
<span class="text-base md:text-lg break-all">{{ store.tempApiData.site_mail }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -62,10 +62,7 @@
|
||||
<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">
|
||||
<img v-for="(item, index) in store.serApiData" @click="shareToLink(item)" class="w-8 h-8 md:w-10 md:h-10 cursor-pointer hover:opacity-80 transition" :src="item.img_two" alt="Youtube">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -77,18 +74,25 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const { locale,t} = useI18n()
|
||||
import { useStore } from '~/store'
|
||||
import $api from '@/service/webRequest'
|
||||
const store = useStore()
|
||||
// 表单数据
|
||||
const formData = reactive({
|
||||
name: '',
|
||||
mobile: '',
|
||||
content: ''
|
||||
})
|
||||
|
||||
// 社交分享功能
|
||||
const shareToLink = (item) => {
|
||||
// 实现Instagram分享
|
||||
window.open(item.link, '_blank');
|
||||
}
|
||||
// 表单提交方法
|
||||
const submitForm = () => {
|
||||
console.log(formData);
|
||||
|
||||
// 这里可以添加表单验证逻辑
|
||||
if (!formData.name) {
|
||||
alert(t('contact_name_required'))
|
||||
@ -99,17 +103,26 @@ const submitForm = () => {
|
||||
alert(t('contact_mobile_required'))
|
||||
return
|
||||
}
|
||||
|
||||
// 在实际应用中，这里应该调用API提交表单数据
|
||||
console.log('提交表单数据:', formData)
|
||||
|
||||
// 模拟提交成功
|
||||
alert(t('contact_submit_success'))
|
||||
|
||||
if (!formData.content) {
|
||||
alert(t('contact_content_required'))
|
||||
return
|
||||
}
|
||||
$api.post("/api/leave_word",formData)
|
||||
.then((res: any) => {
|
||||
console.log(res)
|
||||
if(res.data.status==200){
|
||||
alert(t('contact_success'))
|
||||
}else{
|
||||
alert(t('contact_error'))
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.dir(err)
|
||||
})
|
||||
// 重置表单
|
||||
formData.name = ''
|
||||
formData.mobile = ''
|
||||
formData.content = ''
|
||||
// formData.name = ''
|
||||
// formData.mobile = ''
|
||||
// formData.content = ''
|
||||
}
|
||||
|
||||
// 社交媒体分享方法
|
||||
|
||||
@ -44,7 +44,7 @@
|
||||
<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">
|
||||
<NuxtLink :to="'/info/' + news.id" target="_blank" class="text-[#0c1923] hover:text-blue-600">
|
||||
{{ getCurrentLanguage() === 'zh' ? news.title : news.en_title || news.title }}
|
||||
</NuxtLink>
|
||||
</h2>
|
||||
@ -52,7 +52,7 @@
|
||||
{{ 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"
|
||||
<NuxtLink :to="'/info/' + 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>
|
||||
@ -73,7 +73,7 @@
|
||||
</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">
|
||||
<NuxtLink :to="'/info/' + news.id" target="_blank" class="text-[#0c1923] hover:text-blue-600">
|
||||
{{ getCurrentLanguage() == 'zh' ? news.title : (news.en_title || news.title) }}
|
||||
</NuxtLink>
|
||||
</h3>
|
||||
@ -81,7 +81,7 @@
|
||||
{{ 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" />
|
||||
<img :src="news.image_input[0]" class="news2g10 w-full md:w-1/3 h-[200px] md:h-full object-cover rounded-lg" alt="News thumbnail" />
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
@ -201,8 +201,6 @@ const formatDate = (dateStr: string) => {
|
||||
}
|
||||
|
||||
const getCurrentLanguage = () => {
|
||||
console.log(locale.value);
|
||||
|
||||
return locale.value
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<div class="bg-white">
|
||||
<!-- Banner section with background image -->
|
||||
<div class="aboutimgBg h-[300px] md:h-[600px]" :style="{
|
||||
backgroundImage: `url(/images/servicegroup.png)`,
|
||||
backgroundImage: `url(${bgImage4})`,
|
||||
backgroundSize: 'cover',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
@ -99,7 +99,7 @@
|
||||
|
||||
<!-- Contact section with background image -->
|
||||
<div class="servicesBg2 py-10 md:py-16 text-center h-[350px] md:h-[600px]" :style="{
|
||||
backgroundImage: `url(/images/serve4.png)`,
|
||||
backgroundImage: `url(${bgImage5})`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center center',
|
||||
display: 'flex',
|
||||
@ -110,7 +110,7 @@
|
||||
<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] text-base md:text-2xl">{{ $t('index_contact') }}</NuxtLink>
|
||||
<NuxtLink to="/index_contact/" class="text-[#0c1923] text-base md:text-2xl">{{ $t('index_contact') }}</NuxtLink>
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
@ -120,6 +120,11 @@
|
||||
<script lang="ts" setup>
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
// 添加第四个背景图片
|
||||
import bgImage4 from '../public/images/servicegroup.png'
|
||||
|
||||
import bgImage5 from '../public/images/serve4.png'
|
||||
|
||||
onMounted(() => {
|
||||
// 可以在这里添加任何需要在组件挂载后执行的代码
|
||||
})
|
||||
|
||||
156
pages/info/[id].vue
Normal file
156
pages/info/[id].vue
Normal file
@ -0,0 +1,156 @@
|
||||
<template>
|
||||
<div class="aboutimgBg" :style="{
|
||||
backgroundImage: `url(${bgImage5})`,
|
||||
backgroundSize: 'cover',
|
||||
}">>
|
||||
<div class="banDes">
|
||||
<div class="newsxq1Tit text-center">
|
||||
<h2 class="text-[20px] md:text-[50px] text-black">
|
||||
{{locale == 'zh' ? info.title : info.en_title }}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="newsxq1Bg">
|
||||
<div class="container px-4 md:px-[15px]">
|
||||
<div class="newsxq1Box1 text-center mt-6 md:mt-[40px]">
|
||||
<h2>{{ info.add_time }}</h2>
|
||||
<div class="newsxq1di mx-auto md:mx-0"></div>
|
||||
<h4 class="mt-4 md:mt-[30px] break-all text-base md:text-[24px]">
|
||||
<p v-html="locale == 'zh' ? info.content : info.en_content"></p>
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
// 添加第五个背景图片
|
||||
import bgImage5 from '../public/images/newsxq1.png'
|
||||
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import $api from '@/service/webRequest'
|
||||
|
||||
const route = useRoute()
|
||||
const { locale } = useI18n()
|
||||
const id = ref('')
|
||||
const info = ref({})
|
||||
|
||||
onMounted(() => {
|
||||
id.value = route.params.id;
|
||||
getInfo()
|
||||
})
|
||||
const getInfo=()=>{
|
||||
$api.get("/api/article/details/"+id.value)
|
||||
.then((res: any) => {
|
||||
console.log(res)
|
||||
info.value = res.data.data
|
||||
})
|
||||
.catch((err) => {
|
||||
console.dir(err)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.aboutimgBg {
|
||||
height: 300px;
|
||||
@media (min-width: 768px) {
|
||||
height: 600px;
|
||||
}
|
||||
}
|
||||
.banDes {
|
||||
position: relative;
|
||||
left: auto;
|
||||
top: auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #FFFFFF;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
.newsxq1Tit {
|
||||
margin-top: -50px;
|
||||
margin-left: 0;
|
||||
padding: 0 15px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
margin-top: -462px;
|
||||
margin-left: 13px;
|
||||
}
|
||||
}
|
||||
.newsxq1Bg {
|
||||
height: auto;
|
||||
margin-top: -100px; /* 修改这里，让内容区域更靠近顶部 */
|
||||
margin-left: 0;
|
||||
padding-bottom: 30px;
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
height: 300px;
|
||||
margin-top: -308px;
|
||||
margin-left: 64px;
|
||||
}
|
||||
}
|
||||
.container {
|
||||
width: 100%;
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
width: 1310px;
|
||||
}
|
||||
}
|
||||
.newsxq1Box1 h2 {
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
color: #1C1C1C;
|
||||
line-height: 24px;
|
||||
letter-spacing: 2px;
|
||||
text-align: center;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
font-size: 30px;
|
||||
line-height: 28px;
|
||||
letter-spacing: 4px;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
.newsxq1Box1 h2::after {
|
||||
content: '';
|
||||
margin: -10px auto 0;
|
||||
width: 180px;
|
||||
height: 16px;
|
||||
background: #A8CBFF;
|
||||
display: block;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
margin-top: -15px;
|
||||
margin-left: 0;
|
||||
margin-right: auto;
|
||||
width: 265px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
.newsxq1di {
|
||||
width: 200px;
|
||||
border-top: 2px solid #1C1C1C;
|
||||
margin: 10px auto;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
width: 379px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -84,5 +84,13 @@ export default {
|
||||
contact_b3: 'Your contact information',
|
||||
contact_b4: 'Leave what you want to say',
|
||||
contact_b5: 'Send Out',
|
||||
contact_b6: 'Follow us'
|
||||
contact_b6: 'Follow us',
|
||||
|
||||
contact_name_required: 'Name is required',
|
||||
contact_phone_required: 'Phone number is required',
|
||||
contact_message_required: 'Message is required',
|
||||
//提交成功
|
||||
contact_success_title: 'Thank you for your submission',
|
||||
//提交失败
|
||||
contact_fail_title: 'Submission failed',
|
||||
}
|
||||
|
||||
@ -83,5 +83,13 @@ export default {
|
||||
contact_b3: '您的联系方式',
|
||||
contact_b4: '留言',
|
||||
contact_b5: '发送',
|
||||
contact_b6: '关注我们'
|
||||
contact_b6: '关注我们',
|
||||
|
||||
contact_name_required: '请输入您的姓名',
|
||||
contact_phone_required: '请输入您的联系方式',
|
||||
contact_message_required: '请输入留言内容',
|
||||
//提交成功
|
||||
contact_success: '提交成功',
|
||||
//提交失败
|
||||
contact_error:'提交失败',
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 691 B |
Binary file not shown.
|
Before Width: | Height: | Size: 671 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 954 B |
Binary file not shown.
|
Before Width: | Height: | Size: 104 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
@ -2,10 +2,13 @@ import axios, { type AxiosInstance } from 'axios'
|
||||
import { handleError } from './handleError'
|
||||
|
||||
function createRequestInstance(getServerUrl: () => string): AxiosInstance {
|
||||
//获取域名
|
||||
const serverUrl = window.location.origin;
|
||||
//console.log(serverUrl);
|
||||
const instance = axios.create({
|
||||
timeout: 1000 * 60 * 5, // 超时时间
|
||||
withCredentials: true, // 允许跨域携带cookie
|
||||
baseURL: `${getServerUrl()}/`, // 请求地址
|
||||
baseURL: serverUrl, // 请求地址
|
||||
})
|
||||
|
||||
instance.interceptors.response.use(
|
||||
|
||||
@ -3,16 +3,30 @@ import { defineStore, acceptHMRUpdate } from 'pinia'
|
||||
export const useStore = defineStore({
|
||||
id: 'index',
|
||||
state: () => ({
|
||||
name: 'old name',
|
||||
// 添加临时数据存储字段
|
||||
tempApiData: {}, // 存储API返回的临时数据
|
||||
serApiData: {}, // 存储API返回的临时数据
|
||||
isEnglish: 'zh', // 判断是否是英文
|
||||
}),
|
||||
getters: {
|
||||
myName: state => {
|
||||
return `getters ${state.name}`
|
||||
},
|
||||
// 获取临时API数据的getter
|
||||
getTempApiData: state => state.tempApiData,
|
||||
},
|
||||
actions: {
|
||||
changeName(name: string) {
|
||||
this.name = name
|
||||
// 保存API返回的临时数据
|
||||
saveTempApiData(data: any) {
|
||||
this.tempApiData = data
|
||||
},
|
||||
saveSerApiData(data: any) {
|
||||
this.serApiData = data
|
||||
},
|
||||
// 判断是否是英文
|
||||
setIsEnglish(value: string) {
|
||||
this.isEnglish = value
|
||||
},
|
||||
// 清除临时数据
|
||||
clearTempApiData() {
|
||||
this.tempApiData = {}
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user