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

<!-- SidePanelItem.vue -->
<template>
    <div class="carousel-container">
        <SidePanelItem title="典型设施介绍">
            <div v-if="carouselData.length > 0" class="carousel-wrapper">
                <a-carousel v-model:current="currentIndex" autoplay class="tech-carousel"
                    :dot-style="{ bottom: '0px' }">
                    <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>
    </div>
</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-container {
    width: 415px;
    padding-right: 12px;
}

.carousel-wrapper {
    width: 100%;

    :deep(.ant-carousel) {
        width: 100%;

        .slick-slide {
            height: auto !important;
        }

        .slick-dots {
            bottom: 0px !important;
            margin: 0;
            padding: 8px 0;
            display: flex;
            justify-content: center;
            gap: 6px;

            li {
                width: 6px;
                height: 6px;
                margin: 0;
                background-color: transparent;
                border-radius: 50%;

                button {
                    width: 6px;
                    height: 6px;
                    background-color: #005293;
                    opacity: 0.3;
                    border-radius: 50%;
                    transition: all 0.3s;
                    padding: 0;
                    border: none;
                }

                &.slick-active button {
                    width: 8px;
                    height: 8px;
                    opacity: 1;
                    background-color: #005293;
                }
            }
        }
    }
}

.carousel-item {
    display: block;
}

.image-container {
    width: 100%;
    background-color: #f5f0e1; // 米黄色背景
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.carousel-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain; // 保持图片比例，完整显示
}

.description-container {
    padding: 12px 0 0 0;
    text-align: left;
}

.item-title {
    font-size: 16px;
    font-weight: 600;
    color: #1f1f1f;
    margin: 0 0 8px 0;
    line-height: 1.5;
}

.item-description {
    font-size: 14px;
    color: #595959;
    margin: 0;
    line-height: 1.8;
    text-align: justify;
}
</style>