diff --git a/App.vue b/App.vue
index 65d1a44..a09ff03 100644
--- a/App.vue
+++ b/App.vue
@@ -117,6 +117,7 @@
 
 <style lang="scss">
 	@import "@/uview-ui/index.scss";
+	@import '@/common/styles/theme.css';
 	@import '@/common/styles/common.css';
 	
 	//底部按钮
diff --git a/common/styles/common.css b/common/styles/common.css
index 2bd1e98..84950cc 100644
--- a/common/styles/common.css
+++ b/common/styles/common.css
@@ -1,68 +1,4 @@
 /* 公共的 */
-
-/* button */
-button::after {
-	border: 0;
-}
-
-/* radio/checkbox */
-uni-radio .uni-radio-input {
-	width: 30rpx;
-	height: 30rpx;
-}
-
-/* #ifdef H5 */
-radio .uni-radio-input,
-checkbox .uni-checkbox-input {
-	/* border-radius: 50%; */
-	transform: scale(0.8);
-}
-
-radio .uni-radio-input.uni-radio-input-checked,
-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
-	/* border-radius: 50%; */
-	border: 1px solid #FE9903 !important;
-	background: #FE9903 !important;
-	color: #FFFFFF !important;
-}
-
-radio .uni-radio-input.uni-radio-input-checked::before,
-checkbox .uni-checkbox-input.uni-checkbox-input-checked::before {
-	font-size: 13px;
-}
-
-radio:not([disabled]) .uni-radio-input:hover,
-checkbox:not([disabled]) .uni-checkbox-input:hover {
-	border-color: #d1d1d1 !important;
-}
-
-/* #endif */
-/* #ifdef APP-PLUS || MP */
-radio .wx-radio-input,
-checkbox .wx-checkbox-input {
-	border-radius: 50%;
-	transform: scale(0.8);
-}
-
-radio .wx-radio-input.wx-radio-input-checked,
-checkbox .wx-checkbox-input.wx-checkbox-input-checked {
-	border-radius: 50%;
-	border: 1px solid #FE9903 !important;
-	background: #FE9903 !important;
-	color: #FFFFFF !important;
-}
-
-radio .wx-radio-input.wx-radio-input-checked::before,
-checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
-	font-size: 18px;
-}
-
-radio:not([disabled]) .wx-radio-input:hover checkbox:not([disabled]) .wx-checkbox-input:hover {
-	border-color: #d1d1d1 !important;
-}
-/* #endif */
-
-
 /* 常用的 */
 .lf-w-100 {
 	width: 100%;
@@ -283,55 +219,6 @@ radio:not([disabled]) .wx-radio-input:hover checkbox:not([disabled]) .wx-checkbo
 	font-weight: bold;
 }
 
-.lf-color-primary {
-	color: #FE9903 !important;
-}
-
-.lf-bg-primary {
-	background: #FE9903 !important;
-}
-
-.lf-color-secondary {
-	color: #FE8800 !important;
-}
-
-.lf-bg-secondary {
-	background: #FE8800 !important;
-}
-
-.lf-color-black {
-	color: #222222 !important;
-}
-
-.lf-bg-black {
-	background: #222222 !important;
-}
-
-.lf-color-white {
-	color: #FFFFFF !important;
-}
-
-.lf-bg-white {
-	background: #FFFFFF !important;
-}
-
-.lf-color-gray {
-	color: #777777 !important;
-}
-
-.lf-bg-gray {
-	background: #777777 !important;
-}
-.lf-color-price {
-	color: #FF0000 !important;
-}
-
-.lf-color-999{
-	color: #999999 !important;
-}
-.lf-color-666{
-	color: #666666 !important;
-}
 .lf-opacity{
 	opacity: .5;
 }
diff --git a/common/styles/theme.css b/common/styles/theme.css
new file mode 100644
index 0000000..17e1365
--- /dev/null
+++ b/common/styles/theme.css
@@ -0,0 +1,118 @@
+/* button */
+button::after {
+	border: 0;
+}
+
+/* radio/checkbox */
+uni-radio .uni-radio-input {
+	width: 30rpx;
+	height: 30rpx;
+}
+
+/* #ifdef H5 */
+radio .uni-radio-input,
+checkbox .uni-checkbox-input {
+	/* border-radius: 50%; */
+	transform: scale(0.8);
+}
+
+radio .uni-radio-input.uni-radio-input-checked,
+checkbox .uni-checkbox-input.uni-checkbox-input-checked {
+	/* border-radius: 50%; */
+	border: 1px solid #FE9903 !important;
+	background: #FE9903 !important;
+	color: #FFFFFF !important;
+}
+
+radio .uni-radio-input.uni-radio-input-checked::before,
+checkbox .uni-checkbox-input.uni-checkbox-input-checked::before {
+	font-size: 13px;
+}
+
+radio:not([disabled]) .uni-radio-input:hover,
+checkbox:not([disabled]) .uni-checkbox-input:hover {
+	border-color: #d1d1d1 !important;
+}
+
+/* #endif */
+/* #ifdef APP-PLUS || MP */
+radio .wx-radio-input,
+checkbox .wx-checkbox-input {
+	border-radius: 50%;
+	transform: scale(0.8);
+}
+
+radio .wx-radio-input.wx-radio-input-checked,
+checkbox .wx-checkbox-input.wx-checkbox-input-checked {
+	border-radius: 50%;
+	border: 1px solid #FE9903 !important;
+	background: #FE9903 !important;
+	color: #FFFFFF !important;
+}
+
+radio .wx-radio-input.wx-radio-input-checked::before,
+checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
+	font-size: 18px;
+}
+
+radio:not([disabled]) .wx-radio-input:hover checkbox:not([disabled]) .wx-checkbox-input:hover {
+	border-color: #d1d1d1 !important;
+}
+/* #endif */
+
+.lf-color-primary {
+	color: #FE9903 !important;
+}
+
+.lf-bg-primary {
+	background: #FE9903 !important;
+}
+
+.lf-color-secondary {
+	color: #FE8800 !important;
+}
+
+.lf-bg-secondary {
+	background: #FE8800 !important;
+}
+
+.lf-color-black {
+	color: #222222 !important;
+}
+
+.lf-bg-black {
+	background: #222222 !important;
+}
+
+.lf-color-white {
+	color: #FFFFFF !important;
+}
+
+.lf-bg-white {
+	background: #FFFFFF !important;
+}
+
+.lf-color-gray {
+	color: #777777 !important;
+}
+
+.lf-bg-gray {
+	background: #777777 !important;
+}
+
+/* 一些常用的字体颜色 */
+.lf-color-price {
+	color: #FF0000 !important;
+}
+.lf-color-999{
+	color: #999999 !important;
+}
+.lf-color-666{
+	color: #666666 !important;
+}
+.lf-color-555{
+	color: #555555 !important;
+}
+.lf-color-333{
+	color: #333333 !important;
+}
\ No newline at end of file
diff --git a/manifest.json b/manifest.json
index c83fbd0..9822a65 100644
--- a/manifest.json
+++ b/manifest.json
@@ -50,7 +50,7 @@
     "quickapp" : {},
     /* 小程序特有相关 */
     "mp-weixin" : {
-        "appid" : "",
+        "appid" : "wxb35ef055a4dd8ad4",
         "setting" : {
             "urlCheck" : false,
             "es6" : true,
diff --git a/pages.json b/pages.json
index 5d2f9ee..08ad8d8 100644
--- a/pages.json
+++ b/pages.json
@@ -6,7 +6,9 @@
 		{
 			"path": "pages/index/index",
 			"style": {
-				"navigationBarTitleText": "首页"
+				"navigationBarTitleText": "首页",
+				"navigationStyle": "custom",
+				"enablePullDownRefresh": true
 			}
 		}
 	],
diff --git a/pages/index/index.vue b/pages/index/index.vue
index d9f9b0b..288d53b 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,8 +1,82 @@
 <template>
-	<view class="content">
-		<image class="logo" src="/static/logo.png"></image>
-		<view class="text-area">
-			<text class="title" v-if="$isRight(true)">{{title}}</text>
+	<view>
+		<swiper class="head" :current="banner_current" >
+			<swiper-item>
+				<image src="https://picsum.photos/375/360" class="swipe-img"></image>
+			</swiper-item>
+			<swiper-item>
+				<image src="https://picsum.photos/375/360" class="swipe-img"></image>
+			</swiper-item>
+		</swiper>
+		<view class="content">
+			<!-- 消息模块 -->
+			<view class="lf-row-between lf-m-b-34 message-box">
+				<view class="lf-flex">
+					<u-icon name="lock-fill lf-text-vertical"></u-icon>
+					<view class="lf-m-l-12 lf-line-1" style="max-width: 510rpx;">国庆优惠大促，快来看看吧！</view>
+				</view>
+				<view class="message-btn" hover-class="lf-opacity">详情</view>
+			</view>
+			<!-- 频道 -->
+			<view class="lf-row-between lf-m-b-10">
+				<view class="lf-font-36 lf-font-bold lf-color-333">添加频道</view>
+				<view class="lf-flex lf-color-555">
+					<view class="lf-m-r-10">编辑</view>
+					<u-icon name="lock-fill lf-text-vertical"></u-icon>
+				</view>
+			</view>
+			<view class="lf-flex-wrap">
+				<view class="channel-item" v-for="(item, index) in 8">
+					<image src="../../static/logo.png" class="channel-mask" mode="aspectFill"></image>
+					<view>
+						<u-icon name="lock-fill lf-text-vertical"></u-icon>
+					</view>
+				</view>
+			</view>
+			<!-- 中间广告模块 -->
+			<swiper class="lf-m-t-40 ad" :current="banner_current" >
+				<swiper-item>
+					<image src="https://picsum.photos/375/230" class="lf-w-100 lf-h-100"></image>
+				</swiper-item>
+			</swiper>
+			<!-- 精品推荐 -->
+			<view class="lf-row-between lf-m-t-40">
+				<view class="lf-font-36 lf-font-bold lf-color-333">精品推荐</view>
+				<view class="lf-flex lf-color-555">
+					<view class="lf-m-r-10">更多</view>
+					<u-icon name="lock-fill lf-text-vertical"></u-icon>
+				</view>
+			</view>
+			<view class="recomm lf-m-t-20">
+				<view class="lf-row-between">
+					<view class="max-recomm-img">
+						<image src="../../static/logo.png" class="lf-w-100 lf-h-100"></image>
+					</view>
+					<view>
+						<view class="recomm-img">
+							<image src="../../static/logo.png" class="lf-w-100 lf-h-100"></image>
+						</view>
+						<view class="recomm-img lf-m-t-10">
+							<image src="../../static/logo.png" class="lf-w-100 lf-h-100"></image>
+						</view>
+					</view>
+				</view>
+				<view class="lf-row-between lf-m-t-10">
+					<view class="recomm-img">
+						<image src="../../static/logo.png" class="lf-w-100 lf-h-100"></image>
+					</view>
+					<view class="recomm-img">
+						<image src="../../static/logo.png" class="lf-w-100 lf-h-100"></image>
+					</view>
+					<view class="recomm-img">
+						<image src="../../static/logo.png" class="lf-w-100 lf-h-100"></image>
+					</view>
+				</view>
+			</view>
+			<!-- tab标签 -->
+			<view class="lf-m-t-40">
+				<u-tabs :list="tab_list" :is-scroll="true" :current="current" @change="tabChange"></u-tabs>
+			</view>
 		</view>
 	</view>
 </template>
@@ -11,42 +85,146 @@
 	export default {
 		data() {
 			return {
-				title: 'Hello'
+				banner_current: 0,
+				tab_list: [{
+					name: '推荐',
+					list: []
+				},{
+					name: '酒店',
+					list: []
+				},{
+					name: '推荐',
+					list: []
+				},{
+					name: '酒店',
+					list: []
+				},{
+					name: '推荐',
+					list: []
+				},{
+					name: '酒店',
+					list: []
+				}],
+				current: 0
 			}
 		},
 		onLoad() {
 			
 		},
 		methods: {
-
+			tabChange(current){
+				this.current = current;
+			}
+		},
+		onPullDownRefresh(){
+			uni.stopPullDownRefresh();
 		}
 	}
 </script>
 
 <style>
-	.content {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
+	page{
+		background-color: #F6F6F6;
 	}
-
-	.logo {
-		height: 200rpx;
-		width: 200rpx;
-		margin-top: 200rpx;
-		margin-left: auto;
-		margin-right: auto;
-		margin-bottom: 50rpx;
+</style>
+<style lang="scss" scoped>
+	.head{
+		width: 750rpx;
+		height: 360rpx;
+		.swipe-img{
+			width: 100%;
+			height: 100%;
+		}
 	}
-
-	.text-area {
-		display: flex;
-		justify-content: center;
+	.content{
+		width: 750rpx;
+		// height: 600rpx;
+		height: max-content;
+		border-radius: 30rpx 30rpx 0rpx 0rpx;
+		position: relative;
+		top: -30rpx;
+		background-color: #FFFFFF;
+		box-sizing: border-box;
+		padding: 40rpx 32rpx 10rpx;
+		.message-box{
+			width: 686rpx;
+			height: 53rpx;
+			background: #CFE7FD;
+			border-radius: 27rpx;
+			color: #1998FE;
+			box-sizing: border-box;
+			padding: 0 20rpx;
+			font-size: 24rpx;
+			.message-btn{
+				width: 80rpx;
+				height: 33rpx;
+				border-radius: 10rpx;
+				border: 1rpx solid #1998FE;
+				text-align: center;
+				line-height: 31rpx;
+			}
+		}
 	}
-
-	.title {
-		font-size: 36rpx;
-		color: #8f8f94;
+	
+	.channel-item{
+		width: 160rpx;
+		height: 160rpx;
+		border-radius: 15rpx;
+		margin-top: 15rpx;
+		margin-right: 15rpx;
+		position: relative;
+		overflow: hidden;
+		&:nth-child(4n){
+			margin-right: 0;
+		}
+		image{
+			width: 160rpx;
+			height: 160rpx;
+			position: absolute;
+			z-index: 0;
+		}
+		view{
+			position: absolute;
+			right: 0;
+			bottom: 0;
+			background-color: rgba(255,255,255,0.5);
+			width: 42rpx;
+			height: 42rpx;
+			color: #FFFFFF;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			border-radius: 10rpx 0rpx 15rpx 0rpx;
+			z-index: 2;
+		}
+		.channel-mask::after{
+			width: 100%;
+			height: 100%;
+			content: '';
+			position: absolute;
+			z-index: 1;
+			background: rgba(0, 0, 0, 0.5);
+			top: 0;
+			left: 0;
+		}
+	}
+	
+	.ad{
+		height: 230rpx;
+		width: 100%;
+	}
+	
+	.recomm{
+		width: 100%;
+		height: max-content;
+		.recomm-img{
+			width: 222rpx;
+			height: 222rpx;
+			border-radius: 10rpx;
+		}
+		.max-recomm-img{
+			width: 455rpx;
+			height: 455rpx;
+		}
 	}
 </style>
diff --git a/uview-ui/components/u-tabs/u-tabs.vue b/uview-ui/components/u-tabs/u-tabs.vue
index 2d83f20..dd33244 100644
--- a/uview-ui/components/u-tabs/u-tabs.vue
+++ b/uview-ui/components/u-tabs/u-tabs.vue
@@ -7,11 +7,9 @@
 			<scroll-view scroll-x class="u-scroll-view" :scroll-left="scrollLeft" scroll-with-animation>
 				<view class="u-scroll-box" :class="{'u-tabs-scorll-flex': !isScroll}">
 					<view class="u-tab-item u-line-1" :id="'u-tab-item-' + index" v-for="(item, index) in list" :key="index" @tap="clickTab(index)"
-					 >
+					 :style="[tabItemStyle(index)]">
 						<u-badge :count="item[count] || item['count'] || 0" :offset="offset" size="mini"></u-badge>
-						<view :class="'anniu' + ' ' + (index == currentIndex?Checked:'')">
-							{{ item[name] || item['name']}}
-						</view>
+						{{ item[name] || item['name']}}
 					</view>
 					<view v-if="showBar" class="u-tab-bar" :style="[tabBarStyle]"></view>
 				</view>
@@ -168,9 +166,8 @@
 				scrollBarLeft: 0, // 移动bar需要通过translateX()移动的距离
 				parentLeft: 0, // 父元素(tabs组件)到屏幕左边的距离
 				id: this.$u.guid(), // id值
-				currentIndex: 0,
+				currentIndex: this.current,
 				barFirstTimeMove: true, // 滑块第一次移动时(页面刚生成时)，无需动画，否则给人怪异的感觉
-				Checked:'Checked'
 			};
 		},
 		watch: {
@@ -178,7 +175,7 @@
 			// 后台获取的（如新闻app顶部的菜单），获取返回需要一定时间，所以list变化时，重新获取布局信息
 			list(n, o) {
 				// list变动时，重制内部索引，否则可能导致超出数组边界的情况
-				if(n.length !== o.length){
+				if(n.length !== o.length) {
 					this.currentIndex = 0;
 				}else{
 					return;
@@ -202,13 +199,15 @@
 		computed: {
 			// 移动bar的样式
 			tabBarStyle() {
+				let scrollBarLeft = this.scrollBarLeft - 7;
 				let style = {
 					width: this.barWidth + 'rpx',
-					transform: `translate(${this.scrollBarLeft}px, -100%)`,
+					transform: `translate(${scrollBarLeft}px, -100%)`,
 					// 滑块在页面渲染后第一次滑动时，无需动画效果
 					'transition-duration': `${this.barFirstTimeMove ? 0 : this.duration }s`,
 					'background-color': this.activeColor,
 					height: this.barHeight + 'rpx',
+					opacity: this.barFirstTimeMove ? 0 : 1,
 					// 设置一个很大的值，它会自动取能用的最大值，不用高度的一半，是因为高度可能是单数，会有小数出现
 					'border-radius': `${this.barHeight / 2}px`
 				};
@@ -253,15 +252,8 @@
 			},
 			// 点击某一个tab菜单
 			clickTab(index) {
-				this.currentIndex = index;
-				this.Checked = 'Checked';
-				// // 点击当前活动tab，不触发事件
-				// if(index == this.currentIndex){
-				// 	this.Checked = 'Checked';
-				// 	return ;
-				// }else{
-				// 	this.Checked = '';
-				// };
+				// 点击当前活动tab，不触发事件
+				if(index == this.currentIndex) return ;
 				// 发送事件给父组件
 				this.$emit('change', index);
 			},
@@ -368,30 +360,21 @@
 		/* #endif */
 		text-align: center;
 		transition-property: background-color, color;
+		z-index: 2;
 	}
 
 	.u-tab-bar {
 		position: absolute;
-		bottom: 0;
+		bottom: 10px;
+		width: 68rpx !important;
+		height: 10rpx !important;
+		background: #CFE7FD !important;
+		border-radius: 5rpx !important;
+		z-index: 1;
 	}
 
 	.u-tabs-scorll-flex {
 		@include vue-flex;
 		justify-content: space-between;
 	}
-	.anniu{
-		// padding:20rpx 58rpx;
-		background-color: #F5F5F5;
-		color: #555555;
-		display: block;
-		border-radius: 10rpx;
-		margin-left:10rpx ;
-		width: 172rpx;
-		height: 80rpx;
-		line-height: 80rpx;
-	}
-	.Checked{
-		background-color: #FE9903;
-		color: #FFFFFF;
-	}
 </style>