xiangcunwang_web/components/shop/swiperXcShop.vue

<template>
    <div class="swiper">
        <el-carousel :interval="933993" height="300px" indicator-position="outside" @change="change_fun">
            <el-carousel-item>
                <div 
                    class="shop_li_img_1 clearfix" 
                    :class="per_index == 2 ? 'shop_li_img_1_hot' : ''"
                    v-for="item in props.data"
                >
                    <nuxtLink 
                        :to="getShopPathDetail1(item)"
                        class="shop_li_img_1_a"
                        :title="item.name"
                    >
                        <img class="shop_li_img_1_img" :src="item.imgurl" alt="item.name">
                        <div class="shop_li_img_1_dot2 dot2">
                            {{ item.name }}
                        </div>
                        <div class="shop_li_img_1_price">{{getShopType(item)}}</div>
                    </nuxtLink>
                </div>
            </el-carousel-item>
            <el-carousel-item>
                <div 
                    class="shop_li_img_1 clearfix" 
                    :class="per_index == 2 ? 'shop_li_img_1_hot' : ''"
                    v-for="item in props.data2"
                >
                    <nuxtLink 
                        :to="getShopPathDetail1(item)"
                        class="shop_li_img_1_a"
                        :title="item.name"
                    >
                        <img class="shop_li_img_1_img" :src="item.imgurl" alt="item.name">
                        <div class="shop_li_img_1_dot2 dot2">
                            {{ item.name }}
                        </div>
                        <div class="shop_li_img_1_price">{{getShopType(item)}}</div>
                    </nuxtLink>
                </div>
            </el-carousel-item>
            <el-carousel-item>
                <div 
                    class="shop_li_img_1 clearfix" 
                    :class="per_index == 2 ? 'shop_li_img_1_hot' : ''"
                    v-for="item in props.data3"
                >
                    <nuxtLink 
                        :to="getShopPathDetail1(item)"
                        class="shop_li_img_1_a"
                        :title="item.name"
                    >
                        <img class="shop_li_img_1_img" :src="item.imgurl" alt="item.name">
                        <div class="shop_li_img_1_dot2 dot2">
                            {{ item.name }}
                        </div>
                        <div class="shop_li_img_1_price">{{getShopType(item)}}</div>
                    </nuxtLink>
                </div>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script setup>
//1.页面必备方法 start ---------------------------------------->
import { ElCarousel, ElCarouselItem } from 'element-plus'

import { ref } from 'vue'
const roll_num_lang = ref(3);
const roll_num_this = ref(0);

const change_fun = (the_1) => {
    roll_num_this.value = the_1
}
//1.页面必备方法 end ---------------------------------------->

//2.组件数据 start ---------------------------------------->
const props = defineProps({
    data: {
        type: Array,
        default: () => []
    },
    data2: {
        type: Array,
        default: () => []
    },
    data3: {
        type: Array,
        default: () => []
    }
})
//2.组件数据 end ---------------------------------------->
</script>

<style lang="less" scoped>
.dot2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.shop_li_img_1 {
    float: left;
    width: 150px;
    position: relative;
    margin: 45px 14px 8px;
}

.shop_li_img_1_img {
    display: block;
    width: 100%;
    height: 150px !important;
}

.shop_li_img_1_dot2 {
    height: 36px !important;
    line-height: 18px;
    color: #333;
    font-size: 14px;
    margin: 7px auto 6px;
    width: 140px;
    text-align: center;
}

.shop_li_img_1_price {
    text-align: center;
    height: 21px;
    line-height: 21px;
    color: #A01C0E;
    font-size: 18px;
    width: 140px;
    margin: 0px auto 0px;
    font-weight: bold;
}

.shop_li_img_1_hot::after {
    content: '';
    display: block;
    position: absolute;
    width: 35px;
    height: 25px;
    left: 10px;
    top: 0px;
    z-index: 11;
    background: url(../../public/img/11.png) no-repeat left 0px;
    background-size: 100% 100%;
}

.shop_li_img_1:hover .shop_li_img_1_dot2 {
    color: #A01C0E;
}



.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: red;
        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%);
    }

}

.swiper {
    height: 300px;
}

.el-carousel {

    /deep/.el-carousel__indicators--outside {
        margin-top: -35px;
    }

    /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: #EDCEA2;
        opacity: .5;
    }

    /deep/ .is-active .el-carousel__button {
        // 指示器激活按钮
        background: #EDCEA2;

        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*/
         
		
            .pc_none{display:none;}
    }
    @media screen and (max-width:800px){/*ipad_phone*/

        .shop_li_img_1{width:23%;margin:1vw 1%;overflow:hidden;}
        .shop_li_img_1:nth-of-type(n+5){display:none;}
        .shop_li_img_1_img{height:22vw!important;}
        .shop_li_img_1_dot2{width:100%;font-size:2vw;line-height:4vw;height:8vw!important;margin:1vw auto;}
        .shop_li_img_1_price{width:100%;font-size:4vw;height:6vw;line-height:6vw;}
        .swiper{height:auto;height:47vw!important;}
        /deep/.el-carousel .el-carousel__button{width:4vw;height:4vw;border-radius:50%;margin:0px 2vw;}


        .el-carousel--horizontal, .el-carousel--vertical{
            height:100%;
        }
        /deep/.el-carousel .el-carousel__container{
            height:100%!important;
        }

 
        /deep/.el-carousel .el-carousel__indicators--outside{
            margin-top: -9vw;
        }




            .phone_none{display:none;}
    }


</style>