diff --git a/src/assets/images/service/service.jpg b/src/assets/images/service/service.jpg
new file mode 100644
index 0000000..d55d574
--- /dev/null
+++ b/src/assets/images/service/service.jpg
diff --git a/src/assets/images/service/service1.jpeg b/src/assets/images/service/service1.jpeg
new file mode 100644
index 0000000..fe67a87
--- /dev/null
+++ b/src/assets/images/service/service1.jpeg
diff --git a/src/assets/images/service/service2.jpeg b/src/assets/images/service/service2.jpeg
new file mode 100644
index 0000000..67a64d9
--- /dev/null
+++ b/src/assets/images/service/service2.jpeg
diff --git a/src/assets/images/service/service3.jpeg b/src/assets/images/service/service3.jpeg
new file mode 100644
index 0000000..90b76af
--- /dev/null
+++ b/src/assets/images/service/service3.jpeg
diff --git a/src/assets/images/service/serviceIphone.png b/src/assets/images/service/serviceIphone.png
new file mode 100644
index 0000000..4264d49
--- /dev/null
+++ b/src/assets/images/service/serviceIphone.png
diff --git a/src/assets/images/service/serviceNav.png b/src/assets/images/service/serviceNav.png
new file mode 100644
index 0000000..e048450
--- /dev/null
+++ b/src/assets/images/service/serviceNav.png
diff --git a/src/assets/images/service/serviceSrar.png b/src/assets/images/service/serviceSrar.png
new file mode 100644
index 0000000..6b1b054
--- /dev/null
+++ b/src/assets/images/service/serviceSrar.png
diff --git a/src/main.js b/src/main.js
index 2ba62cd..a1ce2f8 100644
--- a/src/main.js
+++ b/src/main.js
@@ -71,9 +71,11 @@ import {
   Loading,
   XDialog,
   Flexbox,
-  FlexboxItem
+  FlexboxItem,
+  PopupPicker
 }from 'vux'
 
+Vue.component('popup-picker', PopupPicker)
 Vue.component('flexbox', Flexbox)
 Vue.component('flexbox-item', FlexboxItem)
 Vue.component('x-dialog', XDialog)
diff --git a/src/views/service/service.vue b/src/views/service/service.vue
index c57794e..f87127a 100644
--- a/src/views/service/service.vue
+++ b/src/views/service/service.vue
@@ -1,38 +1,38 @@
 <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>
+    <div style="height: 200px">
+      <mt-swipe :auto="4000">
+        <mt-swipe-item class="service1"></mt-swipe-item>
+        <mt-swipe-item class="service2"></mt-swipe-item>
+        <mt-swipe-item class="service3"></mt-swipe-item>
+      </mt-swipe>
     </div>
+
+    <flexbox :gutter="0">
+      <flexbox-item class="nav-warp">
+        <div @click="$router.push({path:'serviceDetail'})">
+          <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>
@@ -42,12 +42,27 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.nav-warp{
-  padding-top: 20px;
-  text-align: center;
-  font-size: 16px;
-  img{
-    display: inline-block;
+  .nav-warp {
+    padding-top: 20px;
+    text-align: center;
+    font-size: 16px;
+    img {
+      display: inline-block;
+    }
+  }
+
+  .service1 {
+    background: url("../../assets/images/service/service1.jpeg") no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .service2 {
+    background: url("../../assets/images/service/service2.jpeg") no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .service3 {
+    background: url("../../assets/images/service/service3.jpeg") no-repeat;
+    background-size: 100% 100%;
   }
-}
 </style>
diff --git a/src/views/service/serviceDetail.vue b/src/views/service/serviceDetail.vue
index 221ae6c..4060d4a 100644
--- a/src/views/service/serviceDetail.vue
+++ b/src/views/service/serviceDetail.vue
@@ -1,19 +1,140 @@
 <template>
-    <div>
-      <ul class="serviceDetailWrap">
-        <li>1</li>
-      </ul>
+  <div>
+    <div style="height: 44px;">
+      <mt-search
+        v-model="value"
+        cancel-text="取消"
+        placeholder="搜索">
+      </mt-search>
     </div>
+
+    <group title="" label-width="5em">
+    <popup-picker :title="title1" :data="list1" v-model="value1" @on-show="onShow" @on-hide="onHide" @on-change="onChange" placeholder="请选择"></popup-picker>
+      <popup-picker :title="title2" :data="list2" v-model="value2" @on-show="onShow" @on-hide="onHide" @on-change="onChange" placeholder="请选择"></popup-picker>
+    </group>
+    <ul class="serviceDetailWrap">
+      <li>
+        <div class="serviceDetailTop">
+          <p>
+            <span style="color: #ffbe00;font-weight: 600;font-size: 16px;">途虎养车磁湖东路店</span>
+          </p>
+          <p>
+            <span style="color: #ff4949">营业时间：早8店晚21点</span>
+          </p>
+          <p>
+            <span>店长：梁浩</span>
+          </p>
+          <p>
+            <span>联系电话：13333333333</span>
+          </p>
+        </div>
+        <p style="display: flex;justify-content: space-between;">
+          <span>地理位置: 黄石西塞山区慈湖东路26号途虎养车</span>
+          <span>
+             <img src="../../assets/images/service/serviceNav.png" height="16" width="16"/>
+          </span>
+        </p>
+        <p style="display: flex;justify-content: space-between;padding-top: 5px;">
+          <span class="serviceStar">八公里内道路援助</span>
+          <span>
+            <img src="../../assets/images/service/serviceIphone.png" height="16" width="16"/>
+          </span>
+        </p>
+      </li>
+
+      <li>
+        <div class="serviceDetailTop">
+          <p>
+            <span style="color: #ffbe00;font-weight: 600;font-size: 16px;">途虎养车磁湖东路店</span>
+          </p>
+          <p>
+            <span style="color: #ff4949">营业时间：早8店晚21点</span>
+          </p>
+          <p>
+            <span>店长：梁浩</span>
+          </p>
+          <p>
+            <span>联系电话：13333333333</span>
+          </p>
+        </div>
+        <p style="display: flex;justify-content: space-between;">
+          <span>地理位置: 黄石西塞山区慈湖东路26号途虎养车</span>
+          <span>
+             <img src="../../assets/images/service/serviceNav.png" height="16" width="16"/>
+          </span>
+        </p>
+        <p style="display: flex;justify-content: space-between;padding-top: 5px;">
+          <span class="serviceStar">八公里内道路援助</span>
+          <span>
+            <img src="../../assets/images/service/serviceIphone.png" height="16" width="16"/>
+          </span>
+        </p>
+      </li>
+
+    </ul>
+  </div>
 </template>
 
 <script>
 export default {
-  name: "serviceDetail"
-};
-</script>
+  name: "serviceDetail",
+  data () {
+    return {
+      value:'',
+      title1: '全部服务',
+      value1: ['全部'],
+      list1: [['全部', '汽车', '美容']],
+      title2: '附近',
+      value2: ['3KM'],
+      list2: [['3KM', '10KM', '20KM']],
+    }
+  },
+  methods: {
+    onChange (val) {
+      console.log('val change', val)
+    },
+    changeList10 () {
+      this.list1 = [['小米1', 'iPhone1', '华为1', '情怀1', '三星1', '其他1', '不告诉你1']]
+    },
+    changeList11 () {
+      this.list1[0].push('我是push条目')
+    },
+    changeList20 () {
+
+    },
 
-<style scoped>
-.serviceDetailWrap{
-  padding: 10px 10px;
+    onShow () {
+      console.log('on show')
+    },
+    onHide (type) {
+      console.log('on hide', type)
+    }
+  },
 }
+</script>
+
+<style scoped lang="scss">
+  .serviceDetailWrap {
+    padding: 10px 10px;
+    > li {
+      height: 140px;
+      margin-bottom: 10px;
+      border-bottom: 1px solid #eee;
+      /*display: flex;*/
+    }
+  }
+
+  .serviceDetailTop {
+    padding-left: 130px;
+    background-image: url("../../assets/images/service/service.jpg");
+    background-repeat: no-repeat;
+    background-size: 120px 100px;
+    margin-bottom: 5px;
+  }
+
+  .serviceStar{
+    padding-left: 20px;
+    background: url("../../assets/images/service/serviceSrar.png") no-repeat 0 center;
+    color: #ff4949;
+  }
 </style>