diff --git a/src/assets/images/service/carservice.png b/src/assets/images/service/carservice.png
new file mode 100644
index 0000000..ebd18a3
--- /dev/null
+++ b/src/assets/images/service/carservice.png
diff --git a/src/assets/images/service/safeservice.png b/src/assets/images/service/safeservice.png
new file mode 100644
index 0000000..f8f278b
--- /dev/null
+++ b/src/assets/images/service/safeservice.png
diff --git a/src/assets/images/service/tripservice.png b/src/assets/images/service/tripservice.png
new file mode 100644
index 0000000..d6b9250
--- /dev/null
+++ b/src/assets/images/service/tripservice.png
diff --git a/src/main.js b/src/main.js
index e2aa3c9..2ba62cd 100644
--- a/src/main.js
+++ b/src/main.js
@@ -69,9 +69,13 @@ import {
   Toast,
   dateFormat,
   Loading,
-  XDialog
+  XDialog,
+  Flexbox,
+  FlexboxItem
 }from 'vux'
 
+Vue.component('flexbox', Flexbox)
+Vue.component('flexbox-item', FlexboxItem)
 Vue.component('x-dialog', XDialog)
 Vue.component('loading', Loading)
 Vue.component('Toast', Toast)
@@ -94,6 +98,7 @@ Vue.component('tabbar-item', TabbarItem);
 Vue.component('tab', Tab);
 Vue.component('tab-item', TabItem);
 
+
 import  { LoadingPlugin } from 'vux'
 Vue.use(LoadingPlugin)
 
diff --git a/src/router/index.js b/src/router/index.js
index 075dc8a..f03b48e 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -257,6 +257,24 @@ export default new Router({
       }
     },
 
+    {
+      path: '/service',
+      name: 'service',
+      component: () => import("@/views/service/service.vue"),
+      meta:{
+        title:'周边服务'
+      }
+    },
+
+    {
+      path: '/serviceList',
+      name: 'serviceList',
+      component: () => import("@/views/service/serviceList.vue"),
+      meta:{
+        title:'服务列表'
+      }
+    },
+
 
 
   ]
diff --git a/src/views/service/service.vue b/src/views/service/service.vue
new file mode 100644
index 0000000..c57794e
--- /dev/null
+++ b/src/views/service/service.vue
@@ -0,0 +1,53 @@
+<template>
+    <div>
+      <div style="height: 300px">
+        <mt-swipe :auto="4000">
+          <mt-swipe-item style="background-color: #f00">1</mt-swipe-item>
+          <mt-swipe-item style="background-color: #ff0">2</mt-swipe-item>
+          <mt-swipe-item style="background-color: #f0f">3</mt-swipe-item>
+        </mt-swipe>
+      </div>
+
+      <flexbox :gutter="0">
+        <flexbox-item class="nav-warp">
+          <div>
+            <img src="../../assets/images/service/carservice.png" height="32" width="32"/>
+          </div>
+          <p>汽车服务</p>
+        </flexbox-item>
+
+        <flexbox-item class="nav-warp">
+          <div>
+            <img src="../../assets/images/service/safeservice.png" height="32" width="32"/>
+          </div>
+          <p>保险服务</p>
+        </flexbox-item>
+
+        <flexbox-item class="nav-warp">
+          <div>
+            <img src="../../assets/images/service/tripservice.png" height="32" width="32"/>
+          </div>
+          <p>出行服务</p>
+        </flexbox-item>
+
+      </flexbox>
+
+    </div>
+</template>
+
+<script>
+export default {
+  name: "service"
+};
+</script>
+
+<style scoped lang="scss">
+.nav-warp{
+  padding-top: 20px;
+  text-align: center;
+  font-size: 16px;
+  img{
+    display: inline-block;
+  }
+}
+</style>
diff --git a/src/views/service/serviceList.vue b/src/views/service/serviceList.vue
new file mode 100644
index 0000000..e7d2f21
--- /dev/null
+++ b/src/views/service/serviceList.vue
@@ -0,0 +1,89 @@
+<template>
+  <div>
+    <ul class="serviceList">
+      <li>
+        <div class="serviceListTitle">
+          <span class="serviceListName">阳光保险</span>
+          <span>95510</span>
+        </div>
+
+        <div class="serviceListCon">
+          <div>1</div>
+          <div>
+            <p>阳光保险于2005年7月成立,阳光保险于2005年7月成立,阳光保险于2005年7月成立,阳光保险于2005年7月成立,</p>
+            <span class="consultBtn">
+              咨询
+            </span>
+
+          </div>
+          <div class="serviceListArrow">
+            >
+          </div>
+        </div>
+
+      </li>
+      <li>
+        1
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "serviceList"
+};
+</script>
+
+<style scoped lang="scss">
+  .serviceList {
+    padding: 10px;
+    > li {
+      padding: 10px;
+      margin-bottom: 10px;
+      background-color: #fff;
+      border-radius: 4px;
+    }
+  }
+
+  .serviceListTitle {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .serviceListName {
+    font-size: 16px;
+    color: #000;
+    font-weight: 600;
+  }
+
+  .serviceListCon{
+    display: flex;
+    margin-top: 10px;
+    >div:nth-of-type(2){
+      flex: 1;
+      padding: 0 10px;
+      overflow: hidden;
+      p{
+        width: 100%;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+  }
+  .consultBtn{
+    display: inline-block;
+    padding: 3px  30px;
+    margin: 5px 0;
+    background-color: #1AAD19;
+    border-radius: 4px;
+    color: #fff;
+    cursor: pointer;
+  }
+  .serviceListArrow{
+    font-size: 18px;
+    line-height: 56px;
+    font-weight: 600;
+  }
+</style>