diff --git a/pages.json b/pages.json
index 4c6acb9..0fccc91 100644
--- a/pages.json
+++ b/pages.json
@@ -184,7 +184,17 @@
 			"navigationBarTextStyle": "white"
 		},
 		"name": "ResetPassword"
-	} ],
+	},{
+		"path": "pages/wallet/fragment",
+		"style": {
+			"navigationBarTitleText": "能量碎片记录",
+			"enablePullDownRefresh": false,
+			"navigationBarBackgroundColor": "#774ffd",
+			"navigationBarTextStyle": "white"
+		},
+		"name": "Fragment"
+	}
+	],
 	"globalStyle": {
 		"navigationStyle": "custom",
 		"backgroundColor": "#F5F5F5"
diff --git a/pages/user/index.vue b/pages/user/index.vue
index c996934..453afb5 100644
--- a/pages/user/index.vue
+++ b/pages/user/index.vue
@@ -135,8 +135,8 @@
                             <view class="assets-label-name">能量球钱包<image @click.stop="showHelp('wallet')" class="assets-label-icon" src="/static/user/userAssets_tips.png"></image></view>
                             <view class="assets-label-number">{{userData.account.coins || 0}}</view>
                         </view>
-                        <view class="assets-label">
-                            <view class="assets-label-name">能量碎片<image @click="showHelp('chip')" class="assets-label-icon" src="/static/user/userAssets_tips.png"></image></view>
+                        <view class="assets-label" @click="$Router.push({name:'Fragment'})">
+                            <view class="assets-label-name">能量碎片<image @click.stop="showHelp('chip')" class="assets-label-icon" src="/static/user/userAssets_tips.png"></image></view>
                             <view class="assets-label-number">{{userData.account.score || 0}}</view>
                         </view>
                     </view>
diff --git a/pages/wallet/extract.vue b/pages/wallet/extract.vue
index 1823bf8..afd839a 100644
--- a/pages/wallet/extract.vue
+++ b/pages/wallet/extract.vue
@@ -1,7 +1,7 @@
 <template>
   <view class="WithdrawingCoin ">
     <view class="withdrawing-content">
-      <view class="item-name">账户能量球将提现到银行卡</view>
+      <view class="item-name">能量球提现至银行卡</view>
       <view class="item">
         <view style="flex: 1;">
           <input class="input_num" v-model="withdraw_input" @input='inputNum' type="number"
@@ -254,7 +254,7 @@
   }
 
   .all {
-    color: $mian-color;
+    color: $text-price;
     width: 160rpx;
     text-align: center;
   }
@@ -264,8 +264,8 @@
     background-color: #fff;
     box-shadow: 0 0 30rpx 1rpx rgba($color: #000000, $alpha: 0.2);
     margin: $margin*1.4;
-    border-radius: $radius*1.5;
-    padding: $padding*1.4;
+    border-radius: 20rpx;
+    padding: $padding*1.4 ;
     font-size: $title-size-m;
 
     .item-name {
@@ -274,7 +274,7 @@
       color: #303030;
       font-weight: bold;
       margin-bottom: $margin;
-      font-size: $title-size *1.4;
+      font-size: $title-size *1.2;
     }
 
     .item {
@@ -305,7 +305,7 @@
       flex-direction: row;
       align-items: center;
       justify-content: space-between;
-      padding: $padding*2 0 0 0;
+      padding: $padding*1 0 0 0;
       color: #3a3a3a;
 
       .total {
@@ -331,9 +331,9 @@
     // background-color: $text-price;
 	background-image: linear-gradient(to right, $text-price, $mian-color);
     color: #fff;
-    border-radius: 50rpx;
+    border-radius: 20rpx;
     text-align: center;
-    padding: $padding ;
+    padding: $padding * .7 ;
     margin: $margin * 2;
     font-size: $title-size;
     font-weight: bold;
diff --git a/pages/wallet/fragment.vue b/pages/wallet/fragment.vue
new file mode 100644
index 0000000..c6a780d
--- /dev/null
+++ b/pages/wallet/fragment.vue
@@ -0,0 +1,336 @@
+<template>
+	<view class="Record">
+		<view class="record-top">
+			<image src="/static/imgs/account-bg.png" mode="widthFix" class="record-bg" />
+			<view class="record-top-nav">
+				<view :class="['record-top-item',type==='year'?'selectTopItem':'']" 
+				@click="selectType('year')">年账单</view>
+				<view :class="['record-top-item',type==='month'?'selectTopItem':'']" 
+				@click="selectType('month')">月账单</view>
+				<view :class="['record-top-item',type==='day'?'selectTopItem':'']" 
+				@click="selectType('day')">日账单</view>
+			</view>
+			<view class="record-mouth-year">
+				<view class="record-type-right">
+					<view class="record-title">碎片个数</view>
+					<view class="record-money">{{account || '0.00'}} <span>个</span> </view>
+				</view>
+				<view class="record-type-left">
+					<u-picker mode="time" v-model="show" :params="params" 
+					@confirm ='confirm' title ='筛选日期' start-year='2021' :end-year='currentYear'/>
+					<view @click="show = true">
+						{{date?date:'选择日期'}}
+						<uni-icons type="arrowdown" color="#fff" size="12" />
+					</view>
+				</view>
+			</view>
+			<!-- <view class="record-title">碎片个数</view>
+			<view class="record-money"><span>￥</span>{{account || '0.00'}}</view> -->
+		</view>
+		
+		<!-- 列表。。。 -->
+		<view class="record-list" v-if="lists.length>0">
+			<view class="record-list-item" v-for="(item,index) in lists" :key='index'>
+				<image src="/static/imgs/record-icon.png" mode="widthFix" class="record-icon" />
+				<view class="">
+					<view class="record-list-item-top">
+						<view class="title ellipsis-1">完成任务获得碎片完成任务获得碎片完成任务获得碎片完成任务获得碎片完成任务获得碎片完成任务获得碎片</view>
+						<view class="money" >{{cointype==='in'?'+':'-'}}5</view>
+					</view>
+					<view class="record-list-item-date">2021-12-22 12:12:12</view>
+				</view>
+			</view>
+		</view>
+		<!-- 无列表 -->
+		<no-list v-if="lists.length === 0" name='no-record' txt="没有任何碎片记录 ~ " />
+		
+		<!-- <u-toast ref="uToast" /> -->
+		<u-toast ref="uToast" />
+	</view>
+</template>
+
+<script>
+	import {chaineb} from '@/apis/interfaces/mine';
+	export default {
+		data() {
+			return {
+				lists:[1,1.1,1,1],
+				has_next_page:true,
+				page:1,
+				type:'year', // 统计类型day日，month月，year年
+				cointype:'in',// in 收入 out 支出
+				date:new Date().toISOString().slice(0,4), // 日：Y-m-d，月Y-m，年Y
+				params: {
+					year: true,
+					month: false,
+					day: false
+				},
+				show: false, // 显示
+				currentDay:new Date().toISOString().slice(0,10),
+				currentMonth:new Date().toISOString().slice(0,7),
+				currentYear:new Date().toISOString().slice(0,4),
+				account:''
+			}
+		},
+		onLoad(){
+			this.getList()
+		},
+		onReachBottom(){
+			if (this.has_next_page) {
+			  this.page = this.page + 1
+			  this.getList()
+			} else {
+			  this.$refs.uToast.show({
+			    title: '吼吼吼~我是有底的~',
+			    type: 'primary',
+			    duration: 3000
+			  })
+			}
+		},
+		methods: {
+			// 获取列表
+			getList(){
+				let data = {
+					page:this.page,
+					type:this.type,
+					date:this.date,
+					cointype:this.cointype
+				}
+				chaineb(data).then(res => {
+					this.account = res.account
+					this.lists = this.lists.concat(res.lists)
+					this.has_next_page = res.has_next_page
+				}).catch(err => {
+					this.$refs.uToast.show({
+						title: err.message,
+						type: 'primary',
+						duration: 3000
+					})
+				})
+			},
+			selectCoinType(type){
+				if(this.cointype !== type){
+					this.cointype = type
+					this.reset()
+				}
+			},
+			// 重置
+			reset(){
+				this.page = 1
+				this.lists = []
+				this.has_next_page = true
+				this.getList()
+			},
+			// 选择 年  月  日 切换要重置数据
+			selectType(type){
+				if(this.type !== type){
+					switch(type){
+						case 'year':
+							this.type = type
+							this.params= {
+								year: true,
+								month: false,
+								day: false
+							}
+							this.date = this.currentYear
+							this.reset()
+							break;
+						case 'month':
+							this.type = type
+							this.params= {
+								year: true,
+								month: true,
+								day: false
+							}
+							this.date = this.currentMonth
+							this.reset()
+							break;
+						case 'day':
+							this.type = type
+							this.params= {
+								year: true,
+								month: false,
+								day: false
+							}
+							this.date = this.currentDay
+							this.reset()
+							break;
+					}
+				}
+			},
+			// 点击确认按钮
+			confirm(e){
+				let type = this.type
+				switch(type){
+					case 'year':
+						this.date = e.year
+						this.reset()
+						break;
+					case 'month':
+						this.date = e.year + '-' + e.month
+						this.reset()
+						break;
+					case 'day':
+						this.date = e.year + '-' + e.month + '-' + e.day
+						this.reset()
+						break;
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.Record {
+		width: 100%;
+		height: 100vh;
+		padding-top: 30rpx;
+		background-color: #fff;
+	}
+
+	.record-top {
+		width: calc(100% - 60rpx);
+		height: 360rpx;
+		background-image: linear-gradient(to right, #7c52fc, #976dff);
+		box-shadow: 0 10rpx 20rpx 0rpx rgba($color: #976dff, $alpha: 0.4);
+		margin: 0 30rpx;
+		border-radius: 20rpx;
+		box-sizing: border-box;
+		position: relative;
+		padding: 10rpx 50rpx 20rpx 50rpx;
+		z-index: 1;
+
+		.record-bg {
+			position: absolute;
+			width: 100%;
+			bottom: 0;
+			right: 0;
+			z-index: 1;
+		}
+
+		.record-top-nav {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			justify-content: center;
+			box-sizing: border-box;
+
+			.record-top-item {
+				margin: 40rpx 20rpx;
+				font-size: 30rpx;
+				font-weight: 500;
+				color: #fff;
+			}
+			.selectTopItem{
+				border-bottom: solid 4rpx #fff;
+			}
+		}
+
+		.record-mouth-year {
+			display: flex;
+			flex-direction: row;
+			align-items: flex-start;
+			justify-content: space-between;
+			box-sizing: border-box;
+			position: relative;
+			z-index: 2;
+			color: #fff;
+			font-size: 30rpx;
+			margin-top: 20rpx;
+
+			.record-type-left {
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+				justify-content: flex-start;
+				box-sizing: border-box;
+
+				uni-icons {
+					margin-left: 4rpx;
+				}
+			}
+
+			.record-type-right {
+				display: flex;
+				flex-direction: column;
+				align-items: flex-start;
+				justify-content: flex-start;
+				box-sizing: border-box;
+				font-size: 24rpx;
+				flex: 1;
+
+				.pay_type_item {
+					margin: 0 10rpx;
+					padding: 2rpx 20rpx;
+					border-radius: 30rpx;
+					border: solid 1rpx rgba($color: #000000, $alpha: 0);
+				}
+				.pay_type_item_select{
+					border: solid 1rpx #f7f7f7;
+				}
+			}
+		}
+
+		.record-title {
+			font-size: 28rpx;
+			color: #fff;
+			padding:0 0 20rpx 0;
+		}
+
+		.record-money {
+			color: #fff;
+			font-size: 60rpx; 
+			font-weight: bold;
+
+			span {
+				font-size: 24rpx;
+				font-weight: 400;
+				padding-left: 20rpx;
+				margin-right: 4rpx;
+			}
+		}
+	}
+
+	.record-list {
+		padding: 20rpx 30rpx;
+
+		.record-list-item {
+			padding: 20rpx 0;
+			border-bottom: solid 1rpx #f7f7f7;
+			display: flex;
+			flex-direction: row;
+			align-items: flex-start;
+			justify-content: flex-start;
+			box-sizing: border-box;
+			.record-icon{
+				width: 60rpx;
+				margin-right: 20rpx;
+			}
+			.record-list-item-top {
+				display: flex;
+				flex-direction: row;
+				align-items: center;
+				justify-content: space-between;
+				box-sizing: border-box;
+				width: 600rpx;
+
+				.title {
+					font-size: 30rpx;
+					width: 600rpx;
+				}
+
+				.money {
+					color: #ee4c47;
+					font-size: 32rpx;
+					font-weight: bold;
+				}
+			}
+
+			.record-list-item-date {
+				font-size: 24rpx;
+				color: #a6a6a6;
+				margin-top: 10rpx;
+			}
+		}
+	}
+</style>
diff --git a/pages/wallet/property.vue b/pages/wallet/property.vue
index 5583158..25d426d 100644
--- a/pages/wallet/property.vue
+++ b/pages/wallet/property.vue
@@ -266,8 +266,8 @@
 			}
 
 			.balance {
-				font-size: $title-size * 2;
-				padding: ($padding / 2) 0;
+				font-size: $title-size * 2.5;
+				padding: $padding 0;
 				color: white;
 			}
 
@@ -275,18 +275,17 @@
 				background: rgba($color: #000000, $alpha: .1);
 				color: rgba($color: white, $alpha: .7);
 				display: inline-block;
-				padding: 0 $padding;
-				font-size: $title-size-m;
-				height: 50rpx;
-				line-height: 50rpx;
+				font-size: 24rpx;
+				padding: 6rpx $padding;
 				border-radius: $radius-m;
 				border: solid 1rpx rgba($color: white, $alpha: .4)
+				
 			}
 
 			.balance-flex {
 				display: flex;
 				justify-content: center;
-				margin-top: $margin * 3;
+				margin-top: $margin * 2;
 
 				.balance-flex-item {
 					background-color: white;
@@ -296,7 +295,7 @@
 					color: $text-price;
 					margin: 0 $margin;
 					border-radius: $radius-m;
-					font-size: $title-size;
+					font-size: 28rpx;
 				}
 			}
 		}
diff --git a/scss/globa.scss b/scss/globa.scss
index f63b05f..e4906a3 100644
--- a/scss/globa.scss
+++ b/scss/globa.scss
@@ -76,7 +76,7 @@ $padding: 30rpx;
 	-webkit-line-clamp: 2;
 }
 
-.ellipsis {
+.ellipsis-1 {
 	overflow: hidden;
 	white-space: nowrap;
 	text-overflow: ellipsis;
diff --git a/static/imgs/account-bg.png b/static/imgs/account-bg.png
new file mode 100644
index 0000000..166699c
Binary files /dev/null and b/static/imgs/account-bg.png differ
diff --git a/static/imgs/record-icon.png b/static/imgs/record-icon.png
new file mode 100644
index 0000000..4480415
Binary files /dev/null and b/static/imgs/record-icon.png differ