diff --git a/apis/interfaces/service.js b/apis/interfaces/service.js
new file mode 100644
index 0000000..2d4fc28
--- /dev/null
+++ b/apis/interfaces/service.js
@@ -0,0 +1,28 @@
+/**
+ * Web唐明明
+ * 匆匆数载恍如梦，岁月迢迢华发增。
+ * 碌碌无为枉半生，一朝惊醒万事空。
+ * moduleName: 服务
+ */
+
+import { request } from '../index'
+
+// 首页
+const index = (data) =>{
+	return request({
+		url: 'health/halls',
+        data:data
+	})
+}
+
+// 详情
+const hallsDet = (hall) =>{
+	return request({
+		url: 'health/halls/' + hall
+	})
+}
+
+export {
+	index,
+    hallsDet
+}
diff --git a/pages.json b/pages.json
index 99e31e9..faf4fcf 100644
--- a/pages.json
+++ b/pages.json
@@ -324,6 +324,22 @@
 				}
 			}
 		}
+	},{
+		"path": "pages/service/index",
+		"name": "serviceIndex",
+		"style": {
+			"navigationBarTitleText": "",
+            "navigationStyle": "custom",
+			"enablePullDownRefresh": false
+		}
+	},{
+		"path": "pages/service/details",
+		"name": "serviceDetails",
+		"style": {
+			"navigationBarTitleText": "",
+			"navigationBarBackgroundColor":"#FFFFFF",
+			"enablePullDownRefresh": false
+		}
 	}],
 	"tabBar": {
 		"borderStyle": "white",
@@ -337,7 +353,7 @@
 			{
 				"iconPath": "static/tabBar/tabBar_01.png",
 				"selectedIconPath": "static/tabBar/tabBar_show_01.png",
-				"pagePath": "pages/record/index",
+				"pagePath": "pages/service/index",
 				"text": "服务"
 			},
 			{
@@ -347,8 +363,8 @@
 				"text": "生活"
 			},
 			{
-				"iconPath": "static/tabBar/tabBar_01.png",
-				"selectedIconPath": "static/tabBar/tabBar_show_01.png",
+				"iconPath": "static/tabBar/tabBar_04.png",
+				"selectedIconPath": "static/tabBar/tabBar_show_04.png",
 				"pagePath": "pages/im/index",
 				"text": "聊聊"
 			},
diff --git a/pages/service/details.vue b/pages/service/details.vue
new file mode 100644
index 0000000..20a83b3
--- /dev/null
+++ b/pages/service/details.vue
@@ -0,0 +1,273 @@
+<template>
+    <view class="content">
+        <!-- 图片 -->
+        <view class="swiper">
+        	<swiper :indicator-dots="false" @change="current = $event.detail.current + 1">
+        		<swiper-item v-for="(item, index) in pictures" :key="index" @click="seeImg">
+        			<view class="swiper-cover">
+        				<image :src="item" mode="aspectFill" />
+        			</view>
+        		</swiper-item>
+        	</swiper>
+        	<view class="swiper-pages">
+        		{{ current }}/{{ pictures.length }}
+        	</view>
+        </view>
+        
+        <!-- 标题 -->
+        <view class="title">
+            <view class="name">
+                {{ hallsData.title}} · {{ hallsData.subtitle}}
+            </view>
+            <view class="address">
+                <u-icon name="map" style="margin-right: 10rpx;"></u-icon>{{ hallsData.address}}
+            </view>
+            <view class="area">
+                <u-icon name="home" style="margin-right: 10rpx;"></u-icon>{{ hallsData.areas}}㎡
+            </view>
+        </view>
+        
+        <!-- 场馆概况 -->
+        <view class="survey">
+            <view class="survey-title">
+                场馆概况
+            </view>
+            <view class="survey-text">
+                <rich-text :nodes="hallContent"></rich-text>
+            </view>
+        </view>
+        
+        <!-- 基础设施 -->
+        <view class="survey">
+            <view class="survey-title">
+                基础设施
+            </view>
+            <u-scroll-list class="facilities" :indicator="false" v-if="facilities.length > 0">
+            	<view class="list" v-for="(item, index) in facilities" :key="index">
+            	    <view class="label">
+            	    	<image class="label-img" :src="item.cover" mode=""></image>
+            	    	<view class="label-name">
+            	    	    {{ item.name }}
+            	    	</view>
+            	    </view>
+            	</view>
+            </u-scroll-list>
+        </view>
+        
+        <!-- 我是店长 -->
+        <view class="survey">
+            <view class="survey-title">
+                我是店长
+            </view>
+            <view class="shopowner">
+                <view class="shopowner-cont">
+                    <image class="shopowner-img" :src="user.contact_cover ? user.contact_cover : '/static/find/logo.png'" mode="aspectFill"></image>
+                    <view class="shopowner-name">
+                        {{ user.name }}
+                    </view>
+                </view>
+                <view class="shopowner-tel" @click="contact(user.contact_mobile)">
+                    联系他
+                </view>
+            </view>
+            <view class="helper">
+                HI，我是{{ hallsData.title}} · {{ hallsData.subtitle}}店长，有任何问题可电话交流哦，我将在第一时间回复您
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+    import { hallsDet } from '@/apis/interfaces/service'
+    export default {
+    	data() {
+    		return {
+    			current     : 1,
+                hallsData   : '',
+                facilities  : [],
+                user        : '',
+                hallContent : '',
+                pictures    : []
+    		};
+    	},
+    	mounted() {
+            uni.setNavigationBarTitle({
+                title: this.$Route.query.title
+            })
+            
+            // 获取详情
+            this.getService()
+    	},
+    	methods:{
+    		// 详情
+    		getService(){
+    			hallsDet(this.$Route.query.id).then(res => {
+                    this.hallsData  = res
+                    this.facilities = res.facilities
+                    this.user       = res.user
+                    this.pictures   = res.pictures
+                    this.hallContent= res.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"')
+    			})
+    		},
+            
+            // 拨打电话
+            contact(tel){
+                uni.makePhoneCall({
+                    phoneNumber: tel
+                })
+            },
+            
+            // 预览图片
+            seeImg(){
+                uni.previewImage({
+                    urls: this.pictures
+                })
+            }
+    	}
+    }
+</script>
+
+<style lang="scss">
+    page {
+        background-color: $window-color;
+        padding-bottom: $padding;
+    }
+    
+    /* 图片 */
+    .swiper{
+    	position: relative;
+    	width: 100%;
+    	padding-top: 60%;
+    	background: $window-color;
+    	&> swiper{
+    		position: absolute;
+    		top: 0;
+    		left: 0;
+    		width: 100%;
+    		height: 100%;
+    		.swiper-cover{
+    			width: 100%;
+    			height: 100%;
+    			image{
+    				position: absolute;
+    				top: 0;
+    				left: 0;
+    				width: 100%;
+    				height: 100%;
+    			}
+    		}
+    	}
+    	.swiper-pages{
+    		position: absolute;
+    		bottom: 20rpx;
+    		right: 20rpx;
+    		z-index: 9;
+    		text-align: right;
+    		color: white;
+    		font-size: $title-size-m;
+    		text-shadow: 0 5rpx 5rpx rgba($color: #000000, $alpha: .02);
+    	}
+    }
+    
+    .title {
+        padding: $padding;
+        box-sizing: border-box;
+        background-color: white;
+        .name {
+            font-size: $title-size + 6;
+            font-weight: 600;
+        }
+        .address {
+            font-size: $title-size-sm;
+            margin: $margin - 10 0;
+            display: flex;
+        }
+        .area {
+            font-size: $title-size-sm;
+            display: flex;
+        }
+    }
+    
+    .survey {
+        padding: $padding;
+        box-sizing: border-box;
+        background-color: white;
+        margin: $margin 0;
+        .survey-title {
+            font-size: $title-size;
+            margin-bottom: $margin - 10;
+            font-weight: bold;
+        }
+        .survey-text {
+            font-size: $title-size-m;
+            line-height: 44rpx;
+            color: $text-color;
+        }
+        .facilities {
+            margin-top: $margin;
+            .list {
+                .label {
+                    width: 170rpx;
+                    text-align: center;
+                    font-size: $title-size-m;
+                    .label-img {
+                        width: 60rpx;
+                        height: 60rpx;
+                    }
+                    .label-name{
+                        color: $text-gray;
+                    }
+                }
+            }
+        }
+        .shopowner {
+            position: relative;
+            .shopowner-cont {
+                flex: 1;
+                display: flex;
+                width: calc(100% - 200rpx);
+                .shopowner-img {
+                    width: 74rpx;
+                    height: 74rpx;
+                    border-radius: 50%;
+                }
+                .shopowner-name {
+                    line-height: 74rpx;
+                    padding-left: $padding - 10;
+                }
+            }
+            .shopowner-tel {
+                position: absolute;
+                right: 0;
+                top: 10rpx;
+                display: inline-block;
+                border: $main-color 2rpx solid;
+                color: $main-color;
+                font-size: $title-size-sm;
+                padding: 0 $padding;
+                line-height: 54rpx;
+                border-radius: $radius-m;
+            }
+        }
+        .helper {
+            background-color: $window-color;
+            padding: $padding;
+            box-sizing: border-box;
+            font-size: $title-size-m;
+            border-radius: $radius;
+            margin-top: $margin;
+            position: relative;
+            &::after{
+                position: absolute;
+                content: '';
+                width: 0;
+                height: 0;
+                left: $margin;
+                top: -14rpx;
+                border-left: 14rpx solid transparent;
+                border-right: 14rpx solid transparent;
+                border-bottom: 14rpx solid $window-color;
+            }
+        }
+    }
+</style>
diff --git a/pages/service/index.vue b/pages/service/index.vue
new file mode 100644
index 0000000..de8ee20
--- /dev/null
+++ b/pages/service/index.vue
@@ -0,0 +1,185 @@
+<template>
+    <view class="content">
+        <view class="status">
+            <view class="top">
+                <view class="top-name">
+                    ZH大家庭
+                </view>
+                <view class="top-card">
+                    会员卡
+                </view>
+            </view>
+            <view class="site">
+                <view class="site-name">
+                    <u-icon name="map" style="margin-right: 10rpx;"></u-icon>
+                    全国
+                </view>
+                <view class="site-number">
+                    共<text>{{ total }}</text>家
+                </view>
+            </view>
+        </view>
+        <view class="list">
+            <view class="label" v-for="(item, index) in lists" @click="$Router.push({name: 'serviceDetails', params: {id: item.hall_id, title: item.title + ' ' + item.subtitle}})">
+                <view class="labelImg">
+                    <image :src="item.cover" mode="aspectFill"></image>
+                </view>
+                <view class="labelCont">
+                    <view class="nowrap name">
+                        {{ item.title }} · {{ item.subtitle }}
+                    </view>
+                    <view class="nowrap address">
+                        {{ item.address }}
+                    </view>
+                    <view class="area">
+                        {{ item.areas }} ㎡
+                    </view>
+                    <view class="see">
+                        去看看<u-icon name="rewind-right" color="#34CE98" size="18" style="margin-left: 5rpx;"></u-icon>
+                    </view>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+    import { index } from '@/apis/interfaces/service'
+    export default {
+        data() {
+            return {
+                lists   : [],
+                total   : '',
+                status  : 'loadmore',
+                page    : ''
+            };
+        },
+        mounted() {
+            // 获取首页
+            this.getService()
+        },
+        methods: {
+            // 首页
+            getService(pages){
+            	index({page: pages}).then(res => {
+                    if(res.data.page.current == 1){
+                        this.lists = []
+                    }
+                    this.lists    = this.lists.concat(res.data.data)
+                    this.status   = this.page.has_more ? 'loadmore': 'nomore'
+                    this.page     = res.data.page
+                    this.total    = res.total
+            	})
+            }
+        },
+        // 下拉加载
+        onReachBottom() {
+            if(this.page.has_more){
+                this.status = 'loading'
+                let pages = this.page.current + 1
+                // 获取列表
+                this.getService(pages)
+                return
+            }
+            this.status = 'nomore'
+        }
+    };
+</script>
+
+<style lang="scss" scoped>
+    page {
+        padding-top: calc(var(--status-bar-height) + 180rpx);
+        overflow: hidden;
+        background-color: $window-color;
+    }
+    
+    .status {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        z-index: 99;
+        height: 180rpx;
+        background-color: white;
+        padding: $padding;
+        box-sizing: border-box;
+        border-bottom: $border-color 2rpx solid;
+        .top {
+            display: flex;
+            margin-bottom: $margin;
+            .top-name {
+                font-size: $title-size + 6;
+            }
+            .top-card {
+                font-size: $title-size-m;
+                color: $text-gray;
+                padding: $padding - 18 0 0 $padding - 10;
+            }
+        }
+        .site {
+            display: flex;
+            color: $text-color;
+            font-size: $title-size-m;
+            .site-name {
+                display: flex;
+                flex: 1;
+                line-height: 40rpx;
+            }
+            .site-number {
+                text {
+                    color: $main-color;
+                    padding: 4rpx;
+                }
+            }
+        }
+    }
+    
+    .list {
+        padding: $padding;
+        box-sizing: border-box;
+        .label {
+            background-color: white;
+            border-radius: $radius;
+            overflow: hidden;
+            margin-bottom: $margin - 10;
+            .labelImg {
+                position: relative;
+                padding-top: 60%;
+                image {
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+            .labelCont {
+                padding: $padding;
+                box-sizing: border-box;
+                position: relative;
+                .name {
+                    font-weight: 600;
+                }
+                .address {
+                    font-size: $title-size-m;
+                    margin: $margin - 15 0;
+                    color: $text-gray;
+                }
+                .area {
+                    font-size: $title-size-m;
+                    color: $text-gray;
+                }
+                .see {
+                    position: absolute;
+                    right: $padding;
+                    bottom: $padding;
+                    z-index: 9;
+                    font-size: $title-size-m;
+                    color: $main-color;
+                    display: flex;
+                    line-height: 38rpx;
+                }
+            }
+        }
+    }
+</style>
diff --git a/pages/user/index.vue b/pages/user/index.vue
index fec7a91..3aeeeee 100644
--- a/pages/user/index.vue
+++ b/pages/user/index.vue
@@ -85,34 +85,34 @@
 		<!-- 功能块 -->
 		<view class="btns-box">
 			<view class="btns-box-item" @click="$Router.push({name: 'WalletAdd'})">
-				<image class="icon" src="@/static/user/icon_00.png" mode="widthFix"></image>
+				<image class="icon" src="@/static/user/userIcon_00.png" mode="widthFix"></image>
 				ZH钱包(首次)
 				<uni-icons class="forward" type="forward" color="#999"></uni-icons>
 			</view>
 			<view class="btns-box-item" @click="$Router.push({name: 'WalletProperty'})">
-				<image class="icon" src="@/static/user/icon_00.png" mode="widthFix"></image>
+				<image class="icon" src="@/static/user/userIcon_01.png" mode="widthFix"></image>
 				ZH钱包（钱包）
 				<uni-icons class="forward" type="forward" color="#999"></uni-icons>
 			</view>
 			<view class="btns-box-item">
-				<image class="icon" src="@/static/user/icon_00.png" mode="widthFix"></image>
+				<image class="icon" src="@/static/user/userIcon_02.png" mode="widthFix"></image>
 				健康档案
 				<uni-icons class="forward" type="forward" color="#999"></uni-icons>
 			</view>
 			<view class="btns-box-item" @click="$Router.push({name: 'Address', params: {type: 'edit'}})">
-				<image class="icon" src="@/static/user/icon_02.png" mode="widthFix"></image>
+				<image class="icon" src="@/static/user/userIcon_03.png" mode="widthFix"></image>
 				地址管理
 				<uni-icons class="forward" type="forward" color="#999"></uni-icons>
 			</view>
 		</view>
 		<view class="btns-box">
 			<view class="btns-box-item">
-				<image class="icon" src="@/static/user/icon_03.png" mode="widthFix"></image>
+				<image class="icon" src="@/static/user/userIcon_04.png" mode="widthFix"></image>
 				设置
 				<uni-icons class="forward" type="forward" color="#999"></uni-icons>
 			</view>
 			<view class="btns-box-item" @click="logOut">
-				<image class="icon" src="@/static/user/icon_03.png" mode="widthFix"></image>
+				<image class="icon" src="@/static/user/userIcon_05.png" mode="widthFix"></image>
 				退出登录
 				<uni-icons class="forward" type="forward" color="#999"></uni-icons>
 			</view>
@@ -352,8 +352,8 @@
 				right: $margin;
 			}
 			.icon{
-				width: 36rpx;
-				height: 36rpx;
+				width: 44rpx;
+				height: 44rpx;
 				vertical-align: middle;
 				margin-right: $margin/2;
 				margin-bottom: 8rpx;
diff --git a/static/tabBar/tabBar_04.png b/static/tabBar/tabBar_04.png
new file mode 100644
index 0000000..16ec697
Binary files /dev/null and b/static/tabBar/tabBar_04.png differ
diff --git a/static/tabBar/tabBar_show_04.png b/static/tabBar/tabBar_show_04.png
new file mode 100644
index 0000000..baf5cbe
Binary files /dev/null and b/static/tabBar/tabBar_show_04.png differ
diff --git a/static/user/userIcon_00.png b/static/user/userIcon_00.png
new file mode 100644
index 0000000..5d6d385
Binary files /dev/null and b/static/user/userIcon_00.png differ
diff --git a/static/user/userIcon_01.png b/static/user/userIcon_01.png
new file mode 100644
index 0000000..ee9e2b2
Binary files /dev/null and b/static/user/userIcon_01.png differ
diff --git a/static/user/userIcon_02.png b/static/user/userIcon_02.png
new file mode 100644
index 0000000..af25576
Binary files /dev/null and b/static/user/userIcon_02.png differ
diff --git a/static/user/userIcon_03.png b/static/user/userIcon_03.png
new file mode 100644
index 0000000..bc1af24
Binary files /dev/null and b/static/user/userIcon_03.png differ
diff --git a/static/user/userIcon_04.png b/static/user/userIcon_04.png
new file mode 100644
index 0000000..dd3af8b
Binary files /dev/null and b/static/user/userIcon_04.png differ
diff --git a/static/user/userIcon_05.png b/static/user/userIcon_05.png
new file mode 100644
index 0000000..5ff91b1
Binary files /dev/null and b/static/user/userIcon_05.png differ