Taio
/
jsupay


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章列表 - 极速支付</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            line-height: 1.6;
            color: #303133;
            background-color: #f5f7fa;
            min-height: 100vh;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .header {
            text-align: center;
            padding: 40px 0;
            background: #fff;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
            margin-bottom: 20px;
        }
        
        .header h1 {
            font-size: 2em;
            color: #409EFF;
            font-weight: 500;
        }
        
        .article-list {
            background: #fff;
            border-radius: 4px;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
            padding: 20px;
        }
        
        .article-item {
            padding: 20px;
            border-bottom: 1px solid #EBEEF5;
            transition: all 0.3s ease;
        }
        
        .article-item:last-child {
            border-bottom: none;
        }
        
        .article-item:hover {
            background-color: #f5f7fa;
        }
        
        .article-title {
            font-size: 1.2em;
            color: #303133;
            margin-bottom: 10px;
            font-weight: 500;
        }
        
        .article-title a {
            color: #303133;
            text-decoration: none;
            transition: color 0.3s ease;
        }
        
        .article-title a:hover {
            color: #409EFF;
        }
        
        .article-meta {
            font-size: 0.9em;
            color: #909399;
            margin-bottom: 10px;
        }
        
        .article-summary {
            color: #606266;
            margin-bottom: 10px;
        }
        
        .article-tags {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        
        .tag {
            padding: 2px 8px;
            background: #ecf5ff;
            color: #409EFF;
            border-radius: 4px;
            font-size: 0.9em;
        }
        
        .pagination {
            display: flex;
            justify-content: center;
            margin-top: 20px;
            gap: 10px;
        }
        
        .page-button {
            padding: 8px 16px;
            background: #fff;
            border: 1px solid #DCDFE6;
            border-radius: 4px;
            color: #606266;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .page-button:hover {
            color: #409EFF;
            border-color: #c6e2ff;
            background-color: #ecf5ff;
        }
        
        .page-button.active {
            background: #409EFF;
            color: #fff;
            border-color: #409EFF;
        }
        
        @media (max-width: 768px) {
            .container {
                padding: 10px;
            }
            
            .header {
                padding: 20px 0;
            }
            
            .article-list {
                padding: 10px;
            }
            
            .article-item {
                padding: 15px;
            }
        }
        
        .nav-buttons {
            margin-top: 20px;
            display: flex;
            gap: 10px;
            justify-content: center;
        }
        
        .nav-button {
            display: inline-block;
            padding: 8px 16px;
            background: #409EFF;
            color: #fff;
            text-decoration: none;
            border-radius: 4px;
            transition: all 0.3s ease;
        }
        
        .nav-button:hover {
            background: #66b1ff;
        }
    </style>
</head>
<body>
    <div class="container">
        <header class="header">
            <h1>文章列表</h1>
            <div class="nav-buttons">
                <a href="index7.html" class="nav-button">返回首页</a>
            </div>
        </header>
        
        <main class="article-list">
            <article class="article-item">
                <h2 class="article-title">
                    <a href="article-detail.html">如何选择合适的支付通道？</a>
                </h2>
                <div class="article-meta">
                    发布时间：2024-03-20 | 阅读量：1234
                </div>
                <p class="article-summary">
                    本文详细介绍了如何根据业务需求选择合适的支付通道，包括费率、结算周期、成功率等多个维度的考量...
                </p>
                <div class="article-tags">
                    <span class="tag">支付通道</span>
                    <span class="tag">费率</span>
                    <span class="tag">结算</span>
                </div>
            </article>
            
            <article class="article-item">
                <h2 class="article-title">
                    <a href="article-d0.html">D0结算的优势与注意事项</a>
                </h2>
                <div class="article-meta">
                    发布时间：2024-03-19 | 阅读量：986
                </div>
                <p class="article-summary">
                    深入解析D0结算模式的特点，以及在使用过程中需要注意的关键事项，帮助您更好地管理资金流...
                </p>
                <div class="article-tags">
                    <span class="tag">D0结算</span>
                    <span class="tag">资金管理</span>
                </div>
            </article>
            
            <article class="article-item">
                <h2 class="article-title">
                    <a href="article-security.html">支付系统安全防护指南</a>
                </h2>
                <div class="article-meta">
                    发布时间：2024-03-18 | 阅读量：1567
                </div>
                <p class="article-summary">
                    全面介绍支付系统的安全防护措施，包括风控策略、异常监控、数据加密等多个方面的最佳实践...
                </p>
                <div class="article-tags">
                    <span class="tag">安全防护</span>
                    <span class="tag">风控</span>
                    <span class="tag">数据安全</span>
                </div>
            </article>
        </main>
        
        <div class="pagination">
            <button class="page-button active">1</button>
            <button class="page-button">2</button>
            <button class="page-button">3</button>
            <button class="page-button">下一页</button>
        </div>
    </div>
</body>
</html>