提交 89eb6051 authored 作者: pengxiaohui's avatar pengxiaohui

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

上级 e45fa9f6
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="chart"> <div class="chart">
<svg width="148" height="148" viewbox="0 0 148 148" class="svg-rotate"> <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="#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> </svg>
<div class="chart-txt"> <div class="chart-txt">
<slot name="tips"></slot> <slot name="tips"></slot>
...@@ -33,15 +33,15 @@ export default { ...@@ -33,15 +33,15 @@ export default {
width: auto; width: auto;
.chart-txt{ .chart-txt{
position: absolute; position: absolute;
top: 0; top: 50%;
left: 0; left: 0;
width: 100%; width: 100%;
text-align: center; text-align: center;
transform:translateY(-50%);
.num{ .num{
color: #000; color: #333;
font-size: 38px; font-size: 38px;
font-weight: bold; font-weight: bold;
padding-top: 32px;
} }
.t{ .t{
color: #999; color: #999;
......
...@@ -14,19 +14,23 @@ ...@@ -14,19 +14,23 @@
<div class="t">正确率</div> <div class="t">正确率</div>
</template> </template>
</chart> --> </chart> -->
<div class="chart-item" v-if="objectQuestionTotal">
<div class="chart-title">客观题</div>
<chart :accuracy="objectQuestionScore" :accuracScore="objectQuestionTotal"> <chart :accuracy="objectQuestionScore" :accuracScore="objectQuestionTotal">
<template v-slot:tips> <template v-slot:tips>
<div class="num">{{ objectQuestionScore || '-' }}</div> <div class="num">{{ objectQuestionScore }}</div>
<div class="t">客观题</div>
</template> </template>
</chart> </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> <template v-slot:tips>
<div class="num">{{ subjectQuestionScore || '-' }}</div> <div class="num">{{ subjectQuestionScore || '-' }}</div>
<div class="t">主观题</div>
</template> </template>
</chart> </chart>
</div> </div>
</div>
<div class="assess">测试评估</div> <div class="assess">测试评估</div>
<div class="assess-box"> <div class="assess-box">
<div class="prog"> <div class="prog">
...@@ -215,6 +219,18 @@ export default { ...@@ -215,6 +219,18 @@ export default {
margin: 26px 0 0; margin: 26px 0 0;
display:flex; display:flex;
justify-content:center; 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 { .assess {
font-size: 18px; font-size: 18px;
......
...@@ -8,19 +8,23 @@ ...@@ -8,19 +8,23 @@
</span> </span>
</div> </div>
<div class="chart-box"> <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> <template v-slot:tips>
<div class="num">{{ objectQuestionScore || '-' }}</div> <div class="num">{{ objectQuestionScore }}</div>
<div class="t">客观题</div>
</template> </template>
</chart> </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> <template v-slot:tips>
<div class="num">{{ subjectQuestionScore || '-' }}</div> <div class="num">{{ subjectQuestionScore || '-' }}</div>
<div class="t">主观题</div>
</template> </template>
</chart> </chart>
</div> </div>
</div>
<div class="assess">测试评估</div> <div class="assess">测试评估</div>
<div class="assess-box"> <div class="assess-box">
<div class="prog"> <div class="prog">
...@@ -203,7 +207,16 @@ export default { ...@@ -203,7 +207,16 @@ export default {
margin: 26px 0 0; margin: 26px 0 0;
display:flex; display:flex;
justify-content:center; 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; margin-left:60px;
} }
} }
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论