Bladeren bron

edit home img

master
chutingting 1 jaar geleden
bovenliggende
commit
ab1bcdfa50
4 gewijzigde bestanden met toevoegingen van 176 en 20 verwijderingen
  1. +14
    -0
      package-lock.json
  2. +1
    -0
      package.json
  3. +156
    -0
      src/components/swiper/index.vue
  4. +5
    -20
      src/views/home/index.vue

+ 14
- 0
package-lock.json Bestand weergeven

@@ -12,6 +12,7 @@
"core-js": "^3.6.5",
"element-ui": "^2.15.14",
"identify": "^0.1.5",
"swiper": "^3.4.0",
"vue": "^2.6.11",
"vue-router": "^3.5.2"
},
@@ -16446,6 +16447,14 @@
"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": {
"version": "5.4.6",
"resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz",
@@ -31797,6 +31806,11 @@
"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": {
"version": "5.4.6",
"resolved": "https://registry.npmjs.org/table/-/table-5.4.6.tgz",


+ 1
- 0
package.json Bestand weergeven

@@ -12,6 +12,7 @@
"core-js": "^3.6.5",
"element-ui": "^2.15.14",
"identify": "^0.1.5",
"swiper": "^3.4.0",
"vue": "^2.6.11",
"vue-router": "^3.5.2"
},


+ 156
- 0
src/components/swiper/index.vue Bestand weergeven

@@ -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>

+ 5
- 20
src/views/home/index.vue Bestand weergeven

@@ -1,15 +1,6 @@
<template>
<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 class="content">
<div class="top">
@@ -80,7 +71,10 @@
</div>
</template>
<script>
/* eslint-disable */
import { lunboList, carNewsHotList, guanggao, link, yuanyuzhouHotList, hotnewsConfig } from '@/api/home.js'
import Swiper from '@/components/swiper'
export default {
name: 'home',
data () {
@@ -103,8 +97,7 @@ export default {
display: 0
}
},
components: {
},
components: { Swiper },
mounted () {
this.gethotnewsConfig()
this.getlunboList()
@@ -222,14 +215,6 @@ export default {
}
}
}
.lunbo {
background-size: auto;
background-position: center;
a{
width: 100%;
height: 100%;
}
}
#hot, #daliay {
width: 100%;
background: #E3E5EA;


Laden…
Annuleren
Opslaan