<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;700&display=swap"
  rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">

<!-- 水墨装饰元素 -->
<div class="ink-mountain no-flash"></div>
<div class="ink-water no-flash"></div>

<div class="container">
  <div class="main-content">
    <!-- 侧边导航 -->
    <aside class="sidebar no-flash">
      <h2 class="sidebar-title">数智共创平台</h2>
      <ul class="module-nav">
        <li>
          <a href="#" class="active"><i class="fas fa-database"></i> 文化资源库</a>
          <ul class="sub-nav">
            <li><a href="#"><i class="fas fa-microphone-alt"></i> 多模态采集中心</a></li>
            <li><a href="#"><i class="fas fa-sitemap"></i> 分类知识图谱</a></li>
          </ul>
        </li>
        <li>
          <a href="#"><i class="fas fa-brain"></i> 智慧应用中心</a>
          <ul class="sub-nav">
            <li><a href="#"><i class="fas fa-paint-brush"></i> 数字文创工坊</a></li>
            <li><a href="#"><i class="fas fa-map-marked-alt"></i> 智慧文旅系统</a></li>
            <li><a href="#"><i class="fas fa-egg"></i> IP孵化平台</a></li>
          </ul>
        </li>
        <li>
          <a href="#"><i class="fas fa-users"></i> 共创社区</a>
          <ul class="sub-nav">
            <li><a href="#"><i class="fas fa-graduation-cap"></i> 高校联盟</a></li>
            <li><a href="#"><i class="fas fa-landmark"></i> 政府协作</a></li>
            <li><a href="#"><i class="fas fa-edit"></i> 全民创作</a></li>
          </ul>
        </li>
      </ul>
    </aside>

    <!-- 主内容区 -->
    <main class="content-area no-flash">
      <div class="content-header">
        <h1 class="content-title">
          <i class="fas fa-database content-title-icon"></i>
          文化资源库
        </h1>
        <div class="stats-container">
          <div *ngFor="let stat of stats" class="stat-card">
            <h3>{{stat.title}}</h3>
            <p>{{stat.value}}</p>
          </div>
        </div>
      </div>

      <!-- 轮播图 -->
      <div class="swiper-container no-flash">
        <div class="swiper-wrapper">
          <div *ngFor="let slide of slides" class="swiper-slide" [style.background-image]="'url(' + slide.image + ')'">
            <div class="slide-content">
              <h3 class="slide-title">{{slide.title}}</h3>
              <p>{{slide.description}}</p>
            </div>
          </div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>

      <!-- 功能模块网格 -->
      <div class="module-grid">
        <!-- 循环模块卡片 -->
        <div *ngFor="let module of modules" class="module-card no-flash">
          <div class="card-header" [style.background]="module.bgColor">
            <i [class]="module.icon + ' card-icon'"></i>
            <h3 class="card-title">{{module.title}}</h3>
            <p class="card-subtitle">{{module.subtitle}}</p>
          </div>
          <div class="card-body">
            <ul class="card-features">
              <li *ngFor="let feature of module.features">
                <i [class]="feature.icon"></i> {{feature.text}}
              </li>
            </ul>
            <div class="card-actions">
              <button class="btn btn-primary" [style.background]="module.bgColor">
                <i [class]="module.btnPrimary.icon"></i> {{module.btnPrimary.text}}
              </button>
              <button class="btn btn-outline" [style.border-color]="module.bgColor" [style.color]="module.bgColor">
                <i [class]="module.btnOutline.icon"></i> {{module.btnOutline.text}}
              </button>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</div>

<footer class="no-flash">
  <div class="footer-content">
    <div class="footer-section">
      <h3>平台导航</h3>
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">数智共创平台</a></li>
        <li><a href="#">文化地图</a></li>
        <li><a href="#">文创商城</a></li>
        <li><a href="#">活动日历</a></li>
      </ul>
    </div>
    <div class="footer-section">
      <h3>合作伙伴</h3>
      <ul>
        <li><a href="#">江西省文化和旅游厅</a></li>
        <li><a href="#">南昌水利水电大学</a></li>
        <li><a href="#">江西师范大学</a></li>
        <li><a href="#">景德镇陶瓷大学</a></li>
        <li><a href="#">语伴科技</a></li>
      </ul>
    </div>
    <div class="footer-section">
      <h3>联系我们</h3>
      <ul>
        <li><i class="fas fa-map-marker-alt"></i> 江西省南昌市红谷滩区</li>
        <li><i class="fas fa-phone"></i> 0791-88888888</li>
        <li><i class="fas fa-envelope"></i> contact&#64;ganpowl.com</li>
        <li><i class="fas fa-weixin"></i> 赣鄱文链官方公众号</li>
      </ul>
    </div>
  </div>
  <div class="copyright">
    &copy; 2023 赣鄱文链数字文旅平台 - 传承江西文化，智创文旅未来
  </div>
</footer>

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>