Skip to content

B
breast-feeding-ai-demo-web
Commit d361886a authored by 朱国瑞's avatar 朱国瑞
Browse files
Options

卧姿功能

parent 5e4e8564
Hide whitespace changes
Inline Side-by-side
Showing with 1714 additions and 348 deletions
package.json
View file @ d361886a
......@@ -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
View file @ d361886a
......@@ -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
View file @ d361886a
......@@ -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
View file @ d361886a
......@@ -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
View file @ d361886a
......@@ -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
View file @ d361886a
......@@ -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
View file @ d361886a
......@@ -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 0 → 100644
View file @ d361886a
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 0 → 100644
View file @ d361886a
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
View file @ d361886a
......@@ -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
View file @ d361886a
......@@ -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>
......
src/views/index.vue
View file @ d361886a
<template>
<div class="page" :class="{'mobile':_isMobile,'pc':!_isMobile}">
<div class="main_content" id="main" :class="{'small':_isMobile && isSmall,'big':_isMobile && isBig}">
<div class="top" :class="{'small':_isMobile && isSmall,'big':_isMobile && isBig}">
<div class="page_title">{{$t('strings.homeTitle')}}</div>
<div class="picture-box">
<img class="page_bg2" src="../assets/images/gesture/swiper1big_new.png" alt srcset />
<div class="page_tips_1 page_tips">{{$t('strings.homeText1')}}</div>
<div class="page_tips_2 page_tips">{{$t('strings.homeText2')}}</div>
<div class="page_tips_3 page_tips">{{$t('strings.homeText3')}}</div>
</div>
</div>
<div class="global_box">
<img class="global_img" @click="clickGlobalPopup" src="../assets/images/gesture/icon_global.png" alt srcset />
<div class="popup-box" v-if="showPopup">
<img class="popup_bg" src="../assets/images/gesture/popup.png" alt srcset />
<div class="poup-item" :class="{'active':currentLanguage === index}" v-for="(item,index) in languageList" :key="item" @click="clickLanguage(index)">
<img v-if="currentLanguage === index" class="icon" src="../assets/images/gesture/select.png" alt srcset />
<div v-else></div>
<span>{{item}}</span>
<div class="briefsummary-box">
<div class="briefsummary-content" :style="{'height': briefsummaryHeight}">
<img class="bg" src="../assets/images/gesture/massage-entry-fullbg.png" />
<div class="briefsummary-main-box" :class="{'smallScreen':_isMobile && isSmall, 'big':_isMobile && isBig, 'lie':lying == 1}">
<div class="top-text" v-if="lying == 0">{{$t('strings.sittingGestureIntroduce.title')}}</div>
<div class="top-text-1" v-if="lying == 0">{{$t('strings.sittingGestureIntroduce.subTitle')}}</div>
<div class="top-text" v-if="lying == 1">{{$t('strings.lyingGestureIntroduce.title')}}</div>
<div class="top-text-1" v-if="lying == 1">{{$t('strings.lyingGestureIntroduce.subTitle')}}</div>
<div class="summary-wireframe-box" v-if="lying == 0">
<img class="wireframe" src="../assets/images/gesture/summary/summaryWireframe.png" />
<div class="summary-points points-top-left">
<div class="points-content">
<div class="no">1.</div>
<div class="points-text">{{$t('strings.sittingGestureIntroduce.suggestedText1')}}</div>
</div>
<div class="points-image">
<img class="line" src="../assets/images/gesture/summary/summarylinelefttop.png" />
</div>
</div>
<div class="summary-points points-top-right">
<div class="points-content">
<div class="no">2.</div>
<div class="points-text">{{$t('strings.sittingGestureIntroduce.suggestedText2')}}</div>
</div>
<div class="points-image">
<img class="line" src="../assets/images/gesture/summary/summaryrighttop.png" />
</div>
</div>
<div class="summary-points points-left-bottom">
<div class="points-content">
<div class="no">3.</div>
<div class="points-text">{{$t('strings.sittingGestureIntroduce.suggestedText3')}}</div>
</div>
<div class="points-image">
<img class="line" src="../assets/images/gesture/summary/summaryleftbottom.png" />
</div>
</div>
<div class="summary-points points-right-bottom">
<div class="points-content">
<div class="no">4.</div>
<div class="points-text">{{$t('strings.sittingGestureIntroduce.suggestedText4')}}</div>
</div>
<div class="points-image">
<img class="line" src="../assets/images/gesture/summary/summaryrightbottom.png" />
</div>
</div>
</div>
<div class="summary-wireframe-box" v-if="lying === 1">
<img class="wireframe" src="../assets/images/gesture/summary/summaryWireframeLie.png" />
<div class="summary-points points-1">
<div class="points-content">
<div class="no">1.</div>
<div class="points-text">{{$t('strings.lyingGestureIntroduce.suggestedText1')}}</div>
</div>
<div class="points-image">
<img class="line" src="../assets/images/gesture/summary/summarylinelie1.png" />
</div>
</div>
<div class="summary-points points-2">
<div class="points-content">
<div class="no">2.</div>
<div class="points-text">{{$t('strings.lyingGestureIntroduce.suggestedText2')}}</div>
</div>
<div class="points-image">
<img class="line" src="../assets/images/gesture/summary/summarylinelie2.png" />
</div>
</div>
<div class="summary-points points-3">
<div class="points-content">
<div class="no">3.</div>
<div class="points-text">{{$t('strings.lyingGestureIntroduce.suggestedText3')}}</div>
</div>
<div class="points-image">
<img class="line" src="../assets/images/gesture/summary/summarylinelie3.png" />
</div>
</div>
<div class="summary-points points-4">
<div class="points-content">
<div class="no">4.</div>
<div class="points-text">{{$t('strings.lyingGestureIntroduce.suggestedText4')}}</div>
</div>
<div class="points-image">
<img class="line" src="../assets/images/gesture/summary/summarylinelie4.png" />
</div>
</div>
<div class="summary-points points-5">
<div class="points-content">
<div class="no">5.</div>
<div class="points-text">{{$t('strings.lyingGestureIntroduce.suggestedText5')}}</div>
</div>
<div class="points-image">
<img class="line" src="../assets/images/gesture/summary/summarylinelie5.png" />
</div>
</div>
</div>
<div class="bottom-box"></div>
<div class="botton-box" v-if="lying === 0">
<light-button :text="$t('strings.homeButtonText')" @click="clickAuthCamera"></light-button>
<div class="tips-text"></div>
</div>
<div class="botton-box" v-if="lying === 1">
<light-button :text="$t('strings.homeButtonText')" @click="clickAuthCamera"></light-button>
<div class="tips-text">{{$t('strings.lyingGestureIntroduce.tipsText')}}</div>
</div>
</div>
</div>
</div>
<div class="bottom">
<div class="bottomBtn">
<light-button @click="clickAuthCamera" :text="$t('strings.homeButtonText')"></light-button>
</div>
</div>
<div class="no_camera_dialog" v-if="showNoCameraDialog">
<div class="no_camera_dialog_mask"></div>
<div class="no_camera_dialog_content">
......@@ -81,6 +163,9 @@ const calcCoord = function () {
}
return calcs.calcCoord.call(null, ...arguments, k);
};
var handleTouchmove = function (e) {
e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
};
export default {
data() {
return {
......@@ -100,7 +185,8 @@ export default {
cCs: calcCoord({ minTop: 10, maxTop: 20 }).top + "px", // content
pageHeight: "",
_isMobile: false,
scale: 0
scale: 0,
lying: 0
};
},
components: {
......@@ -137,6 +223,16 @@ export default {
nobabysittingBabyneckloc: "实际哺乳时，请注意用肘关节支撑宝宝颈部",
nobabysittingHeadupassdown: "实际哺乳时，请保持宝宝头部高于臀部",
nobabysittingBabystright: "实际哺乳时，请保持宝宝耳肩臀一条直线",
lyingUnrecognition: "未识别到宝宝，请根据屏幕上的宝宝贴纸模拟动作",
lyingKeepadpos: "请保持正侧面对宝宝",
lyingKeeplying: "请保持身体正侧侧躺，请勿仅靠手臂支撑头部",
lyingBabyhead: "请勿用手掌固定宝宝头部",
lyingNobabyback: "请用手臂托住宝宝背部，确保彼此胸腹相贴",
lyingBabystright: "请保持宝宝耳肩臀在同一直线",
lyingBabyheadloc: "请确保宝宝头部正对妈妈乳房，不宜过高",
nobabylyingBabyheadloc:
"实际哺乳时，请确保宝宝头部正对妈妈乳房，不宜过高",
nobabylyingBabystright: "实际哺乳时，请保持宝宝耳肩臀同一直线",
/// 坐姿建议
sittingSuggest: [
......@@ -147,6 +243,18 @@ export default {
"放松肩膀",
"妈妈抱宝宝的手，腰部和脚有支撑",
"保持放松，直到哺乳结束"
],
// 卧姿建议
lyingSuggest: [
"请时刻注意宝宝鼻息通畅",
"不要挤压胸部释放空间，应使宝宝臀部紧贴妈妈腹部",
"宝宝嘴巴尽量包裹住乳晕",
"使宝宝下巴紧贴乳房，张嘴角度大于100度",
"随时点击右上角指导图示调整含乳姿势",
"可用垫子支撑妈妈头部，但位置不宜过高",
"可用靠垫支撑腰部、在两膝关节间放置垫子缓解压力",
"保持放松，直到哺乳结束"
]
},
commonmemsg: {
......@@ -173,6 +281,20 @@ export default {
babystright: "请保持宝宝耳肩臀在同一直线",
babyheadloc: "请确保宝宝头部正对妈妈乳房，不宜过高"
},
lyingMsg: {
keepadpos: "请保持正侧面对宝宝",
keeplying: "请保持躺平",
babyhead: "请勿用手掌固定宝宝头部",
nobabyback: "请用手臂托住宝宝背部，确保彼此胸腹相贴",
babystright: "请保持宝宝耳肩臀在同一直线",
babyheadloc: "请确保宝宝头部正对妈妈乳房，不宜过高"
},
lyingMsgPart: {
babyhead: "请勿用手掌固定宝宝头部",
nobabyback: "请用手臂托住宝宝背部，确保彼此胸腹相贴",
babystright: "请保持宝宝耳肩臀在同一直线",
babyheadloc: "请确保宝宝头部正对妈妈乳房，不宜过高"
},
successmsg: {
recordMessage: "现在可以开始哺乳了！3秒后将自动开始计时",
nobabyRecord: "您已掌握喂养姿势，期待您和宝宝一起来体验哺乳计时功能",
......@@ -187,6 +309,10 @@ export default {
"2.请让宝宝嘴巴尽量包裹住乳晕，下巴紧贴乳房，张嘴角度大于100度。",
suggestText3: "3.请放松肩膀，用垫子或枕头支撑抱宝宝的手，腰部和脚。",
suggestText4: "4.全程请保持放松，愉悦的状态，直到宝宝主动吐出乳头。",
lyingSuggestText1:
"1.在哺乳过程中，请时刻避免乳房闷到宝宝，不要挤压胸部释放空间，应使宝宝臀部紧贴妈妈腹部，自然留有空隙。",
lyingSuggestText2:
"2.妈妈可在头部下方垫上垫子用以支撑，但位置不宜过高。在背部放上靠垫支撑腰部，保持腿部放松，自然屈曲，也可在两膝关节间放置垫子缓解压力。",
suggestConfirmText: "知道了",
discardReasonTitle: "放弃的原因是...",
discardReason1: "不知道怎么用",
......@@ -201,6 +327,13 @@ export default {
sitMainPointsText2: "妈妈和婴儿应该腹胸相贴",
sitMainPointsText3: "婴儿的头枕于妈妈手肘处，不要用手固定婴儿头部",
sitMainPointsText4: "婴儿的耳、肩、臀成一条直线",
sitMainPointsLyingText1: "婴儿头高臀低，妈妈能看到婴儿的表情",
sitMainPointsLyingText2: "妈妈和婴儿应该腹胸相贴",
sitMainPointsLyingText3: "婴儿的耳、肩、臀成一条直线",
sitMainPointsLyingText4:
"妈妈的一只手可以支撑婴儿的背部，另一只手可枕于妈妈的头下",
sitMainPointsLyingText5:
"注意婴儿鼻息通畅。不要挤压胸部释放空间，应使婴儿臀部靠近妈妈的腹部，从而使婴儿鼻尖与妈妈乳房有空隙",
sitMainPointsConfirmText: "好 的",
momLeft: "当未检测到您,将自动停止计时后续流程,停留5s后跳转至结束页面",
successStatusTips: "您的姿势正确，请继续保持大约20秒",
......@@ -577,24 +710,11 @@ export default {
default:
}
},
clickLanguage(index) {
this.showPopup = false;
this.currentLanguage = index;
let lang = "zh";
if (index === 0) {
lang = "en";
} else if (index === 1) {
lang = "fr";
} else if (index === 2) {
lang = "es";
}
this.$i18n.locale = lang;
localStorage.setItem("lang", lang);
},
clickConfirm() {
this.showNoCameraDialog = false;
},
async clickAuthCamera() {
async clickAuthCamera(lying = 0) {
this.setLanguagePack();
if (this.showNoCameraDialog) {
this.showNoCameraDialog = false;
......@@ -619,7 +739,8 @@ export default {
);
localStorage.setItem("incompleteUrl", document.URL);
let url =
"https://bfai-service-apac-uat.d-lab-services.danone.com/sdk/#/";
"https://bfai-service-apac-uat.d-lab-services.danone.com/sdk/#/?lying=" +
lying;
if (openDev) {
url = url + "&openDev=true";
}
......@@ -630,19 +751,29 @@ export default {
}
},
created() {
document.body.addEventListener(
"touchmove",
function (e) {
e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
},
{ passive: false }
); //passive 参数不能省略，用来兼容ios和android
let lying = 0; // 默认0 为坐姿
if (this.$route.query.lying != null) {
lying = ~~this.$route.query.lying;
}
this.lying = lying;
document.body.addEventListener("touchmove", handleTouchmove, {
passive: false
}); //passive 参数不能省略，用来兼容ios和android
let { scale } = getSystemInfo();
if (scale > 1 && scale < 2) {
this.scale = 1 - (scale - 1) / 100;
console.log(this.scale);
}
this.$i18n.locale = "en";
if (this.$i18n.locale == "zh") {
this.$i18n.locale = "en";
} else if (this.$i18n.locale == "en") {
this.currentLanguage = 0;
} else if (this.$i18n.locale == "fr") {
this.currentLanguage = 1;
} else if (this.$i18n.locale == "es") {
this.currentLanguage = 2;
}
this._isMobile = isMobile();
if (!isMobile()) {
document.getElementsByTagName("body")[0].style.minWidth = "750px";
......@@ -677,6 +808,11 @@ export default {
window.onresize = () => {
return (() => {})();
};
},
unmounted() {
document.body.removeEventListener("touchmove", handleTouchmove, {
passive: false
});
}
};
</script>
......@@ -701,184 +837,349 @@ export default {
justify-content: center;
align-items: center;
.global_box {
width: 31px;
.briefsummary-box {
position: absolute;
right: 9px;
top: 10px;
z-index: 10;
.global_img {
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index: 99;
overflow: hidden;
display: flex;
align-items: flex-end;
justify-content: center;
.briefsummary-content {
width: 100%;
}
.popup-box {
width: 70px;
height: 75px;
position: absolute;
right: -4.5px;
top: 36px;
padding-top: 6px;
box-sizing: border-box;
overflow: hidden;
border-radius: 6px;
.popup_bg {
position: absolute;
left: 0;
top: 0;
width: 70px;
}
.poup-item {
position: relative;
height: 22.5px;
font-size: 10px;
font-family: Source Han Sans SC;
font-weight: 500;
color: #303030;
line-height: 22.5px;
display: flex;
align-items: center;
justify-content: start;
cursor: pointer;
img {
width: 7px;
margin-left: 9.5px;
margin-right: 5.5px;
}
div {
width: 7px;
margin-left: 9.5px;
margin-right: 5.5px;
}
&.active {
color: #f68682;
}
height: 100%;
position: relative;
.bg {
width: 100%;
height: 100%;
}
}
}
.top {
position: relative;
.briefsummary-main-box {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: calc(var(--vh, 1vh) * 100);
background: url("../assets/images/gesture/introduceBg.png") no-repeat top
center;
background-size: 100% 100%;
overflow: hidden;
.page_bg {
width: 100%;
position: absolute;
left: 0;
top: 0;
}
height: 100%;
.page_title {
.top-text {
width: 349px;
font-size: 21px;
font-family: Source Han Sans SC;
font-weight: bold;
color: #f68682;
line-height: 30px;
// -webkit-text-stroke: 1px #fff9fb;
// text-stroke: 1px #fff9fb;
width: 100%;
position: absolute;
left: 0;
top: 58px;
z-index: 2;
color: #f57e79;
margin: 45.5px auto 10px auto;
// -webkit-text-stroke: 1px #fff;
// text-stroke: 1px #ffffff;
text-align: center;
}
.picture-box {
position: absolute;
top: 0;
left: 0;
.top-text-1 {
width: 340px;
font-size: 15px;
font-family: Source Han Sans SC;
font-weight: bold;
color: #fd8882;
margin: 0 auto 11px auto;
height: 112px;
text-align: center;
}
.top-text-2 {
font-size: 29px;
font-family: Source Han Sans SC;
font-weight: bold;
color: #f57e79;
margin: 0 auto 52px auto;
width: 100%;
height: calc(var(--vh, 1vh) * 100);
.page_bg2 {
width: 100%;
position: absolute;
left: 0;
top: 50px;
}
text-align: center;
}
.page_tips {
font-size: 12px;
color: #7d7c7a;
text-align: left;
word-wrap: break-word;
hyphens: auto;
&.page_tips_1 {
.summary-wireframe-box {
width: 298px;
height: 262px;
margin: 0 auto;
position: relative;
.wireframe {
width: 298px;
height: 262px;
}
.summary-points {
.no {
font-size: 19px;
font-family: Source Han Sans SC;
font-weight: bold;
color: #fd8882;
line-height: 21px;
position: absolute;
top: 165px;
left: 50px;
width: 130px;
left: 0;
}
&.page_tips_2 {
&.points-top-left {
width: 160px;
position: absolute;
width: 215px;
left: 155px;
top: 356px;
left: -31.5px;
top: -17px;
.points-text {
width: 160px;
}
.points-image {
position: absolute;
left: 15px;
top: 10px;
}
.line {
width: 221px;
}
}
&.page_tips_3 {
&.points-top-right {
width: 100px;
position: absolute;
width: 265px;
left: 55px;
top: 445px;
right: 4px;
top: -17.5px;
.points-text {
width: 100px;
}
.points-image {
position: absolute;
left: -5px;
top: 65px;
}
.line {
width: 42px;
}
}
}
}
&.small {
.page_title {
top: 20px;
}
.page_bg2 {
width: 60%;
position: absolute;
left: 20%;
top: 30px;
}
.page_tips {
font-size: 10px;
&.page_tips_1 {
&.points-left-bottom {
width: 150px;
position: absolute;
top: 96px;
left: calc(20% + 27.4987px);
width: 130.0012px;
left: -32px;
bottom: -68px;
.points-text {
width: 150px;
}
.points-image {
position: absolute;
left: 25px;
top: -57.5px;
}
.line {
width: 56px;
}
}
&.page_tips_2 {
&.points-right-bottom {
width: 150px;
position: absolute;
width: 215px;
left: calc(20% + 92px);
top: 212px;
right: -9px;
bottom: -72px;
.points-text {
width: 150px;
}
.points-image {
position: absolute;
left: 15px;
top: -60px;
}
.line {
width: 29px;
}
}
&.page_tips_3 {
position: absolute;
width: 265px;
left: calc(20% + 30px);
top: 264px;
}
.points-content {
padding-left: 20px;
.points-text {
width: 160px;
height: 58px;
font-size: 13.5px;
font-family: Source Han Sans SC;
font-weight: bold;
color: #919191;
line-height: 21px;
text-align: left;
word-wrap: break-word;
hyphens: auto;
}
}
}
}
.bottom {
flex: 1;
width: 375px;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 0;
bottom: 0;
.bottomBtn {
.bottom-box {
height: 130px;
flex-shrink: 0;
}
.botton-box {
display: flex;
position: absolute;
left: 0;
bottom: 20px;
width: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
.bottom-tips {
margin-top: 10px;
.tips-text {
height: 22px;
font-size: 12px;
color: #999999;
font-weight: 400;
color: #919191;
line-height: 12px;
margin-top: 12px;
}
}
.slide_up {
opacity: 1 !important;
transition: opacity 0.8s ease;
}
&.big {
.top-text {
margin: 45.5px auto 10px auto;
}
.top-text-1 {
margin: 0 auto 75px auto;
}
.botton-box {
bottom: 60px;
.tips-text {
margin-top: 22px;
}
}
}
&.smallScreen {
display: flex;
flex-direction: column;
justify-content: space-around;
.top-text {
margin: 0 auto;
}
.top-text-1 {
margin: 0 auto;
}
.top-text-2 {
margin: 0 auto 11px auto;
}
}
&.lie {
.top-text {
}
.top-text-1 {
font-size: 13px;
height: 128px;
}
.top-text-2 {
margin: 0 auto 96.5px auto;
}
.summary-wireframe-box {
width: 359px;
height: 181px;
.wireframe {
width: 359px;
height: 181px;
}
.summary-points {
&.points-1 {
width: 89px;
position: absolute;
left: 0;
top: -69px;
.points-text {
width: 89px;
}
.points-image {
position: absolute;
left: 25.5px;
top: 75px;
}
.line {
width: 17.5px;
}
}
&.points-2 {
width: 107.5px;
position: absolute;
right: 3px;
top: -69px;
.points-text {
width: 87.5px;
}
.points-image {
position: absolute;
left: -58px;
top: 27.5px;
}
.line {
width: 50px;
}
}
&.points-3 {
width: 108px;
position: absolute;
right: 2.5px;
top: 0;
.points-text {
width: 83px;
}
.points-image {
position: absolute;
top: 55.5px;
left: 8px;
}
.line {
width: 1px;
}
}
&.points-4 {
width: 121.5px;
position: absolute;
left: 2px;
bottom: -79px;
.points-text {
width: 121.5px;
}
.points-image {
position: absolute;
left: 27px;
top: -64.5px;
}
.line {
width: 35.5px;
}
}
&.points-5 {
width: 160px;
position: absolute;
right: 2.5px;
bottom: -79px;
.points-text {
width: 144px;
}
.points-image {
position: absolute;
left: 3px;
top: -63px;
height: 50.5px;
width: 1px;
overflow: hidden;
}
.line {
width: 1px;
}
}
}
}
&.smallScreen {
.top-text-2 {
margin: 0 auto 66px auto;
}
}
}
}
.no_camera_dialog {
position: fixed;
left: 0;
......@@ -967,178 +1268,345 @@ export default {
justify-content: space-between;
align-items: center;
.global_box {
width: 0.8267rem;
.briefsummary-box {
position: absolute;
right: 0.24rem;
top: 0.1333rem;
z-index: 10;
.global_img {
top: 0rem;
left: 0rem;
right: 0rem;
bottom: 0rem;
z-index: 99;
overflow: hidden;
display: flex;
align-items: flex-end;
justify-content: center;
.briefsummary-content {
width: 100%;
}
.popup-box {
width: 1.8667rem;
height: 2rem;
position: absolute;
right: -0.12rem;
top: 0.96rem;
padding-top: 0.16rem;
box-sizing: border-box;
overflow: hidden;
border-radius: 0.16rem;
.popup_bg {
position: absolute;
left: 0;
top: 0;
width: 1.8667rem;
}
.poup-item {
position: relative;
height: 0.6rem;
font-size: 0.2667rem;
font-family: Source Han Sans SC;
font-weight: 500;
color: #303030;
line-height: 0.6rem;
display: flex;
align-items: center;
justify-content: start;
cursor: pointer;
img {
width: 0.1867rem;
margin-left: 0.2533rem;
margin-right: 0.1467rem;
}
div {
width: 0.1867rem;
margin-left: 0.2533rem;
margin-right: 0.1467rem;
}
&.active {
color: #f68682;
}
height: 100%;
position: relative;
.bg {
width: 100%;
height: 100%;
}
}
}
.top {
position: relative;
.briefsummary-main-box {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: calc(var(--vh, 1vh) * 100);
background: url("../assets/images/gesture/introduceBg.png") no-repeat top
center;
background-size: 100% 100%;
overflow: hidden;
flex: 1;
.page_bg {
width: 100%;
position: absolute;
left: 0;
top: 0;
}
height: 100%;
.page_title {
.top-text {
width: 9.3067rem;
font-size: 0.56rem;
font-family: Source Han Sans SC;
font-weight: bold;
color: #f68682;
line-height: 0.8rem;
// -webkit-text-stroke: 0.0267rem #fff9fb;
// text-stroke: 0.0267rem #fff9fb;
width: 100%;
position: absolute;
left: 0;
top: 1.5467rem;
z-index: 2;
color: #f57e79;
margin: 1.2133rem auto 0.2667rem auto;
// -webkit-text-stroke: 0.0267rem #fff;
// text-stroke: 0.0267rem #ffffff;
text-align: center;
}
.picture-box {
position: absolute;
top: 0;
left: 0;
.top-text-1 {
width: 9.0667rem;
font-size: 0.4rem;
font-family: Source Han Sans SC;
font-weight: bold;
color: #fd8882;
margin: 0 auto 0.2933rem auto;
height: 2.1333rem;
text-align: center;
}
.top-text-2 {
font-size: 0.7733rem;
font-family: Source Han Sans SC;
font-weight: bold;
color: #f57e79;
margin: 0 auto 1.3867rem auto;
width: 100%;
height: calc(var(--vh, 1vh) * 100);
.page_bg2 {
width: 100%;
position: absolute;
left: 0;
top: 1.3333rem;
}
text-align: center;
}
.page_tips {
font-size: 0.2933rem;
color: #7d7c7a;
text-align: left;
font-weight: bold;
white-space: pre-line;
&.page_tips_1 {
.summary-wireframe-box {
width: 7.9467rem;
height: 6.9867rem;
margin: 0 auto;
position: relative;
.wireframe {
width: 7.9467rem;
height: 6.9867rem;
}
.summary-points {
.no {
font-size: 0.5067rem;
font-family: Source Han Sans SC;
font-weight: bold;
color: #fd8882;
line-height: 0.56rem;
position: absolute;
top: 4.4rem;
left: 1.3333rem;
width: 3.4667rem;
left: 0;
}
&.page_tips_2 {
&.points-top-left {
width: 4.2667rem;
position: absolute;
width: 5.7333rem;
left: 4.1333rem;
top: 9.4933rem;
left: -0.84rem;
top: -0.4533rem;
.points-text {
width: 4.2667rem;
}
.points-image {
position: absolute;
left: 0.4rem;
top: 0.2667rem;
}
.line {
width: 5.8933rem;
}
}
&.page_tips_3 {
&.points-top-right {
width: 2.6667rem;
position: absolute;
width: 7.0667rem;
left: 1.4667rem;
top: 11.8667rem;
right: 0.1067rem;
top: -0.4667rem;
.points-text {
width: 2.6667rem;
}
.points-image {
position: absolute;
left: -0.1333rem;
top: 1.7333rem;
}
.line {
width: 1.12rem;
}
}
}
}
&.small {
.page_bg2 {
width: 80%;
position: absolute;
left: 10%;
top: 0.8rem;
}
.page_tips {
font-size: 0.2667rem;
&.page_tips_1 {
&.points-left-bottom {
width: 4rem;
position: absolute;
top: 3.3067rem;
left: calc(10% + 1.0667rem);
width: 3.4667rem;
left: -0.8533rem;
bottom: -1.8133rem;
.points-text {
width: 4rem;
}
.points-image {
position: absolute;
left: 0.6667rem;
top: -1.5333rem;
}
.line {
width: 1.4933rem;
}
}
&.page_tips_2 {
&.points-right-bottom {
width: 4rem;
position: absolute;
width: 5.7333rem;
left: calc(10% + 3.2rem);
top: 7.36rem;
right: -0.24rem;
bottom: -1.92rem;
.points-text {
width: 4rem;
}
.points-image {
position: absolute;
left: 0.4rem;
top: -1.6rem;
}
.line {
width: 0.7733rem;
}
}
&.page_tips_3 {
position: absolute;
width: 7.0667rem;
left: calc(10% + 1.0667rem);
top: 9.28rem;
}
.points-content {
padding-left: 0.5333rem;
.points-text {
width: 4.2667rem;
height: 1.5467rem;
font-size: 0.36rem;
font-family: Source Han Sans SC;
font-weight: bold;
color: #919191;
line-height: 0.56rem;
text-align: left;
word-wrap: break-word;
hyphens: auto;
}
}
}
}
.bottom {
flex: 1;
width: 10rem;
height: 4rem;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 0;
bottom: 0;
.bottomBtn {
.bottom-box {
height: 3.4667rem;
flex-shrink: 0;
}
.botton-box {
display: flex;
position: absolute;
left: 0;
bottom: 0.5333rem;
width: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
.bottom-tips {
margin-top: 0.2667rem;
.tips-text {
height: 0.5867rem;
font-size: 0.32rem;
color: #999999;
font-weight: 400;
color: #919191;
line-height: 0.32rem;
margin-top: 0.32rem;
}
}
.slide_up {
opacity: 1 !important;
transition: opacity 0.8s ease;
}
&.big {
.top-text {
margin: 1.2133rem auto 0.2667rem auto;
}
.top-text-1 {
margin: 0 auto 2rem auto;
}
.botton-box {
bottom: 1.6rem;
.tips-text {
margin-top: 0.5867rem;
}
}
}
&.smallScreen {
display: flex;
flex-direction: column;
justify-content: space-around;
.top-text {
margin: 0 auto;
}
.top-text-1 {
margin: 0 auto;
}
.top-text-2 {
margin: 0 auto 0.2933rem auto;
}
}
&.lie {
.top-text {
}
.top-text-1 {
font-size: 0.3467rem;
height: 3.4133rem;
}
.top-text-2 {
margin: 0 auto 2.5733rem auto;
}
.summary-wireframe-box {
width: 9.5733rem;
height: 4.8267rem;
.wireframe {
width: 9.5733rem;
height: 4.8267rem;
}
.summary-points {
&.points-1 {
width: 2.3733rem;
position: absolute;
left: 0;
top: -1.84rem;
.points-text {
width: 2.3733rem;
}
.points-image {
position: absolute;
left: 0.68rem;
top: 2rem;
}
.line {
width: 0.4667rem;
}
}
&.points-2 {
width: 2.8667rem;
position: absolute;
right: 0.08rem;
top: -1.84rem;
.points-text {
width: 2.3333rem;
}
.points-image {
position: absolute;
left: -1.5467rem;
top: 0.7333rem;
}
.line {
width: 1.3333rem;
}
}
&.points-3 {
width: 2.88rem;
position: absolute;
right: 0.0667rem;
top: 0;
.points-text {
width: 2.2133rem;
}
.points-image {
position: absolute;
top: 1.48rem;
left: 0.2133rem;
}
.line {
width: 0.0267rem;
}
}
&.points-4 {
width: 3.24rem;
position: absolute;
left: 0.0533rem;
bottom: -2.1067rem;
.points-text {
width: 3.24rem;
}
.points-image {
position: absolute;
left: 0.72rem;
top: -1.72rem;
}
.line {
width: 0.9467rem;
}
}
&.points-5 {
width: 4.2667rem;
position: absolute;
right: 0.0667rem;
bottom: -2.1067rem;
.points-text {
width: 3.84rem;
}
.points-image {
position: absolute;
left: 0.08rem;
top: -1.68rem;
height: 1.3467rem;
width: 0.0267rem;
overflow: hidden;
}
.line {
width: 0.0267rem;
}
}
}
}
&.smallScreen {
.top-text-2 {
margin: 0 auto 1.76rem auto;
}
}
}
}
......@@ -1219,12 +1687,6 @@ export default {
}
&.big {
.top {
flex: none;
}
.bottom {
max-height: none;
}
}
}
}
......
src/views/startIndex.vue 0 → 100644
View file @ d361886a
<template>
<div class="page" :class="{'mobile':_isMobile,'pc':!_isMobile}">
<div class="main_content" id="main" :class="{'small':_isMobile && isSmall,'big':_isMobile && isBig}">
<div class="top" :class="{'small':_isMobile && isSmall,'big':_isMobile && isBig}">
<div class="page_title">{{$t('strings.homeTitle')}}</div>
<div class="picture-box">
<img class="page_bg2" src="../assets/images/gesture/swiper1big_new.png" alt srcset />
<div class="page_tips_1 page_tips">{{$t('strings.homeText1')}}</div>
<div class="page_tips_2 page_tips">{{$t('strings.homeText2')}}</div>
<div class="page_tips_3 page_tips">{{$t('strings.homeText3')}}</div>
</div>
</div>
<div class="global_box">
<img class="global_img" @click="clickGlobalPopup" src="../assets/images/gesture/icon_global.png" alt srcset />
<div class="popup-box" v-if="showPopup">
<img class="popup_bg" src="../assets/images/gesture/popup.png" alt srcset />
<div class="poup-item" :class="{'active':currentLanguage === index}" v-for="(item,index) in languageList" :key="item" @click="clickLanguage(index)">
<img v-if="currentLanguage === index" class="icon" src="../assets/images/gesture/select.png" alt srcset />
<div v-else></div>
<span>{{item}}</span>
</div>
</div>
</div>
<div class="bottom">
<div class="gesture_select_box">
<div class="gesture_title">请选择哺乳姿势</div>
<div class="gesture_list_box">
<div class="gesture_item_box" v-for="item in gestureList" @click="clickGestureItem(item)">
<img class="img" :src="item.image" alt srcset />
<div class="title">{{$t(item.title)}}</div>
<div class="sub_title">{{$t(item.subTitle)}}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import {
calcAdapt,
isBigScreen,
isSmallScreen,
authCamera,
isMobile,
getSystemInfo
} from "../common/util";
import lightButton from "../components/lightButton.vue";
import DevicePixelRatio from "../utils/evicePixelRatio.js";
import homeGestureImg1 from "../assets/images/gesture/home-gesture-1.png";
import homeGestureImg2 from "../assets/images/gesture/home-gesture-2.png";
let calcs = calcAdapt();
let scale;
const calcCoord = function () {
let width = 0;
let height = 0;
if (!isMobile()) {
width = 375;
height =
document.body.clientHeight > 667 ? document.body.clientHeight : 667;
} else {
width = document.body.clientWidth;
height = document.body.clientHeight;
}
if (height === 0) {
height = window.innerHeight;
if (!isMobile()) {
height = window.innerHeight > 667 ? window.innerHeight : 667;
}
}
scale = height / width;
let k = +scale.toFixed(2);
if (k >= 2.16) {
k = 2.16;
} else if (k <= 1.78) {
k = 1.78;
}
return calcs.calcCoord.call(null, ...arguments, k);
};
export default {
data() {
return {
showNoCameraDialog: false,
topHeiht: 0,
isBig: isBigScreen(),
isSmall: isSmallScreen(),
scale: scale,
currentLanguage: 0,
showPopup: false,
languageList: ["English", "Français", "Español"],
cL: calcCoord({ minTop: 23.5, maxTop: 15.5 }).top + "px",
cT: calcCoord({ minTop: 23.5, maxTop: 33.5 }).top + "px",
cB: calcCoord({ minTop: 20, maxTop: 40 }).top + "px",
cTs: calcCoord({ minTop: 20, maxTop: 30 }).top + "px", // title fontsize
cTb: calcCoord({ minTop: 15, maxTop: 15 }).top + "px", // title bottom
cCs: calcCoord({ minTop: 10, maxTop: 20 }).top + "px", // content
pageHeight: "",
_isMobile: false,
scale: 0,
gestureList: [
{
code: "0",
title: "strings.sittingGesture.title",
subTitle: "strings.sittingGesture.subTitle",
path: "",
image: homeGestureImg2
},
{
code: "1",
title: "strings.lyingGesture.title",
subTitle: "strings.lyingGesture.subTitle",
path: "",
image: homeGestureImg1
}
]
};
},
components: {
lightButton
},
methods: {
clickGlobalPopup() {
this.showPopup = !this.showPopup;
},
clickLanguage(index) {
this.showPopup = false;
this.currentLanguage = index;
let lang = "zh";
if (index === 0) {
lang = "en";
} else if (index === 1) {
lang = "fr";
} else if (index === 2) {
lang = "es";
}
this.$i18n.locale = lang;
localStorage.setItem("lang", lang);
},
clickGestureItem(val) {
let lying = Number(val.code);
this.$router.push({
path: "/introduce",
query: {
lying: lying
}
});
}
},
created() {
// document.body.addEventListener(
// "touchmove",
// function (e) {
// e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
// },
// { passive: false }
// ); //passive 参数不能省略，用来兼容ios和android
let { scale } = getSystemInfo();
if (scale > 1 && scale < 2) {
this.scale = 1 - (scale - 1) / 100;
console.log(this.scale);
}
this.$i18n.locale = "en";
this._isMobile = isMobile();
if (!isMobile()) {
document.getElementsByTagName("body")[0].style.minWidth = "750px";
this.topHeiht = calcCoord({ minTop: 459, maxTop: 571.3 }).top;
this.topHeiht = 521.3;
} else {
this.topHeiht = calcCoord({ minTop: 918, maxTop: 1142.6 }).top;
}
if (!this._isMobile) {
this.topHeiht = this.topHeiht + "px";
this.cL = calcCoord({ minTop: 23.5, maxTop: 25.5 }).top + "px";
this.cT = calcCoord({ minTop: 23.5, maxTop: 33.5 }).top + "px";
this.cB = calcCoord({ minTop: 20, maxTop: 40 }).top + "px";
this.cTs = calcCoord({ minTop: 20, maxTop: 30 }).top + "px"; // title fontsize
this.cTb = calcCoord({ minTop: 15, maxTop: 15 }).top + "px"; // title bottom
this.cCs = calcCoord({ minTop: 10, maxTop: 20 }).top + "px"; // content
} else {
this.topHeiht = this.topHeiht / 75 + "rem";
this.cL = calcCoord({ minTop: 47, maxTop: 51 }).top / 75 + "rem";
this.cT = calcCoord({ minTop: 47, maxTop: 67 }).top / 75 + "rem";
this.cB = calcCoord({ minTop: 40, maxTop: 80 }).top / 75 + "rem";
this.cTs = calcCoord({ minTop: 40, maxTop: 60 }).top / 75 + "rem"; // title fontsize
this.cTb = calcCoord({ minTop: 30, maxTop: 30 }).top / 75 + "rem"; // title bottom
this.cCs = calcCoord({ minTop: 20, maxTop: 40 }).top / 75 + "rem"; // content
}
},
mounted() {
this.$nextTick(() => {
new DevicePixelRatio().init();
});
window.onresize = () => {
return (() => {})();
};
}
};
</script>
<style lang="scss" scoped>
.page {
background: #000;
display: flex;
justify-content: center;
height: 100%;
}
.pc {
min-height: calc(var(--vh, 1vh) * 100);
align-items: center;
.main_content {
width: 375px;
min-height: 667px;
background: url("../assets/images/gesture/massage-entry-fullbg.png")
no-repeat top center;
background-size: 100% 100%;
// background: #ffffff;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-bottom: 30px;
.global_box {
width: 31px;
position: absolute;
right: 9px;
top: 10px;
z-index: 10;
.global_img {
width: 100%;
}
.popup-box {
width: 70px;
height: 75px;
position: absolute;
right: -4.5px;
top: 36px;
padding-top: 6px;
box-sizing: border-box;
overflow: hidden;
border-radius: 6px;
.popup_bg {
position: absolute;
left: 0;
top: 0;
width: 70px;
}
.poup-item {
position: relative;
height: 22.5px;
font-size: 10px;
font-family: Source Han Sans SC;
font-weight: 500;
color: #303030;
line-height: 22.5px;
display: flex;
align-items: center;
justify-content: start;
cursor: pointer;
img {
width: 7px;
margin-left: 9.5px;
margin-right: 5.5px;
}
div {
width: 7px;
margin-left: 9.5px;
margin-right: 5.5px;
}
&.active {
color: #f68682;
}
}
}
}
.top {
position: relative;
width: 100%;
height: 480px;
// height: calc(var(--vh, 1vh) * 100);
// background-size: 100% 100%;
overflow: hidden;
.page_bg {
width: 100%;
position: absolute;
left: 0;
top: 0;
}
.page_title {
font-size: 21px;
font-family: Source Han Sans SC;
font-weight: bold;
color: #f68682;
line-height: 30px;
// -webkit-text-stroke: 1px #fff9fb;
// text-stroke: 1px #fff9fb;
width: 100%;
position: absolute;
left: 0;
top: 58px;
z-index: 2;
}
.picture-box {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: calc(var(--vh, 1vh) * 100);
.page_bg2 {
width: 100%;
position: absolute;
left: 0;
top: 50px;
}
.page_tips {
font-size: 12px;
color: #7d7c7a;
text-align: left;
word-wrap: break-word;
hyphens: auto;
&.page_tips_1 {
position: absolute;
top: 165px;
left: 50px;
width: 130px;
}
&.page_tips_2 {
position: absolute;
width: 215px;
left: 155px;
top: 356px;
}
&.page_tips_3 {
position: absolute;
width: 265px;
left: 55px;
top: 445px;
}
}
}
&.small {
.page_title {
top: 20px;
}
.page_bg2 {
width: 60%;
position: absolute;
left: 20%;
top: 30px;
}
.page_tips {
font-size: 10px;
&.page_tips_1 {
position: absolute;
top: 96px;
left: calc(20% + 27.4987px);
width: 130.0012px;
}
&.page_tips_2 {
position: absolute;
width: 215px;
left: calc(20% + 92px);
top: 212px;
}
&.page_tips_3 {
position: absolute;
width: 265px;
left: calc(20% + 30px);
top: 264px;
}
}
}
}
.bottom {
flex: 1;
width: 375px;
// height: 150px;
display: flex;
justify-content: center;
align-items: center;
// position: absolute;
// left: 0;
// bottom: 0;
.gesture_select_box {
.gesture_title {
font-size: 22px;
font-family: Source Han Sans SC;
font-weight: bold;
color: #f68682;
line-height: 30px;
width: 100%;
margin: 40px auto 9px auto;
}
.gesture_list_box {
width: 345px;
margin: 0 auto;
.gesture_item_box {
height: 168px;
padding-bottom: 12px;
border-radius: 12px;
position: relative;
overflow: hidden;
box-shadow: 0 -7px 21px rgba(176, 170, 163, 0.45);
margin-bottom: 14px;
color: #ffffff;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: end;
align-items: center;
cursor: pointer;
.img {
width: 100%;
height: 100%;
position: absolute;
left: 0;
bottom: 0;
}
.title {
font-size: 22px;
line-height: 30px;
position: relative;
font-weight: bold;
}
.sub_title {
font-size: 12px;
line-height: 20px;
position: relative;
}
}
}
}
.bottomBtn {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
.bottom-tips {
margin-top: 10px;
font-size: 12px;
color: #999999;
}
}
}
}
}
.mobile {
.main_content {
width: 10rem;
min-height: calc(var(--vh, 1vh) * 100);
background: url("../assets/images/gesture/massage-entry-fullbg.png")
no-repeat top center;
background-size: 100% 100%;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding-bottom: 0.8rem;
.global_box {
width: 0.8267rem;
position: absolute;
right: 0.24rem;
top: 0.1333rem;
z-index: 10;
.global_img {
width: 100%;
}
.popup-box {
width: 1.8667rem;
height: 2rem;
position: absolute;
right: -0.12rem;
top: 0.96rem;
padding-top: 0.16rem;
box-sizing: border-box;
overflow: hidden;
border-radius: 0.16rem;
.popup_bg {
position: absolute;
left: 0;
top: 0;
width: 1.8667rem;
}
.poup-item {
position: relative;
height: 0.6rem;
font-size: 0.2667rem;
font-family: Source Han Sans SC;
font-weight: 500;
color: #303030;
line-height: 0.6rem;
display: flex;
align-items: center;
justify-content: start;
cursor: pointer;
img {
width: 0.1867rem;
margin-left: 0.2533rem;
margin-right: 0.1467rem;
}
div {
width: 0.1867rem;
margin-left: 0.2533rem;
margin-right: 0.1467rem;
}
&.active {
color: #f68682;
}
}
}
}
.top {
position: relative;
width: 100%;
height: 12.8rem;
overflow: hidden;
.page_bg {
width: 100%;
position: absolute;
left: 0;
top: 0;
}
.page_title {
font-size: 0.56rem;
font-family: Source Han Sans SC;
font-weight: bold;
color: #f68682;
line-height: 0.8rem;
// -webkit-text-stroke: 0.0267rem #fff9fb;
// text-stroke: 0.0267rem #fff9fb;
width: 100%;
position: absolute;
left: 0;
top: 1.5467rem;
z-index: 2;
}
.picture-box {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: calc(var(--vh, 1vh) * 100);
.page_bg2 {
width: 100%;
position: absolute;
left: 0;
top: 1.3333rem;
}
.page_tips {
font-size: 0.2933rem;
color: #7d7c7a;
text-align: left;
font-weight: bold;
white-space: pre-line;
&.page_tips_1 {
position: absolute;
top: 4.4rem;
left: 1.3333rem;
width: 3.4667rem;
}
&.page_tips_2 {
position: absolute;
width: 5.7333rem;
left: 4.1333rem;
top: 9.4933rem;
}
&.page_tips_3 {
position: absolute;
width: 7.0667rem;
left: 1.4667rem;
top: 11.8667rem;
}
}
}
&.small {
.page_bg2 {
width: 80%;
position: absolute;
left: 10%;
top: 0.8rem;
}
.page_tips {
font-size: 0.2667rem;
&.page_tips_1 {
position: absolute;
top: 3.3067rem;
left: calc(10% + 1.0667rem);
width: 3.4667rem;
}
&.page_tips_2 {
position: absolute;
width: 5.7333rem;
left: calc(10% + 3.2rem);
top: 7.36rem;
}
&.page_tips_3 {
position: absolute;
width: 7.0667rem;
left: calc(10% + 1.0667rem);
top: 9.28rem;
}
}
}
}
.bottom {
flex: 1;
width: 10rem;
// height: 4rem;
display: flex;
justify-content: center;
align-items: center;
// position: absolute;
// left: 0;
// bottom: 0;
.gesture_select_box {
.gesture_title {
font-size: 0.5867rem;
font-family: Source Han Sans SC;
font-weight: bold;
color: #f68682;
line-height: 0.8rem;
width: 100%;
margin: 1.0667rem auto 0.24rem auto;
}
.gesture_list_box {
width: 9.2rem;
margin: 0 auto;
.gesture_item_box {
height: 4.48rem;
padding-bottom: 0.32rem;
border-radius: 0.32rem;
position: relative;
overflow: hidden;
box-shadow: 0 -0.1867rem 0.56rem rgba(176, 170, 163, 0.45);
margin-bottom: 0.3733rem;
color: #ffffff;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: end;
align-items: center;
cursor: pointer;
.img {
width: 100%;
height: 100%;
position: absolute;
left: 0;
bottom: 0;
}
.title {
font-size: 0.5867rem;
line-height: 0.8rem;
position: relative;
font-weight: bold;
}
.sub_title {
font-size: 0.32rem;
line-height: 0.5333rem;
position: relative;
}
}
}
}
.bottomBtn {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
.bottom-tips {
margin-top: 0.2667rem;
font-size: 0.32rem;
color: #999999;
}
}
}
&.big {
.top {
flex: none;
}
.bottom {
max-height: none;
}
}
}
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment