xiangcunwang_web/components/home/BigSwiper.vue

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

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

//轮播图数据
let imagelist = useState("imageList", () => "")
async function getModelData1() {
    const mkdata =  await requestDataPromise('/web/getWebsiteArticlett', {
        method: 'GET',
        query: {
            'pageSize': 5,
            'level': 2,
            'placeid': 0,
            'id':0,
        },
    });
    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()


</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: rgba(0, 0, 0, 0.5);

        span {
            display: inline-block;
            width: 460px;
            height: 60px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    }
}



.el-carousel {

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

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

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

}
</style>