修改 pdf 轉出圖之格式，微調挑人UI樣式 (後續需改設計)

HiTeachCC/ClientApp/src/components/PdfPreview.vue

@@ -140,7 +140,7 @@
                                     pages.push(ctx.getImageData(0, 0, canvas.width, canvas.height))
                                     heights.push(height)
                                     height += canvas.height
-                                    that.imgArr.push(canvas.toDataURL('images/png'))
+                                    that.imgArr.push(canvas.toDataURL('images/jpeg',0.9))
                                     //if (width < canvas.width) width = canvas.width
                                     if (currentPage < pdf.numPages) {
                                         currentPage++

HiTeachCC/ClientApp/src/components/Tools/BasePick.vue

@@ -28,7 +28,7 @@
           </div>
         </div>
       </div>
-      <q-btn color="primary" :label="btnLable" @click="handlePickAction" />
+      <div class='start-btn'  @click="handlePickAction" >開始挑人</div>
     </div>
   </div>
 </template>
@@ -145,14 +145,14 @@
   };
 </script>
 
-<style>
+<style lang='less'>
   .person-box {
     position: relative;
     background: url("../../assets/img/head0.jpg") no-repeat 0 0;
     background-size: cover;
     width: 100%;
     height: 100%;
-    border: 4px solid #a8aaab;
+    border: 3px solid #a8aaab;
     font-size: 26px;
     border-radius: 10px;
   }
@@ -160,7 +160,7 @@
   .start-wrap {
     width: 120px;
     height: 120px;
-    background: #027be3;
+    background: blue;
     border-radius: 50%;
     font-size: 80px;
     margin: 0 auto;
@@ -227,13 +227,25 @@
     width: 40px;
     height: 40px;
     border-radius: 50%;
-    background: #027be3;
+    background: blue;
     color: #fff;
     font-size: 18px;
     font-weight: bold;
     text-align: center;
-    line-height: 35px;
-    border: 2px solid rgb(153, 151, 151);
+    line-height: 36px;
+    //border: 2px solid rgb(153, 151, 151);
+  }
+  .start-btn {
+    background: blue;
+    color: white;
+    text-align: center;
+    font-weight: bolder;
+    padding:10px;
+    border-radius: 5px;
+    cursor: pointer;
+    &:hover{
+      background: darken(blue,10%);
+    }
   }
 
   .result-box {