38 changed files with 384 additions and 265 deletions
@ -1,18 +1,21 @@ |
|||||||
<div mat-dialog-title>图片详情</div> |
|
||||||
<div class="swiper-container"> |
|
||||||
<div class="swiper-wrapper"> |
|
||||||
<div *ngFor="let item of allImages" class="swiper-slide previewImgBox"> |
|
||||||
<img [ngClass]="{'rotateA':rotationAngle==90,'rotateB':rotationAngle==180,'rotateC':rotationAngle==270}" class="swiper-lazy" |
|
||||||
[attr.data-src]="item"> |
|
||||||
<div class="swiper-lazy-preloader"></div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<!-- 如果需要导航按钮 --> |
<div class="imgDiaLogBox"> |
||||||
<div class="swiper-button-prev"></div> |
<div mat-dialog-title>图片详情</div> |
||||||
<div class="swiper-button-next"></div> |
<div class="swiper-container"> |
||||||
|
<div class="swiper-wrapper"> |
||||||
|
<div *ngFor="let item of allImages" class="swiper-slide previewImgBox"> |
||||||
|
<img [ngClass]="{'rotateA':rotationAngle==90,'rotateB':rotationAngle==180,'rotateC':rotationAngle==270}" class="swiper-lazy" |
||||||
|
[attr.data-src]="item"> |
||||||
|
<div class="swiper-lazy-preloader"></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- 如果需要导航按钮 --> |
||||||
|
<div class="swiper-button-prev"></div> |
||||||
|
<div class="swiper-button-next"></div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="previewImgBottom"> |
||||||
|
<button type="button" mat-icon-button (click)='rotate()'><mat-icon>refresh</mat-icon></button> |
||||||
|
</div> |
||||||
</div> |
</div> |
||||||
|
|
||||||
<div class="previewImgBottom"> |
|
||||||
<button type="button" mat-icon-button (click)='rotate()'><mat-icon>refresh</mat-icon></button> |
|
||||||
</div> |
|
@ -1,17 +1,19 @@ |
|||||||
<div mat-dialog-title>图片详情</div> |
<div class="imgDiaLogBox"> |
||||||
<div class="swiper-container"> |
<div mat-dialog-title>图片详情</div> |
||||||
<div class="swiper-wrapper"> |
<div class="swiper-container"> |
||||||
<div class="swiper-slide previewImgBox" *ngFor="let item of allImages"> |
<div class="swiper-wrapper"> |
||||||
<img [attr.data-src]="item.previewImageUrl" class="swiper-lazy" [ngClass]="{'rotateA':rotationAngle==90,'rotateB':rotationAngle==180,'rotateC':rotationAngle==270}"> |
<div class="swiper-slide previewImgBox" *ngFor="let item of allImages"> |
||||||
<div class="swiper-lazy-preloader"></div> |
<img [attr.data-src]="item.previewImageUrl" class="swiper-lazy" [ngClass]="{'rotateA':rotationAngle==90,'rotateB':rotationAngle==180,'rotateC':rotationAngle==270}"> |
||||||
|
<div class="swiper-lazy-preloader"></div> |
||||||
|
</div> |
||||||
</div> |
</div> |
||||||
</div> |
|
||||||
|
<!-- 如果需要导航按钮 --> |
||||||
<!-- 如果需要导航按钮 --> |
<div class="swiper-button-prev"></div> |
||||||
<div class="swiper-button-prev"></div> |
<div class="swiper-button-next"></div> |
||||||
<div class="swiper-button-next"></div> |
</div> |
||||||
|
|
||||||
|
<div class="previewImgBottom"> |
||||||
|
<button type="button" mat-icon-button (click)='rotate()'><mat-icon>refresh</mat-icon></button> |
||||||
|
</div> |
||||||
</div> |
</div> |
||||||
|
|
||||||
<div class="previewImgBottom"> |
|
||||||
<button type="button" mat-icon-button (click)='rotate()'><mat-icon>refresh</mat-icon></button> |
|
||||||
</div> |
|
@ -1,17 +1,19 @@ |
|||||||
<div mat-dialog-title>图片详情</div> |
<div class="imgDiaLogBox"> |
||||||
<div class="swiper-container"> |
<div mat-dialog-title>图片详情</div> |
||||||
<div class="swiper-wrapper"> |
<div class="swiper-container"> |
||||||
<div class="swiper-slide previewImgBox" *ngFor="let item of allImages"> |
<div class="swiper-wrapper"> |
||||||
<img [attr.data-src]="item.previewImageUrl" class="swiper-lazy" [ngClass]="{'rotateA':rotationAngle==90,'rotateB':rotationAngle==180,'rotateC':rotationAngle==270}"> |
<div class="swiper-slide previewImgBox" *ngFor="let item of allImages"> |
||||||
<div class="swiper-lazy-preloader"></div> |
<img [attr.data-src]="item.previewImageUrl" class="swiper-lazy" [ngClass]="{'rotateA':rotationAngle==90,'rotateB':rotationAngle==180,'rotateC':rotationAngle==270}"> |
||||||
|
<div class="swiper-lazy-preloader"></div> |
||||||
|
</div> |
||||||
</div> |
</div> |
||||||
</div> |
|
||||||
|
<!-- 如果需要导航按钮 --> |
||||||
<!-- 如果需要导航按钮 --> |
<div class="swiper-button-prev"></div> |
||||||
<div class="swiper-button-prev"></div> |
<div class="swiper-button-next"></div> |
||||||
<div class="swiper-button-next"></div> |
</div> |
||||||
|
|
||||||
|
<div class="previewImgBottom"> |
||||||
|
<button type="button" mat-icon-button (click)='rotate()'><mat-icon>refresh</mat-icon></button> |
||||||
|
</div> |
||||||
</div> |
</div> |
||||||
|
|
||||||
<div class="previewImgBottom"> |
|
||||||
<button type="button" mat-icon-button (click)='rotate()'><mat-icon>refresh</mat-icon></button> |
|
||||||
</div> |
|
@ -1,17 +0,0 @@ |
|||||||
import { Component, OnInit, Inject } from '@angular/core'; |
|
||||||
import { HttpClient } from '@angular/common/http'; |
|
||||||
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; |
|
||||||
import { MatSnackBar } from '@angular/material/snack-bar'; |
|
||||||
import Swiper from 'swiper'; |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@Component({ |
|
||||||
selector: 'keyimgdetail', |
|
||||||
templateUrl: './keyimgdetail.component.html', |
|
||||||
styleUrls: ['./key-site.component.scss'] |
|
||||||
}) |
|
||||||
export class KeyImgDetail { |
|
||||||
|
|
||||||
} |
|
||||||
|
|
@ -1,18 +1,20 @@ |
|||||||
<div mat-dialog-title>图片详情</div> |
<div class="imgDiaLogBox"> |
||||||
<div class="swiper-container"> |
<div mat-dialog-title>图片详情</div> |
||||||
<div class="swiper-wrapper"> |
<div class="swiper-container"> |
||||||
<div *ngFor="let item of allImages" class="swiper-slide previewImgBox"> |
<div class="swiper-wrapper"> |
||||||
<img [ngClass]="{'rotateA':rotationAngle==90,'rotateB':rotationAngle==180,'rotateC':rotationAngle==270} " class="swiper-lazy" |
<div *ngFor="let item of allImages" class="swiper-slide previewImgBox"> |
||||||
[attr.data-src]="item"> |
<img [ngClass]="{'rotateA':rotationAngle==90,'rotateB':rotationAngle==180,'rotateC':rotationAngle==270} " class="swiper-lazy" |
||||||
<div class="swiper-lazy-preloader"></div> |
[attr.data-src]="item"> |
||||||
</div> |
<div class="swiper-lazy-preloader"></div> |
||||||
</div> |
</div> |
||||||
|
</div> |
||||||
<!-- 如果需要导航按钮 --> |
|
||||||
<div class="swiper-button-prev"></div> |
<!-- 如果需要导航按钮 --> |
||||||
<div class="swiper-button-next"></div> |
<div class="swiper-button-prev"></div> |
||||||
|
<div class="swiper-button-next"></div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="previewImgBottom"> |
||||||
|
<button type="button" mat-icon-button (click)='rotate()'><mat-icon>refresh</mat-icon></button> |
||||||
|
</div> |
||||||
</div> |
</div> |
||||||
|
|
||||||
<div class="previewImgBottom"> |
|
||||||
<button type="button" mat-icon-button (click)='rotate()'><mat-icon>refresh</mat-icon></button> |
|
||||||
</div> |
|
@ -1,17 +0,0 @@ |
|||||||
import { Component, OnInit, Inject } from '@angular/core'; |
|
||||||
import { HttpClient } from '@angular/common/http'; |
|
||||||
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog'; |
|
||||||
import { MatSnackBar } from '@angular/material/snack-bar'; |
|
||||||
import Swiper from 'swiper'; |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@Component({ |
|
||||||
selector: 'keyimgdetail', |
|
||||||
templateUrl: './keyimgdetail.component.html', |
|
||||||
styleUrls: ['./key-site.component.scss'] |
|
||||||
}) |
|
||||||
export class KeyImgDetail { |
|
||||||
|
|
||||||
} |
|
||||||
|
|
@ -1,18 +1,21 @@ |
|||||||
<div mat-dialog-title>图片详情</div> |
|
||||||
<div class="swiper-container"> |
|
||||||
<div class="swiper-wrapper"> |
|
||||||
<div *ngFor="let item of allImages" class="swiper-slide previewImgBox"> |
|
||||||
<img [ngClass]="{'rotateA':rotationAngle==90,'rotateB':rotationAngle==180,'rotateC':rotationAngle==270} " class="swiper-lazy" |
|
||||||
[attr.data-src]="item"> |
|
||||||
<div class="swiper-lazy-preloader"></div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
|
|
||||||
<!-- 如果需要导航按钮 --> |
<div class="imgDiaLogBox"> |
||||||
<div class="swiper-button-prev"></div> |
<div mat-dialog-title>图片详情</div> |
||||||
<div class="swiper-button-next"></div> |
<div class="swiper-container"> |
||||||
|
<div class="swiper-wrapper"> |
||||||
|
<div *ngFor="let item of allImages" class="swiper-slide previewImgBox"> |
||||||
|
<img [ngClass]="{'rotateA':rotationAngle==90,'rotateB':rotationAngle==180,'rotateC':rotationAngle==270} " class="swiper-lazy" |
||||||
|
[attr.data-src]="item"> |
||||||
|
<div class="swiper-lazy-preloader"></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- 如果需要导航按钮 --> |
||||||
|
<div class="swiper-button-prev"></div> |
||||||
|
<div class="swiper-button-next"></div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="previewImgBottom"> |
||||||
|
<button type="button" mat-icon-button (click)='rotate()'><mat-icon>refresh</mat-icon></button> |
||||||
|
</div> |
||||||
</div> |
</div> |
||||||
|
|
||||||
<div class="previewImgBottom"> |
|
||||||
<button type="button" mat-icon-button (click)='rotate()'><mat-icon>refresh</mat-icon></button> |
|
||||||
</div> |
|
@ -1,17 +1,19 @@ |
|||||||
<div mat-dialog-title>图片详情</div> |
<div class="imgDiaLogBox"> |
||||||
<div class="swiper-container"> |
<div mat-dialog-title>图片详情</div> |
||||||
<div class="swiper-wrapper"> |
<div class="swiper-container"> |
||||||
<div class="swiper-slide previewImgBox" *ngFor="let item of allImages"> |
<div class="swiper-wrapper"> |
||||||
<img [attr.data-src]="item.previewImageUrl" class="swiper-lazy" [ngClass]="{'rotateA':rotationAngle==90,'rotateB':rotationAngle==180,'rotateC':rotationAngle==270}"> |
<div class="swiper-slide previewImgBox" *ngFor="let item of allImages"> |
||||||
<div class="swiper-lazy-preloader"></div> |
<img [attr.data-src]="item.previewImageUrl" class="swiper-lazy" [ngClass]="{'rotateA':rotationAngle==90,'rotateB':rotationAngle==180,'rotateC':rotationAngle==270}"> |
||||||
|
<div class="swiper-lazy-preloader"></div> |
||||||
|
</div> |
||||||
</div> |
</div> |
||||||
</div> |
|
||||||
|
<!-- 如果需要导航按钮 --> |
||||||
<!-- 如果需要导航按钮 --> |
<div class="swiper-button-prev"></div> |
||||||
<div class="swiper-button-prev"></div> |
<div class="swiper-button-next"></div> |
||||||
<div class="swiper-button-next"></div> |
</div> |
||||||
|
|
||||||
|
<div class="previewImgBottom"> |
||||||
|
<button type="button" mat-icon-button (click)='rotate()'><mat-icon>refresh</mat-icon></button> |
||||||
|
</div> |
||||||
</div> |
</div> |
||||||
|
|
||||||
<div class="previewImgBottom"> |
|
||||||
<button type="button" mat-icon-button (click)='rotate()'><mat-icon>refresh</mat-icon></button> |
|
||||||
</div> |
|
@ -1,17 +1,19 @@ |
|||||||
<div mat-dialog-title>图片详情</div> |
<div class="imgDiaLogBox"> |
||||||
<div class="swiper-container"> |
<div mat-dialog-title>图片详情</div> |
||||||
<div class="swiper-wrapper"> |
<div class="swiper-container"> |
||||||
<div class="swiper-slide previewImgBox" *ngFor="let item of allImages"> |
<div class="swiper-wrapper"> |
||||||
<img [attr.data-src]="item.previewImageUrl" class="swiper-lazy" [ngClass]="{'rotateA':rotationAngle==90,'rotateB':rotationAngle==180,'rotateC':rotationAngle==270}"> |
<div class="swiper-slide previewImgBox" *ngFor="let item of allImages"> |
||||||
<div class="swiper-lazy-preloader"></div> |
<img [attr.data-src]="item.previewImageUrl" class="swiper-lazy" [ngClass]="{'rotateA':rotationAngle==90,'rotateB':rotationAngle==180,'rotateC':rotationAngle==270}"> |
||||||
|
<div class="swiper-lazy-preloader"></div> |
||||||
|
</div> |
||||||
</div> |
</div> |
||||||
</div> |
|
||||||
|
<!-- 如果需要导航按钮 --> |
||||||
<!-- 如果需要导航按钮 --> |
<div class="swiper-button-prev"></div> |
||||||
<div class="swiper-button-prev"></div> |
<div class="swiper-button-next"></div> |
||||||
<div class="swiper-button-next"></div> |
</div> |
||||||
|
|
||||||
|
<div class="previewImgBottom"> |
||||||
|
<button type="button" mat-icon-button (click)='rotate()'><mat-icon>refresh</mat-icon></button> |
||||||
|
</div> |
||||||
</div> |
</div> |
||||||
|
|
||||||
<div class="previewImgBottom"> |
|
||||||
<button type="button" mat-icon-button (click)='rotate()'><mat-icon>refresh</mat-icon></button> |
|
||||||
</div> |
|
Loading…
Reference in new issue