/* 骨架屏样式 */
 .skeleton {
     animation: skeleton-loading 1.5s linear infinite alternate;
     background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
     background-size: 200% 100%;
 }

 @keyframes skeleton-loading {
     0% {
         background-position: -200% 0;
     }

     100% {
         background-position: 200% 0;
     }
 }

 .article-skeleton {
     margin-top: 25px;
     height: 150px;
     margin-bottom: 20px;
     display: flex;
 }

 .article-skeleton-img {
     width: 240px;
     height: 150px;
     border-radius: 5px;
 }

 .article-skeleton-content {
     flex: 1;
     padding-left: 15px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
 }

 .article-skeleton-title {
     height: 24px;
     border-radius: 4px;
     margin-bottom: 15px;
     width: 90%;
 }

 .article-skeleton-tag {
     height: 18px;
     border-radius: 4px;
     margin-bottom: 15px;
     width: 40%;
 }

 .article-skeleton-date {
     height: 16px;
     border-radius: 4px;
     width: 30%;
 }

 /* 错误样式 */
 .error-container {
     text-align: center;
     padding: 30px;
     display: none;
 }

 .error-icon {
     font-size: 48px;
     color: #ff4d4f;
     margin-bottom: 20px;
 }

 .error-message {
     font-size: 18px;
     color: #333;
     margin-bottom: 20px;
 }

 .retry-button {
     background-color: #1890ff;
     color: white;
     border: none;
     padding: 10px 20px;
     border-radius: 4px;
     cursor: pointer;
     font-size: 16px;
 }

 .retry-button:hover {
     background-color: #40a9ff;
 }

 /* 加载指示器 */
 .loading-indicator {
     text-align: center;
     padding: 20px;
     display: none;
 }

 .loading-spinner {
     border: 4px solid #f3f3f3;
     border-top: 4px solid #3498db;
     border-radius: 50%;
     width: 30px;
     height: 30px;
     animation: spin 1s linear infinite;
     margin: 0 auto;
 }

 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }