nongfuchanpingongxiao/components/home/BigSwiper.vue

<template>
    <div class="swiper" v-if="imagelist">
        <!-- 首页大轮播图 -->
        <el-carousel
             :interval="3333" 
             class="roll_in"
              
             indicator-class="custom-indicator" 
             arrow="always"  
             @change="change_fun">

            <el-carousel-item v-for="(item, index) in imagelist" :key="item">
                <NuxtLink :href="getLinkPathDetail(item)">
                    <img :src="item.imgurl" >

                    <span class="swiper_dot1 dot1 roll_phone_none">
                        {{ item.title }}
                    </span>

                    <span class="roll_dot2 roll_pc_none">
                        {{ item.title }}
                    </span>

                    
                </NuxtLink>
            </el-carousel-item>

            <div class="roll_num_box phone_none">
                <span class="roll_num_box_new">{{ roll_num_this + 1 }}</span>
                /
                {{ roll_num_lang }}
            </div>

            
            <template #indicator="{ index }">
                <button :class="{ 'active-indicator': currentIndex === index }">{{ index + 1 }}</button>
            </template>

        </el-carousel>
    </div>
</template>

<script setup>
import { ElCarousel, ElCarouselItem } from 'element-plus'
//获取焦点图数据 start---------------------------------------->
import { ref } from 'vue'
const roll_num_lang = ref(4);
const roll_num_this = ref(0);

const change_fun = (the_1) => {
    roll_num_this.value = the_1
}

const imagelist = ref("")
async function getModelData1() {
    const mkdata =  await requestDataPromise('/web/getWebsiteArticlett', {
        method: 'GET',
        query: {
            'imgnum':4,
            'textnum':0,
            'level': 2,
            'placeid': 0,
            'id': '',
        },
    });
    console.log("获取首页轮播图",mkdata);
    
    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>
.roll_num_box {
    position: absolute;
    z-index: 2;
    left: 60px;
    bottom: 0px;
    height: 60px;
    line-height: 60px;
    color: #fff;
    font-size: 16px;

    .roll_num_box_new {
        font-size: 20px;
    }
}

.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: 18px;
        text-indent: 20px;
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 10;
        box-sizing: border-box;
        padding: 0 144px;

        background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 33%, rgba(0, 0, 0, 0) 100%);
    }

}

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

    .roll_1_box {
        position: relative;
    }

    /deep/.el-carousel__arrow--left {
        position: absolute;


        width: 35px;
        height: 57px;
        color: #fff;
        background: rgba(0, 0, 0, 0);

        left: 9px;
        border: none;
        border-radius: 0;
        top: 100%;
        margin-top: -28px;
    }

    /deep/.el-carousel__arrow--right {
        width: 35px;
        height: 57px;
        color: #fff;
        background: rgba(0, 0, 0, 0);
        position: absolute;
        right: 9;
        border: none;
        border-radius: 0;
        top: 100%;
        margin-top: -28px;
    }

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

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

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

    opacity: 1;
}
</style>


<style lang="less" scoped>

 
    @media screen and (min-width:801px){/*pc*/
         
            .roll_in{height:405px;}
            
            .swiper /deep/.el-carousel__indicators{display:none;}
            .roll_pc_none{display:none!important;}
            .pc_none{display:none;}
    }
    @media screen and (max-width:800px){/*ipad_phone*/

            .swiper{height:100%;}
            .roll_in{height:55vw;}
             

            .swiper /deep/ul.el-carousel__indicators{width:100%; right:0px;text-align:center;}
            .swiper img{width:100%;height:100%;}
            .roll_in{height:55vw;}
            
            .el-carousel /deep/.el-icon svg{width:.4em;display:none;}
            .el-carousel /deep/.el-carousel__button{width:10px;height:10px;margin:0px 4px;}    
            .roll_dot2{

                width:100%;line-height:22px; height:54px;font-size:16px; 
                 padding:10px 10px 0;top:0px;
                display: inline-block;
                box-sizing: border-box;
                position: absolute;
                left: 0;
                font-family: Source Han Sans, Source Han Sans;
                font-weight: 800;
                color: #FFFFFF;
                background: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
                overflow:hidden;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;

            }
            /deep/.el-carousel .el-carousel__button{width:10px!important;}
            /deep/.el-carousel .el-carousel__indicators{bottom:0px;}

            .roll_phone_none{display:none!important;}
            .phone_none{display:none;}
    }


</style>