diff --git a/src/App.vue b/src/App.vue
index 23c3831..60caba2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -27,10 +27,8 @@ export default {
 
 <style>
 #app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
+  color: #404040;
 }
 </style>
diff --git a/src/assets/images/parkName.png b/src/assets/images/parkName.png
new file mode 100644
index 0000000..10d6302
--- /dev/null
+++ b/src/assets/images/parkName.png
diff --git a/src/assets/style/mixin.scss b/src/assets/style/mixin.scss
index 163e371..2d10ff6 100644
--- a/src/assets/style/mixin.scss
+++ b/src/assets/style/mixin.scss
@@ -1,4 +1,4 @@
-
+$whiteBg: #fff;
 //清楚浮动
 @mixin clearfix() {
   &:before,
diff --git a/src/assets/style/reset.css b/src/assets/style/reset.css
index 687d05f..f93d007 100644
--- a/src/assets/style/reset.css
+++ b/src/assets/style/reset.css
@@ -10,7 +10,7 @@ body {
   font-size: 1.4rem;
   line-height: 1.5;
   color: #333333;
-  background-color: white;
+  background-color: #f7f7f7;
   height: 100%;
   overflow-x: hidden;
   -webkit-overflow-scrolling: touch;
diff --git a/src/components/geomagnetism.vue b/src/components/geomagnetism.vue
index 3e53192..0a5d72a 100644
--- a/src/components/geomagnetism.vue
+++ b/src/components/geomagnetism.vue
@@ -1,23 +1,80 @@
 <template>
-  <div class="hello">
-    1
+  <div class="">
+    <ul class="dici-wrap">
+      <li>
+        <p class="parkName">赤峰市万达A区停车场</p>
+        <ul class="diciList">
+          <li>
+            编号 ：B8888B8888
+          </li>
+          <li>
+            故障时间 ：2019-01-91 15:31:00
+          </li>
+        </ul>
+        <ul class="diciList">
+          <li>
+            编号 ：B8888B8888
+          </li>
+          <li>
+            故障时间 ：2019-01-91 15:31:00
+          </li>
+        </ul>
+      </li>
+      <li>
+        <p class="parkName">赤峰市万达A区停车场</p>
+        <ul class="diciList">
+          <li>
+            编号 ：B8888B8888
+          </li>
+          <li>
+            故障时间 ：2019-01-91 15:31:00
+          </li>
+        </ul>
+      </li>
+    </ul>
   </div>
 </template>
 
 <script>
 export default {
   name: 'geomagnetism',
-  data () {
-    return {
-      msg: 'Welcome to Your Vue.js App'
-    }
+  data() {
+    return {}
+  },
+  created() {
+    document.title = '地磁故障'
   }
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
-.hello{
+  .dici-wrap > li {
+    background-color: $whiteBg;
+    margin-bottom: 12px;
+    padding: 15px 15px;
+  }
 
-}
+  .parkName {
+    font-size: 1.8rem;
+    font-weight: 600;
+    padding-left: 2.5rem;
+    background: url("../assets/images/parkName.png") no-repeat 0 center;
+    background-size: 1.8rem 1.8rem;
+  }
+  .diciList{
+    background-color: #fafafa;
+    border-radius: 4px;
+    padding: 0 15px;
+    margin-top: 12px;
+    >li{
+      height: 4.5rem;
+      line-height: 4.5rem;
+      position: relative;
+      &:first-child:after{
+       @include border-1px(#D9D9D9, bottom)
+        opacity: .5;
+      }
+    }
+  }
 </style>
diff --git a/src/components/screen.vue b/src/components/screen.vue
index da3a2a7..c2fa05b 100644
--- a/src/components/screen.vue
+++ b/src/components/screen.vue
@@ -4,7 +4,10 @@
 
 <script>
 export default {
-  name: 'screen'
+  name: 'screen',
+  created() {
+    document.title = '诱导屏故障'
+  }
 }
 </script>
 
diff --git a/src/filters/index.js b/src/filters/index.js
new file mode 100644
index 0000000..a5a0003
--- /dev/null
+++ b/src/filters/index.js
@@ -0,0 +1,39 @@
+function formateday() {
+  let date = new Date()
+  let str = ''
+  let year = date.getFullYear()
+  let month = date.getMonth()+1<10? "0"+ (date.getMonth()+1) : date.getMonth()+1
+  let day = date.getDate()<10 ? "0"+date.getDate() : date.getDate()
+  str = year +"-"+ month +"-"+ day
+  return str
+}
+
+function formateTime() {
+  let date = new Date()
+  let str = ''
+  let hours = date.getHours()<10? "0"+date.getHours() : date.getHours()
+  let minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
+  let seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
+
+  str = hours+":"+minutes+":"+seconds
+  return str
+}
+
+function formaterTotal(val) {
+  // console.log(val)
+  // console.log(typeof val)
+  let str = val.toString()
+  let newStr = ''
+  let count = 0
+  // for(let 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++
+  // }
+  return str.split("")
+}
+
+export  { formateday, formateTime, formaterTotal }
diff --git a/src/main.js b/src/main.js
index 43debc5..298f906 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,6 +4,17 @@ import Vue from 'vue'
 import App from './App'
 require ('./assets/style/reset.css')
 
+Vue.filter('dataFilter',function () {
+  let date = new Date()
+  let str = ''
+  let hours = date.getHours()<10? "0"+date.getHours() : date.getHours()
+  let minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
+  let seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
+
+  str = hours+":"+minutes+":"+seconds
+  return str
+})
+
 Vue.config.productionTip = false
 
 /* eslint-disable no-new */