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.
689 lines
17 KiB
689 lines
17 KiB
<template>
|
|
<div>
|
|
<!-- 轮播图-->
|
|
<NCarousel draggable autoplay class="carousel">
|
|
<img v-for="item in bannerList"
|
|
class="carousel-img w-full"
|
|
:src="item.picUrl"
|
|
/>
|
|
</NCarousel>
|
|
<!-- 关于我们-->
|
|
<div class="about-box ">
|
|
<ClientOnly>
|
|
<vue-particles id="particles" :particlesInit="particlesInit" :options="particlesJson"
|
|
:particlesLoaded="particlesLoaded"></vue-particles>
|
|
</ClientOnly>
|
|
|
|
<div class="about">
|
|
<div class="about-header flex justify-between items-center">
|
|
<p class="about-title">
|
|
<img class="about-title-left" src="~/assets/aboutindex.png"/>
|
|
{{ locale == 'zh' ? aboutArticle.title : aboutArticle.titleEn }}
|
|
</p>
|
|
<NuxtLink :to="localePath('/about')" class="about-more hover:opacity-75">{{ $t('readMord') }} >>
|
|
</NuxtLink>
|
|
</div>
|
|
<div class="about-body flex justify-between">
|
|
<div class="about-body-left wow animate__slideInLeft"
|
|
v-html="locale =='zh'?aboutArticle.content:aboutArticle.contentEn">
|
|
</div>
|
|
<div class="wow animate__slideInRight">
|
|
<div class="about-body-right">
|
|
<img :src="aboutArticle.picUrl"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 最新资讯 start -->
|
|
<div class="news ">
|
|
<div style="height: 38px"></div>
|
|
<div class="news-header w-1440">
|
|
<p class="news-header-title wow animate__bounceIn">-{{ $t('news') }}-</p>
|
|
<NuxtLink :to="localePath('/news')" class="news-more hover:opacity-75">{{ $t('readMord') }} >></NuxtLink>
|
|
</div>
|
|
<div class="news-carousel-box wow animate__fadeInUp">
|
|
<NCarousel style="height: 350px" :default-index="1" centered-slides draggable :slides-per-view="3"
|
|
prev-slide-style="transform: translateX(-170%) translateZ(-200px);opacity: 1;"
|
|
next-slide-style="transform: translateX(70%) translateZ(-200px);opacity: 1;"
|
|
effect="card">
|
|
<NCarouselItem v-for="(item, index) in articleDataList" :key="item.id" class="news-carousel-item">
|
|
<NuxtLink :to="localePath('/news-detail/' + item.id)" class="news-item">
|
|
<img class="news-item-img" :src="item.picUrl"/>
|
|
<p class="news-item-title truncate">{{ locale == 'zh' ? item.title : item.titleEn }}</p>
|
|
</NuxtLink>
|
|
</NCarouselItem>
|
|
</NCarousel>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<!-- 最新资讯 end -->
|
|
|
|
<!-- 走近非洲 start -->
|
|
<div class="african">
|
|
<div style="height: 52px"></div>
|
|
<div class="news-header ">
|
|
<p style="color: #896B34" class="news-header-title wow animate__flip">-{{ $t('africanVideo') }}-</p>
|
|
</div>
|
|
<!-- 视频列表-->
|
|
<div class="w-1440 pt-6 wow animate__fadeInUp">
|
|
<NuxtLink v-for="(item, index) in videoDataList" :to="localePath('/video-detail/' + item.id)"
|
|
class="africen inline-block cursor-pointer">
|
|
<div class="africen-img-box" @mouseleave="item.play = false" @mouseover="item.play = true">
|
|
<video v-if="item.play" autoplay muted class="africen-img-cover" :src="item.videoUrl"/>
|
|
<video v-if="!item.picUrl" v-show="!item.play" muted class="africen-img" :src="item.videoUrl"/>
|
|
<img v-if="item.picUrl" v-show="!item.play" muted class="africen-img" :src="item.picUrl"/>
|
|
<div class="africen-video-desc">
|
|
<div class="view-num pl-2">
|
|
<p class="flex items-center">
|
|
<NIcon :component="VideocamOutline" size="25"></NIcon>
|
|
<span class="ml-1">{{ item.viewsCount }}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="africen-title py-2 truncate">{{ locale == 'zh' ? item.title : item.titleEn }}</p>
|
|
<div class="africen-desc">
|
|
<div class="africen-time">{{ dayjs(item.createTime).format('YYYY-MM-DD') }}</div>
|
|
</div>
|
|
</NuxtLink>
|
|
|
|
</div>
|
|
|
|
<div class="flex justify-center">
|
|
<NuxtLink :to="localePath('/african-video')"
|
|
class="africen-more hover:opacity-75 flex items-center justify-center">
|
|
<img style="width: 28px;margin-right: 10px" src="~/assets/image/md-remove.png"/>
|
|
{{ $t('readMord') }}
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 走近非洲 end -->
|
|
|
|
|
|
<!-- 服务与产品 start -->
|
|
<div class="service-product">
|
|
<div class="w-1200 wow animate__fadeInLeftBig">
|
|
<div class="flex justify-between border-b">
|
|
<div class="tabs flex">
|
|
<div @click="activeKey = 'service'" :class="{active: activeKey === 'service'}" class="tab">{{
|
|
$t('service')
|
|
}}
|
|
</div>
|
|
<div @click="activeKey = 'product'" :class="{active: activeKey === 'product'}" class="tab">{{
|
|
$t('product')
|
|
}}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<NuxtLink :to="localePath('/product')" class="product-more">{{ $t('readMord') }}>></NuxtLink>
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane-box">
|
|
<div v-show="activeKey == 'service'" class="tab-pane">
|
|
<!-- :to="localePath({name: 'news-detail',params: {id: item.id}})"-->
|
|
<NuxtLink :class="{animate__headShake:item.hover,animate__animated: item.hover}"
|
|
@mouseleave="item.hover = false" @mouseover="item.hover = true"
|
|
v-for="(item, index) in serviceDataList"
|
|
:to="localePath('/news-detail/' + item.id)"
|
|
class="product flex justify-between py-8">
|
|
<div class="flex">
|
|
<img class="product-img" :src="item.picUrl"/>
|
|
<div class="ml-8">
|
|
<p class="product-title">{{ locale == 'zh' ? item.title : item.titleEn }}</p>
|
|
<p class="product-content">{{ locale == 'zh' ? item.content : item.contentEn }}</p>
|
|
<p class="product-desc"><span style="color: #906D2C;">{{ item.viewsCount }}</span>
|
|
{{ $t('viewsCount') }} <span class="pl-4">{{ dayjs(item.createTime).format('YYYY-MM-DD') }}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<p class="btn-detail">{{ $t('detail') }}</p>
|
|
</NuxtLink>
|
|
</div>
|
|
|
|
<div v-show="activeKey == 'product'" class="tab-pane">
|
|
<!-- :to="localePath({name: 'news-detail',params: {id: item.id}})"-->
|
|
<NuxtLink :class="{animate__headShake:item.hover,animate__animated: item.hover}"
|
|
@mouseleave="item.hover = false" @mouseover="item.hover = true"
|
|
v-for="(item, index) in productDataList"
|
|
:to="localePath('/news-detail/' + item.id)"
|
|
class="product flex justify-between py-8">
|
|
<div class="flex">
|
|
<img class="product-img" :src="item.picUrl"/>
|
|
<div class="ml-8">
|
|
<p class="product-title">{{ locale == 'zh' ? item.title : item.titleEn }}</p>
|
|
<p class="product-content">{{ locale == 'zh' ? item.content : item.contentEn }}</p>
|
|
<p class="product-desc"><span style="color: #906D2C;">{{ item.viewsCount }}</span>
|
|
{{ $t('viewsCount') }} <span class="pl-4">{{ dayjs(item.createTime).format('YYYY-MM-DD') }}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<p class="btn-detail">{{ $t('detail') }}</p>
|
|
</NuxtLink>
|
|
</div>
|
|
</div>
|
|
<!-- 分页-->
|
|
<!-- <div class="flex justify-center py-8">-->
|
|
<!-- <NPagination :item-count="productItemCount" simple/>-->
|
|
<!-- </div>-->
|
|
</div>
|
|
</div>
|
|
<!-- 服务与产品 end -->
|
|
<!-- 加载动画 -->
|
|
<div v-if="loadIng"
|
|
class="w-screen h-screen fixed bg-white top-0 left-0 right-0 bottom-0 flex items-center justify-center z-[999]">
|
|
|
|
<!-- <div class="">-->
|
|
|
|
<!-- </div>-->
|
|
<span class="loading">
|
|
<span class="loading-inner">
|
|
<img class="" src="~/assets/image/logo.png" />
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
<script setup lang="ts">
|
|
import {NCarousel, NPagination, NCarouselItem, NIcon, NSpin} from 'naive-ui'
|
|
import {getArticle, getArticleList} from '~/api/article'
|
|
|
|
const siteInfo = useSiteInfo()
|
|
const {locale} = useI18n()
|
|
const localePath = useLocalePath()
|
|
const dayjs = useDayjs()
|
|
import {VideocamOutline} from '@vicons/ionicons5'
|
|
// 设置标题
|
|
useHead({
|
|
title: `金梦网`
|
|
})
|
|
const activeKey = ref<String>('service')
|
|
|
|
const loadIng = ref<Boolean>(true)
|
|
|
|
|
|
// 关于我们 背景动画
|
|
import {particlesJson} from '~/assets/particles'
|
|
import {loadSlim} from "tsparticles-slim"
|
|
import {Engine} from "tsparticles-engine";
|
|
import {getVideoList} from "~/api/video";
|
|
import {getBanner} from "~/api/site";
|
|
|
|
const particlesInit = async (engine: Engine) => {
|
|
//await loadFull(engine);
|
|
await loadSlim(engine);
|
|
};
|
|
|
|
const particlesLoaded = async (container: any) => {
|
|
console.log("Particles container loaded", container);
|
|
};
|
|
|
|
// 其他动画
|
|
onMounted(() => {
|
|
loadIng.value = false
|
|
})
|
|
setTimeout(() => {
|
|
loadIng.value = false
|
|
}, 10000)
|
|
// 轮播图
|
|
const bannerList = ref<any[]>([])
|
|
getBanner({
|
|
position: 1
|
|
}).then((res: any) => {
|
|
bannerList.value = res
|
|
})
|
|
|
|
//获取视频
|
|
const videoPageParams = {
|
|
pageNo: 1,
|
|
pageSize: 8
|
|
}
|
|
|
|
const videoItemCount = ref(0)
|
|
const videoDataList = ref<any[]>([])
|
|
const videoPageChange = (pageNo: number) => {
|
|
getVideoList(videoPageParams).then((res: any) => {
|
|
videoDataList.value = res.list
|
|
videoItemCount.value = res.total
|
|
})
|
|
|
|
}
|
|
videoPageChange(1)
|
|
|
|
// 获取资讯
|
|
const articleDataList = ref<any[]>([])
|
|
getArticleList({
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
categoryId: 28
|
|
}).then((res: any) => {
|
|
articleDataList.value = res.list
|
|
})
|
|
// 获取产品
|
|
const productItemCount = ref(0)
|
|
const productDataList = ref<any[]>([{}])
|
|
const serviceDataList = ref<any[]>([{}])
|
|
getArticleList({
|
|
pageNo: 1,
|
|
pageSize: 3,
|
|
categoryId: 30
|
|
}).then((res: any) => {
|
|
if (process.client) {
|
|
res.list.forEach(item => {
|
|
// 创建一个临时的div元素
|
|
var tempDiv = document.createElement('div');
|
|
|
|
tempDiv.innerHTML = item.content;
|
|
var plainText = tempDiv.textContent;
|
|
item.content = plainText
|
|
|
|
tempDiv.innerHTML = item.contentEn;
|
|
plainText = tempDiv.textContent;
|
|
item.contentEn = plainText
|
|
|
|
})
|
|
}
|
|
productDataList.value = res.list
|
|
})
|
|
getArticleList({
|
|
pageNo: 1,
|
|
pageSize: 3,
|
|
categoryId: 31
|
|
}).then((res: any) => {
|
|
if (process.client) {
|
|
res.list.forEach(item => {
|
|
// 创建一个临时的div元素
|
|
var tempDiv = document.createElement('div');
|
|
|
|
tempDiv.innerHTML = item.content;
|
|
var plainText = tempDiv.textContent;
|
|
item.content = plainText
|
|
|
|
tempDiv.innerHTML = item.contentEn;
|
|
plainText = tempDiv.textContent;
|
|
item.contentEn = plainText
|
|
|
|
})
|
|
}
|
|
|
|
serviceDataList.value = res.list
|
|
})
|
|
// 获取关于我们
|
|
const aboutArticle = ref<any>({})
|
|
getArticle({
|
|
id: 36
|
|
}).then((res: any) => {
|
|
if (res) {
|
|
aboutArticle.value = res
|
|
}
|
|
})
|
|
</script>
|
|
<style scoped>
|
|
.btn-detail {
|
|
width: 60px;
|
|
height: 24px;
|
|
line-height: 24px;
|
|
border-radius: 4px;
|
|
background: linear-gradient(180deg, rgba(229, 203, 152, 1) 0%, rgba(250, 235, 201, 1) 100%);
|
|
color: rgba(137, 107, 52, 1);
|
|
font-size: 12px;
|
|
text-align: center;
|
|
}
|
|
|
|
.product {
|
|
border-bottom: 1px solid rgba(137, 107, 52, 0.08);
|
|
}
|
|
|
|
.product-title {
|
|
font-size: 20px;
|
|
color: #333333;
|
|
width: 420px;
|
|
}
|
|
|
|
.product-content {
|
|
font-size: 16px;
|
|
color: #6C6C6C;
|
|
height: 40px;
|
|
line-height: 20px;
|
|
margin: 10px 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
width: 420px;
|
|
|
|
}
|
|
|
|
.product-desc {
|
|
font-size: 12px;
|
|
color: #999999;
|
|
width: 420px;
|
|
|
|
}
|
|
|
|
.product-img {
|
|
width: 200px;
|
|
height: 120px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.product-more {
|
|
color: rgba(229, 203, 152, 1);
|
|
font-size: 14px;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
}
|
|
|
|
.tabs {
|
|
|
|
}
|
|
|
|
.tab {
|
|
width: 130px;
|
|
height: 40px;
|
|
font-size: 18px;
|
|
text-align: center;
|
|
line-height: 40px;
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
.tab.active {
|
|
background: linear-gradient(180deg, rgba(51, 51, 51, 1) 0%, rgba(51, 51, 51, 0.56) 100%);
|
|
color: rgba(229, 203, 152, 1);
|
|
}
|
|
|
|
|
|
.carousel {
|
|
height: 800px;
|
|
}
|
|
|
|
.about {
|
|
width: 1340px;
|
|
margin: 0 auto;
|
|
padding: 70px 0;
|
|
z-index: 20;
|
|
position: sticky;
|
|
|
|
}
|
|
|
|
.about-box {
|
|
position: relative;
|
|
background-image: url("~/assets/image/zixun-bg.jpg");
|
|
background-size: contain;
|
|
background-position: center;
|
|
//background-repeat: no-repeat; background-color: #FFFFFF;
|
|
}
|
|
|
|
#particles {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.about-header {
|
|
}
|
|
|
|
.about-title {
|
|
font-size: 40px;
|
|
position: relative;
|
|
padding-left: 18px;
|
|
color: #101010;
|
|
}
|
|
|
|
.about-title-left {
|
|
width: 6px;
|
|
height: 40px;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
}
|
|
|
|
.about-more {
|
|
width: 130px;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
text-align: center;
|
|
color: #E5CB98;
|
|
background: linear-gradient(180deg, rgba(54, 54, 54, 1) 0%, rgba(132, 132, 132, 1) 99%);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.about-body {
|
|
margin-top: 35px;
|
|
}
|
|
|
|
.about-body-left {
|
|
width: 730px;
|
|
font-size: 18px;
|
|
line-height: 40px;
|
|
}
|
|
|
|
.about-body-right {
|
|
height: auto;
|
|
position: relative;
|
|
width: 497px;
|
|
margin-right: 16px;
|
|
transition: all 0.6s;
|
|
}
|
|
|
|
.about-body-right:hover {
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
.about-body-right::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
background-color: rgba(51, 51, 51, 0.28);
|
|
top: 16px;
|
|
right: -16px;
|
|
z-index: -1;
|
|
}
|
|
|
|
|
|
.news {
|
|
width: 100%;
|
|
height: 610px;
|
|
background-image: url("~/assets/bg-zuixinzixun.png");
|
|
margin: 0 auto;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.news-header {
|
|
height: 58px;
|
|
position: relative;
|
|
}
|
|
|
|
.news-header-title {
|
|
color: #E5CB98;
|
|
font-size: 40px;
|
|
text-align: center;
|
|
line-height: 58px;
|
|
}
|
|
|
|
.news-more {
|
|
width: 130px;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
text-align: center;
|
|
color: #E5CB98;
|
|
background: linear-gradient(180deg, rgba(229, 203, 152, 1) 0%, rgba(250, 235, 201, 1) 99%);
|
|
color: rgba(137, 107, 52, 1);
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
position: absolute;
|
|
right: 50px;
|
|
top: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
}
|
|
|
|
.news-carousel-box {
|
|
width: 1400px;
|
|
|
|
margin: 140px auto 0;
|
|
height: 300px;
|
|
}
|
|
|
|
.news-carousel-item {
|
|
display: block;
|
|
}
|
|
|
|
.news-item {
|
|
width: 430px;
|
|
height: 243px;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
display: block;
|
|
|
|
}
|
|
|
|
.news-item-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.news-item-title {
|
|
background-color: #ffffff;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 45px;
|
|
line-height: 45px;
|
|
font-size: 16px;
|
|
padding: 0 16px;
|
|
display: block;
|
|
}
|
|
|
|
|
|
.africen {
|
|
width: 320px;
|
|
margin: 0 20px 30px;
|
|
}
|
|
|
|
.africen-img-box {
|
|
width: 320px;
|
|
height: 175px;
|
|
position: relative;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.africen-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
z-index: 1;
|
|
}
|
|
|
|
.africen-img-cover {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
z-index: 2;
|
|
}
|
|
|
|
.africen-video-desc {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 25px;
|
|
line-height: 20px;
|
|
background-image: linear-gradient(to top, rgba(0, 0, 0, .5), transparent);
|
|
color: #FFFFFF;
|
|
z-index: 10;
|
|
|
|
}
|
|
|
|
|
|
.africen-time {
|
|
color: #9A9A9A;
|
|
}
|
|
|
|
.africen-more {
|
|
width: 250px;
|
|
height: 50px;
|
|
line-height: 50px;
|
|
border-radius: 4px;
|
|
background: linear-gradient(180deg, rgba(51, 51, 51, 1) 0%, rgba(51, 51, 51, 0.56) 99%);
|
|
color: rgba(229, 203, 152, 1);
|
|
font-size: 16px;
|
|
text-align: center;
|
|
margin: 30px auto;
|
|
}
|
|
|
|
.tab-pane {
|
|
min-height: 100px;
|
|
}
|
|
|
|
.service-product {
|
|
background-image: url("~/assets/image/service-bg.png");
|
|
background-size: contain;
|
|
}
|
|
|
|
/* loading.css */
|
|
.loading {
|
|
display: inline-block;
|
|
width: 100px;
|
|
height: 100px;
|
|
position: relative;
|
|
border: 4px solid #896B34;
|
|
animation: loader 4s infinite ease;
|
|
}
|
|
|
|
.loading-inner {
|
|
vertical-align: top;
|
|
display: inline-block;
|
|
width: 100%;
|
|
background-color: #896B34;
|
|
animation: loader-inner 4s infinite ease-in;
|
|
}
|
|
|
|
@keyframes loader {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
25% {
|
|
transform: rotate(180deg);
|
|
}
|
|
50% {
|
|
transform: rotate(180deg);
|
|
}
|
|
75% {
|
|
transform: rotate(360deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@keyframes loader-inner {
|
|
0% {
|
|
height: 0%;
|
|
}
|
|
25% {
|
|
height: 0%;
|
|
}
|
|
50% {
|
|
height: 100%;
|
|
}
|
|
75% {
|
|
height: 100%;
|
|
}
|
|
100% {
|
|
height: 0%;
|
|
}
|
|
}
|
|
|
|
</style>
|