话不多说 直接代码
<template>
<view class="">
<view class="mask">
<swiper @change="changeSwiper" class="my_swiper">
<swiper-item>
<view class="bg_img">6666666666666666666666666666666666</view>
</swiper-item>
<swiper-item>
<view class="bg_img">22222222222222222222222222222222</view>
</swiper-item>
<swiper-item>
<view class="bg_img">33333333333333333333333333333333</view>
</swiper-item>
</swiper>
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
},
};
</script>
<style lang="scss" scoped>
.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
z-index: 5;
> .my_swiper {
width: 100%;
height: 60vh;
.bg_img {
background-size: 100% auto;
background-repeat: no-repeat;
background-position:center;
width: 100%;
height: 100%;
}
}
}
</style>
