index.php 12 KB

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