我的待办

pages/gallery/needDo/needDo.vue

 <template>
 	<view class="content">
 		<titleBar title="我的待办"></titleBar>
+		<view class="search-content">
+			<image src="../../../static/ic-search.png" class="image"></image>
+			<input placeholder="搜索" placeholder-class="placeholderStyle" @input="search" class="inputStyle" />
+		</view>
+		<view class="needdo-content">
+			<view class="item-content">
+				<view class="title-content">
+					<text class="text">今日待办</text>
+					<image class="image" src="../../../static/ic-today.png"></image>
+				</view>
+				<view class="count">3</view>
+			</view>
+			<view class="item-content" style="margin-left: 20rpx;">
+				<view class="title-content">
+					<text class="text">全部待办</text>
+					<image class="image" src="../../../static/ic-all.png"></image>
+				</view>
+				<view class="count">5</view>
+			</view>
+			<view class="item-content" style="margin-top: 20rpx;">
+				<view class="title-content">
+					<text class="text">完成待办</text>
+					<image class="image" src="../../../static/ic-finish.png"></image>
+				</view>
+				<view class="count">5</view>
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -21,5 +48,79 @@
 	.content {
 		display: flex;
 		flex-direction: column;
+
+		.search-content {
+			display: flex;
+			flex-direction: row;
+			border: 1rpx solid #656565;
+			height: 30px;
+			margin: 30rpx;
+			width: 688rpx;
+			border-radius: 30rpx;
+			align-items: center;
+
+			image {
+				width: 24rpx;
+				margin-left: 30rpx;
+				height: 24rpx;
+			}
+
+			.placeholderStyle {
+				font-size: 24rpx;
+				color: #999;
+			}
+
+			.inputStyle {
+				font-size: 24rpx;
+				margin-left: 20rpx;
+				color: #333;
+			}
+		}
+
+		.needdo-content {
+			display: flex;
+			width: 690rpx;
+			flex-direction: row;
+			margin: 20rpx 30rpx;
+			flex-wrap: wrap;
+
+			.item-content {
+				display: flex;
+				flex-direction: column;
+				width: 334rpx;
+				height: 108px;
+				background-color: #fff;
+				border-radius: 30rpx;
+
+				.title-content {
+					display: flex;
+					margin: 30rpx;
+					justify-content: space-between;
+					flex-direction: row;
+					align-items: center;
+
+					text {
+						font-weight: 400;
+						font-size: 28rpx;
+						color: #656565;
+					}
+
+					image {
+						width: 50rpx;
+						height: 50rpx;
+					}
+				}
+
+				.count {
+					font-weight: 600;
+					font-size: 40rpx;
+					margin-top: 30rpx;
+					margin-left: 50rpx;
+					text-align: left;
+					color: #333;
+				}
+			}
+		}
+
 	}
 </style>