Skip to content

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

初始化BFC demo

parents
Pipeline #264 canceled with stages
      Show whitespace changes
      Inline Side-by-side
      Showing with 1971 additions and 0 deletions
      .gitignore 0 → 100644
      View file @ 30abb7cf
      # Logs
      logs
      *.log
      npm-debug.log*
      yarn-debug.log*
      yarn-error.log*
      pnpm-debug.log*
      lerna-debug.log*
      node_modules
      dist
      dist-ssr
      *.local
      # Editor directories and files
      .vscode/*
      !.vscode/extensions.json
      .idea
      .DS_Store
      *.suo
      *.ntvs*
      *.njsproj
      *.sln
      *.sw?
      .vscode/extensions.json 0 → 100644
      View file @ 30abb7cf
      {
      "recommendations": ["Vue.volar"]
      }
      README.md 0 → 100644
      View file @ 30abb7cf
      # Vue 3 + Vite
      This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
      ## Recommended IDE Setup
      - [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
      config/index.js 0 → 100644
      View file @ 30abb7cf
      const path = require('path')
      module.exports = {
      /**
      * 在生产中服务时的基本公共路径。
      * @default '/'
      */
      base: './',
      /**
      * 与“根”相关的目录
      * @default 'dist'
      */
      outDir: 'dist',
      port: 9528,
      // 是否自动在浏览器打开
      open: true,
      // 是否开启 https
      https: false,
      // 服务端渲染
      ssr: false,
      // 引入第三方的配置
      optimizeDeps: {
      include: ["axios"]
      },
      resolve: {
      alias: {
      '@': path.resolve(__dirname, '../src')
      },
      },
      proxy: {
      '/byte-sdk-api/': {
      target: 'https://bfai-service-uat.d-lab-services.danone.com', // 后端服务实际地址
      changeOrigin: true,
      rewrite: path => path.replace(/^\/ar/, '')
      }
      }
      };
      \ No newline at end of file
      index.html 0 → 100644
      View file @ 30abb7cf
      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
      <link rel="icon" href="/favicon.ico" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Breast Feeding AI Demo</title>
      </head>
      <body>
      <div id="app"></div>
      <script type="module" src="/src/main.js"></script>
      </body>
      </html>
      package-lock.json 0 → 100644
      View file @ 30abb7cf
      This source diff could not be displayed because it is too large. You can view the blob instead.
      package.json 0 → 100644
      View file @ 30abb7cf
      {
      "name": "breast-feeding-ai-demo",
      "private": true,
      "version": "0.0.0",
      "scripts": {
      "dev": "vite",
      "build": "vite build",
      "preview": "vite preview"
      },
      "dependencies": {
      "amfe-flexible": "^2.2.1",
      "autoprefixer": "^10.4.7",
      "axios": "^0.21.1",
      "vue": "^3.2.25",
      "vue-i18n": "^9.1.10",
      "vue-router": "^4.0.3"
      },
      "devDependencies": {
      "@vitejs/plugin-vue": "^2.3.3",
      "@vue/compiler-sfc": "^3.0.5",
      "postcss-pxtorem": "^6.0.0",
      "sass": "^1.34.0",
      "sass-loader": "^11.1.1",
      "vite": "^2.9.9",
      "vite-plugin-style-import": "^0.10.1"
      }
      }
      src/App.vue 0 → 100644
      View file @ 30abb7cf
      <template>
      <router-view></router-view>
      </template>
      <script>
      import { getCurrentInstance } from "vue";
      export default {
      name: "App",
      setup() {
      const { proxy } = getCurrentInstance();
      function change(type) {
      proxy.$i18n.locale = type;
      }
      return { change };
      },
      data() {
      return {};
      }
      };
      </script>
      <style rel="stylesheet/scss" lang="scss">
      // element-ui警告弹框对移动端优化
      @media screen and (max-width: 450px) {
      .el-message {
      min-width: 80%;
      }
      }
      </style>
      src/common/util.js 0 → 100644
      View file @ 30abb7cf
      export function calcAdapt() {
      const maxScale = 2.16
      const minScale = 1.78
      const dot = 2
      const { scale } = getSystemInfo()
      return {
      calcCoord: function ({ minTop, maxTop }, currentScale = scale) {
      if (!currentScale) return {
      top: maxTop
      }
      const s = +((currentScale - minScale) / (maxScale - minScale)).toFixed(dot)
      const top = (maxTop - minTop) * s + minTop
      return {
      top
      }
      },
      calc: function ({
      minWidth, minHeight, maxWidth, maxHeight
      }, currentScale = scale) {
      if (!currentScale) return
      // 1.78
      // 2.16
      let width, height;
      // (minWidth / maxWidth)
      // 比例因子
      const s = +((currentScale - minScale) / (maxScale - minScale)).toFixed(dot)
      width = (maxWidth - minWidth) * s + minWidth
      height = (maxHeight - minHeight) * s + minHeight
      return {
      width,
      height,
      }
      }
      }
      }
      export const isBigScreen = () => {
      let width = 0;
      let height = 0;
      if (document.body.clientWidth > 750) {
      width = 750;
      height = document.body.clientHeight;
      } else {
      width = document.body.clientWidth;
      height = document.body.clientHeight;
      }
      if (height === 0) {
      height = window.innerHeight;
      }
      let scale = height / width;
      let k = +scale.toFixed(2);
      if (k >= 2.16) {
      k = 2.16;
      } else if (k <= 1.78) {
      k = 1.78;
      }
      if ((scale | 0) > 1) return true
      return false
      }
      export const getSystemInfo = () => {
      let width = 0;
      let height = 0;
      if (document.body.clientWidth > 750) {
      width = 750;
      } else {
      width = document.body.clientWidth;
      }
      height = document.body.clientHeight;
      if (height === 0) {
      height = window.innerHeight;
      }
      let scale = height / width;
      return {
      windowWidth: width,
      windowHeight: height,
      screenWidth: width,
      screenHeight: height,
      scale: scale
      }
      }
      export const authCamera = (lying) => {
      const that = this;
      return new Promise((resolve, reject) => {
      if (navigator.mediaDevices === undefined) {
      navigator.mediaDevices = {};
      }
      if (navigator.mediaDevices.getUserMedia === undefined) {
      navigator.mediaDevices.getUserMedia = function (constraints) {
      // 首先获取现存的getUserMedia(如果存在)
      let getUserMedia =
      navigator.webkitGetUserMedia ||
      navigator.mozGetUserMedia ||
      navigator.getUserMedia;
      if (!getUserMedia) {
      return Promise.reject(
      new Error("getUserMedia is not implemented in this browser")
      );
      }
      return new Promise(function (resolve, reject) {
      getUserMedia.call(navigator, constraints, resolve, reject);
      });
      };
      }
      const constraints = {
      audio: false,
      video: {
      transform: "scaleX(-1)"
      }
      };
      navigator.mediaDevices
      .getUserMedia(constraints)
      .then(function (stream) {
      resolve({ camera: 1, lying })
      })
      .catch(err => {
      console.log("没有开启摄像头权限或浏览器版本不兼容");
      console.log('获取用户授权信息失败')
      });
      })
      }
      \ No newline at end of file
      src/components/lightButton.vue 0 → 100644
      View file @ 30abb7cf
      <template>
      <div class="btn-container">
      <img class="btn-img" src="../assets/images/gesture/light-btn-bg.png" />
      <div class="btn-text light-button-text">{{text}}</div>
      <slot name="body"></slot>
      </div>
      </template>
      <script >
      import { defineProps, reactive } from "vue";
      // defineProps({
      // msg: String
      // });
      export default {
      data() {
      return {};
      },
      props: ["text"],
      methods: {
      confirm() {
      this.$emit("update:confirm", { type: "confirm" });
      },
      cancel() {
      this.$emit("update:confirm", { type: "cancel" });
      }
      }
      };
      </script>
      <style lang="scss" scoped>
      @media only screen and (min-width: 750px) {
      .btn-container {
      width: 436px;
      height: 77.7px;
      line-height: 77.7px;
      }
      .btn-text {
      width: 100%;
      text-align: center;
      font-size: 44px;
      letter-spacing: 0.2em;
      font-weight: bold;
      }
      .btn-img {
      width: 100%;
      height: 100%;
      }
      .btn-container {
      position: relative;
      color: #ffffff;
      img,
      div,
      button {
      position: absolute;
      left: 0;
      top: 0;
      }
      }
      .light-button-text {
      letter-spacing: 0.2em;
      }
      }
      @media screen and (max-width: 750px) {
      .btn-container {
      width: 5.8133rem;
      height: 1.036rem;
      line-height: 1.036rem;
      }
      .btn-text {
      width: 100%;
      text-align: center;
      font-size: 0.5867rem;
      letter-spacing: 0.2em;
      font-weight: bold;
      }
      .btn-img {
      width: 100%;
      height: 100%;
      }
      .btn-container {
      position: relative;
      color: #ffffff;
      img,
      div,
      button {
      position: absolute;
      left: 0;
      top: 0;
      }
      }
      .light-button-text {
      letter-spacing: 0.2em;
      }
      }
      </style>
      src/index.css 0 → 100644
      View file @ 30abb7cf
      #app {
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      }
      \ No newline at end of file
      src/lang/en.js 0 → 100644
      View file @ 30abb7cf
      export default {
      strings: {
      homeTitle: "Breastfeeding posture AI coach",
      homeText1: "Put your device on a stable surface",
      homeText2:
      'Keep one meter away from the camera, and fit your body into the guide line. Session starts in 5 seconds after you click "Start Now" button.',
      homeText3:
      "Camera permission is needed for AI coach. Your clothes will not affect the AI coach.",
      homeText4: "Cradle hold breastfeeding",
      homeText5: "常见哺乳姿势，宝宝自主寻乳，\r\n适合哺乳配合好的宝宝和妈妈。",
      homeButtonText: "Start Now",
      homeTips:
      "Your images and videos will only be used for AI coach recognition. They will not be stored.",
      completeText: "Congratulations! You have completed the session!",
      cameraText: "Camera not detected. Try again?",
      cameraButtonText: "Try Again",
      }
      }
      src/lang/es.js 0 → 100644
      View file @ 30abb7cf
      export default {
      strings: {
      homeTitle : "Asistente de IA de postura de lactancia",
      homeText1 : "Coloque su dispositivo en una superficie estable",
      homeText2 :
      'Manténgase a un metro de distancia de la cámara y coloque su cuerpo en la línea. La sesión comienza en 5 segundos después de hacer clic en el botón "Comenzar ahora".',
      homeText3 :
      "Se necesita permiso para acceder a la cámara para el asistente de IA. Su ropa no afectará al asistente de IA.",
      homeText4 : "Lactancia en posición de cuna (acunando)",
      homeText5 : "常见哺乳姿势，宝宝自主寻乳，\r\n适合哺乳配合好的宝宝和妈妈。",
      homeButtonText : "Empezar ahora",
      homeTips :
      "Sus imágenes y videos solo se utilizarán para el reconocimiento del asistente de IA. No se almacenarán.",
      completeText : "¡Felicidades! ¡Has completado la sesión!",
      cameraText : "Cámara no detectada. ¿Volver a Intentar otra vez?",
      cameraButtonText : "Intentar otra vez",
      }
      }
      src/lang/fr.js 0 → 100644
      View file @ 30abb7cf
      export default {
      strings: {
      homeTitle : "Coach IA en posture d'allaitement",
      homeText1 : "Placez votre appareil sur une surface stable",
      homeText2 :
      'Tenez-vous à un mètre de la caméra et placez votre corps dans la ligne de guidage. La session démarre dans 5 secondes après avoir cliqué sur le bouton "Démarrer maintenant".',
      homeText3 :
      "L'autorisation de la caméra est nécessaire pour l'entraîneur AI. Vos vêtements n'affecteront pas l'entraîneur AI.",
      homeText4 : "Berceau d'allaitement",
      homeText5 : "常见哺乳姿势，宝宝自主寻乳，\r\n适合哺乳配合好的宝宝和妈妈。",
      homeButtonText : "Commencez maintenant",
      homeTips :
      "Vos images et vidéos ne seront utilisées que pour la reconnaissance des coachs IA. Elles ne seront pas stockés.",
      completeText :
      "Toutes nos félicitations! Vous avez terminé la session !",
      cameraText : "Caméra non détectée. Réessayer?",
      cameraButtonText : "Réessayer",
      }
      }
      src/lang/i18n.js 0 → 100644
      View file @ 30abb7cf
      import { createI18n } from 'vue-i18n' //引入vue-i18n组件
      import messages from './index'
      const language = (
      (navigator.language ? navigator.language : navigator.userLanguage) || "zh"
      ).toLowerCase();
      const i18n = createI18n({
      fallbackLocale: 'zh',
      globalInjection:true,
      legacy: false, // you must specify 'legacy: false' option
      locale: language.split("-")[0] || "zh",
      messages,
      });
      export default i18n
      src/lang/index.js 0 → 100644
      View file @ 30abb7cf
      import en from './en'
      import zh from './zh'
      import es from './es'
      import fr from './fr'
      import pl from './pl'
      export default {
      en,
      zh,
      es,
      fr,
      pl
      }
      src/lang/pl.js 0 → 100644
      View file @ 30abb7cf
      export default {
      strings: {
      homeTitle: "AI哺乳姿势矫正",
      homeText1: "调整手机角度并摆放平稳，您可以使用手机支架",
      homeText2: "请与屏幕保持1米距离\n直到把身体摆入框中。\n点击立即开始您有5秒钟的准备时间。",
      homeText3: "本教学需要您授权使用摄像头\n请在安全环境安全设备使用本功能\n请您放心，穿着衣物不会影响AI识别。",
      homeText4: "摇篮式哺乳",
      homeText5: "常见哺乳姿势，宝宝自主寻乳，\r\n适合哺乳配合好的宝宝和妈妈。",
      homeButtonText: "立即开始",
      homeTips: "在使用过程中，我们不会存储您的图像。",
      completeText: "恭喜你！完成了本次教学~",
      cameraText: "未识别到您的摄像头，是否重新识别？",
      cameraButtonText: "立即重识",
      }
      }
      src/lang/zh.js 0 → 100644
      View file @ 30abb7cf
      export default {
      strings: {
      homeTitle: "AI哺乳姿势矫正",
      homeText1: "调整手机角度并摆放平稳，您可以使用手机支架",
      homeText2: "请与屏幕保持1米距离\n直到把身体摆入框中。\n点击立即开始您有5秒钟的准备时间。",
      homeText3: "本教学需要您授权使用摄像头\n请在安全环境安全设备使用本功能\n请您放心，穿着衣物不会影响AI识别。",
      homeText4: "摇篮式哺乳",
      homeText5: "常见哺乳姿势，宝宝自主寻乳，\n适合哺乳配合好的宝宝和妈妈。",
      homeButtonText: "立即开始",
      homeTips: "在使用过程中，我们不会存储您的图像。",
      completeText: "恭喜你！完成了本次教学~",
      cameraText: "未识别到您的摄像头，是否重新识别？",
      cameraButtonText: "立即重识",
      }
      }
      \ No newline at end of file
      src/main.js 0 → 100644
      View file @ 30abb7cf
      import { createApp } from 'vue'
      import App from './App.vue'
      import './index.css'
      import './styles/index.scss' // global css
      import router from './router'
      import 'amfe-flexible'
      import i18n from './lang/i18n.js'
      const app = createApp(App); // 挂载
      import axios from 'axios';
      // axios.defaults.baseURL = config.api_url; // 设置了主域名则接口就不需要+了
      axios.defaults.withCredentials = false; // 跨域设置，false忽略跨域cookies（Access-Control-Allow-Headers:*）
      app.use(router)
      app.use(i18n)
      app.mount('#app')
      src/router/index.js 0 → 100644
      View file @ 30abb7cf
      import {
      createRouter,
      createWebHistory,
      createWebHashHistory
      } from 'vue-router'
      // 开启历史模式
      // vue2中使用 mode: history 实现
      // const routerHistory = createWebHistory("/sdk/");
      const routerHashHistory = createWebHashHistory()
      const router = createRouter({
      history: routerHashHistory,
      routes: [{
      path: '/',
      component: () => import('../views/index.vue')
      },
      {
      path: '/complete',
      component: () => import('../views/complete.vue')
      }
      ]
      })
      export default router
      \ No newline at end of file
      src/styles/index.scss 0 → 100644
      View file @ 30abb7cf
      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;
      }
      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;
      }
      }
      //main-container全局样式
      .app-main {
      min-height: 100%
      }
      .app-container {
      padding: 20px;
      }
      \ No newline at end of file
      src/views/complete.vue 0 → 100644
      View file @ 30abb7cf
      <template>
      <div class="page">
      <div class="main_content">
      <img class="page-bg" src="../assets/images/gesture/massage-entry-fullbg.png" alt srcset />
      <div class="massage-complete-modal" :class="{'noBaby':finalBabyStatus == 3 || finalBabyStatus == -1}">
      <div class="nickname">
      Hey,
      <span>{{nikeName}}</span>
      </div>
      <div class="title">
      <!-- <image src="{{images.title}}"></image> -->
      <img class="icon" src="../assets/images/gesture/massage-complete-title-icon.png" />
      {{$t('strings.completeText')}}
      </div>
      <div class="record" v-if="finalBabyStatus != 3 && finalBabyStatus != -1">
      <div>您已记录: {{time}}</div>
      </div>
      </div>
      </div>
      </div>
      </template>
      <script>
      import { calcAdapt } from "../common/util";
      let calcs = calcAdapt();
      let scale;
      const calcCoord = function () {
      let width = 0;
      let height = 0;
      if (document.body.clientWidth > 750) {
      width = 750;
      height = document.body.clientHeight;
      } else {
      width = document.body.clientWidth;
      height = document.body.clientHeight;
      }
      if (height === 0) {
      height = window.innerHeight;
      }
      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 {
      nikeName: "William",
      finalBabyStatus: 0,
      lying: 0,
      time: 0,
      total: 0,
      modalCalc: {
      top: ""
      }
      };
      },
      methods: {
      },
      created() {
      let finalBabyStatus = this.$route.query.finalBabyStatus;
      let lying = this.$route.query.lying;
      let time = this.$route.query.time;
      let total = this.$route.query.time;
      this.finalBabyStatus = finalBabyStatus;
      this.lying = lying;
      this.time = time;
      this.total = total;
      },
      mounted() {}
      };
      </script>
      <style lang="scss" scoped>
      .page {
      background: #000;
      display: flex;
      justify-content: center;
      height: 100vh;
      }
      @media only screen and (min-width: 750px) {
      .page {
      .main_content {
      width: 750px;
      height: 100%;
      background: #ffffff;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      .page-bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 750px;
      z-index: 0;
      }
      }
      .massage-complete-modal {
      box-sizing: border-box;
      width: 660px;
      height: 620px;
      padding: 80px 0 125px;
      background: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      border-radius: 14px 14px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
      &.noBaby {
      height: 420px;
      }
      .nickname {
      font-size: 46px;
      color: #fb7c76;
      font-family: "Gotham-Book";
      text-shadow: 2px 2px 4px #ffffff;
      span {
      font-size: 60px;
      }
      }
      .title {
      height: 53px;
      margin-top: 41px;
      color: #fb7c76;
      font-size: 46px;
      font-weight: bolder;
      .icon {
      width: 69px;
      height: 45px;
      }
      }
      .subTitle {
      width: 100%;
      text-align: center;
      color: #fb7c76;
      font-size: 26px;
      margin-top: 20px;
      font-weight: bolder;
      &.underline {
      text-decoration: underline;
      }
      }
      .record {
      margin-top: 100px;
      margin-bottom: 100px;
      width: 559px;
      height: 96px;
      line-height: 96px;
      border-radius: 48px 48px;
      font-size: 34.67px;
      color: #999999;
      background-color: #f5f5f5;
      text-align: center;
      text-shadow: 2px 2px 4px #ffffff;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      }
      }
      }
      }
      @media screen and (max-width: 750px) {
      .page {
      .main_content {
      }
      }
      }
      </style>
      \ No newline at end of file
      src/views/index.vue 0 → 100644
      View file @ 30abb7cf
      <template>
      <div class="page">
      <div class="main_content">
      <div class="top" :class="{'small':!isBig}" :style="{'height':topHeiht}">
      <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="info" :style="{'marginTop':cT,'marginLeft':cL, 'marginRight':cL, 'marginBottom':cT}">
      <div class="title" :style="{'margin-bottom':cTb}">{{$t('strings.homeText4')}}</div>
      <div class="content">
      <div class="item"></div>
      </div>
      </div>
      <div class="bottomBtn">
      <light-button @click="clickAuthCamera" :text="$t('strings.homeButtonText')"></light-button>
      <div class="bottom-tips">{{$t('strings.homeTips')}}</div>
      </div>
      </div>
      <div class="no_camera_dialog" v-if="showNoCameraDialog">
      <div class="no_camera_dialog_mask"></div>
      <div class="no_camera_dialog_content">
      <div class="no_camera_dialog_title">{{$t('strings.cameraText')}}</div>
      <div class="no_camera_dialog_button" @click="clickAuthCamera">
      <img class="no_camera_dialog_button_bg" src="../assets/images/gesture/light-btn-bg.png" alt srcset />
      <div class="no_camera_dialog_button_text">{{$t('strings.cameraButtonText')}}</div>
      </div>
      </div>
      </div>
      </div>
      </div>
      </template>
      <script>
      import { calcAdapt, isBigScreen, authCamera } from "../common/util";
      import lightButton from "../components/lightButton.vue";
      let calcs = calcAdapt();
      let scale;
      const calcCoord = function () {
      let width = 0;
      let height = 0;
      if (document.body.clientWidth > 750) {
      width = 750;
      height = document.body.clientHeight;
      } else {
      width = document.body.clientWidth;
      height = document.body.clientHeight;
      }
      if (height === 0) {
      height = window.innerHeight;
      }
      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(),
      scale: scale,
      currentLanguage: 0,
      showPopup: false,
      languageList: ["English", "Français", "Español"],
      cL: calcCoord({ minTop: 47, maxTop: 51 }).top + "px",
      cT: calcCoord({ minTop: 47, maxTop: 67 }).top + "px",
      cB: calcCoord({ minTop: 40, maxTop: 80 }).top + "px",
      cTs: calcCoord({ minTop: 40, maxTop: 60 }).top + "px", // title fontsize
      cTb: calcCoord({ minTop: 30, maxTop: 30 }).top + "px", // title bottom
      cCs: calcCoord({ minTop: 20, maxTop: 40 }).top + "px" // content
      };
      },
      components: {
      lightButton
      },
      methods: {
      clickGlobalPopup() {
      this.showPopup = !this.showPopup;
      },
      setLanguagePack() {
      let _languagePack = {
      tipsString: {
      initInitial: "请调整姿势",
      sittingUnrecognition: "未识别到宝宝，请根据屏幕上的宝宝贴纸模拟动作",
      sittingBabyneckloc: "请用肘关节支撑宝宝颈部",
      sittingBabyhead: "请勿用手掌固定宝宝头部",
      sittingBabybackloc: "请将前臂顺着宝宝背部",
      sittingUpleft: "请抬高左手臂",
      sittingUpright: "请抬高右手臂",
      sittingDownleft: "请放低左手臂",
      sittingDownright: "请放低右手臂",
      sittingHeadupassdown: "请保持宝宝头部高于臀部",
      sittingBabystright: "请保持宝宝耳肩臀在同一直线",
      sittingBabyheadloc: "请确保宝宝头部正对妈妈乳房，不宜过高",
      nobabysittingBabyneckloc: "实际哺乳时，请注意用肘关节支撑宝宝颈部",
      nobabysittingHeadupassdown: "实际哺乳时，请注意用肘关节支撑宝宝颈部",
      nobabysittingBabystright: "实际哺乳时，请保持宝宝耳肩臀一条直线",
      /// 坐姿建议
      sittingSuggest: [
      "请采用舒适姿势，确保与宝宝始终胸腹相贴",
      "宝宝嘴巴尽量包裹住乳晕",
      "使宝宝下巴紧贴乳房，张嘴角度大于100度",
      "随时点击右上角指导图示调整含乳姿势",
      "放松肩膀",
      "妈妈抱宝宝的手，腰部和脚有支撑",
      "保持放松，直到哺乳结束"
      ]
      },
      commonmemsg: {
      initialMassage:
      "请与屏幕保持1米左右距离使身体进入轮廓线，5秒后开始识别",
      slogan: "疼痛少一分，自在喂养多一分"
      },
      sittingMsg: {
      babyneckloc: "请用肘关节支撑宝宝颈部",
      babyhead: "请勿用手掌固定宝宝头部",
      babybackloc: "请将前臂顺着宝宝背部",
      upleft: "请抬高左手臂",
      upright: "请抬高右手臂",
      downleft: "请放低左手臂",
      downright: "请放低右手臂",
      headupassdown: "请保持宝宝头部高于臀部",
      babystright: "请保持宝宝耳肩臀在同一直线",
      babyheadloc: "请确保宝宝头部正对妈妈乳房，不宜过高"
      },
      sittingMsgPart: {
      babyneckloc: "请用肘关节支撑宝宝颈部",
      babyhead: "请勿用手掌固定宝宝头部",
      babybackloc: "请将前臂顺着宝宝背部",
      headupassdown: "请保持宝宝头部高于臀部",
      babystright: "请保持宝宝耳肩臀在同一直线",
      babyheadloc: "请确保宝宝头部正对妈妈乳房，不宜过高"
      },
      successmsg: {
      recordMessage: "现在可以开始哺乳了！3秒后将自动开始计时",
      nobabyRecord: "您已掌握喂养姿势，期待您和宝宝一起来体验哺乳计时功能",
      suggest: "请及时点击右上角指导图示调整",
      posSuccess: "您的姿势正确，请继续保持"
      },
      strings: {
      suggestTitle: "在开始哺乳的时候可以保持:",
      suggestText1:
      "1.在哺乳过程中，应采用妈妈和宝宝都舒适的姿势，确保与宝宝始终胸腹相贴。",
      suggestText2:
      "2.请让宝宝嘴巴尽量包裹住乳晕，下巴紧贴乳房，张嘴角度大于100度。",
      suggestText3: "3.若感到乳头疼痛，请及时点击右上角知道/详解图示调整。",
      suggestText4: "4.请放松肩膀，用垫子或枕头支撑抱宝宝的手，腰部和脚。",
      suggestText5: "5.全程请保持放松，愉悦的状态，直到宝宝主动吐出乳头。",
      suggestConfirmText: "知道了",
      suggestText6:
      "1.在哺乳过程中，请时刻避免乳房闷到宝宝，不要挤压胸部释放空间，应使宝宝臀部紧贴妈妈腹部，自然留有空隙。",
      suggestText7:
      "2.妈妈可在头部下方垫上垫子用以支撑，但位置不宜过高。在背部放上靠垫支撑腰部，保持腿部放松，自然屈曲，也可在两膝关节间放置垫子缓解压力。",
      discardReasonTitle: "放弃的原因是...",
      discardReason1: "不知道怎么用",
      discardReason2: "担心我的个人隐私",
      discardReason3: "觉得没有用处",
      literature:
      "[1]Fernandez L, Cardenas N, Arroyo R, et al. Prevention of infectious mastitis by oral administration of Lactobacillus salivarius PS2 during late pregnancy [J]. Clinical Infectious Diseases, 2016, 62 (5): 568-73.",
      mainTipsText:
      "请在安全环境安全设备使用本功能。在使用过程中，我们不会存储您的图像。",
      guidance: "指导",
      recordText: '正在进行哺乳计时，当喂养结束后请点击"结束哺乳"按钮',
      noCameraText1: "您已关闭摄像头",
      noCameraText2: "哺乳计时将会继续",
      noCameraEndText: "结束哺乳",
      briefSummaryTitleFront: "恭喜您在",
      briefSummaryTitleAfter: "秒内完成了本次姿势矫正",
      briefSummaryText1: "您在AI的帮助下掌握了",
      briefSummaryText2: "摇篮式姿势要点",
      sitMainPointsText1: "婴儿头高臀低，妈妈能看到婴儿的表情",
      sitMainPointsText2: "妈妈和婴儿应该腹胸相贴",
      sitMainPointsText3: "婴儿的头枕于妈妈手肘处，不要用手固定婴儿头部",
      sitMainPointsText4: "婴儿的耳、肩、臀成一条直线",
      sitMainPointsConfirmText: "好 的",
      momLeft: "当未检测到您,将自动停止计时后续流程,停留5s后跳转至结束页面"
      }
      };
      let _englishLanguagePack = {
      tipsString: {
      initInitial: "Please adjust your posture",
      sittingUnrecognition:
      "No baby detected. Please follow the on-screen instructions",
      sittingBabyneckloc: "Make sure baby's neck is on your elbow",
      sittingBabyhead: "Do not restrict baby's head with your hands",
      sittingBabybackloc:
      "Make sure your forearm is supporting baby's back",
      sittingUpleft: "Raise your left arm",
      sittingUpright: "Raise your right arm",
      sittingDownleft: "Lower your left arm",
      sittingDownright: "Lower your right arm",
      sittingHeadupassdown:
      "Keep baby's head in higher position than the rest of the body",
      sittingBabystright:
      "Keep baby's ear, shoulder and butt at the same level",
      sittingBabyheadloc:
      "Make sure baby is facing the breast at proper height",
      nobabysittingBabyneckloc:
      "During actual breastfeeding, make sure baby's neck is on your elbow",
      nobabysittingHeadupassdown:
      "When actually breastfeeding, please pay attention to supporting the baby's neck with elbow joint",
      nobabysittingBabystright:
      "When actually breastfeeding, please keep your baby's ears, shoulders and hips in a straight line",
      /// 坐姿建议
      sittingSuggest: [
      "Adjust to a comfortable posture, and keep baby very close to you at all times",
      "Make sure baby is latched properly (mouth should fully cover the nipple and areola)",
      "Keep baby's chin close to your breast, and mouth fully covering the nipple and areola",
      "Tap top right icon to view more info",
      "Relax your shoulder",
      "There should be support to your hand, waist and feet when holding baby",
      "Keep relaxed until the end of session"
      ]
      },
      commonmemsg: {
      initialMassage:
      "Keep one meter away from the camera, and fit your body into the guide line. Session starts in 5 seconds…",
      slogan: "疼痛少一分，自在喂养多一分"
      },
      sittingMsg: {
      babyneckloc: "请用肘关节支撑宝宝颈部",
      babyhead: "请勿用手掌固定宝宝头部",
      babybackloc: "请将前臂顺着宝宝背部",
      upleft: "请抬高左手臂",
      upright: "请抬高右手臂",
      downleft: "请放低左手臂",
      downright: "请放低右手臂",
      headupassdown: "请保持宝宝头部高于臀部",
      babystright: "请保持宝宝耳肩臀在同一直线",
      babyheadloc: "请确保宝宝头部正对妈妈乳房，不宜过高"
      },
      sittingMsgPart: {
      babyneckloc: "请用肘关节支撑宝宝颈部",
      babyhead: "请勿用手掌固定宝宝头部",
      babybackloc: "请将前臂顺着宝宝背部",
      headupassdown: "请保持宝宝头部高于臀部",
      babystright: "请保持宝宝耳肩臀在同一直线",
      babyheadloc: "请确保宝宝头部正对妈妈乳房，不宜过高"
      },
      successmsg: {
      recordMessage:
      "You may start breastfeeding now! Timer starts in 3 seconds…",
      nobabyRecord:
      "You have learned the correct posture. You may try this AI coach with your baby next time.",
      suggest: "Tap top right icon to view more info",
      posSuccess: "Your posture is correct. Please keep it going."
      },
      strings: {
      suggestTitle: "在开始哺乳的时候可以保持:",
      suggestText1:
      "1.在哺乳过程中，应采用妈妈和宝宝都舒适的姿势，确保与宝宝始终胸腹相贴。",
      suggestText2:
      "2.请让宝宝嘴巴尽量包裹住乳晕，下巴紧贴乳房，张嘴角度大于100度。",
      suggestText3: "3.若感到乳头疼痛，请及时点击右上角知道/详解图示调整。",
      suggestText4: "4.请放松肩膀，用垫子或枕头支撑抱宝宝的手，腰部和脚。",
      suggestText5: "5.全程请保持放松，愉悦的状态，直到宝宝主动吐出乳头。",
      suggestConfirmText: "知道了",
      suggestText6:
      "1.在哺乳过程中，请时刻避免乳房闷到宝宝，不要挤压胸部释放空间，应使宝宝臀部紧贴妈妈腹部，自然留有空隙。",
      suggestText7:
      "2.妈妈可在头部下方垫上垫子用以支撑，但位置不宜过高。在背部放上靠垫支撑腰部，保持腿部放松，自然屈曲，也可在两膝关节间放置垫子缓解压力。",
      discardReasonTitle: "Reasons to give up…",
      discardReason1: "Not sure how to use it",
      discardReason2: "Concern about my personal privacy",
      discardReason3: "Do not think it is helpful",
      literature:
      "[1]Fernandez L, Cardenas N, Arroyo R, et al. Prevention of infectious mastitis by oral administration of Lactobacillus salivarius PS2 during late pregnancy [J]. Clinical Infectious Diseases, 2016, 62 (5): 568-73.",
      mainTipsText:
      "请在安全环境安全设备使用本功能。在使用过程中，我们不会存储您的图像。",
      guidance: "guide",
      recordText: '正在进行哺乳计时，当喂养结束后请点击"结束哺乳"按钮',
      noCameraText1: "您已关闭摄像头",
      noCameraText2: "哺乳计时将会继续",
      noCameraEndText: "结束哺乳",
      briefSummaryTitleFront:
      "Congratulations! You have completed the session in ",
      briefSummaryTitleAfter: " seconds",
      briefSummaryText1: "You have learned the",
      briefSummaryText2: "key points of cradle hold breastfeeding",
      sitMainPointsText1:
      "Keep baby's head in higher position so you can see baby's face",
      sitMainPointsText2: "Keep baby very close to you",
      sitMainPointsText3:
      "Keep baby's neck on your elbow, and do not restrict baby's head with your hand",
      sitMainPointsText4:
      "Keep baby's ear, shoulder and butt at the same level",
      sitMainPointsConfirmText: "OK",
      momLeft: "当未检测到您,将自动停止计时后续流程,停留5s后跳转至结束页面"
      }
      };
      let _frenchLanguagePack = {
      tipsString: {
      initInitial: "Veuillez ajuster votre posture",
      sittingUnrecognition:
      "Aucun bébé détecté. Veuillez suivre les instructions à l'écran",
      sittingBabyneckloc:
      "Assurez-vous que le cou de bébé est sur votre coude",
      sittingBabyhead: "Ne limitez pas la tête de bébé avec vos mains",
      sittingBabybackloc:
      "Assurez-vous que votre avant-bras soutient le dos de bébé",
      sittingUpleft: "Levez votre bras gauche",
      sittingUpright: "Levez votre bras droit",
      sittingDownleft: "Abaissez votre bras gauche",
      sittingDownright: "Abaissez votre bras droit",
      sittingHeadupassdown:
      "Gardez la tête de bébé en position plus haute que le reste du corps",
      sittingBabystright:
      "Gardez l'oreille, l'épaule et les fesses de bébé au même niveau",
      sittingBabyheadloc:
      "Assurez-vous que bébé est face au sein à la bonne hauteur",
      nobabysittingBabyneckloc:
      "Pendant l'allaitement, assurez-vous que le cou du bébé est sur votre coude",
      nobabysittingHeadupassdown:
      "Vous pouvez commencer à allaiter maintenant ! La minuterie démarre dans 3 secondes…",
      nobabysittingBabystright:
      "Pendant l'allaitement,gardez l'oreille, l'épaule et les fesses de bébé au même niveau",
      /// 坐姿建议
      sittingSuggest: [
      "Ajustez-vous à une posture confortable et gardez bébé très près de vous à tout moment",
      "Assurez-vous que le bébé prend correctement le sein (la bouche doit couvrir entièrement le mamelon et l'aréole)",
      "Gardez le menton de bébé près de votre sein, sa bouche couvrant entièrement le mamelon et l'aréole",
      "Appuyez sur l'icône en haut à droite pour afficher plus d'informations",
      "Détendez votre épaule",
      "Votre main, votre taille et vos pieds doivent être soutenus lorsque vous tenez bébé",
      "Restez détendu jusqu'à la fin de la séance"
      ]
      },
      commonmemsg: {
      initialMassage:
      "Tenez-vous à un mètre de la caméra et placez votre corps dans la ligne de guidage. La session démarre dans 5 secondes…",
      slogan: "疼痛少一分，自在喂养多一分"
      },
      sittingMsg: {
      babyneckloc: "Assurez-vous que le cou de bébé est sur votre coude",
      babyhead: "Ne limitez pas la tête de bébé avec vos mains",
      babybackloc:
      "Assurez-vous que votre avant-bras soutient le dos de bébé",
      upleft: "Levez votre bras gauche",
      upright: "Levez votre bras droit",
      downleft: "Abaissez votre bras gauche",
      downright: "Abaissez votre bras droit",
      headupassdown:
      "Gardez la tête de bébé en position plus haute que le reste du corps",
      babystright:
      "Gardez l'oreille, l'épaule et les fesses de bébé au même niveau",
      babyheadloc:
      "Assurez-vous que bébé est face au sein à la bonne hauteur"
      },
      sittingMsgPart: {
      babyneckloc: "Assurez-vous que le cou de bébé est sur votre coude",
      babyhead: "Ne limitez pas la tête de bébé avec vos mains",
      babybackloc:
      "Assurez-vous que votre avant-bras soutient le dos de bébé",
      headupassdown:
      "Gardez la tête de bébé en position plus haute que le reste du corps",
      babystright:
      "Gardez l'oreille, l'épaule et les fesses de bébé au même niveau",
      babyheadloc:
      "Assurez-vous que bébé est face au sein à la bonne hauteur"
      },
      successmsg: {
      recordMessage:
      "Vous pouvez commencer à allaiter maintenant ! La minuterie démarre dans 3 secondes…",
      nobabyRecord:
      "Vous avez appris la bonne posture. Vous pouvez essayer cet entraîneur AI avec votre bébé la prochaine fois.",
      suggest:
      "Appuyez sur l'icône en haut à droite pour afficher plus d'informations",
      posSuccess: "Votre posture est correcte. Vous pouvez continuer."
      },
      strings: {
      suggestTitle: "在开始哺乳的时候可以保持:",
      suggestText1:
      "1.在哺乳过程中，应采用妈妈和宝宝都舒适的姿势，确保与宝宝始终胸腹相贴。",
      suggestText2:
      "2.请让宝宝嘴巴尽量包裹住乳晕，下巴紧贴乳房，张嘴角度大于100度。",
      suggestText3: "3.若感到乳头疼痛，请及时点击右上角知道/详解图示调整。",
      suggestText4: "4.请放松肩膀，用垫子或枕头支撑抱宝宝的手，腰部和脚。",
      suggestText5: "5.全程请保持放松，愉悦的状态，直到宝宝主动吐出乳头。",
      suggestConfirmText: "知道了",
      suggestText6:
      "1.在哺乳过程中，请时刻避免乳房闷到宝宝，不要挤压胸部释放空间，应使宝宝臀部紧贴妈妈腹部，自然留有空隙。",
      suggestText7:
      "2.妈妈可在头部下方垫上垫子用以支撑，但位置不宜过高。在背部放上靠垫支撑腰部，保持腿部放松，自然屈曲，也可在两膝关节间放置垫子缓解压力。",
      discardReasonTitle: "Raisons d'abandonner…",
      discardReason1: "Je ne sais pas comment l'utiliser",
      discardReason2: "Inquiétude pour ma vie privée",
      discardReason3: "Je ne pense pas que c'est utile",
      literature:
      "[1]Fernandez L, Cardenas N, Arroyo R, et al. Prevention of infectious mastitis by oral administration of Lactobacillus salivarius PS2 during late pregnancy [J]. Clinical Infectious Diseases, 2016, 62 (5): 568-73.",
      mainTipsText:
      "请在安全环境安全设备使用本功能。Vos images et vidéos ne seront utilisées que pour la reconnaissance des coachs IA. Elles ne seront pas stockés.",
      guidance: "指导",
      recordText: '正在进行哺乳计时，当喂养结束后请点击"结束哺乳"按钮',
      noCameraText1: "您已关闭摄像头",
      noCameraText2: "哺乳计时将会继续",
      noCameraEndText: "结束哺乳",
      briefSummaryTitleFront: "Toutes nos félicitations!",
      briefSummaryTitleAfter: " Vous avez terminé la session !",
      briefSummaryText1: "您在AI的帮助下掌握了",
      briefSummaryText2: "摇篮式姿势要点",
      sitMainPointsText1:
      "Gardez la tête de bébé en position haute pour que vous puissiez voir le visage de bébé",
      sitMainPointsText2: "Gardez bébé très près de vous",
      sitMainPointsText3:
      "Gardez le cou de bébé sur votre coude et ne limitez pas la tête de bébé avec votre main",
      sitMainPointsText4:
      "Gardez le cou de bébé sur votre coude et ne limitez pas la tête de bébé avec votre main",
      sitMainPointsConfirmText: "OK",
      momLeft: "当未检测到您,将自动停止计时后续流程,停留5s后跳转至结束页面"
      }
      };
      let _spanishLanguagePack = {
      tipsString: {
      initInitial: "Por favor, ajuste su postura",
      sittingUnrecognition:
      "Ningún bebé detectado. Siga las instrucciones mostradas en pantalla",
      sittingBabyneckloc:
      "Asegúrese de que el cuello del bebé esté sobre su codo.",
      sittingBabyhead: "No restrinja la cabeza del bebé con las manos.",
      sittingBabybackloc:
      "Asegúrese de que su antebrazo esté sosteniendo la espalda del bebé.",
      sittingUpleft: "Levante su brazo izquierdo",
      sittingUpright: "Levante su brazo derecho",
      sittingDownleft: "Baje su brazo izquierdo",
      sittingDownright: "Baje su brazo derecho",
      sittingHeadupassdown:
      "Mantenga la cabeza del bebé en una posición más alta que el resto del cuerpo.",
      sittingBabystright:
      "Mantenga la oreja, el hombro y el trasero del bebé al mismo nivel",
      sittingBabyheadloc:
      "Asegúrese de que el bebé esté frente al pecho a la altura adecuada",
      nobabysittingBabyneckloc:
      "Durante la lactancia real, asegúrese de que el cuello del bebé esté sobre su codo.",
      nobabysittingHeadupassdown:
      "¡Puede comenzar a darle el pecho ahora! El temporizador comienza en 3 segundos...",
      nobabysittingBabystright:
      "Durante la lactancia real,mantenga la oreja, el hombro y el trasero del bebé al mismo nivel",
      /// 坐姿建议
      sittingSuggest: [
      "Tome una postura cómoda y mantén al bebé muy cerca de usted en todo momento.",
      "Asegúrese de que el bebé esté bien sujeto (la boca debe cubrir completamente el pezón y la areola)",
      "Mantenga la barbilla del bebé cerca de su seno y la boca cubriendo completamente el pezón y la areola.",
      "Toque el icono superior derecho para ver más información",
      "Relaje su hombro",
      "Debe haber apoyo en su mano, su cintura y sus pies al sostener al bebé.",
      "Manténgase relajada hasta el final de la sesión."
      ]
      },
      commonmemsg: {
      initialMassage:
      "Manténgase a un metro de distancia de la cámara y coloque su cuerpo en la línea. La sesión comienza en 5 segundos...",
      slogan: "疼痛少一分，自在喂养多一分"
      },
      sittingMsg: {
      babyneckloc:
      "Asegúrese de que el cuello del bebé esté sobre su codo.",
      babyhead: "No restrinja la cabeza del bebé con las manos.",
      babybackloc:
      "Asegúrese de que su antebrazo esté sosteniendo la espalda del bebé.",
      upleft: "Levante su brazo izquierdo",
      upright: "Levante su brazo derecho",
      downleft: "Baje su brazo izquierdo",
      downright: "Baje su brazo derecho",
      headupassdown:
      "Mantenga la cabeza del bebé en una posición más alta que el resto del cuerpo.",
      babystright:
      "Mantenga la oreja, el hombro y el trasero del bebé al mismo nivel",
      babyheadloc:
      "Asegúrese de que el bebé esté frente al pecho a la altura adecuada"
      },
      sittingMsgPart: {
      babyneckloc:
      "Asegúrese de que el cuello del bebé esté sobre su codo.",
      babyhead: "No restrinja la cabeza del bebé con las manos.",
      babybackloc:
      "Asegúrese de que su antebrazo esté sosteniendo la espalda del bebé.",
      headupassdown:
      "Mantenga la cabeza del bebé en una posición más alta que el resto del cuerpo.",
      babystright:
      "Mantenga la oreja, el hombro y el trasero del bebé al mismo nivel",
      babyheadloc:
      "Asegúrese de que el bebé esté frente al pecho a la altura adecuada"
      },
      successmsg: {
      recordMessage:
      "¡Puede comenzar a darle el pecho ahora! El temporizador comienza en 3 segundos...",
      nobabyRecord:
      "Ha aprendido la postura correcta. Puede probar este asistente de IA con su bebé la próxima vez.",
      suggest: "Toque el icono superior derecho para ver más información",
      posSuccess: "Su postura es correcta. Por favor, sigua así."
      },
      strings: {
      suggestTitle: "在开始哺乳的时候可以保持:",
      suggestText1:
      "1.在哺乳过程中，应采用妈妈和宝宝都舒适的姿势，确保与宝宝始终胸腹相贴。",
      suggestText2:
      "2.请让宝宝嘴巴尽量包裹住乳晕，下巴紧贴乳房，张嘴角度大于100度。",
      suggestText3: "3.若感到乳头疼痛，请及时点击右上角知道/详解图示调整。",
      suggestText4: "4.请放松肩膀，用垫子或枕头支撑抱宝宝的手，腰部和脚。",
      suggestText5: "5.全程请保持放松，愉悦的状态，直到宝宝主动吐出乳头。",
      suggestConfirmText: "知道了",
      suggestText6:
      "1.在哺乳过程中，请时刻避免乳房闷到宝宝，不要挤压胸部释放空间，应使宝宝臀部紧贴妈妈腹部，自然留有空隙。",
      suggestText7:
      "2.妈妈可在头部下方垫上垫子用以支撑，但位置不宜过高。在背部放上靠垫支撑腰部，保持腿部放松，自然屈曲，也可在两膝关节间放置垫子缓解压力。",
      discardReasonTitle: "Razones para rendirse...",
      discardReason1: "No estoy segura de cómo usarlo",
      discardReason2: "Preocupación por mi privacidad",
      discardReason3: "No creo que sea útil",
      literature:
      "[1]Fernandez L, Cardenas N, Arroyo R, et al. Prevention of infectious mastitis by oral administration of Lactobacillus salivarius PS2 during late pregnancy [J]. Clinical Infectious Diseases, 2016, 62 (5): 568-73.",
      mainTipsText:
      "请在安全环境安全设备使用本功能。Sus imágenes y videos solo se utilizarán para el reconocimiento del asistente de IA. No se almacenarán.",
      guidance: "指导",
      recordText: '正在进行哺乳计时，当喂养结束后请点击"结束哺乳"按钮',
      noCameraText1: "您已关闭摄像头",
      noCameraText2: "哺乳计时将会继续",
      noCameraEndText: "结束哺乳",
      briefSummaryTitleFront: "¡Felicidades!",
      briefSummaryTitleAfter: "Has completado la sesión en xx segundos",
      briefSummaryText1: "您在AI的帮助下掌握了",
      briefSummaryText2: "摇篮式姿势要点",
      sitMainPointsText1:
      "Mantenga la cabeza del bebé en una posición más alta para que pueda ver la cara del bebé",
      sitMainPointsText2: "Mantenga al bebé muy cerca de usted",
      sitMainPointsText3:
      "Mantenga el cuello del bebé sobre su codo y no restrinja la cabeza del bebé con su mano.",
      sitMainPointsText4:
      "Mantenga la oreja, el hombro y el trasero del bebé al mismo nivel",
      sitMainPointsConfirmText: "DE ACUERDO",
      momLeft: "当未检测到您,将自动停止计时后续流程,停留5s后跳转至结束页面"
      }
      };
      switch (this.currentLanguage) {
      case 0:
      localStorage.setItem(
      "languagePack",
      JSON.stringify(_englishLanguagePack)
      );
      break;
      case 1:
      localStorage.setItem(
      "languagePack",
      JSON.stringify(_frenchLanguagePack)
      );
      break;
      case 2:
      localStorage.setItem(
      "languagePack",
      JSON.stringify(_spanishLanguagePack)
      );
      break;
      // case 3:
      // _prefs.setString("languagePack", json.encode(_spanishLanguagePack));
      // break;
      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;
      },
      async clickAuthCamera() {
      this.setLanguagePack();
      if (this.showNoCameraDialog) {
      this.showNoCameraDialog = false;
      }
      let { camera } = await authCamera(0);
      if (camera) {
      localStorage.setItem("backUrl", "https://bfai-service-uat.d-lab-services.danone.com/demo/##/complete");
      window.location.href = "https://bfai-service-uat.d-lab-services.danone.com/sdk/#/?camera=1&lying=0";
      } else {
      this.showNoCameraDialog = true;
      }
      }
      },
      created() {
      this.topHeiht = calcCoord({ minTop: 618, maxTop: 1142.6 }).top;
      if (document.body.clientWidth > 750) {
      this.topHeiht = this.topHeiht + "px";
      this.cL = calcCoord({ minTop: 47, maxTop: 51 }).top + "px";
      this.cT = calcCoord({ minTop: 47, maxTop: 67 }).top + "px";
      this.cB = calcCoord({ minTop: 40, maxTop: 80 }).top + "px";
      this.cTs = calcCoord({ minTop: 40, maxTop: 60 }).top + "px"; // title fontsize
      this.cTb = calcCoord({ minTop: 30, maxTop: 30 }).top + "px"; // title bottom
      this.cCs = calcCoord({ minTop: 20, maxTop: 40 }).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() {}
      };
      </script>
      <style lang="scss" scoped>
      .page {
      background: #000;
      display: flex;
      justify-content: center;
      height: 100vh;
      }
      @media only screen and (min-width: 750px) {
      .page {
      .main_content {
      width: 750px;
      background: #ffffff;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .global_box {
      width: 62px;
      position: absolute;
      right: 18px;
      top: 62px;
      z-index: 10;
      .global_img {
      width: 100%;
      }
      .popup-box {
      width: 140px;
      height: 150px;
      position: absolute;
      right: -9px;
      top: 72px;
      padding-top: 12px;
      box-sizing: border-box;
      overflow: hidden;
      border-radius: 12px;
      .popup_bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 140px;
      }
      .poup-item {
      position: relative;
      height: 45px;
      font-size: 20px;
      font-family: Source Han Sans SC;
      font-weight: 500;
      color: #303030;
      line-height: 45px;
      display: flex;
      align-items: center;
      justify-content: start;
      cursor: pointer;
      img {
      width: 14px;
      margin-left: 19px;
      margin-right: 11px;
      }
      div {
      width: 14px;
      margin-left: 19px;
      margin-right: 11px;
      }
      &.active {
      color: #f68682;
      }
      }
      }
      }
      .top {
      position: relative;
      width: 100%;
      background: url("../assets/images/gesture/introduceBg.png") no-repeat
      top center;
      overflow: hidden;
      .page_bg {
      width: 100%;
      position: absolute;
      left: 0;
      top: 0;
      }
      .page_title {
      font-size: 53px;
      font-family: Source Han Sans SC;
      font-weight: bold;
      color: #f68682;
      line-height: 60px;
      -webkit-text-stroke: 2px #fff9fb;
      text-stroke: 2px #fff9fb;
      width: 100%;
      position: absolute;
      left: 0;
      top: 116px;
      z-index: 2;
      }
      .picture-box {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      .page_bg2 {
      width: 100%;
      position: absolute;
      left: 0;
      top: 100px;
      }
      .page_tips {
      font-size: 24px;
      color: #7d7c7a;
      text-align: left;
      font-weight: bold;
      white-space: pre-line;
      &.page_tips_1 {
      position: absolute;
      top: 330px;
      left: 100px;
      width: 260px;
      }
      &.page_tips_2 {
      position: absolute;
      width: 430px;
      left: 310px;
      top: 712px;
      }
      &.page_tips_3 {
      position: absolute;
      width: 530px;
      left: 110px;
      top: 890px;
      }
      }
      }
      &.small {
      .page_title {
      top: 40px;
      }
      .page_bg2 {
      width: 60%;
      position: absolute;
      left: 20%;
      top: 60px;
      }
      .page_tips {
      font-size: 20px;
      &.page_tips_1 {
      position: absolute;
      top: 192px;
      left: calc(20% + 55px);
      width: 260px;
      }
      &.page_tips_2 {
      position: absolute;
      width: 430px;
      left: calc(20% + 184px);
      top: 424px;
      }
      &.page_tips_3 {
      position: absolute;
      width: 530px;
      left: calc(20% + 60px);
      top: 528px;
      }
      }
      }
      }
      .bottom {
      flex: 1;
      width: 750px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      position: relative;
      .info {
      align-self: flex-start;
      color: #999;
      font-size: 29.6px;
      .title {
      color: #fb7c76;
      font-size: 44.5px;
      font-weight: bold;
      }
      .item {
      min-height: 44.5px;
      line-height: 44.6px;
      }
      }
      .bottomBtn {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: absolute;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
      .bottom-tips {
      margin-top: 20px;
      font-size: 24px;
      color: #999999;
      }
      }
      }
      .no_camera_dialog {
      position: fixed;
      left: 0;
      top: 0;
      width: 100vw;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      &_mask {
      position: absolute;
      left: 0;
      top: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.5);
      z-index: 0;
      }
      &_content {
      width: 593px;
      height: 496px;
      background: #ffffff;
      border-radius: 16px;
      z-index: 1;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-sizing: border-box;
      padding: 78px 0 97px 0;
      }
      &_title {
      font-size: 46px;
      line-height: 1.2;
      font-family: Source Han Sans SC;
      font-weight: 500;
      color: #000000;
      width: 456px;
      text-align: left;
      margin-bottom: 130px;
      }
      &_button {
      width: 431px;
      height: 69px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      &_bg {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      }
      &_text {
      font-size: 33px;
      font-family: Source Han Sans SC;
      font-weight: 500;
      color: #ffffff;
      z-index: 1;
      }
      }
      }
      }
      }
      }
      @media screen and (max-width: 750px) {
      .page {
      .main_content {
      width: 10rem;
      background: #ffffff;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .global_box {
      width: 0.8267rem;
      position: absolute;
      right: 0.24rem;
      top: 0.8267rem;
      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%;
      background: url("../assets/images/gesture/introduceBg.png") no-repeat
      top center;
      overflow: hidden;
      .page_bg {
      width: 100%;
      position: absolute;
      left: 0;
      top: 0;
      }
      .page_title {
      font-size: 0.7067rem;
      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;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      .page_bg2 {
      width: 100%;
      position: absolute;
      left: 0;
      top: 1.3333rem;
      }
      .page_tips {
      font-size: 0.32rem;
      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_title {
      top: 0.5333rem;
      }
      .page_bg2 {
      width: 60%;
      position: absolute;
      left: 20%;
      top: 0.8rem;
      }
      .page_tips {
      font-size: 0.2667rem;
      &.page_tips_1 {
      position: absolute;
      top: 2.56rem;
      left: calc(20% + 0.7333rem);
      width: 3.4667rem;
      }
      &.page_tips_2 {
      position: absolute;
      width: 5.7333rem;
      left: calc(20% + 2.4533rem);
      top: 5.6533rem;
      }
      &.page_tips_3 {
      position: absolute;
      width: 7.0667rem;
      left: calc(20% + 0.8rem);
      top: 7.04rem;
      }
      }
      }
      }
      .bottom {
      flex: 1;
      width: 10rem;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      position: relative;
      .info {
      align-self: flex-start;
      color: #999;
      font-size: 0.3947rem;
      .title {
      color: #fb7c76;
      font-size: 0.5933rem;
      font-weight: bold;
      }
      .item {
      min-height: 0.5933rem;
      line-height: 0.5947rem;
      }
      }
      .bottomBtn {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: absolute;
      bottom: 0.4rem;
      left: 50%;
      transform: translateX(-50%);
      .bottom-tips {
      margin-top: 0.2667rem;
      font-size: 0.32rem;
      color: #999999;
      }
      }
      }
      .no_camera_dialog {
      position: fixed;
      left: 0;
      top: 0;
      width: 100vw;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      &_mask {
      position: absolute;
      left: 0;
      top: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.5);
      z-index: 0;
      }
      &_content {
      width: 7.9067rem;
      height: 6.6133rem;
      background: #ffffff;
      border-radius: 0.2133rem;
      z-index: 1;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      box-sizing: border-box;
      padding: 1.04rem 0 1.2933rem 0;
      }
      &_title {
      font-size: 0.6133rem;
      line-height: 1.2;
      font-family: Source Han Sans SC;
      font-weight: 500;
      color: #000000;
      width: 6.08rem;
      text-align: left;
      margin-bottom: 1.7333rem;
      }
      &_button {
      width: 5.7467rem;
      height: 0.92rem;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      &_bg {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      }
      &_text {
      font-size: 0.44rem;
      font-family: Source Han Sans SC;
      font-weight: 500;
      color: #ffffff;
      z-index: 1;
      }
      }
      }
      }
      }
      }
      </style>
      \ No newline at end of file
      vite.config.js 0 → 100644
      View file @ 30abb7cf
      import {
      defineConfig
      } from 'vite'
      import vue from '@vitejs/plugin-vue'
      const config = require('./config')
      // https://vitejs.dev/config/
      export default defineConfig({
      plugins: [vue()],
      base: config.base,
      resolve: config.resolve,
      server: {
      proxy: config.proxy,
      port: config.port
      },
      })
      \ 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