nongminwang/components/home/SmallSwiper1.vue

<template>
    <div class="swiper">
        <el-carousel :interval="3000" height="405px" indicator-class="custom-indicator">
            <el-carousel-item v-for="(item, item_index) in data" :key="item">
                <NuxtLink :href="getLinkPathDetail(item)" :title="item.title" :target="item.islink == 1 ? '_blank' : '_self'">
                    <img :src="item.imgurl" alt="item.title">
                </NuxtLink>
                <span class="swiper_dot1 dot1">
                    {{item.title}}
                </span>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

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

const getLinkPathDetail = (item) => {
    if (item.islink == 1) {
        return `${item.linkurl}`;
    } else {
        //return `/${item.aLIas_pinyin}/${item.id}`;
        //return `/newsDetail/${item.id}`
        return `/${item.pinyin}/${item.id}.html`;
    }
}
const props = defineProps({
    data: {
        type: Array,
        default: () => []
    }
})
</script>

<style lang="less" scoped>
.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: 24px;
        text-indent: 20px;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 10;
        box-sizing: border-box;
        padding-right: 244px;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 5%, rgba(0, 0, 0, 0) 100%);
    }
}

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

    /deep/.el-carousel__arrow--left {
        left: 16px;
        width: 35px;
        height: 57px;
        color: #616358;
        background: #dcdedc;
        position: absolute;
        left: 0px;
        border: none;
        border-radius: 0;
    }

    /deep/.el-carousel__arrow--right {
        right: 16px;
        width: 35px;
        height: 57px;
        color: #616358;
        background: #dcdedc;
        position: absolute;
        right: 0;
        border: none;
        border-radius: 0;
    }

    /deep/ .el-carousel__indicators {
        // 指示器
        left: unset;
        transform: unset;
        right: 10px;
        bottom: 11px;
    }

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

    /deep/ .is-active .el-carousel__button {
        // 指示器激活按钮
        background: #DD7D18;
        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;

    opacity: 1;
}
</style>