diff --git a/pages/index/index.vue b/pages/index/index.vue
index 41cadb8..deed1c9 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,483 +1,266 @@
 <template>
 	<view class="content">
-		<!-- 水晶获得公告 -->
-		<view class="notice" v-if="notice.length >= 1">
-			<swiper class="notice-swiper" :vertical="true" autoplay circular>
-				<swiper-item v-for="(item, index) in notice" :key="index">
-					<view class="notice-item">
-						<image class="notice-cover" :src="item.avatar" mode="aspectFill"></image>
-						<view class="notice-title ellipsis">{{item.nickname}} {{item.title}} {{item.amount}}</view>
-					</view>
-				</swiper-item>
-			</swiper>
-		</view>
 		<!-- 账户余额 -->
-		<view class="info">
-			<view class="info-number">
-				<image class="number-background number-rotate" src="@/static/background/chain-back-01.png" />
-				<view class="info-content webkit-box">
-					<view class="text">{{isAuth ? '持有原石量': '恒量发行原石量'}}<uni-icons class="help-icon" @click="showHelp('occ')" type="help-filled" size="18" color="#fff" /></view>
-					<view class="number">{{occ}}</view>
-					<view class="login" @click="$Router.push({name: 'Login'})" v-if="!isAuth">立即登录</view>
-					<view class="login" @click="openWallet" v-else>我的钱包</view>
-				</view>
-			</view>
-		</view>
-		<!-- 公告信息 -->
-		<!-- <view class="increase">今日消费100元，预计原石单价增长0.1%</view> -->
-		<!-- 平台概况 -->
-		<view class="situation">
-			<view class="header">
-				<view class="header-item">
-					<view class="title">平台原石余量<uni-icons class="help-icon" @click="showHelp('occBalance')" type="help-filled" size="18" color="#009b69" /></view>
-					<view class="number ellipsis">{{ occBalance }}</view>
-				</view>
-				<view class="header-item">
-					<view class="title">昨日瓜分水晶<uni-icons class="help-icon" @click="showHelp('yesterdayCrystal')" type="help-filled" size="18" color="#009b69" /></view>
-					<view class="number ellipsis">{{ yesterdayCrystal }}</view>
-				</view>
-				<view class="header-item">
-					<view class="title">区块链高度<uni-icons class="help-icon" @click="showHelp('blockHeight')" type="help-filled" size="18" color="#009b69" /></view>
-					<view class="number ellipsis">{{ blockHeight }}</view>
-				</view>
-				<view class="header-item">
-					<view class="title">平台累计盈利额<uni-icons class="help-icon" @click="showHelp('gain')" type="help-filled" size="18" color="#009b69" /></view>
-					<view class="number ellipsis">{{ gain }}</view>
-				</view>
-				<view class="header-item">
-					<view class="title">已开通节点数<uni-icons class="help-icon" @click="showHelp('nodeNumber')" type="help-filled" size="18" color="#009b69" /></view>
-					<view class="number ellipsis">{{ nodeNumber }}</view>
-				</view>
-			</view>
-			<!-- 节点信息 -->
-			<view class="node-info">
-				<view class="node-item">
-					<view class="title">轻节点</view>
-					<view class="number ellipsis">{{occs.light || '-'}}</view>
-				</view>
-				<view class="node-item">
-					<view class="title">合作节点</view>
-					<view class="number ellipsis">{{occs.cooperation || '-'}}</view>
-				</view>
-				<view class="node-item">
-					<view class="title">主节点</view>
-					<view class="number ellipsis">{{occs.main || '-'}}</view>
-				</view>
-				<view class="node-item">
-					<view class="title">超级节点</view>
-					<view class="number ellipsis">{{occs.super || '-'}}</view>
-				</view>
-				<view class="node-item">
-					<view class="title">运营节点</view>
-					<view class="number ellipsis">{{occs.operating || '-'}}</view>
-				</view>
-				<view class="node-item">
-					<view class="title">技术节点</view>
-					<view class="number ellipsis">{{occs.technology || '-'}}</view>
-				</view>
-			</view>
-			<!-- 平台盈利额，原石数量 -->
-			<view class="chart">
-				<view class="title">平台累计营业额和原石价值走势图</view>
-				<view class="chart-f2">
-					<l-f2 ref="chartChange"></l-f2>
+		<view class="total">
+			<view class="item nowrap"><image src="@/static/icons/gemstone-icon.png"/>能量球 99</view>
+			<view class="item nowrap"><image src="@/static/icons/crystal-icon.png"/>能量碎片 11</view>
+		</view>
+		<!-- 矿机 -->
+		<view class="ore">
+			<image class="ore-back" src="@/static/background/chain-back-00.png" mode="widthFix"></image>
+			<view class="ball">
+				<view class="shadow"></view>
+			</view>
+			<view class="ore-lists">
+				<view class="oct-float ore-item" v-for="(item, index) in crystalArr" :key="index" @click="ledCrystal(index)">
+					<block v-if="item.amount !== null">
+						<image src="/static/imgs/crystal-ore-icon.png" mode="widthFix" class="icon" />
+						<view class="text">能量碎片{{ item.amount || '-'}}</view>
+					</block>
 				</view>
+				<navigator url="../index/index" open-type="switchTab" hover-class="none" class="oct-float ore-item-nav">
+					<image src="/static/imgs/gemstone-ore-icon.png" mode="widthFix" class="icon" />
+					<view class="text">购物<uni-icons type="arrowright" color="#FFFFFF" size="14"></uni-icons></view>
+				</navigator>
 			</view>
 		</view>
+		<!-- 任务分类 -->
+		<scroll-view class="task-block" scroll-x="true">
+		     <view class="item" v-for="(item, index) in categoryArr" :key="index" @click="JumpUrl(item.url, item.title)">
+		     	<view class="text">{{ item.remark }}</view>
+		     	<view class="icon">
+		     		<image :src="item.cover" />
+		     	</view>
+		     	<view class="title">{{ item.title }}</view>
+		     </view>
+		</scroll-view>
 	</view>
 </template>
 
 <script>
-	import { occ } from '@/apis/interfaces/chain'
-	import { certified, security } from '@/apis/interfaces/index'
-	import F2 from '@/uni_modules/lime-f2/components/lime-f2/f2.min.js'
-	import lF2 from '@/uni_modules/lime-f2/components/lime-f2/'
 	export default {
-		components: {
-			lF2
-		},
 		data() {
 			return {
-				occs: {},
-				blockHeight: 0,
-				occBalance: 0,
-				occ: 0,
-				yesterdayCrystal: 0,
-				gain: 0,
-				nodeNumber: 0,
-				notice: [],
-				isAuth: false,
-				helpToast: {
-					occ: '恒量发行原石量',
-					occBalance: '平台原石量',
-					yesterdayCrystal: '昨日瓜分水晶',
-					blockHeight: '区块链高度',
-					gain: '平台累计盈利额',
-					nodeNumber: '已开通节点数'
-				}
+				crystalArr  : [],
+				categoryArr : []
 			};
-		},
-		onShow() {
-			if(this.$store.state.token != '') this.isAuth = true
-			this.getOcc()
-		},
-		methods:{
-			// 求助信息
-			showHelp(type) {
-				uni.showModal({
-				    title: '提示',
-				    content: this.helpToast[type],
-					showCancel: false
-				})
-			},
-			// 原石钱包
-			openWallet(){
-				Promise.all([certified(), security()]).then(res=> {
-					let certified = res[0],
-						security  = res[1]
-					if(!certified){
-						uni.showModal({
-							title: '提示',
-							content: '您还为完成个人认证，无法激活您的钱包',
-							confirmText: '去认证',
-							confirmColor: '#009B69',
-							cancelColor: '#666666',
-							cancelText: '稍后再说',
-							success: res=> {
-								if(res.confirm) {
-									uni.navigateTo({
-										url: '/pages/certification/personal'
-									})
-								}
-							}
-						})
-						return
-					}
-					if(!security) {
-						uni.showModal({
-							title: '激活提示',
-							content: '您的钱包未激活，是否立即导出助记词并激活您的钱包?',
-							confirmText: '去激活',
-							confirmColor: '#009B69',
-							cancelColor: '#666666',
-							cancelText: '稍后再说',
-							success: res=> {
-								if(res.confirm) {
-									uni.navigateTo({
-										url: '/pages/wallet/add'
-									})
-								}
-							}
-						})
-						return
-					}
-					uni.navigateTo({
-						url: '/pages/wallet/property'
-					})
-				})
-			},
-			// occ信息
-			getOcc(){
-				occ().then(res => {
-					this.occs = res.occs
-					this.yesterdayCrystal = res.yesterday_crystal
-					this.occ = res.occ
-					this.occBalance = res.occ_balance
-					this.blockHeight = res.block_height
-					this.gain = res.gain
-					this.nodeNumber = res.node_number
-					this.notice = res.notice
-					if(res.help_toast) this.helpToast = res.help_toast
-					this.showCartc(res.movements)
-				}).catch(err => {
-					console.log(err)
-				})
-			},
-			// 绘制图表
-			showCartc(data){
-				// 图表信息
-				this.$refs.chartChange.init(config => {
-					config.appendPadding = [10, 15, 10, 15]
-					
-					const chart = new F2.Chart(config);
-					chart.source(data, {
-						date: {
-							range: [0, 1],
-							type: 'timeCat',
-							mask: 'MM-DD'
-						},
-						value: {
-							tickCount: 5
-						}
-					});
-					chart.axis('time', {
-						line: null,
-						label: function label(text, index, total) {
-							const textCfg = {};
-							if (index === 0) {
-								textCfg.textAlign = 'left';
-							} else if (index === total - 1) {
-								textCfg.textAlign = 'right';
-							}
-							return textCfg;
-						}
-					});
-					chart.axis('tem', {
-						grid: function grid(text) {
-							if (text === '0%') {
-								return {
-									lineDash: null,
-									lineWidth: 1
-								};
-							}
-						}
-					});
-					chart.tooltip({
-						showCrosshairs: true
-					});
-					chart.legend({
-						position: 'bottom',
-						offsetY: 0,
-						offsetX: 30
-					});
-					chart.area()
-						.position('date*value')
-						.color('name', [ '#009b69', '#9f8052' ])
-						.shape('smooth')
-					chart.line()
-						.position('date*value')
-						.color('name', [ '#009b69', '#9f8052' ])
-						.shape('smooth', name=> {
-							if (name === '预期收益率') {
-								return 'line';
-							}
-							if (name === '实际收益率') {
-								return 'dash';
-							}
-						});
-						chart.render();
-					return chart;
-				})
-			}
 		}
 	}
 </script>
 
 <style scoped>
-	/* 气泡漂浮 */
-	.number-float{
+	/* 星球旋转 */
+	.ball{
+		position: absolute;
+		height: 480rpx;
+		width: 480rpx;
+		top: 50%;
+		left: 50%;
+		margin-top: -240rpx;
+		margin-left: -240rpx;
+		border-radius: 50%;
+		-webkit-transform-style: preserve-3d;
+		background: url(/static/background/chain-back-02.png) repeat-x;
+		background-size: auto 100%;
+		-webkit-animation: move-map 30s infinite linear;
+		-moz-animation: move-map 30s infinite linear;
+		-o-animation: move-map 30s infinite linear;
+		-ms-animation: move-map 30s infinite linear;
+		animation: move-map 30s infinite linear;
+		box-shadow: 0 0 50rpx 50rpx rgba(31,25,34, .2);
+	}
+	.shadow{
+		position: absolute;
+		top: 1%;
+		left: 5%;
+		width: 90%;
+		height: 90%;
+		border-radius: 50%;
+		filter: blur(5px);
+		z-index: 3;
+		background: radial-gradient(circle at 50% 0, rgba(255,255,255, .6) , rgba(255, 255, 255, .0) 58%);
+	}
+	.ball:before,
+	.ball::after{
+		position: absolute;
+		top: 0;
+		left: 0;
+		content: "";
+		width: 100%;
+		height: 100%;
+		border-radius: 50%;
+		filter: blur(5px);
+		z-index: 2;
+	}
+	.ball:before {
+		background: radial-gradient(circle at 100% 50%, #5881d3 , rgba(255, 255, 255, .0) 45%);
+	}
+	.ball::after {
+		background: radial-gradient(circle at 0 50%, #ca66e0 , rgba(255, 255, 255, .0) 45%);
+	}
+	@-webkit-keyframes move-map {
+		0% {background-position: -1250rpx 0; }
+		100% {background-position: 0 0;}
+	}
+	@-ms-keyframes move-map {
+		0% {background-position: -1250rpx 0; }
+		100% {background-position: 0 0;}
+	}
+	
+	@keyframes move-map {
+		0% {background-position: -1250rpx 0; }
+		100% {background-position: 0 0;}
+	}
+	
+	/* 水晶漂浮动画 */
+	.oct-float {
 		animation: 4s octfloat infinite;
 	}
-	@keyframes octfloat{
-		0%{
+	@keyframes octfloat {
+		0% {
 			margin-top: 0;
 		}
-		50%{
+	
+		50% {
 			margin-top: 15rpx;
 		}
-		100%{
+	
+		100% {
 			margin-top: 0;
 		}
 	}
-	/* 背景旋转 */
-	.number-rotate{
-		animation: 30s octrotate infinite linear;
-	}
-	@keyframes octrotate{
-		from{
-			transform:rotate(0deg);
-		}
-		to{
-			transform:rotate(360deg);
-		}
-	}
 </style>
 
-<style lang="scss">
-	// 背景
+<style lang="scss" scoped>
 	.content{
-		background: $mian-color-deep;
-		min-height: 100vh;
-		padding-top: var(--status-bar-height);
-		box-sizing: border-box;
-		background-image: url(@/static/background/chain-back-00.png);
-		background-size: 100%;
-		background-position: top center;
-		background-repeat: no-repeat;
+		min-height: calc(100vh - 60px);
+		background: #1f1922;
+		overflow: hidden;
 	}
-	// 求助icon
-	.help-icon{
-		vertical-align: middle;
-		margin-bottom: 4px;
-		margin-left: $margin/2;
-		opacity: .7;
-	}
-	// 原石账户
-	.info{
-		margin-top: calc(#{$margin * 2} + 60rpx);
-		padding: var(--status-bar-height) $padding * 2 $padding * 3;
-		text-align: center;
-		.info-number{
-			position: relative;
-			display: inline-block;
-			width: 568rpx;
-			height: 568rpx;
-			.number-background{
-				width: 100%;
-				height: 100%;
-			}
-			.info-content{
-				position: absolute;
-				top: 12%;
-				left: 12%;
-				width: 76%;
-				height: 76%;
-				background-image: url(@/static/background/chain-back-02.png);
-				background-size: cover;
-				color: white;
-				.text{
-					font-size: $title-size-m;
-					text-shadow: 2rpx 2rpx 0 rgba($color: $mian-color-deep, $alpha: .5);
-				}
-				.number{
-					font-weight: bold;
-					font-size: $title-size + 8;
-					line-height: 70rpx;
-					text-shadow: 2rpx 2rpx 0 rgba($color: $mian-color-deep, $alpha: .5);
-				}
-				.login{
-					margin-top: $margin;
-					background-color: $mian-color;
-					display: inline-block;
-					padding: ( $padding / 2 ) $padding;
-					font-size: $title-size-m;
-					border-radius: 30rpx;
-					border:solid 1rpx $mian-color-deep;
-				}
+	// 数据统计
+	.total {
+		position: relative;
+		margin: $margin ($margin + $margin/2);
+		background: #2b2449;
+		padding: 0;
+		display: flex;
+		border-radius: $radius;
+		.item {
+			width: 50%;
+			padding: 0 $padding;
+			text-align: center;
+			color: white;
+			font-size: $title-size-sm;
+			line-height: 76rpx;
+			image{
+				width: 38rpx;
+				height: 38rpx;
+				vertical-align: top;
+				margin-top: calc((76rpx - 38rpx) / 2);
+				margin-right: $margin / 2;
 			}
 		}
-	}
-	// 预计增长
-	.increase{
-		margin: 0 ($margin + $margin / 2) ($margin * 2);
-		background: rgba($color: $mian-color, $alpha: .1);
-		text-align: center;
-		height: 80rpx;
-		line-height: 80rpx;
-		font-size: $title-size-m;
-		color: $mian-color;
-		border-radius: $radius-sm;
-		padding: 0 $padding;
-	}
-	// 公告信息
-	.notice{
-		position: fixed;
-		top: $margin * 2;
-		left: $margin + $margin / 2;
-		right: $margin + $margin / 2;
-		padding-top: var(--status-bar-height);
-		z-index: 99;
-		.notice-swiper{
-			height: 60rpx;
-		}
-		.notice-item{
-			position: relative;
-			height: 60rpx;
-			padding-left: 80rpx;
-			padding-right: $padding * 2;
-			display: inline-block;
-			background: rgba($color: $mian-color-deep, $alpha: .3);
-			border-radius: 30rpx;
-			box-sizing: border-box;
-			max-width: 100%;
-			.notice-cover{
-				position: absolute;
-				height: 60rpx;
-				width: 60rpx;
-				left: 0;
-				top: 0;
-				background-color: $mian-color-deep;
-				border-radius: 50%;
-			}
-			.notice-title{
-				line-height: 60rpx;
-				color: white;
-				font-size: $title-size-m;
-			}
+	
+		&::before {
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			content: "";
+			width: 2rpx;
+			left: 50%;
+			background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .7), transparent);
 		}
 	}
-	// 平台概况
-	.situation{
-		margin: 0 ($margin + $margin / 2);
-		background-image: linear-gradient(to bottom, rgba($color: $mian-color, $alpha: .1), $mian-color-deep);
-		border-radius: $radius-sm;
-		padding: $padding;
-		// 平台统计
-		.header{
-			display: flex;
-			flex-wrap: wrap;
-			margin-bottom: $margin*2;
-			.number{
-				color: white;
-				font-size: $title-size + 4;
-				font-weight: bold;
-				line-height: 90rpx;
-			}
-			.title{
-				color: $mian-color;
-				font-weight: bold;
-				font-size: $title-size-sm;
-			}
-			.header-item{
-				width: 50%;
-				padding: $padding $padding / 2;
-				box-sizing: border-box;
-				&:first-child{
-					width: 100%;
-					.number{
-						font-size: $title-size + 10;
-					}
-				}
-			}
-		}
-		// 节点信息
-		.node-info{
-			display: flex;
-			flex-wrap: wrap;
-			margin: 0 -$margin / 2;
-			.node-item{
-				background: rgba($color: $mian-color, $alpha: .2);
-				width: calc(50% - #{$margin});
-				margin: $margin / 2;
-				padding: $padding;
-				box-sizing: border-box;
-				border-radius: $radius-sm;
-			}
-			.number{
-				font-size: $title-size + 4;
-				font-weight: bold;
-				color: white;
-			}
-			.title{
-				font-size: $title-size-m;
-				font-weight: bold;
-				color: rgba($color: white, $alpha: .7);
-			}
-		}
-		// 图表
-		.chart{
+	// 矿石
+	.ore {
+		position: relative;
+		padding-top: 120%;
+		&>image {
+			width: 100%;
+			position: absolute;
+			top: 0;
+			left: 0;
+		}
+		.ore-lists {
+			position: absolute;
+			top: 0;
+			left: 0;
+			height: 100%;
+			width: 100%;
+			.oct-float-item{
+				position: absolute;
+				text-align: center;
+				.text {
+					margin-top: $margin / 2;
+					color: white;
+					font-size: $title-size-sm;
+					line-height: 40rpx;
+					text-shadow: 0 3rpx 3rpx rgba($color: #000000, $alpha: .2);
+				}
+				.icon {
+					width: 58rpx;
+					vertical-align: top;
+				}
+			}
+			.ore-item-nav{
+				@extend .oct-float-item;
+				right: $margin * 3;
+				top: 12%;
+			}
+			.ore-item {
+				@extend .oct-float-item;
+				&:nth-child(1) { top: 16%; left: 13%; }
+				&:nth-child(2) { top: 50%; right: 10%; }
+				&:nth-child(3) { top: 23%; right: 20%; }
+				&:nth-child(4) { top: 70%; left: 33%;}
+				&:nth-child(5) { top: 40%; left: 20%; }
+				&:nth-child(6) { top: 58%; left: 10%;}
+				&:nth-child(7) { top: 10%; right: 43%;}
+				&:nth-child(8) { top: 46%; right: 29%;}
+			}
+		}
+	}
+	// 任务
+	.task-block {
+		white-space: nowrap;
+		.item {
 			background: rgba($color: $mian-color, $alpha: .2);
-			padding: $padding;
-			border-radius: $radius-sm;
-			margin-top: $margin*2;
-			.title{
-				text-align: center;
-				line-height: 80rpx;
-				color: rgba($color: $mian-color, $alpha: 1.0);
-				font-size: $title-size-m;
+			display: inline-block;
+			margin-left: $margin;
+			width: 210rpx;
+			padding: $padding * 2 $padding;
+			border-radius: $radius;
+			box-sizing: 0 0 4rpx 4rpx rgba($color: #000000, $alpha: .06);
+			text-align: center;
+			&:first-child {
+				margin-left: $margin + $margin/2;
 			}
-			.chart-f2{
-				height: 200px;
+			&:last-child {
+				margin-right: $margin + $margin/2;
+			}
+			.icon {
+				display: inline-block;
+				margin: $margin 0;
+				width: 98rpx;
+				height: 98rpx;
+				line-height: 98rpx;
+				background: $mian-color-deep;
+				border-radius: 50%;
+				text-align: center;
+				image {
+					width: 56rpx;
+					height: 56rpx;
+					vertical-align: middle;
+				}
+			}
+			.text {
+				font-size: $title-size-m;
+				color: $mian-color;
+			}
+			.title {
+				font-size: $title-size;
+				color: white;
+				font-weight: bold;
 			}
 		}
 	}
diff --git a/scss/globa.scss b/scss/globa.scss
index 6966e36..6d482fd 100644
--- a/scss/globa.scss
+++ b/scss/globa.scss
@@ -74,20 +74,6 @@ $padding: 30rpx;
 	-webkit-line-clamp: 2;
 }
 
-.ellipsis {
-	overflow: hidden;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-}
-
-.ellipsis-2 {
-	display: -webkit-box;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	-webkit-box-orient: vertical;
-	-webkit-line-clamp: 2;
-}
-
 .ellipsis-3 {
 	display: -webkit-box;
 	overflow: hidden;
diff --git a/static/background/chain-back-00.png b/static/background/chain-back-00.png
index b314449..abfae9e 100644
Binary files a/static/background/chain-back-00.png and b/static/background/chain-back-00.png differ
diff --git a/static/background/chain-back-02.png b/static/background/chain-back-02.png
index ba604f4..a0f77b9 100644
Binary files a/static/background/chain-back-02.png and b/static/background/chain-back-02.png differ
diff --git a/static/icons/crystal-icon.png b/static/icons/crystal-icon.png
index 4c1ab9c..bd90359 100644
Binary files a/static/icons/crystal-icon.png and b/static/icons/crystal-icon.png differ
diff --git a/static/icons/gemstone-icon.png b/static/icons/gemstone-icon.png
index 39db38f..50cf9b0 100644
Binary files a/static/icons/gemstone-icon.png and b/static/icons/gemstone-icon.png differ
diff --git a/static/icons/gemstone-ore-icon.png b/static/icons/gemstone-ore-icon.png
new file mode 100644
index 0000000..39439bc
Binary files /dev/null and b/static/icons/gemstone-ore-icon.png differ