nongzigongxiaowang/components/home/SwiperNzgx.vue

<template>
    <div class="swiper">
        <!-- 农副产品供销网 -->
        <el-carousel :interval="3333" height="405px" indicator-position="none" arrow="always"  @change="change_fun" v-if="imgData">
            <el-carousel-item v-for="(item, index) in imgData" :key="item" >
                <NuxtLink
                    :href="getLinkPathDetail(item)"
                    :title="item.title"
                    :key="item.id"
                    :target="item.islink == 1 ? '_blank' : '_self'"
                >
                    <img :src="item.imgurl" alt="item.title">
                    <span class="swiper_dot1 dot1">
                        {{ index+1}}
                        {{item.title}}
                    </span>
                </NuxtLink>
            </el-carousel-item>
            <div class="roll_num_box">  		
                <span class="roll_num_box_new">{{roll_num_this+1}}</span>
                /
                {{ roll_num_lang }}
            </div>
        </el-carousel>
    </div>
</template>

<script setup>
import { ElCarousel, ElCarouselItem } from 'element-plus'

import { ref } from 'vue'
const roll_num_lang = ref(4);
const roll_num_this = ref(0);

const props = defineProps({
    imgData: {
        type: Array,
        default: []
    }
})


const change_fun =(the_1)=>{
    roll_num_this.value=the_1
}
</script>

<style lang="less" scoped>
.roll_num_box{
    position:absolute;z-index:2;left:60px;bottom: 0px; 
    height:60px;line-height:60px;color:#fff;font-size:16px;

    .roll_num_box_new{font-size:20px;}
}
.dot1 {
    display: block;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.swiper {
    width: 100%;
    height: 405px;
    position: relative;
    img {
        width: 100%;
        height: 405px;
    }
    .swiper_dot1 {
        display: block;
        width: 100%;
        line-height: 60px;
        height: 60px;
        color: #fff;
        font-size: 18px;
        text-indent: 20px;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 10;
        box-sizing: border-box;
        padding:0 144px;
        background:linear-gradient(0deg,rgba(0,0,0,0.5) 33%,rgba(0,0,0,0) 100%);
    }
}
.el-carousel {
      /deep/.el-carousel__arrow i {
            font-size: 33px !important;
      }
      .roll_1_box{position:relative;}
      /deep/.el-carousel__arrow--left {
            position:absolute;


            width: 35px;
            height: 57px;
            color: #fff;
            background:rgba(0,0,0,0);
             
            left: 9px;
            border: none;
            border-radius: 0;
            top: 100%;
            margin-top:-28px;
      }
      /deep/.el-carousel__arrow--right {
            width: 35px;
            height: 57px;
            color: #fff;
            background:rgba(0,0,0,0);
            position: absolute;
            right: 9;
            border: none;
            border-radius: 0;
            top: 100%;
            margin-top:-28px;
      }
      /deep/ .el-carousel__indicators {
            // 指示器
            left: unset;
            transform: unset;
            right: 10px;
            bottom: 11px;
      }
      /deep/ .el-carousel__button {
            // 指示器按钮
            width: 10px;
            height: 10px;
            border: none;
            border-radius: 5px;
            background: #fff;
            opacity: 1;
      }
      /deep/ .is-active .el-carousel__button {
            // 指示器激活按钮
            background: #255590;
            width: 25px;
            opacity: 1;

      }
      /deep/ .el-carousel__container {
            height: 100%;
      }
}
.custom-indicator button {
    background-color: #fff;
    opacity: 1;
    width: 8px;
    height: 8px;
}
.custom-indicator button.is-active {
    background-color: #DD7D18;
    width: 58px;
    opacity: 1;
}
</style>