<template>
<div class="home-container-warp">
    <div class="home-carousel">
        <el-carousel v-if="imageSrcs && imageSrcs.length && imageSrcs.length >0">
            <el-carousel-item v-for="(item,index) in imageSrcs" :key="index">
                <el-image
                    class="carousel-image"
                    fit="fill"
                    :src="item"
                ></el-image>        
            </el-carousel-item>
        </el-carousel>
        <el-carousel v-else>
            <el-carousel-item  :key="index">
                <el-image
                    class="carousel-image"
                    fit="fill"
                    :src="require('@/assets/images/home/default0.png')"
                ></el-image>        
            </el-carousel-item>
        </el-carousel>        
    </div>
    <div class="home-container-all">
        <div class="home-container-top">
            <div class="home-container-top-content">
                <div class="home-container-top-content-right">
                    <div class="content-section hospital-news">
                        <div class="section-content">
                            <div class="news-list">
                                <div class="news-header">
                                    <div class="title">医院动态</div>
                                    <div class="more" @click="toMore('hospitalNews')">more</div>
                                </div>
                                <div class="news-items">
                                    <div class="news-item" 
                                        v-for="(item, index) in hospitalNewsContent" 
                                        :key="index"
                                        @mouseover="hoveredHospitalNews = index"
                                        @click="toCenterRouter('hospitalNews', {id: item.id})"
                                        :class="{'active': hoveredHospitalNews === index}">
                                        <span class="circle" :class="{'active': hoveredHospitalNews === index}"></span>
                                        <span class="text">{{truncateString(item.contentTitle, 25)}}</span>
                                        <span class="date">{{parseTime(item.createTime)}}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="news-image">
                                <el-image 
                                    v-if="hospitalNewsContent && hospitalNewsContent.length > 0"
                                    :src="getImageSrc(hospitalNewsContent[hoveredHospitalNews])" 
                                    fit="cover">
                                </el-image>
                                <el-image 
                                    v-else
                                    :src="require('@/assets/images/home/default1.png')" 
                                    fit="cover">
                                </el-image>
                                <div class="news-image-text">
                                    {{truncateString(hospitalNewsContent && hospitalNewsContent.length > 0 ? hospitalNewsContent[hoveredHospitalNews].contentTitle : '', 18)}}
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="content-section notice-announcement">
                        <div class="section-content">
                            <div class="news-image">
                                <el-image 
                                    v-if="noticeAnnouncementContent && noticeAnnouncementContent.length > 0"
                                    :src="getNoticeImageSrc(noticeAnnouncementContent[hoveredNoticeAnnouncement])" 
                                    fit="cover">
                                </el-image>
                                <el-image 
                                    v-else
                                    :src="require('@/assets/images/home/default2.png')" 
                                    fit="cover">
                                </el-image>
                                <div class="news-image-text">
                                    {{truncateString(noticeAnnouncementContent && noticeAnnouncementContent.length > 0 ? noticeAnnouncementContent[hoveredNoticeAnnouncement].contentTitle : '', 18)}}
                                </div>
                            </div>
                            <div class="news-list">
                                <div class="news-header">
                                    <div class="more" @click="toMore('noticeAnnouncement')">more</div>
                                    <div class="title">公告通知</div>
                                </div>
                                <div class="news-items">
                                    <div class="news-item" 
                                        v-for="(item, index) in noticeAnnouncementContent" 
                                        :key="index"
                                        @mouseover="hoveredNoticeAnnouncement = index"
                                        @click="toCenterRouter('noticeAnnouncement', {id: item.id})"
                                        :class="{'active': hoveredNoticeAnnouncement === index}">
                                        <span class="circle" :class="{'active': hoveredNoticeAnnouncement === index}"></span>
                                        <span class="text">{{truncateString(item.contentTitle, 25)}}</span>
                                        <span class="date">{{parseTime(item.createTime)}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="content-right-expertStyle">
            <div class="expert-title">
                <span>专家介绍</span>
            </div>
            <div class="expert-content">
                <div class="expert-nav left" @click="prevExpertPage">
                    <i class="el-icon-arrow-left"></i>
                </div>
                <div class="expert-list" :class="{'center': displayExperts.length < 5}">
                    <div class="expert-item" v-for="(item, index) in displayExperts" :key="index" @click="toCenterRouter('experts',{id: item.id})">
                        <div class="expert-line"></div>
                        <div class="expert-name">{{truncateString(item.name, 10)}}</div>
                        <div class="expert-position">{{truncateString(item.position, 10)}}</div>
                        <div class="expert-image">
                            <el-image
                                class="doctor-image"
                                fit="fill"
                                :src="item.certificate"
                            ></el-image>
                        </div>
                        <div class="expert-department">{{truncateString(item.departmentName, 10)}}</div>
                    </div>
                </div>
                <div class="expert-nav right" @click="nextExpertPage">
                    <i class="el-icon-arrow-right"></i>
                </div>
            </div>
            <div class="expert-pagination">
                <span 
                    v-for="(_, index) in Math.ceil(expertsContent.length / expertsPerPage)" 
                    :key="index"
                    :class="{'active': currentExpertPage === index}"
                    @click="goToExpertPage(index)"
                ></span>
            </div>
        </div>
        <div class="home-container-top2">
            <div class="home-container-top2-content">
                <div class="home-container-top2-content-left">
                    <div class="section-header">
                        <div class="section-header-left">
                            <div class="icon-wrapper">
                                <el-image
                                    class="carousel-image"
                                    fit="fill"
                                    :src="require('@/assets/images/home/环保.png')"
                                ></el-image>
                            </div>
                            <div class="title">健康园地</div>
                        </div>
                        <div class="more" @click="toMore('healthGarden')">more <span style="color: #1280F9"> → </span></div>
                    </div>
                    <div class="section-content">
                        <div class="news-image">
                            <el-image 
                                v-if="healthGardenContent && healthGardenContent.length > 0"
                                :src="getHealthImageSrc(healthGardenContent[hoveredHealthGarden])" 
                                fit="cover">
                            </el-image>
                            <el-image 
                                v-else
                                :src="require('@/assets/images/home/default3.png')" 
                                fit="cover">
                            </el-image>
                        </div>
                        <div class="news-list">
                            <div class="news-item" 
                                v-for="(item, index) in healthGardenContent" 
                                :key="index"
                                @mouseover="hoveredHealthGarden = index"
                                @click="toCenterRouter('healthGarden', {id: item.id})"
                                :class="{'active': hoveredHealthGarden === index}">
                                <div class="news-item-left">
                                    <span class="circle" :class="{'active': hoveredHealthGarden === index}"></span>
                                    <span class="text">{{truncateString(item.contentTitle, 25)}}</span>
                                </div>   
                                <span class="date">{{parseTime(item.createTime)}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="home-container-top2-content-right">
                    <div class="section-header">
                        <div class="section-header-left">
                            <div class="icon-wrapper">
                                <el-image
                                    class="carousel-image"
                                    fit="fill"
                                    :src="require('@/assets/images/home/医生介绍.png')"
                                ></el-image>
                            </div>
                            <div class="title">名医有约</div>
                        </div>
                        <div class="more" @click="toMore('famousDoctor')">more <span style="color: #1280F9"> → </span></div>
                    </div>
                    <div class="section-content">
                        <div class="news-image">
                            <el-image 
                                v-if="famousDoctorContent && famousDoctorContent.length > 0"
                                :src="getDoctorImageSrc(famousDoctorContent[hoveredFamousDoctor])" 
                                fit="cover">
                            </el-image>
                            <el-image 
                                v-else
                                :src="require('@/assets/images/home/default4.png')" 
                                fit="cover">
                            </el-image>
                        </div>
                        <div class="news-list">
                            <div class="news-item" 
                                v-for="(item, index) in famousDoctorContent" 
                                :key="index"
                                @mouseover="hoveredFamousDoctor = index"
                                @click="toCenterRouter('famousDoctor', {id: item.id})"
                                :class="{'active': hoveredFamousDoctor === index}">
                                <div class="news-item-left">
                                    <span class="circle" :class="{'active': hoveredFamousDoctor === index}"></span>
                                    <span class="text">{{truncateString(item.contentTitle, 25)}}</span>
                                </div> 
                                <span class="date">{{parseTime(item.createTime)}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="content-right-departmentIntroduction">
            <div class="department-title">
                <span>科室介绍</span>
                <span class="department-title-more" @click="toMore('departmentIntroduction')">查看更多></span>
            </div>
            <div class="department-content">
                <div class="department-left">
                    <div class="department-image">
                        <el-image 
                            v-if="selectedDepartment && selectedDepartment.contentImage"
                            :src="getDepartmentImageSrc(selectedDepartment)" 
                            fit="cover">
                        </el-image>
                        <el-image 
                            v-else
                            :src="require('@/assets/images/home/default5.png')" 
                            fit="cover">
                        </el-image>
                        <div class="department-image-text">{{truncateString(selectedDepartment ? selectedDepartment.departmentName : '', 18)}}</div>
                    </div>
                </div>
                <div class="department-right">
                    <div class="department-tabs">
                        <div class="tab-header">
                            <div class="tab-item" 
                                 :class="{'active': activeTab === 'key'}" 
                                 @click="switchTab('key')">
                                <span>重点专科</span>
                            </div>
                            <div class="tab-space"></div>
                            <div class="tab-item" 
                                 :class="{'active': activeTab === 'feature'}" 
                                 @click="switchTab('feature')">
                                <span>特色专科</span>
                            </div>
                            <div class="triangle" :style="triangleStyle"></div>
                        </div>
                        <div class="tab-content">
                            <div class="key-specialty" v-show="activeTab === 'key'">
                                <div class="department-list">
                                    <div class="department-item" 
                                        v-for="(item, index) in keySpecialtyContent" 
                                        :key="'key-'+index"
                                        @mouseover="selectDepartment(item, 'key', index)"
                                        @click="toCenterRouter('departmentIntroduction',{type:'2',id: item.id,name: item.departmentName})"
                                        :class="{'active': selectedDepartmentType === 'key' && selectedDepartmentIndex === index}">
                                        <div class="department-item-box">
                                            <span>{{truncateString(item.departmentName, 10)}}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="feature-specialty" v-show="activeTab === 'feature'">
                                <div class="department-list">
                                    <div class="department-item" 
                                        v-for="(item, index) in featureEducationContent" 
                                        :key="'feature-'+index"
                                        @mouseover="selectDepartment(item, 'feature', index)"
                                        @click="toCenterRouter('departmentIntroduction',{type:'3',id: item.id,name: item.departmentName})"
                                        :class="{'active': selectedDepartmentType === 'feature' && selectedDepartmentIndex === index}">
                                        <div class="department-item-box">
                                            <span>{{truncateString(item.departmentName, 10)}}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="friend-links-wrap">
        <div class="friend-links">
            <div class="link-title">友情链接：</div>
            <div class="link-list">
                <a href="http://www.nhc.gov.cn/" target="_blank" class="link-item">
                    <img src="@/assets/images/home/link1.jpg" alt="国家卫生健康委员会">
                </a>
                <a href="https://wjw.jiangsu.gov.cn/" target="_blank" class="link-item">
                    <img src="@/assets/images/home/link2.png" alt="江苏省卫生健康委员会">
                </a>
                <a href="https://wjw.suqian.gov.cn/" target="_blank" class="link-item">
                    <img src="@/assets/images/home/link3.png" alt="沭阳县卫生健康委员会">
                </a>
            </div>
        </div>
    </div>
    <div class="home-container-bottom-warp">
        <div class="home-container-bottom">
            <div class="bottom-links">
                <a href="#">网站地图</a> | <a href="#">版权申请</a> | <a href="#">交通路线</a> | <a href="#">联系我们</a>
            </div>
            <div class="bottom-info">
                <div class="info-item">
                    <i class="el-icon-location"></i>
                    <span>医院地址：江苏省宿迁沭阳县沭城镇苏州东路3号</span>
                </div>
                <div class="info-item">
                    <i class="el-icon-time"></i>
                    <span>门诊时间：08:00 —— 18:00</span>
                </div>
                <div class="info-item">
                    <i class="el-icon-phone"></i>
                    <span>免费热线：(0527) 8832 3979</span>
                </div>
            </div>
            <div class="qrcode-container">
                <div class="qrcode-box">
                    <img src="@/assets/images/home/qrcode.jpg" alt="微信公众号" class="qrcode-img">
                    <div class="qrcode-text">微信公众号</div>
                    <div class="triangle"></div>
                </div>
            </div>
            <div class="copyright">
                <span>苏ICP 109029385号 版权所有@沭阳铭和医院</span>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import contentManagementAPI from "@/api/contentManagement";
import advertisementAPI from "@/api/advertisement";
import departmentAPI from "@/api/department";
import {getUploadFilePath} from '@/config/index';
import userAPI from "@/api/user";
import {parseTime} from "@/utils/index"
    export default {
        name: "index",
        data() {
            return {
                imageSrcs:[],
                keySpecialtyContent: [],
                featureEducationContent: [],
                hospitalNewsContent: [],
                noticeAnnouncementContent: [],
                expertsContent: [],
                healthGardenContent: [],
                famousDoctorContent: [],
                hoveredHospitalNews: 0,
                hoveredNoticeAnnouncement: 0,
                hoveredHealthGarden: 0,
                hoveredFamousDoctor: 0,
                currentExpertPage: 0,
                expertsPerPage: 5,
                selectedDepartment: null,
                selectedDepartmentType: 'key',
                selectedDepartmentIndex: 0,
                activeTab: 'key'
            }
        },
        computed: {
            displayExperts() {
                const start = this.currentExpertPage * this.expertsPerPage;
                return this.expertsContent.slice(start, start + this.expertsPerPage);
            },
            triangleStyle() {
                return {
                    left: this.activeTab === 'key' ? '102px' : '326px'
                };
            }
        },
        methods: {
            getUploadFilePath,
            parseTime(time) {
                return parseTime(parseInt(time), '{y}-{m}-{d}')
            },
            toRouter(path){
                this.$router.push({
                    name: path,
                });
                this.$nextTick(() => {
                    window.scrollTo(0, 0);
                });
            },
            toMore(path,query){
                this.$router.push({
                    name: path,
                    query: query,
                });
                this.$nextTick(() => {
                    window.scrollTo(0, 0);
                });
            },

            toCenterRouter(path,query){
                this.$router.push({
                    name: path,
                    query: query,
                });
                this.$nextTick(() => {
                    window.scrollTo(0, 0);
                });
            },

            truncateString(str, num) {
                if (str && str.length > num) {
                    return str.slice(0, num > 3 ? num - 3 : num) + '...';
                }
                return str || '';
            },
            
            getHospitalNews() {
                return contentManagementAPI.getContentManagementList({ status: "1" , pageSize:8, currentPage:1, contentType: "3" })
                    .then(res => {
                        if (res.code === 1000) {
                            this.hospitalNewsContent = res.data.list || [];
                        } else {
                            console.error("获取数据失败，请重试");
                        }
                    })
                    .catch(err => {
                        console.error("网络异常，请重试");
                        return Promise.resolve();
                    });
            },
            getNoticeAnnouncement() {
                return contentManagementAPI.getContentManagementList({ status: "1" , pageSize:8, currentPage:1, contentType: "4" })
                    .then(res => {
                        if (res.code === 1000) {
                            this.noticeAnnouncementContent = res.data.list || [];
                        } else {
                            console.error("获取数据失败，请重试");
                        }
                    })
                    .catch(err => {
                        console.error("网络异常，请重试");
                        return Promise.resolve();
                    });
            },
            getHealthGarden() {
                return contentManagementAPI.getContentManagementList({ status: "1" , pageSize:6, currentPage:1, contentType: "5" })
                    .then(res => {
                        if (res.code === 1000) {
                            this.healthGardenContent = res.data.list || [];
                        } else {
                            console.error("获取数据失败，请重试");
                        }
                    })
                    .catch(err => {
                        console.error("网络异常，请重试");
                        return Promise.resolve();
                    });
            },
            getFamousDoctor() {
                return contentManagementAPI.getContentManagementList({ status: "1" , pageSize:6, currentPage:1, contentType: "6" })
                    .then(res => {
                        if (res.code === 1000) {
                            this.famousDoctorContent = res.data.list || [];
                        } else {
                            console.error("获取数据失败，请重试");
                        }
                    })
                    .catch(err => {
                        console.error("网络异常，请重试");
                        return Promise.resolve();
                    });
            },
            getFileList() {
                advertisementAPI
                    .getAdvertisementList({imageType:"0"})
                    .then((res) => {
                        if (res.code === 1000 && res.data.length > 0) {
                            let arrUp = [];
                            res.data.forEach((item) => {
                               arrUp.push(getUploadFilePath(item.imageFile));
                            });
                            this.imageSrcs = arrUp
                        }
                    })
                    .catch((err) => {});
            },
            getDepartmentAndChildrenSubject() {
                let param = { pageSize:20, currentPage:1, departmentLevel: "1",isKeynoteEducation: "1"}
                return departmentAPI.getDepartmentAndChildren(param)
                    .then(res => {
                        if (res.code === 1000) {
                            this.keySpecialtyContent = res.data.list || [];
                        } else {
                            console.error("获取数据失败，请重试");
                        }
                    })
                    .catch(err => {
                        console.error("网络异常，请重试");
                        return Promise.resolve();
                    });
            },
            getDepartmentAndChildrenEducation() {
                let param = { pageSize:20, currentPage:1, departmentLevel: "1",isFeatureEducation: "1"}
                return departmentAPI.getDepartmentAndChildren(param)
                    .then(res => {
                        if (res.code === 1000) {
                            this.featureEducationContent = res.data.list || [];
                        } else {
                            console.error("获取数据失败，请重试");
                        }
                    })
                    .catch(err => {
                        console.error("网络异常，请重试");
                        return Promise.resolve();
                    });
            },            
            getExpertList() {
                let param = { isHome: "1" }
                return userAPI.getExpertList(param)
                    .then(res => {
                        if (res.code === 1000) {
                            let tableData = [];
                            res.data.forEach((item) => {
                                item.certificate = getUploadFilePath(item.certificate);
                            });
                            tableData = JSON.parse(JSON.stringify(res.data))        
                            this.expertsContent = JSON.parse(JSON.stringify(tableData))
                        } else {
                            console.error("获取数据失败，请重试");
                        }
                    })
                    .catch(err => {
                        console.error("网络异常，请重试");
                        return Promise.resolve();
                    });
            },
            prevExpertPage() {
                if (this.currentExpertPage > 0) {
                    this.currentExpertPage--;
                } else {
                    this.currentExpertPage = Math.ceil(this.expertsContent.length / this.expertsPerPage) - 1;
                }
            },
            nextExpertPage() {
                if (this.currentExpertPage < Math.ceil(this.expertsContent.length / this.expertsPerPage) - 1) {
                    this.currentExpertPage++;
                } else {
                    this.currentExpertPage = 0;
                }
            },
            goToExpertPage(index) {
                this.currentExpertPage = index;
            },
            selectDepartment(item, type, index) {
                this.selectedDepartmentType = type;
                this.selectedDepartmentIndex = index;
                if (type === 'key' && this.keySpecialtyContent.length > 0) {
                    this.selectedDepartment = this.keySpecialtyContent[index];
                } else if (type === 'feature' && this.featureEducationContent.length > 0) {
                    this.selectedDepartment = this.featureEducationContent[index];
                }
            },
            initSelectedDepartment() {
                if (this.keySpecialtyContent && this.keySpecialtyContent.length > 0) {
                    this.selectedDepartmentType = 'key';
                    this.selectedDepartmentIndex = 0;
                    this.selectedDepartment = this.keySpecialtyContent[0];
                } else if (this.featureEducationContent && this.featureEducationContent.length > 0) {
                    this.selectedDepartmentType = 'feature';
                    this.selectedDepartmentIndex = 0;
                    this.selectedDepartment = this.featureEducationContent[0];
                }
            },
            switchTab(tab) {
                this.activeTab = tab;
                if (tab === 'key' && this.keySpecialtyContent.length > 0) {
                    this.selectDepartment(this.keySpecialtyContent[0], 'key', 0);
                } else if (tab === 'feature' && this.featureEducationContent.length > 0) {
                    this.selectDepartment(this.featureEducationContent[0], 'feature', 0);
                }
            },
            getImageSrc(item) {
                return getUploadFilePath(item.contentImage) || require('@/assets/images/home/default1.png');
            },
            getNoticeImageSrc(item) {
                return getUploadFilePath(item.contentImage) || require('@/assets/images/home/default2.png');
            },
            getHealthImageSrc(item) {
                return getUploadFilePath(item.contentImage) || require('@/assets/images/home/default3.png');
            },
            getDoctorImageSrc(item) {
                return getUploadFilePath(item.contentImage) || require('@/assets/images/home/default4.png');
            },
            getDepartmentImageSrc(item) {
                return getUploadFilePath(item.contentImage) || require('@/assets/images/home/default5.png');
            }
        },
        mounted() {
            this.getFileList()
            this.getHospitalNews()
            this.getNoticeAnnouncement()
            this.getHealthGarden()
            this.getFamousDoctor()
            this.getDepartmentAndChildrenSubject()
            this.getDepartmentAndChildrenEducation()
            this.getExpertList()
            this.$nextTick(() => {
                this.initSelectedDepartment();
            });
        },
        watch: {
            keySpecialtyContent: {
                handler(newVal) {
                    if (newVal && newVal.length > 0) {
                        this.initSelectedDepartment();
                    }
                },
                immediate: true
            },
            featureEducationContent: {
                handler(newVal) {
                    if (this.keySpecialtyContent.length === 0 && newVal && newVal.length > 0) {
                        this.initSelectedDepartment();
                    }
                },
                immediate: true
            }
        },
        errorCaptured(err, vm, info) {
            console.error('Error captured:', err, info);
            return false;
        }
    }
</script>

<style scoped lang="scss">
    .home-container-warp {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #f5f5f5;
    }
    .home-container-bottom-warp {
        width: 100%;
        height: 283px;
        background-color: #333;
        color: #fff;
        padding: 70px 0 20px;
        box-sizing: border-box;
        
        .home-container-bottom {
            width: 1200px;
            margin: 0 auto;
            position: relative;
            
            .bottom-links {
                text-align: left;
                margin-bottom: 13px;
                
                a {
                    color: #fff;
                    text-decoration: none;
                    margin: 0 10px;
                    font-size: 12px;
                    line-height: 17px;
                    
                    &:hover {
                        text-decoration: underline;
                    }
                }
            }
            
            .bottom-info {
                display: flex;
                flex-direction: column;
                // align-items: center;
                margin-bottom: 20px;
                
                .info-item {
                    margin-bottom: 15px;
                    font-size: 12px;
                    line-height: 17px;
                    display: flex;
                    align-items: center;
                    
                    i {
                        margin-right: 10px;
                        margin-left: 10px;
                        font-size: 16px;
                        line-height: 17px;
                    }
                }
            }
            
            .qrcode-container {
                position: absolute;
                right: 0;
                top: 0;
                
                .qrcode-box {
                    width: 120px;
                    position: relative;
                    text-align: center;
                    
                    .qrcode-img {
                        width: 94px;
                        height: 94px;
                        background-color: #fff;
                        padding: 6px;
                        border-radius: 6px;
                    }
                    
                    .qrcode-text {
                        color: #fff;
                        font-size: 12px;
                        margin-top: 20px;
                    }
                    
                    .triangle {
                        width: 0;
                        height: 0;
                        border-left: 10px solid transparent;
                        border-right: 10px solid transparent;
                        border-top: 10px solid #fff;
                        position: absolute;
                        bottom: 30px;
                        left: 50%;
                        transform: translateX(-50%);
                    }
                }
            }
            
            .copyright {
                text-align: center;
                font-size: 12px;
                color: rgba(255, 255, 255, 0.7);
                margin-top: 50px;
                
                a {
                    color: rgba(255, 255, 255, 0.7);
                    text-decoration: none;
                    
                    &:hover {
                        text-decoration: underline;
                    }
                }
            }
        }
    }
    .home-carousel {
        width: 100%;
        // margin-bottom: 20px;
        /deep/.el-carousel__container {
            height: 650px !important;
        }
        .carousel-image {
            width: 100%;
            height: 650px;
        }        
    }
    .home-container-all {
        width: 100%;
        background-image: url('~@/assets/images/home/大背景图片.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        position: relative;
        padding-bottom: 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
        /* 可以添加一个覆盖层，使背景图片不影响内容的可读性 */
        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.7); /* 半透明白色 */
            z-index: 0;
        }
        
        /* 确保内容在覆盖层之上 */
        > * {
            position: relative;
            z-index: 1;
        }
    }
    .content-right-expertStyle {
        width: 100%;
        height: 560px;
        background: linear-gradient(278deg, #139D9D 0%, #0072C9 100%);
        padding: 27px 0 40px;
        box-sizing: border-box;
        opacity: 0.8;
        .expert-title {
            width: 1168px;
            margin: 0 auto;
            text-align: left;
            margin-bottom: 16px;
            position: relative;
            height: 28px;
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 20px;
            color: #FFFFFF;
            line-height: 28px;
            
            &:before {
                content: '';
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(400%);
                width: 33px;
                height: 6px;
                background-color: #fff;
            }
        }
        
        .expert-content {
            width: 1168px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            position: relative;
            border-top: 1px solid #fff;
            padding-top: 74px;
            .expert-nav {
                width: 40px;
                height: 40px;
                background-color: rgba(255, 255, 255, 0.2);
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                color: #fff;
                font-size: 20px;
                z-index: 2;
                
                &.left {
                    margin-right: 10px;
                }
                
                &.right {
                    margin-left: 10px;
                }
                
                &:hover {
                    background-color: rgba(255, 255, 255, 0.4);
                }
            }
            
            .expert-list {
                flex: 1;
                display: flex;
                justify-content: space-between;
                // overflow: hidden;
                
                &.center {
                    justify-content: center;
                    
                    .expert-item {
                        margin: 0 15px;
                    }
                }
                
                .expert-item {
                    width: 170px;
                    background-color: #fff;
                    border-radius: 5px;
                    padding: 15px;
                    text-align: center;
                    cursor: pointer;
                    transition: all 0.3s;
                    position: relative;
                    
                    &:hover {
                        transform: translateY(-5px);
                        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
                    }

                    .expert-line {
                        width: 51px;
                        height: 6px;
                        background: #0C60BD;
                        position: absolute;
                        top: 0px;
                        left: 74px;
                    }
                    
                    .expert-name {
                        font-family: PingFang SC;
                        font-weight: bold;
                        font-size: 16px;
                        color: #0C60BD;
                        line-height: 22px;
                        margin-bottom: 7px;
                    }
                    
                    .expert-position {
                        font-family: PingFang SC;
                        font-weight: 400;
                        font-size: 14px;
                        color: #A8A8A8;
                        line-height: 20px;
                        margin-bottom: 8px;
                    }
                    
                    .expert-image {
                        width: 145px;
                        height: 201px;
                        margin: 0 auto 15px;
                        overflow: hidden;
                        
                        .doctor-image {
                            width: 100%;
                            height: 100%;
                            transition: transform 0.3s;
                            
                            &:hover {
                                transform: scale(1.05);
                            }
                        }
                    }
                    
                    .expert-department {
                        font-family: PingFang SC;
                        font-weight: 400;
                        font-size: 14px;
                        color: #333333;
                        line-height: 20px;
                    }
                }
            }
        }
        
        .expert-pagination {
            display: flex;
            justify-content: center;
            margin-top: 20px;
            
            span {
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background-color: rgba(255, 255, 255, 0.3);
                margin: 0 5px;
                cursor: pointer;
                
                &.active {
                    background-color: #fff;
                    width: 30px;
                    border-radius: 5px;
                }
            }
        }
    }
    .home-container-top {
        width: 1168px;
        // .home-container-carousel {
        //     width: 100%;
        //     margin-bottom: 20px;
        //     .carousel-image {
        //         width: 100%;
        //         height: 300px;
        //     }
        // }
        .home-container-top-content {
            width: 100%;
            display: flex;
            justify-content: center;
            cursor: default;
            .home-container-top-content-right {
                width: 100%;
                text-align: left;
                margin-bottom: 20px;
                .content-section {
                    margin-top: 59px;
                    height: 388px;
                    
                    .section-content {
                        display: flex;
                        justify-content: space-between;
                        // background-color: #fff;
                        height: 100%;
                        
                        .news-list {
                            width: calc(100% - 572px);
                            display: flex;
                            flex-direction: column;
                            
                            .news-header {
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                height: 40px;
                                // background-color: #f5f7fa;
                                
                                .title {
                                    width: 124px;
                                    height: 100%;
                                    background-color: #0C60BD;
                                    color: #fff;
                                    font-size: 18px;
                                    font-weight: 400;
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    line-height: 25px;
                                }
                                
                                .more {
                                    color: #000000;
                                    font-size: 12px;
                                    cursor: pointer;
                                    width: 40px;
                                    height: 22px;
                                    background: rgba(210,210,210,0.39);
                                    border-radius: 5px;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                }
                            }
                            
                            .news-items {
                                flex: 1;
                                // padding: 15px;
                                overflow-y: auto;
                                
                                .news-item {
                                    display: flex;
                                    align-items: center;
                                    color: #333333;
                                    margin-top: 21px;
                                    cursor: pointer;
                                    
                                    &.active {
                                        color: #1280F9;
                                        
                                        .circle {
                                            background-color: #1280F9;
                                        }
                                        .date {
                                            color: #1280F9;
                                        }
                                    }
                                    
                                    .circle {
                                        width: 8px;
                                        height: 8px;
                                        border-radius: 50%;
                                        background-color: #ACACAC;
                                        margin-right: 8px;
                                        flex-shrink: 0;
                                    }
                                    
                                    .text {
                                        flex: 1;
                                        font-size: 16px;
                                        white-space: nowrap;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        line-height: 22px;
                                    }
                                    
                                    .date {
                                        font-size: 16px;
                                        margin-left: 10px;
                                    }
                                }
                            }
                        }
                        
                        .news-image {
                            width: 532px;
                            position: relative;
                            .el-image {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                            }
                             .news-image-text {
                                height: 54px;
                                position: absolute;
                                bottom: 0;
                                left: 0;
                                right: 0;
                                background-color: #000000;
                                color: #fff;
                                font-size: 26px;
                                line-height: 37px;
                                opacity: 0.52;
                                font-weight: bold;
                                padding: 0 37px;
                                box-sizing: border-box;
                                display: flex;
                                align-items: center;
                            }
                        }
                    }
                }
                
                /* 医院动态特殊样式 */
                .hospital-news .section-content {
                    flex-direction: row;
                    
                    .news-list {
                        margin-right: 0;
                    }
                    
                    .news-image {
                        margin-left: 0;
                    }
                }
                
                /* 公告通知特殊样式 */
                .notice-announcement .section-content {
                    // flex-direction: row-reverse;
                    
                    .news-list {
                        margin-left: 0;
                    }
                    
                    .news-image {
                        margin-right: 0;
                    }
                }
                
                .content-right-bottom {
                    .content-right-bottom-top, .content-right-bottom-bottom {
                        width: 100%;
                        text-align: left;
                        margin-bottom: 20px;
                        .news-box {
                            background-color: #fff;
                            box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
                            
                            .news-title {
                                height: 50px;
                                background-color: $theme-color-blue;
                                color: #fff;
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                padding: 0 15px;
                                font-size: 16px;
                                font-weight: bold;
                                
                                .more {
                                    font-size: 14px;
                                    font-weight: normal;
                                    cursor: pointer;
                                }
                            }
                            
                            .news-content {
                                display: flex;
                                padding: 15px;
                                margin-top: 10px;
                                .news-list {
                                    width: 60%;
                                    margin-right: 15px;
                                    
                                    .news-item {
                                        display: flex;
                                        align-items: center;
                                        padding: 8px 0;
                                        cursor: pointer;
                                        transition: all 0.3s;
                                        
                                        &:hover, &.active {
                                            color: $theme-color-blue;
                                        }
                                        
                                        .news-item-dot {
                                            width: 6px;
                                            height: 6px;
                                            border-radius: 50%;
                                            background-color: #999;
                                            margin-right: 8px;
                                            flex-shrink: 0;
                                        }
                                        
                                        .news-item-text {
                                            flex: 1;
                                            font-size: 14px;
                                            white-space: nowrap;
                                            overflow: hidden;
                                            text-overflow: ellipsis;
                                        }
                                        
                                        .news-item-date {
                                            color: #999;
                                            font-size: 12px;
                                            margin-left: 10px;
                                        }
                                    }
                                }
                                
                                .news-image {
                                    width: 40%;
                                    height: 180px;
                                    
                                    .el-image {
                                        width: 100%;
                                        height: 100%;
                                        border: 1px solid #eee;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .home-container-top2 {
        width: 100%;
        padding: 42px 0;
        
        .home-container-top2-content {
            width: 1366px;
            margin: 0 auto;
            display: flex;
            justify-content: center;
            
            .home-container-top2-content-left,
            .home-container-top2-content-right {
                width: 580px;
                background-color: #fff;
                border-radius: 4px;
                overflow: hidden;
                box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
                padding: 0 24px;
                margin: 0 15px;
                box-sizing: border-box;
                .section-header {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    height: 60px;
                    // padding: 0 20px;
                    border-bottom: 1px solid #B8B8B8;
                    box-sizing: border-box;
                    margin-bottom: 24px;
                    .section-header-left {
                        display: flex;
                        align-items: center;                        
                    }
                    .icon-wrapper {
                        width: 26px;
                        height: 26px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        margin-right: 2px;
                    }
                    
                    .title {
                        flex: 1;
                        font-size: 20px;
                        font-weight: 400;
                        color: #333;
                        line-height: 28px;
                    }
                    
                    .more {
                        color: #333;
                        font-size: 14px;
                        line-height: 20px;
                        cursor: pointer;
                        
                        &:hover {
                            color: #0066cc;
                        }
                    }
                }
                
                .section-content {
                    display: flex;
                    flex-direction: column;
                    // padding: 20px;
                    margin-bottom: 20px;
                    .news-image {
                        width: 530px;
                        height: 180px;
                        margin-bottom: 25px;
                        
                        .el-image {
                            width: 100%;
                            height: 100%;
                            border-radius: 4px;
                        }
                    }
                    
                    .news-list {
                        width: 100%;
                        
                        .news-item {
                            width: 100%;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            padding: 10px 0;
                            cursor: pointer;
                            border-bottom: 1px dashed #eee;
                            color: #333;
                            &:last-child {
                                border-bottom: none;
                            }

                            &.active {
                                color: #0066cc;
                                .news-item-left {
                                    .circle {
                                        background-color: #0066cc;
                                    }
                                }
                                .date {
                                    color: #0066cc;
                                }
                            }

                            .news-item-left {
                                // width: 200px;
                                display: flex;
                                align-items: center;     
                                .circle {
                                    width: 8px;
                                    height: 8px;
                                    border-radius: 50%;
                                    background-color: #ccc;
                                    margin-right: 10px;
                                    flex-shrink: 0;
                                }
                                
                                .text {
                                    flex: 1;
                                    font-size: 16px;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    line-height: 22px;
                                }                   
                            }
                            
                            
                            .date {
                                color: #333;
                                font-size: 16px;
                                margin-left: 10px;
                            }
                        }
                    }
                }
            }
        }
    }
    .content-right-departmentIntroduction {
        width: 100%;
        height: 484px;
        padding: 27px 0 40px;
        box-sizing: border-box;
        background-color: rgba(255, 255, 255, 0.3);
        padding: 15px;
        backdrop-filter: blur(5px);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        
        .department-title {
            width: 1168px;
            margin: 0 auto;
            text-align: left;
            margin-bottom: 20px;
            position: relative;
            height: 28px;
            font-family: PingFang SC;
            font-weight: bold;
            font-size: 20px;
            color: #0C60BD;
            line-height: 28px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            
            &:before {
                content: '';
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(400%);
                width: 33px;
                height: 6px;
                background-color: #0C60BD;
            }
            
            .department-title-more {
                height: 22px;
                font-family: PingFang SC;
                font-weight: 400;
                font-size: 16px;
                color: #969798;
                line-height: 22px;
                cursor: pointer;
            }
        }
        
        .department-content {
            width: 1168px;
            margin: 0 auto;
            display: flex;
            position: relative;
            border-top: 1px solid #0C60BD;
            padding-top: 30px;
            
            .department-left {
                width: 554px;
                height: 351px;
                padding-right: 20px;
                
                .department-image {
                    width: 100%;
                    height: 351px;
                    position: relative;
                    overflow: hidden;
                    
                    .el-image {
                        width: 100%;
                        height: 100%;
                        transition: transform 0.3s;
                        
                        &:hover {
                            transform: scale(1.05);
                        }
                    }
                    
                    .department-image-text {
                        height: 86px;
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        right: 0;
                        background-color: #04AE9E;
                        color: #fff;
                        font-size: 26px;
                        line-height: 37px;
                        opacity: 0.52;
                        font-weight: bold;
                        padding: 0 37px;
                        box-sizing: border-box;
                        display: flex;
                        align-items: center;
                    }
                }
            }
            
            .department-right {
                width: 60%;
                display: flex;
                justify-content: space-between;
                .department-tabs {
                    width: 100%;
                    position: relative;
                    
                    .tab-header {
                        display: flex;
                        position: relative;
                        
                        .tab-item {
                            width: 204px;
                            height: 59px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            background-color: #04AE9E !important; /* 未选中的背景色 */
                            color: #fff;
                            cursor: pointer;
                            
                            &.active {
                                background-color: #2E9CD0 !important; /* 选中的背景色 */
                            }
                            
                            span {
                                font-size: 16px;
                                font-weight: bold;
                            }
                        }
                        
                        .tab-space {
                            width: 20px; /* 标签之间的间隔 */
                        }
                        
                        .triangle {
                            width: 0;
                            height: 0;
                            border-left: 10px solid transparent;
                            border-right: 10px solid transparent;
                            border-top: 10px solid #2E9CD0; /* 与选中标签背景色一致 */
                            position: absolute;
                            bottom: -10px;
                            transform: translateX(-50%);
                            transition: left 0.3s; /* 添加过渡效果 */
                        }
                    }
                    
                    .tab-content {
                        padding: 20px 0;
                        
                        .key-specialty, .feature-specialty {
                            margin-bottom: 20px;
                        }
                        
                        .department-list {
                            display: flex;
                            flex-wrap: wrap;
                            
                            .department-item {
                                cursor: pointer;
                                width: 116px;
                                height: 39px;
                                margin-right: 20px;
                                margin-bottom: 15px;
                                color: #676767;
                                &.active .department-item-box {
                                    background-color: #3498db;
                                    color: #fff;
                                    border-radius: 9px;
                                }
                                
                                .department-item-box {
                                    width: 116px;
                                    height: 39px;
                                    text-align: center;
                                    border-radius: 4px;
                                    transition: all 0.3s;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    &:hover {
                                        background-color: #3498db;
                                        color: #fff;
                                    }
                                    
                                    span {
                                        font-size: 16px;
                                    }
                                }
                            }
                        }
                    }
                }
                
                /* 第一个标签页（重点专科）的样式 */
                .department-tabs:first-child {
                    .tab-header {
                        .tab-item {
                            background-color: #04AE9E !important; /* 改为未选中的背景色 */
                            
                            &.active {
                                background-color: #2E9CD0 !important; /* 选中的背景色 */
                            }
                        }
                        
                        .triangle {
                            display: block;
                        }
                    }
                }
                
                /* 第二个标签页（特色专科）的样式 */
                .department-tabs:last-child {
                    .tab-header {
                        .tab-item {
                            background-color: #04AE9E !important; /* 改为未选中的背景色 */
                            
                            &.active {
                                background-color: #2E9CD0 !important; /* 选中的背景色 */
                            }
                        }
                    }
                }
            }
        }
    }
    .friend-links-wrap {
        width: 100%;
        height: 190px;
        background: #fff;
        display: flex;
        justify-content: center;
        align-items: center;

        .friend-links {
            width: 1200px;
            height: 110px;
            padding: 20px 28px;
            display: flex;
            align-items: center;
            border: 1px solid #eee;
            box-sizing: border-box;

            .link-title {
                color: #1780F6;
                font-size: 16px;
                margin-right: 22px;
                white-space: nowrap;
            }

            .link-list {
                display: flex;
                gap: 30px;
                align-items: center;

                .link-item {
                    display: block;
                    transition: all 0.3s ease;
                    
                    &:hover {
                        transform: translateY(-3px);
                        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
                    }
                    
                    img {
                        height: 54px;
                        object-fit: contain;
                    }
                }
            }
        }
    }
</style>