travel-wed/travel-web/src/modules/pc-home/pages/page-dynamic/page-dynamic.html

<!-- page-dynamic.component.html -->
<section class="banner-section">
  <div class="banner-bg"></div>
  <div class="banner-content">
    <h1 class="banner-title">会员服务智能化升级</h1>
    <p class="banner-subtitle">OCR智能注册 · VR风采展示 · 智能匹配对接 · 共创空间 · 荣誉奖励体系</p>
    <button class="ocr-btn" style="animation-delay: 0.5s;">立即体验会员服务</button>
  </div>
</section>

<!-- 会员门户 -->
<section class="member-portal">
  <div class="section-header">
    <h2 class="section-title">会员门户</h2>
    <p class="section-desc">智能化的会员服务体系，融合江西文化元素，提供便捷高效的会员服务体验</p>
  </div>
  
  <div class="services-container">
    <!-- 智能注册 -->
    <div class="service-card">
      <div class="service-header">
        <div class="service-icon">
          <i class="fas fa-id-card"></i>
        </div>
        <h3 class="service-title">智能注册</h3>
      </div>
      <div class="service-body">
        <div class="ocr-gate">
          <div class="gate-arch"></div>
          <div class="gate-pillar left"></div>
          <div class="gate-pillar right"></div>
          <div class="lantern left" [class.active]="activeLanterns"></div>
          <div class="lantern right" [class.active]="activeLanterns"></div>
          <div class="ocr-content">
            <p>上传证件照片进行OCR智能识别</p>
            <button class="ocr-btn" (click)="onOcrClick()" [disabled]="isProcessing">
              {{ isProcessing ? '识别中...' : 
                 isOcrSuccess === true ? '已认证' : 
                 isOcrSuccess === false ? '识别失败，重试' : 
                 '上传证件' }}
            </button>
          </div>
        </div>
        <p>采用南昌万寿宫牌坊造型设计，识别成功时灯笼亮起，失败时显示碎瓷动画效果</p>
      </div>
    </div>
    
    <!-- 会员风采部分 -->
<div class="service-card">
  <div class="service-header">
    <div class="service-icon">
      <i class="fas fa-vr-cardboard"></i>
    </div>
    <h3 class="service-title">会员风采</h3>
  </div>
  <div class="service-body">
    <!-- 搜索和筛选区域 -->
    <div class="achievement-filter">
      <input type="text" placeholder="搜索成就..." 
             [(ngModel)]="searchTerm" 
             (input)="filterAchievements()"
             class="search-input">
      
      <div class="category-filter">
        <button *ngFor="let category of achievementCategories" 
                [class.active]="selectedCategory === category"
                (click)="selectCategory(category)">
          {{category}}
        </button>
      </div>
    </div>
    
    <!-- 成就展示区 -->
    <div class="vr-showcase">
      <div class="drying-rack">
        <!-- 成就展示 -->
        @for (achievement of filteredAchievements; track achievement.id) {
        <div class="achievement-item floating" 
             [class.user-achievement]="isUserAchievement(achievement)">
          <div class="achievement-icon">
            <i class="fas fa-{{getAchievementIcon(achievement.get('category'))}}"></i>
          </div>
          <div class="achievement-content">
            <h4>{{achievement.get('title')}}</h4>
            <p>{{achievement.get('description') | truncate: 30}}</p>
            <div class="achievement-meta">
              <span class="user">
                <i class="fas fa-user"></i>
                {{getUserName(achievement.get('user'))}}
              </span>
              <span class="date">
                <i class="fas fa-calendar"></i>
                {{achievement.get('createdAt') | date: 'yyyy-MM-dd'}}
              </span>
            </div>
          </div>
          
          @if (isUserAchievement(achievement)) {
          <div class="achievement-actions">
            <button class="edit-btn" (click)="startEditAchievement(achievement)">
              <i class="fas fa-edit"></i>
            </button>
            <button class="delete-btn" (click)="deleteAchievement(achievement)">
              <i class="fas fa-trash"></i>
            </button>
          </div>
          }
        </div>
        }
        
        <!-- 添加按钮 -->
        <div class="achievement-item add-item floating" 
             (click)="isAddingAchievement = true">
          <i class="fas fa-plus-circle"></i>
          <span>添加成就</span>
        </div>
      </div>
    </div>
    
    <!-- 添加成就表单 -->
    @if (isAddingAchievement) {
    <div class="achievement-form">
      <h4><i class="fas fa-plus-circle"></i> 添加新成就</h4>
      <div class="form-group">
        <label><i class="fas fa-heading"></i> 标题</label>
        <input type="text" [(ngModel)]="newAchievement.title" placeholder="成就标题">
      </div>
      <div class="form-group">
        <label><i class="fas fa-align-left"></i> 描述</label>
        <textarea [(ngModel)]="newAchievement.description" 
                  placeholder="详细描述您的成就..."></textarea>
      </div>
      <div class="form-group">
        <label><i class="fas fa-tag"></i> 类别</label>
        <select [(ngModel)]="newAchievement.category">
          <option *ngFor="let cat of achievementCategories" [value]="cat">
            {{cat}}
          </option>
        </select>
      </div>
      <div class="form-group">
        <label><i class="fas fa-image"></i> 图片URL</label>
        <input type="text" [(ngModel)]="newAchievement.imageUrl" 
               placeholder="https://example.com/image.jpg">
      </div>
      <div class="form-actions">
        <button class="cancel-btn" (click)="isAddingAchievement = false">
          <i class="fas fa-times"></i> 取消
        </button>
        <button class="save-btn" (click)="addAchievement()">
          <i class="fas fa-save"></i> 保存成就
        </button>
      </div>
    </div>
    }
    
    <!-- 编辑成就表单 -->
    @if (isEditingAchievement && editingAchievement) {
    <div class="achievement-form">
      <h4><i class="fas fa-edit"></i> 编辑成就</h4>
      <div class="form-group">
        <label><i class="fas fa-heading"></i> 标题</label>
        <input type="text" 
          [(ngModel)]="editingAchievement.data['title']">
      </div>
      <div class="form-group">
        <label><i class="fas fa-align-left"></i> 描述</label>
        <textarea 
          [(ngModel)]="editingAchievement.data['description']"></textarea>
      </div>
      <div class="form-group">
        <label><i class="fas fa-tag"></i> 类别</label>
        <select [(ngModel)]="editingAchievement.data['category']">
          <option *ngFor="let cat of achievementCategories" [value]="cat">
            {{cat}}
          </option>
        </select>
      </div>
      <div class="form-group">
        <label><i class="fas fa-image"></i> 图片URL</label>
        <input type="text" 
          [(ngModel)]="editingAchievement.data['imageUrl']">
      </div>
      <div class="form-actions">
        <button class="cancel-btn" (click)="isEditingAchievement = false">
          <i class="fas fa-times"></i> 取消
        </button>
        <button class="save-btn" (click)="updateAchievement()">
          <i class="fas fa-save"></i> 更新成就
        </button>
      </div>
    </div>
    }
  </div>
</div>
    
    <!-- 单位对接 -->
    <div class="service-card">
      <div class="service-header">
        <div class="service-icon">
          <i class="fas fa-handshake"></i>
        </div>
        <h3 class="service-title">单位对接</h3>
      </div>
      <div class="service-body">
        <div class="migration-map">
          <div class="crane" style="top: 20%; left: 20%;">
            <i class="fas fa-dove"></i>
          </div>
          <div class="crane" style="top: 30%; left: 40%;">
            <i class="fas fa-dove"></i>
          </div>
          <div class="crane" style="top: 25%; left: 60%;">
            <i class="fas fa-dove"></i>
          </div>
          <div class="crane" style="top: 40%; left: 30%;">
            <i class="fas fa-dove"></i>
          </div>
          <div class="crane main-crane" style="top: 50%; left: 50%;">
            <i class="fas fa-dove"></i>
          </div>
          <div class="crane" style="top: 45%; left: 70%;">
            <i class="fas fa-dove"></i>
          </div>
          <div class="crane" style="top: 60%; left: 20%;">
            <i class="fas fa-dove"></i>
          </div>
          <div class="crane" style="top: 70%; left: 40%;">
            <i class="fas fa-dove"></i>
          </div>
          <div class="crane" style="top: 65%; left: 60%;">
            <i class="fas fa-dove"></i>
          </div>
        </div>
        <p>采用候鸟迁徙路线图概念，匹配度高的单位以白鹤群聚呈现，生成青花瓷开片纹关系图谱</p>
      </div>
    </div>
  </div>
</section>

<!-- 共创空间 -->
<section class="creative-space">
  <div class="section-header">
    <h2 class="section-title">共创空间</h2>
    <p class="section-desc">创新协作平台，融合江西传统文化元素，打造高效共创环境</p>
  </div>
  
  <div class="space-grid">
    <!-- 项目众包 -->
    <div class="space-card">
      <div class="space-header">
        <i class="fas fa-tasks space-icon"></i>
        <h3 class="space-title">项目众包</h3>
      </div>
      <div class="space-body">
        <p>以景德镇陶市为原型设计任务大厅，各类任务以陶瓷器皿形式展示</p>
        
        <div class="ceramic-items">
          <div class="ceramic-item vase">
            <i class="fas fa-book" style="font-size: 2rem; color: var(--primary-blue);"></i>
            <span style="margin-top: 10px;">传记任务</span>
          </div>
          <div class="ceramic-item bowl">
            <i class="fas fa-paint-brush" style="font-size: 2rem; color: var(--primary-blue);"></i>
            <span style="margin-top: 10px;">IP设计</span>
          </div>
        </div>
        
        <p>接单成功时触发"陶轮旋转"动画效果，增强交互体验</p>
        
        <button class="ocr-btn" style="width: 100%; margin-top: 1.5rem; background: var(--mountain-green);">
          查看项目任务
        </button>
      </div>
    </div>
    
    <!-- 资源交易所 -->
    <div class="space-card">
      <div class="space-header">
        <i class="fas fa-exchange-alt space-icon"></i>
        <h3 class="space-title">资源交易所</h3>
      </div>
      <div class="space-body">
        <p>数据确权证书采用萍乡春锣造型设计，体现江西特色</p>
        
        <div style="width: 100%; height: 150px; background: url('https://images.unsplash.com/photo-1518895944437-3fefb0f6c0e9?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80') center/cover; border-radius: 10px; margin: 1.5rem 0; position: relative;">
          <div style="position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); background: rgba(255,255,255,0.8); padding: 0.5rem 1rem; border-radius: 20px; font-weight: bold; color: var(--primary-blue);">
            文化数据确权证书
          </div>
        </div>
        
        <p>交易过程可视化"樟树药材炮制"步骤，清晰展示交易流程</p>
      </div>
    </div>
    
    <!-- 协同创作 -->
    <div class="space-card">
      <div class="space-header">
        <i class="fas fa-users space-icon"></i>
        <h3 class="space-title">协同创作</h3>
      </div>
      <div class="space-body">
        <p>编辑工具面板设计为江西木雕工具箱样式，体现传统工艺与现代技术的结合</p>
        
        <div style="display: flex; justify-content: space-around; margin: 1.5rem 0;">
          <div style="text-align: center;">
            <div style="width: 60px; height: 60px; background: #f8f6f0; border: 2px solid var(--gold-yellow); border-radius: 50%; display: flex; justify-content: center; align-items: center; margin: 0 auto;">
              <i class="fas fa-user" style="color: var(--ceramic-red); font-size: 1.5rem;"></i>
            </div>
            <span style="display: block; margin-top: 10px;">编辑者A</span>
          </div>
          <div style="text-align: center;">
            <div style="width: 60px; height: 60px; background: #f8f6f0; border: 2px solid var(--gold-yellow); border-radius: 50%; display: flex; justify-content: center; align-items: center; margin: 0 auto;">
              <i class="fas fa-user" style="color: var(--primary-blue); font-size: 1.5rem;"></i>
            </div>
            <span style="display: block; margin-top: 10px;">编辑者B</span>
          </div>
          <div style="text-align: center;">
            <div style="width: 60px; height: 60px; background: #f8f6f0; border: 2px solid var(--gold-yellow); border-radius: 50%; display: flex; justify-content: center; align-items: center; margin: 0 auto;">
              <i class="fas fa-user" style="color: var(--mountain-green); font-size: 1.5rem;"></i>
            </div>
            <span style="display: block; margin-top: 10px;">编辑者C</span>
          </div>
        </div>
        
        <p>多人协作时显示不同赣傩面具光标，增强协作体验识别度</p>
      </div>
    </div>
  </div>
</section>

<!-- 奖励体系 -->
<section class="reward-system">
  <div class="section-header">
    <h2 class="section-title">奖励体系</h2>
    <p class="section-desc">创新奖励机制，激发会员创作热情，展示优秀成果</p>
  </div>
  
  <div class="terrace-form">
    <h3 style="color: var(--primary-blue); margin-bottom: 1.5rem; text-align: center;">奖项申报系统</h3>
    
    <div class="form-group">
      <label class="form-label">奖项名称</label>
      <input type="text" class="form-input" placeholder="请输入奖项名称" [(ngModel)]="formData.awardName">
      <div class="ripple"></div>
    </div>
    
    <div class="form-group">
      <label class="form-label">申报单位/个人</label>
      <input type="text" class="form-input" placeholder="请输入申报单位或个人名称" [(ngModel)]="formData.applicant">
      <div class="ripple"></div>
    </div>
    
    <div class="form-group">
      <label class="form-label">项目描述</label>
      <textarea class="form-input" rows="3" placeholder="请描述申报项目内容" [(ngModel)]="formData.description"></textarea>
      <div class="ripple"></div>
    </div>
    
    <div class="form-group">
      <label class="form-label">上传证明材料</label>
      <input type="file" class="form-input" (change)="onFileSelected($event)">
      <div class="ripple"></div>
    </div>
    
    <button class="ocr-btn" style="width: 100%; background: var(--gold-yellow); color: var(--dark-charcoal);" 
            (click)="submitForm()">
      提交申报
    </button>
    
    <p style="text-align: center; margin-top: 1rem; color: #666;">AI辅助输入时推荐内容带"赣江涟漪"动效，提升用户体验</p>
  </div>
  
  <div class="section-header" style="padding-top: 3rem;">
   <!-- 三维荣誉墙 -->
<div class="section-header" style="padding-top: 3rem;">
  <h3 class="section-title">三维荣誉墙</h3>
</div>

<!-- 筛选表单 -->
<!-- 三维荣誉墙筛选部分修改 -->
<div class="terrace-form" style="margin-bottom: 2rem; background: linear-gradient(135deg, #f8f9fa 0%, #e6f7ff 100%);">
  <div style="display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center;">
    <div style="flex: 1; min-width: 200px;">
      <h4 style="color: var(--primary-blue); margin-bottom: 0.5rem;">筛选条件</h4>
      <div style="display: flex; gap: 1rem; flex-wrap: wrap;">
        <!-- 年份下拉框 -->
        <div class="form-group" style="flex: 1; min-width: 150px; margin-bottom: 0;">
          <label>年份</label>
          <select [(ngModel)]="filter.year" (change)="filterAwards()" class="form-input">
            <option [value]="null">全部年份</option>
            @for (year of years; track year) {
              <option [value]="year">{{year}}</option>
            }
          </select>
        </div>
        
        <!-- 类别下拉框 -->
        <div class="form-group" style="flex: 1; min-width: 150px; margin-bottom: 0;">
          <label>奖项类别</label>
          <select [(ngModel)]="filter.categoryId" (change)="filterAwards()" class="form-input">
            <option [value]="null">全部类别</option>
            @for (category of awardCategories; track category.id) {
              <option [value]="category.id">{{category.get('name')}}</option>
            }
          </select>
        </div>
      </div>
    </div>
    
    <div style="display: flex; align-items: flex-end;">
      <button class="ocr-btn" 
              style="background: var(--gold-yellow); color: var(--dark-charcoal);"
              (click)="filter.year = null; filter.categoryId = null; filterAwards()">
        <i class="fas fa-sync-alt"></i> 重置筛选
      </button>
    </div>
  </div>
</div>

<!-- 荣誉墙展示 -->
<div class="pavilion-honor">
  <div class="pavilion-model">
    <!-- 动态生成荣誉项 -->
    @for (award of awardRecords; track award.id; let i = $index) {
      <div class="honor-item" 
           [style]="getHonorPosition(i)"
           [class.floating]="i % 2 === 0"
           [class.gold]="award.get('level') === '金奖'"
           [class.silver]="award.get('level') === '银奖'"
           [class.bronze]="award.get('level') === '铜奖'"
           (click)="viewAwardDetail(award)">
        <div class="award-name">{{award.get('awardName') | truncate: 6}}</div>
        <div class="award-year">{{award.get('year')}}</div>
        <div class="award-category">{{getCategoryName(award.get('categoryId')) | truncate: 4}}</div>
      </div>
    }
    
    <!-- 当没有奖项时显示提示 -->
    @if (awardRecords.length === 0) {
      <div class="no-awards">
        <i class="fas fa-trophy" style="font-size: 3rem; margin-bottom: 1rem;"></i>
        <h3>暂无获奖记录</h3>
        <p>请尝试其他筛选条件</p>
      </div>
    }
  </div>
</div>

<!-- 奖项详情模态框 -->
@if (showAwardDetail && selectedAward) {
<div class="modal-backdrop" (click)="showAwardDetail = false">
  <div class="modal-content" (click)="$event.stopPropagation()">
    <button class="modal-close" (click)="showAwardDetail = false">
      <i class="fas fa-times"></i>
    </button>
    
    <div class="award-header">
      <div class="award-icon" [class.gold]="selectedAward.get('level') === '金奖'"
           [class.silver]="selectedAward.get('level') === '银奖'"
           [class.bronze]="selectedAward.get('level') === '铜奖'">
        <i class="fas fa-trophy"></i>
      </div>
      <h3>{{selectedAward.get('awardName')}}</h3>
      <div class="award-subtitle">
        {{selectedAward.get('year')}} · {{getCategoryName(selectedAward.get('categoryId'))}}
      </div>
    </div>
    
    <div class="award-details">
      <div class="detail-row">
        <div class="detail-item">
          <i class="fas fa-medal"></i>
          <div>
            <strong>奖项等级</strong>
            <p>{{selectedAward.get('level')}}</p>
          </div>
        </div>
        
        <div class="detail-item">
          <i class="fas fa-building"></i>
          <div>
            <strong>颁奖机构</strong>
            <p>{{selectedAward.get('issuer')}}</p>
          </div>
        </div>
      </div>
      
      <div class="detail-item full-width">
        <i class="fas fa-file-alt"></i>
        <div>
          <strong>奖项描述</strong>
          <p>{{selectedAward.get('description')}}</p>
        </div>
      </div>
      
      <div class="detail-item full-width">
        <i class="fas fa-users"></i>
        <div>
          <strong>获奖者</strong>
          <div class="winners-list">
            @for (winner of getWinners(selectedAward); track $index) {
              <div class="winner-item">
                <i class="fas" [class.fa-user]="winner.type === '个人'" [class.fa-users]="winner.type === '团队'"></i>
                {{winner.name}}
                <span class="winner-type">{{winner.type}}</span>
              </div>
            }
          </div>
        </div>
      </div>
    </div>
    
    <div class="modal-footer">
      <button class="ocr-btn" style="background: var(--gold-yellow); color: var(--dark-charcoal);">
        <i class="fas fa-share-alt"></i> 分享荣誉
      </button>
    </div>
  </div>
</div>
}

<!-- 页脚 -->
<footer class="footer">
  <div class="footer-content">
    <div class="footer-column">
      <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-column">
      <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-column">
      <h3>联系我们</h3>
      <ul>
        <li><i class="fas fa-map-marker-alt"></i> 江西省南昌市红谷滩区</li>
        <li><i class="fas fa-phone"></i> 0791-12345678</li>
        <li><i class="fas fa-envelope"></i> contact&#64;jxculture.cn</li>
        <li><i class="fab fa-weixin"></i> 江西数字文化</li>
      </ul>
    </div>
    <div class="footer-column">
      <h3>关注我们</h3>
      <div style="display: flex; gap: 1rem; margin-top: 1rem;">
        <div style="width: 100px; height: 100px; background: #555; display: flex; justify-content: center; align-items: center; color: #aaa;">
          微信公众号
        </div>
        <div style="width: 100px; height: 100px; background: #555; display: flex; justify-content: center; align-items: center; color: #aaa;">
          微博
        </div>
      </div>
    </div>
  </div>
  <div class="copyright">
    © 2023 江西数字文化发展协会 版权所有 | 赣ICP备12345678号
  </div>
</footer>