diff --git a/src/components/total.vue b/src/components/total.vue
index 53253ad..950a12b 100644
--- a/src/components/total.vue
+++ b/src/components/total.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="totalwrap">
-    总计：{{initnum}}
+    总计
+    <span v-for="item in this.$util.formatNumArr(totalNum)" :class="item !== ',' ? 'titlebg' : '' ">{{item}}</span>
   </div>
 </template>
 
 <script>
-import {formatNum} from '../utils/formatNum'
 
 export default {
   name: 'total',
@@ -14,7 +14,7 @@ export default {
   },
   data() {
     return {
-      initnum: formatNum(this.totalNum)
+      // initnum: this.$util.formatNumArr(this.totalNum)
     }
 
   }
@@ -26,4 +26,8 @@ export default {
     height: 40px;
     color: #fff;
   }
+
+  .titlebg {
+    background: #f00;
+  }
 </style>
diff --git a/src/filters/filters.js b/src/filters/filters.js
new file mode 100644
index 0000000..f03da20
--- /dev/null
+++ b/src/filters/filters.js
@@ -0,0 +1,34 @@
+export function formatNum(str) {
+  var newStr = "";
+  var count = 0;
+  for (var i = str.length - 1; i >= 0; i--) {
+    if (count % 3 == 0 && count != 0) {
+
+      newStr = str.charAt(i) + "," + newStr;
+    } else {
+      newStr = str.charAt(i) + newStr;
+    }
+    count++;
+  }
+  str = newStr;
+  return str;
+
+}
+
+export function formatNumArr(str) {
+  var newStr = "";
+  var count = 0;
+  for (var i = str.length - 1; i >= 0; i--) {
+    if (count % 3 == 0 && count != 0) {
+
+      newStr = str.charAt(i) + "," + newStr;
+    } else {
+      newStr = str.charAt(i) + newStr;
+    }
+    count++;
+  }
+  str = newStr;
+  str = str.split('')
+  return str;
+
+}
diff --git a/src/main.js b/src/main.js
index e15548b..2386c7f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,6 +4,13 @@ import Vue from 'vue'
 import App from './App'
 import './mock/mock'
 import '@/styles/reset.css'/*引入重置样式*/
+import * as filters from './filters/filters'
+import util from './utils/formatNum'
+Vue.prototype.$util = util
+
+Object.keys(filters).forEach(key => {
+  Vue.filter(key, filters[key])
+})
 
 Vue.config.productionTip = false
 
diff --git a/src/utils/formatNum.js b/src/utils/formatNum.js
index 6ab277d..f854ef5 100644
--- a/src/utils/formatNum.js
+++ b/src/utils/formatNum.js
@@ -1,4 +1,22 @@
-export function formatNum(str) {
+// export function formatNum(str) {
+//   var newStr = "";
+//   var count = 0;
+//   for (var i = str.length - 1; i >= 0; i--) {
+//     if (count % 3 == 0 && count != 0) {
+//
+//       newStr = str.charAt(i) + "," + newStr;
+//     } else {
+//       newStr = str.charAt(i) + newStr;
+//     }
+//     count++;
+//   }
+//   str = newStr;
+//   return str;
+//
+// }
+
+function formatNumArr(str) {
+  console.log(typeof str)
   var newStr = "";
   var count = 0;
   for (var i = str.length - 1; i >= 0; i--) {
@@ -11,6 +29,9 @@ export function formatNum(str) {
     count++;
   }
   str = newStr;
+  str = str.split('')
   return str;
 
 }
+
+export default {formatNumArr}