You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
231 lines
8.7 KiB
231 lines
8.7 KiB
<template>
|
|
<div class="footer-box">
|
|
<div class="footer w-1200">
|
|
<div class="flex justify-between items-center footer-item1">
|
|
<div class="flex items-center">
|
|
<img class="w-[45px]" src="~/assets/image/logo.png"/>
|
|
<p class="logo-name">{{ locale == 'zh' ? siteInfo.siteName : siteInfo.siteNameEn }}</p>
|
|
</div>
|
|
|
|
<div class="tr">
|
|
<!-- 邮箱 -->
|
|
|
|
<NPopover :z-index="100"
|
|
arrow-style="background: linear-gradient(180deg, rgba(137,107,52,1) 1%,rgba(250,235,201,1) 100%);"
|
|
:raw="true" trigger="hover" placement="bottom">
|
|
<template #trigger>
|
|
<div class="ml-6">
|
|
|
|
<div class="flex items-center cursor-pointer">
|
|
<img class="w-[24px]" src="~/assets/image/mail.png"/>
|
|
<p class="ml-[10px]">{{ $t('email') }}</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template #default>
|
|
<div class="lxfs flex flex-col justify-center items-center">
|
|
<p>{{ siteInfo.email }}</p>
|
|
<template v-if="siteInfo.emailImage">
|
|
<img :src="siteInfo.emailImage" class="cover-fill w-[100px] h-[100px] code mt-2"/>
|
|
<p class="py-1"></p>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
</NPopover>
|
|
<!-- WhatsApp -->
|
|
|
|
<NPopover :z-index="100"
|
|
arrow-style="background: linear-gradient(180deg, rgba(137,107,52,1) 1%,rgba(250,235,201,1) 100%);"
|
|
:raw="true" trigger="hover" placement="bottom">
|
|
<template #trigger>
|
|
<div class="ml-6">
|
|
|
|
<div class="flex items-center cursor-pointer">
|
|
<img class="w-[24px]" src="~/assets/image/phone2.png"/>
|
|
<p class="ml-[10px]">{{ $t('WhatsApp') }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
<template #default>
|
|
<div class="lxfs flex flex-col justify-center items-center">
|
|
<p>{{ siteInfo.whatsapp }}</p>
|
|
<img v-if="siteInfo.whatsappImage" :src="siteInfo.whatsappImage"
|
|
class="cover-fill w-[100px] h-[100px] code mt-2 /">
|
|
<p v-if="siteInfo.whatsappImage" class="py-1"></p>
|
|
</div>
|
|
</template>
|
|
</NPopover>
|
|
<!-- LinkedIn-->
|
|
<NPopover :z-index="100"
|
|
arrow-style="background: linear-gradient(180deg, rgba(137,107,52,1) 1%,rgba(250,235,201,1) 100%);"
|
|
:raw="true" trigger="hover" placement="bottom">
|
|
<template #trigger>
|
|
<div class="ml-6">
|
|
<div class="flex items-center cursor-pointer">
|
|
<img class="w-[24px]" src="~/assets/image/in.png"/>
|
|
<p class="ml-[10px]">{{ $t('LinkedIn') }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
<template #default>
|
|
<div class="lxfs flex flex-col justify-center items-center">
|
|
<p>{{ siteInfo.linkedin }}</p>
|
|
<img v-if="siteInfo.linkedinImage" :src="siteInfo.linkedinImage"
|
|
class="cover-fill w-[100px] h-[100px] code mt-2 /">
|
|
<p v-if="siteInfo.linkedinImage" class="py-1"></p>
|
|
</div>
|
|
</template>
|
|
</NPopover>
|
|
<!-- 微信 -->
|
|
|
|
<NPopover :z-index="100"
|
|
arrow-style="background: linear-gradient(180deg, rgba(137,107,52,1) 1%,rgba(250,235,201,1) 100%);"
|
|
:raw="true" trigger="hover" placement="bottom">
|
|
<template #trigger>
|
|
<div class="ml-6">
|
|
|
|
<div class="flex items-center cursor-pointer">
|
|
<img class="w-[24px]" src="~/assets/image/weixin.png"/>
|
|
<p class="ml-[10px]">{{ $t('wechat') }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
<template #default>
|
|
<div class="lxfs flex flex-col justify-center items-center">
|
|
<p>{{ siteInfo.wechat }}</p>
|
|
<img v-if="siteInfo.wechatImage" :src="siteInfo.wechatImage"
|
|
class="cover-fill w-[100px] h-[100px] code mt-2 /">
|
|
<p v-if="siteInfo.wechatImage" class="py-1"></p>
|
|
</div>
|
|
</template>
|
|
</NPopover>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
<div class="footer-item2 flex justify-between items-center">
|
|
<div class="flex">
|
|
<div class=" wow animate__fadeInUp mr-[50px]">
|
|
<p style="color: #FFFFFF;font-size: 17px">{{ $t('link') }}</p>
|
|
<NuxtLink class="mt-[13px]" :to="localePath('/about')"
|
|
style="color: rgba(255,255,255,.6);font-size: 14px ;display: block">{{ $t('aboutUs') }}
|
|
</NuxtLink>
|
|
<NuxtLink class="mt-[7px]" :to="localePath('/service')"
|
|
style="color: rgba(255,255,255,.6);font-size: 14px; display: block">{{ $t('service') }}
|
|
</NuxtLink>
|
|
<NuxtLink class="mt-[7px]" :to="localePath('/product')"
|
|
style="color: rgba(255,255,255,.6);font-size: 14px; display: block">{{ $t('product') }}
|
|
</NuxtLink>
|
|
<NuxtLink class="mt-[7px]" :to="localePath('/african-video')"
|
|
style="color: rgba(255,255,255,.6);font-size: 14px ;display: block">{{ $t('africanVideo') }}
|
|
</NuxtLink>
|
|
<NuxtLink class="mt-[7px]" :to="localePath('/news')"
|
|
style="color: rgba(255,255,255,.6);font-size: 14px; display: block">{{ $t('news') }}
|
|
</NuxtLink>
|
|
</div>
|
|
<div class="wow animate__fadeInUp mr-[50px]">
|
|
<div>
|
|
<p style="color: #FFFFFF ;font-size: 17px;margin-bottom: 12px;text-align: center;">
|
|
{{ $t('wxOfficialAccounts') }}</p>
|
|
<img :src="siteInfo.wxgzhImage" class="cover-fill w-[100px] h-[100px] code">
|
|
</div>
|
|
</div>
|
|
<div class="wow animate__fadeInUp mr-[50px]">
|
|
<div>
|
|
<p style="color: #FFFFFF ;font-size: 17px;margin-bottom: 12px;text-align: center;">{{ $t('wxMP') }}</p>
|
|
<img :src="siteInfo.wxmpImage" class="cover-fill w-[100px] h-[100px] code">
|
|
</div>
|
|
</div>
|
|
<div class="wow animate__fadeInUp mr-[50px]">
|
|
<div>
|
|
<p style="color: #FFFFFF ;font-size: 17px;margin-bottom: 12px;text-align: center;">{{ $t('weCom') }}</p>
|
|
<img :src="siteInfo.wecomImage" class="cover-fill w-[100px] h-[100px] code">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<p class="flex items-center wow animate__backInRight" style="flex-direction: row-reverse;">
|
|
<span style="color: #896B34;font-size: 35px;font-weight: bold;">{{ siteInfo.phone }}</span>
|
|
<img class="w-[30px] mr-[8px] h-[30px]" src="~/assets/image/phone.png"/>
|
|
</p>
|
|
<!-- <p style="font-size: 14px;color: rgba(255,255,255,.4);margin-top: 20px" class="text-right">{{siteInfo.siteDesc}}</p>-->
|
|
<p style="font-size: 14px;color: rgba(255,255,255,.6)" class="text-right">
|
|
{{ $t('address') }}：{{ locale == 'zh' ? siteInfo.address : siteInfo.addressEn }}</p>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<p class="" style="font-size: 14px;color: rgba(255,255,255,.4);margin-top: 20px;">
|
|
{{ locale == 'zh' ? siteInfo.companyName : siteInfo.companyNameEn }} {{ $t('icp') }}:
|
|
{{ locale == 'zh' ? siteInfo.pov : siteInfo.pov }}</p>
|
|
<p class="" style="font-size: 14px;color: rgba(255,255,255,.4);margin-top: 20px;">{{ $t('contactUs') }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import {NPopover} from 'naive-ui'
|
|
|
|
const {locale} = useI18n()
|
|
const siteInfo = useSiteInfo()
|
|
const localePath = useLocalePath()
|
|
</script>
|
|
<style scoped>
|
|
.footer-box {
|
|
//background: #363636; background-image: url("~/assets/image/footer-bg.png"); background-size: contain;
|
|
}
|
|
|
|
.footer {
|
|
height: 480px;
|
|
}
|
|
|
|
.footer-place {
|
|
height: 400px;
|
|
}
|
|
|
|
.logo-name {
|
|
font-size: 20px;
|
|
color: rgba(255, 255, 255, .87);
|
|
margin-left: 15px;
|
|
}
|
|
|
|
|
|
.tr {
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
color: rgba(255, 255, 255, .87);
|
|
font-size: 18px;
|
|
}
|
|
|
|
|
|
.footer-item1 {
|
|
border-bottom: 1px solid rgba(255, 255, 255, .1);
|
|
height: 120px;
|
|
}
|
|
|
|
.footer-item2 {
|
|
border-bottom: 1px solid rgba(255, 255, 255, .1);
|
|
height: 210px;
|
|
}
|
|
|
|
.footer-item2 img {
|
|
object-fit: cover;
|
|
}
|
|
|
|
.code {
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.lxfs {
|
|
background: linear-gradient(180deg, rgba(137, 107, 52, 1) 1%, rgba(250, 235, 201, 1) 100%);
|
|
padding: 5px 10px;
|
|
border-radius: 4px;
|
|
color: #303030;
|
|
font-size: 16px;
|
|
}
|
|
</style>
|