update

src/router/index.js

@@ -37,6 +37,11 @@ const constantRouterMap = [
 				component : _import('zhiExercise/index') ,
 				component : _import('zhiExercise/index') ,
 				name : 'zhiExercise' ,
 				name : 'zhiExercise' ,
 			},
 			},
+            {
+                path : '/zhiExercise/zhiDrill' ,
+                component : _import('zhiExercise/zhiDrill') ,
+                name : 'zhiDrill' ,
+            },
             //随机数字
             //随机数字
 			{
 			{
 				path : '/randomNumber/index' ,
 				path : '/randomNumber/index' ,

src/views/zhiExercise/index.vue

@@ -14,7 +14,7 @@
             <div class="item" :class="{active: speed == 2}" @click="changSpeed(2)">中速</div>
             <div class="item" :class="{active: speed == 2}" @click="changSpeed(2)">中速</div>
             <div class="item" :class="{active: speed == 3}" @click="changSpeed(3)">快速</div>
             <div class="item" :class="{active: speed == 3}" @click="changSpeed(3)">快速</div>
         </div>
         </div>
-        <div class="start">之子运动</div>
+        <div class="start" @click="start">之子运动</div>
     </div>
     </div>
 </template>
 </template>
 
 
@@ -29,6 +29,11 @@
         methods: {
         methods: {
             changSpeed(val) {
             changSpeed(val) {
                 this.speed = val;
                 this.speed = val;
+            },
+            start() {
+                this.$router.push({
+                    path: '/zhiExercise/zhiDrill'
+                })
             }
             }
         }
         }
     }
     }

src/views/zhiExercise/zhiDrill.vue

+<template>
+    <div class="content">
+        <div class="title">00:00:00</div>
+        <div class="border">
+            <div class="ball"></div>
+        </div>
+        <div class="start">开始训练</div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "zhiDrill",
+        data() {
+            return {
+                directX: 1,  //x轴方向  1代表从左到右 -1代表从右到左
+                directY: 1,  //y轴方向  1代表从上到下 -1代表从下到上
+                ballX: 0,    //小球的x坐标
+                ballY: 0,    //小球的y坐标
+                speed: '',    //小球的运动速度
+
+            }
+        },
+        methods: {
+            ballMove() {
+                this.ballX = this.ballX + this.directX * this.speed;
+                this.ballY = this.ballY + this.directY * this.speed;
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    .content {
+        padding: 30px 24px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .title {
+        font-size: 30px;
+        color: #409eff;
+    }
+
+    .border {
+        width: 100%;
+        height: 1300px;
+        border: 10px solid #000;
+        margin-top: 20px;
+    }
+
+    .ball {
+        width: 50px;
+        height: 50px;
+        border-radius: 50%;
+        background: #000;
+    }
+
+    .start {
+        width: 500px;
+        height: 80px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: white;
+        background: #409eff;
+        border-radius: 40px;
+        /*margin: 300px auto 0;*/
+        position: fixed;
+        bottom: 50px;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+</style>