<template>
?? ?<view class="banner-box">
?? ??? ?<view class="banner-bg" :style="{'backgroud-image': `linear-gradient(${bannerBackgroud || '#345DC2' } 50%, #FFF )` }"></view>
?? ??? ?<swiper class="banner-swiper" indicator-dots indicator-color="rgba(255.255.255.0.5)"
?? ??? ?indicator-active-color="#FFFFFF"
?? ??? ?autoplay :interval="2000" :current="current" @change="swiperChange">
?? ??? ??? ?<swiper-item class="swiper-item" v-for="(item,index) in bannerList" :key="index">
?? ??? ??? ??? ?<image :src="item.imageUrl"></image>
?? ??? ??? ?</swiper-item>
?? ??? ?</swiper>
?? ?</view>
?? ?
</template>

<script>
?? ?export default {
?? ??? ?props: {
?? ??? ??? ?bannerList:{
?? ??? ??? ??? ?type:Array,
?? ??? ??? ??? ?default: () => [
?? ??? ??? ??? ??? ??? ??? ??? ??? ?{
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?id:1,
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?imageUrl:'/static/images/it01.png',
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?background:'#009B8C',
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?advertUrl: '/pages/course/course-details'
?? ??? ??? ??? ??? ??? ??? ??? ??? ?},
?? ??? ??? ??? ??? ??? ??? ??? ??? ?{
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?id:2,
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?imageUrl:'/static/images/it02.png',
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?background:'#6E3DE6',
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?advertUrl: '/pages/course/course-details'
?? ??? ??? ??? ??? ??? ??? ??? ??? ?},
?? ??? ??? ??? ??? ??? ??? ??? ??? ?{
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?id:3,
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?imageUrl:'/static/images/it03.png',
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?background:'#ed38ea',
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?advertUrl: '/pages/course/course-details'
?? ??? ??? ??? ??? ??? ??? ??? ??? ?},
?? ??? ??? ??? ??? ??? ??? ??? ??? ?{
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?id:4,
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?imageUrl:'/static/images/it04.png',
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?background:'#aaff00',
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?advertUrl: '/pages/course/course-details'
?? ??? ??? ??? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?]
?? ??? ??? ?}
?? ??? ?},
?? ??? ?data() {
?? ??? ??? ?return {
?? ??? ??? ??? ?current:0,? //當(dāng)前所在滑塊
?? ??? ??? ??? ?bannerBackgroud: '' //背景色
?? ??? ??? ?}
?? ??? ?},
?? ??? ?methods:{
?? ??? ??? ?swiperChange(e){
?? ??? ??? ??? ?this.current = e.detail.current
?? ??? ??? ??? ?this.bannerBackgroud = this.bannerList[this.current].background
?? ??? ??? ?}
?? ??? ?}
?? ?}
</script>

<style>
?? ?.banner-box{
?? ??? ?padding-top:80px;
?? ??? ?.banner-bg {
?? ??? ??? ?position: absolute;
?? ??? ??? ?top:0;
?? ??? ??? ?width:100%;
?? ??? ??? ?height: 470rpx;
?? ??? ??? ?background-image: linear-gradient(red 50%,#FFF);
?? ??? ??? ?transform: .5s;
?? ??? ?}
?? ??? ?.banner-swiper{
?? ??? ??? ?width: 100%;
?? ??? ??? ?height: 350rpx;
?? ??? ??? ?.swiper-item{
?? ??? ??? ??? ?width:100%;
?? ??? ??? ??? ?height: 100%;
?? ??? ??? ??? ?padding: 0 30rpx;
?? ??? ??? ??? ?image {
?? ??? ??? ??? ??? ?width: 100%;
?? ??? ??? ??? ??? ?height: 100%;
?? ??? ??? ??? ??? ?border-radius: 15rpx;
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ?}
?? ??? ?
?? ?}
</style>

以下是報(bào)錯(cuò)提示：

[廣告] 07:59:32.932 DCloud 2023新春招聘開啟，歡迎前端、Android、C++/QT來(lái)投簡(jiǎn)歷! 詳情點(diǎn)擊
07:59:32.972 項(xiàng)目 '1-eduction-app' 開始編譯...
07:59:36.313 請(qǐng)注意運(yùn)行模式下，因日志輸出、sourcemap以及未壓縮源碼等原因，性能和包體積，均不及發(fā)行模式。若要正式發(fā)布，請(qǐng)點(diǎn)擊發(fā)行菜單或使用cli發(fā)布命令進(jìn)行發(fā)布
07:59:36.313 小程序各家瀏覽器內(nèi)核及自定義組件實(shí)現(xiàn)機(jī)制存在差異，可能存在樣式布局兼容問題，參考：https://uniapp.dcloud.io/matter?id=mp
07:59:36.318 正在編譯中...
07:59:45.845 TypeError: Cannot read properties of undefined (reading 'includes')
07:59:45.846???? at D:\soft\HBuilderX\plugins\uniapp-cli\bin\uniapp-cli.js:53:21
07:59:45.857???? at processTicksAndRejections (node:internal/process/task_queues:96:5)
07:59:45.870 Module build failed (from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/templateLoader.js):
07:59:45.871 語(yǔ)法錯(cuò)誤: Unexpected digit after hash token. (1:175)
07:59:45.883?????? at components\common\jing-banner.vue:1