/* 图片容器样式 */
        .image-zoom-container {
        }

        .image-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 24rem;
            margin-top: 24rem;
        }

        .image-item {
            position: relative;
            overflow: hidden;
            /* border-radius: 8rem; */
            /* box-shadow: 0 2rem 8rem rgba(0, 0, 0, 0.05); */
            transition: all 0.3s ease;
        }

        .image-item:hover {
            /* transform: translateY(-8px); */
            /* box-shadow: 0 8rem 16rem rgba(0, 0, 0, 0.1); */
        }

        .image-zoom-container img {
            width: 100%;
            height: 200rem;
            object-fit: cover;
            cursor: zoom-in;
            transition: all 0.4s ease;
        }

        .image-item:hover img {
            transform: scale(1.05);
        }

        .image-caption {
            padding: 12rem 16rem;
            background-color: rgba(255, 255, 255, 0.9);
            font-size: 14rem;
            color: #555;
        }

        /* 操作图标组 */
        .image-actions {
            position: absolute;
            top: 10rem;
            right: 10rem;
            display: flex;
            gap: 8rem;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .image-item:hover .image-actions {
            opacity: 1;
        }

        .action-btn {
            width: 36rem;
            height: 36rem;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, 0.6);
            color: white;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .action-btn:hover {
            background-color: rgba(255, 255, 255, 0.9);
            color: #333;
            transform: scale(1.1);
        }

.action-btn:hover i:before {
    filter: brightness(0.2);
}

        /* 放大层样式 */
        .image-zoom-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.95);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            padding: 32rem;
        }

        .image-zoom-overlay.active {
            display: flex;
        }

        .image-zoom-wrapper {
            position: relative;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
        }

        .image-zoom-content {
            position: relative;
            width: 100%;
            height: 100%;
            text-align: center;
            transition: transform 0.3s ease;
            cursor: grab;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .image-zoom-content.grabbing {
            cursor: grabbing;
        }

        .image-zoom-content img {
            max-width: 100%;
            max-height: 100%;
            cursor: zoom-out;
            border: none;
            user-select: none;
            width: auto;
            height: auto;
        }

        /* 关闭图标 */
        .image-zoom-close {
            position: absolute;
            top: 20rem;
            right: 20rem;
            width: 50rem;
            height: 50rem;
            background-color: rgba(255, 0, 0, 0.8);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28rem;
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 1010;
            box-shadow: 0 2rem 10rem rgba(0, 0, 0, 0.3);
        }

        .image-zoom-close:hover {
            background-color: rgba(255, 0, 0, 1);
            transform: rotate(90deg) scale(1.1);
        }

        /* 导航按钮 */
        .image-zoom-nav {
            position: absolute;
            top: 50%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            transform: translateY(-50%);
            padding: 0 16rem;
            z-index: 1005;
        }

        .image-zoom-nav button {
            background-color: rgba(0, 0, 0, 0.5);
            border: 1rem solid rgba(255, 255, 255, 0.2);
            color: white;
            font-size: 30rem;
            width: 60rem;
            height: 60rem;
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0.7;
        }

        .image-zoom-nav button:hover {
            background-color: rgba(255, 255, 255, 0.2);
            opacity: 1;
            transform: scale(1.1);
        }

        /* 图片索引和操作栏 */
        .image-zoom-controls {
            position: absolute;
            bottom: 20rem;
            left: 0;
            right: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 24rem;
            color: white;
            z-index: 1010;
        }

        .image-zoom-index {
            background-color: rgba(0, 0, 0, 0.6);
            padding: 8rem 16rem;
            border-radius: 20rem;
            font-size: 16rem;
            opacity: 0.8;
        }

        .zoom-control-buttons {
            display: flex;
            gap: 8rem;
        }

        .zoom-btn {
            background-color: rgba(0, 0, 0, 0.6);
            border: 1rem solid rgba(255, 255, 255, 0.2);
            color: white;
            padding: 8rem 16rem;
            border-radius: 4rem;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 5rem;
            font-size: 14rem;
        }

        .zoom-btn:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }

        /* 提示信息 */
        .zoom-hint {
            position: absolute;
            top: 20rem;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 8rem 16rem;
            border-radius: 4rem;
            font-size: 14rem;
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: 1010;
        }

        .zoom-hint.visible {
            opacity: 1;
        }

        /* 加载动画 */
        .image-loading {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1002;
        }

        .spinner {
            width: 40rem;
            height: 40rem;
            border: 4rem solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            border-top-color: white;
            animation: spin 1s ease-in-out infinite;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        .fa-search:before {
            content: "";
            background: url(../image/search.png) center no-repeat;
            background-size: cover;
            width: 15rem;
            height: 15rem;
            display: block;
        }
        
        .fa-search-plus:before {
            content: "";
            background: url(../image/rightbtn.png) center no-repeat;
            background-size: cover; 
        }
        
        .fa-search-minus:before {
            content: "";
            background: url(../image/small.png) center no-repeat;
            background-size: cover;
            width: 15rem;
            height: 15rem;
            display: block;
        }
        .fa-refresh:before {
            content: "";
            background: url(../image/cz.png) center no-repeat;
            background-size: cover;
            width: 15rem;
            height: 15rem;
            display: block;
        }
        .fa-search-plus:before {
            content: "";
            background: url(../image/big.png) center no-repeat;
            background-size: cover;
            width: 15rem;
            height: 15rem;
            display: block;
        }
        .fa-chevron-left:before {
            content: "";
            background: url(../image/swpbtnleft.png) center no-repeat;
            background-size: cover;
            width: 40rem;
            height: 40rem;
            display: block;
        }
        .fa-chevron-right:before {
            content: "";
            background: url(../image/swpbtnright.png) center no-repeat;
            background-size: cover;
            width: 40rem;
            height: 40rem;
            display: block;
        }
        
        .fa-remove:before, .fa-close:before, .fa-times:before {
            content: "";
            background: url(../image/cuo.png) center no-repeat;
            background-size: cover;
            width: 20rem;
            height: 20rem;
            display: block;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .image-grid {
                grid-template-columns: 1fr;
            }

            .image-zoom-nav button {
                width: 50rem;
                height: 50rem;
                font-size: 24rem;
            }

            .image-zoom-close {
                width: 40rem;
                height: 40rem;
                font-size: 24rem;
                top: 15rem;
                right: 15rem;
            }

            .image-zoom-controls {
                flex-direction: column;
                gap: 8rem;
                bottom: 15rem;
            }

            .page-title {
                font-size: 28rem;
                margin: 20rem 0;
            }

            .image-zoom-container {
                padding: 20rem;
                margin: 20rem auto;
            }
            
        }