nongminwang/components/home/BigSwiper.vue

<template>
    <!-- 首页大的轮播图 -->
    <div class="swiper" v-if="imagelist">
        <el-carousel height="400px">
            <el-carousel-item v-for="(item, index) in imagelist" :key="index">
                <NuxtLink :to="`/newsDetail/${item.id}`" target="_blank">
                    <img :src="item.imgurl">
                    <div class="text">
                        <span>{{ item.title }}</span>
                    </div>
                </NuxtLink>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script setup>
import { ElCarousel, ElCarouselItem } from 'element-plus'
//获取焦点图数据 start---------------------------------------->
const imagelist = ref("")
async function getModelData1() {
    const mkdata =  await requestDataPromise('/web/getWebsiteArticlett', {
        method: 'GET',
        query: {
            'pageSize': 5,
            'level': 2,
            'placeid': 0,
            'id':''
        },
    });
    if(mkdata.code == 200){
        imagelist.value = mkdata.data;
    }else{
        console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
        console.log("错误位置：获取首页轮播图")
        console.log("后端错误反馈：",mkdata.message)
        console.log("SSR waring ---------- SSR waring ---------- SSR waring ---------->")
    }
}
getModelData1()

let currentIndex = ref(0)
let handleIndicatorChange = (val) => {
    currentIndex.value = val
}
</script>

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

    img {
        width: 790px;
        height: 405px;
    }

    .text {
        display: inline-block;
        width: 790px;
        height: 60px;
        line-height: 60px;
        padding-left: 23px;
        box-sizing: border-box;
        position: absolute;
        bottom: 0;
        left: 0;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 18px;
        color: #FFFFFF;
        // background-color: #eee;

        span {
            display: inline-block;
            width: 460px;
            height: 60px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 24px;
            position: absolute;
            z-index: 50;
        }

    }

    .text:after {
        background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.7));
        bottom: 0;
        content: "";
        display: block;
        height: 68px;
        left: 0;
        position: absolute;
        width: 100%;
        z-index: 44;
    }
}



.el-carousel {

    // 指示器位置
    ::v-deep .el-carousel__indicators {
        left: unset;
        transform: unset;
        right: 1%;
    }

    // 未选中的指示器样式，设置为小圆圈 
    ::v-deep .el-carousel__indicator:not(.is-active) button {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #fff;
    }

    // 选中的指示器样式，设置为长条状 
    ::v-deep .el-carousel__indicator.is-active button {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #dd7d18;
    }

}
</style>