fix: 修改成绩报告进度pie样式

src/pages/exam/components/pieChart.vue

@@ -2,7 +2,7 @@
   <div class="chart">
     <svg width="148" height="148" viewbox="0 0 148 148" class="svg-rotate">
       <circle cx="74" cy="74" r="70" stroke-width="7" stroke="#efefef" fill="none"></circle>
-      <circle cx="74" cy="74" r="70" stroke-width="7" stroke="#4cce8c" fill="none" :stroke-dasharray="data" stroke-linecap="round"></circle>
+      <circle cx="74" v-if="this.accuracy" cy="74" r="70" stroke-width="7" stroke="#4cce8c" fill="none" :stroke-dasharray="data" stroke-linecap="round"></circle>
     </svg>
     <div class="chart-txt">
       <slot name="tips"></slot>
@@ -33,15 +33,15 @@ export default {
   width: auto;
   .chart-txt{
     position: absolute;
-    top: 0;
+    top: 50%;
     left: 0;
     width: 100%;
     text-align: center;
+    transform:translateY(-50%);
     .num{
-      color: #000;
+      color: #333;
       font-size: 38px;
       font-weight: bold;
-      padding-top: 32px;
     }
     .t{
       color: #999;

src/pages/exam/courseExam/chapter/result.vue

@@ -14,19 +14,23 @@
             <div class="t">正确率</div>
           </template>
         </chart> -->
+        <div class="chart-item" v-if="objectQuestionTotal">
+          <div class="chart-title">客观题</div>
           <chart :accuracy="objectQuestionScore" :accuracScore="objectQuestionTotal">
             <template v-slot:tips>
-            <div class="num">{{ objectQuestionScore || '-' }}分</div>
-            <div class="t">客观题</div>
+              <div class="num">{{ objectQuestionScore }}分</div>
             </template>
           </chart>
-        <chart style="margin-left:60px;" :accuracy="subjectQuestionScore" :accuracScore="subjectQuestionTotal">
+        </div>
+        <div class="chart-item" v-if="subjectQuestionTotal">
+          <div class="chart-title">主观题</div>
+          <chart :accuracy="subjectQuestionScore" :accuracScore="subjectQuestionTotal">
             <template v-slot:tips>
               <div class="num">{{ subjectQuestionScore || '-' }}分</div>
-            <div class="t">主观题</div>
             </template>
           </chart>
         </div>
+      </div>
       <div class="assess">测试评估</div>
       <div class="assess-box">
         <div class="prog">
@@ -215,6 +219,18 @@ export default {
       margin: 26px 0 0;
       display:flex;
       justify-content:center;
+      .chart-item{
+        display:flex;
+        align-items:center;
+        .chart-title{
+          font-size:30px;
+          color:#333;
+          margin-right:20px;
+        }
+      }
+      .chart-item:nth-child(2){
+        margin-left:60px;
+      }
     }
     .assess {
       font-size: 18px;

src/pages/exam/testExam/exam/result.vue

@@ -8,19 +8,23 @@
         </span>
       </div>
       <div class="chart-box">
-        <chart v-if="objectQuestionTotal" :accuracy="objectQuestionScore" :accuracScore="objectQuestionTotal">
+        <div class="chart-item" v-if="objectQuestionTotal">
+          <div class="chart-title">客观题</div>
+          <chart :accuracy="objectQuestionScore" :accuracScore="objectQuestionTotal">
             <template v-slot:tips>
-            <div class="num">{{ objectQuestionScore || '-' }}分</div>
-            <div class="t">客观题</div>
+              <div class="num">{{ objectQuestionScore }}分</div>
             </template>
           </chart>
-        <chart v-if="subjectQuestionTotal" :accuracy="subjectQuestionScore" :accuracScore="subjectQuestionTotal">
+        </div>
+        <div class="chart-item" v-if="subjectQuestionTotal">
+          <div class="chart-title">主观题</div>
+          <chart :accuracy="subjectQuestionScore" :accuracScore="subjectQuestionTotal">
             <template v-slot:tips>
               <div class="num">{{ subjectQuestionScore || '-' }}分</div>
-            <div class="t">主观题</div>
             </template>
           </chart>
         </div>
+      </div>
       <div class="assess">测试评估</div>
       <div class="assess-box">
         <div class="prog">
@@ -203,7 +207,16 @@ export default {
       margin: 26px 0 0;
       display:flex;
       justify-content:center;
-      .chart:nth-child(2){
+      .chart-item{
+        display:flex;
+        align-items:center;
+        .chart-title{
+          font-size:30px;
+          color:#333;
+          margin-right:20px;
+        }
+      }
+      .chart-item:nth-child(2){
         margin-left:60px;
       }
     }