xiangcunwang_web/components/home/BigSwiper.vue

<template>
    <!-- 首页大的轮播图 -->
    <div class="swiper">
        <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" 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'

const nuxtApp = useNuxtApp();
const axios = nuxtApp.$axios;

let imagelist = useState("imageList", () => "")
let lunbo = async () => {
    try {
        const response = await axios.get(`/web/getWebsiteArticlett?pageSize=${5}&level=${2}&placeid=${0}`);
        // console.log(response.data);
        imagelist.value = response.data;
    } catch (error) {
        console.error(error);
    }
}

onMounted(() => {
    lunbo()
})


</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>