增加放大缩小图片

brokerQry/src/app/broker-detail/broker-detail.component.css

@@ -55,13 +55,14 @@
 }
 
 .honorList > div {
+  width: 100px;
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 
 .honorList > div > img {
-  height: 100px;
+  height: 60px;
   margin-bottom: 5px;
 }
 
@@ -131,6 +132,18 @@ footer {
   width: 80px;
 }
 
+.markBox {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: #000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 @media (max-width: 767px) {
   .wrapper {
     width: 350px;
@@ -151,6 +164,10 @@ footer {
     font-size: 12px;
   }
 
+  .honorList > div {
+    width: 80px;
+  }
+
   .cerPhoto {
     width: 80px;
   }

brokerQry/src/app/broker-detail/broker-detail.component.html

@@ -32,7 +32,7 @@
       <h4>荣誉</h4>
       <div class="honorList">
         <div *ngFor="let certificateItem of certificateList">
-          <img src="{{certificateItem.imagePath}}" alt="{{certificateItem.certName}}">
+          <img src="{{certificateItem.imagePath}}" alt="{{certificateItem.certName}}" (click)="scaleImg(certificateItem.imagePath)">
           <span>{{certificateItem.certName}}</span>
         </div>
       </div>
@@ -92,3 +92,7 @@
     </footer>
   </div>
 </div>
+<!-- 图片放大缩小-->
+<!--<div class="markBox" (click)="imgShowFlag=!imgShowFlag" *ngIf="imgShowFlag">
+  <img src="{{this.scaleImgPath}}" alt="" id="scaleImg">
+</div>-->

brokerQry/src/app/broker-detail/broker-detail.component.ts

-import {Component, OnInit} from '@angular/core';
+import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
 import {EventBusService} from '../event-bus.service';
 import {ActivatedRoute} from '@angular/router';
 
@@ -12,6 +12,8 @@ export class BrokerDetailComponent implements OnInit {
   lifePhotoList: Array<any>;
   practitionerId: any;
   userPractitionerInfo: any;
+  imgShowFlag: boolean;
+  scaleImgPath: any;
 
   constructor(private eventBusService: EventBusService, private activatedRoute: ActivatedRoute) {
   }
@@ -34,4 +36,8 @@ export class BrokerDetailComponent implements OnInit {
     });
   }
 
+  scaleImg(path) {
+    this.scaleImgPath = path;
+    this.imgShowFlag = true;
+  }
 }