diff --git a/packages/packagesPro/pages/proCarerList/list.vue b/packages/packagesPro/pages/proCarerList/list.vue
index 8ca6ca7..228c8f6 100644
--- a/packages/packagesPro/pages/proCarerList/list.vue
+++ b/packages/packagesPro/pages/proCarerList/list.vue
@@ -1,6 +1,155 @@
 <template>
-	
-	<view class="clearfix">
+	<view class="wrap">
+		<view class="clearfix procarefilter">
+			<text class="filteritem active">按年龄
+				<text class="arrow">
+					<text class="arrowicon arrowup on"></text>
+					<text class="arrowicon arrowdown on"></text>
+				</text>
+			</text>
+			<text class="filteritem">按护理经验
+				<text class="arrow">
+					<text class="arrowicon arrowup"></text>
+					<text class="arrowicon arrowdown"></text>
+				</text>
+			</text>
+			<text class="filteritem">按评价
+				<text class="arrow">
+					<text class="arrowicon arrowup"></text>
+					<text class="arrowicon arrowdown"></text>
+				</text>
+			</text>
+		</view>
+		<view class="procarelist">
+			<!-- 1条数据开始 -->
+			<view class="procarelist-item">
+				<view class="clearfix procarelist-top">
+					<view class="procarelist-img">
+						<image src="../../../../static/resource/icon/icon_face.jpg"></image>
+					</view>
+					<view class="procarelist-info">
+						<view class="procarelist-title">张阿姨</view>
+						<view class="procarelist-brief">女<text class="age orangecolor">58岁</text><text class="experance orangecolor">5年</text>护理经验</view>
+						<view class="clearfix procarelist-service">
+							<view class="procarelist-number">已经用心服务过<text class="orangecolor">20</text>个患者 </view>
+							<view class="procarelist-level">
+								<text class="on"></text>
+								<text></text>
+								<text></text>
+								<text></text>
+								<text></text>
+							</view>
+						</view>
+					</view>
+				</view>	
+				<view class="procarelist-bottom">
+					<view class="procarelist-range">服务范围:</view>
+					<view class="procarelist-rangelist">
+						<text>生活照顾</text>
+						<text>生活照顾</text>
+						<text>生活照顾</text>
+						<text>生活照顾</text>
+					</view>
+				</view>
+			</view>
+			<!-- 1条数据结束 -->
+			<!-- 2条数据开始 -->
+			<view class="procarelist-item">
+				<view class="clearfix procarelist-top">
+					<view class="procarelist-img">
+						<image src="../../../../static/resource/icon/icon_face.jpg"></image>
+					</view>
+					<view class="procarelist-info">
+						<view class="procarelist-title">张阿姨</view>
+						<view class="procarelist-brief">女<text class="age orangecolor">58岁</text><text class="experance orangecolor">5年</text>护理经验</view>
+						<view class="clearfix procarelist-service">
+							<view class="procarelist-number">已经用心服务过<text class="orangecolor">20</text>个患者 </view>
+							<view class="procarelist-level">
+								<text class="on"></text>
+								<text></text>
+								<text></text>
+								<text></text>
+								<text></text>
+							</view>
+						</view>
+					</view>
+				</view>	
+				<view class="procarelist-bottom">
+					<view class="procarelist-range">服务范围:</view>
+					<view class="procarelist-rangelist">
+						<text>生活照顾</text>
+						<text>生活照顾</text>
+						<text>生活照顾</text>
+						<text>生活照顾</text>
+					</view>
+				</view>
+			</view>
+			<!-- 2条数据结束 -->
+			<!-- 3条数据开始 -->
+			<view class="procarelist-item">
+				<view class="clearfix procarelist-top">
+					<view class="procarelist-img">
+						<image src="../../../../static/resource/icon/icon_face.jpg"></image>
+					</view>
+					<view class="procarelist-info">
+						<view class="procarelist-title">张阿姨</view>
+						<view class="procarelist-brief">女<text class="age orangecolor">58岁</text><text class="experance orangecolor">5年</text>护理经验</view>
+						<view class="clearfix procarelist-service">
+							<view class="procarelist-number">已经用心服务过<text class="orangecolor">20</text>个患者 </view>
+							<view class="procarelist-level">
+								<text class="on"></text>
+								<text></text>
+								<text></text>
+								<text></text>
+								<text></text>
+							</view>
+						</view>
+					</view>
+				</view>	
+				<view class="procarelist-bottom">
+					<view class="procarelist-range">服务范围:</view>
+					<view class="procarelist-rangelist">
+						<text>生活照顾</text>
+						<text>生活照顾</text>
+						<text>生活照顾</text>
+						<text>生活照顾</text>
+					</view>
+				</view>
+			</view>
+			<!-- 3条数据结束 -->
+			<!-- 4条数据开始 -->
+			<view class="procarelist-item">
+				<view class="clearfix procarelist-top">
+					<view class="procarelist-img">
+						<image src="../../../../static/resource/icon/icon_face.jpg"></image>
+					</view>
+					<view class="procarelist-info">
+						<view class="procarelist-title">张阿姨</view>
+						<view class="procarelist-brief">女<text class="age orangecolor">58岁</text><text class="experance orangecolor">5年</text>护理经验</view>
+						<view class="clearfix procarelist-service">
+							<view class="procarelist-number">已经用心服务过<text class="orangecolor">20</text>个患者 </view>
+							<view class="procarelist-level">
+								<text class="on"></text>
+								<text></text>
+								<text></text>
+								<text></text>
+								<text></text>
+							</view>
+						</view>
+					</view>
+				</view>	
+				<view class="procarelist-bottom">
+					<view class="procarelist-range">服务范围:</view>
+					<view class="procarelist-rangelist">
+						<text>生活照顾</text>
+						<text>生活照顾</text>
+						<text>生活照顾</text>
+						<text>生活照顾</text>
+					</view>
+				</view>
+			</view>
+			<!-- 4条数据结束 -->
+		</view>
 		
 	</view>
 </template>
@@ -23,7 +172,160 @@
 	}
 </script>
 <style style="text/css" scoped>
-	.arrow::after{
+	.clearfix:after{ content: ""; display:block; height: 0; clear: both; visibility: hidden;}
+	
+	.wrap{
+		width: 100%;
+		height: 100vh;
+		background: #e7f5f4;
+		padding: 0 30rpx;
+	}
+	.procarefilter{
+		width: 100%;
+		padding-top: 33rpx;
+		padding-bottom: 33rpx;
+	}
+	.filteritem{
+		float: left;
+		width: 33.33%;
+		font-size: 32rpx;
+		text-align: center;
+		color: #303233;
+	}
+	.arrow{
+		position: relative;
+		width: 16rpx;
+		margin-left: 10rpx;
+	}
+	.arrowicon{
+		position: absolute;
+		left: 0;
+		width: 16rpx;
+		height: 9rpx;
+		background-image: url(../../../../static/resource/icon/icon_gray_arrow.png);
+		background-position: center center;
+		background-repeat: no-repeat;
+		background-size: 100% auto;
+	}
+	.arrowup{
+		top: 9rpx;
+	}
+	.arrowicon.arrowdown{
+		bottom: 9rpx;
+		transform: rotate(180deg);
+		background-image: url(../../../../static/resource/icon/icon_gray_arrow.png);
+	}
+	.filteritem.active{
+		color: #f88a64;
+	}
+	.filteritem.active .arrowicon.arrowup.on{
+		transform: rotate(-180deg);
+		background-image: url(../../../../static/resource/icon/icon_orange_arrow.png);
+	}
+	.filteritem.active .arrowicon.arrowdown.on{
+		transform: none;
+		background-image: url(../../../../static/resource/icon/icon_orange_arrow.png);
+	}
+	.procarelist{
 		
 	}
+	.procarelist-item{
+		background: #fff;
+		box-shadow: 0 2rpx 20rpx rgba(86,98,109,.16);
+		border-radius: 4rpx;
+		margin-bottom: 30rpx;
+		padding: 24rpx 20rpx 10rpx;
+	}
+	.procarelist-top{
+		
+	}
+	.procarelist-img{
+		float: left;
+		width: 148rpx;
+		height: 148rpx;
+		border: 1px solid #f3f2f2;
+		border-radius: 50%;
+		overflow: hidden;
+	}
+	.procarelist-img image{
+		width: 148rpx;
+		height: 148rpx;
+		border-radius: 50%;
+	}
+	.procarelist-info{
+		float: right;
+		width: 72.3%;
+		padding-top: 15rpx;
+	}
+	.procarelist-title{
+		font-size: 26rpx;
+		color: #303233;
+		margin-bottom: 12rpx;
+	}
+	.procarelist-brief{
+		font-size: 24rpx;
+		color: #303233;
+	}
+	.orangecolor{
+		color: #f88a64;
+	}
+	.procarelist-brief text{
+		margin-left: 46rpx;
+	}
+	.procarelist-service{
+		margin-top: 12rpx;
+	}
+	.procarelist-number{
+		float: left;
+		font-size: 24rpx;
+		color: #303233;
+	}
+	.procarelist-level{
+		float: right;
+		margin-top: 1rpx;
+	}
+	.procarelist-level text{
+		display: inline-block;
+		width: 25rpx;
+		height: 24rpx;
+		background-image: url(../../../../static/resource/icon/star.png);
+		background-repeat: no-repeat;
+		background-position: center center;
+		background-size: 100% auto;
+		margin: 0 2rpx;
+	}
+	.procarelist-level text.on{
+		background-image: url(../../../../static/resource/icon/star_on.png);
+	}
+	.procarelist-bottom{
+		overflow: hidden;
+		padding-top: 26rpx;
+	}
+	.procarelist-range{
+		float: left;
+		font-size: 26rpx;
+		color: #000;
+		margin-top: 6rpx;
+	}
+	.procarelist-rangelist{
+		float: right;
+		width: 72.3%;
+	}
+	.procarelist-rangelist text{
+		width: 37.2%;
+		margin-right: 6.38%;
+		height: 48rpx;
+		line-height: 48rpx;
+		float: left;
+		text-align: center;
+		font-size: 24rpx;
+		margin-bottom: 16rpx;
+		color: #303233;
+		border: 2rpx solid transparent;
+		border-radius: 48rpx;
+		background-clip: padding-box, border-box;
+		background-origin: padding-box, border-box;
+		background-image: linear-gradient(to right, #e7f5f4, #e7f5f4), linear-gradient(90deg, #0ee2ba, #66f7db);
+	}
+	
 </style>
\ No newline at end of file
diff --git a/static/resource/icon/star.png b/static/resource/icon/star.png
new file mode 100644
index 0000000..a672247
Binary files /dev/null and b/static/resource/icon/star.png differ
diff --git a/static/resource/icon/star_on.png b/static/resource/icon/star_on.png
new file mode 100644
index 0000000..72b7a7b
Binary files /dev/null and b/static/resource/icon/star_on.png differ