diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 1c19f2a..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,113 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <h2>Essential Links</h2>
-    <ul>
-      <li>
-        <a
-          href="https://vuejs.org"
-          target="_blank"
-        >
-          Core Docs
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://forum.vuejs.org"
-          target="_blank"
-        >
-          Forum
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://chat.vuejs.org"
-          target="_blank"
-        >
-          Community Chat
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://twitter.com/vuejs"
-          target="_blank"
-        >
-          Twitter
-        </a>
-      </li>
-      <br>
-      <li>
-        <a
-          href="http://vuejs-templates.github.io/webpack/"
-          target="_blank"
-        >
-          Docs for This Template
-        </a>
-      </li>
-    </ul>
-    <h2>Ecosystem</h2>
-    <ul>
-      <li>
-        <a
-          href="http://router.vuejs.org/"
-          target="_blank"
-        >
-          vue-router
-        </a>
-      </li>
-      <li>
-        <a
-          href="http://vuex.vuejs.org/"
-          target="_blank"
-        >
-          vuex
-        </a>
-      </li>
-      <li>
-        <a
-          href="http://vue-loader.vuejs.org/"
-          target="_blank"
-        >
-          vue-loader
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/awesome-vue"
-          target="_blank"
-        >
-          awesome-vue
-        </a>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  data () {
-    return {
-      msg: 'Welcome to Your Vue.js App'
-    }
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h1, h2 {
-  font-weight: normal;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
diff --git a/src/components/VParking.vue b/src/components/VParking.vue
index 0e9100d..b3e1212 100644
--- a/src/components/VParking.vue
+++ b/src/components/VParking.vue
@@ -2,7 +2,9 @@
     <div class="theme-wrap">
         <card-title> <span>停车场消息</span></card-title>
         <div class="theme-body">
-            <account-num></account-num>
+            <account-num>
+                <span>总计</span>
+            </account-num>
             <ul class="theme-container">
                 <li class="roadside">
                     <p>{{sideNum|filterTotal}}</p>
diff --git a/src/components/VToll.vue b/src/components/VToll.vue
new file mode 100644
index 0000000..02250d0
--- /dev/null
+++ b/src/components/VToll.vue
@@ -0,0 +1,91 @@
+<template>
+    <div class="theme-wrap">
+        <card-title> <span>收费员消息</span></card-title>
+        <div class="theme-body">
+            <account-num>
+                <span>应签到</span>
+            </account-num>
+            <ul class="theme-container">
+                <li class="roadside">
+                    <p>{{sideNum|filterTotal}}</p>
+                    <p>已签到</p>
+                </li>
+                <li class="roadclose">
+                    <p>{{closeNum|filterTotal}}</p>
+                    <p>未签到</p>
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<script>
+import CardTitle from './base/CardTitle'
+import AccountNum from './base/AccountNum'
+export default {
+  name: 'VToll',
+  components: {
+    CardTitle,
+    AccountNum
+  },
+  data(){
+    return{
+      sideNum: 23454,
+      closeNum: 23454
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+    .theme-wrap {
+        height: 100%;
+    }
+    .theme-body {
+        height: calc(100% - 30px);
+        margin-left: 20px;
+    }
+    .theme-container{
+        height: 70%;
+        display: flex;
+        align-items: center;
+        >li{
+            flex: 1;
+            height: 49px;
+            padding-left: 70px;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            &:nth-of-type(1){
+                p{
+                    &:first-child{
+                        @include fontStyle(24px);
+                        background-image: $fontBlue;
+                    }
+                    &:last-child{
+                        font-size: 16px;
+                    }
+                }
+            }
+            &:nth-of-type(2){
+                p{
+                    &:first-child{
+                        @include fontStyle(24px);
+                        background-image: $fontOrange;
+                    }
+                    &:last-child{
+                        font-size: 16px;
+                    }
+                }
+            }
+        }
+
+        .roadside{
+            background: url("../images/content/sign.png") no-repeat 0 center;
+        }
+        .roadclose{
+            background: url("../images/content/nosign.png") no-repeat 0 center;
+        }
+    }
+
+</style>
diff --git a/src/components/base/AccountNum.vue b/src/components/base/AccountNum.vue
index a2f9dc7..c94013d 100644
--- a/src/components/base/AccountNum.vue
+++ b/src/components/base/AccountNum.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="total-wrap">
-        <span>总计</span>
+        <slot></slot>
         <div class="total-main" >
             <div  v-for="item in total" :key="item" :class="item !==',' ? 'eleNumBg':'noeleNumBg'" >
                 {{item}}
@@ -26,8 +26,13 @@ export default {
         height: 30%;
         display: flex;
         align-items: center;
+        span{
+            display: inline-block;
+            width: 50px;
+            text-align: left;
+        }
         .total-main{
-            margin-left: 10px;
+            /*margin-left: 10px;*/
             padding: 5px 5px 5px 0;
             background: url("../../images/content/numBorder.svg") no-repeat;
             background-size: 100% 100%;
diff --git a/src/images/content/nosign.png b/src/images/content/nosign.png
new file mode 100644
index 0000000..ae48249
--- /dev/null
+++ b/src/images/content/nosign.png
diff --git a/src/images/content/sign.png b/src/images/content/sign.png
new file mode 100644
index 0000000..a40bbae
--- /dev/null
+++ b/src/images/content/sign.png
diff --git a/src/view/VHome.vue b/src/view/VHome.vue
index 7952c4c..bdc1f45 100644
--- a/src/view/VHome.vue
+++ b/src/view/VHome.vue
@@ -6,7 +6,9 @@
         <div class="frame-wrap">
           <v-parking></v-parking>
         </div>
-        <div class="frame-wrap frame-wrap-center"></div>
+        <div class="frame-wrap frame-wrap-center">
+          <v-toll></v-toll>
+        </div>
         <div class="frame-wrap"></div>
       </li>
       <li class="main-center">
@@ -25,12 +27,14 @@
 import VHeader from '../components/VHeader'
 import VMap from '../components/VMap'
 import VParking from '../components/VParking'
+import VToll from '../components/VToll'
 export default {
   name: 'VHome',
   components: {
     VHeader,
     VMap,
-    VParking
+    VParking,
+    VToll
   }
 }
 </script>