xj-screen/src/views/healthConsultation/components/healthContentMiddle.vue

<template>
    <swiper
        v-if="pages().length > 0"
        :slides-per-view="1"
        :space-between="10"
        :loop="true"
        :autoplay="{ delay: 10000, disableOnInteraction: false }"
        class="mySwiper"
    >
        <swiper-slide v-for="(page, index) in pages()" :key="index">
            <div class="grid-container">
                <div v-for="item in page" :key="item.id" class="item">
                    <div class="item-left">
                        <a-image class="item-img" :preview="false" height="100%" :src="getFileUrl(item.photo)" />
                    </div>
                    <div class="item-right">
                        <div class="name">
                            <span>{{ item.doctorName }}</span>
                            <span class="position">（{{ item.doctorTitle_dictText }}）</span>
                        </div>
                        <div class="hospital">{{ item.resourceName }} | {{ item.departmentName }}</div>
                        <div class="experience">
                            <span class="label">经历：</span>
                            {{ item.experience ? item.experience : '暂无' }}
                        </div>
                        <div class="goodAt">
                            <span class="label">擅长：</span>
                            {{ item.goodAt ? item.goodAt : '暂无' }}
                        </div>
                    </div>
                </div>
            </div>
        </swiper-slide>
    </swiper>
</template>

<script setup lang="ts">
    import { onMounted, ref, watch } from 'vue';
    import { Swiper, SwiperSlide } from 'swiper/vue';
    import 'swiper/css';
    import 'swiper/css/navigation';
    import SwiperCore from 'swiper';
    import { Autoplay, Navigation } from 'swiper/modules'; // 修改此处导入路径
    // import defaultPng from '/@/assets/health/default.png';
    import { Image as AImage } from 'ant-design-vue';

    import { getDocList } from '/@/views/healthConsultation/api/health';
    import { getAppEnvConfig } from '/@/utils/env.ts';

    const props = defineProps({
        bKey: {
            type: Number,
            default: () => 0,
        },
    });

    watch(
        () => props,
        () => {
            getData();
        }
    );

    const { VITE_GLOB_API_URL } = getAppEnvConfig();
    function getFileUrl(path?: string) {
        const GATEWAY_URL = VITE_GLOB_API_URL;
        if (!path) return '/@/assets/health/default.png'; // 使用默认图片
        return `${GATEWAY_URL}/file/show/${path}`;
    }

    // 安装 Swiper 模块
    SwiperCore.use([Autoplay, Navigation]);
    interface Doctor {
        id: string;
        photo?: string;
        doctorName: string;
        doctorJob_dictText: string;
        resourceName: string;
        departmentName: string;
        experience: string;
        goodAt: string;
    }

    // 将每 6 个元素分为一页
    const items = ref<Doctor[]>([]);

    const pages = () => {
        const result: Doctor[][] = [];
        for (let i = 0; i < items.value.length; i += 6) {
            result.push(items.value.slice(i, i + 6));
        }
        console.log(result);
        return result;
    };

    function getData() {
        getDocList()
            .then((res: any) => {
                if (res.code == 200) {
                    items.value = res.result;
                }
            })
            .catch((err) => {
                console.log(err);
            });
    }

    onMounted(() => {
        getData();
    });
</script>

<style scoped lang="less">
    .mySwiper {
        height: 100%; /* 设置整个轮播高度 */
        padding-bottom: 16px;
        box-sizing: border-box;
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(2, 1fr); /* 每行平分Swiper高度 */
            gap: 10px; /* item 间距 */
            height: 100%; /* 占满Swiper高度 */
            // padding: 10px; /* 可选：轮播边缘留空 */
            // box-sizing: border-box;
            .item {
                width: 100%;
                background: rgba(8, 75, 100, 0.2);
                border: 1px solid #00ccff;
                border-radius: 14px;
                color: white;
                display: flex;
                justify-content: center;
                align-items: center;
                font-weight: bold;
                font-size: 18px;
                transition: transform 0.3s;
                padding: 16px;
                box-sizing: border-box;
                overflow: hidden;
                .item-left {
                    width: 25%;
                    height: 100%;
                    overflow: hidden;
                    border-radius: 8px;
                    margin-right: 16px;
                    display: flex;
                    align-items: center;
                    .item-img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        transition: transform 0.3s;
                    }
                }
                .item-right {
                    flex: 1;
                    height: 100%;
                    // display: flex;
                    // flex-direction: column;
                    // gap: clamp(10px, 1vw, 40px);
                    // gap: 8px;
                    .name {
                        // height: 10%;
                        color: #ffc000;
                        font-size: 23px;
                        font-weight: bold;
                        font-family: HarmonyOS Sans SC;
                        letter-spacing: 1px;
                        line-height: 34px;
                        .position {
                            font-size: 18px;
                            color: #fff;
                        }
                    }
                    .hospital {
                        // height: 10%;
                        font-family: PingFang SC;
                        font-weight: bold;
                        font-size: 17px;
                        // font-size: clamp(14px, 1vw, 50px);
                        color: #fff;
                        line-height: 32px;
                        letter-spacing: 1px;
                        margin-bottom: 5px;
                    }
                    .experience {
                        // height: 40%;
                        // height: 57px;
                        // line-height: 22px;
                        font-family: PingFang SC;
                        font-weight: 500;
                        font-size: 13px;
                        color: #fff;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 3; /* 显示3行 */
                        line-clamp: 3;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: normal;
                        letter-spacing: 1px;
                        margin-bottom: 8px;
                        .label {
                            color: #82a9ef;
                        }
                    }
                    .goodAt {
                        // height: 40%;
                        font-family: PingFang SC;
                        font-weight: 500;
                        font-size: 13px;
                        color: #fff;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 3; /* 显示3行 */
                        line-clamp: 3;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: normal;
                        letter-spacing: 1px;
                        .label {
                            color: #82a9ef;
                        }
                    }
                }
            }
        }
    }
</style>