Browse Source

样式修改

lilei 4 năm trước cách đây
mục cha
commit
4184686b2d
1 tập tin đã thay đổi với 36 bổ sung27 xóa
  1. 36 27
      pages/work/index/index.vue

+ 36 - 27
pages/work/index/index.vue

@@ -121,13 +121,14 @@ export default {
 			this.showStart = true;
 			this.showStop = false;
 			// 归位结束后
+			setTimeout(()=>{
+				uni.redirectTo({
+					url:"/pages/work/success/success"
+				})
+			},3000)
 		},
 		// 启动,急停按钮
 		startWork() {
-			// this.interId = setInterval(()=>{
-			// 	this.loading(this.step++)
-			// },1000)
-
 			// 启动
 			if (this.status == 'start') {
 				this.showStart = true;
@@ -135,12 +136,20 @@ export default {
 				setTimeout(() => {
 					this.status = 'working';
 					this.showStart = false;
+					// 进度条
+					this.interId = setInterval(()=>{
+						this.loading(this.step++)
+					},1000)
 				}, 3000);
 			}
 			// 急停
 			if (this.status == 'working') {
 				// 显示急停提示弹框
 				this.showStop = true;
+				// 停止进度
+				this.rdeg= -135;
+				this.ldeg= -135;
+				clearInterval(this.interId);
 			}
 		},
 		// 进度条动画
@@ -161,39 +170,39 @@ export default {
 // 扇形圆环
 .circle_process {
 	position: absolute;
-	width: 380rpx;
-	height: 380rpx;
+	width: 390rpx;
+	height: 390rpx;
 }
 .circle_process .wrapper {
-	width: 190rpx;
-	height: 380rpx;
+	width: 195rpx;
+	height: 390rpx;
 	position: absolute;
 	top: 0;
 	overflow: hidden;
 }
 .circle_process .right {
-	right: 0;
+	right: 1px;
 }
 .circle_process .left {
-	left: 0;
+	left: 1px;
 }
 .circle_process .circle {
-	width: 380rpx;
-	height: 380rpx;
-	border: 20rpx solid transparent;
-	border-radius: 50%;
+	width: 390rpx;
+	height: 390rpx;
+	border: 40rpx solid transparent;
+	border-radius: 100%;
 	position: absolute;
 	top: 0;
 	transform: rotate(-135deg);
 }
 .circle_process .rightcircle {
-	border-top: 20rpx solid red;
-	border-right: 20rpx solid red;
+	border-top: 40rpx solid red;
+	border-right: 40rpx solid red;
 	right: 0;
 }
 .circle_process .leftcircle {
-	border-bottom: 20rpx solid red;
-	border-left: 20rpx solid red;
+	border-bottom: 40rpx solid red;
+	border-left: 40rpx solid red;
 	left: 0;
 }
 
@@ -205,23 +214,23 @@ export default {
 		justify-content: center;
 	}
 	.work-cons {
-		height: 60vh;
+		height: 50vh;
 		background-image: linear-gradient(0deg, #666, #333);
-		border-bottom-left-radius: 300rpx 30rpx;
-		border-bottom-right-radius: 300rpx 30rpx;
+		border-bottom-left-radius: 500rpx 50rpx;
+		border-bottom-right-radius: 500rpx 50rpx;
 		position: relative;
 		// 按钮
 		.work-button-wrap {
 			width: 400rpx;
 			margin-top: -50rpx;
 			.work-button {
-				background: #aaa;
+				background: #666;
 				border-radius: 100%;
-				width: 380rpx;
-				height: 380rpx;
+				width: 390rpx;
+				height: 390rpx;
 				cursor: pointer;
 				.cirle-one {
-					background: #444;
+					background-image: linear-gradient(180deg, #555, #333 20%);
 					width: 370rpx;
 					height: 370rpx;
 					border-radius: 100%;
@@ -236,7 +245,7 @@ export default {
 						transform-origin: center center;
 						width: 350rpx;
 						height: 5rpx;
-						background: #aaa;
+						background: #888;
 					}
 				}
 				.cirle-three {
@@ -282,7 +291,7 @@ export default {
 					color: #eee;
 				}
 				.w-start {
-					background: #ffcc00;
+					background: #ffc800;
 				}
 				.w-stop {
 					background: #ff0000;