diff --git a/apis/interfaces/index.js b/apis/interfaces/index.js
index 1d05bdf..44af6ec 100644
--- a/apis/interfaces/index.js
+++ b/apis/interfaces/index.js
@@ -6,6 +6,12 @@
 
 import { request } from '../index'
 
+//  服务包首页app/services
+const index = () =>{
+	return request({
+		url: "app/services"
+	})
+}
 // 金法分类
 const categories = () =>{
 	return request({
@@ -27,6 +33,19 @@ const zf = (data) =>{
 	})
 }
 
+//  自由服务包详情
+const recharge = () =>{
+	return request({
+		url: "app/services/recharge"
+	})
+}
+// //  自由服务包支付
+const zyPay = (id) =>{
+	return request({
+		url: "app/services/recharge/"+id+"/pay",
+        method:'post'
+	})
+}
 
 //  服务包详情
 const fwbDetail = (service) =>{
@@ -40,5 +59,8 @@ export {
     jf,
     zf,
     fwbDetail,
+    index,
+    recharge,
+    zyPay,
 }
 
diff --git a/pages.json b/pages.json
index 5cf8479..ce0513a 100644
--- a/pages.json
+++ b/pages.json
@@ -12,7 +12,20 @@
         "name": "Introduces",
         "style": {
         	"navigationStyle": "custom",
-        	"navigationBarTitleText": "介绍",
+        	"navigationBarTitleText": "金法服务包介绍",
+        	"app-plus": {
+        		"titleNView": {
+        			"backgroundColor": "#FFFFFF",
+        			"type": "transparent"
+        		}
+        	}
+        }
+    },{
+        "path": "pages/index/free",
+        "name": "FreeService",
+        "style": {
+        	"navigationStyle": "custom",
+        	"navigationBarTitleText": "自由服务包介绍",
         	"app-plus": {
         		"titleNView": {
         			"backgroundColor": "#FFFFFF",
diff --git a/pages/index/free.vue b/pages/index/free.vue
new file mode 100644
index 0000000..d2fc93a
--- /dev/null
+++ b/pages/index/free.vue
@@ -0,0 +1,95 @@
+<template>
+    <view class="introduce" v-if='loaded'>
+        <image class="richTxt" :src="base.cover" mode="widthFix" />
+        <view class="nowbuy" @click="nowBuy" v-if="!is_recharge"> <view class="btn">￥{{base.price}} 立即购买 </view> </view>
+        <view class="nowbuy nonebuy"  v-else> <view class="btn"> 已开通 </view> </view>
+    </view>
+</template>
+<script>
+    import {
+        recharge,zyPay
+    } from '@/apis/interfaces/index.js'
+    export default {
+        data() {
+            return {
+                loaded:false,
+                base: '',
+                is_recharge: true,
+            }
+        },
+        onLoad(e) {
+            this.getInfo()
+        },
+        methods:{
+            getInfo(){
+                recharge().then(res => {
+                    this.base = res.base
+                    this.is_recharge = res.is_recharge
+                    this.loaded = true
+                }).catch(err => {
+                    uni.showToast({
+                        title: err.message,
+                        icon: 'none',
+                        mask: true,
+                        duration: 2000
+                    })
+                })
+            },
+            nowBuy(){
+                zyPay(this.base.service_id).then(res => {
+                    uni.showToast({
+                        title: '支付成功',
+                        icon: 'none',
+                        mask: true,
+                        duration: 2000
+                    })
+                    this.is_recharge = true
+                    
+                }).catch(err => {
+                    console.log(err)
+                    uni.showToast({
+                        title: err.message,
+                        icon: 'none',
+                        mask: true,
+                        duration: 2000
+                    })
+                })
+            }
+        }
+    }
+</script>
+<style lang="scss" scoped>
+    .introduce{
+        padding-bottom: 120rpx;
+        .nowbuy{
+            position: fixed;
+            bottom: 0;
+            height: 120rpx;
+            padding-bottom: 20rpx;
+            text-align: center;
+            width: 100%;
+            color: #fff;
+            font-size: 32rpx;
+            font-weight: bold;
+            background-color: #fff;
+            .btn{
+                height: 90rpx;
+                line-height: 90rpx;
+                margin: 20rpx $margin*2 0 $margin*2;
+                border-radius: 80rpx;
+                background: linear-gradient( to right, #e5584c,#ee7b46);
+            }
+        }
+        .nonebuy{
+            color: #333;
+            font-weight: none;
+            .btn{
+                background: linear-gradient( to right, #ececec,#ececec);
+            }
+        }
+        .richTxt{
+            width: 100%;
+        }
+    }
+
+</style>
diff --git a/pages/index/index.vue b/pages/index/index.vue
index c63c425..86ad7a0 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -7,12 +7,14 @@
 					class="banner-swiper"
 					:list="bannerArr"
 					:indicator="true"
+                    keyName="cover"
 					previousMargin="20"
 					nextMargin="20"
 					circular
 					radius="10"
 					bgColor="#ffffff"
 					height="100%"
+                    @click='swiperClick'
 				/>
 			</view>
 			<view class="notice">
@@ -22,7 +24,9 @@
 				<u-notice-bar
 					icon=""
 					:text="notice"
-                    fontSize="13"
+                    url=''
+                    linkType='navigateTo'
+                    fontSize="14"
 					direction="column"
 					bgColor="#fff"
 					color="#111111"
@@ -31,9 +35,8 @@
 			</view>
 		</view>
 		<!-- 自由服务包 -->
-		<view class="free">
+		<view class="free" @click="clickFree">
 			<image class="free-img" src="@/static/index/index_banner_free.png" mode="widthFix" />
-			<!-- <image class="free-img" src="@/static/imgs/index-img.png" mode="widthFix"></image> -->
 		</view>
 		<!--  金法产品 -->
 		<view class="block">
@@ -61,7 +64,7 @@
                     >
                         <image class="cover" :src="item.cover" mode="aspectFill" />
                         <view class="title nowrap">{{item.title}}</view>
-                        <view class="price nowrap"><text>￥</text>{{item.price}}</view>
+                        <view class="price nowrap"><text>￥</text>{{item.price}}<text class="ding" v-if="item.type">定金</text></view>
                     </view>
 			</scroll-view>
 		</view>
@@ -69,11 +72,10 @@
 		<view class="block">
 			<view class="block-title">
 				<view class="title">综法产品</view>
-                
-				<!-- <view class="more">更多<u-icon class="more-icon" size="28rpx" color="#999" name="arrow-right"></u-icon></view> -->
+				<view class="more">更多<u-icon class="more-icon" size="28rpx" color="#999" name="arrow-right" /></view>
 			</view>
 			<view class="zong-list">
-				<view class="zong-list-item" v-for="(item, index) in zfList" :key="index">
+				<view class="zong-list-item" v-for="(item, index) in 3" :key="index">
 					<image class="cover" src="@/static/imgs/index-pack-01.png" mode="aspectFill" />
 					<view class="colum-flex">
 						<view class="title nowrap">2022年尊享综法服务包</view>
@@ -87,7 +89,7 @@
 
 <script>
 	import { region } from '@/apis/interfaces/address.js'
-    import { categories,jf,zf } from '@/apis/interfaces/index.js'
+    import { categories,jf,zf,index } from '@/apis/interfaces/index.js'
 	export default {
 		data() {
 			return {
@@ -98,38 +100,21 @@
 				theTabStyle	: {
 					left: '0%'
 				},
-				bannerArr	: [
-					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
-					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
-					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
-				],
-				notice		: [
-					'王**信用卡法务咨询办理成功（今日）',
-					'王**信用卡法务咨询办理成功（今日）',
-					'王**信用卡法务咨询办理成功（今日）',
-					'王**信用卡法务咨询办理成功（今日）',
-					'王**信用卡法务咨询办理成功（今日）',  
-				],
+				bannerArr	: [],
+                notice		: [],
                 jfList:[],
                 defaultViewId:'',
                 zfList:[],
 			}
 		},
         onLoad() {
-            categories().then(res=>{
-                this.theTabs = this.theTabs.concat(res)
-            }).catch(err=>{
-                uni.showToast({
-                    title:err.message,
-                    icon:'none',
-                    mask:true,
-                    duration:2000
-                })
-            })
+            this.getCategory()
             this.getJf()
+            this.getIndex()
             this.getZf()
         },
 		methods: {
+            // 获取金法列表
             getJf(){
                 let params = {
                     category_id:this.theTabId
@@ -156,9 +141,10 @@
                     url:'/pages/index/introduces?id='+id
                 })
             },
+            // 获取综法列表
             getZf(){
                 zf().then(res=>{
-                    console.log(res)
+                    // console.log(res)
                     // this.jfList = res
                 }).catch(err=>{
                     uni.showToast({
@@ -168,11 +154,65 @@
                         duration:2000
                     })
                 })
+            },//  获取综法列表
+            // 首页轮播图及公告
+            getIndex(){
+                index().then(res=>{
+                    this.bannerArr = res.bannners
+                    let list = []
+                    res.notices.map(item=>{
+                        let params = item.user.name + ' ' + item.user.text
+                        list.push(params)
+                    })
+                    this.notice = list
+                }).catch(err=>{
+                    uni.showToast({
+                        title:err.message,
+                        icon:'none',
+                        mask:true,
+                        duration:2000
+                    })
+                })
+            },
+            // 获取金法分类列表
+            getCategory(){
+                categories().then(res=>{
+                    this.theTabs = this.theTabs.concat(res)
+                }).catch(err=>{
+                    uni.showToast({
+                        title:err.message,
+                        icon:'none',
+                        mask:true,
+                        duration:2000
+                    })
+                })
+            },
+            // 金法产品筛选
+            onTheTab(e){
+            	if(e.category_id != this.theTabId){
+            		let index = this.theTabs.findIndex(val => val.category_id === e.category_id)
+            		this.theTabStyle = {
+            			left: index * 25 + '%'
+            		}
+                    this.theTabId = e.category_id
+                    this.getJf()
+            	}
             },
 			// 选择城市节点
 			onCityPicker(e){
 				this.getRegion(e.value);
 			},
+            // 点击轮播图
+            swiperClick(e){
+                // console.log(this.bannerArr[e])
+            },
+            // 点击轮播图跳转自由服务包
+            clickFree(){
+                console.log('clickFree.....')
+                uni.navigateTo({
+                    url:'/pages/index/free'
+                })
+            },
 			// 获取城市数据
 			getRegion(id){
 				region({
@@ -181,17 +221,6 @@
 					console.log(res)
 				})
 			},
-			//  金法产品筛选
-			onTheTab(e){
-				if(e.category_id != this.theTabId){
-					let index = this.theTabs.findIndex(val => val.category_id === e.category_id)
-					this.theTabStyle = {
-						left: index * 25 + '%'
-					}
-                    this.theTabId = e.category_id
-                    this.getJf()
-				}
-			}
 		}
 	}
 </script>
@@ -221,7 +250,7 @@
 		flex-direction: row;
 		align-items: center;
 		.notice-title{
-			background-color: #ECF0FF;
+			background-color: #ececec;
 			color: #000;
 			height: 60rpx;
 			line-height: 60rpx;
@@ -359,6 +388,12 @@
 				text{
 					font-size: 80%;
 				}
+                .ding{
+                    font-size: 64%;
+                    margin-left: 4rpx;
+                    position: relative;
+                    bottom: 2rpx;
+                }
 			}
 		}
 	}