<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,  //当前所在滑块
                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>

以下是报错提示：

[广告] 07:59:32.932 DCloud 2023新春招聘开启，欢迎前端、Android、C++/QT来投简历! 详情点击
07:59:32.972 项目 '1-eduction-app' 开始编译...
07:59:36.313 请注意运行模式下，因日志输出、sourcemap以及未压缩源码等原因，性能和包体积，均不及发行模式。若要正式发布，请点击发行菜单或使用cli发布命令进行发布
07:59:36.313 小程序各家浏览器内核及自定义组件实现机制存在差异，可能存在样式布局兼容问题，参考：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 语法错误: Unexpected digit after hash token. (1:175)
07:59:45.883       at components\common\jing-banner.vue:1