page-member.html 60 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476
  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. * {
  10. margin: 0;
  11. padding: 0;
  12. box-sizing: border-box;
  13. font-family: "阿里巴巴普惠体", sans-serif;
  14. }
  15. body {
  16. background-color: #f8f4e8;
  17. background-image: url('paper-texture.png');
  18. color: #333;
  19. line-height: 1.6;
  20. display: flex;
  21. justify-content: center;
  22. align-items: center;
  23. min-height: 100vh;
  24. padding: 20px;
  25. }
  26. /* 自定义字体 */
  27. @font-face {
  28. font-family: "赣锋体";
  29. src: url('ganfeng.ttf');
  30. }
  31. /* 主色调定义 */
  32. :root {
  33. --primary-blue: #2F7DAD; /* 天青瓷 */
  34. --primary-green: #5B8C5A; /* 香樟绿 */
  35. --primary-gold: #D4B16A; /* 庐金 */
  36. --secondary-gray: #6D6D6D; /* 婺源黛瓦灰 */
  37. --secondary-red: #C53D43; /* 井冈山鹃红 */
  38. --secondary-white: #F0F0F0; /* 鄱阳湖银白 */
  39. }
  40. /* PPT容器 */
  41. .ppt-container {
  42. width: 100%;
  43. max-width: 1400px;
  44. background-color: white;
  45. border-radius: 12px;
  46. overflow: hidden;
  47. box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  48. display: flex;
  49. flex-direction: column;
  50. min-height: 800px;
  51. }
  52. /* 顶部导航栏 */
  53. .ppt-header {
  54. background: linear-gradient(90deg, var(--primary-blue), var(--primary-green));
  55. height: 100px;
  56. display: flex;
  57. align-items: center;
  58. padding: 0 40px;
  59. position: relative;
  60. overflow: hidden;
  61. }
  62. .ppt-header::before {
  63. content: "";
  64. position: absolute;
  65. top: 0;
  66. left: 0;
  67. right: 0;
  68. height: 100%;
  69. background: url('mountain-silhouette.png') bottom center repeat-x;
  70. opacity: 0.2;
  71. z-index: 1;
  72. }
  73. .ppt-title {
  74. font-family: "赣锋体", serif;
  75. font-size: 2.5rem;
  76. color: white;
  77. text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  78. z-index: 2;
  79. }
  80. /* 主要内容区域 */
  81. .ppt-main {
  82. display: flex;
  83. flex: 1;
  84. overflow: hidden;
  85. }
  86. /* 左侧目录 */
  87. .sidebar {
  88. width: 280px;
  89. background-color: #f9f9f9;
  90. border-right: 1px solid #eee;
  91. padding: 30px 20px;
  92. overflow-y: auto;
  93. }
  94. .sidebar-title {
  95. font-family: "赣锋体", serif;
  96. font-size: 1.5rem;
  97. color: var(--primary-blue);
  98. margin-bottom: 25px;
  99. padding-bottom: 10px;
  100. border-bottom: 2px solid var(--primary-blue);
  101. }
  102. .sidebar-menu {
  103. list-style: none;
  104. }
  105. .sidebar-item {
  106. margin-bottom: 15px;
  107. }
  108. .sidebar-link {
  109. display: block;
  110. padding: 10px 15px;
  111. color: var(--secondary-gray);
  112. text-decoration: none;
  113. border-radius: 6px;
  114. transition: all 0.3s ease;
  115. position: relative;
  116. font-size: 1.05rem;
  117. }
  118. .sidebar-link:hover {
  119. background-color: rgba(47, 125, 173, 0.08);
  120. color: var(--primary-blue);
  121. }
  122. .sidebar-link.active {
  123. background-color: rgba(47, 125, 173, 0.15);
  124. color: var(--primary-blue);
  125. font-weight: bold;
  126. }
  127. .sidebar-link.active::before {
  128. content: "";
  129. position: absolute;
  130. left: 0;
  131. top: 50%;
  132. transform: translateY(-50%);
  133. width: 4px;
  134. height: 70%;
  135. background-color: var(--primary-gold);
  136. border-radius: 0 2px 2px 0;
  137. }
  138. /* 子菜单 */
  139. .submenu {
  140. list-style: none;
  141. margin-left: 25px;
  142. margin-top: 10px;
  143. display: none;
  144. }
  145. .submenu.active {
  146. display: block;
  147. }
  148. .submenu-item {
  149. margin-bottom: 8px;
  150. }
  151. .submenu-link {
  152. display: block;
  153. padding: 8px 10px;
  154. color: var(--secondary-gray);
  155. text-decoration: none;
  156. border-radius: 4px;
  157. transition: all 0.3s ease;
  158. font-size: 0.95rem;
  159. }
  160. .submenu-link:hover {
  161. background-color: rgba(47, 125, 173, 0.05);
  162. color: var(--primary-blue);
  163. }
  164. .submenu-link.active {
  165. background-color: rgba(47, 125, 173, 0.1);
  166. color: var(--primary-blue);
  167. font-weight: 500;
  168. }
  169. /* 内容区域 */
  170. .content-area {
  171. flex: 1;
  172. padding: 40px 50px;
  173. overflow-y: auto;
  174. }
  175. .section-header {
  176. display: flex;
  177. align-items: center;
  178. margin-bottom: 30px;
  179. position: relative;
  180. }
  181. .section-number {
  182. font-family: "赣锋体", serif;
  183. font-size: 3rem;
  184. color: var(--primary-blue);
  185. font-weight: bold;
  186. margin-right: 20px;
  187. line-height: 1;
  188. }
  189. .section-title {
  190. font-family: "赣锋体", serif;
  191. font-size: 2.2rem;
  192. color: var(--primary-blue);
  193. position: relative;
  194. padding-bottom: 10px;
  195. }
  196. .section-title::after {
  197. content: "";
  198. display: block;
  199. width: 60px;
  200. height: 3px;
  201. background: linear-gradient(to right, var(--primary-blue), var(--primary-green));
  202. margin-top: 10px;
  203. }
  204. .section-desc {
  205. color: var(--secondary-gray);
  206. margin-bottom: 40px;
  207. max-width: 900px;
  208. }
  209. /* 统计卡片 */
  210. .stats-container {
  211. display: grid;
  212. grid-template-columns: repeat(4, 1fr);
  213. gap: 20px;
  214. margin-bottom: 50px;
  215. }
  216. .stats-card {
  217. background-color: white;
  218. border-radius: 8px;
  219. padding: 20px;
  220. box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  221. border-left: 4px solid var(--primary-blue);
  222. transition: all 0.3s ease;
  223. }
  224. .stats-card:hover {
  225. transform: translateY(-5px);
  226. box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  227. }
  228. .stats-value {
  229. font-family: "赣锋体", serif;
  230. font-size: 2.2rem;
  231. color: var(--primary-blue);
  232. margin-bottom: 5px;
  233. }
  234. .stats-label {
  235. color: var(--secondary-gray);
  236. font-size: 0.95rem;
  237. }
  238. /* 内容区块 */
  239. .content-block {
  240. display: none;
  241. animation: fadeIn 0.5s ease-in-out;
  242. }
  243. .content-block.active {
  244. display: block;
  245. }
  246. @keyframes fadeIn {
  247. from { opacity: 0; transform: translateY(10px); }
  248. to { opacity: 1; transform: translateY(0); }
  249. }
  250. .block-title {
  251. font-size: 1.8rem;
  252. color: var(--primary-blue);
  253. margin-bottom: 25px;
  254. padding-bottom: 10px;
  255. border-bottom: 1px solid #eee;
  256. position: relative;
  257. }
  258. .block-title::after {
  259. content: "";
  260. position: absolute;
  261. bottom: -1px;
  262. left: 0;
  263. width: 50px;
  264. height: 2px;
  265. background-color: var(--primary-gold);
  266. }
  267. /* 功能卡片 */
  268. .feature-grid {
  269. display: grid;
  270. grid-template-columns: repeat(3, 1fr);
  271. gap: 25px;
  272. margin-top: 30px;
  273. }
  274. @media (max-width: 1200px) {
  275. .feature-grid {
  276. grid-template-columns: repeat(2, 1fr);
  277. }
  278. }
  279. @media (max-width: 768px) {
  280. .feature-grid {
  281. grid-template-columns: 1fr;
  282. }
  283. }
  284. .feature-card {
  285. background-color: white;
  286. border-radius: 8px;
  287. overflow: hidden;
  288. box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  289. transition: all 0.3s ease;
  290. border-top: 4px solid var(--primary-blue);
  291. display: flex;
  292. flex-direction: column;
  293. height: 100%;
  294. }
  295. .feature-card:hover {
  296. transform: translateY(-5px);
  297. box-shadow: 0 12px 24px rgba(0,0,0,0.12);
  298. border-top-color: var(--primary-gold);
  299. }
  300. .card-header {
  301. padding: 25px;
  302. background-color: rgba(47, 125, 173, 0.03);
  303. border-bottom: 1px solid #eee;
  304. }
  305. .card-icon {
  306. font-size: 2.5rem;
  307. color: var(--primary-gold);
  308. margin-bottom: 15px;
  309. }
  310. .card-title {
  311. font-size: 1.3rem;
  312. color: var(--primary-blue);
  313. margin-bottom: 5px;
  314. }
  315. .card-content {
  316. padding: 25px;
  317. flex: 1;
  318. }
  319. .card-desc {
  320. color: var(--secondary-gray);
  321. font-size: 0.95rem;
  322. line-height: 1.6;
  323. margin-bottom: 15px;
  324. }
  325. .card-list {
  326. list-style: none;
  327. margin-top: 10px;
  328. }
  329. .card-list li {
  330. margin-bottom: 8px;
  331. display: flex;
  332. align-items: center;
  333. }
  334. .card-list li::before {
  335. content: "•";
  336. color: var(--primary-gold);
  337. margin-right: 10px;
  338. font-size: 1.2rem;
  339. }
  340. .card-footer {
  341. padding: 15px 25px;
  342. border-top: 1px solid #eee;
  343. background-color: rgba(47, 125, 173, 0.03);
  344. display: flex;
  345. justify-content: space-between;
  346. align-items: center;
  347. }
  348. .card-link {
  349. color: var(--primary-blue);
  350. text-decoration: none;
  351. font-weight: 500;
  352. transition: all 0.3s ease;
  353. display: flex;
  354. align-items: center;
  355. }
  356. .card-link:hover {
  357. color: var(--primary-gold);
  358. }
  359. .card-link i {
  360. margin-left: 5px;
  361. transition: all 0.3s ease;
  362. }
  363. .card-link:hover i {
  364. transform: translateX(3px);
  365. }
  366. .card-status {
  367. font-size: 0.9rem;
  368. padding: 3px 8px;
  369. border-radius: 4px;
  370. background-color: rgba(91, 140, 90, 0.1);
  371. color: var(--primary-green);
  372. }
  373. /* 流程图 */
  374. .flow-chart {
  375. margin: 40px 0;
  376. padding: 30px;
  377. background-color: white;
  378. border-radius: 8px;
  379. box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  380. position: relative;
  381. }
  382. .flow-title {
  383. font-size: 1.3rem;
  384. color: var(--primary-blue);
  385. margin-bottom: 25px;
  386. text-align: center;
  387. }
  388. .flow-steps {
  389. display: flex;
  390. justify-content: space-between;
  391. align-items: center;
  392. position: relative;
  393. }
  394. .flow-steps::before {
  395. content: "";
  396. position: absolute;
  397. top: 50%;
  398. left: 0;
  399. right: 0;
  400. height: 2px;
  401. background-color: #eee;
  402. transform: translateY(-50%);
  403. z-index: 1;
  404. }
  405. .flow-step {
  406. width: 100px;
  407. height: 100px;
  408. border-radius: 50%;
  409. background-color: white;
  410. border: 2px solid var(--primary-blue);
  411. display: flex;
  412. flex-direction: column;
  413. justify-content: center;
  414. align-items: center;
  415. position: relative;
  416. z-index: 2;
  417. transition: all 0.3s ease;
  418. }
  419. .flow-step:hover {
  420. background-color: rgba(47, 125, 173, 0.05);
  421. }
  422. .step-number {
  423. font-family: "赣锋体", serif;
  424. font-size: 1.5rem;
  425. color: var(--primary-blue);
  426. margin-bottom: 5px;
  427. }
  428. .step-label {
  429. font-size: 0.9rem;
  430. text-align: center;
  431. color: var(--secondary-gray);
  432. }
  433. /* 案例展示 */
  434. .case-studies {
  435. margin-top: 40px;
  436. }
  437. .case-title {
  438. font-size: 1.5rem;
  439. color: var(--primary-blue);
  440. margin-bottom: 20px;
  441. }
  442. .case-grid {
  443. display: grid;
  444. grid-template-columns: repeat(2, 1fr);
  445. gap: 25px;
  446. }
  447. .case-card {
  448. background-color: white;
  449. border-radius: 8px;
  450. overflow: hidden;
  451. box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  452. display: flex;
  453. transition: all 0.3s ease;
  454. }
  455. .case-card:hover {
  456. transform: translateY(-5px);
  457. box-shadow: 0 12px 24px rgba(0,0,0,0.12);
  458. }
  459. .case-image {
  460. width: 35%;
  461. background-size: cover;
  462. background-position: center;
  463. }
  464. .case-content {
  465. width: 65%;
  466. padding: 20px;
  467. }
  468. .case-name {
  469. font-size: 1.2rem;
  470. color: var(--primary-blue);
  471. margin-bottom: 10px;
  472. }
  473. .case-desc {
  474. color: var(--secondary-gray);
  475. font-size: 0.9rem;
  476. margin-bottom: 15px;
  477. }
  478. .case-meta {
  479. display: flex;
  480. flex-wrap: wrap;
  481. gap: 10px;
  482. font-size: 0.85rem;
  483. color: var(--secondary-gray);
  484. }
  485. .case-tag {
  486. padding: 2px 8px;
  487. background-color: rgba(47, 125, 173, 0.1);
  488. border-radius: 4px;
  489. color: var(--primary-blue);
  490. }
  491. /* 数据统计图表 */
  492. .chart-container {
  493. margin: 40px 0;
  494. padding: 30px;
  495. background-color: white;
  496. border-radius: 8px;
  497. box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  498. }
  499. .chart-title {
  500. font-size: 1.5rem;
  501. color: var(--primary-blue);
  502. margin-bottom: 20px;
  503. }
  504. /* 实施计划时间线 */
  505. .timeline {
  506. margin: 40px 0;
  507. position: relative;
  508. }
  509. .timeline::before {
  510. content: "";
  511. position: absolute;
  512. top: 0;
  513. bottom: 0;
  514. left: 19px;
  515. width: 2px;
  516. background-color: var(--primary-blue);
  517. }
  518. .timeline-item {
  519. margin-bottom: 30px;
  520. padding-left: 50px;
  521. position: relative;
  522. }
  523. .timeline-marker {
  524. position: absolute;
  525. left: 0;
  526. top: 0;
  527. width: 40px;
  528. height: 40px;
  529. border-radius: 50%;
  530. background-color: var(--primary-blue);
  531. color: white;
  532. display: flex;
  533. justify-content: center;
  534. align-items: center;
  535. font-weight: bold;
  536. z-index: 1;
  537. }
  538. .timeline-content {
  539. background-color: white;
  540. border-radius: 8px;
  541. padding: 20px;
  542. box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  543. }
  544. .timeline-title {
  545. font-size: 1.2rem;
  546. color: var(--primary-blue);
  547. margin-bottom: 10px;
  548. }
  549. .timeline-date {
  550. font-size: 0.9rem;
  551. color: var(--secondary-gray);
  552. margin-bottom: 15px;
  553. }
  554. .timeline-desc {
  555. color: var(--secondary-gray);
  556. }
  557. /* 底部导航 */
  558. .ppt-footer {
  559. background-color: #f9f9f9;
  560. border-top: 1px solid #eee;
  561. padding: 20px 40px;
  562. display: flex;
  563. justify-content: space-between;
  564. align-items: center;
  565. }
  566. .footer-nav {
  567. display: flex;
  568. gap: 15px;
  569. }
  570. .footer-btn {
  571. display: inline-block;
  572. width: 35px;
  573. height: 35px;
  574. border-radius: 50%;
  575. background-color: var(--primary-blue);
  576. color: white;
  577. display: flex;
  578. justify-content: center;
  579. align-items: center;
  580. text-decoration: none;
  581. transition: all 0.3s ease;
  582. }
  583. .footer-btn:hover {
  584. background-color: var(--primary-gold);
  585. transform: translateY(-2px);
  586. }
  587. .footer-btn.prev {
  588. background-color: #6D6D6D;
  589. }
  590. .footer-btn.prev:hover {
  591. background-color: #555;
  592. }
  593. .footer-info {
  594. color: var(--secondary-gray);
  595. font-size: 0.9rem;
  596. }
  597. /* 响应式设计 */
  598. @media (max-width: 1024px) {
  599. .ppt-main {
  600. flex-direction: column;
  601. }
  602. .sidebar {
  603. width: 100%;
  604. border-right: none;
  605. border-bottom: 1px solid #eee;
  606. }
  607. .content-area {
  608. padding: 30px 25px;
  609. }
  610. .stats-container {
  611. grid-template-columns: repeat(2, 1fr);
  612. }
  613. .flow-steps {
  614. flex-wrap: wrap;
  615. justify-content: center;
  616. gap: 30px;
  617. }
  618. .flow-steps::before {
  619. display: none;
  620. }
  621. .case-grid {
  622. grid-template-columns: 1fr;
  623. }
  624. }
  625. @media (max-width: 768px) {
  626. .ppt-header {
  627. padding: 0 25px;
  628. }
  629. .ppt-title {
  630. font-size: 2rem;
  631. }
  632. .section-number {
  633. font-size: 2.5rem;
  634. }
  635. .section-title {
  636. font-size: 1.8rem;
  637. }
  638. .stats-container {
  639. grid-template-columns: 1fr;
  640. }
  641. .case-card {
  642. flex-direction: column;
  643. }
  644. .case-image {
  645. width: 100%;
  646. height: 150px;
  647. }
  648. .case-content {
  649. width: 100%;
  650. }
  651. .ppt-footer {
  652. flex-direction: column;
  653. gap: 15px;
  654. }
  655. }
  656. </style>
  657. </head>
  658. <body>
  659. <div class="ppt-container">
  660. <!-- PPT头部 -->
  661. <div class="ppt-header">
  662. <h1 class="ppt-title">会员服务智能化升级</h1>
  663. </div>
  664. <!-- 主要内容区域 -->
  665. <div class="ppt-main">
  666. <!-- 左侧目录 -->
  667. <div class="sidebar">
  668. <h3 class="sidebar-title">内容导航</h3>
  669. <ul class="sidebar-menu">
  670. <li class="sidebar-item">
  671. <a href="#" class="sidebar-link active" data-target="4.1">
  672. <i class="fas fa-user-circle mr-2"></i>4.1 会员门户
  673. </a>
  674. <ul class="submenu active" id="submenu-4.1">
  675. <li class="submenu-item">
  676. <a href="#" class="submenu-link active" data-target="4.1.1">智能注册</a>
  677. </li>
  678. <li class="submenu-item">
  679. <a href="#" class="submenu-link" data-target="4.1.2">会员风采</a>
  680. </li>
  681. <li class="submenu-item">
  682. <a href="#" class="submenu-link" data-target="4.1.3">单位对接</a>
  683. </li>
  684. </ul>
  685. </li>
  686. <li class="sidebar-item">
  687. <a href="#" class="sidebar-link" data-target="4.2">
  688. <i class="fas fa-users mr-2"></i>4.2 共创空间
  689. </a>
  690. <ul class="submenu" id="submenu-4.2">
  691. <li class="submenu-item">
  692. <a href="#" class="submenu-link" data-target="4.2.1">项目众包</a>
  693. </li>
  694. <li class="submenu-item">
  695. <a href="#" class="submenu-link" data-target="4.2.2">资源交易</a>
  696. </li>
  697. <li class="submenu-item">
  698. <a href="#" class="submenu-link" data-target="4.2.3">协同创作</a>
  699. </li>
  700. </ul>
  701. </li>
  702. <li class="sidebar-item">
  703. <a href="#" class="sidebar-link" data-target="4.3">
  704. <i class="fas fa-trophy mr-2"></i>4.3 奖励体系
  705. </a>
  706. <ul class="submenu" id="submenu-4.3">
  707. <li class="submenu-item">
  708. <a href="#" class="submenu-link" data-target="4.3.1">奖项申报</a>
  709. </li>
  710. <li class="submenu-item">
  711. <a href="#" class="submenu-link" data-target="4.3.2">成果展示</a>
  712. </li>
  713. </ul>
  714. </li>
  715. <li class="sidebar-item">
  716. <a href="#" class="sidebar-link" data-target="4.4">
  717. <i class="fas fa-chart-line mr-2"></i>4.4 数据统计
  718. </a>
  719. </li>
  720. <li class="sidebar-item">
  721. <a href="#" class="sidebar-link" data-target="4.5">
  722. <i class="fas fa-calendar-alt mr-2"></i>4.5 实施计划
  723. </a>
  724. </li>
  725. </ul>
  726. </div>
  727. <!-- 内容区域 -->
  728. <div class="content-area">
  729. <div class="section-header">
  730. <div class="section-number">4</div>
  731. <h2 class="section-title">会员服务(智能化升级)</h2>
  732. </div>
  733. <p class="section-desc">
  734. 江西省文化和旅游研究推广协会致力于为会员单位提供全方位、智能化的服务体系。本章节将详细介绍协会在会员服务智能化升级方面的核心内容,包括会员门户、共创空间、奖励体系等模块的建设情况与功能特点。
  735. </p>
  736. <!-- 统计卡片 -->
  737. <div class="stats-container">
  738. <div class="stats-card">
  739. <div class="stats-value">300+</div>
  740. <div class="stats-label">活跃会员单位</div>
  741. </div>
  742. <div class="stats-card">
  743. <div class="stats-value">2000+</div>
  744. <div class="stats-label">文化资源项目</div>
  745. </div>
  746. <div class="stats-card">
  747. <div class="stats-value">85%</div>
  748. <div class="stats-label">会员满意度</div>
  749. </div>
  750. <div class="stats-card">
  751. <div class="stats-value">50+</div>
  752. <div class="stats-label">合作机构</div>
  753. </div>
  754. </div>
  755. <!-- 4.1 会员门户 -->
  756. <div class="content-block active" id="4.1">
  757. <h3 class="block-title">4.1 会员门户</h3>
  758. <div class="flow-chart">
  759. <h4 class="flow-title">会员门户服务流程</h4>
  760. <div class="flow-steps">
  761. <div class="flow-step">
  762. <div class="step-number">1</div>
  763. <div class="step-label">智能注册</div>
  764. </div>
  765. <div class="flow-step">
  766. <div class="step-number">2</div>
  767. <div class="step-label">资料审核</div>
  768. </div>
  769. <div class="flow-step">
  770. <div class="step-number">3</div>
  771. <div class="step-label">会员认证</div>
  772. </div>
  773. <div class="flow-step">
  774. <div class="step-number">4</div>
  775. <div class="step-label">平台服务</div>
  776. </div>
  777. <div class="flow-step">
  778. <div class="step-number">5</div>
  779. <div class="step-label">持续成长</div>
  780. </div>
  781. </div>
  782. </div>
  783. <div class="feature-grid">
  784. <div class="feature-card" id="4.1.1">
  785. <div class="card-header">
  786. <div class="card-icon">📝</div>
  787. <h4 class="card-title">智能注册(OCR证件识别)</h4>
  788. </div>
  789. <div class="card-content">
  790. <p class="card-desc">
  791. 通过OCR光学字符识别技术,自动读取身份证、营业执照等证件信息,实现30秒快速注册,减少手动录入错误,提升注册效率。
  792. </p>
  793. <ul class="card-list">
  794. <li>身份证、营业执照自动识别</li>
  795. <li>30秒完成基础信息录入</li>
  796. <li>智能信息核验与纠错</li>
  797. <li>多维度安全验证机制</li>
  798. </ul>
  799. </div>
  800. <div class="card-footer">
  801. <a href="#" class="card-link">
  802. 查看详情 <i class="fas fa-arrow-right"></i>
  803. </a>
  804. <span class="card-status">已上线</span>
  805. </div>
  806. </div>
  807. <div class="feature-card" id="4.1.2">
  808. <div class="card-header">
  809. <div class="card-icon">🎥</div>
  810. <h4 class="card-title">会员风采(VR展厅)</h4>
  811. </div>
  812. <div class="card-content">
  813. <p class="card-desc">
  814. 搭建虚拟 reality 展厅,360°展示会员单位成就、特色项目与文化理念,支持在线导览与互动交流,提升会员单位品牌影响力。
  815. </p>
  816. <ul class="card-list">
  817. <li>3D虚拟展厅环境</li>
  818. <li>交互式内容展示</li>
  819. <li>在线导览与讲解</li>
  820. <li>数据统计与分析</li>
  821. </ul>
  822. </div>
  823. <div class="card-footer">
  824. <a href="#" class="card-link">
  825. 查看详情 <i class="fas fa-arrow-right"></i>
  826. </a>
  827. <span class="card-status">测试中</span>
  828. </div>
  829. </div>
  830. <div class="feature-card" id="4.1.3">
  831. <div class="card-header">
  832. <div class="card-icon">🤝</div>
  833. <h4 class="card-title">单位对接(智能匹配系统)</h4>
  834. </div>
  835. <div class="card-content">
  836. <p class="card-desc">
  837. 基于大数据分析的智能匹配系统,根据会员单位业务领域、资源需求等维度,精准推荐合作对象,促进会员之间的资源整合与协同发展。
  838. </p>
  839. <ul class="card-list">
  840. <li>多维度智能匹配算法</li>
  841. <li>精准推荐合作对象</li>
  842. <li>合作意向在线沟通</li>
  843. <li>合作项目全流程管理</li>
  844. </ul>
  845. </div>
  846. <div class="card-footer">
  847. <a href="#" class="card-link">
  848. 查看详情 <i class="fas fa-arrow-right"></i>
  849. </a>
  850. <span class="card-status">开发中</span>
  851. </div>
  852. </div>
  853. </div>
  854. <!-- 案例展示 -->
  855. <div class="case-studies">
  856. <h4 class="case-title">成功案例</h4>
  857. <div class="case-grid">
  858. <div class="case-card">
  859. <div class="case-image" style="background-image: url('https://picsum.photos/seed/case1/400/300');"></div>
  860. <div class="case-content">
  861. <h5 class="case-name">滕王阁文化数字博物馆</h5>
  862. <p class="case-desc">通过VR展厅技术,全面展示滕王阁历史文化与现代价值,吸引了超过10万人次在线参观,提升了会员单位的品牌影响力。</p>
  863. <div class="case-meta">
  864. <span class="case-tag">VR展厅</span>
  865. <span class="case-tag">文化传播</span>
  866. <span class="case-tag">会员服务</span>
  867. </div>
  868. </div>
  869. </div>
  870. <div class="case-card">
  871. <div class="case-image" style="background-image: url('https://picsum.photos/seed/case2/400/300');"></div>
  872. <div class="case-content">
  873. <h5 class="case-name">景德镇陶瓷企业智能对接</h5>
  874. <p class="case-desc">通过智能匹配系统,成功促成景德镇陶瓷企业与设计机构的合作,共同开发出多款文创产品,实现了双方的互利共赢。</p>
  875. <div class="case-meta">
  876. <span class="case-tag">智能匹配</span>
  877. <span class="case-tag">产业合作</span>
  878. <span class="case-tag">文创产品</span>
  879. </div>
  880. </div>
  881. </div>
  882. </div>
  883. </div>
  884. </div>
  885. <!-- 4.2 共创空间 -->
  886. <div class="content-block" id="4.2">
  887. <h3 class="block-title">4.2 共创空间</h3>
  888. <div class="feature-grid">
  889. <div class="feature-card" id="4.2.1">
  890. <div class="card-header">
  891. <div class="card-icon">👥</div>
  892. <h4 class="card-title">项目众包(传记撰写/IP设计接单)</h4>
  893. </div>
  894. <div class="card-content">
  895. <p class="card-desc">
  896. 开放众包平台,会员可发布文化传记撰写、文旅IP设计等任务,整合行业智慧,降低创作成本,提高项目质量与效率。
  897. </p>
  898. <ul class="card-list">
  899. <li>任务发布与管理</li>
  900. <li>创作者招募与筛选</li>
  901. <li>在线协作与沟通</li>
  902. <li>项目验收与结算</li>
  903. </ul>
  904. </div>
  905. <div class="card-footer">
  906. <a href="#" class="card-link">
  907. 查看详情 <i class="fas fa-arrow-right"></i>
  908. </a>
  909. <span class="card-status">已上线</span>
  910. </div>
  911. </div>
  912. <div class="feature-card" id="4.2.2">
  913. <div class="card-header">
  914. <div class="card-icon">💱</div>
  915. <h4 class="card-title">资源交易(文化数据确权交易)</h4>
  916. </div>
  917. <div class="card-content">
  918. <p class="card-desc">
  919. 建立文化数据确权交易平台,支持会员单位将原创文化素材、研究数据等进行确权并市场化交易,促进文化资源的有效流动与价值转化。
  920. </p>
  921. <ul class="card-list">
  922. <li>文化资源数字化确权</li>
  923. <li>版权管理与保护</li>
  924. <li>在线交易与结算</li>
  925. <li>数据分析与评估</li>
  926. </ul>
  927. </div>
  928. <div class="card-footer">
  929. <a href="#" class="card-link">
  930. 查看详情 <i class="fas fa-arrow-right"></i>
  931. </a>
  932. <span class="card-status">开发中</span>
  933. </div>
  934. </div>
  935. <div class="feature-card" id="4.2.3">
  936. <div class="card-header">
  937. <div class="card-icon">🎨</div>
  938. <h4 class="card-title">协同创作(文化内容共创平台)</h4>
  939. </div>
  940. <div class="card-content">
  941. <p class="card-desc">
  942. 提供实时协作工具,支持多名创作者共同完成文化内容创作,实现资源共享、优势互补,提升文化产品的创作效率与质量。
  943. </p>
  944. <ul class="card-list">
  945. <li>实时多人协作编辑</li>
  946. <li>版本控制与历史记录</li>
  947. <li>资源共享与管理</li>
  948. <li>创作过程可视化</li>
  949. </ul>
  950. </div>
  951. <div class="card-footer">
  952. <a href="#" class="card-link">
  953. 查看详情 <i class="fas fa-arrow-right"></i>
  954. </a>
  955. <span class="card-status">规划中</span>
  956. </div>
  957. </div>
  958. </div>
  959. <!-- 流程图 -->
  960. <div class="flow-chart">
  961. <h4 class="flow-title">共创空间运作流程</h4>
  962. <div class="flow-steps">
  963. <div class="flow-step">
  964. <div class="step-number">1</div>
  965. <div class="step-label">需求发布</div>
  966. </div>
  967. <div class="flow-step">
  968. <div class="step-number">2</div>
  969. <div class="step-label">资源匹配</div>
  970. </div>
  971. <div class="flow-step">
  972. <div class="step-number">3</div>
  973. <div class="step-label">合作达成</div>
  974. </div>
  975. <div class="flow-step">
  976. <div class="step-number">4</div>
  977. <div class="step-label">协同创作</div>
  978. </div>
  979. <div class="flow-step">
  980. <div class="step-number">5</div>
  981. <div class="step-label">成果交付</div>
  982. </div>
  983. </div>
  984. </div>
  985. <!-- 案例展示 -->
  986. <div class="case-studies">
  987. <h4 class="case-title">成功案例</h4>
  988. <div class="case-grid">
  989. <div class="case-card">
  990. <div class="case-image" style="background-image: url('https://picsum.photos/seed/case3/400/300');"></div>
  991. <div class="case-content">
  992. <h5 class="case-name">江西茶文化系列传记项目</h5>
  993. <p class="case-desc">通过项目众包平台,集结了省内多位茶文化专家与作家,共同撰写《江西茶文化通史》,项目周期缩短40%,内容质量显著提升。</p>
  994. <div class="case-meta">
  995. <span class="case-tag">项目众包</span>
  996. <span class="case-tag">文化研究</span>
  997. <span class="case-tag">协同创作</span>
  998. </div>
  999. </div>
  1000. </div>
  1001. <div class="case-card">
  1002. <div class="case-image" style="background-image: url('https://picsum.photos/seed/case4/400/300');"></div>
  1003. <div class="case-content">
  1004. <h5 class="case-name">红色旅游IP设计大赛</h5>
  1005. <p class="case-desc">利用共创空间平台举办红色旅游IP设计大赛,吸引了全国200余位设计师参与,征集作品500余件,为江西红色旅游发展注入了新活力。</p>
  1006. <div class="case-meta">
  1007. <span class="case-tag">IP设计</span>
  1008. <span class="case-tag">红色旅游</span>
  1009. <span class="case-tag">文化创意</span>
  1010. </div>
  1011. </div>
  1012. </div>
  1013. </div>
  1014. </div>
  1015. </div>
  1016. <!-- 4.3 奖励体系 -->
  1017. <div class="content-block" id="4.3">
  1018. <h3 class="block-title">4.3 奖励体系</h3>
  1019. <div class="feature-grid">
  1020. <div class="feature-card" id="4.3.1">
  1021. <div class="card-header">
  1022. <div class="card-icon">🏆</div>
  1023. <h4 class="card-title">奖项申报(线上申报评审系统)</h4>
  1024. </div>
  1025. <div class="card-content">
  1026. <p class="card-desc">
  1027. 构建线上奖项申报与评审系统,实现申报材料电子化提交、专家在线评审、评审过程透明化,提升奖项评选的公正性与效率。
  1028. </p>
  1029. <ul class="card-list">
  1030. <li>多类型奖项设置</li>
  1031. <li>在线材料提交与管理</li>
  1032. <li>专家智能匹配与分配</li>
  1033. <li>评审过程全程记录</li>
  1034. </ul>
  1035. </div>
  1036. <div class="card-footer">
  1037. <a href="#" class="card-link">
  1038. 查看详情 <i class="fas fa-arrow-right"></i>
  1039. </a>
  1040. <span class="card-status">已上线</span>
  1041. </div>
  1042. </div>
  1043. <div class="feature-card" id="4.3.2">
  1044. <div class="card-header">
  1045. <div class="card-icon">🌟</div>
  1046. <h4 class="card-title">成果展示(文化成果数字展厅)</h4>
  1047. </div>
  1048. <div class="card-content">
  1049. <p class="card-desc">
  1050. 搭建数字化成果展示平台,集中展示会员单位优秀文化成果,包括学术著作、文创产品、研究报告等,促进文化成果的传播与转化。
  1051. </p>
  1052. <ul class="card-list">
  1053. <li>多维度成果分类展示</li>
  1054. <li>在线浏览与下载</li>
  1055. <li>成果数据统计分析</li>
  1056. <li>成果转化对接服务</li>
  1057. </ul>
  1058. </div>
  1059. <div class="card-footer">
  1060. <a href="#" class="card-link">
  1061. 查看详情 <i class="fas fa-arrow-right"></i>
  1062. </a>
  1063. <span class="card-status">已上线</span>
  1064. </div>
  1065. </div>
  1066. </div>
  1067. <!-- 统计图表 -->
  1068. <div class="chart-container">
  1069. <h4 class="chart-title">近五年获奖情况统计</h4>
  1070. <div class="chart" style="height: 300px; width: 100%; background-color: #f9f9f9; border-radius: 8px; display: flex; justify-content: center; align-items: center;">
  1071. <!-- 图表将在这里显示 -->
  1072. <div class="placeholder-text">近五年获奖情况统计图表</div>
  1073. </div>
  1074. </div>
  1075. <!-- 案例展示 -->
  1076. <div class="case-studies">
  1077. <h4 class="case-title">奖励体系案例</h4>
  1078. <div class="case-grid">
  1079. <div class="case-card">
  1080. <div class="case-image" style="background-image: url('https://picsum.photos/seed/case5/400/300');"></div>
  1081. <div class="case-content">
  1082. <h5 class="case-name">江西省优秀文旅研究成果奖</h5>
  1083. <p class="case-desc">通过线上申报评审系统,成功评选出50项优秀文旅研究成果,涵盖规划设计、市场营销、文化保护等多个领域,推动了文旅行业的学术研究与实践创新。</p>
  1084. <div class="case-meta">
  1085. <span class="case-tag">奖项评选</span>
  1086. <span class="case-tag">文旅研究</span>
  1087. <span class="case-tag">成果转化</span>
  1088. </div>
  1089. </div>
  1090. </div>
  1091. <div class="case-card">
  1092. <div class="case-image" style="background-image: url('https://picsum.photos/seed/case6/400/300');"></div>
  1093. <div class="case-content">
  1094. <h5 class="case-name">江西文化创新成果展</h5>
  1095. <p class="case-desc">利用成果展示平台,集中展示了100余项江西文化创新成果,吸引了超过20万人次在线参观,促成了30余项成果转化合作,产生经济效益超过5000万元。</p>
  1096. <div class="case-meta">
  1097. <span class="case-tag">成果展示</span>
  1098. <span class="case-tag">文化创新</span>
  1099. <span class="case-tag">产业合作</span>
  1100. </div>
  1101. </div>
  1102. </div>
  1103. </div>
  1104. </div>
  1105. </div>
  1106. <!-- 4.4 数据统计 -->
  1107. <div class="content-block" id="4.4">
  1108. <h3 class="block-title">4.4 数据统计</h3>
  1109. <div class="chart-container">
  1110. <h4 class="chart-title">会员活跃度分析</h4>
  1111. <div class="chart" style="height: 350px; width: 100%; background-color: #f9f9f9; border-radius: 8px; display: flex; justify-content: center; align-items: center;">
  1112. <!-- 图表将在这里显示 -->
  1113. <div class="placeholder-text">会员活跃度分析图表</div>
  1114. </div>
  1115. </div>
  1116. <div class="chart-container">
  1117. <h4 class="chart-title">服务使用情况统计</h4>
  1118. <div class="chart" style="height: 350px; width: 100%; background-color: #f9f9f9; border-radius: 8px; display: flex; justify-content: center; align-items: center;">
  1119. <!-- 图表将在这里显示 -->
  1120. <div class="placeholder-text">服务使用情况统计图表</div>
  1121. </div>
  1122. </div>
  1123. <div class="chart-container">
  1124. <h4 class="chart-title">资源交易数据分析</h4>
  1125. <div class="chart" style="height: 350px; width: 100%; background-color: #f9f9f9; border-radius: 8px; display: flex; justify-content: center; align-items: center;">
  1126. <!-- 图表将在这里显示 -->
  1127. <div class="placeholder-text">资源交易数据分析图表</div>
  1128. </div>
  1129. </div>
  1130. </div>
  1131. <!-- 4.5 实施计划 -->
  1132. <div class="content-block" id="4.5">
  1133. <h3 class="block-title">4.5 实施计划</h3>
  1134. <div class="timeline">
  1135. <div class="timeline-item">
  1136. <div class="timeline-marker">Q1</div>
  1137. <div class="timeline-content">
  1138. <h4 class="timeline-title">系统需求分析与设计</h4>
  1139. <p class="timeline-date">2025年第一季度</p>
  1140. <p class="timeline-desc">完成会员服务智能化升级系统的需求调研、分析与设计工作,确定系统架构、功能模块与技术方案。</p>
  1141. </div>
  1142. </div>
  1143. <div class="timeline-item">
  1144. <div class="timeline-marker">Q2</div>
  1145. <div class="timeline-content">
  1146. <h4 class="timeline-title">系统开发与测试</h4>
  1147. <p class="timeline-date">2025年第二季度</p>
  1148. <p class="timeline-desc">按照设计方案进行系统开发工作,完成主要功能模块的编码与单元测试,开展集成测试与系统测试。</p>
  1149. </div>
  1150. </div>
  1151. <div class="timeline-item">
  1152. <div class="timeline-marker">Q3</div>
  1153. <div class="timeline-content">
  1154. <h4 class="timeline-title">试点运行与优化</h4>
  1155. <p class="timeline-date">2025年第三季度</p>
  1156. <p class="timeline-desc">选择部分会员单位进行试点运行,收集反馈意见,对系统进行优化调整,完善系统功能与性能。</p>
  1157. </div>
  1158. </div>
  1159. <div class="timeline-item">
  1160. <div class="timeline-marker">Q4</div>
  1161. <div class="timeline-content">
  1162. <h4 class="timeline-title">全面推广与应用</h4>
  1163. <p class="timeline-date">2025年第四季度</p>
  1164. <p class="timeline-desc">在全体会员单位中全面推广会员服务智能化升级系统,开展培训与技术支持,确保系统顺利运行与应用。</p>
  1165. </div>
  1166. </div>
  1167. </div>
  1168. <!-- 实施计划表格 -->
  1169. <div class="chart-container">
  1170. <h4 class="chart-title">项目实施进度表</h4>
  1171. <table class="table" style="width: 100%; border-collapse: collapse;">
  1172. <thead>
  1173. <tr style="background-color: #f9f9f9;">
  1174. <th style="padding: 15px; border: 1px solid #eee; text-align: left;">阶段</th>
  1175. <th style="padding: 15px; border: 1px solid #eee; text-align: left;">时间</th>
  1176. <th style="padding: 15px; border: 1px solid #eee; text-align: left;">主要任务</th>
  1177. <th style="padding: 15px; border: 1px solid #eee; text-align: left;">负责人</th>
  1178. </tr>
  1179. </thead>
  1180. <tbody>
  1181. <tr>
  1182. <td style="padding: 15px; border: 1px solid #eee;">需求分析</td>
  1183. <td style="padding: 15px; border: 1px solid #eee;">2025.1-2025.2</td>
  1184. <td style="padding: 15px; border: 1px solid #eee;">需求调研、分析与确认</td>
  1185. <td style="padding: 15px; border: 1px solid #eee;">技术部</td>
  1186. </tr>
  1187. <tr>
  1188. <td style="padding: 15px; border: 1px solid #eee;">系统设计</td>
  1189. <td style="padding: 15px; border: 1px solid #eee;">2025.3-2025.4</td>
  1190. <td style="padding: 15px; border: 1px solid #eee;">架构设计、数据库设计、界面设计</td>
  1191. <td style="padding: 15px; border: 1px solid #eee;">技术部</td>
  1192. </tr>
  1193. <tr>
  1194. <td style="padding: 15px; border: 1px solid #eee;">系统开发</td>
  1195. <td style="padding: 15px; border: 1px solid #eee;">2025.5-2025.7</td>
  1196. <td style="padding: 15px; border: 1px solid #eee;">编码实现、单元测试</td>
  1197. <td style="padding: 15px; border: 1px solid #eee;">开发团队</td>
  1198. </tr>
  1199. <tr>
  1200. <td style="padding: 15px; border: 1px solid #eee;">系统测试</td>
  1201. <td style="padding: 15px; border: 1px solid #eee;">2025.8-2025.9</td>
  1202. <td style="padding: 15px; border: 1px solid #eee;">集成测试、系统测试、性能测试</td>
  1203. <td style="padding: 15px; border: 1px solid #eee;">测试团队</td>
  1204. </tr>
  1205. <tr>
  1206. <td style="padding: 15px; border: 1px solid #eee;">试点运行</td>
  1207. <td style="padding: 15px; border: 1px solid #eee;">2025.10-2025.11</td>
  1208. <td style="padding: 15px; border: 1px solid #eee;">部分会员单位试点、反馈优化</td>
  1209. <td style="padding: 15px; border: 1px solid #eee;">技术部、会员服务部</td>
  1210. </tr>
  1211. <tr>
  1212. <td style="padding: 15px; border: 1px solid #eee;">全面推广</td>
  1213. <td style="padding: 15px; border: 1px solid #eee;">2025.12-2026.1</td>
  1214. <td style="padding: 15px; border: 1px solid #eee;">系统全面上线、培训支持</td>
  1215. <td style="padding: 15px; border: 1px solid #eee;">会员服务部、技术部</td>
  1216. </tr>
  1217. </tbody>
  1218. </table>
  1219. </div>
  1220. </div>
  1221. </div>
  1222. </div>
  1223. <!-- 底部导航 -->
  1224. <div class="ppt-footer">
  1225. <div class="footer-nav">
  1226. <a href="#" class="footer-btn prev" disabled>
  1227. <i class="fas fa-arrow-left"></i>
  1228. </a>
  1229. <a href="#" class="footer-btn next">
  1230. <i class="fas fa-arrow-right"></i>
  1231. </a>
  1232. </div>
  1233. <div class="footer-info">
  1234. 江西省文化和旅游研究推广协会 © 2025 | 会员服务智能化升级方案
  1235. </div>
  1236. </div>
  1237. </div>
  1238. <!-- JavaScript -->
  1239. <script src="https://cdn.tailwindcss.com"></script>
  1240. <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  1241. <script>
  1242. // 导航菜单交互
  1243. document.addEventListener('DOMContentLoaded', function() {
  1244. // 侧边栏菜单点击事件
  1245. const sidebarLinks = document.querySelectorAll('.sidebar-link');
  1246. const submenuLinks = document.querySelectorAll('.submenu-link');
  1247. const contentBlocks = document.querySelectorAll('.content-block');
  1248. // 初始化子菜单状态
  1249. sidebarLinks.forEach(link => {
  1250. link.addEventListener('click', function(e) {
  1251. e.preventDefault();
  1252. // 移除所有侧边栏链接的活动状态
  1253. sidebarLinks.forEach(l => l.classList.remove('active'));
  1254. // 添加当前链接的活动状态
  1255. this.classList.add('active');
  1256. // 获取目标内容块ID
  1257. const target = this.getAttribute('data-target');
  1258. // 隐藏所有内容块
  1259. contentBlocks.forEach(block => {
  1260. block.classList.remove('active');
  1261. });
  1262. // 显示目标内容块
  1263. document.getElementById(target).classList.add('active');
  1264. // 处理子菜单显示/隐藏
  1265. const submenuId = 'submenu-' + target;
  1266. const submenu = document.getElementById(submenuId);
  1267. // 隐藏所有子菜单
  1268. document.querySelectorAll('.submenu').forEach(sm => {
  1269. sm.classList.remove('active');
  1270. });
  1271. // 如果有子菜单,则显示
  1272. if (submenu) {
  1273. submenu.classList.add('active');
  1274. // 如果子菜单有链接,激活第一个
  1275. const firstSubmenuLink = submenu.querySelector('.submenu-link');
  1276. if (firstSubmenuLink) {
  1277. submenuLinks.forEach(l => l.classList.remove('active'));
  1278. firstSubmenuLink.classList.add('active');
  1279. }
  1280. }
  1281. });
  1282. });
  1283. // 子菜单链接点击事件
  1284. submenuLinks.forEach(link => {
  1285. link.addEventListener('click', function(e) {
  1286. e.preventDefault();
  1287. // 移除所有子菜单链接的活动状态
  1288. submenuLinks.forEach(l => l.classList.remove('active'));
  1289. // 添加当前链接的活动状态
  1290. this.classList.add('active');
  1291. // 获取目标内容块ID
  1292. const target = this.getAttribute('data-target');
  1293. // 隐藏所有内容块
  1294. contentBlocks.forEach(block => {
  1295. block.classList.remove('active');
  1296. });
  1297. // 显示目标内容块
  1298. document.getElementById(target).classList.add('active');
  1299. });
  1300. });
  1301. // 底部导航按钮点击事件
  1302. const prevBtn = document.querySelector('.footer-btn.prev');
  1303. const nextBtn = document.querySelector('.footer-btn.next');
  1304. prevBtn.addEventListener('click', function(e) {
  1305. e.preventDefault();
  1306. // 上一页逻辑
  1307. });
  1308. nextBtn.addEventListener('click', function(e) {
  1309. e.preventDefault();
  1310. // 下一页逻辑
  1311. });
  1312. });
  1313. </script>
  1314. </body>
  1315. </html>