diff --git a/api/phase2/index.js b/api/phase2/index.js
index 11db0aa..932de18 100644
--- a/api/phase2/index.js
+++ b/api/phase2/index.js
@@ -56,6 +56,10 @@ const scorelist=function(num,p){
 const indexList=function(query) {
     return ajax.post('/xboe/m/qa/question/query-random',query);
 }
+// 1最新 2最热
+const mobieArticle=function (type){
+  return ajax.get('/xboe/portal/index/mobile-article?type='+type);
+}
 
 export default {
   cases,
@@ -65,5 +69,6 @@ export default {
   courselist,
   mobileIndex,
   scorelist,
-  indexList
+  indexList,
+  mobieArticle
 }
diff --git a/components/course-list/course-list.vue b/components/course-list/course-list.vue
index 7cc6ca9..4449c1d 100644
--- a/components/course-list/course-list.vue
+++ b/components/course-list/course-list.vue
@@ -95,7 +95,7 @@
 					bottom: -2upx;
 					color: #FFFFFF;
 					font-size: 28upx;
-					z-index: 99999;
+					z-index: 99;
 					width: 136upx;
 					height: 44upx;
 					background: #1767FF;
diff --git a/components/data-filter/data-filter.vue b/components/data-filter/data-filter.vue
index b6a2d2d..d1e60cf 100644
--- a/components/data-filter/data-filter.vue
+++ b/components/data-filter/data-filter.vue
@@ -4,9 +4,13 @@
 			<!-- <text style="color: #666;font-size: 30rpx;">筛选</text> -->
 			<image src="../../static/images/filter.png" style="width: 36upx;height: 36upx;vertical-align: middle;"></image>
 		</view>
-		<u-popup :show="filterShow" mode="right" @close="closeFilter" :safeAreaInsetTop="true" :closeable="true">
-			<view :style="`width: ${filterWidth};padding-top: 5px;`" style="height: 100vh; overflow: auto;">
+		<!-- ${filterWidth} -->
+		<u-popup :show="filterShow" mode="center" @close="closeFilter" :safeAreaInsetTop="true" :closeable="false">
+			<view :style="{width:filterWidth}" style="height: 100vh;padding-top: 32upx; overflow: auto;position: relative;">
 				<view v-if="type==1" >
+					<view class="filter-title-top">
+						<u-icon @click="filterShow = false" class="icon" name="arrow-left" color="#333333" size="20"></u-icon>课程分类
+					</view>
 					<view class="filter-item">
 						<view v-if="noOrder" class="filter-title">排序</view>
 						<view v-if="noOrder" class="filter-body">
@@ -15,28 +19,28 @@
 						</view>
 						<view class="filter-title">授课方式</view>
 						<view class="filter-body">
-							<!-- <view class="filter-option" :class="{'filter-checked':course.courseType==10}"  @click="setCourseFilter('courseType',10)">微课</view> -->
 							<view class="filter-option" :class="{'filter-checked':course.courseType==20}"  @click="setCourseFilter('courseType',20)">录播课</view>
 							<view class="filter-option" :class="{'filter-checked':course.courseType==30}"  @click="setCourseFilter('courseType',30)">线下课</view>
 							<view class="filter-option" :class="{'filter-checked':course.courseType==40}"  @click="setCourseFilter('courseType',40)">学习项目</view>
 						</view>
-					<!-- 	<view class="filter-title">应用场景</view>
-						<view class="filter-body">
-							<view class="filter-option" 
-							v-for="scence in courseScenceList"
-							:key="scence.id"
-							:class="{'filter-checked':checkScence(scence)}"  
-							@click="setCourseFilter('scence',scence)">{{scence.name}}</view>
-						</view> -->
-						<view class="filter-title">内容分类</view>
+						<view class="filter-title" style="margin-top: 10upx;">内容分类</view>
 						<view class="filter-body">
 							<view class="filter-option" 
 							v-for="sysType in courseSysTypeTree"
 							:key="sysType.id"
 							:class="{'filter-checked':course.sysType1.id==sysType.id}"  
 							@click="setCourseFilter('sysType1',sysType)">{{sysType.name}}</view>
-							<!-- <view class="filter-option"  @click="moreFilters('sysTypeMore',0)">更多</view> -->
-							<view class="filter-option"  @click="toNewLink">U选小课堂</view>
+							
+							<!-- <view class="filter-option"  @click="toNewLink">U选小课堂</view> -->
+						</view>
+						<view class="sys-type" v-if="sysTypeTow.length > 0">
+							<text class="sys-type-name">{{course.sysType1.name}}</text>
+							<view class="sys-type-tow">
+								<text class="type-option" v-for="tow in sysTypeTow" :key="tow.id" :class="{'filter-checked':course.sysType2.id==tow.id}" @click="setCourseFilter('sysType2',tow)">{{tow.name}}</text>
+							</view>
+							<view class="sys-type-three">
+								<text class="type-option-three" v-for="three in sysTypeThree" :key="three.id" :class="{'filter-checked':course.sysType3.id==three.id}" @click="setCourseFilter('sysType3',three)">{{three.name}}</text>
+							</view>
 						</view>
 					</view>
 				</view>
@@ -69,8 +73,8 @@
 					 </view>
 				</view>
 				<view class="filter-footer">
-					<view class="filter-footer-reset" @click="resetCourseFilter()"> 重 置 </view>
-					<view class="filter-footer-submit" @click="submit()"> 确 定 </view>
+					<!-- <view class="filter-footer-reset" @click="resetCourseFilter()"> 重 置 </view> -->
+					<view class="filter-footer-submit" @click="submit()"> 选择好了，返回课程列表页 </view>
 				</view>
 			</view>
 		</u-popup>
@@ -89,21 +93,27 @@
 		    type: {
 		      type: Number,
 			  required:true
-		    }
+		    },
+			filterWidth:{
+				type:String,
+				default:'100%'
+			}
 		},
 		data(){
 			return{
 				courseSysTypeTree:[],
 				courseScenceList:[],
-				filterShow:false,//是否显示过虑器
-				filterWidth:'300px',
+				filterShow:true,//是否显示过虑器
+				// filterWidth:'300px',
+				sysTypeTow:[],
+				sysTypeThree:[],
 				course:{
 					orderType:-1,//表未选中，排序，最新，最热
 					courseType:-1,//表未选中
 					scenes:[],
-					sysType1:'',
-					sysType2:'',
-					sysType3:''
+					sysType1:{},
+					sysType2:{},
+					sysType3:{}
 				},
 				article:{ 
 					orderType:-1
@@ -116,7 +126,7 @@
 			}
 		},
 		mounted() {
-			this.filterWidth=(this.$width-100)+'px'; //右边出来的抽屉宽度控制
+			// this.filterWidth=(this.$width-100)+'px'; //右边出来的抽屉宽度控制
 			this.loadData();
 		},
 		computed:{
@@ -249,6 +259,15 @@
 					
 				}else if(strType=='sysType1'){
 					this.course.sysType1=value;
+					this.sysTypeTow = value.children;
+					this.course.sysType2 = {};
+					this.course.sysType3={};
+				}else if(strType=='sysType2'){
+					this.course.sysType2=value;
+					this.sysTypeThree = value.children;
+					this.course.sysType3={};
+				}else if(strType=='sysType3'){
+					this.course.sysType3=value;
 				}
 			},
 			moreFilters(){
@@ -368,56 +387,117 @@
 <style lang="scss" scoped>
 	
 	/deep/ .u-popup__content{
-		border-radius: 17px 0 0rpx 17px;
+		width: 100%;
+		// border-radius: 17px 0 0rpx 17px;
 	}
 	/deep/ .u-icon__icon{
 		top: 0px !important;
 	}
+	.filter-title-top{
+		height: 150upx;
+		line-height: 150upx;
+		text-align: center;
+		font-size: 36upx;
+		font-weight: 600;
+		color: #333333;
+		position: relative;
+		.icon{
+			position: absolute;
+			top:50upx;
+			left:40upx;
+		}
+	}
 	.filter-item{
 		padding: 10upx;
 		.filter-title{
 			padding: 10upx 18upx;
-			color: #2d2d2d;
-			font-size: 28rpx;
+			color: #333333;
+			font-size: 32rpx;
 			font-weight: bold;
 		}
+		.sys-type{
+			margin: 20upx;
+			padding: 28upx 20upx;
+			background: #F7F7F7;
+			border-radius: 8upx;
+			.sys-type-name{
+				margin-left: 12upx;
+				font-size: 28upx;
+				color: #333333;
+				
+			}
+			.filter-checked{
+				color: #387DF7 !important;
+			}
+			.sys-type-tow{
+				margin-top: 40upx;
+				.type-option{
+					display: inline-block;
+					height: 60upx;
+					background: #FFFFFF;
+					border-radius: 34upx;
+					line-height: 60upx;
+					text-align: center;
+					color: #666666;
+					font-size: 28upx;
+					padding: 6upx 36upx;
+					margin-right: 28upx;
+					margin-bottom: 28upx;
+				}
+			}
+			.sys-type-three{
+				display: flex;
+				flex-wrap: wrap;
+				justify-content: space-around;
+				.type-option-three{
+					font-size: 28upx;
+					color: #666666;
+				}
+			}
+			
+		}
 		.filter-body{
-			padding: 10upx 55upx;
+			padding: 10upx 32upx;
 			// text-align: center;
-			//display: flex;
+			display: flex;
+			justify-content: space-between;
+			flex-wrap: wrap;
 			
 			.filter-option{
 				// font-weight: 620;
 				// background-color: #000000;
-				background-color: #f9f9f9;
-				border-radius: 45rpx;
+				background-color: #F7F7F7;
+				border-radius: 34rpx;
 				// border: 1px solid #cacaca;
-				padding: 12upx 12upx;
+				padding: 12upx 50upx;
 				display: inline-block;
-				height: 64rpx;
+				height: 60rpx;
 				text-align: center;
-				width: 190rpx;
+				// width: 180rpx;
 				font-size: 26rpx;
-				color: #1d1d1d;
-				margin: 10upx ;
+				color: #666666;
+				margin-bottom: 10upx;
+				margin-top: 10upx;
 			    box-sizing: border-box;
 			}
 			.filter-checked{
-				background-color:#feeae9;
-				color: #e2331e;
-				margin: 10upx ;
-				box-sizing: border-box;
-				height: 64rpx;
-				border: 1rpx solid #e2331e;
+				// background-color:#feeae9;
+				color: #387DF7;
+				// margin: 10upx ;
+				// box-sizing: border-box;
+				// height: 64rpx;
+				// border: 1rpx solid #e2331e;
 			}
 		}
 	}
 	.filter-footer{
 		display: flex;
 		justify-content: center;
+		margin-top: 84upx;
 		padding-bottom: 30upx;
 		padding-top: 20upx;
 		.filter-footer-reset{
+			
 			margin: 10upx;
 			border: 1px solid #FFB30F;
 			color:  #FFB30F;
@@ -427,13 +507,16 @@
 			border-radius: 40upx;
 		}
 		.filter-footer-submit{
-			margin: 10upx;
-			font-size: 24rpx;
-			background-color:#FFB30F;
-			color:  #FFFFFF;
-			padding: 20upx 80upx;
+			padding: 0 68upx;
+			// width: 236px;
+			height: 96upx;
+			line-height: 96upx;
 			text-align: center;
-			border-radius: 40upx;
+			background: linear-gradient(112deg, #5491FD 0%, #2A58FA 100%);
+			border-radius: 48upx;
+			font-size: 28upx;
+			font-weight: 600;
+			color: #FFFFFF;
 		}
 	}
 </style>
diff --git a/components/recommend-index/recommend-index.vue b/components/recommend-index/recommend-index.vue
index 47fbc3d..1648c22 100644
--- a/components/recommend-index/recommend-index.vue
+++ b/components/recommend-index/recommend-index.vue
@@ -217,7 +217,7 @@
 			},
 			//推荐文章
 			getArtData() {
-				apiIndex.articlelist(2).then(res=>{
+				apiIndex.mobieArticle(2).then(res=>{
 					if(res.status == 200) {
 						let ids = [];
 						res.result.forEach(item=>{
diff --git a/pages/index/index.vue b/pages/index/index.vue
index d49242c..cc9a87e 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -38,7 +38,7 @@
 				</view>
 			</view>
 			<view style="line-height: 40upx;height: 40upx; padding-top: 14upx;font-size: 16px; ">
-				<data-filter v-if="conType == 1" :noOrder="false" :type="conType" @reset="resetFilters" @submit="submitFilters"></data-filter>
+				<data-filter v-if="conType == 1" filterWidth="100%" :noOrder="false" :type="conType" @reset="resetFilters" @submit="submitFilters"></data-filter>
 			</view>
 		</view>
 		<view class="" v-show="conType == 0">