park.html 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  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. <style>
  8. * {
  9. margin: 0;
  10. padding: 0;
  11. box-sizing: border-box;
  12. }
  13. body {
  14. font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
  15. background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  16. min-height: 100vh;
  17. padding: 20px;
  18. color: #333;
  19. }
  20. .container {
  21. max-width: 1200px;
  22. margin: 0 auto;
  23. background: white;
  24. border-radius: 20px;
  25. box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  26. overflow: hidden;
  27. }
  28. .header {
  29. background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  30. color: white;
  31. padding: 60px 40px;
  32. text-align: center;
  33. }
  34. .header h1 {
  35. font-size: 48px;
  36. margin-bottom: 15px;
  37. font-weight: 700;
  38. }
  39. .header p {
  40. font-size: 20px;
  41. opacity: 0.95;
  42. }
  43. .content {
  44. padding: 50px 40px;
  45. }
  46. .section {
  47. margin-bottom: 50px;
  48. }
  49. .section h2 {
  50. font-size: 32px;
  51. color: #43e97b;
  52. margin-bottom: 25px;
  53. padding-bottom: 15px;
  54. border-bottom: 3px solid #43e97b;
  55. }
  56. .section p {
  57. font-size: 18px;
  58. line-height: 1.8;
  59. color: #555;
  60. margin-bottom: 20px;
  61. }
  62. .features {
  63. display: grid;
  64. grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  65. gap: 30px;
  66. margin-top: 30px;
  67. }
  68. .feature-card {
  69. background: linear-gradient(135deg, #e8f8f0 0%, #d4f5e6 100%);
  70. padding: 30px;
  71. border-radius: 15px;
  72. transition: transform 0.3s ease, box-shadow 0.3s ease;
  73. }
  74. .feature-card:hover {
  75. transform: translateY(-5px);
  76. box-shadow: 0 10px 30px rgba(67, 233, 123, 0.3);
  77. }
  78. .feature-card h3 {
  79. font-size: 24px;
  80. color: #43e97b;
  81. margin-bottom: 15px;
  82. }
  83. .feature-card p {
  84. font-size: 16px;
  85. color: #666;
  86. line-height: 1.6;
  87. }
  88. .back-button {
  89. display: inline-block;
  90. margin-top: 30px;
  91. padding: 15px 40px;
  92. background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  93. color: white;
  94. text-decoration: none;
  95. border-radius: 50px;
  96. font-size: 18px;
  97. transition: transform 0.3s ease, box-shadow 0.3s ease;
  98. }
  99. .back-button:hover {
  100. transform: translateY(-2px);
  101. box-shadow: 0 10px 25px rgba(67, 233, 123, 0.4);
  102. }
  103. .icon {
  104. font-size: 40px;
  105. margin-bottom: 15px;
  106. }
  107. </style>
  108. </head>
  109. <body>
  110. <div class="container">
  111. <div class="header">
  112. <h1>🏢 园区管理平台</h1>
  113. <p>智能安防警戒与园区管理</p>
  114. </div>
  115. <div class="content">
  116. <div class="section">
  117. <h2>系统简介</h2>
  118. <p>
  119. 园区管理平台是一套集智能安防、设备管理、环境监测、访客管理等功能于一体的综合性园区管理解决方案。
  120. 系统采用物联网、人工智能等先进技术,实现园区的智能化、数字化管理,提升园区安全性和运营效率,
  121. 为园区内的企业和员工提供安全、舒适、便捷的工作环境。
  122. </p>
  123. </div>
  124. <div class="section">
  125. <h2>核心功能</h2>
  126. <div class="features">
  127. <div class="feature-card">
  128. <div class="icon">🛡️</div>
  129. <h3>智能安防</h3>
  130. <p>集成视频监控、门禁系统、周界报警等安防设备,实现24小时实时监控,支持人脸识别、异常行为检测等智能分析功能。</p>
  131. </div>
  132. <div class="feature-card">
  133. <div class="icon">🚪</div>
  134. <h3>访客管理</h3>
  135. <p>在线预约、身份验证、访客登记、通行权限管理等全流程访客管理,提升园区安全性和管理效率。</p>
  136. </div>
  137. <div class="feature-card">
  138. <div class="icon">🚗</div>
  139. <h3>车辆管理</h3>
  140. <p>车辆进出管理、停车位管理、车辆识别、收费管理等,支持无感支付,提升车辆通行效率。</p>
  141. </div>
  142. <div class="feature-card">
  143. <div class="icon">🏗️</div>
  144. <h3>设备管理</h3>
  145. <p>园区内各类设备的统一管理,包括设备台账、维护保养、故障报修、能耗监测等功能,确保设备正常运行。</p>
  146. </div>
  147. <div class="feature-card">
  148. <div class="icon">🌡️</div>
  149. <h3>环境监测</h3>
  150. <p>实时监测园区内的空气质量、温湿度、噪音等环境指标,提供环境数据分析和预警功能。</p>
  151. </div>
  152. <div class="feature-card">
  153. <div class="icon">📱</div>
  154. <h3>移动应用</h3>
  155. <p>提供移动端应用,支持访客预约、门禁开门、报修申请、信息查询等功能,方便用户随时随地使用。</p>
  156. </div>
  157. </div>
  158. </div>
  159. <div class="section">
  160. <h2>系统优势</h2>
  161. <p>
  162. • <strong>智能识别</strong>:采用AI技术,实现人脸识别、车牌识别等智能识别功能,提升管理效率<br>
  163. • <strong>实时监控</strong>:7×24小时实时监控,及时发现和处理安全隐患,保障园区安全<br>
  164. • <strong>数据集成</strong>:统一的数据平台,整合各类设备和系统数据,实现数据共享和协同管理<br>
  165. • <strong>预警机制</strong>:智能预警系统,及时发现异常情况,快速响应和处理突发事件<br>
  166. • <strong>节能环保</strong>:智能能耗管理,优化设备运行,降低能耗成本,实现绿色园区管理
  167. </p>
  168. </div>
  169. <a href="javascript:history.back()" class="back-button">← 返回导航</a>
  170. </div>
  171. </div>
  172. </body>
  173. </html>