卧姿功能

package.json

@@ -3,7 +3,7 @@
   "private": true,
   "version": "0.0.0",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "dev:uat": "vite --mode uat",
     "dev:prod": "vite --mode production",
     "build": "vite build",

src/lang/en.js

@@ -13,5 +13,32 @@ export default {
     cameraButtonText: "OK",
     completeText2: "You have recorded",
     completeButtonText: "OK",
+    lactationModeText: "请选择哺乳姿势",
+    sittingGesture: {
+      title: "摇篮式哺乳",
+      subTitle: "适合哺乳配合好的宝宝和妈妈",
+    },
+    lyingGesture: {
+      title: "侧卧式哺乳",
+      subTitle: "适用于处于剖宫产恢复期或夜间喂养",
+    },
+    sittingGestureIntroduce: {
+      title: "摇篮式哺乳",
+      subTitle: "婴儿自己寻乳，适合哺乳配合好的母婴",
+      suggestedText1: "Keep baby's head in higher position so you can see baby's face",
+      suggestedText2: "婴儿和妈妈的胸腹部需去除衣服的包裹",
+      suggestedText3: "Keep baby's neck on your elbow, and do not restrict baby's head with your hand",
+      suggestedText4: "Keep baby's ear, shoulder and butt at the same level",
+    },
+    lyingGestureIntroduce: {
+      title: "侧卧式哺乳",
+      subTitle: "适用于处在剖宫产恢复期、刚经历过外阴切开手术的妈妈或者夜间喂养，便于妈妈们更好的休息及婴儿更好地入睡。\n请妈妈注意时刻检查宝宝呼吸，避免乳房闷到宝宝。",
+      suggestedText1: "婴儿头高臀低， 妈妈能看到婴儿的表情",
+      suggestedText2: "婴儿和妈妈的胸腹部需去除衣服的包裹",
+      suggestedText3: "Keep baby's ear, shoulder and butt at the same level",
+      suggestedText4: "妈妈的一只手可以支撑宝宝的背部，另一只手可枕于妈妈的头下",
+      suggestedText5: "注意宝宝鼻息通畅，不要挤压胸部。可以使宝宝的臀部靠近妈妈的腹部，并使宝宝鼻尖与妈妈的乳房有空隙",
+      tipsText: "*请注意学姿势的过程中不要触碰到乳头"
+    }
   }
 }

src/lang/es.js

@@ -13,5 +13,32 @@ export default {
     cameraButtonText: "DE ACUERDO",
     completeText2: "Usted ha registrado",
     completeButtonText: "DE ACUERDO",
+    lactationModeText: "请选择哺乳姿势",
+    sittingGesture: {
+      title: "摇篮式哺乳",
+      subTitle: "适合哺乳配合好的宝宝和妈妈",
+    },
+    lyingGesture: {
+      title: "侧卧式哺乳",
+      subTitle: "适用于处于剖宫产恢复期或夜间喂养",
+    },
+    sittingGestureIntroduce: {
+      title: "摇篮式哺乳",
+      subTitle: "婴儿自己寻乳，适合哺乳配合好的母婴",
+      suggestedText1: "婴儿头高臀低，妈妈能看到婴儿的表情",
+      suggestedText2: "婴儿和妈妈的胸腹部需去除衣服的包裹",
+      suggestedText3: "婴儿的头枕于妈妈手肘处，不要用手固定婴儿头部",
+      suggestedText4: "婴儿的耳、肩、臀成一条直线",
+    },
+    lyingGestureIntroduce: {
+      title: "侧卧式哺乳",
+      subTitle: "适用于处在剖宫产恢复期、刚经历过外阴切开手术的妈妈或者夜间喂养，便于妈妈们更好的休息及婴儿更好地入睡。\n请妈妈注意时刻检查宝宝呼吸，避免乳房闷到宝宝。",
+      suggestedText1: "婴儿头高臀低， 妈妈能看到婴儿的表情",
+      suggestedText2: "婴儿和妈妈的胸腹部需去除衣服的包裹",
+      suggestedText3: "婴儿的耳、肩、臀成一条直线",
+      suggestedText4: "妈妈的一只手可以支撑宝宝的背部，另一只手可枕于妈妈的头下",
+      suggestedText5: "注意宝宝鼻息通畅，不要挤压胸部。可以使宝宝的臀部靠近妈妈的腹部，并使宝宝鼻尖与妈妈的乳房有空隙",
+      tipsText: "*请注意学姿势的过程中不要触碰到乳头"
+    }
   }
 }

src/lang/fr.js

@@ -14,5 +14,32 @@ export default {
     cameraButtonText: "OK",
     completeText2: "Vous avez enregistré",
     completeButtonText: "OK",
+    lactationModeText: "请选择哺乳姿势",
+    sittingGesture: {
+      title: "摇篮式哺乳",
+      subTitle: "适合哺乳配合好的宝宝和妈妈",
+    },
+    lyingGesture: {
+      title: "侧卧式哺乳",
+      subTitle: "适用于处于剖宫产恢复期或夜间喂养",
+    },
+    sittingGestureIntroduce: {
+      title: "摇篮式哺乳",
+      subTitle: "婴儿自己寻乳，适合哺乳配合好的母婴",
+      suggestedText1: "婴儿头高臀低，妈妈能看到婴儿的表情",
+      suggestedText2: "婴儿和妈妈的胸腹部需去除衣服的包裹",
+      suggestedText3: "婴儿的头枕于妈妈手肘处，不要用手固定婴儿头部",
+      suggestedText4: "婴儿的耳、肩、臀成一条直线",
+    },
+    lyingGestureIntroduce: {
+      title: "侧卧式哺乳",
+      subTitle: "适用于处在剖宫产恢复期、刚经历过外阴切开手术的妈妈或者夜间喂养，便于妈妈们更好的休息及婴儿更好地入睡。\n请妈妈注意时刻检查宝宝呼吸，避免乳房闷到宝宝。",
+      suggestedText1: "婴儿头高臀低， 妈妈能看到婴儿的表情",
+      suggestedText2: "婴儿和妈妈的胸腹部需去除衣服的包裹",
+      suggestedText3: "婴儿的耳、肩、臀成一条直线",
+      suggestedText4: "妈妈的一只手可以支撑宝宝的背部，另一只手可枕于妈妈的头下",
+      suggestedText5: "注意宝宝鼻息通畅，不要挤压胸部。可以使宝宝的臀部靠近妈妈的腹部，并使宝宝鼻尖与妈妈的乳房有空隙",
+      tipsText: "*请注意学姿势的过程中不要触碰到乳头"
+    }
   }
 }

src/lang/pl.js

@@ -11,5 +11,32 @@ export default {
     cameraButtonText: "知道了",
     completeText2: "您已记录",
     completeButtonText: "确定",
+    lactationModeText: "请选择哺乳姿势",
+    sittingGesture: {
+      title: "摇篮式哺乳",
+      subTitle: "适合哺乳配合好的宝宝和妈妈",
+    },
+    lyingGesture: {
+      title: "侧卧式哺乳",
+      subTitle: "适用于处于剖宫产恢复期或夜间喂养",
+    },
+    sittingGestureIntroduce: {
+      title: "摇篮式哺乳",
+      subTitle: "婴儿自己寻乳，适合哺乳配合好的母婴",
+      suggestedText1: "婴儿头高臀低，妈妈能看到婴儿的表情",
+      suggestedText2: "婴儿和妈妈的胸腹部需去除衣服的包裹",
+      suggestedText3: "婴儿的头枕于妈妈手肘处，不要用手固定婴儿头部",
+      suggestedText4: "婴儿的耳、肩、臀成一条直线",
+    },
+    lyingGestureIntroduce: {
+      title: "侧卧式哺乳",
+      subTitle: "适用于处在剖宫产恢复期、刚经历过外阴切开手术的妈妈或者夜间喂养，便于妈妈们更好的休息及婴儿更好地入睡。\n请妈妈注意时刻检查宝宝呼吸，避免乳房闷到宝宝。",
+      suggestedText1: "婴儿头高臀低， 妈妈能看到婴儿的表情",
+      suggestedText2: "婴儿和妈妈的胸腹部需去除衣服的包裹",
+      suggestedText3: "婴儿的耳、肩、臀成一条直线",
+      suggestedText4: "妈妈的一只手可以支撑宝宝的背部，另一只手可枕于妈妈的头下",
+      suggestedText5: "注意宝宝鼻息通畅，不要挤压胸部。可以使宝宝的臀部靠近妈妈的腹部，并使宝宝鼻尖与妈妈的乳房有空隙",
+      tipsText: "*请注意学姿势的过程中不要触碰到乳头"
+    }
   }
 }

src/lang/zh.js

@@ -11,5 +11,32 @@ export default {
     cameraButtonText: "知道了",
     completeText2: "您已记录",
     completeButtonText: "确定",
+    lactationModeText: "请选择哺乳姿势",
+    sittingGesture: {
+      title: "摇篮式哺乳",
+      subTitle: "适合哺乳配合好的宝宝和妈妈",
+    },
+    lyingGesture: {
+      title: "侧卧式哺乳",
+      subTitle: "适用于处于剖宫产恢复期或夜间喂养",
+    },
+    sittingGestureIntroduce: {
+      title: "摇篮式哺乳",
+      subTitle: "婴儿自己寻乳，适合哺乳配合好的母婴",
+      suggestedText1: "婴儿头高臀低，妈妈能看到婴儿的表情",
+      suggestedText2: "婴儿和妈妈的胸腹部需去除衣服的包裹",
+      suggestedText3: "婴儿的头枕于妈妈手肘处，不要用手固定婴儿头部",
+      suggestedText4: "婴儿的耳、肩、臀成一条直线",
+    },
+    lyingGestureIntroduce: {
+      title: "侧卧式哺乳",
+      subTitle: "适用于处在剖宫产恢复期、刚经历过外阴切开手术的妈妈或者夜间喂养，便于妈妈们更好的休息及婴儿更好地入睡。\n请妈妈注意时刻检查宝宝呼吸，避免乳房闷到宝宝。",
+      suggestedText1: "婴儿头高臀低， 妈妈能看到婴儿的表情",
+      suggestedText2: "婴儿和妈妈的胸腹部需去除衣服的包裹",
+      suggestedText3: "婴儿的耳、肩、臀成一条直线",
+      suggestedText4: "妈妈的一只手可以支撑宝宝的背部，另一只手可枕于妈妈的头下",
+      suggestedText5: "注意宝宝鼻息通畅，不要挤压胸部。可以使宝宝的臀部靠近妈妈的腹部，并使宝宝鼻尖与妈妈的乳房有空隙",
+      tipsText: "*请注意学姿势的过程中不要触碰到乳头"
+    }
   }
 }
\ No newline at end of file

src/router/index.js

@@ -11,13 +11,16 @@ const routerHashHistory = createWebHashHistory()
 const router = createRouter({
   history: routerHashHistory,
   routes: [{
-      path: '/',
-      component: () => import('../views/index.vue')
-    },
-    {
-      path: '/complete',
-      component: () => import('../views/complete.vue')
-    }
+    path: '/',
+    component: () => import('../views/startIndex.vue')
+  }, {
+    path: '/introduce',
+    component: () => import('../views/index.vue')
+  },
+  {
+    path: '/complete',
+    component: () => import('../views/complete.vue')
+  }
   ]
 })
 

src/styles/index.css

+body {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+  margin: 0;
+  -webkit-tap-highlight-color: transparent;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+div:focus {
+  outline: none;
+}
+
+a:focus,
+a:active {
+  outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+  cursor: pointer;
+  color: inherit;
+  text-decoration: none;
+}
+
+.clearfix:after {
+  visibility: hidden;
+  display: block;
+  font-size: 0;
+  content: " ";
+  clear: both;
+  height: 0;
+}
+
+.app-main {
+  min-height: 100%;
+}
+
+.app-container {
+  padding: 20px;
+}

src/styles/index.min.css

+body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-family:Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;margin:0;-webkit-tap-highlight-color:transparent}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}div:focus{outline:none}a:focus,a:active{outline:none}a,a:focus,a:hover{cursor:pointer;color:inherit;text-decoration:none}.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0}.app-main{min-height:100%}.app-container{padding:20px}

src/styles/index.scss

@@ -4,7 +4,7 @@ body {
   text-rendering: optimizeLegibility;
   font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
   margin: 0;
-  -webkit-tap-highlight-color:rgba(0,0,0,0); 
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
 html {

src/views/complete.vue

@@ -52,6 +52,9 @@ const calcCoord = function () {
   }
   return calcs.calcCoord.call(null, ...arguments, k);
 };
+var handleTouchmove = function (e) {
+  e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
+};
 export default {
   data() {
     return {
@@ -82,6 +85,9 @@ export default {
     if (lang) {
       this.$i18n.locale = lang;
     }
+    document.body.addEventListener("touchmove", handleTouchmove, {
+      passive: false
+    }); //passive 参数不能省略，用来兼容ios和android
     this._isMobile = isMobile();
     let lying = this.$route.query.lying;
     let time = this.$route.query.totalDuration;
@@ -94,6 +100,11 @@ export default {
     this.$nextTick(() => {
       new DevicePixelRatio().init();
     });
+  },
+  unmounted() {
+    document.body.removeEventListener("touchmove", handleTouchmove, {
+      passive: false
+    });
   }
 };
 </script>