fix

src/components/sharePic.vue

 <template>
-  <div ref="sharePic" class="container">
-    <div class="groupInfo">
+  <div ref="sharePic" class="container" style="width: 1080px; height: 1920px; padding: 48px;">
+    <div class="groupInfo" style="width: 100%; height: 319px;">
       <!-- 组团头像信息 -->
       <div class="avatorGroup">
         <template v-if="avatorList.length !== 0">
@@ -8,18 +8,30 @@
             v-for="(item, index) in avatorList"
             :key="index"
             class="item"
+            style="width: 94px;height: 94px;margin: 0 21px;"
             :class="{ leader: index == 0, normal: index != 0 }"
           >
-            <img class="avator" :src="item" alt="" />
+            <img
+              class="avator"
+              style="width: 84px;
+                      height: 84px;"
+              :src="item"
+              alt=""
+            />
             <template v-if="index == 0">
-              <div class="leaderName">团长</div>
+              <div
+                class="leaderName"
+                style="width: 76px;height: 36px;border-radius: 8px;font-size: 24px;bottom: -18px;"
+              >
+                团长
+              </div>
               <div class="leaderBorder">
                 <img
                   src="https://img.lkbang.net/activity/share/default/leaderBorder.png?i=1"
                   alt=""
                 />
               </div>
-              <div class="crown">
+              <div class="crown" style="top: -18px;right: -5px;width: 49px;height: 43px;">
                 <img src="https://img.lkbang.net/activity/share/default/crown.png?i=1" alt="" />
               </div>
             </template>
@@ -28,18 +40,24 @@
             v-for="num in maxCount - avatorList.length"
             :key="`placeholder${num}`"
             class="item placeholder"
+            style="width: 94px;height: 94px;margin: 0 21px;font-size: 34px;"
           />
         </template>
         <template v-else>
-          <div class="item leader bg">
-            <div class="leaderName">团长</div>
+          <div class="item leader bg" style="width: 94px;height: 94px;margin: 0 21px;">
+            <div
+              class="leaderName"
+              style="width: 76px;height: 36px;border-radius: 8px;font-size: 24px;bottom: -18px;"
+            >
+              团长
+            </div>
             <div class="leaderBorder">
               <img
                 src="https://img.lkbang.net/activity/share/default/leaderBorder.png?i=1"
                 alt=""
               />
             </div>
-            <div class="crown">
+            <div class="crown" style="top: -18px;right: -5px;width: 49px;height: 43px;">
               <img src="https://img.lkbang.net/activity/share/default/crown.png?i=1" alt="" />
             </div>
           </div>
@@ -47,47 +65,65 @@
             v-for="num in maxCount - avatorList.length"
             :key="`placeholder${num}`"
             class="item placeholder"
+            style="width: 94px;height: 94px;margin: 0 21px;font-size: 34px;"
           />
         </template>
-        <div v-if="openGroupCnt >= 7" class="item more" />
+        <div
+          v-if="openGroupCnt >= 7"
+          class="item more"
+          style="width: 94px;height: 94px;margin: 0 21px;font-size: 34px;"
+        />
       </div>
-      <div class="groupProcess">
-        <div class="desc">
-          还差 <span>{{ sharePicData.needGuys }}人</span> 成团，<template v-if="endTime != ''"
+      <div class="groupProcess" style="width: 750px;height: 123px;padding-top: 50px;">
+        <div class="desc" style="border-radius: 36.5px;font-size: 34px;">
+          还差 <span style="margin: 0 10px;">{{ sharePicData.needGuys }}人</span> 成团，<template
+            v-if="endTime != ''"
             ><template v-if="avatorList.length == 0">活动</template
             ><template v-else>参团</template>截止时间 {{ endTime }}</template
           >
         </div>
       </div>
     </div>
-    <div class="skuImg">
+    <div
+      class="skuImg"
+      style="width: 984px;
+            height: 984px;"
+    >
       <!-- 商品图 -->
       <img :src="sharePicData.skuImg" alt="" />
-      <div class="skuInfo">
-        <div class="skuPrice">
+      <div class="skuInfo" style="height: 134px;">
+        <div
+          class="skuPrice"
+          style="width: 653px;font-size: 34px;padding-left: 32px;margin-right: 10px;"
+        >
           <span class="groupPriceContainer">拼团价 ¥</span>
-          <span class="groupPrice">¥0</span>
-          <span class="salePrice">¥{{ sharePicData.activityPrice }}</span>
+          <span class="groupPrice" style="font-size: 64px;margin-right: 10px;">¥0</span>
+          <span class="salePrice" style="line-height: 134px;font-size: 34px;"
+            >¥{{ sharePicData.activityPrice }}</span
+          >
         </div>
         <div class="skuSuccess">
-          <p>
+          <p style="font-size: 34px;margin-bottom: 15px;">
             已有<span>{{ sharePicData.groupBuySuccessGuys }}人</span>
           </p>
           <p>拼团成功</p>
         </div>
       </div>
     </div>
-    <div class="skuName">
+    <div
+      class="skuName"
+      style="height: 132px;margin: 28px 0 42px;font-size: 44px;line-height: 62px;"
+    >
       <!-- 商品名称 -->
       {{ sharePicData.skuName }}
     </div>
-    <div class="shareInfo">
+    <div class="shareInfo" style="height: 318px;border-radius: 24px;padding: 0 48px;">
       <!-- 底部分享信息 -->
-      <div class="qrcode">
+      <div class="qrcode" style="width: 353px;height: 278px;padding: 0 75px 0 0;">
         <img :src="qrcodeUrl" alt="" />
       </div>
-      <div class="shareDesc">
-        <p>分享自 <span>羊小咩小程序</span></p>
+      <div class="shareDesc" style="font-size: 34px;">
+        <p style="margin-bottom: 25px;">分享自 <span>羊小咩小程序</span></p>
         <p>扫码或长按识别二维码0元拿好物</p>
       </div>
     </div>
@@ -140,7 +176,7 @@ export default {
           width: 1080,
           height: 1920,
           useCORS: true,
-          scale: 1,
+          scale: 3,
           allowTaint: false
         }).then(function(canvas) {
           canvas.toBlob(
@@ -189,13 +225,9 @@ body {
   position: fixed;
   top: -9999px;
   left: -9999px;
-  width: 1080px;
-  height: 1920px;
-  padding: 48px;
   color: #333;
 }
 .groupInfo {
-  height: 319px;
   background: #fff;
   display: flex;
   align-items: center;
@@ -206,10 +238,7 @@ body {
   display: flex;
 }
 .groupInfo .avatorGroup .item {
-  width: 94px;
-  height: 94px;
   background-color: #ffe1e1;
-  margin: 0 21px;
   border-radius: 50%;
   position: relative;
 }
@@ -226,8 +255,6 @@ body {
   justify-content: center;
 }
 .groupInfo .avatorGroup .leader .avator {
-  width: 84px;
-  height: 84px;
   border-radius: 50%;
 }
 .groupInfo .avatorGroup .leader .leaderBorder {
@@ -244,10 +271,6 @@ body {
 }
 .groupInfo .avatorGroup .leader .crown {
   position: absolute;
-  top: -18px;
-  right: -5px;
-  width: 49px;
-  height: 43px;
 }
 .groupInfo .avatorGroup .leader .crown img {
   width: 100%;
@@ -255,19 +278,14 @@ body {
 }
 .groupInfo .avatorGroup .leader .leaderName {
   position: absolute;
-  bottom: -18px;
-  left: 50%;
   transform: translateX(-50%);
   z-index: 3;
-  width: 76px;
-  height: 36px;
+  left: 50%;
   color: #fff;
-  font-size: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #ff9700;
-  border-radius: 8px;
 }
 .groupInfo .avatorGroup .normal img {
   width: 100%;
@@ -280,7 +298,6 @@ body {
   align-content: center;
   justify-content: center;
   color: #ec1500;
-  font-size: 34px;
 }
 .groupInfo .avatorGroup .more::after {
   content: '...';
@@ -293,23 +310,15 @@ body {
   align-content: center;
   justify-content: center;
   color: #ec1500;
-  font-size: 34px;
 }
 .groupInfo .avatorGroup .placeholder::after {
   content: '?';
 }
-.groupInfo .groupProcess {
-  width: 750px;
-  height: 123px;
-  padding-top: 50px;
-}
 .groupInfo .groupProcess .desc {
   width: 100%;
   height: 100%;
   background: #ffe8e8;
-  border-radius: 36.5px;
   color: #333;
-  font-size: 34px;
   text-align: center;
   display: flex;
   align-items: center;
@@ -317,11 +326,8 @@ body {
 }
 .groupInfo .groupProcess .desc span {
   color: #ec1500;
-  margin: 0 10px;
 }
 .skuImg {
-  width: 984px;
-  height: 984px;
   position: relative;
 }
 .skuImg img {
@@ -334,7 +340,6 @@ body {
   left: 0;
   display: flex;
   width: 100%;
-  height: 134px;
   background-image: url('https://img.lkbang.net/activity/share/default/skuInfoBg.png');
   background-repeat: no-repeat;
   background-size: cover;
@@ -342,25 +347,17 @@ body {
 .skuImg .skuInfo .skuPrice {
   display: flex;
   align-items: baseline;
-  width: 653px;
   height: 100%;
   flex-shrink: 0;
   color: @white;
-  font-size: 34px;
-  padding-left: 32px;
-  margin-right: 10px;
 }
 .skuImg .skuInfo .skuPrice .groupPrice {
   display: inline-block;
   color: @white;
-  font-size: 64px;
-  margin-right: 10px;
 }
 .skuImg .skuInfo .skuPrice .salePrice {
-  font-size: 34px;
   text-decoration: line-through;
   font-weight: lighter;
-  line-height: 134px;
 }
 .skuImg .skuInfo .skuSuccess {
   flex: 1;
@@ -370,21 +367,13 @@ body {
   justify-content: center;
 }
 .skuImg .skuInfo .skuSuccess p {
-  font-size: 34px;
   text-align: center;
 }
-.skuImg .skuInfo .skuSuccess p:first-child {
-  margin-bottom: 15px;
-}
 .skuImg .skuInfo .skuSuccess p span {
   color: #ec1500;
 }
 .skuName {
-  height: 132px;
-  margin: 28px 0 42px;
-  font-size: 44px;
   color: #333333;
-  line-height: 62px;
   text-overflow: -o-ellipsis-lastline;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -393,19 +382,13 @@ body {
   -webkit-box-orient: vertical;
 }
 .shareInfo {
-  height: 318px;
   background: #f7f8f9;
-  border-radius: 24px;
-  padding: 0 48px;
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 .shareInfo .qrcode {
-  width: 353px;
-  height: 278px;
   flex-shrink: 0;
-  padding: 0 75px 0 0;
 }
 .shareInfo .qrcode img {
   width: 100%;
@@ -413,12 +396,8 @@ body {
 }
 .shareInfo .shareDesc {
   flex: 1;
-  font-size: 34px;
   color: #666;
 }
-.shareInfo .shareDesc p:first-child {
-  margin-bottom: 25px;
-}
 .shareInfo .shareDesc span {
   font-weight: bold;
 }