/* 首页/分类页横排列表样式（无缩略图） */ 
.seo-post-list { 
    display: flex; 
    flex-direction: column; 
    gap: 1rem; 
} 
.seo-post-horizontal { 
    background: var(--seo-card); 
    border-radius: var(--seo-radius); 
    border: 1px solid var(--seo-border); 
    box-shadow: var(--seo-shadow); 
    padding: 1.5rem; 
    transition: all 0.2s; 
} 
.seo-post-horizontal:hover { 
    transform: translateX(5px); 
    border-left: 4px solid var(--seo-primary); 
} 
.seo-post-horizontal .seo-post-title { 
    font-size: 1.2rem; 
    font-weight: 600; 
    margin-bottom: 0.8rem; 
    line-height: 1.5; 
} 
.seo-post-horizontal .seo-post-excerpt { 
    color: var(--seo-gray); 
    font-size: 0.95rem; 
    line-height: 1.7; 
    margin-bottom: 1rem; 
} 
.seo-post-horizontal .seo-post-meta { 
    font-size: 0.85rem; 
    color: var(--seo-gray); 
    display: flex; 
    gap: 1.5rem; 
    padding-top: 0.8rem; 
    border-top: 1px dashed var(--seo-border); 
} 
/* 分页适配横排列表 */ 
.seo-post-list .seo-pagination { 
    justify-content: center; 
    margin-top: 1rem; 
} 
/* 突出线条感的文章列表样式 */ 
.seo-post-horizontal { 
    border: none; /* 去掉原有卡片边框 */ 
    box-shadow: none; /* 去掉原有卡片阴影 */ 
    border-bottom: 2px solid var(--seo-border); /* 加粗分隔线，线条感更强 */ 
    padding: 1.5rem 0; /* 去掉左右内边距，线条贯穿整行 */ 
    transition: all 0.2s; 
} 
/* hover效果换成线条变色，更有交互感 */ 
.seo-post-horizontal:hover { 
    border-bottom-color: var(--seo-primary); /* hover时线条变主题蓝色 */ 
    transform: none; /* 不需要右移动效可以保留，要的话删掉这行 */ 
    border-left: none; /* 去掉原来的左侧高亮，换成底部线条高亮 */ 
} 
/* ========== 首页/分类页文章列表美化 ========== */ 
/* 1. 初始化序号计数器，自动给文章编1/2/3序号 */ 
.seo-post-list { 
    counter-reset: post-counter; 
    gap: 1.2rem; /* 加大文章间距，呼吸感更好 */ 
} 
 
/* 2. 文章卡片轻量美化，加轻微层次感 */ 
.seo-post-horizontal { 
    background: var(--seo-card); 
    border-radius: var(--seo-radius); 
    border: 1px solid var(--seo-border); 
    box-shadow: 0 1px 4px rgba(0,0,0,0.04); /* 极淡阴影，有层次不厚重 */ 
    padding: 1.5rem 1.5rem 1.5rem 3.5rem; /* 左侧留空放序号 */ 
    position: relative; 
    transition: all 0.3s ease; 
    counter-increment: post-counter; /* 每篇文章序号自动+1 */ 
} 
 
/* 3. 左侧自动生成彩色序号，辨识度拉满 */ 
.seo-post-horizontal::before { 
    content: counter(post-counter); 
    position: absolute; 
    left: 1.5rem; 
    top: 50%; 
    transform: translateY(-50%); 
    width: 2.2rem; 
    height: 2.2rem; 
    border-radius: 50%; 
    background: linear-gradient(135deg, var(--seo-primary), #3b82f6); 
    color: #fff; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-weight: 700; 
    font-size: 1rem; 
} 
 
/* 4. 悬浮交互效果，更有动态感 */ 
.seo-post-horizontal:hover { 
    border-color: var(--seo-primary); 
    transform: translateX(3px); 
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1); /* 悬浮加淡蓝色阴影 */ 
} 
 
/* 5. 元信息加可视化图标，不生硬 */ 
.seo-post-meta span:first-child::before { content: '📅 '; } /* 日期前加日历 */ 
.seo-post-meta span:nth-child(2)::before { content: '📂 '; } /* 分类前加文件夹 */ 
.seo-post-meta span:nth-child(3)::before { content: '💬 '; } /* 评论前加气泡 */