update

app-angular/src/modules/lesson/comp-lesson-card/comp-lesson-card.component.html

@@ -1,7 +1,23 @@
-<div class="lesson-card">
-    <h1>{{name}}</h1>
-    <h2>{{author}}</h2>
-    <h1>{{lesson?.name}}</h1>
-    <h2>{{lesson?.author}}</h2>
-    <h2>{{lesson?.like | tok}}</h2>
+<div class="lesson-card" >
+  <!--
+  <h1>{{name}}</h1>
+  <h2>{{author}}</h2>
+  <h1>{{lesson?.name}}</h1>
+  <h2>{{lesson?.author}}</h2>
+  <h2>{{lesson?.like}}</h2>
+  -->
+  <ion-card>
+      <img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/card-media.png" />
+      <ion-card-header>
+        <ion-card-title>{{title1}}</ion-card-title>
+        <ion-card-subtitle>{{author}}</ion-card-subtitle>
+      </ion-card-header>
+    
+      <ion-card-content>
+        {{somedetails}}
+      </ion-card-content>
+    </ion-card>
+
+
+
 </div>

app-angular/src/modules/lesson/comp-lesson-card/comp-lesson-card.component.scss

@@ -1,9 +1,11 @@
 .lesson-card{
     min-height: 80px;
     width: 80%;
-    border: solid 1px;
-    border-color: black;
     margin-bottom: 10px;
     padding: 15px;
     text-align: center;
-}
+    ion-card{
+    border: solid 1px;
+    border-color: black;
+    }
+}

app-angular/src/modules/lesson/comp-lesson-card/comp-lesson-card.component.ts

@@ -9,4 +9,6 @@ export class CompLessonCardComponent {
   @Input() name:string = "未命名"
   @Input() author:string = "未命名"
   @Input() lesson:any = {}
+  @Input() somedetails:string = "未知"
+  @Input() title1:string = "未知"
 }

app-angular/src/modules/lesson/home/home.component.html

@@ -1,52 +1,62 @@
-<div class="page-content">
-  <div class="search-area">
-    <div class="left-component">
-      <select [(ngModel)]="selectedOption">
-        <option value="frontend">大前端</option>
-        <option value="backend">后端开发</option>
-        <option value="mobile">移动开发</option>
-      </select>
-    </div>
-    <div class="right-component">
-      <input type="text" placeholder="搜索课程/技术">
-    </div>
-  </div>
-  <div class="quick-links">
+<ion-content>
+  
+
+
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>RideQuest</ion-card-title>
+      <ion-card-subtitle>踏上新的地平线。</ion-card-subtitle>
+    </ion-card-header>
+    <ion-searchbar show-clear-button="focus" placeholder="发现更多路线"></ion-searchbar>
     <h1>{{lessonName}}</h1>
+    <ion-card-content>
+      <ion-list>
+        <ng-container *ngFor="let lesson of lessonList;let i = index">
+          <ion-item (click)="goDetail(lesson)">
+            <ion-thumbnail slot="start">
+              <img  alt="Silhouette of mountains" [src]="lesson?.logo || 'https://ionicframework.com/docs/img/demos/thumbnail.svg'"  />
+            </ion-thumbnail>
+            <ion-label >热榜本地路线{{i+1}}：{{lesson.title1}} 点赞：{{toK(lesson.like)}}
+              点赞：{{lesson.like | tok}}</ion-label>
+          </ion-item>
+        </ng-container>
+      </ion-list>
+    </ion-card-content>
+  </ion-card>
 
-    <!-- 指令：*ngFor循环指令 *ngIf条件指令 ng-container虚拟DOM容器 -->
-    <ul style="font-size: 36px;">
+<div class="page-content">
+
+   
+    <div class="quick-links">
+      
+
+
+      
+
+      <!-- 组件：通过selector标签引用组件，并通过@Input传参，用[]传递变量 -->
       <ng-container *ngFor="let lesson of lessonList;let i = index">
-        <li *ngIf="lesson.isEnabled" (click)="goDetail(lesson)">
-            课程{{i+1}}：{{lesson.name}}
-            点赞：{{toK(lesson.like)}}
-            点赞：{{lesson.like | tok}}
-        </li>
+        <app-comp-lesson-card [title1]="lesson.title1" [author]="lesson.author" [somedetails] = "lesson.somedetails" [lesson]="lesson" 
+        *ngIf="lesson.isEnabled" (click)="goDetail(lesson)"></app-comp-lesson-card>
       </ng-container>
-    </ul>
-
-    <!-- 组件：通过selector标签引用组件，并通过@Input传参，用[]传递变量 -->
-    <ng-container *ngFor="let lesson of lessonList;let i = index">
-      <app-comp-lesson-card [name]="lesson.name" [author]="lesson.author" [lesson]="lesson"
-      *ngIf="lesson.isEnabled" (click)="goDetail(lesson)"></app-comp-lesson-card>
-    </ng-container>
-
-    <!-- 组件：通过selector标签引用组件，并通过@Input传参 -->
-    <app-comp-lesson-card [name]="title"></app-comp-lesson-card>
-    <app-comp-lesson-card [name]="'title123'"></app-comp-lesson-card>
-    <app-comp-lesson-card name="666"></app-comp-lesson-card>
-    <app-comp-lesson-card name="{{title}}"></app-comp-lesson-card>
-    <app-comp-lesson-card></app-comp-lesson-card>
-    <app-comp-lesson-card></app-comp-lesson-card>
-    <app-comp-lesson-card></app-comp-lesson-card>
-    <!-- 添加更多的行 -->
-  </div>
-  <div class="course-area">
-    <div class="filter-tags">
-      <!-- 添加筛选标签 -->
+
+      <!-- 组件：通过selector标签引用组件，并通过@Input传参 -->
+      <app-comp-lesson-card [name]="title"></app-comp-lesson-card>
+      <app-comp-lesson-card [name]="'title123'"></app-comp-lesson-card>
+      <app-comp-lesson-card name="666"></app-comp-lesson-card>
+      <app-comp-lesson-card somedetails = "我是精髓"></app-comp-lesson-card>
+      <app-comp-lesson-card></app-comp-lesson-card>
+      <app-comp-lesson-card></app-comp-lesson-card>
+      <app-comp-lesson-card></app-comp-lesson-card>
+      <!-- 添加更多的行 -->
     </div>
-    <div class="course-list">
-      <!-- 添加课程列表 -->
+    <div class="course-area">
+      <div class="filter-tags">
+        <!-- 添加筛选标签 -->
+      </div>
+      <div class="course-list">
+        <!-- 添加课程列表 -->
+      </div>
     </div>
   </div>
-</div>
+  
+</ion-content>

app-angular/src/modules/lesson/home/home.component.ts

@@ -11,14 +11,15 @@ export class HomeComponent {
   title = "临时tittle"
   constructor(private router:Router){}
   // 添加其他需要的逻辑和属性
-  lessonName = "Web3.0未来全栈工程师"
+  lessonName = "Popular routes"
   lessonList = [
-    {name:"大前端",like:12366,author:"未来全栈", desc:`课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍`,isEnabled:true},
-    {name:"微服务",like:25665,author:"未来全栈", desc:`课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍`,isEnabled:true},
-    {name:"数据库",like:25665,author:"未来全栈", desc:`课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍`,isEnabled:false},
-    {name:"人工智能",like:1356999,author:"未来全栈", desc:`课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍`,isEnabled:true},
-    {name:"区块链",like:1356999,author:"未来全栈", desc:`课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍`,isEnabled:false},
-    {name:"DevOps",like:3944999,author:"未来全栈", desc:`课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍`,isEnabled:false},
+    {title1:"what a good day",name:"大前端",logo:"https://angular.cn/assets/images/logos/angular/angular.svg",like:12366,author:"ggg", somedetails:"阳光真不好，不走走",desc:`课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍`,isEnabled:true},
+    {title1:"what a bad day",name:"微服务",like:25665,author:"aaa",somedetails:"阳光真不好，不走走", desc:`课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍`,isEnabled:true},
+    {title1:"what a sad day",name:"数据库",like:25665,author:"bbb", somedetails:"阳光真好，出去骑行",desc:`课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍`,isEnabled:true},
+    {title1:"what a great day",name:"人工智能",like:1356999,author:"ccc", somedetails:"阳光真好，出去玩",desc:`课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍`,isEnabled:true},
+    {title1:"what a wonderful day",name:"区块链",like:1356999,author:"ddd",somedetails:"阳光真好，出去跑跑", desc:`课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍`,isEnabled:true},
+    {title1:"lovely",name:"DevOps",like:3944999,author:"lty",somedetails:"阳光真好，呆家里", desc:`课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍课程介绍`,isEnabled:true},
+    {title1:"fine",name:"DevOps",like:3944999,author:"gda", desc:`骑行`,somedetails:"阳光真好，出去走走",isEnabled:false},
   ]
 
   // 路由传参：通过Router服务，携带查询参数，跳转至课程详情页

app-angular/src/modules/lesson/lesson-routing.module.ts

@@ -5,7 +5,7 @@ import { HomeComponent } from './home/home.component';
 import { PageMineComponent } from './page-mine/page-mine.component';
 import { PageStudentComponent } from './page-student/page-student.component';
 import { PageStudentDetailComponent } from './page-student-detail/page-student-detail.component';
-import { ShopComponent } from './shop/shop.component';
+
 import { FindComponent } from './find/find.component';
 const routes: Routes = [
   {
@@ -24,10 +24,6 @@ const routes: Routes = [
     path:"student/detail",component:PageStudentDetailComponent
   }
   ,
-  {
-    path:"shop",component:ShopComponent
-  }
-  ,
   {
     path:"find",component:FindComponent
   }

app-angular/src/modules/lesson/lesson.module.ts

@@ -11,7 +11,7 @@ import { CompNavButtonComponent } from './comp-nav-button/comp-nav-button.compon
 import { PageStudentComponent } from './page-student/page-student.component';
 import { PageStudentDetailComponent } from './page-student-detail/page-student-detail.component';
 import { TokPipe } from './tok.pipe';
-import { ShopComponent } from './shop/shop.component';
+
 import { FindComponent } from './find/find.component';
 import { IonicModule } from '@ionic/angular';
 
@@ -26,7 +26,7 @@ import { IonicModule } from '@ionic/angular';
     PageStudentComponent,
     PageStudentDetailComponent,
     TokPipe,
-    ShopComponent,
+    
     FindComponent
   ],
   imports: [

app-angular/src/modules/lesson/shop/shop.component.html

@@ -1,2 +0,0 @@
-<p>shop works!</p>
-<h1>hello</h1>

app-angular/src/modules/lesson/shop/shop.component.spec.ts

@@ -1,21 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ShopComponent } from './shop.component';
-
-describe('ShopComponent', () => {
-  let component: ShopComponent;
-  let fixture: ComponentFixture<ShopComponent>;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [ShopComponent]
-    });
-    fixture = TestBed.createComponent(ShopComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

app-angular/src/modules/lesson/shop/shop.component.ts

@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-shop',
-  templateUrl: './shop.component.html',
-  styleUrls: ['./shop.component.scss']
-})
-export class ShopComponent {
-
-}