<div class="container">
  <div class="wrapper">
    <h1 class="text-center">
      <img src="assets/images/ydinsurance_logo.png" alt="">
    </h1>
    <!--经纪人基本信息-->
    <section class="basicInfo flex-center">
      <div class="basicInfoWrapper">
        <div class="name">
          <strong>姓名</strong>
          <span>{{userPractitionerInfo?.name}}</span>
        </div>
        <div class="practitionerRegNoWrapper">
          <strong>执业编号</strong>
          <span class="practitionerRegNo">{{userPractitionerInfo?.practitionerRegNo}}</span>
        </div>
        <div class="effectiveEndDateWrapper">
          <strong>有效截至日期</strong>
          <span>{{userPractitionerInfo?.effectiveEndDate}}</span>
        </div>
        <div class="areaWrapper">
          <strong>所属区域</strong>
          <span>{{userPractitionerInfo?.provinceName}}{{userPractitionerInfo?.cityName}}</span>
        </div>
      </div>
      <div class="cerPhoto">
        <img src="{{userPractitionerInfo?.headFilePath}}" alt="" class="img-responsive img-circle">
      </div>
    </section>
    <!--经纪人荣誉-->
    <section class="honor" *ngIf="certificateList && certificateList.length>0">
      <h4>荣誉和证书</h4>
      <div class="honorList">
        <div *ngFor="let certificateItem of certificateList">
          <img src="{{certificateItem.imagePath}}" alt="{{certificateItem.certName}}" (click)="scaleImg(certificateItem.imagePath)">
          <span>{{certificateItem.certName}}</span>
        </div>
      </div>
    </section>
    <!--自我简介-->
    <section class="bioIntro" *ngIf="userPractitionerInfo?.bioIntro">
      <h4>自我简介</h4>
      <p [innerHtml]="userPractitionerInfo?.bioIntro"></p>
    </section>
    <!--联系方式-->
    <section class="contact">
      <h4>联系方式</h4>
      <div class="contactList">
        <div *ngIf="userPractitionerInfo?.mobileNo">
          <div class="icon">
            <img src="assets/images/phone.png" alt="手机" class="img-responsive">
          </div>
          <span><a href="tel:{{userPractitionerInfo?.mobileNo}}">{{userPractitionerInfo?.mobileNo}}</a></span>
        </div>
        <div *ngIf="userPractitionerInfo?.wechatId">
          <div class="icon">
            <img src="assets/images/wx.png" alt="微信" class="img-responsive">
          </div>
          <span>{{userPractitionerInfo?.wechatId}}</span>
        </div>
        <div *ngIf="userPractitionerInfo?.qqId">
          <div class="icon">
            <img src="assets/images/qq.png" alt="QQ" class="img-responsive">
          </div>
          <span>{{userPractitionerInfo?.qqId}}</span>
        </div>
      </div>
    </section>
    <!--生活照片-->
    <section class="lifePhoto" *ngIf="lifePhotoList && lifePhotoList.length>0">
      <h4>生活照片</h4>
      <div class="lifePhotoList">
        <div class="mainPhoto" *ngFor="let lifePhotoItem of lifePhotoList.slice(0,1);">
          <img src="{{lifePhotoItem.lifePhotoFilePath}}" alt="" class="img-responsive">
        </div>
        <div class="subPhoto" *ngFor="let lifePhotoItem of lifePhotoList.slice(1);">
          <img src="{{lifePhotoItem.lifePhotoFilePath}}" alt="" class="img-responsive">
        </div>
      </div>
    </section>
    <!--尾部-->
    <footer>
      <div class="eqrocde">
        <div><img src="https://www.ydinsurance.cn/wp-content/uploads/2017/11/ydinsurance_qrcode.jpg" alt=""
                  class="img-responsive"></div>
        <div><img src="https://www.zuihuibi.cn/wp-content/uploads/2018/07/qrcode_zuihuibi.jpg" alt=""
                  class="img-responsive"></div>
      </div>
      <div class="text-center" style="padding-top: 15px;font-size: 10px">上海银盾保险经纪有限公司</div>
    </footer>
  </div>
</div>
<!-- 图片放大缩小-->
<!--<div class="markBox" (click)="imgShowFlag=!imgShowFlag" *ngIf="imgShowFlag">
  <img src="{{this.scaleImgPath}}" alt="" id="scaleImg">
</div>-->
