产品海报样式修改

src/app/my/mk-material-detail/mk-material-detail.component.ts

@@ -57,7 +57,7 @@ export class MkMaterialDetailComponent implements OnInit {
     const avatarurlWidth = 50;    // 绘制的头像宽度
     const avatarurlHeigth = 50;  // 绘制的头像高度
     const avatarurlX = 10;  // 绘制的头像在画布上的位置
-    const avatarurlY = this.canvas.nativeElement.height - 115;  // 绘制的头像在画布上的位置
+    const avatarurlY = this.canvas.nativeElement.height - 130 + 47;  // 绘制的头像在画布上的位置
     const avatarImg = new Image();
     avatarImg.src = 'https://mdev.zuihuibi.cn/assets/img/meng.png';
     // // 这里的第一张图片就是可以是你们的海报 这里注意绘制的顺序 我们要手动控制
@@ -90,16 +90,17 @@ export class MkMaterialDetailComponent implements OnInit {
       shareQr.src = base64;
       shareQr.onload = () => {
         // 绘制图像  就是绘制二维码到我们自己写的canvas中去
-        ctx.drawImage(shareQr, this.canvas.nativeElement.width - 120, this.canvas.nativeElement.height - 125, 100, 100);
+        ctx.drawImage(shareQr, this.canvas.nativeElement.width - 120, this.canvas.nativeElement.height - 130 + 10, 100, 100);
         document.querySelector('#bannerImg').setAttribute('src', canvas.toDataURL('image/png', 1));
         this.canvas.nativeElement.style.display = 'none';
       };
       // 绘制字体
-      ctx.font = '14px 微软雅黑';
+      ctx.font = 'bold 14px 微软雅黑';
       ctx.fillStyle = '#081a71';
-      ctx.fillText('长按了解详情', this.canvas.nativeElement.width - 115, this.canvas.nativeElement.height - 8);
-      ctx.fillText(`银盾保险经纪 ${this.lifeCustomerInfo['practitionerBasicInfo']['name']}`, 70, this.canvas.nativeElement.height - 100);
-      ctx.fillText(`手机号：${this.lifeCustomerInfo.mobileNo}`, 70, this.canvas.nativeElement.height - 70);
+      ctx.fillText('长按了解详情', this.canvas.nativeElement.width - 115, this.canvas.nativeElement.height - 5);
+      ctx.font = 'bold 15px 微软雅黑';
+      ctx.fillText(`银盾保险经纪 ${this.lifeCustomerInfo['practitionerBasicInfo']['name']}`, 75, this.canvas.nativeElement.height - 130 + 65);
+      ctx.fillText(`手机号：${this.lifeCustomerInfo.mobileNo}`, 75, this.canvas.nativeElement.height - 25);
       // ctx.fillText('微信号：123456', 70, this.canvas.nativeElement.height - 40);
     };
   }

src/app/my/mk-material/mk-material.component.html

 <div class="materialContainer">
   <div class="materialItem" *ngFor="let materialItem of materialLists;index as i"
        [routerLink]="['/material',materialItem.itemId]">
-    <div style="width: 90%;">
+    <div>
       <img src="{{'assets/images/mk-material/'+materialItem.itemId+'.png'}}" alt="" class="img-responsive">
     </div>
     <div class="title">{{materialItem.title}}</div>

src/app/my/mk-material/mk-material.component.scss

 .materialContainer {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: repeat(2,240px);
+  grid-template-rows: repeat(3, 1fr);
   grid-row-gap: 10px;
   grid-column-gap: 10px;
   .materialItem {
     position: relative;
-    height: 200px;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     align-items: center;
     background-color: #f7f7f7;
     padding: 14px;
+    box-sizing: border-box;
     .title {
       font-size: 12px;
       line-height: 1.1;