diff --git a/pages.json b/pages.json
index 0be4f91..9570c28 100644
--- a/pages.json
+++ b/pages.json
@@ -89,6 +89,12 @@
 			"style": {
 				"navigationBarTitleText": "常见问题"
 			}
+		},
+		{
+			"path": "pages/detailed/index",
+			"style": {
+				"navigationBarTitleText": "收支明细"
+			}
 		}
     ],
 	"globalStyle": {
diff --git a/pages/detailed/index.vue b/pages/detailed/index.vue
new file mode 100644
index 0000000..56fc2be
--- /dev/null
+++ b/pages/detailed/index.vue
@@ -0,0 +1,236 @@
+<template>
+	<view class="detail-box">
+		<view class="head">
+			<view class="item" :class="{'active': activeItem === index}" v-for="(item, index) in headList"
+			 :key="index" @click="clickBtn(index)">{{item}}</view>
+			 <view class="item" :class="{'active': activeItem === -1}" @click="clickBtn(-1)">筛选</view>
+			 <view class="dropdown" v-show="activeItem === -1 && isShowItem">
+			 	<view class="select-time">
+					<view style="display: flex;" @click="startTime">
+						<u-image src="../../static/img/sz_icon_rq/sz_icon_rq.png" width="30" height="30"></u-image>
+						<view style="margin-left: 10rpx;">{{!selectDate.startDate ? '开始时间' : selectDate.startDate}}</view>
+					</view>
+					<view class="line"></view>
+					<view style="display: flex;" @click="startTime">
+						<u-image src="../../static/img/sz_icon_rq/sz_icon_rq.png" width="30" height="30"></u-image>
+						<view style="margin-left: 10rpx;">{{!selectDate.endDate ? '开始时间' : selectDate.endDate}}</view>
+					</view>
+				</view>
+				<view class="btns">
+					<view class="btn reset-btn" @click="resetBtnClick">重置</view>
+					<view class="btn confim-btn" @click="confimBtnClick">确认</view>
+				</view>
+			</view>
+		</view>
+		 <!---->
+		<view class="list" v-if="listData.length > 0">
+			<view class="item" v-for="(item, index) in listData"
+			 :key="index">
+				<view class="l">
+					<view>{{item.type}}</view>
+					<view>{{item.jine}}</view>
+				</view>
+				<view class="r">
+					<view>{{item.tiemtype}}</view>
+					<view class="time">{{item.time}}</view>
+				</view>
+			</view>
+			<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" @loadmore="loadmore" class="loadmore"/>
+		</view>
+		
+		<view v-else class="nothing-list">
+			<image src="../../static/img/dd_icon_zw/dd_icon_zw.png" class="img"></image>
+			<view class="w">暂无收支记录</view>
+			<view class="s">快去分享下单赚钱吧！</view>
+			<u-button class="confim" @click="confim" shape="circle" :ripple="true" :plain="false">确认</u-button>
+		</view>
+		<u-calendar v-model="showTime" mode="range" @change="change"></u-calendar>
+	</view>
+</template>
+
+<script>
+	export default {
+		data () {
+			return {
+				isShowItem: true,
+				selectDate: {},
+				showTime: false,
+				status: 'loadmore',
+				iconType: 'flower',
+				loadText: {
+					loadmore: '上拉加载更多',
+					loading: '努力加载中',
+					nomore: '没有更多了'
+				},
+				headList: ['全部', '收益明细', '支持明细'],
+				activeItem: 0,
+				listData: [
+					// {
+					// 	type: '推广收益',
+					// 	jine: '30元',
+					// 	tiemtype: '收益时间',
+					// 	time: '2021-02-21'
+					// },
+					// {
+					// 	type: '推广收益',
+					// 	jine: '30元',
+					// 	tiemtype: '收益时间',
+					// 	time: '2021-02-21'
+					// }
+				]
+			}
+		},
+		methods: {
+			resetBtnClick () {
+				this.isShowItem = false
+				this.selectDate = {}
+				this.activeItem = -2
+			},
+			confimBtnClick () {
+				this.isShowItem = false
+			},
+			change (data) {
+				console.log(data)
+				this.selectDate = data
+			},
+			loadmore () {
+				'加载更多'
+			},
+			clickBtn (index) {
+				this.activeItem = index
+				this.isShowItem = true
+			},
+			startTime () {
+				this.showTime = true
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.detail-box {
+		height: 100%;
+		margin: 0 20rpx;
+		& .head {
+			display: flex;
+			justify-content: space-between;
+			margin-top: 40rpx;
+			& .item {
+				height: 40rpx;
+				font-size: 28rpx;
+				line-height: 40rpx;
+				font-weight: 400;
+				color: #9093B7;
+				padding-bottom: 3rpx;
+				&.active {
+					color: #FFFFFF;
+					font-weight: 600;
+					border-bottom: 1rpx solid #FE192F;
+				}
+			}
+		}
+	}
+	.dropdown {
+		position: absolute;
+		top: 100rpx;
+		left: 0;
+		right: 0;
+		background: #151941;
+		& .select-time {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			padding: 50rpx 0;
+			color: #C4CBE4;
+			font-size: 24rpx;
+			& .line {
+				width: 32rpx;
+				height: 1rpx;
+				background-color: #C4CBE4;
+				margin: 0 50rpx;
+			}
+		}
+	}
+	.btns {
+		height: 90rpx;
+		display: flex;
+		& .btn {
+			flex: 1;
+			text-align: center;
+			line-height: 90rpx;
+			color: #FFFFFF;
+		}
+		& .reset-btn {
+			background: #373F8B;
+		}
+		& .confim-btn {
+			background: #FE192F;
+		}
+	}
+	.list {
+		margin-top: 50rpx;
+		font-size: 24rpx;
+		color: #FE192F;
+		& .item {
+			background-color: #2B3062;
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding: 30rpx 20rpx;
+			& .r {
+				text-align: right;
+				color: #8D90AC;
+			}
+			& .time {
+				font-size: 20rpx;
+			}
+		}
+		.loadmore {
+			margin-top: 40rpx !important;
+		}
+		& .item + .item {
+			border-top: 1rpx solid #576699;
+		}
+	}
+	
+	/deep/ .u-calendar__action {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+	}
+	.nothing-list {
+		flex-direction: column;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 100%;
+		color: #FFFFFF;
+		& .img {
+			width: 178rpx;
+			height: 200rpx;
+		}
+		& .w {
+			margin-top: 100rpx;
+			font-size: 40rpx;
+			color: #CED6F1;
+		}
+		& .s {
+			margin-top: 20rpx;
+			font-size: 28rpx;
+			color: #9496B1;
+		}
+		& .confim {
+			margin: 70rpx 0rpx 29rpx 0rpx;
+			width: 233rpx;
+			height: 90rpx;
+			background: linear-gradient(143deg, #EF6F5F 0%, #FB2636 100%);
+			border-radius: 45rpx;
+			font-size: 32rpx;
+			color: #FFFFFF;
+			&::after {
+				border: none;
+			}
+		}
+	}
+</style>
diff --git a/static/img/dd_icon_zw/dd_icon_zw.png b/static/img/dd_icon_zw/dd_icon_zw.png
new file mode 100644
index 0000000..fd08bcf
Binary files /dev/null and b/static/img/dd_icon_zw/dd_icon_zw.png differ
diff --git a/static/img/dd_icon_zw/dd_icon_zw@2x.png b/static/img/dd_icon_zw/dd_icon_zw@2x.png
new file mode 100644
index 0000000..fd3b6ea
Binary files /dev/null and b/static/img/dd_icon_zw/dd_icon_zw@2x.png differ
diff --git a/static/img/sz_icon_rq/sz_icon_rq.png b/static/img/sz_icon_rq/sz_icon_rq.png
new file mode 100644
index 0000000..f7eed0f
Binary files /dev/null and b/static/img/sz_icon_rq/sz_icon_rq.png differ
diff --git a/static/img/sz_icon_rq/sz_icon_rq@2x.png b/static/img/sz_icon_rq/sz_icon_rq@2x.png
new file mode 100644
index 0000000..ff091ec
Binary files /dev/null and b/static/img/sz_icon_rq/sz_icon_rq@2x.png differ