index.php 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294
  1. <?php
  2. require 'CommonQuery.php';
  3. // 轮播图数据
  4. $carouselItems = [
  5. [
  6. "image" => "/images/test-header-1.png",
  7. "alt" => "厦门市文化遗产宣传图"
  8. ],
  9. [
  10. "image" => "https://picsum.photos/id/1036/1200/400",
  11. "alt" => "厦门风景图"
  12. ],
  13. [
  14. "image" => "https://picsum.photos/id/1037/1200/400",
  15. "alt" => "厦门文化遗产保护"
  16. ]
  17. ];
  18. $carouselItems2 = loadListByChannelName(6, "热门新闻");
  19. // 通知公告数据
  20. $notices = loadListByChannelName(10, "新闻公告");
  21. // 工作动态数据
  22. $workUpcreatetimes = loadListByChannelName(10, "工作动态");
  23. // 党建工作数据
  24. $partyBuilding = loadListByChannelName(10, "党建工作");
  25. // 热点新闻数据
  26. $hot = loadListByChannelName(10, "热门新闻");
  27. // 精彩推荐数据
  28. $featured = loadListByChannelName(6, "热门新闻");
  29. ?>
  30. <!DOCTYPE html>
  31. <html lang="zh-CN">
  32. <head>
  33. <meta charset="UTF-8">
  34. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  35. <title>厦门市文化遗产保护中心</title>
  36. <link rel="stylesheet" href="/css/fonts.css">
  37. <link rel="stylesheet" href="/css/fontawesome.min.css">
  38. <link rel="stylesheet" href="/css/bootstrap.min.css">
  39. <link rel="stylesheet" href="/css/swiper-bundle.min.css">
  40. <link rel="stylesheet" href="/css/style.css">
  41. <script src="/js/jquery-3.7.1.js"></script>
  42. <script src="/js/bootstrap.bundle.js"></script>
  43. <script src="/js/swiper-bundle.min.js"></script>
  44. </head>
  45. <body>
  46. <?php include __DIR__ . '/components/navbar.php'; ?>
  47. <!-- 轮播图 -->
  48. <div class="swiper mySwiper" style="width: 100%; height: 400px;">
  49. <div class="swiper-wrapper">
  50. <?php foreach ($carouselItems as $item): ?>
  51. <div class="swiper-slide">
  52. <img src="<?php echo $item['image']; ?>" alt="<?php echo $item['alt']; ?>" style="width: 100%; height: 100%; object-fit: cover;">
  53. </div>
  54. <?php endforeach; ?>
  55. </div>
  56. <div class="swiper-pagination"></div>
  57. <div class="swiper-button-prev"></div>
  58. <div class="swiper-button-next"></div>
  59. </div>
  60. <!-- 主要内容 -->
  61. <div class="main-content">
  62. <div class="container">
  63. <!-- 通知公告和热点新闻 -->
  64. <div class="row">
  65. <div class="col col-sm-12 col-md-6 col-lg-6 notices-list">
  66. <div class="section-title">
  67. <div class="d-flex flex-row align-items-center">
  68. <h2 id="notices-button" class="button active icon">通知公告</h2>
  69. <h2 id="hot-news-button" class="button icon">热点新闻</h2>
  70. </div>
  71. <a href="#" class="section-more" id="notices-more">查看更多 <i class="fa fa-angle-right"></i></a>
  72. </div>
  73. <div id="notices-list" class="notices-content">
  74. <?php if (!empty($notices)): ?>
  75. <?php foreach ($notices as $notice): ?>
  76. <div class="notice-item">
  77. <div>
  78. <a href="#" class="notice-title"><?php echo $notice['title']; ?></a>
  79. <p><?php echo $notice['description']; ?></p>
  80. </div>
  81. <span class="notice-createtime"><?php echo $notice['createtime']; ?></span>
  82. </div>
  83. <?php endforeach; ?>
  84. <?php else: ?>
  85. <div class="no-news">暂无数据</div>
  86. <?php endif; ?>
  87. </div>
  88. <div id="hot-news-list" style="display:none;" class="news-content">
  89. <?php if (!empty($hot)): ?>
  90. <?php foreach ($hot as $item): ?>
  91. <div class="news-item">
  92. <a href="#" class="title"><?php echo $item['title']; ?></a>
  93. <span class="createtime"><?php echo $item['createtime']; ?></span>
  94. </div>
  95. <?php endforeach; ?>
  96. <?php else: ?>
  97. <div class="no-news">暂无数据</div>
  98. <?php endif; ?>
  99. </div>
  100. </div>
  101. <div class="col col-sm-12 col-md-6 col-lg-6">
  102. <div class="swiper mySwiper2" style="width: 100%; height:350px;">
  103. <div class="swiper-wrapper">
  104. <?php if (!empty($carouselItems2)): ?>
  105. <?php foreach ($carouselItems2 as $item): ?>
  106. <div class="swiper-slide featured-image">
  107. <img src="<?php echo $item['image']; ?>" alt="<?php echo $item['desc']; ?>" style="width: 100%; height: 100%; object-fit: cover;">
  108. <div class="caption">
  109. <h3><?php echo $item['title']; ?></h3>
  110. <p><?php echo $item['desc']; ?></p>
  111. </div>
  112. </div>
  113. <?php endforeach; ?>
  114. <?php else: ?>
  115. <div class="swiper-slide featured-image">
  116. <div class="no-news">暂无数据</div>
  117. </div>
  118. <?php endif; ?>
  119. </div>
  120. <div class="swiper-pagination"></div>
  121. </div>
  122. </div>
  123. </div>
  124. <!-- 工作动态和党建工作 -->
  125. <div class="row mt-lg-3 mt-md-2 mt-sm-2">
  126. <div class="col col-sm-12 col-md-6 col-lg-6">
  127. <div class="main-box">
  128. <div class="section-title">
  129. <h2><i class="fa fa-refresh"></i> 工作动态</h2>
  130. <a href="./gongZuoDongTai.php" class="section-more">查看更多 <i class="fa fa-angle-right"></i></a>
  131. </div>
  132. <div class="news-content">
  133. <?php if (!empty($workUpcreatetimes)): ?>
  134. <?php foreach ($workUpcreatetimes as $upcreatetime): ?>
  135. <div class="news-item">
  136. <a href="#" class="title"><?php echo $upcreatetime['title']; ?></a>
  137. <span class="createtime"><?php echo $upcreatetime['createtime']; ?></span>
  138. </div>
  139. <?php endforeach; ?>
  140. <?php else: ?>
  141. <div class="no-news">暂无数据</div>
  142. <?php endif; ?>
  143. </div>
  144. </div>
  145. </div>
  146. <div class="col col-sm-12 col-md-6 col-lg-6">
  147. <div class="main-box">
  148. <div class="section-title">
  149. <h2><i class="fa fa-flag"></i> 党建工作</h2>
  150. <a href="./dangnJianGongZuo.php" class="section-more">查看更多 <i class="fa fa-angle-right"></i></a>
  151. </div>
  152. <div class="news-content">
  153. <?php if (!empty($partyBuilding)): ?>
  154. <?php foreach ($partyBuilding as $item): ?>
  155. <div class="news-item">
  156. <a href="#" class="title"><?php echo $item['title']; ?></a>
  157. <span class="createtime"><?php echo $item['createtime']; ?></span>
  158. </div>
  159. <?php endforeach; ?>
  160. <?php else: ?>
  161. <div class="no-news">暂无数据</div>
  162. <?php endif; ?>
  163. </div>
  164. </div>
  165. </div>
  166. </div>
  167. <hr class="main-hr" />
  168. <!-- 精彩推荐 -->
  169. <div class="featured-section main-box">
  170. <div class="section-title">
  171. <h2 class="icon">精彩推荐</h2>
  172. <!-- <a href="#" class="section-more">查看更多 <i class="fa fa-angle-right"></i></a> -->
  173. </div>
  174. <div class="featured-grid">
  175. <?php if (!empty($featured)): ?>
  176. <?php foreach ($featured as $item): ?>
  177. <div class="featured-card">
  178. <img src="<?php echo $item['image']; ?>" alt="<?php echo $item['alt']; ?>">
  179. <p><?php echo $item['title']; ?></p>
  180. </div>
  181. <?php endforeach; ?>
  182. <?php else: ?>
  183. <div class="no-news">暂无数据</div>
  184. <?php endif; ?>
  185. </div>
  186. </div>
  187. <!-- 公共服务 -->
  188. <div class="services-section">
  189. <img class="title" src="/images/box-service.png" alt="公共服务">
  190. <div class="services-grid">
  191. <div class="service-card">
  192. <img class="icon" src="/images/icon-explore.png">
  193. <h3>志愿者招募</h3>
  194. <a href="#" class="service-link">
  195. <i class="fa fa-solid fa-chevron-right"></i>
  196. </a>
  197. </div>
  198. <div class="service-card">
  199. <img class="icon" src="/images/icon-join.png">
  200. <h3>活动报名</h3>
  201. <a href="#" class="service-link">
  202. <i class="fa fa-solid fa-chevron-right"></i>
  203. </a>
  204. </div>
  205. <div class="service-card">
  206. <img class="icon" src="/images/icon-contract.png">
  207. <h3>联系咨询通道</h3>
  208. <a href="#" class="service-link">
  209. <i class="fa fa-solid fa-chevron-right"></i>
  210. </a>
  211. </div>
  212. </div>
  213. </div>
  214. </div>
  215. </div>
  216. <?php include __DIR__ . '/components/footer.php'; ?>
  217. <!-- Swiper.js 初始化脚本 -->
  218. <script>
  219. $(document).ready(function() {
  220. // 初始化 Swiper
  221. const swiper = new Swiper(".mySwiper", {
  222. slidesPerView: 1,
  223. spaceBetween: 30,
  224. loop: true,
  225. pagination: {
  226. el: ".swiper-pagination",
  227. clickable: true,
  228. },
  229. navigation: {
  230. nextEl: ".swiper-button-next",
  231. prevEl: ".swiper-button-prev",
  232. },
  233. autoplay: {
  234. delay: 5000,
  235. disableOnInteraction: false,
  236. },
  237. });
  238. const swiper2 = new Swiper(".mySwiper2", {
  239. slidesPerView: 1,
  240. spaceBetween: 30,
  241. loop: true,
  242. pagination: {
  243. el: ".swiper-pagination",
  244. clickable: true,
  245. },
  246. autoplay: {
  247. delay: 5000,
  248. disableOnInteraction: false,
  249. },
  250. });
  251. $('#notices-more').click(function() {
  252. if ($('#notices-list').is(':visible')) {
  253. location.href = '/gongZuoDongTai.php';
  254. } else {
  255. location.href = '/xinWenLieBiao.php';
  256. }
  257. });
  258. $('#notices-button').click(function() {
  259. $('#notices-button').addClass('active');
  260. $('#hot-news-button').removeClass('active');
  261. $('#hot-news-list').hide();
  262. $('#notices-list').show();
  263. });
  264. $('#hot-news-button').click(function() {
  265. $('#hot-news-button').addClass('active');
  266. $('#notices-button').removeClass('active');
  267. $('#hot-news-list').show();
  268. $('#notices-list').hide();
  269. });
  270. });
  271. </script>
  272. </body>
  273. </html>