nongminwang/components/home/BigSwiper.vue

<template>
    <!-- 首页大的轮播图 -->
    <div class="swiper" v-if="imagelist">
        <el-carousel height="400px" v-if="imagelist" :interval="3111">
            <el-carousel-item v-for="(item, index) in imagelist" :key="index">
                <NuxtLink :href="getLinkPathDetail(item)">
                    <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: {
            'imgnum': 5,
            'textnum': 0,
            'level': 2,
            'placeid': 0,
            'id':''
        },
    });
    if(mkdata.code == 200){
        imagelist.value = mkdata.data.img;
    }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>



<style lang="less" scoped>


 
    @media screen and (min-width:801px){/*pc*/
         
		
            .pc_none{display:none;}
    }
    @media screen and (max-width:800px){/*ipad_phone*/
            .swiper{display:block;width:100%;height:100%;}
            /deep/.el-carousel--horizontal{width:100%!important;height:100%!important;}
        /deep/.el-carousel__container{height:100%!important;}
        /deep/.el-carousel__item a{height:100%;width:100%;display:block;}
        .swiper img {width:100%;height:100%;}

        .swiper .text{width:100%!important;padding-left:0px;top:0px;bottom:auto;height:54px!important;

                background: linear-gradient(to bottom, #000000, rgba(0, 0, 0, 0));
        }




        .swiper .text:after {
            display: none;
        }
        .swiper .text span{width:96%;height:54px;line-height:27px;margin:0px auto;
                font-size:16px;font-weight:bold; 
                 white-space: normal;overflow:hidden;text-overflow:unset;
                display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;
                position:unset;
        }

        /deep/ .el-carousel .el-carousel__indicators{
             right:0px;width:100%;text-align:center;

        }
        /deep/.el-carousel__button{opacity:1;}
        /deep/.el-carousel__indicator--horizontal{margin:0px 4px;}

            .phone_none{display:none;}
    }


</style>