diff --git a/src/views/projectAdmin/dataBoard/projectHuScreen/qualityManage/leftBottom.vue b/src/views/projectAdmin/dataBoard/projectHuScreen/qualityManage/leftBottom.vue
index 4ea4aba8..cf78af7e 100644
--- a/src/views/projectAdmin/dataBoard/projectHuScreen/qualityManage/leftBottom.vue
+++ b/src/views/projectAdmin/dataBoard/projectHuScreen/qualityManage/leftBottom.vue
@@ -1,21 +1,18 @@
 <template>
-  <!-- 问题占比 -->
-  <div class="frequentProblems">
-    <div class="title">{{ title }}</div>
-    <div class="content">
-      <JBarChart :xData="xData" :yData="yData" :title="{ text: '频发问题类别排名前十' }" />
-    </div>
-  </div>
+  <Card :title="title">
+    <JBarChart :xData="xData" :yData="yData" :title="{ text: '频发问题类别排名前十' }" :color="['#557DEE']" />
+  </Card>
 </template>
 
 <script>
+import Card from '../components/Card.vue'
 import JBarChart from '../jChart/bar/JBarChart.vue'
 export default {
-  components: { JBarChart },
+  components: { Card, JBarChart },
   props: {
     title: {
       type: String,
-      default: 'default title'
+      default: ''
     }
   },
   data() {
@@ -27,20 +24,4 @@ export default {
 }
 </script>
 
-<style lang="less" scoped>
-.frequentProblems {
-  width: 100%;
-  height: 100%;
-  border: 1px solid #0081c3;
-  .title {
-    padding-left: 6px;
-    height: 30px;
-    line-height: 30px;
-    font-size: 18px;
-    color: #6ee4f0;
-  }
-  .content {
-    height: calc(100% - 30px);
-  }
-}
-</style>
+<style lang="less" scoped></style>