articles.html 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>文章列表 - 极速支付</title>
  7. <meta name="description" content="极速支付提供专业支付通道服务,支持机场/发卡/影视/游戏等业务,费率低至6%,D0实时结算,自研系统成功率99%。">
  8. <style>
  9. * {
  10. margin: 0;
  11. padding: 0;
  12. box-sizing: border-box;
  13. }
  14. body {
  15. font-family: 'Microsoft YaHei', sans-serif;
  16. line-height: 1.6;
  17. color: #fff;
  18. background: linear-gradient(135deg, #0a192f 0%, #112240 100%);
  19. min-height: 100vh;
  20. }
  21. .nav {
  22. background: rgba(17, 34, 64, 0.8);
  23. padding: 15px 0;
  24. position: fixed;
  25. width: 100%;
  26. top: 0;
  27. z-index: 100;
  28. backdrop-filter: blur(10px);
  29. }
  30. .nav-container {
  31. max-width: 1200px;
  32. margin: 0 auto;
  33. padding: 0 20px;
  34. display: flex;
  35. justify-content: space-between;
  36. align-items: center;
  37. }
  38. .nav-logo {
  39. color: #64ffda;
  40. font-size: 1.5em;
  41. font-weight: bold;
  42. text-decoration: none;
  43. }
  44. .nav-links {
  45. display: flex;
  46. gap: 20px;
  47. }
  48. .nav-link {
  49. color: #fff;
  50. text-decoration: none;
  51. padding: 8px 15px;
  52. border-radius: 5px;
  53. transition: all 0.3s ease;
  54. }
  55. .nav-link:hover {
  56. background: rgba(100, 255, 218, 0.1);
  57. color: #64ffda;
  58. }
  59. .container {
  60. max-width: 1200px;
  61. margin: 0 auto;
  62. padding: 120px 20px 40px;
  63. }
  64. .article-list {
  65. margin-top: 40px;
  66. }
  67. .article-item {
  68. background: rgba(17, 34, 64, 0.4);
  69. border-radius: 15px;
  70. padding: 25px;
  71. margin-bottom: 20px;
  72. transition: all 0.3s ease;
  73. border: 1px solid rgba(100, 255, 218, 0.1);
  74. backdrop-filter: blur(5px);
  75. }
  76. .article-item:hover {
  77. transform: translateY(-5px);
  78. background: rgba(17, 34, 64, 0.6);
  79. border-color: rgba(100, 255, 218, 0.3);
  80. box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  81. }
  82. .article-title {
  83. color: #64ffda;
  84. font-size: 1.5em;
  85. margin-bottom: 10px;
  86. text-decoration: none;
  87. display: block;
  88. }
  89. .article-title:hover {
  90. color: #fff;
  91. }
  92. .article-meta {
  93. color: #8892b0;
  94. font-size: 0.9em;
  95. margin-bottom: 15px;
  96. }
  97. .article-excerpt {
  98. color: #ccd6f6;
  99. margin-bottom: 15px;
  100. line-height: 1.8;
  101. }
  102. .article-link {
  103. color: #64ffda;
  104. text-decoration: none;
  105. font-weight: bold;
  106. display: inline-block;
  107. transition: all 0.3s ease;
  108. padding: 5px 0;
  109. }
  110. .article-link:hover {
  111. color: #fff;
  112. transform: translateX(10px);
  113. }
  114. .page-title {
  115. color: #64ffda;
  116. font-size: 2.5em;
  117. margin-bottom: 20px;
  118. text-align: center;
  119. text-shadow: 0 0 10px rgba(100, 255, 218, 0.3);
  120. }
  121. .page-description {
  122. color: #8892b0;
  123. text-align: center;
  124. margin-bottom: 40px;
  125. font-size: 1.2em;
  126. }
  127. @media (max-width: 768px) {
  128. .nav-links {
  129. display: none;
  130. }
  131. .page-title {
  132. font-size: 2em;
  133. }
  134. .article-item {
  135. padding: 20px;
  136. }
  137. .article-title {
  138. font-size: 1.3em;
  139. }
  140. }
  141. </style>
  142. </head>
  143. <body>
  144. <nav class="nav">
  145. <div class="nav-container">
  146. <a href="index6.html" class="nav-logo">极速支付</a>
  147. <div class="nav-links">
  148. <a href="articles.html" class="nav-link">文章列表</a>
  149. <a href="index6.html#contact" class="nav-link">联系我们</a>
  150. </div>
  151. </div>
  152. </nav>
  153. <div class="container">
  154. <h1 class="page-title">最新动态</h1>
  155. <p class="page-description">了解极速支付的最新消息和行业动态</p>
  156. <div class="article-list">
  157. <article class="article-item">
  158. <a href="articles/article4.html" class="article-title">支付行业发展趋势:未来支付新方向</a>
  159. <div class="article-meta">发布时间:2024-01-20 | 阅读:3,567</div>
  160. <p class="article-excerpt">随着科技的快速发展,支付行业正在经历前所未有的变革。本文将为您分析支付行业的最新发展趋势...</p>
  161. <a href="articles/article4.html" class="article-link">阅读全文 →</a>
  162. </article>
  163. <article class="article-item">
  164. <a href="articles/article3.html" class="article-title">支付安全:保护您的交易安全</a>
  165. <div class="article-meta">发布时间:2024-01-15 | 阅读:2,345</div>
  166. <p class="article-excerpt">在数字化支付时代,支付安全变得越来越重要。本文将为您详细介绍支付安全的关键要素和防护措施...</p>
  167. <a href="articles/article3.html" class="article-link">阅读全文 →</a>
  168. </article>
  169. <article class="article-item">
  170. <a href="articles/article2.html" class="article-title">如何选择适合您的支付解决方案</a>
  171. <div class="article-meta">发布时间:2024-01-10 | 阅读:1,892</div>
  172. <p class="article-excerpt">面对众多支付方案,如何选择最适合自己的?本文从多个角度为您分析,帮助您做出明智的选择...</p>
  173. <a href="articles/article2.html" class="article-link">阅读全文 →</a>
  174. </article>
  175. <article class="article-item">
  176. <a href="articles/article1.html" class="article-title">支付基础知识:了解支付流程</a>
  177. <div class="article-meta">发布时间:2024-01-05 | 阅读:2,156</div>
  178. <p class="article-excerpt">了解支付的基本概念和流程,帮助您更好地理解支付系统的运作方式...</p>
  179. <a href="articles/article1.html" class="article-link">阅读全文 →</a>
  180. </article>
  181. </div>
  182. </div>
  183. </body>
  184. </html>