我是个攻城狮
196 lines
4.1 KiB
Vue
196 lines
4.1 KiB
Vue
<template>
|
|
<view class="swiper-container" v-if="imgs&&!img">
|
|
<swiper class="banner-swiper3" :current="currentIndex" :autoplay="true" :interval="5000" :duration="2000" >
|
|
<swiper-item >
|
|
<view class="banner-swiper-item3">
|
|
<image class="banner-img3" :src="imgs" mode=""></image>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
<view class="swiper-container" v-else-if="img">
|
|
<swiper class="banner-swiper2" :current="currentIndex" :autoplay="true" :interval="5000" :duration="2000" >
|
|
<swiper-item >
|
|
<view class="banner-swiper-item2">
|
|
<image class="banner-img2" :src="img" mode=""></image>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
<view class="swiper-container" v-else>
|
|
<swiper class="banner-swiper" :current="currentIndex" :autoplay="true" :circular ="true":interval="5000" :duration="1500" @change="handleSwiperChange">
|
|
<swiper-item v-for="(item,index) in list" :key="index">
|
|
<view class="banner-swiper-item">
|
|
<image class="banner-img" :src="item" mode=""></image>
|
|
</view>
|
|
<!-- <view class="banner-title">
|
|
<view class="game-name">剑与远征</view>
|
|
<view class="game-intro">剑与远征 剑与远征</view>
|
|
<view class="game-about">了解详情</view>
|
|
</view> -->
|
|
</swiper-item>
|
|
</swiper>
|
|
<view class="arrow arrow-left" @tap="prev">
|
|
<image class="arrow-img" src="../../static/img/index/l_icon.png"></image>
|
|
</view>
|
|
<view class="arrow arrow-right" @tap="next">
|
|
<image class="arrow-img" src="../../static/img/index/r_icon.png"></image>
|
|
</view>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props:{
|
|
banner: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
img: {
|
|
|
|
default: '',
|
|
},
|
|
imgs: {
|
|
|
|
default: '',
|
|
},
|
|
titles: {
|
|
|
|
default: '',
|
|
},
|
|
title_content: {
|
|
|
|
default: '',
|
|
},
|
|
},
|
|
data(){
|
|
return {
|
|
list: [
|
|
'/static/img/index/banner1.jpg',
|
|
'/static/img/index/banner2.png',
|
|
'/static/img/index/banner1.jpg',
|
|
'/static/img/index/banner2.png',
|
|
],
|
|
currentIndex: 0,
|
|
}
|
|
},
|
|
created() {
|
|
this.currentIndex = this.banner;
|
|
},
|
|
methods:{
|
|
handleSwiperChange(event) {
|
|
const current = event.detail.current;
|
|
this.currentIndex = current;
|
|
// console.log("当前轮播到第", current, "个索引");
|
|
},
|
|
prev() {
|
|
this.currentIndex = (this.currentIndex - 1 + this.list.length) % this.list.length;
|
|
},
|
|
next() {
|
|
this.currentIndex = (this.currentIndex + 1) % this.list.length;
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.swiper-container {
|
|
position: relative;
|
|
}
|
|
|
|
.banner-swiper,.banner-swiper-item,.banner-img{
|
|
width: 100%;
|
|
height: 538px;
|
|
}
|
|
.banner-swiper2,.banner-swiper-item2,.banner-img2{
|
|
width: 100%;
|
|
height: 333px;
|
|
}
|
|
.banner-swiper3,.banner-swiper-item3,.banner-img3{
|
|
width: 100%;
|
|
height:610px;
|
|
}
|
|
|
|
.banner-title{
|
|
position: absolute;
|
|
top: 207px;
|
|
left: 160px;
|
|
font-size: 67px;
|
|
font-weight: bold;
|
|
color: #FFFFFF;
|
|
text-shadow: 7px 6px 11px rgba(0,0,0,0.16);
|
|
.game-about{
|
|
width: 235px;
|
|
height: 61px;
|
|
background: #F48612;
|
|
box-shadow: 0px 0px 13px 0px rgba(244,134,18,0.73);
|
|
font-weight: bold;
|
|
color: #FFFFFF;
|
|
font-size: 27px;
|
|
text-align: center;
|
|
line-height: 61px;
|
|
margin-top: 57px;
|
|
cursor: pointer
|
|
}
|
|
.game-about:hover{
|
|
background: #ff9a2f;
|
|
box-shadow: 0px 0px 13px 0px rgba(255,154,47,0.73);
|
|
}
|
|
}
|
|
.banner-title2{
|
|
width: 100%;
|
|
height: 333px;
|
|
line-height: 333px;
|
|
font-size: 67px;
|
|
font-weight: bold;
|
|
color: #FFFFFF;
|
|
text-shadow: 7px 6px 11px rgba(0,0,0,0.16);
|
|
}
|
|
|
|
.arrow {
|
|
position: absolute;
|
|
top: 129px;
|
|
width: 68px;
|
|
height: 102px;
|
|
background: #000000;
|
|
opacity: 0.57;
|
|
line-height: 122px;
|
|
text-align: center;
|
|
cursor: pointer
|
|
}
|
|
.arrow:hover{
|
|
opacity: 1;
|
|
}
|
|
.arrow-img{
|
|
width:23px;
|
|
height: 37px;
|
|
}
|
|
.arrow-left {
|
|
left: 0px;
|
|
}
|
|
|
|
.arrow-right {
|
|
right: 0px;
|
|
}
|
|
|
|
|
|
@media screen and (max-width: 600px) {
|
|
.banner-swiper,.banner-swiper-item,.banner-img{
|
|
width: 100%;
|
|
height: 160px;
|
|
}
|
|
.banner-swiper2,.banner-swiper-item2,.banner-img2{
|
|
width: 100%;
|
|
height: 120px;
|
|
}
|
|
.arrow {
|
|
top: 70px;
|
|
}
|
|
|
|
}
|
|
// #ifdef H5
|
|
|
|
// #endif
|
|
</style>
|