535 lines
16 KiB
Vue
535 lines
16 KiB
Vue
<template>
|
|
<!-- 首页 -->
|
|
<div class="content">
|
|
<!-- 顶部轮播图 -->
|
|
<b-carousel
|
|
id="carousel-1"
|
|
:interval="4000"
|
|
controls
|
|
indicators
|
|
background="#ababab"
|
|
img-width="1024"
|
|
img-height="480"
|
|
>
|
|
<b-carousel-slide
|
|
v-for="(item,index) in bannerList"
|
|
:key="index"
|
|
:img-src="item.pic"
|
|
:img-alt="item.title"
|
|
>
|
|
<!-- @click.native="goPage(item)" -->
|
|
</b-carousel-slide>
|
|
</b-carousel>
|
|
|
|
<!-- company profile -->
|
|
<section>
|
|
<div class="company-profiler container">
|
|
<h5 class="title">{{ $t('index.companyProfile') }}</h5>
|
|
<h4 class="sub-title">{{ $t('index.corporateName') }}</h4>
|
|
<div
|
|
class="describe d-none d-md-block"
|
|
v-html="$store.state.device === '手机端' ? companyInfo.contentApp : companyInfo.content"
|
|
>
|
|
</div>
|
|
<ul class="advantage row pl-0">
|
|
<li
|
|
v-for="item in advantageList"
|
|
:key="item.title"
|
|
class="col-3 d-flex flex-column align-items-center"
|
|
>
|
|
<b-img :src="item.icon" fluid :alt="item.title"></b-img>
|
|
<nuxt-link class="mt-3" style="color: #878b90;font-size: .875rem;" :to="item.link">
|
|
{{ item.title }}
|
|
</nuxt-link>
|
|
</li>
|
|
</ul>
|
|
<nuxt-link class="more box_shadow" to="/separate?maxCatgId=66c10877ee325e7f5da316e69ceb2eb9&title=About%20Us">{{ $t('common.readMore') }}</nuxt-link>
|
|
<b-img class="word-img" src="../assets/image/backGroundImg/home-world.png" alt="word" fluid ></b-img>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- popular product -->
|
|
<section class="popular-product" style="background-color: #f5f7f9;">
|
|
<div class="company-profiler container mb-4">
|
|
<h5 class="title">{{ $t('index.popularProduct') }}</h5>
|
|
<h4 class="sub-title">{{ $t('index.productDesc') }}</h4>
|
|
</div>
|
|
<b-carousel
|
|
id="carousel-2"
|
|
class="container"
|
|
:interval="4000"
|
|
controls
|
|
indicators
|
|
>
|
|
<b-carousel-slide v-for="(item,index) in hotProductList" :key="index">
|
|
<template v-slot:img>
|
|
<ul class="row pl-0">
|
|
<li class="col-6 col-md-3 mb-4" v-for="son in item" :key="son.id">
|
|
<article class="product-card box_shadow">
|
|
<img class="cover" :src="son.mainPic" :alt="son.title"></img>
|
|
<div class="product-card-content">
|
|
<h4 class="text-ellipsis">{{ son.title }}</h4>
|
|
<div class="text-ellipsis" v-html="son.description"></div>
|
|
<!-- <p>{{ $t('common.truckModel') }}: ZZ4257N3247C1</p>
|
|
<p>{{ $t('common.dimension') }}: 6800x2490x3668</p>
|
|
<p>{{ $t('common.approachingAngle/Departure') }}: 16/70</p> -->
|
|
<nuxt-link class="view-details" :to="`/products/${son.id}?catgId=${son.catgId}&maxCatgId=660179025d0e2e0e4263db0eec86a8cc`">
|
|
{{ $t('common.viewDetails') }}
|
|
<img src="~assets/image/icon/goto.png" :alt="$t('common.viewDetails')" />
|
|
</nuxt-link>
|
|
</div>
|
|
</article>
|
|
</li>
|
|
</ul>
|
|
</template>
|
|
</b-carousel-slide>
|
|
</b-carousel>
|
|
<nuxt-link class="more box_shadow" :to="`/products?maxCatgId=${hotProductList[0].maxCatgId}`">{{ $t('common.readMore') }}</nuxt-link>
|
|
</section>
|
|
|
|
<!-- Products -->
|
|
<section>
|
|
<div class="products container mb-4">
|
|
<h5 class="title">{{ $t('common.products') }}</h5>
|
|
<h4 class="sub-title">{{ $t('common.companyProducts') }}</h4>
|
|
<ul style="margin-top: 1.25rem;" class="row pl-0">
|
|
<li class="col-12 col-md-6 mb-4" v-for="item in productTopList" :key="item.id">
|
|
<article class="products-item box_shadow">
|
|
<nuxt-link :to="`/products/${item.id}?catgId=${item.catgId}&maxCatgId=660179025d0e2e0e4263db0eec86a8cc`" class="row">
|
|
<div class="col-7 col-md-6 pr-0">
|
|
<b-img :src="item.mainPic" fluid :alt="item.title"></b-img>
|
|
</div>
|
|
<div class="products-info col-5 col-md-6">
|
|
<h3 class="text-ellipsis">{{ item.title }}</h3>
|
|
<div class="desc text-ellipsis" v-html="item.description"></div>
|
|
<!-- <p>{{ $t('common.brand') }}: Foton</p>
|
|
<p>{{ $t('common.driveWheel') }}: 8x4</p>
|
|
<p>{{ $t('common.drivingStyle') }}: Left-Hand Driving or Right-hand Driving</p>
|
|
<p>{{ $t('common.placeofOrigin') }}: China</p> -->
|
|
<div class="view-details d-md-block d-none">
|
|
{{ $t('common.viewDetails') }}
|
|
<img src="~assets/image/icon/goto.png" :alt="$t('common.viewDetails')" />
|
|
</div>
|
|
</div>
|
|
</nuxt-link>
|
|
</article>
|
|
</li>
|
|
</ul>
|
|
<nuxt-link class="more box_shadow" :to="`/products?&maxCatgId=${productTopList[0].maxCatgId}`">{{ $t('common.readMore') }}</nuxt-link>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- press center -->
|
|
<section style="background-color: #f5f7f9;">
|
|
<div class="press-center container">
|
|
<h5 class="title">{{ $t('index.pressCenter') }}</h5>
|
|
<h4 class="sub-title">{{ $t('index.realTimeNewsReadingOnline') }}</h4>
|
|
<div class="row mb-4 pl-0">
|
|
<article class="pc-news box_shadow col-md-6 d-none d-md-block" v-if="hotNewsList.length">
|
|
<b-img :src="hotNewsList[0].mainPic" fluid-grow :alt="hotNewsList[0].title"></b-img>
|
|
<div class="pc-news-info">
|
|
<h4 class="text-ellipsis">{{ hotNewsList[0].title }}</h4>
|
|
<p class="text-ellipsis" style="-webkit-line-clamp: 3;">
|
|
{{ hotNewsList[0].description }}
|
|
</p>
|
|
<div class="pc-news-footer">
|
|
<nuxt-link
|
|
class="more box_shadow"
|
|
:to="`/article-page/${hotNewsList[0].id}?&maxCatgId=${hotNewsList[0].maxCatgId}&catgId=${hotNewsList[0].catgId}`"
|
|
>
|
|
{{ $t('common.readMore') }}
|
|
</nuxt-link>
|
|
<span>{{ hotNewsList[0].publicDate}}</span>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<ul class="col-12 col-md-6">
|
|
<li class="new-item box_shadow mb-3" v-for="item in hotNewsList.slice(1, 5)" :key="item.id">
|
|
<article>
|
|
<nuxt-link class="row" :to="`/article-page/${item.id}?&maxCatgId=${item.maxCatgId}&catgId=${item.catgId}`">
|
|
<img class="col-5 cover" :src="item.mainPic" fluid-grow :alt="item.title"></img>
|
|
<div class="news-info col-7">
|
|
<h4 class="text-ellipsis">{{ item.title }}</h4>
|
|
<p class="text-ellipsis" style="-webkit-line-clamp: 3;">
|
|
{{ item.description }}
|
|
</p>
|
|
<footer class="d-flex justify-content-between align-items-center">
|
|
<time>{{ item.publicDate }}</time>
|
|
<img width="27" src="~assets/image/icon/goto1.png" :alt="$t('common.viewDetails')" />
|
|
</footer>
|
|
</div>
|
|
</nuxt-link>
|
|
</article>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<nuxt-link class="more box_shadow mb-4" :to="`/article-page?&maxCatgId=${hotNewsList[0].maxCatgId}`">{{ $t('common.readMore') }}</nuxt-link>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Join our newsletter -->
|
|
<!-- <section style="background-color: #0070de;">
|
|
<div class="join-our-newsletter container">
|
|
<h5 class="title">{{ $t('index.joinOurNewsletter') }}</h5>
|
|
<h4 class="sub-title">{{ $t('index.signUpOurNewsletter') }}</h4>
|
|
<b-input-group class="email-input">
|
|
<b-form-input :placeholder="$t('common.enterEail')"></b-form-input>
|
|
<b-input-group-append>
|
|
<b-button variant="outline-secondary">
|
|
<img src="~assets/image/icon/email.png" :alt="$t('common.E-mail')" />
|
|
{{ $t('common.send') }}
|
|
</b-button>
|
|
</b-input-group-append>
|
|
</b-input-group>
|
|
<ul class="d-flex justify-content-center mb-5">
|
|
<li class="mr-4" v-for="(item,index) in contactList" :key="index">
|
|
<a href="javascript:;">
|
|
<b-img :src="item.icon" :alt="item.alt" fluid></b-img>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</section> -->
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { onMounted } from 'vue'
|
|
|
|
|
|
export default {
|
|
name: 'index',
|
|
data() {
|
|
return {
|
|
// 优势
|
|
advantageList: [
|
|
{
|
|
title: this.$t('index.highQuality'),
|
|
icon: require('../assets/image/icon/high-quality.png'),
|
|
link: '/'
|
|
},
|
|
{
|
|
title: this.$t('index.LEadingbBraNd'),
|
|
icon: require('../assets/image/icon/LEading-braNd.png'),
|
|
link: '/'
|
|
},
|
|
{
|
|
title: this.$t('index.experiencedStaff'),
|
|
icon: require('../assets/image/icon/experienced-staff.png'),
|
|
link: '/'
|
|
},
|
|
{
|
|
title: this.$t('index.advancedEquipment'),
|
|
icon: require('../assets/image/icon/advanced-equipment.png'),
|
|
link: '/'
|
|
}
|
|
],
|
|
// 联系
|
|
contactList: [
|
|
{
|
|
alt: 'facebook',
|
|
icon: require('../assets/image/icon/facebook.png'),
|
|
},
|
|
{
|
|
alt: 'X',
|
|
icon: require('../assets/image/icon/X.png'),
|
|
},
|
|
{
|
|
alt: 'google',
|
|
icon: require('../assets/image/icon/google.png'),
|
|
},
|
|
{
|
|
alt: 'in',
|
|
icon: require('../assets/image/icon/in.png'),
|
|
},
|
|
{
|
|
alt: 'YouTube',
|
|
icon: require('../assets/image/icon/YouTube.png'),
|
|
}
|
|
],
|
|
}
|
|
},
|
|
async asyncData({$axios}) {
|
|
// 轮播图
|
|
const {data: bannerList} = await $axios.get('/web/pic')
|
|
// 公司介绍
|
|
const {data: companyInfo} = await $axios.get('/web/indexCompanyInfo')
|
|
// 热门产品
|
|
const {data: originalArray} = await $axios.get('/web/hotProduct')
|
|
const chunkSize = 4;
|
|
const hotProductList = [];
|
|
for (let i = 0; i < originalArray.length; i += chunkSize) {
|
|
hotProductList.push(originalArray.slice(i, i + chunkSize));
|
|
}
|
|
// 普通产品前十
|
|
const {data: productTopList} = await $axios.get('/web/product')
|
|
// 热门新闻
|
|
const { data: hotNewsList } = await $axios.get('/web/hotNews')
|
|
|
|
return {
|
|
bannerList,
|
|
companyInfo,
|
|
hotProductList,
|
|
productTopList,
|
|
hotNewsList
|
|
}
|
|
},
|
|
mounted() {
|
|
},
|
|
methods: {
|
|
goPage(item) {
|
|
if (item.link) {
|
|
window.open(item.link)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content {
|
|
width: 100%;
|
|
height: 100%;
|
|
section {
|
|
overflow: hidden;
|
|
}
|
|
@mixin commonSector {
|
|
.title {
|
|
margin: 1.625rem 0 .9375rem;
|
|
color: #015fe8;
|
|
font-size: 1.5rem;
|
|
text-align: center;
|
|
font-family: 'SourceHanSansCN-Heavy';
|
|
}
|
|
.sub-title {
|
|
color: #015fe8;
|
|
text-align: center;
|
|
font-size: .875rem;
|
|
font-weight: 400;
|
|
}
|
|
.more {
|
|
margin-top: 3.75rem;
|
|
padding: .5rem 2.1875rem;
|
|
position: relative;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
color: #fff;
|
|
background-color: #015fe8;
|
|
border-radius: 1.875rem;
|
|
font-size: .875rem;
|
|
}
|
|
.view-details {
|
|
width: max-content;
|
|
padding: .375rem 1.5625rem;
|
|
display: flex;
|
|
align-items: center;
|
|
color: #0070de;
|
|
border: .0625rem solid #0070de;
|
|
border-radius: 1.875rem;
|
|
img {
|
|
width: 1.0625rem;
|
|
height: 1.0625rem;
|
|
}
|
|
}
|
|
}
|
|
.company-profiler {
|
|
@include commonSector;
|
|
::v-deep .describe {
|
|
margin-top: 1.125rem;
|
|
margin-bottom: 3.25rem;
|
|
color: #575757;
|
|
font-size: .875rem;
|
|
img {
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
.word-img {
|
|
margin-top: -11.25rem;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
.popular-product {
|
|
@include commonSector;
|
|
#carousel-2 {
|
|
@mixin controls {
|
|
width: 2.875rem;
|
|
height: 2.875rem;
|
|
background-color: #7f7f7f;
|
|
background-size: 1.25rem;
|
|
}
|
|
::v-deep .carousel-control-prev-icon {
|
|
@include controls;
|
|
}
|
|
::v-deep .carousel-control-next-icon {
|
|
@include controls;
|
|
}
|
|
}
|
|
.product-card {
|
|
background-color: #fff;
|
|
.cover {
|
|
width: 100%;
|
|
height: 24.1875rem;
|
|
object-fit: cover;
|
|
}
|
|
.product-card-content {
|
|
padding: 1.125rem 1rem;
|
|
border-top: .0625rem solid #e6e8ec;
|
|
font-size: .875rem;
|
|
>div {
|
|
-webkit-line-clamp: 4;
|
|
}
|
|
h4 {
|
|
margin-bottom: .8125rem;
|
|
-webkit-line-clamp: 1;
|
|
color: #212222;
|
|
font-size: .875rem;
|
|
}
|
|
p {
|
|
color: #878b90;
|
|
}
|
|
.view-details {
|
|
margin: 0 auto;
|
|
margin-top: 2rem;
|
|
}
|
|
}
|
|
}
|
|
.more {
|
|
margin: 2.75rem 0;
|
|
}
|
|
}
|
|
.products {
|
|
@include commonSector;
|
|
.products-item {
|
|
border: .0625rem solid #e4e6ea;
|
|
.products-info {
|
|
padding: 1.3125rem 1rem;
|
|
border-left: .0625rem solid #e6e8ec;
|
|
h3 {
|
|
margin-bottom: 1.75rem;
|
|
color: #212222;
|
|
font-size: .875rem;
|
|
}
|
|
.desc {
|
|
-webkit-line-clamp: 9;
|
|
}
|
|
p {
|
|
color: #878b90;
|
|
font-size: .875rem;
|
|
}
|
|
.view-details {
|
|
margin-top: .625rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.press-center {
|
|
@include commonSector;
|
|
.pc-news {
|
|
background-color: #ffffff;
|
|
.pc-news-info {
|
|
padding: 1.25rem 1.0625rem;
|
|
font-size: .875rem;
|
|
h4 {
|
|
margin-bottom: 1.25rem;
|
|
color: #212222;
|
|
}
|
|
p {
|
|
color: #878b90;
|
|
}
|
|
.pc-news-footer {
|
|
margin-top: 3.8125rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.more {
|
|
position: unset;
|
|
left: 0;
|
|
transform: translateX(0);
|
|
}
|
|
span {
|
|
color: #878b90;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.new-item {
|
|
background-color: #fff;
|
|
.cover {
|
|
height: 12.5rem;
|
|
object-fit: cover;
|
|
}
|
|
.news-info {
|
|
padding: 1.625rem 1.125rem .875rem;
|
|
font-size: .875rem;
|
|
h4 {
|
|
margin-bottom: 1.25rem;
|
|
color: #212222;
|
|
font-size: .875rem;
|
|
}
|
|
p, footer {
|
|
color: #878b90;
|
|
}
|
|
footer {
|
|
margin-top: 1.625rem;
|
|
img {
|
|
margin-right: .625rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.join-our-newsletter {
|
|
@include commonSector;
|
|
.title, .sub-title {
|
|
color: #fff;
|
|
}
|
|
.email-input {
|
|
margin: 2.6875rem auto 1.875rem;
|
|
width: 23.9375rem;
|
|
::v-deep .form-control {
|
|
color: #fff;
|
|
background-color: #0070de;
|
|
border: .0625rem solid #ffffff;
|
|
border-radius: 3.125rem;
|
|
font-size: .875rem;
|
|
z-index: 10;
|
|
&::placeholder {
|
|
color: #a6cdf4;
|
|
font-size: .875rem;
|
|
}
|
|
}
|
|
::v-deep .btn {
|
|
margin-left: -3.75rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #0070de;
|
|
border: none;
|
|
background-color: #fff;
|
|
border-radius: 3.125rem;
|
|
z-index: 99;
|
|
img {
|
|
width: 1.125rem;
|
|
height: 1.125rem;
|
|
margin-right: .375rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.more {
|
|
margin-top: 0 !important;
|
|
}
|
|
}
|
|
|
|
// 特殊样式小屏幕处理
|
|
@media screen and (max-width:780px) {
|
|
.popular-product {
|
|
.product-card {
|
|
.cover {
|
|
height: 11.25rem !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|