|
@@ -2,7 +2,7 @@
|
|
<div class="home">
|
|
<div class="home">
|
|
<swiper :options="swiperOption" ref="mySwiper">
|
|
<swiper :options="swiperOption" ref="mySwiper">
|
|
<swiper-slide v-for="(item, index) in sliceArr" :key="index"
|
|
<swiper-slide v-for="(item, index) in sliceArr" :key="index"
|
|
- ><img :src="$cdnUrl+item.ossPath" alt=""
|
|
|
|
|
|
+ ><img :src="$cdnUrl+item.ossPath" alt="" @click="skip(item.url)"
|
|
/></swiper-slide>
|
|
/></swiper-slide>
|
|
<div class="swiper-pagination" slot="pagination"></div>
|
|
<div class="swiper-pagination" slot="pagination"></div>
|
|
<div class="swiper-button-prev" slot="button-prev"></div>
|
|
<div class="swiper-button-prev" slot="button-prev"></div>
|
|
@@ -12,52 +12,56 @@
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
-import { Swiper, SwiperSlide } from "vue-awesome-swiper";
|
|
|
|
-import "swiper/css/swiper.css";
|
|
|
|
|
|
+import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
|
|
|
|
+import 'swiper/css/swiper.css'
|
|
export default {
|
|
export default {
|
|
components: {
|
|
components: {
|
|
Swiper,
|
|
Swiper,
|
|
- SwiperSlide,
|
|
|
|
|
|
+ SwiperSlide
|
|
},
|
|
},
|
|
- name: "index",
|
|
|
|
- data() {
|
|
|
|
|
|
+ name: 'index',
|
|
|
|
+ data () {
|
|
return {
|
|
return {
|
|
sliceArr: [],
|
|
sliceArr: [],
|
|
swiperOption: {
|
|
swiperOption: {
|
|
pagination: {
|
|
pagination: {
|
|
- el: ".swiper-pagination",
|
|
|
|
- clickable: true,
|
|
|
|
|
|
+ el: '.swiper-pagination',
|
|
|
|
+ clickable: true
|
|
},
|
|
},
|
|
navigation: {
|
|
navigation: {
|
|
- nextEl: ".swiper-button-next",
|
|
|
|
- prevEl: ".swiper-button-prev",
|
|
|
|
|
|
+ nextEl: '.swiper-button-next',
|
|
|
|
+ prevEl: '.swiper-button-prev'
|
|
},
|
|
},
|
|
loop: true,
|
|
loop: true,
|
|
autoplay: {
|
|
autoplay: {
|
|
disableOnInteraction: false,
|
|
disableOnInteraction: false,
|
|
- delay: 4000,
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
- };
|
|
|
|
|
|
+ delay: 4000
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
},
|
|
},
|
|
- created() {
|
|
|
|
|
|
+ created () {
|
|
this.getSlideList()
|
|
this.getSlideList()
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
- async getSlideList() {
|
|
|
|
|
|
+ skip (url) {
|
|
|
|
+ console.log(999, url)
|
|
|
|
+ if (url !== '') window.open(url, '_blank')
|
|
|
|
+ },
|
|
|
|
+ async getSlideList () {
|
|
let result = await this.$http({
|
|
let result = await this.$http({
|
|
- method:'post',
|
|
|
|
- url:'/api/web/slideshow/list'
|
|
|
|
|
|
+ method: 'post',
|
|
|
|
+ url: '/api/web/slideshow/list'
|
|
})
|
|
})
|
|
this.sliceArr = result && result['code'] === 0 && result['data'] || []
|
|
this.sliceArr = result && result['code'] === 0 && result['data'] || []
|
|
}
|
|
}
|
|
},
|
|
},
|
|
computed: {
|
|
computed: {
|
|
- swiper() {
|
|
|
|
- return this.$refs.mySwiper.$swiper;
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
-};
|
|
|
|
|
|
+ swiper () {
|
|
|
|
+ return this.$refs.mySwiper.$swiper
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
<style lang="less" scoped>
|
|
@@ -68,8 +72,10 @@ export default {
|
|
// display:flex;
|
|
// display:flex;
|
|
// font-size:0;
|
|
// font-size:0;
|
|
> img {
|
|
> img {
|
|
|
|
+ cursor: pointer;
|
|
display: block; // 行内元素img 自带间距
|
|
display: block; // 行内元素img 自带间距
|
|
width: 100%;
|
|
width: 100%;
|
|
|
|
+ max-height: 846px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|