|
@@ -13,87 +13,73 @@
|
|
|
<ion-card class="navbar">
|
|
|
<ion-toolbar>
|
|
|
<ion-segment value="推荐">
|
|
|
- <ion-segment-button value="推荐" (click)="cate='推荐'">
|
|
|
- <ion-label>推荐</ion-label>
|
|
|
- </ion-segment-button>
|
|
|
- <ion-segment-button value="关注" (click)="cate='关注'">
|
|
|
- <ion-label>关注</ion-label>
|
|
|
- </ion-segment-button>
|
|
|
- <!-- <ion-segment-button value="科普" (click)="cate='科普'">
|
|
|
- <ion-label>科普</ion-label>
|
|
|
- </ion-segment-button> -->
|
|
|
+ <ion-segment-button value="推荐" (click)="cate='推荐'">
|
|
|
+ <ion-label>推荐</ion-label>
|
|
|
+ </ion-segment-button>
|
|
|
+ <ion-segment-button value="关注" (click)="cate='关注'">
|
|
|
+ <ion-label>关注</ion-label>
|
|
|
+ </ion-segment-button>
|
|
|
</ion-segment>
|
|
|
</ion-toolbar>
|
|
|
</ion-card>
|
|
|
-
|
|
|
- <!-- 推荐 -->
|
|
|
- <ng-container *ngIf="cate=='推荐'">
|
|
|
- <ion-grid>
|
|
|
- <ion-row>
|
|
|
- <ng-container *ngFor="let attention of recommendList">
|
|
|
- <ion-col size="6">
|
|
|
- <ion-card class="roleCard" (click)="goRecommendDetail(attention)">
|
|
|
- <img alt="推荐图" [src]="attention?.get('img')" />
|
|
|
- <ion-card-header>
|
|
|
- <ion-card-title>
|
|
|
- {{attention?.get('name')}}
|
|
|
- </ion-card-title>
|
|
|
- <ion-card-subtitle style="font-size:0.7rem;">
|
|
|
- 作者:{{attention?.get('user')?.get('name') || "无名"}}
|
|
|
- </ion-card-subtitle>
|
|
|
- </ion-card-header>
|
|
|
- <div class="metadata-end-wrapper">
|
|
|
- <ion-button shape="round" size="small" color="danger">
|
|
|
- <ion-icon name="heart-outline" size="small"></ion-icon>
|
|
|
- {{attention?.get('like')}}
|
|
|
- </ion-button>
|
|
|
- </div>
|
|
|
- </ion-card>
|
|
|
- </ion-col>
|
|
|
- </ng-container>
|
|
|
- </ion-row>
|
|
|
- </ion-grid>
|
|
|
- </ng-container>
|
|
|
-
|
|
|
- <ng-container *ngIf="cate=='关注'">
|
|
|
- <div class="carousel-container">
|
|
|
- <div class="carousel">
|
|
|
- <ng-container *ngFor="let attention of attentionList">
|
|
|
- <div class="card-container">
|
|
|
- <ion-col size="6">
|
|
|
+ <ion-content>
|
|
|
+ <ng-container *ngIf="cate=='关注'">
|
|
|
+ <div class="carousel-container">
|
|
|
+ <div class="carousel">
|
|
|
+ <ng-container *ngFor="let attention of attentionList; let i = index">
|
|
|
+ <ion-col size="6" *ngIf="i % 2 === 0">
|
|
|
<ion-card class="roleCard custom-card" (click)="goAttentionDetail(attention)">
|
|
|
<img alt="关注图" [src]="attention?.get('img')" />
|
|
|
- <ion-card-header>
|
|
|
- <!-- <ion-card-title>
|
|
|
- {{attention?.get('name')}}
|
|
|
- </ion-card-title> -->
|
|
|
- <ion-card-subtitle style="font-size:0.7rem;">
|
|
|
- 作者:{{attention?.get('user')?.get('name') || "无名"}}
|
|
|
- </ion-card-subtitle>
|
|
|
- </ion-card-header>
|
|
|
- <div class="metadata-end-wrapper">
|
|
|
- <ion-button shape="round" size="small" color="danger">
|
|
|
- <ion-icon name="heart-outline" size="small"></ion-icon>
|
|
|
- {{attention?.get('like')}}
|
|
|
- </ion-button>
|
|
|
- </div>
|
|
|
</ion-card>
|
|
|
</ion-col>
|
|
|
- </div>
|
|
|
- </ng-container>
|
|
|
+ </ng-container>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="carousel-container">
|
|
|
- <div class="carousel">
|
|
|
- <ng-container *ngFor="let attention of attentionList">
|
|
|
- <div class="card-container">
|
|
|
- <ion-col size="6">
|
|
|
+ <div class="carousel-container">
|
|
|
+ <div class="carousel">
|
|
|
+ <ng-container *ngFor="let attention of attentionList.slice().reverse(); let i = index">
|
|
|
+ <ion-col size="6" *ngIf="i % 2 === 0">
|
|
|
<ion-card class="roleCard custom-card" (click)="goAttentionDetail(attention)">
|
|
|
<img alt="关注图" [src]="attention?.get('img')" />
|
|
|
+ </ion-card>
|
|
|
+ </ion-col>
|
|
|
+ </ng-container>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <ng-container *ngFor="let science of scienceList">
|
|
|
+ <ion-card (click)="goScienceDetail(science)">
|
|
|
+ <img alt="科普图" [src]="science?.get('img')" />
|
|
|
+ <ion-card-header>
|
|
|
+ <ion-card-title>{{science?.get('name')}}</ion-card-title>
|
|
|
+ <ion-card-subtitle>{{science?.get('createdAt') | date: 'YYYY/MM/dd' || "发布时间"}}</ion-card-subtitle>
|
|
|
+ <div class="metadata-end-wrapper">
|
|
|
+ <ion-button fill="clear" color="dark" size="small" class="see">
|
|
|
+ <ion-icon name="eye-outline" size="small"></ion-icon>
|
|
|
+ <ion-note>{{science?.get('see')}}</ion-note>
|
|
|
+ </ion-button>
|
|
|
+ <ion-button fill="clear" color="dark" size="small" class="like">
|
|
|
+ <ion-icon name="heart-outline" size="small"></ion-icon>
|
|
|
+ <ion-note>{{science?.get('like')}}</ion-note>
|
|
|
+ </ion-button>
|
|
|
+ </div>
|
|
|
+ </ion-card-header>
|
|
|
+ <ion-card-content>
|
|
|
+ <p class="foodContent">{{science?.get('content')}}</p>
|
|
|
+ </ion-card-content>
|
|
|
+ </ion-card>
|
|
|
+ </ng-container>
|
|
|
+ </ng-container>
|
|
|
+
|
|
|
+ <!-- 推荐部分 -->
|
|
|
+ <ng-container *ngIf="cate=='推荐'">
|
|
|
+ <ion-grid>
|
|
|
+ <ion-row>
|
|
|
+ <ng-container *ngFor="let attention of recommendList">
|
|
|
+ <ion-col size="6">
|
|
|
+ <ion-card class="roleCard" (click)="goRecommendDetail(attention)">
|
|
|
+ <img alt="推荐图" [src]="attention?.get('img')" />
|
|
|
<ion-card-header>
|
|
|
- <!-- <ion-card-title>
|
|
|
- {{attention?.get('name')}}
|
|
|
- </ion-card-title> -->
|
|
|
+ <ion-card-title>{{attention?.get('name')}}</ion-card-title>
|
|
|
<ion-card-subtitle style="font-size:0.7rem;">
|
|
|
作者:{{attention?.get('user')?.get('name') || "无名"}}
|
|
|
</ion-card-subtitle>
|
|
@@ -106,59 +92,8 @@
|
|
|
</div>
|
|
|
</ion-card>
|
|
|
</ion-col>
|
|
|
- </div>
|
|
|
- </ng-container>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </ng-container><ng-container *ngFor="let science of scienceList">
|
|
|
- <ion-card (click)="goScienceDetail(science)">
|
|
|
- <img alt="科普图" [src]="science?.get('img')" />
|
|
|
- <ion-card-header>
|
|
|
- <ion-card-title>{{science?.get('name')}}</ion-card-title>
|
|
|
- <ion-card-subtitle>{{science?.get('createdAt') | date: 'YYYY/MM/dd' || "发布时间"}}</ion-card-subtitle>
|
|
|
- <div class="metadata-end-wrapper">
|
|
|
- <ion-button fill="clear" color="dark" size="small" class="see">
|
|
|
- <ion-icon name="eye-outline" size="small"></ion-icon>
|
|
|
- <ion-note>{{science?.get('see')}}</ion-note>
|
|
|
- </ion-button>
|
|
|
- <ion-button fill="clear" color="dark" size="small" class="like">
|
|
|
- <ion-icon name="heart-outline" size="small"></ion-icon>
|
|
|
- <ion-note>{{science?.get('like')}}</ion-note>
|
|
|
- </ion-button>
|
|
|
- </div>
|
|
|
- </ion-card-header>
|
|
|
- <ion-card-content>
|
|
|
- <p class="foodContent">{{science?.get('content')}}</p>
|
|
|
- </ion-card-content>
|
|
|
- </ion-card>
|
|
|
- </ng-container>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- <!-- 科普 -->
|
|
|
- <!-- <ng-container *ngIf="cate=='科普'">
|
|
|
- <ng-container *ngFor="let science of scienceList">
|
|
|
- <ion-card (click)="goScienceDetail(science)">
|
|
|
- <img alt="科普图" [src]="science?.get('img')" />
|
|
|
- <ion-card-header>
|
|
|
- <ion-card-title>{{science?.get('name')}}</ion-card-title>
|
|
|
- <ion-card-subtitle>{{science?.get('createdAt') | date: 'YYYY/MM/dd' || "发布时间"}}</ion-card-subtitle>
|
|
|
- <div class="metadata-end-wrapper">
|
|
|
- <ion-button fill="clear" color="dark" size="small" class="see">
|
|
|
- <ion-icon name="eye-outline" size="small"></ion-icon>
|
|
|
- <ion-note>{{science?.get('see')}}</ion-note>
|
|
|
- </ion-button>
|
|
|
- <ion-button fill="clear" color="dark" size="small" class="like">
|
|
|
- <ion-icon name="heart-outline" size="small"></ion-icon>
|
|
|
- <ion-note>{{science?.get('like')}}</ion-note>
|
|
|
- </ion-button>
|
|
|
- </div>
|
|
|
- </ion-card-header>
|
|
|
- <ion-card-content>
|
|
|
- <p class="foodContent">{{science?.get('content')}}</p>
|
|
|
- </ion-card-content>
|
|
|
- </ion-card>
|
|
|
+ </ng-container>
|
|
|
+ </ion-row>
|
|
|
+ </ion-grid>
|
|
|
</ng-container>
|
|
|
- </ng-container> -->
|
|
|
-
|
|
|
-</ion-content>
|
|
|
+ </ion-content>
|