<template>
    <!-- 首页大的轮播图 -->
    <div class="swiper" v-if="imagelist">
        <el-carousel height="405px" v-if="imagelist" :interval="3333">            

            <el-carousel-item v-for="(item, index) in imagelist" :key="index"> 
                <NuxtLink :href="getLinkPathDetail(item)">
                    <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: {
            'imgnum': 5,
            'textnum': 0,
            'level': 2,
            'placeid': 0,
            'id': 0,
        },
    });
    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()

// 跳转详情页
const getLinkPathDetail = (item) => {
    if (item.islink == 1) {
        return `${item.linkurl}`;
    } else {
        return `/${item.pinyin}/${item.id}.html`;
    }
}

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

}


    @media screen and (min-width:801px){/*pc*/
         
		
            .pc_none{display:none;}
    }
    @media screen and (max-width:800px){/*ipad_phone*/

         .swiper{width:100%!important;height:100%!important;}    
         .swiper img{width:100%!important;height:100%!important;display:block;}
         .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 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;
        }

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

        /deep/.el-carousel__indicator{}
        /deep/.el-carousel .el-carousel__indicator button{background:#fff!important;opacity:1;margin:0px 2px;}
        /deep/.el-carousel .el-carousel__indicator.is-active button{background:#a01c0e!important;width:8px;opacity:1;}
        /deep/.el-carousel--horizontal{width:100%!important;height:100%!important;}
        /deep/.el-carousel__container{height:100%!important;}

        .phone_none{display:none;}

    }


</style>