fit:way_bird_display

myapp/src/app/tab1/neighborhood/neighborhood.page.html

@@ -88,15 +88,6 @@
             alert('打开地区选择');
         });
         
-        // // 卡片点击事件
-        // document.querySelectorAll('.bird-card').forEach(card => {
-        //     card.addEventListener('click', function() {
-        //         const birdId = this.getAttribute('data-id');
-        //         const bird = birds.find(b => b.id === birdId);
-        //         if (bird) {
-        //             alert(`查看${bird.name}的详细信息\n保护等级: ${bird.conservationStatus || '无'}\n最佳观测时间: ${bird.observation.season}/${bird.observation.time}`);
-        //         }
-        //     });
-        // });
+       
     </script>
 </ion-content>

myapp/src/app/tab1/way/way.page.html

@@ -114,7 +114,7 @@
         <div class="birds-grid" *ngIf="getBirdsForRoute(route.id).length > 0">
             <div class="bird-item" *ngFor="let bird of getBirdsForRoute(route.id)">
             <div class="bird-avatar" 
-                [style.background-image]="'url(' + (bird.get('image') || 'assets/default-bird.png') + ')'">
+                [style.background-image]="'url(' + (bird.get('image') || 'assets/default-bird.png') + ')'" (click)="openBirdModal(bird)">
             </div>
             <div class="bird-name">
                 {{ bird.get('name') }}
@@ -144,4 +144,67 @@
     </div>
   </div>
 
+  <!-- 鸟类详情模态框 -->
+    <div class="bird-modal-overlay" *ngIf="showBirdModal" (click)="closeBirdModal()">
+    <div class="bird-modal-content" (click)="$event.stopPropagation()">
+        <ion-icon name="close" class="close-icon" (click)="closeBirdModal()"></ion-icon>
+        
+        <div class="bird-card-top">
+        <!-- 动态图片 -->
+        <img [src]="selectedBird.image" alt="鸟类照片" class="bird-modal-avatar">
+
+        <div class="bird-info">
+            <!-- 名称与学名 -->
+            <h2 class="bird-name">
+            {{ selectedBird.name }}
+            <span class="scientific-name">{{ selectedBird.scientificName }}</span>
+            <span *ngIf="selectedBird.conservationStatus" class="conservation-status">
+                {{ selectedBird.conservationStatus }}
+            </span>
+            </h2>
+
+            <!-- 分类信息 -->
+            <p class="bird-taxonomy" *ngIf="selectedBird.taxonomy">
+            {{ selectedBird.taxonomy.order }} > 
+            {{ selectedBird.taxonomy.family }} > 
+            {{ selectedBird.taxonomy.genus }}
+            </p>
+
+            <!-- 星级评分 -->
+            <div class="bird-rating">
+            <span *ngFor="let star of getStars(selectedBird.rating)" class="star">{{ star }}</span>
+            <span class="rating-text">{{ selectedBird.rating }}分</span>
+            </div>
+
+            <!-- 标签 -->
+            <div class="bird-tags" *ngIf="selectedBird.tags.length > 0">
+            <span *ngFor="let tag of selectedBird.tags" class="tag">{{ tag }}</span>
+            </div>
+        </div>
+        </div>
+
+        <!-- 描述 -->
+        <p class="bird-description">{{ selectedBird.description }}</p>
+
+        <!-- 特征 -->
+        <div class="bird-section" *ngIf="selectedBird.characteristics">
+        <h3>特征</h3>
+        <ul>
+            <li *ngIf="selectedBird.characteristics.size"><strong>体型:</strong> {{ selectedBird.characteristics.size }}</li>
+            <li *ngIf="selectedBird.characteristics.color"><strong>颜色:</strong> {{ selectedBird.characteristics.color }}</li>
+            <li *ngIf="selectedBird.characteristics.habitat"><strong>栖息地:</strong> {{ selectedBird.characteristics.habitat }}</li>
+        </ul>
+        </div>
+
+        <!-- 观察提示 -->
+        <div class="bird-section" *ngIf="selectedBird.observation">
+        <h3>观察提示</h3>
+        <ul>
+            <li *ngIf="selectedBird.observation.season"><strong>最佳季节:</strong> {{ selectedBird.observation.season }}</li>
+            <li *ngIf="selectedBird.observation.time"><strong>最佳时间:</strong> {{ selectedBird.observation.time }}</li>
+        </ul>
+        </div>
+    </div>
+    </div>
+
 </ion-content>

myapp/src/app/tab1/way/way.page.scss

@@ -401,4 +401,140 @@ textarea {
     background-color: #e65151;
   }
 }
+}
+/* 鸟类详情模态框样式 */
+.bird-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+  padding: 20px;
+}
+
+.bird-modal-content {
+  background: white;
+  border-radius: 12px;
+  padding: 20px;
+  width: 100%;
+  max-width: 500px;
+  max-height: 80vh;
+  overflow-y: auto;
+  position: relative;
+}
+
+.close-icon {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  font-size: 24px;
+  color: #666;
+  cursor: pointer;
+}
+
+.bird-modal-avatar {
+  width: 120px;
+  height: 120px;
+  border-radius: 12px;
+  object-fit: cover;
+  margin-right: 15px;
+}
+
+.bird-card-top {
+  display: flex;
+  margin-bottom: 15px;
+}
+
+.bird-info {
+  flex: 1;
+}
+
+.bird-name {
+  margin: 0 0 5px 0;
+  font-size: 1.4rem;
+  color: #333;
+}
+
+.scientific-name {
+  font-style: italic;
+  font-size: 0.9rem;
+  color: #666;
+  margin-left: 8px;
+}
+
+.conservation-status {
+  background: #ff6b6b;
+  color: white;
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-size: 0.7rem;
+  margin-left: 8px;
+  vertical-align: middle;
+}
+
+.bird-taxonomy {
+  margin: 0 0 10px 0;
+  color: #666;
+  font-size: 0.9rem;
+}
+
+.bird-rating {
+  margin: 10px 0;
+}
+
+.star {
+  color: #ffc107;
+  margin-right: 3px;
+}
+
+.rating-text {
+  margin-left: 5px;
+  color: #666;
+}
+
+.bird-tags {
+  margin: 10px 0;
+}
+
+.tag {
+  display: inline-block;
+  background: #e0f7fa;
+  color: #00838f;
+  padding: 3px 8px;
+  border-radius: 4px;
+  margin-right: 5px;
+  font-size: 0.8rem;
+}
+
+.bird-description {
+  color: #333;
+  line-height: 1.6;
+  margin-bottom: 15px;
+}
+
+.bird-section {
+  margin: 15px 0;
+  padding-top: 15px;
+  border-top: 1px solid #eee;
+}
+
+.bird-section h3 {
+  margin: 0 0 10px 0;
+  color: #333;
+  font-size: 1.1rem;
+}
+
+.bird-section ul {
+  margin: 0;
+  padding-left: 20px;
+}
+
+.bird-section li {
+  margin-bottom: 5px;
+  color: #555;
 }

myapp/src/app/tab1/way/way.page.ts

@@ -13,6 +13,8 @@ export class WayPage implements OnInit {
   birdTypes: CloudObject[] = [];
   isLoading: boolean = false;
   showCreateModal: boolean = false;
+  selectedBird: any = null; // 存储当前选中的鸟类信息
+  showBirdModal: boolean = false; // 控制鸟类详情模态框显示
   newRouteData: any = {
   title: '',
   description: '',
@@ -344,5 +346,27 @@ async handleUploadClick() {
       console.error('创建路线失败', error);
     }
 }
+ // 点击鸟类头像的方法
+  openBirdModal(bird: CloudObject) {
+    this.selectedBird = {
+      name: bird.get('name'),
+      scientificName: bird.get('scientificName'),
+      image: bird.get('image') || 'assets/default-bird.png',
+      description: bird.get('description'),
+      conservationStatus: bird.get('conservationStatus'),
+      tags: bird.get('tags') || [],
+      taxonomy: bird.get('taxonomy') || {},
+      rating: bird.get('rating') || 0,
+      characteristics: bird.get('characteristics') || {},
+      observation: bird.get('observation') || {}
+    };
+    this.showBirdModal = true;
+  }
+
+  // 关闭鸟类详情模态框
+  closeBirdModal() {
+    this.showBirdModal = false;
+    this.selectedBird = null;
+  }
   
 }