{extend name="base" /}
{block name="main"}
<style>
.product-button-prev.swiper-button-prev::after, .product-button-next.swiper-button-next::after {
content: ''
}
style>
<div class="container Wauto">
<div class="sliderbox">
<div class="slider">
<div id="slideBox" class="slideBox">
<ul id="slider">
{ld:slide name="banner"}
<li class="slide">
<img src="{$item.image}" alt="{$item.title}"/>
<div class="container slide-content text-center">
{$item.content}
div>
li>
{/ld:slide}
ul>
div>
div>
div>
<div class="main w1200">
<div class="article w1" style="margin: 0">
<div class="g-product" id="app-product">
<div class="continer1">
<div class="product_content">
<div class="g-top wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;">
<h2>产品中心h2>
<h4>PRODUCT CENTERh4>
div>
<div class="product_top wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;">
{ld:nav pid="144"}
<a href="#pro-{$item.id}" class="product {$i===1?'active':''}" @click="handleClickPro({$item.id})">{$item.name}a>
{/ld:nav}
div>
<my-swiper :key="products.length" :reach-end="handleReachEnd" :initial-slide="initialSlide">
<div class="swiper-slide" v-for="(product,index) in products" :key="product.id">
<a :href="product.url" class="product_po wow zoomIn animated" style="visibility: visible; animation-name: zoomIn;">
<div class="pic">
<img :src="product.image"/>
div>
<p>{{product.title}}p>
a>
div>
my-swiper>
<a href="/chanpinzhongxin.html" class="welcome_but wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;">+查看更多a>
div>
div>
div>
{include file="index/company" /}
<div class="g-news" id="app-news">
<div class="continer1">
<div class="news_content">
<div class="g-top wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;">
<h2>新闻资讯h2>
<h4>NEWS INFORMATIONh4>
div>
<div class="news_row">
<div class="news_left wow fadeInLeft animated" style="visibility: visible; animation-name: fadeInLeft;">
<my-swiper-news :key="newsList.length">
<div class="swiper-slide" v-for="(news,index) in imgList" :key="news.id">
<a :href="news.url" class="news_po">
<div class="pic">
<img :src="news.image"/>
div>
<div class="news_po_min">
<p>{{news.title}}p>
div>
a>
div>
my-swiper-news>
div>
<div class="news_right wow fadeInRight animated" style="visibility: visible; animation-name: fadeInRight;">
<a :href="news.url" class="news_wrap_content" v-for="news in newsList" :key="news.id">
<div class="news_wrap_time">
<h2>{{news.show_time.slice(8,10)}}h2>
<h4>{{news.show_time.slice(0,7)}}h4>
div>
<div class="news_right_content">
<h3>{{news.title}}h3>
<p>{{news.description}}<span style="color:#92D050;">[+查看详情]span>p>
div>
a>
div>
div>
<a href="/xinwenzhongxin.html" class="welcome_but wow fadeInUp animated" style="visibility: visible; animation-name: fadeInUp;">+查看更多a>
div>
div>
div>
{include file="index/case" /}
div>
div>
div>
<script>
const MySwiper = {
template: `
`,
props: {
reachEnd: {
type: Function,
required: true
},
initialSlide: {
type: Number,
default: 0
}
},
mounted() {
const that = this
new Swiper('.product_swiper .swiper-container', {
initialSlide: that.initialSlide,
autoplay: {
disableOnInteraction: false,
pauseOnMouseEnter: true,
stopOnLastSlide: true,
delay:1000
},
loop: false,
slidesPerView: 1,
spaceBetween: 5,
navigation: {
nextEl: ".product-button-next",
prevEl: ".product-button-prev",
},
breakpoints: {
992: {
slidesPerView: 4,
spaceBetween: 40,
},
600: {
slidesPerView: 2,
spaceBetween: 20,
}
},
observer: true,
observeParents: true,
on: {
reachEnd: that.reachEnd
}
});
}
}
new Vue({
el: '#app-product',
components: {
'my-swiper': MySwiper
},
data: {
products: [],
productId: 151,
list_rows: 8,
page: 1,
isLastPage: false,
loading: false,
initialSlide: 0,
},
methods: {
fetchProduct(params = {}) {
if (this.isLastPage) {
return
}
params = {cid: this.productId, page: 1, limit: {page: this.page, list_rows: this.list_rows}, ...params}
this.loading = true
$http.get('/api.v1/lists', {params}).then(res => {
if (params.limit.page !== 1) {
if (params.limit.page === res.last_page) {
this.isLastPage = true
}
this.products = [...this.products, ...res.data]
} else {
this.products = res.data
}
}).finally(() => {
this.loading = false
})
},
handleClickPro(id) {
this.productId = id
this.page = 1
this.isLastPage = false
this.initialSlide=0
this.fetchProduct()
},
handleReachEnd(e) {
if (this.loading) return
this.page++
this.initialSlide = e.activeIndex
this.fetchProduct({limit: {page: this.page, list_rows: this.list_rows}})
}
},
created() {
this.fetchProduct()
},
})
const MySwiperNews = {
template: `
`,
mounted() {
new Swiper('.news_swiper .swiper-container', {
autoplay: true,
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
observer: true,
observeParents: true,
});
}
}
new Vue({
el: '#app-news',
components: {
'my-swiper-news': MySwiperNews
},
data: {
newsList: [],
list_rows: 6,
page: 1,
},
methods: {
fetchNews(params = {}) {
params = {mid: 2, page: 1, _order: 'show_time DESC,id DESC', limit: {page: this.page, list_rows: this.list_rows}, ...params}
$http.get('/api.v1/lists', {params}).then(res => {
if (params.limit.page !== 1) {
this.newsList.push(...res.data)
} else {
this.newsList = res.data
}
this.newsList.forEach(item => {
item.description = item.description.slice(0, 40).concat('...')
})
})
},
},
created() {
this.fetchNews()
},
computed: {
imgList: function () {
return this.newsList.slice(0, 4)
}
}
})
$('.product_content .product').click(function (e) {
e.preventDefault()
$(this).addClass('active').siblings().removeClass('active')
})
script>
{/block}
