1.首页样式改版。后续修改跳识别部分

components/LEDFont/LEDFont.vue

@@ -0,0 +1,61 @@
+<template>
+	<view>
+		<view class="uni__number" :style="{ color: color, 'font-size': size+'px' }"> {{currentValue}} </view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "LEDFont",
+		props: {
+			size: {
+				type: Number,
+				value: '24'
+			},
+			color: {
+				type: String,
+				default: '#000000'
+			},
+			showValue: {
+				type: Number,
+				default: 0
+			}
+		},
+		watch: {
+			showValue(val) {
+				this.currentValue = val;
+			},
+		},
+		created: function(e) {
+			this.currentValue = this.showValue;
+		},
+		data() {
+			return {
+				currentValut:0
+			};
+		}
+	}
+</script>
+
+<style scoped>
+	@font-face {
+		font-family: 'UnidreamLED';
+		src: url('~@/static/font/UnidreamLED.ttf');
+	}
+
+	.uni__number {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		justify-content: center;
+		align-items: center;
+		width: 56rpx;
+		height: 56rpx;
+		line-height: 56rpx;
+		margin: 5rpx;
+		text-align: center;
+		font-size: 23px;
+		font-family: UnidreamLED;
+		border-radius: 3px;
+	}
+</style>

components/modal/action-jump/action-jump.vue

@@ -1,8 +1,101 @@
 <template>
 	<view>
+
+		<view class="flex justify-center" style="height: 75px; margin-top: 46rpx;">
+			<!-- 计时器 -->
+			<view class="action-jump-timer flex justify-center">
+				<boxingCountDown ref="boxingCountDownRef" :show-day="false" :second="showTime" color="#FFFFFF"
+					background-color="rgba(255,255,255,0);" border-color="#007AFF" splitorColor="#FFFFFF" />
+			</view>
+
+			<view class="grid-progress-vertical-container" style="top:-460rpx; ">
+				<view class="grid-progress-vertical-bar">
+					<view class="grid-progress-vertical-child" v-for="(item, index) in 20" :key="index">
+						<view
+							:class="showCount>=index+1? 'grid-progress-vertical-active':'grid-progress-vertical-inactive'">
+						</view>
+						<view :class="index%5 == 0?'':'grid-progress-text-hidden'" class="grid-progress-vertical-text">
+							{{(index+1)*2}}
+						</view>
+					</view>
+				</view>
+				<view class="grid-progress-vertical-bar">
+					<view class="grid-progress-vertical-child" v-for="(item, index) in 20" :key="index">
+						<view :class="index%5 == 0?'':'grid-progress-text-hidden'" class="grid-progress-vertical-text">
+							{{(index+26)*2}}
+						</view>
+						<view
+							:class="showCount>=index+26? 'grid-progress-vertical-active':'grid-progress-vertical-inactive'">
+						</view>
+					</view>
+				</view>
+			</view>
+
+			<view class="flex justify-center align-center"
+				style="height: 52rpx; width: 412rpx; background-color: rgba(255,255,255,0.11); border-radius: 12rpx;">
+				<!-- 居中绘制星星样式 -->
+				<view class="text-14px text-white">
+					拉伸运动：
+				</view>
+				<view class="flex flex-direction" v-for="(item, index) in 5" :key="index">
+					<image style="width: 34rpx;height: 32rpx;" src="../../../static/modal/action-jump/stars.png">
+					</image>
+				</view>
+			</view>
+
+
+		</view>
+
+		<view class="action-jump-parent margin-bottom">
+			<view class="action-jump-container">
+				<canvas canvas-id="actionJumpCanvas"
+					:style="{ width: canvasW + 'px', height: canvasH + 'px' }"></canvas>
+			</view>
+		</view>
+
+		<view class="flex align-center justify-center" style="font-size: 14px;">
+			<view style="position: relative;">
+				<image style="width: 135px;height: 75px;" src="../../../static/modal/action-jump/Fill.png"></image>
+				<view class="mid-absolute flex flex-direction align-center justify-center text-white">
+					<view class="flex align-center">
+						<image style="width: 22rpx;height: 28rpx;"
+							src="../../../static/modal/action-jump/jumpSpeed.png"></image>
+						<view style="margin-left: 6rpx;">平均速度</view>
+					</view>
+					<view style="margin-top: 12rpx;">{{jumpSpeed}}</view>
+				</view>
+			</view>
+			<view class="flex" style="position: relative;" @click="onControllerPlay">
+				<image style="width: 112px;height: 111px;" src="../../../static/modal/action-jump/midButton.png">
+				</image>
+
+				<image v-if="!bJumpPlay" class="mid-absolute" style=" width: 28rpx;height: 28rpx;"
+					src="../../../static/modal/action-jump/midPlay.png">
+				</image>
+				<image v-else class="mid-absolute" style="width: 28rpx;height: 28rpx;"
+					src="../../../static/modal/action-jump/midPause.png">
+				</image>
+			</view>
+			<view style="position: relative;">
+				<image style="width: 135px;height: 75px; transform: scaleX(-1);"
+					src="../../../static/modal/action-jump/Fill.png"></image>
+				<view class="mid-absolute flex flex-direction align-center justify-center text-white">
+					<view class="flex align-center">
+						<image style="width: 22rpx;height: 28rpx;"
+							src="../../../static/modal/action-jump/jumpCalorie.png"></image>
+						<view style="margin-left: 6rpx;">卡路里</view>
+					</view>
+					<view style="margin-top: 12rpx;">{{jumpCalorie}}</view>
+				</view>
+			</view>
+		</view>
+
+		<view style="height: 41px;"></view>
+
+		<!-- 测试按钮 -->
 		<view style="display: flex;justify-content: space-between;">
-			<button  @click="startJumpGame">startGame</button>
-			<button  @click="onClear">onClear</button>
+			<button @click="startJumpGame">startGame</button>
+			<button @click="onClear">onClear</button>
 		</view>
 
 		<view style="display: flex;justify-content: space-between;" class="margin-top margin-bottom">
@@ -12,29 +105,56 @@
 			<button @click="onJumpType(3)">rLeft</button>
 			<button @click="onJumpType(4)">rRight</button>
 		</view>
-		
+
 		<view style="display: flex;justify-content: space-around;">
 			<view style="font-size: 14px;">t:{{countdown}}</view>
 			<view style="font-size: 14px;">e:{{eliminationCount}}</view>
 			<view style="font-size: 14px;">f:{{faultCount}}</view>
 		</view>
-		
-		<view class="action-jump-parent margin-top margin-bottom">
-			<view class="action-jump-container">
-				<canvas canvas-id="actionJumpCanvas" style="width: 375px;height: 50px; background-color: #1CBBB4;"></canvas>
-			</view>
-		</view>
+
 	</view>
 
 </template>
 
 <script>
+	import boxingCountDown from '@/components/uni-count-down/uni-count-down.vue'
+
+
 	export default {
+		components: {
+			boxingCountDown
+		},
+		props: {
+			showTime: {
+				type: Number,
+				default: 0
+			}
+		},
 		data() {
 			return {
+				//满格的数值是 25
+				maxShowCount: 25,
+				//显示的点
+				showCount: 0,
+
+				canvasW: 0, // 画布宽
+				canvasH: 0, // 画布高
+				SystemInfo: {}, // 设备信息
+
+
 				directionJump: null,
 				midJump: null,
 				rotateJump: null,
+				directionJumpWhite: null,
+				midJumpWhite: null,
+				rotateJumpWhite: null,
+				//参考图片
+				cankao: null,
+
+				jumpTipImage: null,
+				jumpNormalImage: null,
+
+
 				jumpTypeArray: [{
 					jumpName: 'NORMAL',
 					jumpCode: 0,
@@ -72,40 +192,124 @@
 				bNextSpawnRightDirection: false,
 				bNextSpawnRightRotateDirection: false,
 
+				//生成预制的模板，用count 来判断生成哪一种
+				template: [{
+					count: 1,
+					spawnList: [
+						[0]
+					]
+				}, {
+					count: 2,
+					spawnList: [
+						[2, 1],
+						[1, 2],
+						[3, 4],
+						[4, 3]
+					]
+				}, {
+					count: 3,
+					spawnList: [
+						[2, 0, 1],
+						[1, 0, 2],
+						[3, 0, 4],
+						[4, 0, 3]
+					]
+				}, ],
+
 				level: 3,
 				countdown: 60,
 				countdownInterval: null,
-				
-				faultCount:0,
-				eliminationCount:0,
+
+				faultCount: 0,
+				eliminationCount: 0,
+
+				bJumpPlay: false,
+				jumpCalorie: 1000,
+				jumpSpeed: 1000
 			}
 		},
+
 		created() {
 			let _self = this;
-			uni.getImageInfo({
-				src: "../../../static/modal/action-jump/directionJump.png",
-				success: function(image) {
-					_self.directionJump = image;
-				}
-			});
-			uni.getImageInfo({
-				src: "../../../static/modal/action-jump/midJump.png",
-				success: function(image) {
-					_self.midJump = image;
-					console.log("==============", image);
-				}
-			});
-			uni.getImageInfo({
-				src: "../../../static/modal/action-jump/rotateJump.png",
-				success: function(image) {
-					_self.rotateJump = image;
-				}
-			});
+
+			this.onLoadImage();
+
 			this.actionJumpCanvas = uni.createCanvasContext("actionJumpCanvas", this);
-			console.log("this.actionJumpCanvas:", this.actionJumpCanvas);
+			// console.log("this.actionJumpCanvas:", this.actionJumpCanvas);
+
+			this.SystemInfo = uni.getSystemInfoSync();
+			this.canvasW = this.SystemInfo.windowWidth; // 画布宽度
+			this.canvasH = 114;
 
 		},
 		methods: {
+			//load 相关图片
+			onLoadImage() {
+				let _self = this;
+				uni.getImageInfo({
+					src: "../../../static/modal/action-jump/directionJump.png",
+					success: function(image) {
+						_self.directionJump = image;
+					}
+				});
+				uni.getImageInfo({
+					src: "../../../static/modal/action-jump/midJump.png",
+					success: function(image) {
+						_self.midJump = image;
+						console.log("==============", image);
+					}
+				});
+				uni.getImageInfo({
+					src: "../../../static/modal/action-jump/rotateJump.png",
+					success: function(image) {
+						_self.rotateJump = image;
+					}
+				});
+
+				uni.getImageInfo({
+					src: "../../../static/modal/action-jump/directionJumpWhite.png",
+					success: function(image) {
+						_self.directionJumpWhite = image;
+					}
+				});
+				uni.getImageInfo({
+					src: "../../../static/modal/action-jump/midJumpWhite.png",
+					success: function(image) {
+						_self.midJumpWhite = image;
+						console.log("==============", image);
+					}
+				});
+				uni.getImageInfo({
+					src: "../../../static/modal/action-jump/rotateJumpWhite.png",
+					success: function(image) {
+						_self.rotateJumpWhite = image;
+					}
+				});
+
+				uni.getImageInfo({
+					src: "../../../static/modal/action-jump/jumpTip.png",
+					success: function(image) {
+						_self.jumpTipImage = image;
+					}
+				});
+
+				uni.getImageInfo({
+					src: "../../../static/modal/action-jump/jumpNormal.png",
+					success: function(image) {
+						_self.jumpNormalImage = image;
+
+
+						_self.onDrawBg();
+					}
+				});
+
+				uni.getImageInfo({
+					src: "../../../static/modal/action-jump/cankao.png",
+					success: function(image) {
+						_self.cankao = image;
+					}
+				});
+			},
 			/**
 			 * 重置生成数组，重置倒计时
 			 */
@@ -125,22 +329,51 @@
 
 				this.index = 0;
 				// this.levelLabel.string = '关卡' + this.level;
+				let _ranType = Math.floor(Math.random() * 2);
+
 				if (this.level == 1) {
-					for (let i = 0; i < 2; i++) {
-						this.spawnJumpPrefabs(i);
-					}
-					// this.buttonLabel.string = '下一关';
+					//随便生成一组数据
+					let _spawnList = this.template[1].spawnList;
+					let ran = Math.floor(Math.random() * 2);
+
+					if (_ranType >= 1) ran += 2;
 
+					for (let i = 0; i < _spawnList[ran].length; i++) {
+						this.spawnJumpPrefabsFromType(i, _spawnList[ran][i]);
+					}
 				} else if (this.level == 2) {
-					for (let i = 0; i < 4; i++) {
-						this.spawnJumpPrefabs(i);
+					//随便生成二组数据
+					let _newArray = [];
+					let _spawnList1 = this.template[1].spawnList;
+					let ran1 = Math.floor(Math.random() * 2);
+					_newArray = _newArray.concat(_spawnList1[ran1]);
+					let _spawnList2 = this.template[2].spawnList;
+					let ran2 = Math.floor(Math.random() * 2);
+					if (_ranType >= 1) ran2 += 2;
+
+					_newArray = _newArray.concat(_spawnList2[ran2]);
+					console.log(_newArray);
+					for (let i = 0; i < _newArray.length; i++) {
+						this.spawnJumpPrefabsFromType(i, _newArray[i]);
 					}
-					// this.buttonLabel.string = '下一关';
 				} else if (this.level == 3) {
-					for (let i = 0; i < 6; i++) {
-						this.spawnJumpPrefabs(i);
+					//随便生成三组数据
+					let _newArray = [];
+					// let _spawnList1 = this.template[1].spawnList;
+					// let ran1 = Math.floor(Math.random() * 2);
+					// _newArray = _newArray.concat(_spawnList1[ran1]);
+					let _spawnList2 = this.template[2].spawnList;
+					let ran2 = Math.floor(Math.random() * 2);
+					let ran3 = Math.floor(Math.random() * 2);
+					if (_ranType >= 1) {
+						ran2 += 2;
+						ran3 += 2;
+					}
+					_newArray = _newArray.concat(_spawnList2[ran2]);
+					_newArray = _newArray.concat(_spawnList2[ran3]);
+					for (let i = 0; i < _newArray.length; i++) {
+						this.spawnJumpPrefabsFromType(i, _newArray[i]);
 					}
-					// this.buttonLabel.string = '最后一关';
 					//todo 暂时给循环
 					this.level = 0;
 				}
@@ -148,25 +381,38 @@
 				this.level++;
 
 				//倒计时
-				this.countdownInterval = setInterval(() => {
-					if (this.countdown <= 0) {
-						clearInterval(this.countdownInterval);
-						this.countdownInterval = null;
-						//处理下一个关卡
-						// console.warn('时间到，处理下一个关卡');
-						this.startJumpGame();
-						return;
-					}
-					this.setCountdown(1);
-				}, 1000);
-				
+				// this.countdownInterval = setInterval(() => {
+				// 	if (this.countdown <= 0) {
+				// 		clearInterval(this.countdownInterval);
+				// 		this.countdownInterval = null;
+				// 		//处理下一个关卡
+				// 		// console.warn('时间到，处理下一个关卡');
+				// 		this.startJumpGame();
+				// 		return;
+				// 	}
+				// 	this.setCountdown(1);
+				// }, 1000);
+
 				this.onDraw();
+			},
+			spawnJumpPrefabsFromType(index,_jumpType) {
+
+				//todo 生成的节点，后面再处理节奏问题。比如生成顺序
+				for(let i=0;i<this.jumpTypeArray.length;i++){
+					if(this.jumpTypeArray[i].jumpCode == _jumpType){
+						let _jumpPrefab = Object.assign({}, this.jumpTypeArray[i]);
+						this.spawnArray.push(_jumpPrefab);
+						break;
+					}
+				}
+			
+
 			},
 			spawnJumpPrefabs(index) {
 
 				let ran = Math.floor(Math.random() * 5);
 				//todo 生成的节点，后面再处理节奏问题。比如生成顺序
-				let _jumpPrefab = Object.assign({},this.jumpTypeArray[ran]);
+				let _jumpPrefab = Object.assign({}, this.jumpTypeArray[ran]);
 				//这里处理相反方向，比如生成了一个左旋转，下一个右旋转
 
 				if (_jumpPrefab.jumpName == 'LEFT') {
@@ -208,31 +454,132 @@
 				}
 				this.spawnArray.push(_jumpPrefab);
 			},
+			//单纯的绘制八个背景
+			onDrawBg() {
+				this.actionJumpCanvas.clearRect(0, 0, this.canvasW, 114);
+				let _currentBgStartX = this.canvasW / 2;
+				let count = 4;
+				for (let i = 0; i < count; i++) {
+					let _currentStartPos = _currentBgStartX - i * 50 - 50;
+					this.actionJumpCanvas.drawImage(this.jumpNormalImage.path, _currentStartPos, 0, 50, 114);
+					let _currentEndPos = _currentBgStartX + i * 50;
+					this.actionJumpCanvas.drawImage(this.jumpNormalImage.path, _currentEndPos, 0, 50, 114);
+
+				}
+				this.actionJumpCanvas.draw();
+			},
 			onDraw() {
-				this.actionJumpCanvas.clearRect(0, 0, 375, 50);
+				this.actionJumpCanvas.clearRect(0, 0, this.canvasW, 114);
+
+				//计算一个对象
+				let _drawObj = {
+					path: null,
+					startX: 0,
+					width: 0,
+					bgWidth: 0,
+					bgStartXAllNormal: 0,
+					bgStartXHasTip: 0,
+				}
+				//计算居中的点
+				_drawObj.width = this.spawnArray.length * (50 + 10);
+				_drawObj.startX = this.canvasW / 2 - _drawObj.width / 2;
+				//全部是普通背景
+				_drawObj.bgStartXAllNormal = this.canvasW / 2 - (this.spawnArray.length * 50) / 2;
+				_drawObj.bgStartXHasTip = this.canvasW / 2 - (this.spawnArray.length * 50 + 40) / 2;
+
+				let _currentBgStartX = this.index == this.spawnArray.length ? _drawObj.bgStartXAllNormal : _drawObj
+					.bgStartXHasTip;
+				// console.log("_drawObj.startX:", _drawObj.startX, _drawObj.width / 2);
+
+				//绘制八个位置。如果生成数量不够的话。补上对应的数量
+				let count = 8 - this.spawnArray.length;
+				count = Math.ceil(count / 2);
+
+				//计算一个节点数组
 				for (let i = 0; i < this.spawnArray.length; i++) {
 					//默认 mid 图标
-					let _temp = this.midJump;
+					let _temp = this.spawnArray[i].bTrigger ? this.midJump : this.midJumpWhite;
 					if (this.spawnArray[i].icon == 'directionJump') {
-						_temp = this.directionJump;
+						_temp = this.spawnArray[i].bTrigger ? this.directionJump : this.directionJumpWhite;
 					} else if (this.spawnArray[i].icon == 'rotateJump') {
-						_temp = this.rotateJump;
+						_temp = this.spawnArray[i].bTrigger ? this.rotateJump : this.rotateJumpWhite;
 					}
-					this.actionJumpCanvas.save();
-					this.actionJumpCanvas.globalAlpha = this.spawnArray[i].bTrigger ? 0.5 : 1;
-					this.actionJumpCanvas.scale(this.spawnArray[i].scaleX, 1);
 					//如果是相反绘制，需要加多一个自身位置偏移
 					let _pos = this.spawnArray[i].scaleX < 0 ? i + 1 : i;
-					this.actionJumpCanvas.drawImage(_temp.path, (_pos * 50 + 20) * this.spawnArray[i].scaleX, 0, 50, 50);
+					let _spacing = i == 0 ? 0 : 1;
+
+					let _addData = 0;
+					//大图提示后面要加上大图占的位置，为大图宽度减小图（ 90 - 50 ）
+					if (i >= this.index) {
+						_addData = 40;
+					}
+
+					if (i == 0) {
+						//_frontBgData 为减去大图位置，10 为偏移位置
+						let _frontBgData = 40;
+						//绘制前背景
+						for (let i = 0; i < count; i++) {
+							let _currentStartPos = _currentBgStartX - _frontBgData - i * 50 - 10;
+							this.actionJumpCanvas.drawImage(this.jumpNormalImage.path, _currentStartPos, 0, 50, 114)
+
+						}
+					}
+
+
+					this.actionJumpCanvas.save();
+					this.actionJumpCanvas.globalAlpha = this.spawnArray[i].bTrigger ? 0.7 : 1;
+					this.actionJumpCanvas.scale(this.spawnArray[i].scaleX, 1);
+
+					let _currentPos = 0;
+					let _currentCenterPos = 0;
+					if (i == this.index) {
+						_currentPos = (_currentBgStartX + _pos * 90 - i * 40) *
+							this
+							.spawnArray[i]
+							.scaleX;
+						this.actionJumpCanvas.drawImage(this.jumpTipImage.path, _currentPos, 0, 90, 114);
+
+						//计算对应中心点的值
+						_currentCenterPos = _currentPos + 90 / 2 - 25 / 2;
+
+						//57 - 40/2 是取画布中心y点，减去图标本身高的一半的值
+						this.actionJumpCanvas.drawImage(_temp.path, _currentCenterPos - 7.5, 37, 40, 40);
+					} else {
+						_currentPos = (_currentBgStartX + _addData + _pos *
+								50) * this
+							.spawnArray[i]
+							.scaleX;
+						this.actionJumpCanvas.drawImage(this.jumpNormalImage.path, _currentPos, 0, 50, 114)
+
+						//计算对应中心点的值
+						_currentCenterPos = _currentPos + 50 / 2 - 25 / 2;
+
+						//44.5 是取画布中心y点，减去图标本身高的一半的值
+						this.actionJumpCanvas.drawImage(_temp.path, _currentCenterPos, 44.5, 25, 25);
+					}
+
 					this.actionJumpCanvas.restore();
+
+					if (i == this.spawnArray.length - 1) {
+						//绘制结束位置
+						// console.log("count:", count);
+						for (let i = 0; i < count; i++) {
+							let _currentEndPos = _currentBgStartX + _addData + (this.spawnArray.length + i) * 50;
+
+							// console.log("end _currentEndPos:", _currentEndPos);
+							this.actionJumpCanvas.drawImage(this.jumpNormalImage.path, _currentEndPos, 0, 50, 114)
+
+						}
+
+					}
 				}
-				// console.log('draw');
+
 				this.actionJumpCanvas.draw();
 			},
 			onClear() {
 				this.resetJumpGame();
-				
-				this.onDraw();
+
+				this.onDrawBg();
 			},
 
 			onJumpType(event) {
@@ -278,6 +625,15 @@
 			setFaultCount(value) {
 				this.faultCount += value;
 				// this.faultLabel.string = '失误：' + this.faultCount;
+			},
+			//控制播放
+			onControllerPlay() {
+				this.bJumpPlay = !this.bJumpPlay;
+				if (this.bJumpPlay) {
+					this.startJumpGame();
+				} else {
+					this.onClear();
+				}
 			}
 		}
 	}
@@ -285,7 +641,7 @@
 
 <style lang="scss">
 	.action-jump-parent {
-		border: 1rpx solid #ffaa7f;
+		// border: 1rpx solid #ffaa7f;
 		position: relative;
 		display: flex;
 		justify-content: center;
@@ -296,9 +652,23 @@
 
 	.action-jump-container {
 		width: 100%;
-		height: 50px;
-		border: 1rpx solid #000000;
+		height: 114px;
+		// border: 1rpx solid #000000;
 		position: relative;
 		// display: flex;
 	}
+
+	.mid-absolute {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		right: 0;
+		left: 0;
+		margin: auto;
+	}
+
+	.action-jump-timer {
+		position: absolute;
+		top: -150rpx;
+	}
 </style>

components/uni-count-down/uni-count-down.vue

@@ -184,7 +184,7 @@
 		/* #endif */
 		justify-content: center;
 		line-height: 48rpx;
-		padding: 5rpx;
+		padding: 8rpx 0 0 0;
 		font-size: 24rpx;
 	}
 

pages.json

@@ -240,6 +240,45 @@
 			"path": "", //启动页面，必选
 			"query": "" //启动参数，在页面的onLoad函数里面得到
 		}]
-	}
+	},
+	"tabBar":{
+	        "color":"#AAABAD",
+	        "selectedColor":"#9797FF",
+	        "backgroundColor":"#FFFFFF",
+	        "borderStyle":"#eee",
+			"height":"75px",
+			"spacing":"6px",
+	        "list":[
+	            {
+	                "pagePath":"pages/personal-page/personal/personal",
+	                "text":"首页",
+	                "iconPath":"./static/common/navigationBar/nHome.png",
+	                "selectedIconPath":"static/common/navigationBar/nHomeB.png"
+	            },
+	            {
+	                "pagePath":"pages/personal-page/plan/plan",
+	                "text":"计划",
+	                "iconPath":"static/common/navigationBar/nPlan.png",
+	                "selectedIconPath":"static/common/navigationBar/nPlanB.png"
+	            },{
+	                "pagePath":"pages/game-page/game/game",
+	                "text":"游戏",
+	                "iconPath":"static/common/navigationBar/nGame.png",
+	                "selectedIconPath":"static/common/navigationBar/nGameB.png"
+	            },
+				{
+				    "pagePath":"pages/game-page/game/game",
+				    "text":"视频",
+				    "iconPath":"static/common/navigationBar/nVideo.png",
+				    "selectedIconPath":"static/common/navigationBar/nVideoB.png"
+				},
+	            {
+	                "pagePath":"pages/my-page/homepage/homepage",
+	                "text":"我的",
+	                "iconPath":"static/common/navigationBar/nMy.png",
+	                "selectedIconPath":"static/common/navigationBar/nMyB.png"
+	            }
+	        ]
+	    }
 
 }

pages/personal-page/personal/personal.vue

@@ -1,9 +1,9 @@
 <template>
 	<view class="content bg-person " :class="bEFHitShake?' screen-jitter ':''">
-		<!-- :title="title" -->
+		<!-- :title="title" @clickRight="onNavAppInfo()" -->
 		<!-- 自定义导航栏 backgroundColor="rgba(164, 136, 220, 1)"  @clickRight="onSyncData" @clickRight="onTestShare"-->
-		<uni-nav-bar id="nav-bar" status-bar="true" backgroundColor="rgba(153, 150, 252, 255)" @clickLeft="showClickEvent()"
-		 @clickRight="onNavAppInfo()" title="" color="#FFFFFF" fixed="true" :border="false">
+		<uni-nav-bar id="nav-bar" status-bar="true" backgroundColor="rgba(153, 150, 252, 255)"
+			@clickLeft="showClickEvent()" title="" color="#FFFFFF" fixed="true" :border="false">
 			<view slot="left">
 				<view class=" flex align-center margin-left">
 					<image class="png-more" src="/static/more.png"></image>
@@ -11,46 +11,57 @@
 			</view>
 			<!-- @clickRight="onNavFcGame()" -->
 			<!-- <view slot="right">
-				<view class=" flex align-center " style="margin-right: 10rpx;">
-					<view class="text-22px-before cuIcon-game"></view>
-				</view>
 			</view> -->
-			<view slot="right">
-				<view class=" flex align-center " style="margin-right: 10rpx;">
-					<view class="text-22px-before cuIcon-info"></view>
+		</uni-nav-bar>
+		<view style="display: flex;position: absolute;top:30rpx;right: 40rpx; z-index: 10000;">
+			<view class=" flex  flex-direction" style="color: #fff;">
+				<view class="flex  align-center">
+					<image class="png-more" style="margin-right: 18rpx;" src="/static/personal/cDiamond.png"></image>
+					<view>{{cDiamond}}</view>
+				</view>
+				<view class="flex  align-center" style="margin-top: 30rpx;">
+					<image class="png-more" style="margin-right: 18rpx;" src="/static/personal/cGold.png"></image>
+					<view>{{cGold}}</view>
 				</view>
 			</view>
-		</uni-nav-bar>
+		</view>
 		<!-- 导航栏下面滚动区域 -->
-		<scroll-view class="scroll-class" @scroll="mainScroll" :scroll-top="scrollTop" :scroll-into-view="toView" scroll-y="true"
-		 :style="{ height: scrollviewHight + 'px' }">
+		<scroll-view class="scroll-class" @scroll="mainScroll" :scroll-top="scrollTop" :scroll-into-view="toView"
+			scroll-y="true" :style="{ height: scrollviewHight + 'px' }">
 			<view class="flex align-center">
 				<view class="text-center">
 					<!-- 计划显示 区域 topScrollHight :style="{ height: + '100%' }"-->
 					<scroll-view scroll-y="true" style="height: 100%; width: 100%;">
 						<view class="plan-view">
 							<!-- 拳击模块 -->
-							<view v-if="currentMode == 'pkMode'" style="display: flex; flex-direction: row; height: 200rpx; margin-top: 140rpx; justify-content: space-around;align-items: center;">
+							<view v-if="currentMode == 'pkMode'"
+								style="display: flex; flex-direction: row; height: 200rpx; margin-top: 140rpx; justify-content: space-around;align-items: center;">
 								<view>
 									<view class="cu-avatar-group" style="position: relative;">
-										<view class="cu-avatar round xl" :class="bAiHitShake?' screen-jitter':''" :style="[{ backgroundImage:'url('+avatarUrl+')' }]"></view>
+										<view class="cu-avatar round xl" :class="bAiHitShake?' screen-jitter':''"
+											:style="[{ backgroundImage:'url('+avatarUrl+')' }]"></view>
 										<HitEffect ref="aiHitEffectRef"></HitEffect>
 									</view>
-									<view style="margin-top: 20rpx; width: 165rpx;" class="text-cut text-white">{{userName}}</view>
+									<view style="margin-top: 20rpx; width: 165rpx;" class="text-cut text-white">
+										{{userName}}</view>
 								</view>
 
 								<view>
-									<image style="width: 104rpx; height: 42rpx ;margin-bottom: 60rpx;" src="/static/personal/pk@2x.png"></image>
+									<image style="width: 104rpx; height: 42rpx ;margin-bottom: 60rpx;"
+										src="/static/personal/pk@2x.png"></image>
 								</view>
 								<view>
 									<view class="cu-avatar-group" style="position: relative;">
-										<view class="cu-avatar round xl" :class="bHitShake?' screen-jitter':''" :style="[{ backgroundImage:'url('+aiObj.avatar+')' }]"></view>
+										<view class="cu-avatar round xl" :class="bHitShake?' screen-jitter':''"
+											:style="[{ backgroundImage:'url('+aiObj.avatar+')' }]"></view>
 										<HitEffect ref="hitEffectRef"></HitEffect>
 									</view>
-									<view style="margin-top: 20rpx; width: 165rpx;" class="text-cut text-white">{{aiObj.name}}</view>
+									<view style="margin-top: 20rpx; width: 165rpx;" class="text-cut text-white">
+										{{aiObj.name}}</view>
 								</view>
 
-								<view style="position: absolute;left: 0;right: 0;top: 0;bottom: 0; height: 200rpx; margin-top: 120rpx;">
+								<view
+									style="position: absolute;left: 0;right: 0;top: 0;bottom: 0; height: 200rpx; margin-top: 120rpx;">
 									<HitFistEffect ref="hitFistRef"></HitFistEffect>
 								</view>
 
@@ -61,17 +72,20 @@
 							<view v-else class="qiun-charts-arcbar">
 								<!-- 进度条 -->
 								<canvas canvas-id="canvasArcbar" id="canvasArcbar" class="charts-arcbar "></canvas>
-								<!-- 水果卡路里-->
+								<!-- 图标 -->
 								<view class="personal-fruit-container">
-									<fruit ref="personalFruitRef" :calorie="planData.allCalorie"></fruit>
-								</view>
-								<!-- 卡路里提示 -->
-								<view class="personal-fruit-container">
-									<prompt-box :calorie="planData.allCalorie"></prompt-box>
+									<image style="width: 36rpx;height: 56rpx; margin-top: -100px;"
+										src="../../../static/modal/action-jump/arcbarJumpIcon.png"></image>
 								</view>
+								<!-- 水果卡路里-->
+								<!-- <view class="personal-fruit-container">
+									<fruit ref="personalFruitRef" :calorie="planData.allCalorie"></fruit>
+								</view> -->
+								
 								<!-- 计划运动时间提示 -->
 								<view class="personal-fruit-container">
-									<view style="margin-top: 130px;font-size:12px;color: #FFFFFF;">计划时间{{planData.sportTime}}分钟</view>
+									<LEDFont style="margin-top: 50px;" :showValue = '99' :size="66" color='#FFFFFF'></LEDFont>
+									<!-- <view style="margin-top: 130px;font-size:12px;color: #FFFFFF;">计划时间{{planData.sportTime}}分钟</view> -->
 								</view>
 								<!-- 计划按钮 -->
 								<!-- <view id="projectButtonView" style="position: absolute;left: 0;top: 18px;">
@@ -83,10 +97,14 @@
 										</view>
 									</view>
 								</view> -->
+								<!-- 卡路里提示 -->
+								<view class="personal-fruit-container">
+									<prompt-box :calorie="planData.allCalorie"></prompt-box>
+								</view>
 							</view>
 
 							<!-- 计划按钮 -->
-							<view id="projectButtonView" style="position: absolute;left: 0;top: 18px;">
+							<!-- <view id="projectButtonView" style="position: absolute;left: 0;top: 18px;">
 								<view class="flex justify-center" style="width: 100%;">
 									<view class="charts-pring-button  make-line-bPurple " :class="bPlanExpired?'breathing-lamp':''" style="background-color: #FFFFFF;"
 									 @tap="openPlan">
@@ -94,24 +112,28 @@
 										<view class="text-11px">改计划</view>
 									</view>
 								</view>
-							</view>
+							</view> -->
 
 							<!-- 用于定位 -->
 							<!-- <view id="boxingHitID" style="position: absolute;top: 180rpx; pointer-events: none;" ></view> -->
 							<view id="boxingHitID" v-if="currentModeIndex == 0" class="charts-pring-bottom">
 								<!-- 添加一个 ConnectBindingDevice 测试 -->
-								<boxing-hit ref="boxingPostRef" :bUpdate="!bHide&&(ConnectBindingDevice!=null)||(cIndex!=-1 && BLEConnectDevice!=null &&
+								<boxing-hit ref="boxingPostRef"
+									:bUpdate="!bHide&&(ConnectBindingDevice!=null)||(cIndex!=-1 && BLEConnectDevice!=null &&
 								 (BLEConnectDevice.deviceType == 'mySelf'||BLEConnectDevice.deviceType == 'BLEHandle' || BLEConnectDevice.deviceType == 'BLERope' ))"
-								 :showTime="localSportTime" :bRebound="BLEConnectDevice&&BLEConnectDevice.limitType == 'rebound'"
-								 @updateCalorie="boxingUpdateCalorie" @boxingPostCheck="onPersonalCheck" @shake="onScreenShake"
-								 @updateSportTime="onUpdateSportTime" @boxingGuideFinish="onBoxingGuideFinish" @boxingPostControlPlay="onBoxingPostControlPlay"
-								 @modeEvent="onModeEvent" @hitEvent="onHitEvent" @aiHitEvent="onAiHitEvent" @gameOver="onBoxingGameOver"
-								 @closeBoxingControl="onCloseBoxingHit"></boxing-hit>
+									:showTime="localSportTime"
+									:bRebound="BLEConnectDevice&&BLEConnectDevice.limitType == 'rebound'"
+									@updateCalorie="boxingUpdateCalorie" @boxingPostCheck="onPersonalCheck"
+									@shake="onScreenShake" @updateSportTime="onUpdateSportTime"
+									@boxingGuideFinish="onBoxingGuideFinish"
+									@boxingPostControlPlay="onBoxingPostControlPlay" @modeEvent="onModeEvent"
+									@hitEvent="onHitEvent" @aiHitEvent="onAiHitEvent" @gameOver="onBoxingGameOver"
+									@closeBoxingControl="onCloseBoxingHit"></boxing-hit>
 
 							</view>
-							
+
 							<view id='actionJumpID' v-if="true" class="charts-pring-bottom">
-								<action-jump ref = "actionJumpRef"></action-jump>
+								<action-jump ref="actionJumpRef"></action-jump>
 							</view>
 							<!-- <button @tap="onTestAddLocalCalorie">11</button> -->
 						</view>
@@ -124,15 +146,20 @@
 					<!-- <button  @tap="onShowBoxingHitTip">11</button> -->
 					<!--数据展示部分 -->
 					<view class="bottom-view" style="position: relative;">
-						<view style="position: absolute; z-index: 1; background-color: #FFFFFF; width: 100%; height: 217px; " class="flex justify-center">
-							<view style="border: 3px solid #9797ff; width: 35px; height: 3px; border-radius: 5px; margin-top: 9px;"></view>
+						<view
+							style="position: absolute; z-index: 1; background-color: #FFFFFF; width: 100%; height: 217px; "
+							class="flex justify-center">
+							<view
+								style="border: 3px solid #9797ff; width: 35px; height: 3px; border-radius: 5px; margin-top: 9px;">
+							</view>
 						</view>
 						<view style="height: 26px ;"></view>
 
 						<view class="card-view">
 							<view class="flex justify-between margin-top margin-left">
 								<view class="flex justify-start">
-									<image src="/static/sync.png" class=" data-png" mode="aspectFit" @tap="onSyncData"></image>
+									<image src="/static/sync.png" class=" data-png" mode="aspectFit" @tap="onSyncData">
+									</image>
 									<view class="text-gray" style="margin-left: 10rpx;">{{ currentDate }}同步</view>
 								</view>
 								<!-- <view class="flex justify-start margin-right">
@@ -148,23 +175,29 @@
 							</view>
 							<!-- 曲线图绘制部分 -->
 							<view class="qiun-charts-area">
-								<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts-area" @touchstart.prevent="touchLineA"
-								 @touchmove.prevent="moveLineA" @touchend.prevent="touchEndLineA"></canvas>
+								<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts-area"
+									@touchstart.prevent="touchLineA" @touchmove.prevent="moveLineA"
+									@touchend.prevent="touchEndLineA"></canvas>
 							</view>
 							<view class="bg-white qiun-charts-bottom-container">
 								<view class="avatar-bg-arrow"></view>
 								<view class="avatar-bg-personal">
-									<image mode="aspectFit" :src="avatarUrl" style="width: 100%;height: 100%; border-radius: 45px;background-color: #000000;"></image>
+									<image mode="aspectFit" :src="avatarUrl"
+										style="width: 100%;height: 100%; border-radius: 45px;background-color: #000000;">
+									</image>
 								</view>
-								<view class="qiun-charts-bottom-right" @tap.prevent="showModal" data-target="bottomModal">
+								<view class="qiun-charts-bottom-right" @tap.prevent="showModal"
+									data-target="bottomModal">
 									<image src="/static/weightEdit.png" class="png-size-34" mode="aspectFit"></image>
 								</view>
 							</view>
 						</view>
 
 						<view class="cu-modal bottom-modal" :class="modalName == 'bottomModal' ? 'show' : ''">
-							<view class="cu-dialog" style=" border-top-right-radius: 20rpx; border-top-left-radius: 20rpx;">
-								<myPicker :pickerObj="pickerObj" @confirmEvent="onConfirm" @cancelEvent="hideModal"></myPicker>
+							<view class="cu-dialog"
+								style=" border-top-right-radius: 20rpx; border-top-left-radius: 20rpx;">
+								<myPicker :pickerObj="pickerObj" @confirmEvent="onConfirm" @cancelEvent="hideModal">
+								</myPicker>
 							</view>
 						</view>
 
@@ -172,21 +205,31 @@
 							<!-- 累计消耗和计划 -->
 							<view class="flex margin-top-sm margin-bottom-sm justify-center">
 								<view class=" padding-sm margin-right plan-l-tip-view flex align-center">
-									<image src="/static/middlePlant.png" class="data-png-26 margin-sm" mode="aspectFit"></image>
+									<image src="/static/middlePlant.png" class="data-png-26 margin-sm" mode="aspectFit">
+									</image>
 									<view class="flex justify-start flex-direction">
-										<text style="text-align: start; line-height: 24px; font-weight: 400;">累计消耗</text>
-										<view class="text-11px " style="text-align: start;font-weight: 400; line-height: 28px;">{{ planData.cumulativeCalorie }}/ka</view>
-										<view class="text-gray" style="font-size: 10px;">始于{{ planData.startTime }}</view>
+										<text
+											style="text-align: start; line-height: 24px; font-weight: 400;">累计消耗</text>
+										<view class="text-11px "
+											style="text-align: start;font-weight: 400; line-height: 28px;">
+											{{ planData.cumulativeCalorie }}/ka</view>
+										<view class="text-gray" style="font-size: 10px;">始于{{ planData.startTime }}
+										</view>
 									</view>
 
 								</view>
-								<view style="height: 56px; width: 1rpx;margin-top: 16px; background-color: #EEEEEE;"></view>
-								<view class="padding-sm margin-left-xs margin-right-xl plan-r-tip-view  flex align-center">
+								<view style="height: 56px; width: 1rpx;margin-top: 16px; background-color: #EEEEEE;">
+								</view>
+								<view
+									class="padding-sm margin-left-xs margin-right-xl plan-r-tip-view  flex align-center">
 
-									<image src="/static/middleDay.png" class="data-png-26 margin-sm" mode="aspectFit"></image>
+									<image src="/static/middleDay.png" class="data-png-26 margin-sm" mode="aspectFit">
+									</image>
 									<view class="flex justify-start flex-direction">
 										<text style="text-align: start; line-height: 24px;font-weight: 400;">剩余天数</text>
-										<view class="text-11px " style="text-align: start;font-weight: 400;line-height: 28px;">{{ remainingDays }}/day</view>
+										<view class="text-11px "
+											style="text-align: start;font-weight: 400;line-height: 28px;">
+											{{ remainingDays }}/day</view>
 										<view class="text-gray" style="font-size: 10px;">计划天数{{ days }}</view>
 									</view>
 								</view>
@@ -248,26 +291,32 @@
 							</view> -->
 							<!-- 隐藏设备处 -->
 							<view class="container-device">
-								<view class="width-device flex align-center" v-for="(item, index) in BLEDeviceShowList" :key="index" @tap="onDevice(item, $event)"
-								 :data-index="index">
+								<view class="width-device flex align-center" v-for="(item, index) in BLEDeviceShowList"
+									:key="index" @tap="onDevice(item, $event)" :data-index="index">
 									<view style="position: relative; height: 100%;">
-										<image :src="index == cIndex ? '/static/deviceBg.png' : '/static/deviceBg_off.png'" class="data-png-64" mode="aspectFit"></image>
+										<image
+											:src="index == cIndex ? '/static/deviceBg.png' : '/static/deviceBg_off.png'"
+											class="data-png-64" mode="aspectFit"></image>
 										<image :src="item.mIcon" class="data-png-add" mode="aspectFit"></image>
 									</view>
 
 									<view class="flex-sub text-center">
-										<image :src="index == cIndex ? '/static/wifi_on.png' : '/static/wifi_off.png'" class="data-png-32" mode="aspectFit"></image>
+										<image :src="index == cIndex ? '/static/wifi_on.png' : '/static/wifi_off.png'"
+											class="data-png-32" mode="aspectFit"></image>
 										<view class="text-gray">{{ item.cname }}</view>
 									</view>
 
-									<view style="position: absolute;right: 0;top: 0;" @tap.stop="onCloseDevice(item, $event)" :data-index="index">
-										<image :src="index == cIndex ? '/static/d_on.png' : '/static/d_off.png'" class="data-png-26" mode="aspectFit"></image>
+									<view style="position: absolute;right: 0;top: 0;"
+										@tap.stop="onCloseDevice(item, $event)" :data-index="index">
+										<image :src="index == cIndex ? '/static/d_on.png' : '/static/d_off.png'"
+											class="data-png-26" mode="aspectFit"></image>
 									</view>
 								</view>
 								<view id="addDeviceView" class="width-device flex align-center" @tap="openDeviceList">
 									<view style="position: relative;height: 100%;">
 										<image src="/static/deviceBg.png" class="data-png-64" mode="aspectFit"></image>
-										<image src="/static/deviceAdd.png" class="data-png-add" mode="aspectFit"></image>
+										<image src="/static/deviceAdd.png" class="data-png-add" mode="aspectFit">
+										</image>
 									</view>
 
 									<view class="flex-sub text-center">
@@ -279,12 +328,15 @@
 						</view>
 
 						<!-- 游戏推荐 -->
-						<view class="card-view" v-if="ConnectBindingDevice || (cIndex != -1 && versionCodeState&&versionCodeState.showGame && gameList.length !== 0)">
+						<view class="card-view"
+							v-if="ConnectBindingDevice || (cIndex != -1 && versionCodeState&&versionCodeState.showGame && gameList.length !== 0)">
 							<view class="text-left padding margin-xs flex justify-between">
 								<text class="text-black text-15px margin-left">游戏推荐</text>
-								<view data-type="game" @tap="onNavToGameMore" class="flex text-center justify-center align-center margin-right">
+								<view data-type="game" @tap="onNavToGameMore"
+									class="flex text-center justify-center align-center margin-right">
 									<view class="text-gray text-11px " style=" line-height: 12px; ">查看更多</view>
-									<image style="margin-left: 6rpx; width: 24rpx;height: 22rpx; " src="/static/right-g.png"></image>
+									<image style="margin-left: 6rpx; width: 24rpx;height: 22rpx; "
+										src="/static/right-g.png"></image>
 								</view>
 							</view>
 							<view class="cu-item shadow">
@@ -315,12 +367,15 @@
 						<button type="primary" @click="startSyncFunc">startSyncFunc</button>
 						<button type="primary" @click="stopSyncFunc">stopSyncFunc</button> -->
 						<!-- 视频推荐 -->
-						<view class="card-view" v-if="ConnectBindingDevice || (cIndex != -1 && versionCodeState&&versionCodeState.showVideo && videoList.length !== 0)">
+						<view class="card-view"
+							v-if="ConnectBindingDevice || (cIndex != -1 && versionCodeState&&versionCodeState.showVideo && videoList.length !== 0)">
 							<view class="text-left padding margin-xs flex justify-between">
 								<text class="text-black text-15px margin-left">视频推荐</text>
-								<view data-type="video" @tap="onNavToGameMore" class="flex text-center justify-center align-center margin-right">
+								<view data-type="video" @tap="onNavToGameMore"
+									class="flex text-center justify-center align-center margin-right">
 									<view class="text-gray text-11px " style=" line-height: 12px; ">查看更多</view>
-									<image style="margin-left: 6rpx; width: 24rpx;height: 22rpx; " src="/static/right-g.png"></image>
+									<image style="margin-left: 6rpx; width: 24rpx;height: 22rpx; "
+										src="/static/right-g.png"></image>
 								</view>
 							</view>
 							<view class="cu-item shadow">
@@ -341,7 +396,7 @@
 		</scroll-view>
 
 		<!-- 右下角导航栏 -->
-		<round-menu @trigger="onRoundTrigger"></round-menu>
+		<!-- <round-menu @trigger="onRoundTrigger"></round-menu> -->
 
 		<!-- 侧边栏 -->
 		<sideBar ref="sideBar"></sideBar>
@@ -361,25 +416,33 @@
 			margin-right: auto;
 			overflow: hidden;">
 				<view style="position: relative; width: 100%; height: 328rpx;">
-					<image style="position: absolute;top: 0;left: 0; width: 100%;height: 100%;" src="../../../static/sidebar_top_bg.png"></image>
-					<view class="flex flex-direction justify-around align-center" style="position: relative; height: 100%;">
+					<image style="position: absolute;top: 0;left: 0; width: 100%;height: 100%;"
+						src="../../../static/sidebar_top_bg.png"></image>
+					<view class="flex flex-direction justify-around align-center"
+						style="position: relative; height: 100%;">
 						<view class="text-white">已在哔嘣健身训练了</view>
 						<view class="text-white"><span style="font-size: 43px;">{{sportData.time}}</span> 分钟</view>
 						<view class="text-white">本次达标率{{sportData.percent}}%</view>
 					</view>
 				</view>
 				<view class="flex justify-around">
-					<view class="flex flex-direction justify-around align-center" style="position: relative; height: 162rpx;">
+					<view class="flex flex-direction justify-around align-center"
+						style="position: relative; height: 162rpx;">
 						<view class="text-grey">消耗</view>
-						<view class="text-grey"><span style="font-size: 18px; color: #000000;">{{sportData.calorie}}</span> 卡</view>
+						<view class="text-grey"><span
+								style="font-size: 18px; color: #000000;">{{sportData.calorie}}</span> 卡</view>
 					</view>
-					<view class="flex flex-direction justify-around align-center" style="position: relative; height: 162rpx;">
+					<view class="flex flex-direction justify-around align-center"
+						style="position: relative; height: 162rpx;">
 						<view class="text-grey">踩中</view>
-						<view class="text-grey"><span style="font-size: 18px; color: #000000;">{{sportData.hit}}</span> 次</view>
+						<view class="text-grey"><span style="font-size: 18px; color: #000000;">{{sportData.hit}}</span>
+							次</view>
 					</view>
-					<view class="flex flex-direction justify-around align-center" style="position: relative; height: 162rpx;">
+					<view class="flex flex-direction justify-around align-center"
+						style="position: relative; height: 162rpx;">
 						<view class="text-grey">失误</view>
-						<view class="text-grey"><span style="font-size: 18px; color: #000000;">{{sportData.miss}}</span> 次</view>
+						<view class="text-grey"><span style="font-size: 18px; color: #000000;">{{sportData.miss}}</span>
+							次</view>
 					</view>
 				</view>
 				<view class="flex flex-direction justify-around align-center margin-top-sm">
@@ -387,8 +450,8 @@
 				</view>
 				<view class="flex flex-direction justify-around align-center" style="height: 230rpx;">
 					<view class="text-black text-16px">非常优秀，继续加油!</view>
-					<view class="flex justify-center align-center text-white make-bg-bPurple round text-16px" style="width: 300rpx;height: 80rpx;"
-					 @tap="hideModal">确定</view>
+					<view class="flex justify-center align-center text-white make-bg-bPurple round text-16px"
+						style="width: 300rpx;height: 80rpx;" @tap="hideModal">确定</view>
 				</view>
 			</view>
 		</view>
@@ -413,17 +476,19 @@
 		</view>
 
 		<!-- 引导蒙层 bGuidePages guideCurrent-->
-		<code-elf-guide ref="codeElfGuide" v-if="bGuidePages" @hide="guideHide" @change="onGuideChange" :current="guideCurrent"
-		 :currentMode="currentMode"></code-elf-guide>
+		<code-elf-guide ref="codeElfGuide" v-if="bGuidePages" @hide="guideHide" @change="onGuideChange"
+			:current="guideCurrent" :currentMode="currentMode"></code-elf-guide>
 
 		<!-- <view v-if="bStartBoxingPost" class="CountDownMask">
 			{{BoxingPostCountDownText}}
 		</view> -->
 
-		<view class="cu-modal " :class="modalName=='showPlanTipModal'?'show':''" @touchmove.stop.prevent="moveBoxingHandle">
+		<view class="cu-modal " :class="modalName=='showPlanTipModal'?'show':''"
+			@touchmove.stop.prevent="moveBoxingHandle">
 			<view class="cu-bind-modal">
 				<view style="position: absolute; top: 0; left: 0; width: 100%; height:100%;">
-					<image style="position: absolute;top: 0;left: 0; width: 100%;height: 100%;" src="/static/modelBg.png"></image>
+					<image style="position: absolute;top: 0;left: 0; width: 100%;height: 100%;"
+						src="/static/modelBg.png"></image>
 				</view>
 				<view class="flex flex-direction justify-between " style="position: relative; height: 100%;">
 					<view class="flex justify-around justify-center align-center" style="margin: 170rpx 30rpx 0 30rpx;">
@@ -431,12 +496,16 @@
 						<view class="make-text-bPurple" style=" font-size: 20px;">提示</view>
 						<view style="width: 80rpx;height: 2rpx;border-radius: 2px;background-color: #cbcdcf;"></view>
 					</view>
-					<view class="text-16px" style="align-self: center; max-width: 200px; word-break: break-all;">{{planTip[planTipIndex]}}</view>
+					<view class="text-16px" style="align-self: center; max-width: 200px; word-break: break-all;">
+						{{planTip[planTipIndex]}}</view>
 
-					<view class="flex justify-around align-center" style=" border-top: 1rpx solid #EEEEEE; margin-bottom: 2px;">
-						<view class="flex justify-center align-center  text-16px" style="width: 100%;height: 123rpx;" @tap="hidePlanTipModal">取消</view>
+					<view class="flex justify-around align-center"
+						style=" border-top: 1rpx solid #EEEEEE; margin-bottom: 2px;">
+						<view class="flex justify-center align-center  text-16px" style="width: 100%;height: 123rpx;"
+							@tap="hidePlanTipModal">取消</view>
 						<view style="height: 123rpx;width: 1px;background-color: #EEEEEE;"></view>
-						<view class="flex justify-center align-center  text-16px" style="width: 100%;height: 123rpx;" @tap="confirmPlanTipModal">确定</view>
+						<view class="flex justify-center align-center  text-16px" style="width: 100%;height: 123rpx;"
+							@tap="confirmPlanTipModal">确定</view>
 					</view>
 				</view>
 
@@ -444,7 +513,8 @@
 			</view>
 		</view>
 
-		<ModalTip ref='modalTipRef' :class="modalName=='showModalTip'?' show':''" @hide="onModalTipHide" @confirm="onModalTipConfirm"></ModalTip>
+		<ModalTip ref='modalTipRef' :class="modalName=='showModalTip'?' show':''" @hide="onModalTipHide"
+			@confirm="onModalTipConfirm"></ModalTip>
 
 	</view>
 </template>
@@ -474,7 +544,7 @@
 	import boxingPost from "@/components/modal/boxing-post/boxing-post.vue"
 
 	import boxingHit from "@/components/modal/boxing-hit/boxing-hit.vue"
-	
+
 	import actionJump from "@/components/modal/action-jump/action-jump.vue"
 
 	import AccAndOri from "@/util/util-js/AccAndOri.js"
@@ -488,6 +558,8 @@
 
 	import keyboardListener from '@/components/keyboard-listener/keyboard-listener.vue'
 
+	import LEDFont from '@/components/LEDFont/LEDFont.vue'
+
 	// 获取 module 
 	// var testModule = uni.requireNativePlugin("MyAttitude")
 	// const modal = uni.requireNativePlugin('modal');
@@ -509,13 +581,16 @@
 			'signature', 'weight', 'height', 'planData', 'BLEDeviceShowList', 'BLEConnectDevice', 'bPlanExpired',
 			'bPlanFinish',
 			'bGuidePages',
-			'globalAcc', 'globalOri', 'DeviceBindingList', 'ConnectBindingDevice', 'cIndex', 'bNewGuide', 'localSportTime',
+			'globalAcc', 'globalOri', 'DeviceBindingList', 'ConnectBindingDevice', 'cIndex', 'bNewGuide',
+			'localSportTime',
 			'currentModeIndex', 'oldArcbarProCalorie', 'oldArcbarAllCalorie', 'bOpenBluetooth', 'bOpenSuccess',
-			'bListenAdapterStateChange', 'bConnection', 'bVerifiedConnection', 'currentInstruction', 'instructionState',
+			'bListenAdapterStateChange', 'bConnection', 'bVerifiedConnection', 'currentInstruction',
+			'instructionState',
 			'LocationGameUrl',
 			'bPhoneMatched',
 			'versionCodeState',
-			'platform'
+			'platform',
+			'cDiamond', 'cGold'
 		]),
 		components: {
 			uniNavBar,
@@ -534,8 +609,9 @@
 			HitFistEffect,
 			ModalTip,
 			keyboardListener,
-			
-			actionJump
+
+			actionJump,
+			LEDFont
 		},
 
 		data() {
@@ -637,6 +713,7 @@
 				 */
 				bGetBondTesting: false,
 
+
 			};
 		},
 		onLoad() {
@@ -644,8 +721,8 @@
 			_self = this;
 			// 圆形进度条样式
 			this.cWidthArcbar = uni.upx2px(480); //这里要与样式的宽高对应
-			this.cHeightArcbar = uni.upx2px(580); //这里要与样式的宽高对应
-			this.arcbarWidth = uni.upx2px(24);
+			this.cHeightArcbar = uni.upx2px(600); //这里要与样式的宽高对应
+			this.arcbarWidth = uni.upx2px(14);
 			// 体重数据样式
 			this.cWidth = uni.upx2px(750);
 			this.cHeight = uni.upx2px(300);
@@ -869,7 +946,8 @@
 				'gOnAddClientInfo', 'onWriteBLEConnectionValue',
 				'gCreateFilterObj', 'gUpdateFilter', 'B_GetBondedDevices', 'B_OpenBLESetting', 'B_OpenRopeSkipping',
 				'B_CloseRopeSkipping',
-				'gCreateSandbagAlgorithm', 'gUpdateSandbagAlgorithm', 'gStartSimulateBLEUpdate', 'gStopSimulateBLEUpdate'
+				'gCreateSandbagAlgorithm', 'gUpdateSandbagAlgorithm', 'gStartSimulateBLEUpdate',
+				'gStopSimulateBLEUpdate'
 			]),
 			onKeyDown(e) {
 				console.log(e);
@@ -1025,7 +1103,7 @@
 				canvaArcbar1 = new uCharts({
 					$this: _self,
 					canvasId: 'canvasArcbar',
-					type: 'myArcbar',
+					type: 'myGradualChangeArcbar',
 					fontSize: 11,
 					legend: {
 						show: false
@@ -1038,32 +1116,32 @@
 					height: _self.cHeightArcbar,
 					dataLabel: true,
 					//  Math.round(chartData.series[0].data * 100) + '%'
-					title: {
-						// arcbarDate: date.formatDate(_self.originalDate),
-						name: showLCal,
-						molecularUnit: LCalTip, //单位的分子部分
-						denominatorUnit: showCal, //单位的分母部分
-						unitFontSize: 11, //单位字符大小
-						color: 'rgba(255, 255, 255, 1)',
-						fontSize: 28,
-						offsetX: -30,
-						offsetY: 10
-					},
-					subtitle: {
-						name: series[0].name,
-						color: 'rgba(255, 255, 255, 1)',
-						fontSize: 13,
-						offsetY: -75
-					},
+					// title: {
+					// 	// arcbarDate: date.formatDate(_self.originalDate),
+					// 	name: showLCal,
+					// 	molecularUnit: LCalTip, //单位的分子部分
+					// 	denominatorUnit: showCal, //单位的分母部分
+					// 	unitFontSize: 11, //单位字符大小
+					// 	color: 'rgba(255, 255, 255, 1)',
+					// 	fontSize: 28,
+					// 	offsetX: -30,
+					// 	offsetY: 10
+					// },
+					// subtitle: {
+					// 	name: series[0].name,
+					// 	color: 'rgba(255, 255, 255, 1)',
+					// 	fontSize: 13,
+					// 	offsetY: -75
+					// },
 					extra: {
 						arcbar: {
 							type: 'default',
 							backgroundColor: 'rgba(234, 234, 255, 1)',
 							backgroundEndColor: 'rgba(234, 234, 255, 1)',
-							backgroundMiddle: 'rgba(158, 158, 255, 1)',
+							backgroundMiddle: '#9291FF', //'rgba(158, 158, 255, 1)',
 							width: _self.arcbarWidth, //圆弧的宽度
-							lineColor: 'rgba(255, 255, 255, 1)',
-							lineEndColor: 'rgba(233, 233, 255, 1)'
+							lineColor: '#51EDFE',
+							lineEndColor: '#F7C75D'
 						}
 					}
 				});
@@ -1105,16 +1183,17 @@
 
 				canvaArcbar1.updateData({
 					series: series,
-					title: {
-						//这里的文案是自定义的，不写是不变的
-						name: showLCal,
-						molecularUnit: LCalTip, //单位的分子部分
-						denominatorUnit: showCal, //单位的分母部分
-					},
-					subtitle: {
-						//这里的文案是自定义的，不写是不变的
-						name: series[0].name
-					}
+					// title: {
+					// 	//这里的文案是自定义的，不写是不变的
+					// 	name: showLCal,
+					// 	molecularUnit: LCalTip, //单位的分子部分
+					// 	denominatorUnit: showCal, //单位的分母部分
+					// }
+					//,
+					// subtitle: {
+					// 	//这里的文案是自定义的，不写是不变的
+					// 	name: series[0].name
+					// }
 				});
 			},
 			//没有限制下的更新表盘
@@ -1133,16 +1212,17 @@
 
 				canvaArcbar1.updateData({
 					series: series,
-					title: {
-						//这里的文案是自定义的，不写是不变的
-						name: showLCal,
-						molecularUnit: LCalTip, //单位的分子部分
-						denominatorUnit: showCal, //单位的分母部分
-					},
-					subtitle: {
-						//这里的文案是自定义的，不写是不变的
-						name: series[0].name
-					}
+					// title: {
+					// 	//这里的文案是自定义的，不写是不变的
+					// 	name: showLCal,
+					// 	molecularUnit: LCalTip, //单位的分子部分
+					// 	denominatorUnit: showCal, //单位的分母部分
+					// }
+					// ,
+					// subtitle: {
+					// 	//这里的文案是自定义的，不写是不变的
+					// 	name: series[0].name
+					// }
 				});
 			},
 			// 数据列表
@@ -1650,7 +1730,7 @@
 					url: '../../game-page/game/game?type=' + e.currentTarget.dataset.type
 				});
 			},
-			
+
 			//判断是否有其他限制
 			onStartCheck() {
 				//#ifdef H5
@@ -2395,8 +2475,10 @@
 	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
 	.qiun-charts-arcbar {
 		/* padding: 20rpx 15rpx; */
-		height: 556rpx;
+		/* margin-top: 60rpx; */
+		height: 600rpx;
 		position: relative;
+		width: 750rpx;
 		/* border: 1rpx solid #000000; */
 	}
 
@@ -2410,7 +2492,7 @@
 		/* bottom: 0; */
 		margin: auto;
 		width: 556upx;
-		height: 556upx;
+		height: 600upx;
 		/* border: 1rpx solid #FFFFFF; */
 	}
 

util/util-css/main.css

@@ -2478,7 +2478,7 @@ button.cuIcon.lg {
 	/* border-radius: 20px; */
 	overflow: hidden;
 	/* border: 1rpx solid #000000; */
-	
+
 }
 
 .cu-modal.bottom-modal::before {
@@ -3800,7 +3800,7 @@ scroll-view.cu-steps .cu-item {
 	font-size: 36upx;
 }
 
-.text-18px{
+.text-18px {
 	font-size: 18px;
 }
 
@@ -3832,14 +3832,15 @@ scroll-view.cu-steps .cu-item {
 	font-size: 26px;
 }
 
-.text-18px-before::before{
+.text-18px-before::before {
 	font-size: 18px;
 }
-.text-20px-before::before{
+
+.text-20px-before::before {
 	font-size: 20px;
 }
 
-.text-22px-before::before{
+.text-22px-before::before {
 	font-size: 22px;
 }
 
@@ -3972,7 +3973,7 @@ scroll-view.cu-steps .cu-item {
 }
 
 .line-mGrey {
-	color:#EAEAEA;
+	color: #EAEAEA;
 }
 
 .text-gray,
@@ -4027,13 +4028,14 @@ scroll-view.cu-steps .cu-item {
 	background-color: rgba(151, 151, 255, 1);
 }
 
-.make-text-r-blue{
-	color:rgba(55, 192, 252, 255);
+.make-text-r-blue {
+	color: rgba(55, 192, 252, 255);
 }
 
-.make-text-z3-white{
-	color:rgba(255,255,255,0.3);
+.make-text-z3-white {
+	color: rgba(255, 255, 255, 0.3);
 }
+
 /* 自定义导航栏的图片大小 */
 .png-more {
 	width: 20px;
@@ -4047,7 +4049,7 @@ scroll-view.cu-steps .cu-item {
 	overflow: hidden;
 	background-color: #FFFFFF;
 	/* box-shadow: 0px 0px 3px 2px rgba(113, 113, 219, 0.23); */
-	box-shadow:-3px 4px 9px 0px rgba(151,151,255,0.33);
+	box-shadow: -3px 4px 9px 0px rgba(151, 151, 255, 0.33);
 	position: relative;
 	z-index: 2;
 }
@@ -4091,19 +4093,21 @@ scroll-view.cu-steps .cu-item {
 
 
 /* 图片部分大小 */
-.w-left-arrow{
+.w-left-arrow {
 	width: 11px;
 	height: 19px;
 }
 
-.p-left-arrow{
+.p-left-arrow {
 	width: 19px;
 	height: 19px;
 }
-.b-down-arrow{
+
+.b-down-arrow {
 	width: 13px;
 	height: 8px;
 }
+
 .data-png-32 {
 	width: 32px;
 	height: 32px;
@@ -4159,7 +4163,7 @@ scroll-view.cu-steps .cu-item {
 }
 
 .my-cu-steps .my-cu-item:not([class*="text-"]) {
-	color: rgba(255,255,255,0.3);
+	color: rgba(255, 255, 255, 0.3);
 }
 
 .my-cu-steps .my-cu-item [class*="cuIcon-"],
@@ -4176,7 +4180,7 @@ scroll-view.cu-steps .cu-item {
 	position: absolute;
 	height: 0px;
 	width: calc(100% - 42upx);
-	border-bottom: 4px solid rgba(255,255,255,0.3);
+	border-bottom: 4px solid rgba(255, 255, 255, 0.3);
 	left: calc(0px - (100% - 42upx) / 2);
 	top: 35upx;
 	z-index: 0;
@@ -4243,12 +4247,12 @@ scroll-view.cu-steps .cu-item {
 	content: "\e646";
 }
 
-.cu-bind-modal{
-	
-	position: relative; 
+.cu-bind-modal {
+
+	position: relative;
 	width: 604rpx;
 	height: 576rpx;
-	background-color: rgba(0,0,0,0); 
+	background-color: rgba(0, 0, 0, 0);
 	border-radius: 25px;
 	display: inline-block;
 	vertical-align: middle;
@@ -4257,3 +4261,53 @@ scroll-view.cu-steps .cu-item {
 	overflow: hidden;
 }
 
+/* 首页两边格子进度条样式 */
+.grid-progress-vertical-container {
+	position: absolute;
+	top: -50rpx;
+	left: 0;
+	right: 0;
+	display: flex;
+	width: 750rpx;
+	justify-content: space-between;
+	/* border: 1rpx solid #000000; */
+	pointer-events: none;
+}
+
+.grid-progress-vertical-bar {
+	display: flex;
+	flex-direction: column-reverse;
+}
+
+.grid-progress-vertical-child {
+	/* position: relative; */
+	width: 70rpx;
+	height: 14rpx;
+	margin: 14rpx 18rpx 0 18rpx;
+	display: flex;
+	/* align-content: center; */
+	justify-content: space-between;
+
+
+}
+
+.grid-progress-vertical-text {
+	color: #FFFFFF;
+	font-size: 8px;
+}
+
+.grid-progress-text-hidden {
+	visibility: hidden;
+}
+
+.grid-progress-vertical-active {
+	background-color: #FFFFFF;
+	width: 30rpx;
+	height: 100%;
+}
+
+.grid-progress-vertical-inactive {
+	width: 30rpx;
+	height: 100%;
+	background: rgba(255, 255, 255, 0.2); //rgba(144, 141, 246, 1);
+}

util/util-js/action/jump.js

@@ -72,6 +72,8 @@ var ActionJump = function ActionJump() {
 		valleyOfWave: 0,
 		//检测到极快的波动的次数
 		timeOfPeakCount: 0,
+		//开始更新的次数
+		startCount: 0,
 		//停止跳
 		bStopJump: false,
 		//上次传感器的值
@@ -104,7 +106,7 @@ ActionJump.prototype.updateJump = function () {
 	let { lAccX, lAccY, lAccZ } = data.linearAcc;
 	let { oAccX, oAccY, oAccZ } = data.oriAcc;
 	let { oGyroX, oGyroY, oGyroZ } = data.oriGyro;
-	this.detectorNewStep(data.resultant, lAccX, lAccY, lAccZ, oAccX, oAccY, oAccZ, data.runIndex, oGyroY);
+	this.detectorNewStep(data.resultant, lAccX, lAccY, lAccZ, oAccX, oAccY, oAccZ, data.runIndex, oGyroX);
 };
 
 
@@ -147,12 +149,40 @@ ActionJump.prototype.detectorNewStep = function (resultant, linearX, linearY, li
 				this.highestCount = 0;
 				//陀螺仪部分
 				this.oriGyroYArray = [];
+
+				this.jumpOpts.startCount = 0;
+
+
 			}
 
 			if (this.jumpOpts.bUpState) {
+				
 				this.oriGyroYArray.push(_oGyroY);
+
+				this.jumpOpts.startCount++;
+				if (this.jumpOpts.startCount >= 15) {
+					//如果加过一定数量。判断没有触发，重置状态
+					this.jumpOpts.bUpState = false;
+					this.resetAll();
+					this.jumpOpts.startCount = 0;
+
+					let allOGyroValue = 0;
+					for (let i = 0; i < this.oriGyroYArray.length; i++) {
+						allOGyroValue += this.oriGyroYArray[i];
+					}
+					allOGyroValue /= this.oriGyroYArray.length;
+
+					//这里相当于处理识别到跳，但是没有判断出什么动作。
+					this.event.trigger('resultant', {
+						type: "stateDataOfJump",
+						currentMaxValue: 0,
+						oGyroValue: allOGyroValue,
+						resultant: resultant
+					});
+				}
+
 				//出现极值后
-				if (Math.abs(linearZ) < 4 && Math.abs(resultant) < 6) {
+				if (Math.abs(linearZ) < 7 && Math.abs(resultant) < 7) {
 					this.highestCount++;
 					if (this.highestCount >= 2) {
 						//达到最高点，
@@ -210,6 +240,9 @@ ActionJump.prototype.detectorNewStep = function (resultant, linearX, linearY, li
 						// bUpdate = false;
 						this.jumpOpts.bUpState = false;
 						this.resetAll();
+
+
+						console.log("this.jumpOpts.startCount111:", this.jumpOpts.startCount);
 					}
 
 				}
@@ -222,7 +255,7 @@ ActionJump.prototype.detectorNewStep = function (resultant, linearX, linearY, li
 				this.event.trigger('resultant', {
 					type: "stop"
 				});
-
+				console.log("this.jumpOpts.startCount222:", this.jumpOpts.startCount);
 				this.resetAll();
 			}
 		}

util/util-js/store.js

@@ -327,7 +327,11 @@ const store = new Vuex.Store({
 
 		//跳绳条件下计数
 		bRopeKeyOne: 0,
-		bRopeKeyTwo: 0
+		bRopeKeyTwo: 0,
+		
+		//钻石，金币
+		cDiamond:1000,
+		cGold:1000
 
 	},
 	mutations: {