page-business.html 33 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805
  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>协会核心业务 - AI赋能平台</title>
  7. <!-- 引入国内CDN资源 -->
  8. <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
  9. <link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
  10. <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.2/echarts.min.js"></script>
  11. <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/8.4.5/swiper-bundle.min.js"></script>
  12. <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/8.4.5/swiper-bundle.min.css" rel="stylesheet">
  13. <style>
  14. :root {
  15. --primary-color: #3498db;
  16. --secondary-color: #2ecc71;
  17. --accent-color: #e74c3c;
  18. --dark-color: #2c3e50;
  19. --light-color: #ecf0f1;
  20. --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  21. }
  22. * {
  23. margin: 0;
  24. padding: 0;
  25. box-sizing: border-box;
  26. font-family: 'Microsoft YaHei', sans-serif;
  27. }
  28. body {
  29. background-color: #f5f7fa;
  30. color: #333;
  31. line-height: 1.6;
  32. }
  33. .container {
  34. max-width: 1200px;
  35. margin: 0 auto;
  36. padding: 20px;
  37. }
  38. header {
  39. background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  40. color: white;
  41. padding: 30px 0;
  42. text-align: center;
  43. border-radius: 10px;
  44. margin-bottom: 30px;
  45. box-shadow: var(--shadow);
  46. position: relative;
  47. overflow: hidden;
  48. }
  49. header::before {
  50. content: '';
  51. position: absolute;
  52. top: 0;
  53. left: 0;
  54. width: 100%;
  55. height: 100%;
  56. background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0,0 L100,0 L100,100 L0,100 Z" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2"/></svg>');
  57. background-size: 20px 20px;
  58. opacity: 0.3;
  59. }
  60. h1 {
  61. font-size: 2.5rem;
  62. margin-bottom: 10px;
  63. position: relative;
  64. z-index: 1;
  65. }
  66. .subtitle {
  67. font-size: 1.2rem;
  68. opacity: 0.9;
  69. position: relative;
  70. z-index: 1;
  71. }
  72. .ai-features {
  73. display: flex;
  74. flex-wrap: wrap;
  75. gap: 20px;
  76. margin-bottom: 30px;
  77. }
  78. .feature-card {
  79. flex: 1 1 300px;
  80. background: white;
  81. border-radius: 10px;
  82. padding: 25px;
  83. box-shadow: var(--shadow);
  84. transition: transform 0.3s, box-shadow 0.3s;
  85. position: relative;
  86. overflow: hidden;
  87. }
  88. .feature-card:hover {
  89. transform: translateY(-5px);
  90. box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  91. }
  92. .feature-card::after {
  93. content: '';
  94. position: absolute;
  95. bottom: 0;
  96. left: 0;
  97. width: 100%;
  98. height: 5px;
  99. background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
  100. }
  101. .feature-icon {
  102. font-size: 2.5rem;
  103. color: var(--primary-color);
  104. margin-bottom: 15px;
  105. }
  106. .feature-title {
  107. font-size: 1.3rem;
  108. margin-bottom: 10px;
  109. color: var(--dark-color);
  110. }
  111. .feature-desc {
  112. color: #666;
  113. margin-bottom: 15px;
  114. }
  115. .btn {
  116. display: inline-block;
  117. padding: 8px 16px;
  118. background: var(--primary-color);
  119. color: white;
  120. border-radius: 5px;
  121. text-decoration: none;
  122. transition: background 0.3s;
  123. border: none;
  124. cursor: pointer;
  125. font-size: 0.9rem;
  126. }
  127. .btn:hover {
  128. background: #2980b9;
  129. }
  130. .btn-outline {
  131. background: transparent;
  132. border: 1px solid var(--primary-color);
  133. color: var(--primary-color);
  134. }
  135. .btn-outline:hover {
  136. background: var(--primary-color);
  137. color: white;
  138. }
  139. .section {
  140. margin-bottom: 40px;
  141. }
  142. .section-title {
  143. font-size: 1.8rem;
  144. color: var(--dark-color);
  145. margin-bottom: 20px;
  146. padding-bottom: 10px;
  147. border-bottom: 2px solid var(--primary-color);
  148. display: inline-block;
  149. }
  150. .subsection {
  151. background: white;
  152. border-radius: 10px;
  153. padding: 20px;
  154. margin-bottom: 20px;
  155. box-shadow: var(--shadow);
  156. }
  157. .subsection-title {
  158. font-size: 1.4rem;
  159. color: var(--dark-color);
  160. margin-bottom: 15px;
  161. display: flex;
  162. align-items: center;
  163. }
  164. .subsection-title i {
  165. margin-right: 10px;
  166. color: var(--primary-color);
  167. }
  168. /* 知识图谱可视化容器 */
  169. #knowledge-graph {
  170. width: 100%;
  171. height: 400px;
  172. background: #f9f9f9;
  173. border-radius: 8px;
  174. margin: 15px 0;
  175. }
  176. /* AR名片样式 */
  177. .ar-cards {
  178. display: flex;
  179. flex-wrap: wrap;
  180. gap: 15px;
  181. margin-top: 20px;
  182. }
  183. .ar-card {
  184. flex: 1 1 200px;
  185. background: linear-gradient(135deg, #f5f7fa, #e4e8eb);
  186. border-radius: 8px;
  187. padding: 15px;
  188. text-align: center;
  189. box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  190. transition: transform 0.3s;
  191. }
  192. .ar-card:hover {
  193. transform: scale(1.05);
  194. }
  195. .ar-card-img {
  196. width: 80px;
  197. height: 80px;
  198. border-radius: 50%;
  199. object-fit: cover;
  200. margin: 0 auto 10px;
  201. border: 3px solid var(--primary-color);
  202. }
  203. .ar-card-name {
  204. font-weight: bold;
  205. margin-bottom: 5px;
  206. }
  207. .ar-card-title {
  208. color: #666;
  209. font-size: 0.9rem;
  210. margin-bottom: 10px;
  211. }
  212. .ar-card-btn {
  213. background: var(--secondary-color);
  214. color: white;
  215. border: none;
  216. padding: 5px 10px;
  217. border-radius: 4px;
  218. font-size: 0.8rem;
  219. cursor: pointer;
  220. }
  221. /* 智能检索区域 */
  222. .search-container {
  223. display: flex;
  224. margin: 20px 0;
  225. }
  226. .search-input {
  227. flex: 1;
  228. padding: 12px 15px;
  229. border: 1px solid #ddd;
  230. border-radius: 5px 0 0 5px;
  231. font-size: 1rem;
  232. outline: none;
  233. }
  234. .search-btn {
  235. padding: 0 20px;
  236. background: var(--primary-color);
  237. color: white;
  238. border: none;
  239. border-radius: 0 5px 5px 0;
  240. cursor: pointer;
  241. transition: background 0.3s;
  242. }
  243. .search-btn:hover {
  244. background: #2980b9;
  245. }
  246. /* 轮播图样式 */
  247. .swiper {
  248. width: 100%;
  249. height: 300px;
  250. border-radius: 10px;
  251. overflow: hidden;
  252. margin: 20px 0;
  253. box-shadow: var(--shadow);
  254. }
  255. .swiper-slide {
  256. background-size: cover;
  257. background-position: center;
  258. display: flex;
  259. align-items: flex-end;
  260. padding: 30px;
  261. color: white;
  262. position: relative;
  263. }
  264. .swiper-slide::before {
  265. content: '';
  266. position: absolute;
  267. top: 0;
  268. left: 0;
  269. width: 100%;
  270. height: 100%;
  271. background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.3));
  272. }
  273. .slide-content {
  274. position: relative;
  275. z-index: 1;
  276. max-width: 80%;
  277. }
  278. .slide-title {
  279. font-size: 1.5rem;
  280. margin-bottom: 10px;
  281. }
  282. /* 人才库卡片 */
  283. .talent-card {
  284. display: flex;
  285. background: white;
  286. border-radius: 8px;
  287. overflow: hidden;
  288. box-shadow: var(--shadow);
  289. margin-bottom: 15px;
  290. }
  291. .talent-avatar {
  292. width: 80px;
  293. height: 80px;
  294. object-fit: cover;
  295. }
  296. .talent-info {
  297. flex: 1;
  298. padding: 15px;
  299. }
  300. .talent-name {
  301. font-weight: bold;
  302. margin-bottom: 5px;
  303. }
  304. .talent-skill {
  305. display: inline-block;
  306. background: #e0f7fa;
  307. color: #00838f;
  308. padding: 3px 8px;
  309. border-radius: 4px;
  310. font-size: 0.8rem;
  311. margin-right: 5px;
  312. margin-bottom: 5px;
  313. }
  314. .blockchain-badge {
  315. display: inline-flex;
  316. align-items: center;
  317. background: #f3e5f5;
  318. color: #6a1b9a;
  319. padding: 3px 8px;
  320. border-radius: 4px;
  321. font-size: 0.8rem;
  322. margin-top: 5px;
  323. }
  324. .blockchain-badge i {
  325. margin-right: 5px;
  326. }
  327. /* 响应式调整 */
  328. @media (max-width: 768px) {
  329. .ai-features {
  330. flex-direction: column;
  331. }
  332. .feature-card {
  333. flex: 1 1 auto;
  334. }
  335. .ar-cards {
  336. flex-direction: column;
  337. }
  338. .ar-card {
  339. flex: 1 1 auto;
  340. }
  341. .swiper {
  342. height: 200px;
  343. }
  344. }
  345. </style>
  346. </head>
  347. <body>
  348. <div class="container">
  349. <header class="animate__animated animate__fadeIn">
  350. <h1>协会核心业务平台</h1>
  351. <p class="subtitle">AI赋能 · 智慧协同 · 创新发展</p>
  352. </header>
  353. <section class="section">
  354. <h2 class="section-title">核心AI功能展示</h2>
  355. <div class="ai-features">
  356. <div class="feature-card animate__animated animate__fadeInUp">
  357. <div class="feature-icon">
  358. <i class="fas fa-brain"></i>
  359. </div>
  360. <h3 class="feature-title">智能知识图谱</h3>
  361. <p class="feature-desc">通过知识图谱技术可视化展示协会组织架构,实现关系网络智能分析,支持动态探索与交互查询。</p>
  362. <a href="#organization" class="btn">立即体验</a>
  363. </div>
  364. <div class="feature-card animate__animated animate__fadeInUp" style="animation-delay: 0.2s;">
  365. <div class="feature-icon">
  366. <i class="fas fa-user-tie"></i>
  367. </div>
  368. <h3 class="feature-title">AR名片系统</h3>
  369. <p class="feature-desc">创新性的AR技术展示协会领导信息,扫描即可获取立体名片,支持语音介绍与联系方式一键保存。</p>
  370. <a href="#leaders" class="btn">查看领导</a>
  371. </div>
  372. <div class="feature-card animate__animated animate__fadeInUp" style="animation-delay: 0.4s;">
  373. <div class="feature-icon">
  374. <i class="fas fa-graduation-cap"></i>
  375. </div>
  376. <h3 class="feature-title">AI+文旅课程</h3>
  377. <p class="feature-desc">微专业中心提供的智能学习系统,个性化推荐课程,AI助教实时答疑,学习路径智能规划。</p>
  378. <a href="#courses" class="btn">开始学习</a>
  379. </div>
  380. </div>
  381. </section>
  382. <section class="section" id="organization">
  383. <h2 class="section-title">3.1 走进协会</h2>
  384. <div class="subsection">
  385. <h3 class="subsection-title"><i class="fas fa-sitemap"></i>组织架构 - 知识图谱可视化</h3>
  386. <p>通过交互式知识图谱展示协会各部门关系网络,点击节点可查看详细信息,支持智能搜索与关系路径分析。</p>
  387. <div id="knowledge-graph"></div>
  388. <div class="search-container">
  389. <input type="text" class="search-input" placeholder="输入部门或人员名称进行搜索...">
  390. <button class="search-btn"><i class="fas fa-search"></i></button>
  391. </div>
  392. </div>
  393. <div class="subsection" id="leaders">
  394. <h3 class="subsection-title"><i class="fas fa-id-card"></i>协会领导 - AR名片系统</h3>
  395. <p>点击下方领导名片查看AR效果,支持手机扫描二维码获取立体名片,包含语音介绍、联系方式和工作履历。</p>
  396. <div class="ar-cards">
  397. <div class="ar-card">
  398. <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="会长" class="ar-card-img">
  399. <div class="ar-card-name">张明远</div>
  400. <div class="ar-card-title">协会会长</div>
  401. <button class="ar-card-btn"><i class="fas fa-qrcode"></i> AR名片</button>
  402. </div>
  403. <div class="ar-card">
  404. <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="副会长" class="ar-card-img">
  405. <div class="ar-card-name">李静怡</div>
  406. <div class="ar-card-title">常务副会长</div>
  407. <button class="ar-card-btn"><i class="fas fa-qrcode"></i> AR名片</button>
  408. </div>
  409. <div class="ar-card">
  410. <img src="https://randomuser.me/api/portraits/men/67.jpg" alt="秘书长" class="ar-card-img">
  411. <div class="ar-card-name">王建国</div>
  412. <div class="ar-card-title">秘书长</div>
  413. <button class="ar-card-btn"><i class="fas fa-qrcode"></i> AR名片</button>
  414. </div>
  415. <div class="ar-card">
  416. <img src="https://randomuser.me/api/portraits/women/28.jpg" alt="副秘书长" class="ar-card-img">
  417. <div class="ar-card-name">赵雨晴</div>
  418. <div class="ar-card-title">副秘书长</div>
  419. <button class="ar-card-btn"><i class="fas fa-qrcode"></i> AR名片</button>
  420. </div>
  421. </div>
  422. </div>
  423. <div class="subsection">
  424. <h3 class="subsection-title"><i class="fas fa-book"></i>协会章程 - 智能检索版</h3>
  425. <p>智能检索系统支持自然语言查询,可快速定位章程条款,提供版本对比和修订历史追溯功能。</p>
  426. <div class="search-container">
  427. <input type="text" class="search-input" placeholder="输入关键词查询章程内容,例如:会员权利、组织架构...">
  428. <button class="search-btn"><i class="fas fa-search"></i> 智能检索</button>
  429. </div>
  430. <div style="background: #f9f9f9; padding: 15px; border-radius: 5px; margin-top: 15px; min-height: 100px;">
  431. <p style="color: #666; text-align: center;">检索结果将显示在这里</p>
  432. </div>
  433. </div>
  434. </section>
  435. <section class="section">
  436. <h2 class="section-title">3.2 学术体系</h2>
  437. <div class="subsection">
  438. <h3 class="subsection-title"><i class="fas fa-calendar-alt"></i>学术活动 - AI日程管理</h3>
  439. <p>智能日程管理系统自动同步学术活动安排,支持个性化提醒、参会人员统计和活动效果预测。</p>
  440. <!-- 学术活动轮播图 -->
  441. <div class="swiper">
  442. <div class="swiper-wrapper">
  443. <div class="swiper-slide" style="background-image: url('https://images.unsplash.com/photo-1434030216411-0b793f4b4173?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');">
  444. <div class="slide-content">
  445. <h4 class="slide-title">2023年智慧旅游高峰论坛</h4>
  446. <p>2023-11-15 | 北京国际会议中心</p>
  447. <button class="btn" style="margin-top: 10px;">立即报名</button>
  448. </div>
  449. </div>
  450. <div class="swiper-slide" style="background-image: url('https://images.unsplash.com/photo-1505373877841-8d25f7d46678?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');">
  451. <div class="slide-content">
  452. <h4 class="slide-title">文旅融合创新发展研讨会</h4>
  453. <p>2023-12-05 | 上海浦东香格里拉酒店</p>
  454. <button class="btn" style="margin-top: 10px;">立即报名</button>
  455. </div>
  456. </div>
  457. <div class="swiper-slide" style="background-image: url('https://images.unsplash.com/photo-1541178735493-479c1a27ed24?ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80');">
  458. <div class="slide-content">
  459. <h4 class="slide-title">数字文旅技术应用培训</h4>
  460. <p>2024-01-10 | 线上直播</p>
  461. <button class="btn" style="margin-top: 10px;">立即报名</button>
  462. </div>
  463. </div>
  464. </div>
  465. <div class="swiper-pagination"></div>
  466. <div class="swiper-button-next"></div>
  467. <div class="swiper-button-prev"></div>
  468. </div>
  469. </div>
  470. <div class="subsection">
  471. <h3 class="subsection-title"><i class="fas fa-clipboard-list"></i>标准规范 - 智能检索+版本对比</h3>
  472. <p>标准规范数据库支持智能检索、版本对比和差异分析,帮助用户快速了解规范更新内容。</p>
  473. <div style="display: flex; gap: 15px; margin-top: 15px;">
  474. <div style="flex: 1; background: #e3f2fd; padding: 15px; border-radius: 5px;">
  475. <h4 style="margin-bottom: 10px; color: var(--primary-color);">旅游服务质量标准</h4>
  476. <p style="font-size: 0.9rem; color: #666;">最新版本: v3.2 (2023-06发布)</p>
  477. <button class="btn-outline" style="margin-top: 10px;">查看详情</button>
  478. </div>
  479. <div style="flex: 1; background: #e8f5e9; padding: 15px; border-radius: 5px;">
  480. <h4 style="margin-bottom: 10px; color: var(--secondary-color);">智慧景区建设指南</h4>
  481. <p style="font-size: 0.9rem; color: #666;">最新版本: v2.1 (2023-09发布)</p>
  482. <button class="btn-outline" style="margin-top: 10px; border-color: var(--secondary-color); color: var(--secondary-color);">查看详情</button>
  483. </div>
  484. </div>
  485. </div>
  486. <div class="subsection">
  487. <h3 class="subsection-title"><i class="fas fa-users"></i>课题研究 - 在线协作平台</h3>
  488. <p>提供课题研究的全流程在线协作环境,支持文档协同编辑、任务分配、进度跟踪和智能报告生成。</p>
  489. <div style="background: #f5f5f5; padding: 15px; border-radius: 5px; margin-top: 15px; display: flex; align-items: center; gap: 15px;">
  490. <div style="font-size: 2rem; color: var(--primary-color);">
  491. <i class="fas fa-laptop-code"></i>
  492. </div>
  493. <div style="flex: 1;">
  494. <h4 style="margin-bottom: 5px;">"AI+文旅"创新应用研究</h4>
  495. <p style="font-size: 0.9rem; color: #666;">当前进度: 65% | 参与人员: 12人 | 最后更新: 2023-10-15</p>
  496. </div>
  497. <button class="btn">进入协作</button>
  498. </div>
  499. </div>
  500. </section>
  501. <section class="section" id="courses">
  502. <h2 class="section-title">3.3 人才培养</h2>
  503. <div class="subsection">
  504. <h3 class="subsection-title"><i class="fas fa-trophy"></i>竞赛平台 - 旅游类竞赛申报</h3>
  505. <p>一站式竞赛管理平台,支持在线申报、作品提交、专家评审和结果公示全流程数字化管理。</p>
  506. <div style="background: #fff8e1; padding: 15px; border-radius: 5px; margin-top: 15px;">
  507. <h4 style="margin-bottom: 10px; color: #ff8f00;">2023年全国旅游创新大赛</h4>
  508. <p style="margin-bottom: 10px;">报名截止: 2023-11-30 | 决赛时间: 2024-01-15</p>
  509. <div style="display: flex; gap: 10px;">
  510. <button class="btn" style="background: #ff8f00;">立即报名</button>
  511. <button class="btn-outline" style="border-color: #ff8f00; color: #ff8f00;">查看往届作品</button>
  512. </div>
  513. </div>
  514. </div>
  515. <div class="subsection">
  516. <h3 class="subsection-title"><i class="fas fa-graduation-cap"></i>微专业中心 - AI+文旅课程</h3>
  517. <p>结合AI技术的文旅专业课程体系,提供个性化学习路径推荐和智能学习辅助。</p>
  518. <div style="display: flex; gap: 15px; margin-top: 15px; flex-wrap: wrap;">
  519. <div style="flex: 1; min-width: 200px; background: white; border-radius: 5px; overflow: hidden; box-shadow: var(--shadow);">
  520. <div style="height: 120px; background: linear-gradient(135deg, #ff9a9e, #fad0c4); display: flex; align-items: center; justify-content: center; color: white; font-size: 2rem;">
  521. <i class="fas fa-robot"></i>
  522. </div>
  523. <div style="padding: 15px;">
  524. <h4 style="margin-bottom: 5px;">AI旅游推荐系统</h4>
  525. <p style="font-size: 0.8rem; color: #666; margin-bottom: 10px;">8周课程 | 中级难度</p>
  526. <button class="btn" style="width: 100%; padding: 5px;">开始学习</button>
  527. </div>
  528. </div>
  529. <div style="flex: 1; min-width: 200px; background: white; border-radius: 5px; overflow: hidden; box-shadow: var(--shadow);">
  530. <div style="height: 120px; background: linear-gradient(135deg, #a1c4fd, #c2e9fb); display: flex; align-items: center; justify-content: center; color: white; font-size: 2rem;">
  531. <i class="fas fa-map-marked-alt"></i>
  532. </div>
  533. <div style="padding: 15px;">
  534. <h4 style="margin-bottom: 5px;">智慧景区规划</h4>
  535. <p style="font-size: 0.8rem; color: #666; margin-bottom: 10px;">6周课程 | 初级难度</p>
  536. <button class="btn" style="width: 100%; padding: 5px;">开始学习</button>
  537. </div>
  538. </div>
  539. <div style="flex: 1; min-width: 200px; background: white; border-radius: 5px; overflow: hidden; box-shadow: var(--shadow);">
  540. <div style="height: 120px; background: linear-gradient(135deg, #ffecd2, #fcb69f); display: flex; align-items: center; justify-content: center; color: white; font-size: 2rem;">
  541. <i class="fas fa-chart-line"></i>
  542. </div>
  543. <div style="padding: 15px;">
  544. <h4 style="margin-bottom: 5px;">旅游大数据分析</h4>
  545. <p style="font-size: 0.8rem; color: #666; margin-bottom: 10px;">10周课程 | 高级难度</p>
  546. <button class="btn" style="width: 100%; padding: 5px;">开始学习</button>
  547. </div>
  548. </div>
  549. </div>
  550. </div>
  551. <div class="subsection">
  552. <h3 class="subsection-title"><i class="fas fa-database"></i>人才库 - 区块链履历认证</h3>
  553. <p>基于区块链技术的人才履历认证系统,确保人才信息真实可信,支持智能匹配和推荐。</p>
  554. <div class="talent-card">
  555. <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="人才" class="talent-avatar">
  556. <div class="talent-info">
  557. <div class="talent-name">翠花</div>
  558. <div>旅游规划师 | 5年经验</div>
  559. <div>
  560. <span class="talent-skill">景区规划</span>
  561. <span class="talent-skill">GIS应用</span>
  562. <span class="talent-skill">可持续发展</span>
  563. </div>
  564. <div class="blockchain-badge">
  565. <i class="fas fa-link"></i>区块链认证履历
  566. </div>
  567. </div>
  568. </div>
  569. <div class="talent-card">
  570. <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="人才" class="talent-avatar">
  571. <div class="talent-info">
  572. <div class="talent-name">熊大</div>
  573. <div>数字文旅工程师 | 3年经验</div>
  574. <div>
  575. <span class="talent-skill">VR/AR</span>
  576. <span class="talent-skill">Unity开发</span>
  577. <span class="talent-skill">交互设计</span>
  578. </div>
  579. <div class="blockchain-badge">
  580. <i class="fas fa-link"></i>区块链认证履历
  581. </div>
  582. </div>
  583. </div>
  584. <div style="text-align: center; margin-top: 15px;">
  585. <button class="btn"><i class="fas fa-search"></i> 浏览更多人才</button>
  586. </div>
  587. </div>
  588. </section>
  589. <footer style="text-align: center; padding: 30px 0; color: #666; font-size: 0.9rem;">
  590. <p>© 2023 协会核心业务平台 - AI赋能智慧协会</p>
  591. <p style="margin-top: 10px;">技术支持:江财天才团队 | 联系电话:400-123-4567</p>
  592. </footer>
  593. </div>
  594. <script>
  595. // 初始化知识图谱
  596. document.addEventListener('DOMContentLoaded', function() {
  597. // 知识图谱
  598. const graphChart = echarts.init(document.getElementById('knowledge-graph'));
  599. const graphOption = {
  600. title: {
  601. text: '协会组织架构知识图谱',
  602. subtext: '点击节点查看详细信息',
  603. left: 'center'
  604. },
  605. tooltip: {},
  606. legend: {
  607. data: ['部门', '人员'],
  608. orient: 'vertical',
  609. right: 10
  610. },
  611. series: [{
  612. name: '协会组织架构',
  613. type: 'graph',
  614. layout: 'force',
  615. data: [
  616. {id: '1', name: '理事会', category: 0, symbolSize: 50},
  617. {id: '2', name: '秘书处', category: 0, symbolSize: 40},
  618. {id: '3', name: '学术委员会', category: 0, symbolSize: 40},
  619. {id: '4', name: '培训部', category: 0, symbolSize: 35},
  620. {id: '5', name: '国际交流部', category: 0, symbolSize: 35},
  621. {id: '6', name: '张明远', category: 1, symbolSize: 30},
  622. {id: '7', name: '李静怡', category: 1, symbolSize: 25},
  623. {id: '8', name: '王建国', category: 1, symbolSize: 25},
  624. {id: '9', name: '赵雨晴', category: 1, symbolSize: 25},
  625. {id: '10', name: '陈教授', category: 1, symbolSize: 20},
  626. {id: '11', name: '刘主任', category: 1, symbolSize: 20}
  627. ],
  628. links: [
  629. {source: '1', target: '2'},
  630. {source: '1', target: '3'},
  631. {source: '1', target: '4'},
  632. {source: '1', target: '5'},
  633. {source: '6', target: '1'},
  634. {source: '7', target: '1'},
  635. {source: '8', target: '2'},
  636. {source: '9', target: '2'},
  637. {source: '10', target: '3'},
  638. {source: '11', target: '4'}
  639. ],
  640. categories: [
  641. {name: '部门'},
  642. {name: '人员'}
  643. ],
  644. roam: true,
  645. label: {
  646. show: true,
  647. position: 'right'
  648. },
  649. force: {
  650. repulsion: 100,
  651. edgeLength: [50, 100]
  652. },
  653. emphasis: {
  654. focus: 'adjacency',
  655. label: {
  656. show: true
  657. }
  658. },
  659. lineStyle: {
  660. width: 1,
  661. curveness: 0.2
  662. }
  663. }],
  664. color: ['#3498db', '#2ecc71']
  665. };
  666. graphChart.setOption(graphOption);
  667. // 窗口大小变化时重新调整图表大小
  668. window.addEventListener('resize', function() {
  669. graphChart.resize();
  670. });
  671. // 初始化轮播图
  672. const swiper = new Swiper('.swiper', {
  673. loop: true,
  674. autoplay: {
  675. delay: 5000,
  676. disableOnInteraction: false,
  677. },
  678. pagination: {
  679. el: '.swiper-pagination',
  680. clickable: true,
  681. },
  682. navigation: {
  683. nextEl: '.swiper-button-next',
  684. prevEl: '.swiper-button-prev',
  685. },
  686. });
  687. // AR名片按钮点击效果
  688. document.querySelectorAll('.ar-card-btn').forEach(btn => {
  689. btn.addEventListener('click', function() {
  690. const card = this.closest('.ar-card');
  691. card.classList.add('animate__animated', 'animate__pulse');
  692. setTimeout(() => {
  693. card.classList.remove('animate__animated', 'animate__pulse');
  694. }, 1000);
  695. // 模拟AR效果
  696. alert('请使用手机扫描二维码查看AR名片效果\n\n姓名: ' + card.querySelector('.ar-card-name').textContent + '\n职位: ' + card.querySelector('.ar-card-title').textContent);
  697. });
  698. });
  699. // 搜索功能模拟
  700. document.querySelectorAll('.search-btn').forEach(btn => {
  701. btn.addEventListener('click', function() {
  702. const input = this.previousElementSibling;
  703. if(input.value.trim() === '') {
  704. input.classList.add('animate__animated', 'animate__shakeX');
  705. setTimeout(() => {
  706. input.classList.remove('animate__animated', 'animate__shakeX');
  707. }, 1000);
  708. } else {
  709. this.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
  710. setTimeout(() => {
  711. this.innerHTML = '<i class="fas fa-search"></i>';
  712. alert('搜索关键词: ' + input.value + '\n\n模拟搜索功能,实际应用中会显示真实结果');
  713. }, 1000);
  714. }
  715. });
  716. });
  717. });
  718. </script>
  719. </body>
  720. </html>