|
@@ -1,6 +1,7 @@
|
|
|
-<ion-searchbar show-cancel-button="focus" placeholder="欢迎来到手艺之窗购物" cancel-button-text="取消" (ionInput)="handleInput($event)"></ion-searchbar>
|
|
|
+<ion-searchbar show-cancel-button="focus" placeholder="欢迎来到手艺之窗购物" cancel-button-text="取消"
|
|
|
+ (ionInput)="handleInput($event)"></ion-searchbar>
|
|
|
|
|
|
-<div class="buttons-row">
|
|
|
+<!-- <div class="buttons-row">
|
|
|
<div class="button-tag">
|
|
|
<button (click)="showContent('cart-one')">推荐</button>
|
|
|
</div>
|
|
@@ -10,9 +11,90 @@
|
|
|
<div class="button-tag">
|
|
|
<button (click)="showContent('cart-three')">数字藏品</button>
|
|
|
</div>
|
|
|
-</div>
|
|
|
+</div> -->
|
|
|
+<ion-grid style="text-align: center; padding-bottom: 0;">
|
|
|
+ <ion-row class="nav-two" >
|
|
|
+ <ion-col (click)="showContent('cart-one')" class="nav-two">推荐</ion-col>
|
|
|
+ <ion-col (click)="showContent('cart-two')">手工艺品</ion-col>
|
|
|
+ <ion-col (click)="showContent('cart-three')">藏品</ion-col>
|
|
|
+ </ion-row>
|
|
|
+</ion-grid>
|
|
|
|
|
|
-<div class="content-wrapper">
|
|
|
+<ion-grid class="nav-three">
|
|
|
+ <ion-row >
|
|
|
+ <ion-col>
|
|
|
+ <ion-card *ngFor="let item of items" style="margin: 2px 1px">
|
|
|
+ <div *ngIf="item.choice === 1" >
|
|
|
+ <ion-img [src]="item.imgUrl"></ion-img>
|
|
|
+ <ion-card-header>
|
|
|
+
|
|
|
+ <ion-card-title>
|
|
|
+ {{ item.name }}
|
|
|
+ </ion-card-title>
|
|
|
+
|
|
|
+ <ion-card-subtitle>
|
|
|
+ <ion-grid>
|
|
|
+ <ion-row style=" text-align: center;">
|
|
|
+ <ion-col size="auto">
|
|
|
+ <ng-container *ngIf="currentContent === 'cart-three'; else defaultPrice"></ng-container>
|
|
|
+ <ng-template #defaultPrice>¥{{ item.price }}</ng-template>
|
|
|
+ </ion-col>
|
|
|
+ <ion-col>
|
|
|
+ <ng-container *ngIf="currentContent === 'cart-three'; else defaultPrice"></ng-container>
|
|
|
+ <ng-template #defaultPrice>销量{{ item.price }}</ng-template>
|
|
|
+ </ion-col>
|
|
|
+ </ion-row>
|
|
|
+ </ion-grid>
|
|
|
+ </ion-card-subtitle>
|
|
|
+ </ion-card-header>
|
|
|
+
|
|
|
+ <ion-card-content>
|
|
|
+ {{item.description}}
|
|
|
+ </ion-card-content>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </ion-card>
|
|
|
+
|
|
|
+ </ion-col>
|
|
|
+
|
|
|
+ <ion-col>
|
|
|
+ <ion-card *ngFor="let item of items" style="margin:1px 1px 4px 1px">
|
|
|
+ <div *ngIf="item.choice === 2" >
|
|
|
+ <ion-img [src]="item.imgUrl"></ion-img>
|
|
|
+ <ion-card-header>
|
|
|
+
|
|
|
+ <ion-card-title>
|
|
|
+ {{ item.name }}
|
|
|
+ </ion-card-title>
|
|
|
+
|
|
|
+ <ion-card-subtitle>
|
|
|
+ <ion-grid>
|
|
|
+ <ion-row style=" text-align: center;">
|
|
|
+ <ion-col size="auto">
|
|
|
+ <ng-container *ngIf="currentContent === 'cart-three'; else defaultPrice"></ng-container>
|
|
|
+ <ng-template #defaultPrice>¥{{ item.price }}</ng-template>
|
|
|
+ </ion-col>
|
|
|
+ <ion-col>
|
|
|
+ <ng-container *ngIf="currentContent === 'cart-three'; else defaultPrice"></ng-container>
|
|
|
+ <ng-template #defaultPrice>销量{{ item.price }}</ng-template>
|
|
|
+ </ion-col>
|
|
|
+ </ion-row>
|
|
|
+ </ion-grid>
|
|
|
+ </ion-card-subtitle>
|
|
|
+
|
|
|
+ </ion-card-header>
|
|
|
+
|
|
|
+ <ion-card-content>
|
|
|
+ {{item.description}}
|
|
|
+ </ion-card-content>
|
|
|
+ </div>
|
|
|
+ </ion-card>
|
|
|
+
|
|
|
+ </ion-col>
|
|
|
+ </ion-row>
|
|
|
+</ion-grid>
|
|
|
+
|
|
|
+<!-- <div class="content-wrapper">
|
|
|
<div class="item-container" >
|
|
|
<div *ngFor="let item of items" class="image-container">
|
|
|
<div *ngIf="item.choice === 1" class="left-column" >
|
|
@@ -41,4 +123,4 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-</div>
|
|
|
+</div> -->
|