移动端PC端样式优化

src/common/util.js

@@ -39,13 +39,16 @@ export const isBigScreen = () => {
   let height = 0;
   if (document.body.clientWidth > 750) {
     width = 750;
-    height = document.body.clientHeight;
+    height = document.body.clientHeight > 1334 ? document.body.clientHeight : 1334;
   } else {
     width = document.body.clientWidth;
     height = document.body.clientHeight;
   }
   if (height === 0) {
     height = window.innerHeight;
+    if (document.body.clientWidth > 750) {
+      height = window.innerHeight > 1334 ? window.innerHeight : 1334;
+    }
   }
   let scale = height / width;
   let k = +scale.toFixed(2);
@@ -54,7 +57,7 @@ export const isBigScreen = () => {
   } else if (k <= 1.78) {
     k = 1.78;
   }
-  if ((scale | 0) > 1) return true
+  if (k > 1.78) return true
   return false
 }
 
@@ -63,12 +66,17 @@ export const getSystemInfo = () => {
   let height = 0;
   if (document.body.clientWidth > 750) {
     width = 750;
+    height = document.body.clientHeight > 1334 ? document.body.clientHeight : 1334;
   } else {
     width = document.body.clientWidth;
-  }
     height = document.body.clientHeight;
+  }
+
   if (height === 0) {
     height = window.innerHeight;
+    if (document.body.clientWidth > 750) {
+      height = window.innerHeight > 1334 ? window.innerHeight : 1334;
+    }
   }
   let scale = height / width;
 
@@ -123,3 +131,10 @@ export const authCamera = (lying) => {
       });
   })
 }
+
+export const isMobile = () => {
+  let flag = navigator.userAgent.match(
+    /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
+  );
+  return flag;
+}
\ No newline at end of file

src/components/lightButton.vue

 <template>
-  <div class="btn-container">
+  <div class="btn-container" :class="{'mobile':_isMobile,'pc':!_isMobile}">
     <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>
@@ -7,14 +7,16 @@
 </template>
 
 <script >
-import { defineProps, reactive } from "vue";
+import { isMobile } from "../common/util";
 
 // defineProps({
 //   msg: String
 // });
 export default {
   data() {
-    return {};
+    return {
+      _isMobile: false
+    };
   },
   props: ["text"],
   methods: {
@@ -24,17 +26,37 @@ export default {
     cancel() {
       this.$emit("update:confirm", { type: "cancel" });
     }
+  },
+  created() {
+    this._isMobile = isMobile();
   }
 };
 </script>
 
 <style lang="scss" scoped>
-@media only screen and (min-width: 750px) {
-  .btn-container {
+.btn-container {
+  position: relative;
+  color: #ffffff;
+
+  img,
+  div,
+  button {
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+  &.pc {
     width: 436px;
     height: 77.7px;
     line-height: 77.7px;
   }
+  &.mobile {
+    width: 5.8133rem;
+    height: 1.036rem;
+    line-height: 1.036rem;
+  }
+}
+.pc {
   .btn-text {
     width: 100%;
     text-align: center;
@@ -46,28 +68,12 @@ export default {
     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;
-  }
+.mobile {
   .btn-text {
     width: 100%;
     text-align: center;
@@ -79,17 +85,6 @@ export default {
     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;

src/lang/i18n.js

 import { createI18n } from 'vue-i18n' //引入vue-i18n组件
 import messages from './index'
 const language = (
-  (navigator.language ? navigator.language : navigator.userLanguage) || "zh"
+  (navigator.language ? navigator.language : navigator.userLanguage) || "en"
 ).toLowerCase();
 const i18n = createI18n({
-  fallbackLocale: 'zh',
+  fallbackLocale: 'en',
   globalInjection:true,
   legacy: false, // you must specify 'legacy: false' option
-  locale: language.split("-")[0] || "zh",
+  locale: language.split("-")[0] || "en",
   messages,
 });
  

src/lang/pl.js

@@ -7,7 +7,7 @@ export default {
     homeText4: "摇篮式哺乳",
     homeText5: "常见哺乳姿势，宝宝自主寻乳，\r\n适合哺乳配合好的宝宝和妈妈。",
     homeButtonText: "立即开始",
-    homeTips: "在使用过程中，我们不会存储您的图像。",
+    homeTips: "您已记录",
     completeText: "恭喜你！完成了本次教学~",
     cameraText: "未识别到您的摄像头，是否重新识别？",
     cameraButtonText: "立即重识",

src/lang/zh.js

@@ -7,7 +7,7 @@ export default {
     homeText4: "摇篮式哺乳",
     homeText5: "常见哺乳姿势，宝宝自主寻乳，\n适合哺乳配合好的宝宝和妈妈。",
     homeButtonText: "立即开始",
-    homeTips: "在使用过程中，我们不会存储您的图像。",
+    homeTips: "您已记录",
     completeText: "恭喜你！完成了本次教学~",
     cameraText: "未识别到您的摄像头，是否重新识别？",
     cameraButtonText: "立即重识",

src/views/complete.vue

 <template>
-  <div class="page">
+  <div class="page" :class="{'mobile':_isMobile,'pc':!_isMobile}">
     <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}">
@@ -21,7 +21,7 @@
 </template>
 
 <script>
-import { calcAdapt } from "../common/util";
+import { calcAdapt, isMobile } from "../common/util";
 
 let calcs = calcAdapt();
 let scale;
@@ -30,13 +30,17 @@ const calcCoord = function () {
   let height = 0;
   if (document.body.clientWidth > 750) {
     width = 750;
-    height = document.body.clientHeight;
+    height =
+      document.body.clientHeight > 1334 ? document.body.clientHeight : 1334;
   } else {
     width = document.body.clientWidth;
     height = document.body.clientHeight;
   }
   if (height === 0) {
     height = window.innerHeight;
+    if (document.body.clientWidth > 750) {
+      height = window.innerHeight > 1334 ? window.innerHeight : 1334;
+    }
   }
   scale = height / width;
   let k = +scale.toFixed(2);
@@ -57,13 +61,13 @@ export default {
       total: 0,
       modalCalc: {
         top: ""
-      }
-    };
       },
-  methods: {
-
+      _isMobile: false
+    };
   },
+  methods: {},
   created() {
+    this._isMobile = isMobile();
     let finalBabyStatus = this.$route.query.finalBabyStatus;
     let lying = this.$route.query.lying;
     let time = this.$route.query.time;
@@ -82,13 +86,12 @@ export default {
   background: #000;
   display: flex;
   justify-content: center;
-  height: 100vh;
+  height: 100%;
 }
-@media only screen and (min-width: 750px) {
-  .page {
+.pc {
   .main_content {
     width: 750px;
-      height: 100%;
+    height: 1334px;
     background: #ffffff;
     position: relative;
     display: flex;
@@ -168,12 +171,89 @@ export default {
       align-items: center;
     }
   }
-  }
 }
 
-@media screen and (max-width: 750px) {
-  .page {
+.mobile {
   .main_content {
+    width: 10rem;
+    height: 100vh;
+    background: #ffffff;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    .page-bg {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 10rem;
+      z-index: 0;
+    }
+  }
+  .massage-complete-modal {
+    box-sizing: border-box;
+    width: 8.8rem;
+    height: 8.2667rem;
+    padding: 1.0667rem 0 1.6667rem;
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border-radius: 0.1867rem 0.1867rem;
+    margin: 0 auto;
+    position: relative;
+    z-index: 1;
+    &.noBaby {
+      height: 5.6rem;
+    }
+    .nickname {
+      font-size: 0.6133rem;
+      color: #fb7c76;
+      font-family: "Gotham-Book";
+      text-shadow: 0.0267rem 0.0267rem 0.0533rem #ffffff;
+      span {
+        font-size: 0.8rem;
+      }
+    }
+    .title {
+      height: 0.7067rem;
+      margin-top: 0.5467rem;
+      color: #fb7c76;
+      font-size: 0.6133rem;
+      font-weight: bolder;
+      .icon {
+        width: 0.92rem;
+        height: 0.6rem;
+      }
+    }
+    .subTitle {
+      width: 100%;
+      text-align: center;
+      color: #fb7c76;
+      font-size: 0.3467rem;
+      margin-top: 0.2667rem;
+      font-weight: bolder;
+      &.underline {
+        text-decoration: underline;
+      }
+    }
+    .record {
+      margin-top: 1.3333rem;
+      margin-bottom: 1.3333rem;
+      width: 7.4533rem;
+      height: 1.28rem;
+      line-height: 1.28rem;
+      border-radius: 0.64rem 0.64rem;
+      font-size: 0.4623rem;
+      color: #999999;
+      background-color: #f5f5f5;
+      text-align: center;
+      text-shadow: 0.0267rem 0.0267rem 0.0533rem #ffffff;
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
     }
   }
 }

src/views/index.vue

 <template>
-  <div class="page">
+  <div class="page" :class="{'mobile':_isMobile,'pc':!_isMobile}" :style="{'height':pageHeight}">
     <div class="main_content">
-      <div class="top" :class="{'small':!isBig}" :style="{'height':topHeiht}">
+      <div class="top" :class="{'small':_isMobile && !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 />
@@ -24,7 +24,7 @@
       <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="content" v-if="_isMobile">
             <div class="item"></div>
           </div>
         </div>
@@ -48,7 +48,7 @@
 </template>
 
 <script>
-import { calcAdapt, isBigScreen, authCamera } from "../common/util";
+import { calcAdapt, isBigScreen, authCamera, isMobile } from "../common/util";
 import lightButton from "../components/lightButton.vue";
 
 let calcs = calcAdapt();
@@ -58,13 +58,17 @@ const calcCoord = function () {
   let height = 0;
   if (document.body.clientWidth > 750) {
     width = 750;
-    height = document.body.clientHeight;
+    height =
+      document.body.clientHeight > 1334 ? document.body.clientHeight : 1334;
   } else {
     width = document.body.clientWidth;
     height = document.body.clientHeight;
   }
   if (height === 0) {
     height = window.innerHeight;
+    if (document.body.clientWidth > 750) {
+      height = window.innerHeight > 1334 ? window.innerHeight : 1334;
+    }
   }
   scale = height / width;
   let k = +scale.toFixed(2);
@@ -90,7 +94,9 @@ export default {
       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
+      cCs: calcCoord({ minTop: 20, maxTop: 40 }).top + "px", // content
+      pageHeight: "",
+      _isMobile: false
     };
   },
   components: {
@@ -603,16 +609,37 @@ export default {
       }
       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";
+        let openDev = this.$route.query.openDev;
+        localStorage.setItem(
+          "backUrl",
+          "https://bfai-service-uat.d-lab-services.danone.com/demo/#/complete"
+        );
+        let url =
+          "https://bfai-service-uat.d-lab-services.danone.com/sdk/#/?camera=1&lying=0";
+        if (openDev) {
+          url = url + "&openDev=true";
+        }
+        window.location.href = url;
       } else {
         this.showNoCameraDialog = true;
       }
     }
   },
   created() {
-    this.topHeiht = calcCoord({ minTop: 618, maxTop: 1142.6 }).top;
+    this.$i18n.locale = "en";
+    this._isMobile = isMobile();
+    if (!isMobile()) {
+      document.getElementsByTagName("body")[0].style.minWidth = "750px";
+      this.topHeiht = calcCoord({ minTop: 918, maxTop: 1142.6 }).top;
       if (document.body.clientWidth > 750) {
+        this.pageHeight = 1334 + "px";
+        this.topHeiht = 1042.6;
+      }
+    } else {
+      this.topHeiht = calcCoord({ minTop: 618, maxTop: 1142.6 }).top;
+    }
+
+    if (!this._isMobile) {
       this.topHeiht = this.topHeiht + "px";
       this.cL = calcCoord({ minTop: 47, maxTop: 51 }).top + "px";
       this.cT = calcCoord({ minTop: 47, maxTop: 67 }).top + "px";
@@ -630,7 +657,11 @@ export default {
       this.cCs = calcCoord({ minTop: 20, maxTop: 40 }).top / 75 + "rem"; // content
     }
   },
-  mounted() {}
+  mounted() {
+    window.onresize = () => {
+      return (() => {})();
+    };
+  }
 };
 </script>
 
@@ -639,12 +670,12 @@ export default {
   background: #000;
   display: flex;
   justify-content: center;
-  height: 100vh;
+  height: 100%;
 }
-@media only screen and (min-width: 750px) {
-  .page {
+.pc {
   .main_content {
     width: 750px;
+    min-height: 1334px;
     background: #ffffff;
     position: relative;
     display: flex;
@@ -908,11 +939,8 @@ export default {
       }
     }
   }
-  }
 }
-
-@media screen and (max-width: 750px) {
-  .page {
+.mobile {
   .main_content {
     width: 10rem;
     background: #ffffff;
@@ -979,8 +1007,8 @@ export default {
     .top {
       position: relative;
       width: 100%;
-        background: url("../assets/images/gesture/introduceBg.png") no-repeat
-          top center;
+      background: url("../assets/images/gesture/introduceBg.png") no-repeat top
+        center;
       overflow: hidden;
       .page_bg {
         width: 100%;
@@ -1178,6 +1206,5 @@ export default {
       }
     }
   }
-  }
 }
 </style>
\ No newline at end of file