数智共创.html 39 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111
  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. <!-- 引入ECharts数据可视化库 -->
  8. <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  9. <!-- 引入Font Awesome图标 -->
  10. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  11. <style>
  12. :root {
  13. --primary-blue: #2a5daa; /* 青花蓝 */
  14. --gold-yellow: #e8c34d; /* 稻穗金 */
  15. --porcelain-white: #f8f9fa; /* 瓷白 */
  16. --dark-charcoal: #333; /* 墨黑 */
  17. --mountain-green: #4a6b3d; /* 山林绿 */
  18. --river-blue: #4a86e8; /* 赣江蓝 */
  19. --red-culture: #c1272d; /* 红色文化 */
  20. }
  21. * {
  22. margin: 0;
  23. padding: 0;
  24. box-sizing: border-box;
  25. }
  26. body {
  27. font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif;
  28. background: linear-gradient(135deg, #f0f8ff 0%, #e6f7ff 100%);
  29. color: var(--dark-charcoal);
  30. line-height: 1.6;
  31. overflow-x: hidden;
  32. background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M20,20 Q40,5 60,20 T100,20 L100,80 L0,80 L0,20 Z" fill="none" stroke="%232a5daa22" stroke-width="0.5"/></svg>');
  33. }
  34. /* 顶部导航 */
  35. .header {
  36. background: rgba(255, 255, 255, 0.95);
  37. box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
  38. position: sticky;
  39. top: 0;
  40. z-index: 1000;
  41. padding: 0.8rem 5%;
  42. }
  43. .nav-container {
  44. display: flex;
  45. justify-content: space-between;
  46. align-items: center;
  47. }
  48. .logo {
  49. display: flex;
  50. align-items: center;
  51. }
  52. .logo-icon {
  53. width: 50px;
  54. height: 50px;
  55. background: var(--primary-blue);
  56. border-radius: 50%;
  57. position: relative;
  58. margin-right: 12px;
  59. display: flex;
  60. justify-content: center;
  61. align-items: center;
  62. color: white;
  63. font-size: 24px;
  64. box-shadow: 0 4px 8px rgba(42, 93, 170, 0.3);
  65. }
  66. .logo-text {
  67. font-size: 1.8rem;
  68. font-weight: bold;
  69. background: linear-gradient(45deg, var(--primary-blue), var(--river-blue));
  70. -webkit-background-clip: text;
  71. background-clip: text;
  72. color: transparent;
  73. letter-spacing: 1px;
  74. }
  75. .logo-subtext {
  76. font-size: 0.9rem;
  77. color: var(--primary-blue);
  78. margin-top: -4px;
  79. letter-spacing: 3px;
  80. }
  81. .nav-links {
  82. display: flex;
  83. gap: 2rem;
  84. }
  85. .nav-links a {
  86. text-decoration: none;
  87. color: var(--dark-charcoal);
  88. font-weight: 500;
  89. position: relative;
  90. padding: 0.5rem 0;
  91. transition: all 0.3s ease;
  92. }
  93. .nav-links a:hover {
  94. color: var(--primary-blue);
  95. }
  96. .nav-links a::after {
  97. content: '';
  98. position: absolute;
  99. bottom: 0;
  100. left: 0;
  101. width: 0;
  102. height: 2px;
  103. background: var(--primary-blue);
  104. transition: width 0.3s ease;
  105. }
  106. .nav-links a:hover::after {
  107. width: 100%;
  108. }
  109. /* 平台标题区域 */
  110. .platform-header {
  111. background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
  112. url('https://images.unsplash.com/photo-1593692909680-1b1d0a743b9d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1950&q=80') center/cover;
  113. height: 300px;
  114. display: flex;
  115. flex-direction: column;
  116. justify-content: center;
  117. align-items: center;
  118. color: white;
  119. text-align: center;
  120. padding: 0 20px;
  121. }
  122. .platform-title {
  123. font-size: 3rem;
  124. font-weight: bold;
  125. margin-bottom: 1rem;
  126. text-shadow: 0 2px 10px rgba(0,0,0,0.5);
  127. }
  128. .platform-subtitle {
  129. font-size: 1.2rem;
  130. max-width: 800px;
  131. }
  132. /* 内容区域 */
  133. .content-section {
  134. padding: 3rem 5%;
  135. }
  136. .section-title {
  137. display: flex;
  138. align-items: center;
  139. margin-bottom: 2rem;
  140. }
  141. .section-title h2 {
  142. font-size: 2rem;
  143. color: var(--primary-blue);
  144. position: relative;
  145. padding-left: 1rem;
  146. }
  147. .section-title h2::before {
  148. content: '';
  149. position: absolute;
  150. left: 0;
  151. top: 50%;
  152. transform: translateY(-50%);
  153. width: 4px;
  154. height: 24px;
  155. background: var(--gold-yellow);
  156. border-radius: 2px;
  157. }
  158. .section-title .decor {
  159. flex: 1;
  160. height: 1px;
  161. background: linear-gradient(to right, var(--gold-yellow), transparent);
  162. margin-left: 1rem;
  163. }
  164. .cards-container {
  165. display: flex;
  166. flex-wrap: wrap;
  167. gap: 2rem;
  168. justify-content: center;
  169. }
  170. .card {
  171. flex: 1;
  172. min-width: 300px;
  173. background: white;
  174. border-radius: 12px;
  175. overflow: hidden;
  176. box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  177. transition: all 0.3s ease;
  178. position: relative;
  179. }
  180. .card:hover {
  181. transform: translateY(-10px);
  182. box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
  183. }
  184. .card-header {
  185. padding: 1.5rem;
  186. background: linear-gradient(90deg, var(--primary-blue), var(--river-blue));
  187. color: white;
  188. display: flex;
  189. align-items: center;
  190. }
  191. .card-header i {
  192. font-size: 1.8rem;
  193. margin-right: 0.8rem;
  194. }
  195. .card-body {
  196. padding: 1.5rem;
  197. }
  198. /* 文化资源库 */
  199. .resource-section {
  200. background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  201. padding: 2rem;
  202. border-radius: 12px;
  203. margin-bottom: 2rem;
  204. position: relative;
  205. overflow: hidden;
  206. }
  207. .jinggang-bg {
  208. position: absolute;
  209. bottom: 0;
  210. right: 0;
  211. width: 40%;
  212. height: 100%;
  213. background: url('https://images.unsplash.com/photo-1605000797499-95a51c5269ae?ixlib=rb-4.0.3&auto=format&fit=crop&w=1951&q=80') center/cover;
  214. opacity: 0.2;
  215. z-index: 0;
  216. }
  217. .tools-container {
  218. display: flex;
  219. gap: 1.5rem;
  220. flex-wrap: wrap;
  221. position: relative;
  222. z-index: 1;
  223. }
  224. .tool-card {
  225. flex: 1;
  226. min-width: 250px;
  227. background: rgba(255, 255, 255, 0.9);
  228. border-radius: 10px;
  229. padding: 1.5rem;
  230. box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  231. transition: all 0.3s ease;
  232. cursor: pointer;
  233. display: flex;
  234. flex-direction: column;
  235. align-items: center;
  236. text-align: center;
  237. }
  238. .tool-card:hover {
  239. transform: translateY(-8px);
  240. box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  241. background: white;
  242. }
  243. .tool-icon {
  244. width: 80px;
  245. height: 80px;
  246. background: linear-gradient(135deg, var(--primary-blue), var(--river-blue));
  247. border-radius: 50%;
  248. display: flex;
  249. justify-content: center;
  250. align-items: center;
  251. font-size: 2.5rem;
  252. color: white;
  253. margin-bottom: 1rem;
  254. }
  255. .knowledge-graph {
  256. display: flex;
  257. flex-wrap: wrap;
  258. gap: 1.5rem;
  259. margin-top: 2rem;
  260. }
  261. .graph-card {
  262. flex: 1;
  263. min-width: 300px;
  264. background: white;
  265. border-radius: 10px;
  266. padding: 1.5rem;
  267. box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  268. position: relative;
  269. overflow: hidden;
  270. }
  271. .graph-card::before {
  272. content: '';
  273. position: absolute;
  274. top: 0;
  275. left: 0;
  276. width: 100%;
  277. height: 5px;
  278. }
  279. .red-culture::before {
  280. background: var(--red-culture);
  281. }
  282. .water-culture::before {
  283. background: var(--river-blue);
  284. }
  285. .non-heritage::before {
  286. background: var(--gold-yellow);
  287. }
  288. .graph-header {
  289. display: flex;
  290. align-items: center;
  291. margin-bottom: 1rem;
  292. }
  293. .graph-icon {
  294. width: 50px;
  295. height: 50px;
  296. border-radius: 50%;
  297. display: flex;
  298. justify-content: center;
  299. align-items: center;
  300. font-size: 1.5rem;
  301. color: white;
  302. margin-right: 1rem;
  303. }
  304. .red-icon {
  305. background: var(--red-culture);
  306. }
  307. .water-icon {
  308. background: var(--river-blue);
  309. }
  310. .heritage-icon {
  311. background: var(--gold-yellow);
  312. }
  313. .graph-body {
  314. height: 200px;
  315. }
  316. /* 智慧应用中心 */
  317. .app-showcase {
  318. display: flex;
  319. flex-wrap: wrap;
  320. gap: 2rem;
  321. }
  322. .app-card {
  323. flex: 1;
  324. min-width: 300px;
  325. background: white;
  326. border-radius: 12px;
  327. overflow: hidden;
  328. box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  329. position: relative;
  330. transition: all 0.3s ease;
  331. }
  332. .app-card:hover {
  333. transform: translateY(-5px);
  334. box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
  335. }
  336. .app-preview {
  337. height: 200px;
  338. background: linear-gradient(135deg, #f0f8ff, #e6f7ff);
  339. display: flex;
  340. justify-content: center;
  341. align-items: center;
  342. overflow: hidden;
  343. position: relative;
  344. }
  345. .app-content {
  346. padding: 1.5rem;
  347. }
  348. .feature-grid {
  349. display: grid;
  350. grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  351. gap: 2rem;
  352. margin-top: 2rem;
  353. }
  354. .feature-card {
  355. background: white;
  356. border-radius: 10px;
  357. padding: 1.5rem;
  358. box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  359. transition: all 0.3s ease;
  360. }
  361. .feature-card:hover {
  362. transform: translateY(-5px);
  363. box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  364. }
  365. .feature-header {
  366. display: flex;
  367. align-items: center;
  368. margin-bottom: 1rem;
  369. }
  370. .feature-icon {
  371. width: 50px;
  372. height: 50px;
  373. border-radius: 50%;
  374. background: linear-gradient(135deg, var(--primary-blue), var(--river-blue));
  375. display: flex;
  376. justify-content: center;
  377. align-items: center;
  378. font-size: 1.5rem;
  379. color: white;
  380. margin-right: 1rem;
  381. }
  382. /* 共创社区 */
  383. .community-section {
  384. background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  385. padding: 2rem;
  386. border-radius: 12px;
  387. margin-bottom: 2rem;
  388. }
  389. .university-grid {
  390. display: grid;
  391. grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  392. gap: 1.5rem;
  393. margin-top: 1rem;
  394. }
  395. .uni-badge {
  396. background: white;
  397. border-radius: 10px;
  398. padding: 1rem;
  399. box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  400. display: flex;
  401. flex-direction: column;
  402. align-items: center;
  403. text-align: center;
  404. transition: all 0.3s ease;
  405. }
  406. .uni-badge:hover {
  407. transform: translateY(-5px);
  408. box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  409. }
  410. .uni-icon {
  411. width: 60px;
  412. height: 60px;
  413. border-radius: 50%;
  414. background: linear-gradient(135deg, var(--primary-blue), var(--river-blue));
  415. display: flex;
  416. justify-content: center;
  417. align-items: center;
  418. font-size: 1.5rem;
  419. color: white;
  420. margin-bottom: 0.8rem;
  421. }
  422. .map-container {
  423. height: 300px;
  424. background: white;
  425. border-radius: 10px;
  426. margin-top: 1rem;
  427. box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  428. position: relative;
  429. overflow: hidden;
  430. }
  431. .dialect-feature {
  432. display: flex;
  433. flex-wrap: wrap;
  434. gap: 2rem;
  435. margin-top: 2rem;
  436. align-items: center;
  437. }
  438. .dialect-card {
  439. flex: 1;
  440. min-width: 300px;
  441. background: white;
  442. border-radius: 12px;
  443. padding: 2rem;
  444. box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  445. text-align: center;
  446. }
  447. .dialect-card h3 {
  448. color: var(--primary-blue);
  449. margin-bottom: 1rem;
  450. }
  451. .record-btn {
  452. background: linear-gradient(135deg, var(--primary-blue), var(--river-blue));
  453. color: white;
  454. border: none;
  455. padding: 1rem 2rem;
  456. border-radius: 30px;
  457. font-size: 1.1rem;
  458. font-weight: bold;
  459. cursor: pointer;
  460. transition: all 0.3s ease;
  461. margin-top: 1.5rem;
  462. display: inline-flex;
  463. align-items: center;
  464. gap: 0.8rem;
  465. }
  466. .record-btn:hover {
  467. transform: translateY(-3px);
  468. box-shadow: 0 10px 20px rgba(42, 93, 170, 0.3);
  469. }
  470. /* 页脚 */
  471. .footer {
  472. background: var(--dark-charcoal);
  473. color: white;
  474. padding: 3rem 5% 2rem;
  475. margin-top: 3rem;
  476. }
  477. .footer-content {
  478. display: flex;
  479. flex-wrap: wrap;
  480. gap: 3rem;
  481. margin-bottom: 2rem;
  482. }
  483. .footer-column {
  484. flex: 1;
  485. min-width: 200px;
  486. }
  487. .footer-column h3 {
  488. color: var(--gold-yellow);
  489. margin-bottom: 1.5rem;
  490. position: relative;
  491. padding-bottom: 0.5rem;
  492. }
  493. .footer-column h3::after {
  494. content: '';
  495. position: absolute;
  496. bottom: 0;
  497. left: 0;
  498. width: 40px;
  499. height: 2px;
  500. background: var(--gold-yellow);
  501. }
  502. .footer-column ul {
  503. list-style: none;
  504. }
  505. .footer-column ul li {
  506. margin-bottom: 0.8rem;
  507. }
  508. .footer-column a {
  509. color: #ddd;
  510. text-decoration: none;
  511. transition: color 0.3s ease;
  512. }
  513. .footer-column a:hover {
  514. color: var(--gold-yellow);
  515. }
  516. .copyright {
  517. text-align: center;
  518. padding-top: 2rem;
  519. border-top: 1px solid #444;
  520. color: #aaa;
  521. font-size: 0.9rem;
  522. }
  523. /* 动画效果 */
  524. @keyframes float {
  525. 0% { transform: translateY(0px); }
  526. 50% { transform: translateY(-10px); }
  527. 100% { transform: translateY(0px); }
  528. }
  529. .floating {
  530. animation: float 3s ease-in-out infinite;
  531. }
  532. /* 响应式设计 */
  533. @media (max-width: 768px) {
  534. .nav-links {
  535. display: none;
  536. }
  537. .platform-title {
  538. font-size: 2rem;
  539. }
  540. .platform-subtitle {
  541. font-size: 1rem;
  542. }
  543. }
  544. </style>
  545. </head>
  546. <body>
  547. <!-- 顶部导航 -->
  548. <header class="header">
  549. <div class="nav-container">
  550. <div class="logo">
  551. <div class="logo-icon">
  552. <i class="fas fa-mountain"></i>
  553. </div>
  554. <div>
  555. <div class="logo-text">赣鄱数智共创平台</div>
  556. <div class="logo-subtext">JIANGXI DIGITAL CREATION</div>
  557. </div>
  558. </div>
  559. <nav class="nav-links">
  560. <a href="D:\文旅创意\江西省数智创享平台\江西省数智创享平台.html">首页</a>
  561. <a href="">数智共创</a>
  562. <a href="D:\文旅创意\江西省数智创享平台\协会业务.html">协会业务</a>
  563. <a href="D:\文旅创意\江西省数智创享平台\会员服务.html">会员服务</a>
  564. <a href="#">支撑系统</a>
  565. <a href="#">关于我们</a>
  566. </nav>
  567. </div>
  568. </header>
  569. <!-- 平台标题区域 -->
  570. <section class="platform-header">
  571. <h1 class="platform-title">数智共创平台</h1>
  572. <p class="platform-subtitle">汇聚江西文化精髓,融合数字科技创新,打造文化传承与创新的智能平台</p>
  573. </section>
  574. <!-- 文化资源库 -->
  575. <section class="content-section">
  576. <div class="section-title">
  577. <h2>文化资源库</h2>
  578. <div class="decor"></div>
  579. </div>
  580. <div class="resource-section">
  581. <div class="jinggang-bg"></div>
  582. <h3 style="margin-bottom: 1.5rem; color: var(--primary-blue);">多模态采集中心</h3>
  583. <div class="tools-container">
  584. <div class="tool-card">
  585. <div class="tool-icon">
  586. <i class="fas fa-microphone-alt"></i>
  587. </div>
  588. <h3>AI访谈工具</h3>
  589. <p>智能语音识别与语义分析,记录江西文化传承人口述历史</p>
  590. </div>
  591. <div class="tool-card">
  592. <div class="tool-icon">
  593. <i class="fas fa-cube"></i>
  594. </div>
  595. <h3>3D扫描建模</h3>
  596. <p>高精度文物数字化,生成海昏侯编钟等江西文物的数字双生体</p>
  597. </div>
  598. <div class="tool-card">
  599. <div class="tool-icon">
  600. <i class="fas fa-cloud-upload-alt"></i>
  601. </div>
  602. <h3>MCP融合上传</h3>
  603. <p>多媒体内容智能整合,一站式上传管理</p>
  604. </div>
  605. </div>
  606. <h3 style="margin: 2rem 0 1.5rem; color: var(--primary-blue);">分类知识图谱</h3>
  607. <div class="knowledge-graph">
  608. <div class="graph-card red-culture">
  609. <div class="graph-header">
  610. <div class="graph-icon red-icon">
  611. <i class="fas fa-fire"></i>
  612. </div>
  613. <h3>红色文化数字馆</h3>
  614. </div>
  615. <div class="graph-body" id="redCultureChart"></div>
  616. </div>
  617. <div class="graph-card water-culture">
  618. <div class="graph-header">
  619. <div class="graph-icon water-icon">
  620. <i class="fas fa-water"></i>
  621. </div>
  622. <h3>水文化研究中心</h3>
  623. </div>
  624. <div class="graph-body" id="waterCultureChart"></div>
  625. </div>
  626. <div class="graph-card non-heritage">
  627. <div class="graph-header">
  628. <div class="graph-icon heritage-icon">
  629. <i class="fas fa-dragon"></i>
  630. </div>
  631. <h3>非遗传承数据库</h3>
  632. </div>
  633. <div class="graph-body" id="heritageChart"></div>
  634. </div>
  635. </div>
  636. </div>
  637. </section>
  638. <!-- 智慧应用中心 -->
  639. <section class="content-section">
  640. <div class="section-title">
  641. <h2>智慧应用中心</h2>
  642. <div class="decor"></div>
  643. </div>
  644. <div class="app-showcase">
  645. <div class="app-card">
  646. <div class="app-preview">
  647. <i class="fas fa-archway" style="font-size: 5rem; color: var(--primary-blue);"></i>
  648. </div>
  649. <div class="app-content">
  650. <h3>BIM建筑建模</h3>
  651. <p>使用景德镇古窑重建模板库,快速构建江西传统建筑数字模型</p>
  652. <button style="margin-top: 1rem; background: var(--primary-blue); color: white; border: none; padding: 0.6rem 1.5rem; border-radius: 30px; cursor: pointer;">
  653. 开始建模
  654. </button>
  655. </div>
  656. </div>
  657. <div class="app-card">
  658. <div class="app-preview" style="background: linear-gradient(135deg, #e6f7ff, #d1e8ff);">
  659. <i class="fas fa-vr-cardboard" style="font-size: 5rem; color: var(--river-blue);"></i>
  660. </div>
  661. <div class="app-content">
  662. <h3>AR智能导览</h3>
  663. <p>滕王阁AR导览,叠加《滕王阁序》书法浮动展示,沉浸式文化体验</p>
  664. <button style="margin-top: 1rem; background: var(--river-blue); color: white; border: none; padding: 0.6rem 1.5rem; border-radius: 30px; cursor: pointer;">
  665. AR体验
  666. </button>
  667. </div>
  668. </div>
  669. </div>
  670. <div class="feature-grid">
  671. <div class="feature-card">
  672. <div class="feature-header">
  673. <div class="feature-icon">
  674. <i class="fas fa-route"></i>
  675. </div>
  676. <h3>旅游动线策划器</h3>
  677. </div>
  678. <p>拖拽庐山景点生成"AI李白诗路漫游",智能规划最佳文化旅游路线</p>
  679. <div style="margin-top: 1rem; height: 150px; background: linear-gradient(135deg, #f0f8ff, #e6f7ff); border-radius: 8px; display: flex; justify-content: center; align-items: center;">
  680. <i class="fas fa-mountain" style="font-size: 3rem; color: var(--primary-blue);"></i>
  681. </div>
  682. </div>
  683. <div class="feature-card">
  684. <div class="feature-header">
  685. <div class="feature-icon">
  686. <i class="fas fa-gift"></i>
  687. </div>
  688. <h3>助农产品包装</h3>
  689. </div>
  690. <p>上传农产品自动生成"井冈山竹编纹样"包装设计,助力乡村振兴</p>
  691. <div style="margin-top: 1rem; height: 150px; background: linear-gradient(135deg, #f8f9fa, #e9ecef); border-radius: 8px; display: flex; justify-content: center; align-items: center; position: relative;">
  692. <div style="width: 100px; height: 100px; background: repeating-linear-gradient(45deg, var(--gold-yellow), var(--gold-yellow) 10px, #e8c34d33 10px, #e8c34d33 20px);"></div>
  693. <div style="position: absolute; font-size: 0.8rem; bottom: 10px; color: var(--gold-yellow);">井冈山竹编纹样</div>
  694. </div>
  695. </div>
  696. </div>
  697. </section>
  698. <!-- 共创社区 -->
  699. <section class="content-section">
  700. <div class="section-title">
  701. <h2>共创社区</h2>
  702. <div class="decor"></div>
  703. </div>
  704. <div class="community-section">
  705. <h3 style="margin-bottom: 1rem; color: var(--primary-blue);">高校联盟专区</h3>
  706. <p>江西高校合作平台,共同推动文化数字化研究与创新</p>
  707. <div class="university-grid">
  708. <div class="uni-badge">
  709. <div class="uni-icon" style="background: linear-gradient(135deg, var(--river-blue), #4a86e8);">
  710. <i class="fas fa-tint"></i>
  711. </div>
  712. <div>水利水电大学</div>
  713. </div>
  714. <div class="uni-badge">
  715. <div class="uni-icon" style="background: linear-gradient(135deg, var(--red-culture), #c1272d);">
  716. <i class="fas fa-university"></i>
  717. </div>
  718. <div>南昌大学</div>
  719. </div>
  720. <div class="uni-badge">
  721. <div class="uni-icon" style="background: linear-gradient(135deg, var(--gold-yellow), #e8c34d);">
  722. <i class="fas fa-paint-brush"></i>
  723. </div>
  724. <div>景德镇陶瓷大学</div>
  725. </div>
  726. <div class="uni-badge">
  727. <div class="uni-icon" style="background: linear-gradient(135deg, var(--mountain-green), #4a6b3d);">
  728. <i class="fas fa-tree"></i>
  729. </div>
  730. <div>江西农业大学</div>
  731. </div>
  732. <div class="uni-badge">
  733. <div class="uni-icon" style="background: linear-gradient(135deg, #6a5acd, #7b68ee);">
  734. <i class="fas fa-laptop-code"></i>
  735. </div>
  736. <div>江西师范大学</div>
  737. </div>
  738. </div>
  739. <h3 style="margin: 2rem 0 1rem; color: var(--primary-blue);">文物认领地图</h3>
  740. <p>江西考古遗址热力图,参与文物保护与文化传承</p>
  741. <div class="map-container" id="archaeologyMap"></div>
  742. </div>
  743. <div class="dialect-feature">
  744. <div class="dialect-card">
  745. <h3>语伴访谈</h3>
  746. <p>方言保护功能,录制赣语解锁"瓦罐汤制作秘籍"等江西文化彩蛋</p>
  747. <button class="record-btn">
  748. <i class="fas fa-microphone"></i> 录制赣语
  749. </button>
  750. </div>
  751. <div style="flex: 1.5; min-width: 300px;">
  752. <div style="background: white; border-radius: 12px; padding: 1.5rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);">
  753. <h3 style="color: var(--primary-blue); margin-bottom: 1rem;">解锁的文化彩蛋</h3>
  754. <ul style="list-style-type: none;">
  755. <li style="padding: 0.8rem 0; border-bottom: 1px solid #eee; display: flex; align-items: center;">
  756. <i class="fas fa-utensils" style="color: var(--gold-yellow); margin-right: 0.8rem;"></i>
  757. 南昌瓦罐汤制作秘籍
  758. </li>
  759. <li style="padding: 0.8rem 0; border-bottom: 1px solid #eee; display: flex; align-items: center;">
  760. <i class="fas fa-music" style="color: var(--red-culture); margin-right: 0.8rem;"></i>
  761. 赣南采茶戏经典唱段
  762. </li>
  763. <li style="padding: 0.8rem 0; border-bottom: 1px solid #eee; display: flex; align-items: center;">
  764. <i class="fas fa-archway" style="color: var(--primary-blue); margin-right: 0.8rem;"></i>
  765. 景德镇制瓷七十二道工序
  766. </li>
  767. <li style="padding: 0.8rem 0; display: flex; align-items: center;">
  768. <i class="fas fa-mountain" style="color: var(--mountain-green); margin-right: 0.8rem;"></i>
  769. 庐山历史名人轶事
  770. </li>
  771. </ul>
  772. </div>
  773. </div>
  774. </div>
  775. </section>
  776. <!-- 页脚 -->
  777. <footer class="footer">
  778. <div class="footer-content">
  779. <div class="footer-column">
  780. <h3>网站导航</h3>
  781. <ul>
  782. <li><a href="#">首页</a></li>
  783. <li><a href="#">数智共创平台</a></li>
  784. <li><a href="#">协会核心业务</a></li>
  785. <li><a href="#">会员服务</a></li>
  786. <li><a href="#">支撑系统</a></li>
  787. </ul>
  788. </div>
  789. <div class="footer-column">
  790. <h3>资源中心</h3>
  791. <ul>
  792. <li><a href="#">文化资源库</a></li>
  793. <li><a href="#">智慧应用中心</a></li>
  794. <li><a href="#">共创社区</a></li>
  795. <li><a href="#">数字文创展廊</a></li>
  796. <li><a href="#">学术研究成果</a></li>
  797. </ul>
  798. </div>
  799. <div class="footer-column">
  800. <h3>联系我们</h3>
  801. <ul>
  802. <li><i class="fas fa-map-marker-alt"></i> 江西省南昌市红谷滩区</li>
  803. <li><i class="fas fa-phone"></i> 0791-87654321</li>
  804. <li><i class="fas fa-envelope"></i> cocreation@jxculture.cn</li>
  805. <li><i class="fab fa-weixin"></i> 江西数智共创</li>
  806. </ul>
  807. </div>
  808. <div class="footer-column">
  809. <h3>关注我们</h3>
  810. <div style="display: flex; gap: 1rem; margin-top: 1rem;">
  811. <div style="width: 100px; height: 100px; background: #555; display: flex; justify-content: center; align-items: center; color: #aaa; border-radius: 8px;">
  812. 微信公众号
  813. </div>
  814. <div style="width: 100px; height: 100px; background: #555; display: flex; justify-content: center; align-items: center; color: #aaa; border-radius: 8px;">
  815. 微博
  816. </div>
  817. </div>
  818. </div>
  819. </div>
  820. <div class="copyright">
  821. © 2023 江西数智共创平台 版权所有 | 赣ICP备87654321号
  822. </div>
  823. </footer>
  824. <script>
  825. // 初始化红色文化知识图谱
  826. const redChart = echarts.init(document.getElementById('redCultureChart'));
  827. redChart.setOption({
  828. tooltip: {
  829. trigger: 'item',
  830. triggerOn: 'mousemove'
  831. },
  832. series: [
  833. {
  834. type: 'graph',
  835. layout: 'force',
  836. symbolSize: 50,
  837. roam: true,
  838. label: {
  839. show: true
  840. },
  841. force: {
  842. repulsion: 150
  843. },
  844. data: [
  845. {name: '南昌起义', value: 10, symbol: 'circle', itemStyle: {color: '#c1272d'}},
  846. {name: '井冈山', value: 8, symbol: 'circle', itemStyle: {color: '#e74c3c'}},
  847. {name: '瑞金', value: 7, symbol: 'circle', itemStyle: {color: '#e67e22'}},
  848. {name: '方志敏', value: 6, symbol: 'circle', itemStyle: {color: '#d35400'}},
  849. {name: '安源路矿', value: 5, symbol: 'circle', itemStyle: {color: '#c0392b'}}
  850. ],
  851. links: [
  852. {source: '南昌起义', target: '井冈山'},
  853. {source: '南昌起义', target: '瑞金'},
  854. {source: '井冈山', target: '瑞金'},
  855. {source: '井冈山', target: '方志敏'},
  856. {source: '瑞金', target: '方志敏'},
  857. {source: '方志敏', target: '安源路矿'}
  858. ],
  859. lineStyle: {
  860. color: 'source',
  861. curveness: 0.3
  862. }
  863. }
  864. ]
  865. });
  866. // 初始化水文化知识图谱
  867. const waterChart = echarts.init(document.getElementById('waterCultureChart'));
  868. waterChart.setOption({
  869. tooltip: {
  870. trigger: 'item',
  871. triggerOn: 'mousemove'
  872. },
  873. series: [
  874. {
  875. type: 'graph',
  876. layout: 'force',
  877. symbolSize: 50,
  878. roam: true,
  879. label: {
  880. show: true
  881. },
  882. force: {
  883. repulsion: 150
  884. },
  885. data: [
  886. {name: '赣江', value: 10, symbol: 'circle', itemStyle: {color: '#3498db'}},
  887. {name: '鄱阳湖', value: 9, symbol: 'circle', itemStyle: {color: '#2980b9'}},
  888. {name: '水利工程', value: 8, symbol: 'circle', itemStyle: {color: '#1abc9c'}},
  889. {name: '水运文化', value: 7, symbol: 'circle', itemStyle: {color: '#16a085'}},
  890. {name: '水资源保护', value: 6, symbol: 'circle', itemStyle: {color: '#27ae60'}}
  891. ],
  892. links: [
  893. {source: '赣江', target: '鄱阳湖'},
  894. {source: '赣江', target: '水利工程'},
  895. {source: '赣江', target: '水运文化'},
  896. {source: '鄱阳湖', target: '水资源保护'},
  897. {source: '水利工程', target: '水资源保护'},
  898. {source: '水运文化', target: '水资源保护'}
  899. ],
  900. lineStyle: {
  901. color: 'source',
  902. curveness: 0.3
  903. }
  904. }
  905. ]
  906. });
  907. // 初始化非遗知识图谱
  908. const heritageChart = echarts.init(document.getElementById('heritageChart'));
  909. heritageChart.setOption({
  910. tooltip: {
  911. trigger: 'item',
  912. triggerOn: 'mousemove'
  913. },
  914. series: [
  915. {
  916. type: 'graph',
  917. layout: 'force',
  918. symbolSize: 50,
  919. roam: true,
  920. label: {
  921. show: true
  922. },
  923. force: {
  924. repulsion: 150
  925. },
  926. data: [
  927. {name: '景德镇陶瓷', value: 10, symbol: 'circle', itemStyle: {color: '#e8c34d'}},
  928. {name: '赣南采茶戏', value: 9, symbol: 'circle', itemStyle: {color: '#f39c12'}},
  929. {name: '婺源徽派建筑', value: 8, symbol: 'circle', itemStyle: {color: '#d35400'}},
  930. {name: '铅山连四纸', value: 7, symbol: 'circle', itemStyle: {color: '#e67e22'}},
  931. {name: '瑞昌剪纸', value: 6, symbol: 'circle', itemStyle: {color: '#f1c40f'}}
  932. ],
  933. links: [
  934. {source: '景德镇陶瓷', target: '赣南采茶戏'},
  935. {source: '景德镇陶瓷', target: '婺源徽派建筑'},
  936. {source: '赣南采茶戏', target: '铅山连四纸'},
  937. {source: '婺源徽派建筑', target: '瑞昌剪纸'},
  938. {source: '铅山连四纸', target: '瑞昌剪纸'}
  939. ],
  940. lineStyle: {
  941. color: 'source',
  942. curveness: 0.3
  943. }
  944. }
  945. ]
  946. });
  947. // 初始化考古遗址热力图
  948. const mapChart = echarts.init(document.getElementById('archaeologyMap'));
  949. mapChart.setOption({
  950. tooltip: {
  951. trigger: 'item'
  952. },
  953. visualMap: {
  954. min: 0,
  955. max: 100,
  956. calculable: true,
  957. inRange: {
  958. color: ['#f6efa6', '#d88273', '#bf444c']
  959. }
  960. },
  961. series: [{
  962. name: '考古遗址',
  963. type: 'map',
  964. map: 'china',
  965. roam: true,
  966. zoom: 7,
  967. center: [115.8, 28.5], // 江西中心坐标
  968. label: {
  969. show: true
  970. },
  971. data: [
  972. {name: '樟树市', value: 95},
  973. {name: '南昌市', value: 85},
  974. {name: '九江市', value: 78},
  975. {name: '景德镇市', value: 90},
  976. {name: '鹰潭市', value: 65},
  977. {name: '新余市', value: 50},
  978. {name: '萍乡市', value: 60},
  979. {name: '赣州市', value: 82},
  980. {name: '吉安市', value: 75},
  981. {name: '宜春市', value: 70},
  982. {name: '抚州市', value: 68},
  983. {name: '上饶市', value: 80}
  984. ],
  985. emphasis: {
  986. label: {
  987. show: true
  988. }
  989. }
  990. }]
  991. });
  992. // 响应窗口大小变化
  993. window.addEventListener('resize', function() {
  994. redChart.resize();
  995. waterChart.resize();
  996. heritageChart.resize();
  997. mapChart.resize();
  998. });
  999. </script>
  1000. </body>
  1001. </html>