@@ -12,6 +12,7 @@ | |||||
"core-js": "^3.6.5", | "core-js": "^3.6.5", | ||||
"element-ui": "^2.15.14", | "element-ui": "^2.15.14", | ||||
"identify": "^0.1.5", | "identify": "^0.1.5", | ||||
"swiper": "^3.4.0", | |||||
"vue": "^2.6.11", | "vue": "^2.6.11", | ||||
"vue-router": "^3.5.2" | "vue-router": "^3.5.2" | ||||
}, | }, | ||||
@@ -16446,6 +16447,14 @@ | |||||
"node": ">=4.0.0" | "node": ">=4.0.0" | ||||
} | } | ||||
}, | }, | ||||
"node_modules/swiper": { | |||||
"version": "3.4.0", | |||||
"resolved": "https://registry.npmmirror.com/swiper/-/swiper-3.4.0.tgz", | |||||
"integrity": "sha512-OE4bzIsNgxGhH44gzo6BndJwDmdEA8wIzMWc4c1EqHKPP/dz6iA/cj6DNGiTn1tDyUnaQx9jZnFCCmevcL8aTg==", | |||||
"engines": { | |||||
"node": ">= 0.10.0" | |||||
} | |||||
}, | |||||
"node_modules/table": { | "node_modules/table": { | ||||
"version": "5.4.6", | "version": "5.4.6", | ||||
"resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz", | "resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz", | ||||
@@ -31797,6 +31806,11 @@ | |||||
"util.promisify": "~1.0.0" | "util.promisify": "~1.0.0" | ||||
} | } | ||||
}, | }, | ||||
"swiper": { | |||||
"version": "3.4.0", | |||||
"resolved": "https://registry.npmmirror.com/swiper/-/swiper-3.4.0.tgz", | |||||
"integrity": "sha512-OE4bzIsNgxGhH44gzo6BndJwDmdEA8wIzMWc4c1EqHKPP/dz6iA/cj6DNGiTn1tDyUnaQx9jZnFCCmevcL8aTg==" | |||||
}, | |||||
"table": { | "table": { | ||||
"version": "5.4.6", | "version": "5.4.6", | ||||
"resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz", | "resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz", | ||||
@@ -12,6 +12,7 @@ | |||||
"core-js": "^3.6.5", | "core-js": "^3.6.5", | ||||
"element-ui": "^2.15.14", | "element-ui": "^2.15.14", | ||||
"identify": "^0.1.5", | "identify": "^0.1.5", | ||||
"swiper": "^3.4.0", | |||||
"vue": "^2.6.11", | "vue": "^2.6.11", | ||||
"vue-router": "^3.5.2" | "vue-router": "^3.5.2" | ||||
}, | }, | ||||
@@ -0,0 +1,156 @@ | |||||
<template> | |||||
<div class="swiper-main"> | |||||
<div class="swiper-content"> | |||||
<div v-if="bannerArray.length === 1"> | |||||
<div v-for="(item, index) in bannerArray" :key="index"> | |||||
<img :src="item.src" @click="handleClickBanner(item, index)" /> | |||||
</div> | |||||
</div> | |||||
<div class="swiper-container" v-if="bannerArray.length > 1"> | |||||
<div class="swiper-wrapper"> | |||||
<div | |||||
class="swiper-slide" | |||||
v-for="(item, index) in bannerArray" | |||||
:key="index" | |||||
> | |||||
<img :src="item.src" @click="handleClickBanner(item, index)" /> | |||||
<div class="txt"> | |||||
<a class="title">{{ item.title }}</a> | |||||
<a class="subtitle">国际汽车企业如果现在一旦脱离了中国市场,再想回来就不可能了。必须了解这个发展的趋势,只有参与才有机会。</a> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
<!-- <div class="main"> | |||||
<span class="swiper-button-prev" @click="handleClickPrev"></span> | |||||
<span class="swiper-button-next" @click="handleClickNext"></span> | |||||
</div> --> | |||||
<div class="swiper-pagination"></div> | |||||
</div> | |||||
</div> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
/* eslint-disable */ | |||||
import Swiper from 'swiper' | |||||
import 'swiper/dist/js/swiper' | |||||
import 'swiper/dist/css/swiper.css' | |||||
export default { | |||||
name: 'PBannerSwiper', | |||||
props: { | |||||
bannerArray: Array | |||||
}, | |||||
data() { | |||||
return { } | |||||
}, | |||||
activated () { | |||||
this.initSwiper() | |||||
}, | |||||
deactivated () { | |||||
try { | |||||
this.mySwiper?.destroy(true, true) | |||||
this.mySwiper = null | |||||
// eslint-disable-next-line no-empty | |||||
} catch (error) {} | |||||
}, | |||||
mounted () { | |||||
setTimeout(() => { | |||||
this.initSwiper() | |||||
}, 300) | |||||
}, | |||||
methods: { | |||||
handleClickBanner (item, index) { | |||||
window.open(item.link) | |||||
}, | |||||
handleClickPrev () {}, | |||||
handleClickNext () {}, | |||||
initSwiper () { | |||||
this.mySwiper = new Swiper('.swiper-container', { | |||||
pagination: '.swiper-pagination', | |||||
paginationClickable: true, | |||||
prevButton: '.swiper-button-prev', | |||||
nextButton: '.swiper-button-next', | |||||
autoplayDisableOnInteraction: false, | |||||
onTransitionEnd: () => { | |||||
this.$emit('bannerChange', this.realIndex) | |||||
}, | |||||
autoplay: 3000, | |||||
effect: 'fade' | |||||
}) | |||||
} | |||||
} | |||||
} | |||||
</script> | |||||
<style lang="scss" scoped> | |||||
// @import '@/assets/styles/variables.scss'; | |||||
.swiper-main { | |||||
width: 100%; | |||||
height: 590px; | |||||
position: relative; | |||||
} | |||||
.swiper-container { | |||||
height: 590px !important; | |||||
img { | |||||
width: 100%; | |||||
} | |||||
.txt { | |||||
position: absolute; | |||||
bottom: 78px; | |||||
left: 0; | |||||
right: 0; | |||||
text-align: center; | |||||
color: #fff; | |||||
width: 1200px; | |||||
margin: 0 auto; | |||||
.title { | |||||
font-size: 36px; | |||||
font-weight: bold; | |||||
text-align: center; | |||||
margin-bottom: 15px; | |||||
} | |||||
.subtitle { | |||||
font-size: 16px; | |||||
font-weight: 400; | |||||
text-align: center; | |||||
display: block; | |||||
color: #666; | |||||
} | |||||
} | |||||
} | |||||
.main { | |||||
position: relative; | |||||
width: 1200px; | |||||
margin: 0 auto; | |||||
} | |||||
.swiper-content { | |||||
position: absolute; | |||||
width: 1920px; | |||||
height: 590px; | |||||
left: 50%; | |||||
margin-left: -960px; | |||||
} | |||||
.swiper-button-prev, | |||||
.swiper-button-next { | |||||
margin-top: -200px; | |||||
} | |||||
.swiper-pagination .swiper-pagination-bullet-active { | |||||
background: #00F6BD !important; | |||||
} | |||||
.swiper-pagination{ | |||||
bottom: 30px; | |||||
} | |||||
</style> | |||||
<style lang="scss"> | |||||
.swiper-pagination .swiper-pagination-bullet { | |||||
width: 25px; | |||||
height: 2px; | |||||
border-radius: 0 !important; | |||||
} | |||||
.swiper-pagination .swiper-pagination-bullet-active { | |||||
background: #00F6BD !important; | |||||
} | |||||
</style> |
@@ -1,15 +1,6 @@ | |||||
<template> | <template> | ||||
<div> | <div> | ||||
<el-carousel > | |||||
<el-carousel-item class="lunbo" v-for="(item, index) in carouselList" :key="index" :style="{ backgroundImage: `url(${item.src})` }"> | |||||
<a :href="item.link"> | |||||
<div id="txt"> | |||||
<a class="title">{{ item.title }}</a> | |||||
<a class="subtitle">{{ item.subtitle }}</a> | |||||
</div> | |||||
</a> | |||||
</el-carousel-item> | |||||
</el-carousel> | |||||
<Swiper :banner-array="carouselList" /> | |||||
<div id="hot"> | <div id="hot"> | ||||
<div class="content"> | <div class="content"> | ||||
<div class="top"> | <div class="top"> | ||||
@@ -80,7 +71,10 @@ | |||||
</div> | </div> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
/* eslint-disable */ | |||||
import { lunboList, carNewsHotList, guanggao, link, yuanyuzhouHotList, hotnewsConfig } from '@/api/home.js' | import { lunboList, carNewsHotList, guanggao, link, yuanyuzhouHotList, hotnewsConfig } from '@/api/home.js' | ||||
import Swiper from '@/components/swiper' | |||||
export default { | export default { | ||||
name: 'home', | name: 'home', | ||||
data () { | data () { | ||||
@@ -103,8 +97,7 @@ export default { | |||||
display: 0 | display: 0 | ||||
} | } | ||||
}, | }, | ||||
components: { | |||||
}, | |||||
components: { Swiper }, | |||||
mounted () { | mounted () { | ||||
this.gethotnewsConfig() | this.gethotnewsConfig() | ||||
this.getlunboList() | this.getlunboList() | ||||
@@ -222,14 +215,6 @@ export default { | |||||
} | } | ||||
} | } | ||||
} | } | ||||
.lunbo { | |||||
background-size: auto; | |||||
background-position: center; | |||||
a{ | |||||
width: 100%; | |||||
height: 100%; | |||||
} | |||||
} | |||||
#hot, #daliay { | #hot, #daliay { | ||||
width: 100%; | width: 100%; | ||||
background: #E3E5EA; | background: #E3E5EA; | ||||