diff --git a/src/components/capsuleChart/index.vue b/src/components/capsuleChart/index.vue
index ab9726a..47c08b8 100644
--- a/src/components/capsuleChart/index.vue
+++ b/src/components/capsuleChart/index.vue
@@ -72,6 +72,8 @@ export default {
 </script>
 
 <style lang="less">
+@import url('../../assets/style/index.less');
+
 .capsule-chart {
   position: relative;
   display: flex;
@@ -86,7 +88,7 @@ export default {
     box-sizing: border-box;
     padding-right: 10px;
     text-align: right;
-    font-size: 12px;
+    font-size: @CCLCFS;
 
     div {
       height: 20px;
@@ -102,7 +104,7 @@ export default {
   }
 
   .capsule-item {
-    box-shadow: 0 0 3px #999;
+    box-shadow: 0 0 3px @CCCIBSC;
     height: 10px;
     margin: 5px 0px;
     border-radius: 5px;
@@ -120,7 +122,7 @@ export default {
     display: flex;
     flex-direction: row;
     line-height: 20px;
-    font-size: 12px;
+    font-size: @CCULFS;
   }
 
   .unit-text {
diff --git a/src/components/ringChart/index.vue b/src/components/ringChart/index.vue
index 9fdb666..e04791b 100644
--- a/src/components/ringChart/index.vue
+++ b/src/components/ringChart/index.vue
@@ -357,6 +357,8 @@ export default {
 </script>
 
 <style lang="less">
+@import url('../../assets/style/index.less');
+
 .ring-chart {
   position: relative;
 
@@ -376,17 +378,17 @@ export default {
     max-width: 25%;
 
     .percent-show {
-      font-size: 28px;
+      font-size: @RCPSNFS;
 
       &::after {
         content: '%';
-        font-size: 15px;
+        font-size: @RCPSAFS;
         margin-left: 5px;
       }
     }
 
     .current-label {
-      font-size: 16px;
+      font-size: @RCCLFS;
       margin-top: 5%;
       transform: rotateY(0deg);
       overflow: hidden;
@@ -410,9 +412,9 @@ export default {
     width: 100%;
     height: 30px;
     bottom: 0px;
-    font-size: 12px;
+    font-size: @RCLLFS;
     line-height: 30px;
-    color: rgba(255, 255, 255, 0.6);
+    color: @RCLLC;
     display: flex;
     justify-content: space-around;