WholeProcessPlatform/frontend/src/modules/dianxingcuoshijieshao/index.vue

<!-- SidePanelItem.vue -->
<template>
    <SidePanelItem title="典型设施介绍">
        <div v-if="carouselData.length > 0" class="carousel-wrapper">
            <a-carousel v-model:current="currentIndex" class="tech-carousel" :dot-style="{ bottom: '0px' }">
                <!-- autoplay -->
                <div v-for="(item, index) in carouselData" :key="index" class="carousel-item">
                    <div class="image-container">
                        <img :src="item.image" :alt="item.title" class="carousel-image" />
                    </div>
                </div>
            </a-carousel>

            <!-- 文字描述区域 -->
            <div v-if="carouselData[currentIndex]" class="description-container">
                <p class="item-description">{{ carouselData[currentIndex].description }}</p>
            </div>
        </div>
        <div v-else>
            <a-empty />
        </div>
    </SidePanelItem>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import SidePanelItem from '@/components/SidePanelItem/index.vue';

// 定义组件名（便于调试和递归）
defineOptions({
    name: 'dianxingcuoshijieshao'
});

// 当前轮播索引
const currentIndex = ref(0);

// 轮播图数据
const carouselData = ref([
    {
        title: '叠梁门',
        description: '叠梁门是一种用于调节水库流量和控制水位的设施。在低温季节，可以通过控制叠梁门的开闭程度来调节流量，减少低温水体的进...',
        image: 'https://img.shetu66.com/2024/02/19/170835076078361368.png' // 替换为实际图片路径
    },
    {
        title: '环保设施',
        description: '现代化环保设施，采用先进技术，有效处理工业废水废气，实现达标排放，保护生态环境...',
        image: 'https://img.shetu66.com/2024/02/19/170835076078361368.png'
    },
    {
        title: '智能监控',
        description: '24 小时智能监控系统，实时监测设备运行状态，确保设施安全稳定运行...',
        image: 'https://img.shetu66.com/2024/02/19/170835076078361368.png'
    },
    {
        title: '水处理系统',
        description: '高效水处理系统，通过多级过滤和生物处理，实现水资源循环利用...',
        image: 'https://img.shetu66.com/2024/02/19/170835076078361368.png'
    }
]);

// 页面加载时执行的逻辑
onMounted(() => {
    // 可以在这里加载实际的图片数据
});
</script>

<style lang="scss" scoped>
.carousel-wrapper {
    :deep(.slick-slide) {
        text-align: center;
        height: 250px;
        line-height: 160px;
        background: #364d79;
        overflow: hidden;

    }

    :deep() {
        .ant-carousel .slick-dots li {
            width: 5px !important;
            height: 5px !important;
            border-radius: 50% !important;
            background-color: #888e95;

        }
        .ant-carousel .slick-dots li button{
             width: 5px !important;
            height: 5px !important;
            border-radius: 50% !important;
            background-color: #888e95;
        }
        .ant-carousel .slick-dots li.slick-active{
            background-color: #005293 !important;
        }
        .ant-carousel .slick-dots li.slick-active button{
            background-color: #005293 !important;
        }
           .ant-carousel .slick-dots li :hover {
            width: 5px !important;
            height: 5px !important;
            border-radius: 50% !important;
            background-color: #ffffffcc;

        }
        .ant-carousel .slick-dots li button :hover{
             width: 5px !important;
            height: 5px !important;
            border-radius: 50% !important;
            background-color: #ffffffcc;
        }
    }

    .description-container {
        height: 44px;
        width: 100%;
        margin-top: 6px;
        line-height: 22px;
        overflow: hidden;
        text-overflow: ellipsis;
        word-break: break-all;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        text-indent: 0em;
    }

}
</style>