generated from nuxt/nuxt_site
397 lines
13 KiB
Vue
397 lines
13 KiB
Vue
<template>
|
||
|
||
<Head>
|
||
<Title>{{ tdk?.tdk_title }}</Title>
|
||
<Meta :content=tdk?.tdk_keyword name="keywords" />
|
||
<Meta :content=tdk?.tdk_description name="description" />
|
||
<Meta name="baidu-site-verification" content="" />
|
||
</Head>
|
||
<Header></Header>
|
||
<Carousel></Carousel>
|
||
|
||
<div class="Home-main">
|
||
<div class="main">
|
||
<section>
|
||
<div class="acard">
|
||
<div class="container">
|
||
<div class="row acardflex">
|
||
<div class="acard_left col-xs-12 col-sm-12 col-md-6 col-lg-6 right op0"
|
||
data-animation="slide-in-blurred-left">
|
||
<div class="videocard_title">
|
||
<span> {{ $t('home.who.title') }} </span>
|
||
<h2>{{ $t('home.who.company') }}</h2>
|
||
<p>{{ $t('home.who.desc') }}</p>
|
||
</div>
|
||
<div class="acard_list">
|
||
<ul>
|
||
<li>
|
||
<div class="acardli">
|
||
<i class="iconfont3"></i>
|
||
<p>{{ $t('home.who.tech') }}</p>
|
||
<div class="acardlicover"></div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="acardli">
|
||
<i class="iconfont"></i>
|
||
<p>{{ $t('home.who.service') }}</p>
|
||
<div class="acardlicover"></div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="acardli">
|
||
<i class="iconfont"></i>
|
||
<p>{{ $t('home.who.price') }}</p>
|
||
<div class="acardlicover"></div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="acard_right col-xs-12 col-sm-12 col-md-6 col-lg-6 left op0"
|
||
data-animation="slide-in-blurred-right">
|
||
<!-- <div class="acardimg videoimgbtn videobtns"> -->
|
||
<!-- <div class="acard_video"> -->
|
||
<video ref="videoPlay" class="acardimg" controls width="100%" autoplay muted="muted"
|
||
:poster="video_url?.home_video_cover ? video_url?.home_video_cover : '/img/home/about-2.jpg'">
|
||
<source :src="video_url?.home_video_url">
|
||
</video>
|
||
<!-- </div> -->
|
||
<!-- </div> -->
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 优质服务 -->
|
||
<section>
|
||
<div class="bcard">
|
||
<div class="bcardcover"></div>
|
||
<div class="container">
|
||
<div class="bcard_title right">
|
||
<span>{{ $t('home.service.our') }}</span>
|
||
<h2>{{ $t('home.service.pro') }}</h2>
|
||
</div>
|
||
<div class="bcard_list op0 " data-animation="slide-in-blurred-left">
|
||
<div class="row">
|
||
|
||
<div class="bcard_li col-xs-12 col-sm-6 col-md-4 col-lg-4" v-for="item in Professional_data">
|
||
<div class="bcard_box">
|
||
<span class="bcardicon"><i class="iconfont2" v-html="item.professional_service_icon"></i></span>
|
||
<div class="bcard_txt">
|
||
<a href="javascrpit:;">
|
||
<h3>{{ item.professional_service_title }}</h3>
|
||
</a>
|
||
<p>{{ item.professional_service_describe }}</p>
|
||
<nuxt-link class="bcard_more" :to="item.professional_service_link">
|
||
<h4>{{ $t('home.service.more') }}</h4>
|
||
<i class="iconfont"></i>
|
||
</nuxt-link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 高光 -->
|
||
<section>
|
||
<div class="number bottom op0" data-animation="slide-in-elliptic-top-fwd">
|
||
<div class="container">
|
||
<div class="number_con">
|
||
<ul>
|
||
<li v-for="item in heightlight_data">
|
||
<span><i class="iconfont"></i></span>
|
||
<p>{{ item.highlights_title }}</p>
|
||
</li>
|
||
|
||
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<section>
|
||
<div class="double_banner">
|
||
|
||
<div style="margin-bottom:20px">
|
||
|
||
<InfiniteRotation
|
||
:openMargin="true"
|
||
:slidesPerView="slidesPerView" :Infinite="true" :direction='false'
|
||
:bannerList="bannerListUp">
|
||
</InfiniteRotation>
|
||
</div>
|
||
<!-- <div>-->
|
||
|
||
<!-- <InfiniteRotation :slidesPerView="slidesPerView" :direction='true' :bannerList="bannerListDown">-->
|
||
<!-- </InfiniteRotation>-->
|
||
<!-- </div>-->
|
||
</div>
|
||
|
||
</section>
|
||
|
||
|
||
|
||
<!-- 第二横幅 -->
|
||
<section>
|
||
<div class="brand colormove" data-animation="slide-in-elliptic-top-fwd">
|
||
|
||
<div class="brand_txt">
|
||
<h2>{{ $t('home.for.title') }}</h2>
|
||
<p>{{ $t('home.for.desc') }}</p>
|
||
|
||
<nuxt-link :to="getHerf('/product/product_list/0-1')">
|
||
<div class="brand_more">
|
||
|
||
{{ $t('home.for.start') }}
|
||
</div>
|
||
</nuxt-link>
|
||
|
||
<!-- <a href="products/index.html" class="brand_more">{{ $t('home.for.start') }}</a> -->
|
||
</div>
|
||
<div class="brandcover"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 产品列表 -->
|
||
<section>
|
||
<div class="allmain">
|
||
<div class="blog_title right op0" data-animation="slide-in-blurred-left">
|
||
<span>{{ $t('home.products.title') }}</span>
|
||
<h2>{{ $t('home.products.desc') }}</h2>
|
||
</div>
|
||
<div class="allmain_list">
|
||
<div class="row allmainflex">
|
||
|
||
<div class="allmain_li col-xs-12 col-sm-6 col-md-6 col-lg-4" v-for="item in product_data">
|
||
<nuxt-link :to="getHerf(getProductLink(item))" class="jump">
|
||
<div class="allmain_box">
|
||
<div class="allmain_cover"></div>
|
||
<a href="javascript:;" class="allmain_txt">
|
||
<h3>{{ item.product_name }}</h3>
|
||
<p>{{ item.product_description }}</p>
|
||
</a>
|
||
<a href="javascript:;" class="allmainimg">
|
||
<img :src="item.product_img" alt="" />
|
||
</a>
|
||
</div>
|
||
</nuxt-link>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<div>
|
||
<img width=100% src="/img/home/38a0b923.png" alt="图片1">
|
||
</div>
|
||
</section>
|
||
<!-- 新闻 -->
|
||
<section>
|
||
<div class="blog">
|
||
<div class="container">
|
||
<div class="blog_title right" data-animation="slide-in-blurred-left">
|
||
<span>{{ $t('home.news.title') }}</span>
|
||
<h2>{{ $t('home.news.desc') }}</h2>
|
||
</div>
|
||
<div class="blog_main">
|
||
<div class="row blogflex">
|
||
|
||
<div class="blog_li col-xs-12 col-sm-6 col-md-6 col-lg-4" v-for="(item, i) in newsList">
|
||
<nuxt-link :to="getHerf(getNewsLink(item))" class="jump">
|
||
<div class="blog_box">
|
||
<div class="blogtime">
|
||
<span>{{ item.news_issue_date_month }}-{{ item.news_issue_date_day }}</span>
|
||
<p>{{ item.news_issue_year }}</p>
|
||
</div>
|
||
<span class="blog_img">
|
||
<img :src="item.news_cover" alt="" />
|
||
</span>
|
||
<div class="blog_txt">
|
||
|
||
<h3> {{ item.news_title }}</h3>
|
||
|
||
<p>{{ item.news_intro }}
|
||
</p>
|
||
<span class="blog_more">
|
||
<span>{{ $t('news.more') }}</span>
|
||
<i class="iconfont"> </i>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</nuxt-link>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section>
|
||
<div class="blog">
|
||
<div class="container">
|
||
<div class="blog_title right" data-animation="slide-in-blurred-left">
|
||
<span>{{ $t('home.partners.title') }}</span>
|
||
<h2>{{ $t('home.partners.desc') }}</h2>
|
||
</div>
|
||
<div class="partners_main">
|
||
<div class="partners_flex">
|
||
<div class=" partners_li" v-for="item in partners_data">
|
||
<!-- <div class="partners_div"> -->
|
||
<img :src="item.partners_img" alt="">
|
||
<!-- </div> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
</div>
|
||
<PopupSidebar></PopupSidebar>
|
||
<PopupMessageUs></PopupMessageUs>
|
||
<Final></Final>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed } from "vue";
|
||
import { fontSizeReactive } from "~/utils/Tool";
|
||
let newsList = ref([
|
||
])
|
||
let product_data = ref([])
|
||
/** 基础变量 **/
|
||
const { t, locale } = useI18n()
|
||
|
||
/**预对接的数据**/
|
||
let openImg1 = ref("/img/home/open/open1.png")
|
||
|
||
|
||
/**
|
||
* 接口对接
|
||
*/
|
||
|
||
// 获取Tdk
|
||
let tdk = ref({})
|
||
useFetch('/api/tdk/getTdk', { params: { tdk_type: 1, locale: locale.value } }).then(res => {
|
||
tdk.value = JSON.parse(res.data.value).data
|
||
})
|
||
let timer_data = reactive(['125', '1250', '850', '135'])
|
||
let _timer_data = reactive(['0', '0', '0', '0'])
|
||
let i = ref('1')
|
||
let key = ref(0)
|
||
|
||
const slidesPerView = ref(7)
|
||
/**onMounted**/
|
||
onMounted(() => {
|
||
// console.log(locale,'locale');
|
||
/**
|
||
* 字体自适应，当小于880的时候字体-=1，480的时候-=1
|
||
* */
|
||
fontSizeReactive({
|
||
880: 1,
|
||
480: 1,
|
||
})
|
||
htmlAddAnimations({
|
||
tagDom: 'Home-main', preload: 1, isRe: true
|
||
})
|
||
const totalHeight = document.body.scrollHeight;
|
||
})
|
||
|
||
const bannerListUp = ref([])
|
||
|
||
await useFetch('/api/home/crossBanner/getCrossBanner').then(res => {
|
||
let data = JSON.parse(res.data.value).data
|
||
const val = data['up']?.map(v => { return { banner_img: v.cross_banner_img, src: '' } })
|
||
if (val.length < 7) val.push(...val)
|
||
bannerListUp.value = val
|
||
|
||
})
|
||
|
||
const videoPlay = ref()
|
||
let video_url = ref('')
|
||
useFetch('/api/home/video/getHomeVideo', { params: { locale: locale.value } }).then(res => {
|
||
video_url.value = JSON.parse(res.data.value).data[0]
|
||
videoPlay.value.src = video_url.value.home_video_url
|
||
})
|
||
const Professional_data = ref([])
|
||
useFetch('/api/home/ProfessionalService/getProfessionalServiceList', { params: { locale: locale.value } }).then(res => {
|
||
Professional_data.value = JSON.parse(res.data.value).data
|
||
// console.log(JSON.parse(res.data.value).data, 'getProfessionalServiceList@@');
|
||
})
|
||
const partners_data = ref([])
|
||
useFetch('/api/home/partners/getPartnersList').then(res => {
|
||
partners_data.value = JSON.parse(res.data.value).data
|
||
// console.log(partners_data.value, '1partners@@');
|
||
})
|
||
const heightlight_data = ref([])
|
||
useFetch('/api/home/Highlights/getHighlightsList', { params: { locale: locale.value } }).then(res => {
|
||
heightlight_data.value = JSON.parse(res.data.value).data
|
||
// console.log(heightlight_data.value, '1heightlight_data@@');
|
||
})
|
||
|
||
|
||
useFetch('/api/product/getHotProductList', { params: { locale: locale.value } }).then(res => {
|
||
let data = []
|
||
JSON.parse(res.data.value).data.forEach(element => {
|
||
element.product_img = element.product_img.split(",")[0];
|
||
product_data.value.push(element)
|
||
});
|
||
})
|
||
|
||
useFetch('/api/news/getNewsList', { params: { idx: 1, locale: locale.value } }).then(res => {
|
||
let data = JSON.parse(res.data.value).data
|
||
for (let i = 0; i < 3; i++) {
|
||
let element = data[i]
|
||
if (!element) break;
|
||
element.news_issue_year = element.news_issue_date?.split("-")[0];
|
||
element.news_issue_date_month = element.news_issue_date?.split("-")[1];
|
||
element.news_issue_date_day = element.news_issue_date?.split("-")[2];
|
||
newsList.value.push(element)
|
||
}
|
||
// console.log(newsList.value, 'news@@');
|
||
})
|
||
|
||
const getNewsLink = function (item) {
|
||
if (item.news_link) {
|
||
return item.news_link;
|
||
} else {
|
||
return "/news/details/" + item.news_id;
|
||
}
|
||
}
|
||
|
||
function getProductLink(item) {
|
||
if (item.product_link) {
|
||
return item.product_link;
|
||
} else {
|
||
return "/product/details/" + item.product_id;
|
||
}
|
||
}
|
||
|
||
/**export**/
|
||
defineExpose({
|
||
middleware: 'auth'
|
||
})
|
||
|
||
</script>
|
||
|
||
<style scoped src="~/assets/css/index/index.scss"></style>
|
||
<style scoped src="~/assets/css/index/media.scss"></style>
|
||
<style scoped src="~/assets/css/IndexDetail/index.scss"></style>
|
||
<style scoped src="~/assets/css/IndexDetail/media.scss"></style>
|
||
<style scoped src="~/assets/css/index/font/iconfont.css"></style>
|
||
<style scoped src="~/assets/css/index/iconfont/iconfont.css"></style>
|
||
<style scoped src="~/assets/css/index/font2/iconfont.css"></style>
|