sannongzixunwang_web/components/home/BigSwiper.vue

<template>
    <div class="swiper">
        <el-carousel :interval="5000" arrow="always" height="440px" indicator-class="custom-indicator">
            <el-carousel-item v-for="item in 5" :key="item">
                <img src="../../static/images/image.png" alt="">
                <span>高邮市周山镇开展渔业安全生产应急演练...</span>
            </el-carousel-item>
        </el-carousel>
    </div>

</template>

<script setup>

import { ElCarousel, ElCarouselItem } from 'element-plus'

</script>

<style lang="less" scoped>
.swiper {
    width: 790px;
    height: 440px;
    position: relative;

    span {
        display: inline-block;
        width: 790px;
        height: 118px;
        padding-top: 20px;
        padding-left: 23px;
        box-sizing: border-box;
        position: absolute;
        top: 0;
        left: 0;
        font-family: Source Han Sans, Source Han Sans;
        font-weight: 800;
        font-size: 24px;
        color: #FFFFFF;
        background:  linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
        
    }
}

.el-carousel {
    /deep/.el-carousel__arrow i {
        font-size: 68px !important;
    }

    /deep/ .el-carousel__indicators {
        // 指示器
        left: unset;
        transform: unset;
        right: 45%;
    }

    /deep/ .el-carousel__button {
        // 指示器按钮
        width: 10px;
        height: 10px;
        border: none;
        border-radius: 50%;
        border: 1px solid #fff;
        background-color:transparent;
    }

    /deep/ .is-active .el-carousel__button {
        // 指示器激活按钮
        background: #fff;
    }

    /deep/ .el-carousel__container {
        height: 100%;
    }
}

.custom-indicator button {
    background-color: #fff;
    border: 1px solid #ccc;
    opacity: 0.7;
}

.custom-indicator button.is-active {
    background-color: #333;
    border-color: #333;
    opacity: 1;
}
</style>