sannongzixunwang_web/components/home/SmallSwiper1.vue

<template>
    <div class="swiper">
        <!-- {{ props.message }} -->
        <el-carousel :interval="5000" arrow="always" height="214px" indicator-class="custom-indicator" >
            <el-carousel-item v-for="item in boxData1" :key="item">
                <NuxtLink :to="`/newsDetail/${item.id}`" :title="item.title">
                    <img :src="item.imgurl" :alt="item.title">
                    <span>{{ message }} {{ item.title }} </span>
                </NuxtLink>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script setup>
import { ElCarousel, ElCarouselItem } from 'element-plus'
import { onMounted } from 'vue';
const props = defineProps({
    message: Number
});

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

const radio1 = ref('1');
let index = ref(0)

//获取导航一的栏目
const navigation1 = ref("");
const navigateList = async () => {
    try {
        const response = await axios.get(`/web/getWebsiteModelCategory?placeid=${1}&pid=${0}&num=${24}`);
        console.log('一级导航', response.data);
        navigation1.value = response.data;
        console.log('111111111111111111111111111', navigation1[0]?.value.category_id);

    } catch (error) {
        console.error(error);
    }
}
//获取模块中的数据 getWebsiteModelArticles
//14
const boxData1 = ref("");
const getWebsiteModelArticles = async () => {
    try {
        const response = await axios.get(`/web/getWebsiteModelArticles?catid=${props.message}&level=${2}&pagesize=${4}`);
        console.log('boxData111111111111111111', response.data);
        boxData1.value = response.data;
    } catch (error) {
        console.error(error);
    }
}

onMounted(() => {
    navigateList();
    getWebsiteModelArticles();
})
</script>

<style lang="less" scoped>
a {
    color: #fff;
}

.swiper {
    width: 380px;
    height: 214px;
    position: relative;

    img {
        width: 380px;
        height: 214px;
    }

    span {
        display: inline-block;
        width: 380px;
        height: 30px;
        line-height: 30px;
        padding-left: 13px;
        position: absolute;
        top: 0;
        left: 0;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 20px;
        color: #FFFFFF;
        background-color: rgba(0, 0, 0, 0.5);
        white-space: nowrap;
        /* 禁止换行 */
        overflow: hidden;
        /* 隐藏超出部分 */
        text-overflow: ellipsis;
        /* 超出部分显示省略号 */
    }
}

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

    /deep/.el-carousel__arrow--left {
        left: 16px;
        width: 35px;
        height: 57px;
        color: #616358;
        background: #dcdedc;
        position: absolute;
        left: 0px;
        border: none;
        border-radius: 0;
    }

    /deep/.el-carousel__arrow--right {
        right: 16px;
        width: 35px;
        height: 57px;
        color: #616358;
        background: #dcdedc;
        position: absolute;
        right: 0;
        border: none;
        border-radius: 0;
    }

    /deep/ .el-carousel__indicators {
        // 指示器
        left: unset;
        transform: unset;
        right: 41%;
    }

    /deep/ .el-carousel__button {
        // 指示器按钮
        width: 10px;
        height: 10px;
        border: none;
        border-radius: 50%;
        border: 1px solid #fff;
        background-color: transparent;
    }

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

    /deep/ .el-carousel__container {
        height: 100%;
    }
}

.custom-indicator button {
    background-color: #fff;
    border: 1px solid #ccc;
    opacity: 0.7;
}

.custom-indicator button.is-active {
    background-color: #333;
    border-color: #333;
    opacity: 1;
}
</style>