@charset "utf-8";
/* CSS Document */

body {
            background-color: #f5f7fa;
            padding: 20px;
            color: #1B1B1B;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .image-list {
            display: flex;
            flex-wrap: wrap;
            margin: 0 -10px;
        }
        
        .image-list li {
            list-style: none;
            margin: 10px;
            flex: 1 0 calc(25% - 20px);
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            transition: transform 0.3s, box-shadow 0.3s;
        }
        
        .image-list li:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
        }
        
        .image-container {
            width: 100%;
            padding-bottom: 75%; /* 4:3 宽高比 */
            position: relative;
            overflow: hidden;
        }
        
        .image-container img {
            position: absolute;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s;
        }
        
        .image-list li:hover .image-container img {
            transform: scale(1.05);
        }
        
        .image-info {
            padding: 12px 15px;
        }
        
        .image-info h4 {
            font-size: 14px;
            color: #1B1B1B;
            height: 20px;
            line-height: 20px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin-bottom: 5px;
        }
        
        .image-info .description {
            font-size: 12px;
            color: #999;
            height: 20px;
            line-height: 20px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin-bottom: 5px;
        }
        
        .image-info .details {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 20px;
            line-height: 20px;
        }
        
        .price {
            font-size: 14px;
            color: #e74c3c;
            font-weight: bold;
        }
        
        .price em {
            font-style: normal;
            font-size: 16px;
        }
        
        .tags {
            font-size: 12px;
        }
        
        .tags-light {
            display: inline-block;
            background-color: #f0f7ff;
            color: #1890ff;
            padding: 2px 6px;
            border-radius: 3px;
            font-style: normal;
        }
        
        /* 平板端样式 */
        @media (max-width: 1024px) {
            .image-list li {
                flex: 1 0 calc(33.333% - 20px);
            }
        }
        
        /* 手机端样式 */
        @media (max-width: 768px) {
            .image-list li {
                flex: 1 0 calc(50% - 20px);
            }
        }
        
        /* 小手机端样式 */
        @media (max-width: 480px) {
            .image-list li {
                flex: 1 0 100%;
            }
        }