|
@@ -0,0 +1,805 @@
|
|
|
|
|
+<!DOCTYPE html>
|
|
|
|
|
+<html lang="zh-CN">
|
|
|
|
|
+<head>
|
|
|
|
|
+ <meta charset="UTF-8">
|
|
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
+ <title>协会核心业务 - AI赋能平台</title>
|
|
|
|
|
+ <!-- 引入国内CDN资源 -->
|
|
|
|
|
+ <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
|
|
|
|
|
+ <link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
|
|
|
|
|
+ <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.2/echarts.min.js"></script>
|
|
|
|
|
+ <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/8.4.5/swiper-bundle.min.js"></script>
|
|
|
|
|
+ <link href="https://cdn.bootcdn.net/ajax/libs/Swiper/8.4.5/swiper-bundle.min.css" rel="stylesheet">
|
|
|
|
|
+ <style>
|
|
|
|
|
+ :root {
|
|
|
|
|
+ --primary-color: #3498db;
|
|
|
|
|
+ --secondary-color: #2ecc71;
|
|
|
|
|
+ --accent-color: #e74c3c;
|
|
|
|
|
+ --dark-color: #2c3e50;
|
|
|
|
|
+ --light-color: #ecf0f1;
|
|
|
|
|
+ --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ * {
|
|
|
|
|
+ margin: 0;
|
|
|
|
|
+ padding: 0;
|
|
|
|
|
+ box-sizing: border-box;
|
|
|
|
|
+ font-family: 'Microsoft YaHei', sans-serif;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ body {
|
|
|
|
|
+ background-color: #f5f7fa;
|
|
|
|
|
+ color: #333;
|
|
|
|
|
+ line-height: 1.6;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .container {
|
|
|
|
|
+ max-width: 1200px;
|
|
|
|
|
+ margin: 0 auto;
|
|
|
|
|
+ padding: 20px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ header {
|
|
|
|
|
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
|
|
|
|
+ color: white;
|
|
|
|
|
+ padding: 30px 0;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ border-radius: 10px;
|
|
|
|
|
+ margin-bottom: 30px;
|
|
|
|
|
+ box-shadow: var(--shadow);
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ header::before {
|
|
|
|
|
+ content: '';
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 0;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ 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>');
|
|
|
|
|
+ background-size: 20px 20px;
|
|
|
|
|
+ opacity: 0.3;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ h1 {
|
|
|
|
|
+ font-size: 2.5rem;
|
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ z-index: 1;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .subtitle {
|
|
|
|
|
+ font-size: 1.2rem;
|
|
|
|
|
+ opacity: 0.9;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ z-index: 1;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .ai-features {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
|
+ gap: 20px;
|
|
|
|
|
+ margin-bottom: 30px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .feature-card {
|
|
|
|
|
+ flex: 1 1 300px;
|
|
|
|
|
+ background: white;
|
|
|
|
|
+ border-radius: 10px;
|
|
|
|
|
+ padding: 25px;
|
|
|
|
|
+ box-shadow: var(--shadow);
|
|
|
|
|
+ transition: transform 0.3s, box-shadow 0.3s;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .feature-card:hover {
|
|
|
|
|
+ transform: translateY(-5px);
|
|
|
|
|
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .feature-card::after {
|
|
|
|
|
+ content: '';
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ bottom: 0;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 5px;
|
|
|
|
|
+ background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .feature-icon {
|
|
|
|
|
+ font-size: 2.5rem;
|
|
|
|
|
+ color: var(--primary-color);
|
|
|
|
|
+ margin-bottom: 15px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .feature-title {
|
|
|
|
|
+ font-size: 1.3rem;
|
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
|
+ color: var(--dark-color);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .feature-desc {
|
|
|
|
|
+ color: #666;
|
|
|
|
|
+ margin-bottom: 15px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .btn {
|
|
|
|
|
+ display: inline-block;
|
|
|
|
|
+ padding: 8px 16px;
|
|
|
|
|
+ background: var(--primary-color);
|
|
|
|
|
+ color: white;
|
|
|
|
|
+ border-radius: 5px;
|
|
|
|
|
+ text-decoration: none;
|
|
|
|
|
+ transition: background 0.3s;
|
|
|
|
|
+ border: none;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ font-size: 0.9rem;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .btn:hover {
|
|
|
|
|
+ background: #2980b9;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .btn-outline {
|
|
|
|
|
+ background: transparent;
|
|
|
|
|
+ border: 1px solid var(--primary-color);
|
|
|
|
|
+ color: var(--primary-color);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .btn-outline:hover {
|
|
|
|
|
+ background: var(--primary-color);
|
|
|
|
|
+ color: white;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .section {
|
|
|
|
|
+ margin-bottom: 40px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .section-title {
|
|
|
|
|
+ font-size: 1.8rem;
|
|
|
|
|
+ color: var(--dark-color);
|
|
|
|
|
+ margin-bottom: 20px;
|
|
|
|
|
+ padding-bottom: 10px;
|
|
|
|
|
+ border-bottom: 2px solid var(--primary-color);
|
|
|
|
|
+ display: inline-block;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .subsection {
|
|
|
|
|
+ background: white;
|
|
|
|
|
+ border-radius: 10px;
|
|
|
|
|
+ padding: 20px;
|
|
|
|
|
+ margin-bottom: 20px;
|
|
|
|
|
+ box-shadow: var(--shadow);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .subsection-title {
|
|
|
|
|
+ font-size: 1.4rem;
|
|
|
|
|
+ color: var(--dark-color);
|
|
|
|
|
+ margin-bottom: 15px;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .subsection-title i {
|
|
|
|
|
+ margin-right: 10px;
|
|
|
|
|
+ color: var(--primary-color);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* 知识图谱可视化容器 */
|
|
|
|
|
+ #knowledge-graph {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 400px;
|
|
|
|
|
+ background: #f9f9f9;
|
|
|
|
|
+ border-radius: 8px;
|
|
|
|
|
+ margin: 15px 0;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* AR名片样式 */
|
|
|
|
|
+ .ar-cards {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-wrap: wrap;
|
|
|
|
|
+ gap: 15px;
|
|
|
|
|
+ margin-top: 20px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .ar-card {
|
|
|
|
|
+ flex: 1 1 200px;
|
|
|
|
|
+ background: linear-gradient(135deg, #f5f7fa, #e4e8eb);
|
|
|
|
|
+ border-radius: 8px;
|
|
|
|
|
+ padding: 15px;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
|
|
|
|
+ transition: transform 0.3s;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .ar-card:hover {
|
|
|
|
|
+ transform: scale(1.05);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .ar-card-img {
|
|
|
|
|
+ width: 80px;
|
|
|
|
|
+ height: 80px;
|
|
|
|
|
+ border-radius: 50%;
|
|
|
|
|
+ object-fit: cover;
|
|
|
|
|
+ margin: 0 auto 10px;
|
|
|
|
|
+ border: 3px solid var(--primary-color);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .ar-card-name {
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ margin-bottom: 5px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .ar-card-title {
|
|
|
|
|
+ color: #666;
|
|
|
|
|
+ font-size: 0.9rem;
|
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .ar-card-btn {
|
|
|
|
|
+ background: var(--secondary-color);
|
|
|
|
|
+ color: white;
|
|
|
|
|
+ border: none;
|
|
|
|
|
+ padding: 5px 10px;
|
|
|
|
|
+ border-radius: 4px;
|
|
|
|
|
+ font-size: 0.8rem;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* 智能检索区域 */
|
|
|
|
|
+ .search-container {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ margin: 20px 0;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .search-input {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ padding: 12px 15px;
|
|
|
|
|
+ border: 1px solid #ddd;
|
|
|
|
|
+ border-radius: 5px 0 0 5px;
|
|
|
|
|
+ font-size: 1rem;
|
|
|
|
|
+ outline: none;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .search-btn {
|
|
|
|
|
+ padding: 0 20px;
|
|
|
|
|
+ background: var(--primary-color);
|
|
|
|
|
+ color: white;
|
|
|
|
|
+ border: none;
|
|
|
|
|
+ border-radius: 0 5px 5px 0;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+ transition: background 0.3s;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .search-btn:hover {
|
|
|
|
|
+ background: #2980b9;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* 轮播图样式 */
|
|
|
|
|
+ .swiper {
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 300px;
|
|
|
|
|
+ border-radius: 10px;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ margin: 20px 0;
|
|
|
|
|
+ box-shadow: var(--shadow);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .swiper-slide {
|
|
|
|
|
+ background-size: cover;
|
|
|
|
|
+ background-position: center;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: flex-end;
|
|
|
|
|
+ padding: 30px;
|
|
|
|
|
+ color: white;
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .swiper-slide::before {
|
|
|
|
|
+ content: '';
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 0;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.3));
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .slide-content {
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ z-index: 1;
|
|
|
|
|
+ max-width: 80%;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .slide-title {
|
|
|
|
|
+ font-size: 1.5rem;
|
|
|
|
|
+ margin-bottom: 10px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* 人才库卡片 */
|
|
|
|
|
+ .talent-card {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ background: white;
|
|
|
|
|
+ border-radius: 8px;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ box-shadow: var(--shadow);
|
|
|
|
|
+ margin-bottom: 15px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .talent-avatar {
|
|
|
|
|
+ width: 80px;
|
|
|
|
|
+ height: 80px;
|
|
|
|
|
+ object-fit: cover;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .talent-info {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ padding: 15px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .talent-name {
|
|
|
|
|
+ font-weight: bold;
|
|
|
|
|
+ margin-bottom: 5px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .talent-skill {
|
|
|
|
|
+ display: inline-block;
|
|
|
|
|
+ background: #e0f7fa;
|
|
|
|
|
+ color: #00838f;
|
|
|
|
|
+ padding: 3px 8px;
|
|
|
|
|
+ border-radius: 4px;
|
|
|
|
|
+ font-size: 0.8rem;
|
|
|
|
|
+ margin-right: 5px;
|
|
|
|
|
+ margin-bottom: 5px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .blockchain-badge {
|
|
|
|
|
+ display: inline-flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ background: #f3e5f5;
|
|
|
|
|
+ color: #6a1b9a;
|
|
|
|
|
+ padding: 3px 8px;
|
|
|
|
|
+ border-radius: 4px;
|
|
|
|
|
+ font-size: 0.8rem;
|
|
|
|
|
+ margin-top: 5px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .blockchain-badge i {
|
|
|
|
|
+ margin-right: 5px;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ /* 响应式调整 */
|
|
|
|
|
+ @media (max-width: 768px) {
|
|
|
|
|
+ .ai-features {
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .feature-card {
|
|
|
|
|
+ flex: 1 1 auto;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .ar-cards {
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .ar-card {
|
|
|
|
|
+ flex: 1 1 auto;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .swiper {
|
|
|
|
|
+ height: 200px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ </style>
|
|
|
|
|
+</head>
|
|
|
|
|
+<body>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="container">
|
|
|
|
|
+ <header class="animate__animated animate__fadeIn">
|
|
|
|
|
+ <h1>协会核心业务平台</h1>
|
|
|
|
|
+ <p class="subtitle">AI赋能 · 智慧协同 · 创新发展</p>
|
|
|
|
|
+ </header>
|
|
|
|
|
+
|
|
|
|
|
+ <section class="section">
|
|
|
|
|
+ <h2 class="section-title">核心AI功能展示</h2>
|
|
|
|
|
+ <div class="ai-features">
|
|
|
|
|
+ <div class="feature-card animate__animated animate__fadeInUp">
|
|
|
|
|
+ <div class="feature-icon">
|
|
|
|
|
+ <i class="fas fa-brain"></i>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <h3 class="feature-title">智能知识图谱</h3>
|
|
|
|
|
+ <p class="feature-desc">通过知识图谱技术可视化展示协会组织架构，实现关系网络智能分析，支持动态探索与交互查询。</p>
|
|
|
|
|
+ <a href="#organization" class="btn">立即体验</a>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="feature-card animate__animated animate__fadeInUp" style="animation-delay: 0.2s;">
|
|
|
|
|
+ <div class="feature-icon">
|
|
|
|
|
+ <i class="fas fa-user-tie"></i>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <h3 class="feature-title">AR名片系统</h3>
|
|
|
|
|
+ <p class="feature-desc">创新性的AR技术展示协会领导信息，扫描即可获取立体名片，支持语音介绍与联系方式一键保存。</p>
|
|
|
|
|
+ <a href="#leaders" class="btn">查看领导</a>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="feature-card animate__animated animate__fadeInUp" style="animation-delay: 0.4s;">
|
|
|
|
|
+ <div class="feature-icon">
|
|
|
|
|
+ <i class="fas fa-graduation-cap"></i>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <h3 class="feature-title">AI+文旅课程</h3>
|
|
|
|
|
+ <p class="feature-desc">微专业中心提供的智能学习系统，个性化推荐课程，AI助教实时答疑，学习路径智能规划。</p>
|
|
|
|
|
+ <a href="#courses" class="btn">开始学习</a>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </section>
|
|
|
|
|
+
|
|
|
|
|
+ <section class="section" id="organization">
|
|
|
|
|
+ <h2 class="section-title">3.1 走进协会</h2>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="subsection">
|
|
|
|
|
+ <h3 class="subsection-title"><i class="fas fa-sitemap"></i>组织架构 - 知识图谱可视化</h3>
|
|
|
|
|
+ <p>通过交互式知识图谱展示协会各部门关系网络，点击节点可查看详细信息，支持智能搜索与关系路径分析。</p>
|
|
|
|
|
+ <div id="knowledge-graph"></div>
|
|
|
|
|
+ <div class="search-container">
|
|
|
|
|
+ <input type="text" class="search-input" placeholder="输入部门或人员名称进行搜索...">
|
|
|
|
|
+ <button class="search-btn"><i class="fas fa-search"></i></button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="subsection" id="leaders">
|
|
|
|
|
+ <h3 class="subsection-title"><i class="fas fa-id-card"></i>协会领导 - AR名片系统</h3>
|
|
|
|
|
+ <p>点击下方领导名片查看AR效果，支持手机扫描二维码获取立体名片，包含语音介绍、联系方式和工作履历。</p>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="ar-cards">
|
|
|
|
|
+ <div class="ar-card">
|
|
|
|
|
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="会长" class="ar-card-img">
|
|
|
|
|
+ <div class="ar-card-name">张明远</div>
|
|
|
|
|
+ <div class="ar-card-title">协会会长</div>
|
|
|
|
|
+ <button class="ar-card-btn"><i class="fas fa-qrcode"></i> AR名片</button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="ar-card">
|
|
|
|
|
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="副会长" class="ar-card-img">
|
|
|
|
|
+ <div class="ar-card-name">李静怡</div>
|
|
|
|
|
+ <div class="ar-card-title">常务副会长</div>
|
|
|
|
|
+ <button class="ar-card-btn"><i class="fas fa-qrcode"></i> AR名片</button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="ar-card">
|
|
|
|
|
+ <img src="https://randomuser.me/api/portraits/men/67.jpg" alt="秘书长" class="ar-card-img">
|
|
|
|
|
+ <div class="ar-card-name">王建国</div>
|
|
|
|
|
+ <div class="ar-card-title">秘书长</div>
|
|
|
|
|
+ <button class="ar-card-btn"><i class="fas fa-qrcode"></i> AR名片</button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="ar-card">
|
|
|
|
|
+ <img src="https://randomuser.me/api/portraits/women/28.jpg" alt="副秘书长" class="ar-card-img">
|
|
|
|
|
+ <div class="ar-card-name">赵雨晴</div>
|
|
|
|
|
+ <div class="ar-card-title">副秘书长</div>
|
|
|
|
|
+ <button class="ar-card-btn"><i class="fas fa-qrcode"></i> AR名片</button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="subsection">
|
|
|
|
|
+ <h3 class="subsection-title"><i class="fas fa-book"></i>协会章程 - 智能检索版</h3>
|
|
|
|
|
+ <p>智能检索系统支持自然语言查询，可快速定位章程条款，提供版本对比和修订历史追溯功能。</p>
|
|
|
|
|
+ <div class="search-container">
|
|
|
|
|
+ <input type="text" class="search-input" placeholder="输入关键词查询章程内容，例如：会员权利、组织架构...">
|
|
|
|
|
+ <button class="search-btn"><i class="fas fa-search"></i> 智能检索</button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div style="background: #f9f9f9; padding: 15px; border-radius: 5px; margin-top: 15px; min-height: 100px;">
|
|
|
|
|
+ <p style="color: #666; text-align: center;">检索结果将显示在这里</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </section>
|
|
|
|
|
+
|
|
|
|
|
+ <section class="section">
|
|
|
|
|
+ <h2 class="section-title">3.2 学术体系</h2>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="subsection">
|
|
|
|
|
+ <h3 class="subsection-title"><i class="fas fa-calendar-alt"></i>学术活动 - AI日程管理</h3>
|
|
|
|
|
+ <p>智能日程管理系统自动同步学术活动安排，支持个性化提醒、参会人员统计和活动效果预测。</p>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 学术活动轮播图 -->
|
|
|
|
|
+ <div class="swiper">
|
|
|
|
|
+ <div class="swiper-wrapper">
|
|
|
|
|
+ <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');">
|
|
|
|
|
+ <div class="slide-content">
|
|
|
|
|
+ <h4 class="slide-title">2023年智慧旅游高峰论坛</h4>
|
|
|
|
|
+ <p>2023-11-15 | 北京国际会议中心</p>
|
|
|
|
|
+ <button class="btn" style="margin-top: 10px;">立即报名</button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <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');">
|
|
|
|
|
+ <div class="slide-content">
|
|
|
|
|
+ <h4 class="slide-title">文旅融合创新发展研讨会</h4>
|
|
|
|
|
+ <p>2023-12-05 | 上海浦东香格里拉酒店</p>
|
|
|
|
|
+ <button class="btn" style="margin-top: 10px;">立即报名</button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <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');">
|
|
|
|
|
+ <div class="slide-content">
|
|
|
|
|
+ <h4 class="slide-title">数字文旅技术应用培训</h4>
|
|
|
|
|
+ <p>2024-01-10 | 线上直播</p>
|
|
|
|
|
+ <button class="btn" style="margin-top: 10px;">立即报名</button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="swiper-pagination"></div>
|
|
|
|
|
+ <div class="swiper-button-next"></div>
|
|
|
|
|
+ <div class="swiper-button-prev"></div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="subsection">
|
|
|
|
|
+ <h3 class="subsection-title"><i class="fas fa-clipboard-list"></i>标准规范 - 智能检索+版本对比</h3>
|
|
|
|
|
+ <p>标准规范数据库支持智能检索、版本对比和差异分析，帮助用户快速了解规范更新内容。</p>
|
|
|
|
|
+ <div style="display: flex; gap: 15px; margin-top: 15px;">
|
|
|
|
|
+ <div style="flex: 1; background: #e3f2fd; padding: 15px; border-radius: 5px;">
|
|
|
|
|
+ <h4 style="margin-bottom: 10px; color: var(--primary-color);">旅游服务质量标准</h4>
|
|
|
|
|
+ <p style="font-size: 0.9rem; color: #666;">最新版本: v3.2 (2023-06发布)</p>
|
|
|
|
|
+ <button class="btn-outline" style="margin-top: 10px;">查看详情</button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div style="flex: 1; background: #e8f5e9; padding: 15px; border-radius: 5px;">
|
|
|
|
|
+ <h4 style="margin-bottom: 10px; color: var(--secondary-color);">智慧景区建设指南</h4>
|
|
|
|
|
+ <p style="font-size: 0.9rem; color: #666;">最新版本: v2.1 (2023-09发布)</p>
|
|
|
|
|
+ <button class="btn-outline" style="margin-top: 10px; border-color: var(--secondary-color); color: var(--secondary-color);">查看详情</button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="subsection">
|
|
|
|
|
+ <h3 class="subsection-title"><i class="fas fa-users"></i>课题研究 - 在线协作平台</h3>
|
|
|
|
|
+ <p>提供课题研究的全流程在线协作环境，支持文档协同编辑、任务分配、进度跟踪和智能报告生成。</p>
|
|
|
|
|
+ <div style="background: #f5f5f5; padding: 15px; border-radius: 5px; margin-top: 15px; display: flex; align-items: center; gap: 15px;">
|
|
|
|
|
+ <div style="font-size: 2rem; color: var(--primary-color);">
|
|
|
|
|
+ <i class="fas fa-laptop-code"></i>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div style="flex: 1;">
|
|
|
|
|
+ <h4 style="margin-bottom: 5px;">"AI+文旅"创新应用研究</h4>
|
|
|
|
|
+ <p style="font-size: 0.9rem; color: #666;">当前进度: 65% | 参与人员: 12人 | 最后更新: 2023-10-15</p>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <button class="btn">进入协作</button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </section>
|
|
|
|
|
+
|
|
|
|
|
+ <section class="section" id="courses">
|
|
|
|
|
+ <h2 class="section-title">3.3 人才培养</h2>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="subsection">
|
|
|
|
|
+ <h3 class="subsection-title"><i class="fas fa-trophy"></i>竞赛平台 - 旅游类竞赛申报</h3>
|
|
|
|
|
+ <p>一站式竞赛管理平台，支持在线申报、作品提交、专家评审和结果公示全流程数字化管理。</p>
|
|
|
|
|
+ <div style="background: #fff8e1; padding: 15px; border-radius: 5px; margin-top: 15px;">
|
|
|
|
|
+ <h4 style="margin-bottom: 10px; color: #ff8f00;">2023年全国旅游创新大赛</h4>
|
|
|
|
|
+ <p style="margin-bottom: 10px;">报名截止: 2023-11-30 | 决赛时间: 2024-01-15</p>
|
|
|
|
|
+ <div style="display: flex; gap: 10px;">
|
|
|
|
|
+ <button class="btn" style="background: #ff8f00;">立即报名</button>
|
|
|
|
|
+ <button class="btn-outline" style="border-color: #ff8f00; color: #ff8f00;">查看往届作品</button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="subsection">
|
|
|
|
|
+ <h3 class="subsection-title"><i class="fas fa-graduation-cap"></i>微专业中心 - AI+文旅课程</h3>
|
|
|
|
|
+ <p>结合AI技术的文旅专业课程体系，提供个性化学习路径推荐和智能学习辅助。</p>
|
|
|
|
|
+ <div style="display: flex; gap: 15px; margin-top: 15px; flex-wrap: wrap;">
|
|
|
|
|
+ <div style="flex: 1; min-width: 200px; background: white; border-radius: 5px; overflow: hidden; box-shadow: var(--shadow);">
|
|
|
|
|
+ <div style="height: 120px; background: linear-gradient(135deg, #ff9a9e, #fad0c4); display: flex; align-items: center; justify-content: center; color: white; font-size: 2rem;">
|
|
|
|
|
+ <i class="fas fa-robot"></i>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div style="padding: 15px;">
|
|
|
|
|
+ <h4 style="margin-bottom: 5px;">AI旅游推荐系统</h4>
|
|
|
|
|
+ <p style="font-size: 0.8rem; color: #666; margin-bottom: 10px;">8周课程 | 中级难度</p>
|
|
|
|
|
+ <button class="btn" style="width: 100%; padding: 5px;">开始学习</button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div style="flex: 1; min-width: 200px; background: white; border-radius: 5px; overflow: hidden; box-shadow: var(--shadow);">
|
|
|
|
|
+ <div style="height: 120px; background: linear-gradient(135deg, #a1c4fd, #c2e9fb); display: flex; align-items: center; justify-content: center; color: white; font-size: 2rem;">
|
|
|
|
|
+ <i class="fas fa-map-marked-alt"></i>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div style="padding: 15px;">
|
|
|
|
|
+ <h4 style="margin-bottom: 5px;">智慧景区规划</h4>
|
|
|
|
|
+ <p style="font-size: 0.8rem; color: #666; margin-bottom: 10px;">6周课程 | 初级难度</p>
|
|
|
|
|
+ <button class="btn" style="width: 100%; padding: 5px;">开始学习</button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div style="flex: 1; min-width: 200px; background: white; border-radius: 5px; overflow: hidden; box-shadow: var(--shadow);">
|
|
|
|
|
+ <div style="height: 120px; background: linear-gradient(135deg, #ffecd2, #fcb69f); display: flex; align-items: center; justify-content: center; color: white; font-size: 2rem;">
|
|
|
|
|
+ <i class="fas fa-chart-line"></i>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div style="padding: 15px;">
|
|
|
|
|
+ <h4 style="margin-bottom: 5px;">旅游大数据分析</h4>
|
|
|
|
|
+ <p style="font-size: 0.8rem; color: #666; margin-bottom: 10px;">10周课程 | 高级难度</p>
|
|
|
|
|
+ <button class="btn" style="width: 100%; padding: 5px;">开始学习</button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="subsection">
|
|
|
|
|
+ <h3 class="subsection-title"><i class="fas fa-database"></i>人才库 - 区块链履历认证</h3>
|
|
|
|
|
+ <p>基于区块链技术的人才履历认证系统，确保人才信息真实可信，支持智能匹配和推荐。</p>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="talent-card">
|
|
|
|
|
+ <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="人才" class="talent-avatar">
|
|
|
|
|
+ <div class="talent-info">
|
|
|
|
|
+ <div class="talent-name">翠花</div>
|
|
|
|
|
+ <div>旅游规划师 | 5年经验</div>
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <span class="talent-skill">景区规划</span>
|
|
|
|
|
+ <span class="talent-skill">GIS应用</span>
|
|
|
|
|
+ <span class="talent-skill">可持续发展</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="blockchain-badge">
|
|
|
|
|
+ <i class="fas fa-link"></i>区块链认证履历
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div class="talent-card">
|
|
|
|
|
+ <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="人才" class="talent-avatar">
|
|
|
|
|
+ <div class="talent-info">
|
|
|
|
|
+ <div class="talent-name">熊大</div>
|
|
|
|
|
+ <div>数字文旅工程师 | 3年经验</div>
|
|
|
|
|
+ <div>
|
|
|
|
|
+ <span class="talent-skill">VR/AR</span>
|
|
|
|
|
+ <span class="talent-skill">Unity开发</span>
|
|
|
|
|
+ <span class="talent-skill">交互设计</span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="blockchain-badge">
|
|
|
|
|
+ <i class="fas fa-link"></i>区块链认证履历
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <div style="text-align: center; margin-top: 15px;">
|
|
|
|
|
+ <button class="btn"><i class="fas fa-search"></i> 浏览更多人才</button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </section>
|
|
|
|
|
+
|
|
|
|
|
+ <footer style="text-align: center; padding: 30px 0; color: #666; font-size: 0.9rem;">
|
|
|
|
|
+ <p>© 2023 协会核心业务平台 - AI赋能智慧协会</p>
|
|
|
|
|
+ <p style="margin-top: 10px;">技术支持：江财天才团队 | 联系电话：400-123-4567</p>
|
|
|
|
|
+ </footer>
|
|
|
|
|
+ </div>
|
|
|
|
|
+
|
|
|
|
|
+ <script>
|
|
|
|
|
+ // 初始化知识图谱
|
|
|
|
|
+ document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
|
+ // 知识图谱
|
|
|
|
|
+ const graphChart = echarts.init(document.getElementById('knowledge-graph'));
|
|
|
|
|
+ const graphOption = {
|
|
|
|
|
+ title: {
|
|
|
|
|
+ text: '协会组织架构知识图谱',
|
|
|
|
|
+ subtext: '点击节点查看详细信息',
|
|
|
|
|
+ left: 'center'
|
|
|
|
|
+ },
|
|
|
|
|
+ tooltip: {},
|
|
|
|
|
+ legend: {
|
|
|
|
|
+ data: ['部门', '人员'],
|
|
|
|
|
+ orient: 'vertical',
|
|
|
|
|
+ right: 10
|
|
|
|
|
+ },
|
|
|
|
|
+ series: [{
|
|
|
|
|
+ name: '协会组织架构',
|
|
|
|
|
+ type: 'graph',
|
|
|
|
|
+ layout: 'force',
|
|
|
|
|
+ data: [
|
|
|
|
|
+ {id: '1', name: '理事会', category: 0, symbolSize: 50},
|
|
|
|
|
+ {id: '2', name: '秘书处', category: 0, symbolSize: 40},
|
|
|
|
|
+ {id: '3', name: '学术委员会', category: 0, symbolSize: 40},
|
|
|
|
|
+ {id: '4', name: '培训部', category: 0, symbolSize: 35},
|
|
|
|
|
+ {id: '5', name: '国际交流部', category: 0, symbolSize: 35},
|
|
|
|
|
+ {id: '6', name: '张明远', category: 1, symbolSize: 30},
|
|
|
|
|
+ {id: '7', name: '李静怡', category: 1, symbolSize: 25},
|
|
|
|
|
+ {id: '8', name: '王建国', category: 1, symbolSize: 25},
|
|
|
|
|
+ {id: '9', name: '赵雨晴', category: 1, symbolSize: 25},
|
|
|
|
|
+ {id: '10', name: '陈教授', category: 1, symbolSize: 20},
|
|
|
|
|
+ {id: '11', name: '刘主任', category: 1, symbolSize: 20}
|
|
|
|
|
+ ],
|
|
|
|
|
+ links: [
|
|
|
|
|
+ {source: '1', target: '2'},
|
|
|
|
|
+ {source: '1', target: '3'},
|
|
|
|
|
+ {source: '1', target: '4'},
|
|
|
|
|
+ {source: '1', target: '5'},
|
|
|
|
|
+ {source: '6', target: '1'},
|
|
|
|
|
+ {source: '7', target: '1'},
|
|
|
|
|
+ {source: '8', target: '2'},
|
|
|
|
|
+ {source: '9', target: '2'},
|
|
|
|
|
+ {source: '10', target: '3'},
|
|
|
|
|
+ {source: '11', target: '4'}
|
|
|
|
|
+ ],
|
|
|
|
|
+ categories: [
|
|
|
|
|
+ {name: '部门'},
|
|
|
|
|
+ {name: '人员'}
|
|
|
|
|
+ ],
|
|
|
|
|
+ roam: true,
|
|
|
|
|
+ label: {
|
|
|
|
|
+ show: true,
|
|
|
|
|
+ position: 'right'
|
|
|
|
|
+ },
|
|
|
|
|
+ force: {
|
|
|
|
|
+ repulsion: 100,
|
|
|
|
|
+ edgeLength: [50, 100]
|
|
|
|
|
+ },
|
|
|
|
|
+ emphasis: {
|
|
|
|
|
+ focus: 'adjacency',
|
|
|
|
|
+ label: {
|
|
|
|
|
+ show: true
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ lineStyle: {
|
|
|
|
|
+ width: 1,
|
|
|
|
|
+ curveness: 0.2
|
|
|
|
|
+ }
|
|
|
|
|
+ }],
|
|
|
|
|
+ color: ['#3498db', '#2ecc71']
|
|
|
|
|
+ };
|
|
|
|
|
+ graphChart.setOption(graphOption);
|
|
|
|
|
+
|
|
|
|
|
+ // 窗口大小变化时重新调整图表大小
|
|
|
|
|
+ window.addEventListener('resize', function() {
|
|
|
|
|
+ graphChart.resize();
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ // 初始化轮播图
|
|
|
|
|
+ const swiper = new Swiper('.swiper', {
|
|
|
|
|
+ loop: true,
|
|
|
|
|
+ autoplay: {
|
|
|
|
|
+ delay: 5000,
|
|
|
|
|
+ disableOnInteraction: false,
|
|
|
|
|
+ },
|
|
|
|
|
+ pagination: {
|
|
|
|
|
+ el: '.swiper-pagination',
|
|
|
|
|
+ clickable: true,
|
|
|
|
|
+ },
|
|
|
|
|
+ navigation: {
|
|
|
|
|
+ nextEl: '.swiper-button-next',
|
|
|
|
|
+ prevEl: '.swiper-button-prev',
|
|
|
|
|
+ },
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ // AR名片按钮点击效果
|
|
|
|
|
+ document.querySelectorAll('.ar-card-btn').forEach(btn => {
|
|
|
|
|
+ btn.addEventListener('click', function() {
|
|
|
|
|
+ const card = this.closest('.ar-card');
|
|
|
|
|
+ card.classList.add('animate__animated', 'animate__pulse');
|
|
|
|
|
+ setTimeout(() => {
|
|
|
|
|
+ card.classList.remove('animate__animated', 'animate__pulse');
|
|
|
|
|
+ }, 1000);
|
|
|
|
|
+
|
|
|
|
|
+ // 模拟AR效果
|
|
|
|
|
+ alert('请使用手机扫描二维码查看AR名片效果\n\n姓名: ' + card.querySelector('.ar-card-name').textContent + '\n职位: ' + card.querySelector('.ar-card-title').textContent);
|
|
|
|
|
+ });
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ // 搜索功能模拟
|
|
|
|
|
+ document.querySelectorAll('.search-btn').forEach(btn => {
|
|
|
|
|
+ btn.addEventListener('click', function() {
|
|
|
|
|
+ const input = this.previousElementSibling;
|
|
|
|
|
+ if(input.value.trim() === '') {
|
|
|
|
|
+ input.classList.add('animate__animated', 'animate__shakeX');
|
|
|
|
|
+ setTimeout(() => {
|
|
|
|
|
+ input.classList.remove('animate__animated', 'animate__shakeX');
|
|
|
|
|
+ }, 1000);
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
|
|
|
|
|
+ setTimeout(() => {
|
|
|
|
|
+ this.innerHTML = '<i class="fas fa-search"></i>';
|
|
|
|
|
+ alert('搜索关键词: ' + input.value + '\n\n模拟搜索功能，实际应用中会显示真实结果');
|
|
|
|
|
+ }, 1000);
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ });
|
|
|
|
|
+ });
|
|
|
|
|
+ </script>
|
|
|
|
|
+</body>
|
|
|
|
|
+</html>
|
