Skip to content

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

移动端PC端样式优化

parent ea111868
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 703 additions and 586 deletions
src/common/util.js
View file @ 25e57a3c
...@@ -39,13 +39,16 @@ export const isBigScreen = () => { ...@@ -39,13 +39,16 @@ export const isBigScreen = () => {
let height = 0; let height = 0;
if (document.body.clientWidth > 750) { if (document.body.clientWidth > 750) {
width = 750; width = 750;
height = document.body.clientHeight; height = document.body.clientHeight > 1334 ? document.body.clientHeight : 1334;
} else { } else {
width = document.body.clientWidth; width = document.body.clientWidth;
height = document.body.clientHeight; height = document.body.clientHeight;
} }
if (height === 0) { if (height === 0) {
height = window.innerHeight; height = window.innerHeight;
if (document.body.clientWidth > 750) {
height = window.innerHeight > 1334 ? window.innerHeight : 1334;
}
} }
let scale = height / width; let scale = height / width;
let k = +scale.toFixed(2); let k = +scale.toFixed(2);
...@@ -54,7 +57,7 @@ export const isBigScreen = () => { ...@@ -54,7 +57,7 @@ export const isBigScreen = () => {
} else if (k <= 1.78) { } else if (k <= 1.78) {
k = 1.78; k = 1.78;
} }
if ((scale | 0) > 1) return true if (k > 1.78) return true
return false return false
} }
...@@ -63,12 +66,17 @@ export const getSystemInfo = () => { ...@@ -63,12 +66,17 @@ export const getSystemInfo = () => {
let height = 0; let height = 0;
if (document.body.clientWidth > 750) { if (document.body.clientWidth > 750) {
width = 750; width = 750;
height = document.body.clientHeight > 1334 ? document.body.clientHeight : 1334;
} else { } else {
width = document.body.clientWidth; width = document.body.clientWidth;
height = document.body.clientHeight;
} }
height = document.body.clientHeight;
if (height === 0) { if (height === 0) {
height = window.innerHeight; height = window.innerHeight;
if (document.body.clientWidth > 750) {
height = window.innerHeight > 1334 ? window.innerHeight : 1334;
}
} }
let scale = height / width; let scale = height / width;
...@@ -122,4 +130,11 @@ export const authCamera = (lying) => { ...@@ -122,4 +130,11 @@ export const authCamera = (lying) => {
console.log('获取用户授权信息失败') console.log('获取用户授权信息失败')
}); });
}) })
}
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
View file @ 25e57a3c
<template> <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" /> <img class="btn-img" src="../assets/images/gesture/light-btn-bg.png" />
<div class="btn-text light-button-text">{{text}}</div> <div class="btn-text light-button-text">{{text}}</div>
<slot name="body"></slot> <slot name="body"></slot>
...@@ -7,14 +7,16 @@ ...@@ -7,14 +7,16 @@
</template> </template>
<script > <script >
import { defineProps, reactive } from "vue"; import { isMobile } from "../common/util";
// defineProps({ // defineProps({
// msg: String // msg: String
// }); // });
export default { export default {
data() { data() {
return {}; return {
_isMobile: false
};
}, },
props: ["text"], props: ["text"],
methods: { methods: {
...@@ -24,17 +26,37 @@ export default { ...@@ -24,17 +26,37 @@ export default {
cancel() { cancel() {
this.$emit("update:confirm", { type: "cancel" }); this.$emit("update:confirm", { type: "cancel" });
} }
},
created() {
this._isMobile = isMobile();
} }
}; };
</script> </script>
<style lang="scss" scoped> <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; width: 436px;
height: 77.7px; height: 77.7px;
line-height: 77.7px; line-height: 77.7px;
} }
&.mobile {
width: 5.8133rem;
height: 1.036rem;
line-height: 1.036rem;
}
}
.pc {
.btn-text { .btn-text {
width: 100%; width: 100%;
text-align: center; text-align: center;
...@@ -46,28 +68,12 @@ export default { ...@@ -46,28 +68,12 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.btn-container {
position: relative;
color: #ffffff;
img,
div,
button {
position: absolute;
left: 0;
top: 0;
}
}
.light-button-text { .light-button-text {
letter-spacing: 0.2em; letter-spacing: 0.2em;
} }
} }
@media screen and (max-width: 750px) { .mobile {
.btn-container {
width: 5.8133rem;
height: 1.036rem;
line-height: 1.036rem;
}
.btn-text { .btn-text {
width: 100%; width: 100%;
text-align: center; text-align: center;
...@@ -79,17 +85,6 @@ export default { ...@@ -79,17 +85,6 @@ export default {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.btn-container {
position: relative;
color: #ffffff;
img,
div,
button {
position: absolute;
left: 0;
top: 0;
}
}
.light-button-text { .light-button-text {
letter-spacing: 0.2em; letter-spacing: 0.2em;
......
src/lang/i18n.js
View file @ 25e57a3c
import { createI18n } from 'vue-i18n' //引入vue-i18n组件 import { createI18n } from 'vue-i18n' //引入vue-i18n组件
import messages from './index' import messages from './index'
const language = ( const language = (
(navigator.language ? navigator.language : navigator.userLanguage) || "zh" (navigator.language ? navigator.language : navigator.userLanguage) || "en"
).toLowerCase(); ).toLowerCase();
const i18n = createI18n({ const i18n = createI18n({
fallbackLocale: 'zh', fallbackLocale: 'en',
globalInjection:true, globalInjection:true,
legacy: false, // you must specify 'legacy: false' option legacy: false, // you must specify 'legacy: false' option
locale: language.split("-")[0] || "zh", locale: language.split("-")[0] || "en",
messages, messages,
}); });
......
src/lang/pl.js
View file @ 25e57a3c
...@@ -7,7 +7,7 @@ export default { ...@@ -7,7 +7,7 @@ export default {
homeText4: "摇篮式哺乳", homeText4: "摇篮式哺乳",
homeText5: "常见哺乳姿势，宝宝自主寻乳，\r\n适合哺乳配合好的宝宝和妈妈。", homeText5: "常见哺乳姿势，宝宝自主寻乳，\r\n适合哺乳配合好的宝宝和妈妈。",
homeButtonText: "立即开始", homeButtonText: "立即开始",
homeTips: "在使用过程中，我们不会存储您的图像。", homeTips: "您已记录",
completeText: "恭喜你！完成了本次教学~", completeText: "恭喜你！完成了本次教学~",
cameraText: "未识别到您的摄像头，是否重新识别？", cameraText: "未识别到您的摄像头，是否重新识别？",
cameraButtonText: "立即重识", cameraButtonText: "立即重识",
......
src/lang/zh.js
View file @ 25e57a3c
...@@ -7,7 +7,7 @@ export default { ...@@ -7,7 +7,7 @@ export default {
homeText4: "摇篮式哺乳", homeText4: "摇篮式哺乳",
homeText5: "常见哺乳姿势，宝宝自主寻乳，\n适合哺乳配合好的宝宝和妈妈。", homeText5: "常见哺乳姿势，宝宝自主寻乳，\n适合哺乳配合好的宝宝和妈妈。",
homeButtonText: "立即开始", homeButtonText: "立即开始",
homeTips: "在使用过程中，我们不会存储您的图像。", homeTips: "您已记录",
completeText: "恭喜你！完成了本次教学~", completeText: "恭喜你！完成了本次教学~",
cameraText: "未识别到您的摄像头，是否重新识别？", cameraText: "未识别到您的摄像头，是否重新识别？",
cameraButtonText: "立即重识", cameraButtonText: "立即重识",
......
src/views/complete.vue
View file @ 25e57a3c
<template> <template>
<div class="page"> <div class="page" :class="{'mobile':_isMobile,'pc':!_isMobile}">
<div class="main_content"> <div class="main_content">
<img class="page-bg" src="../assets/images/gesture/massage-entry-fullbg.png" alt srcset /> <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="massage-complete-modal" :class="{'noBaby':finalBabyStatus == 3 || finalBabyStatus == -1}">
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
</template> </template>
<script> <script>
import { calcAdapt } from "../common/util"; import { calcAdapt, isMobile } from "../common/util";
let calcs = calcAdapt(); let calcs = calcAdapt();
let scale; let scale;
...@@ -30,13 +30,17 @@ const calcCoord = function () { ...@@ -30,13 +30,17 @@ const calcCoord = function () {
let height = 0; let height = 0;
if (document.body.clientWidth > 750) { if (document.body.clientWidth > 750) {
width = 750; width = 750;
height = document.body.clientHeight; height =
document.body.clientHeight > 1334 ? document.body.clientHeight : 1334;
} else { } else {
width = document.body.clientWidth; width = document.body.clientWidth;
height = document.body.clientHeight; height = document.body.clientHeight;
} }
if (height === 0) { if (height === 0) {
height = window.innerHeight; height = window.innerHeight;
if (document.body.clientWidth > 750) {
height = window.innerHeight > 1334 ? window.innerHeight : 1334;
}
} }
scale = height / width; scale = height / width;
let k = +scale.toFixed(2); let k = +scale.toFixed(2);
...@@ -57,13 +61,13 @@ export default { ...@@ -57,13 +61,13 @@ export default {
total: 0, total: 0,
modalCalc: { modalCalc: {
top: "" top: ""
} },
_isMobile: false
}; };
}, },
methods: { methods: {},
},
created() { created() {
this._isMobile = isMobile();
let finalBabyStatus = this.$route.query.finalBabyStatus; let finalBabyStatus = this.$route.query.finalBabyStatus;
let lying = this.$route.query.lying; let lying = this.$route.query.lying;
let time = this.$route.query.time; let time = this.$route.query.time;
...@@ -82,98 +86,174 @@ export default { ...@@ -82,98 +86,174 @@ export default {
background: #000; background: #000;
display: flex; display: flex;
justify-content: center; justify-content: center;
height: 100vh; height: 100%;
} }
@media only screen and (min-width: 750px) { .pc {
.page { .main_content {
.main_content { width: 750px;
height: 1334px;
background: #ffffff;
position: relative;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
.page-bg {
position: absolute;
left: 0;
top: 0;
width: 750px; width: 750px;
height: 100%; z-index: 0;
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; .massage-complete-modal {
width: 660px; box-sizing: border-box;
height: 620px; width: 660px;
padding: 80px 0 125px; height: 620px;
background: #fff; padding: 80px 0 125px;
display: flex; background: #fff;
flex-direction: column; display: flex;
align-items: center; flex-direction: column;
border-radius: 14px 14px; align-items: center;
margin: 0 auto; border-radius: 14px 14px;
position: relative; margin: 0 auto;
z-index: 1; position: relative;
&.noBaby { z-index: 1;
height: 420px; &.noBaby {
} height: 420px;
.nickname { }
font-size: 46px; .nickname {
color: #fb7c76; font-size: 46px;
font-family: "Gotham-Book"; color: #fb7c76;
text-shadow: 2px 2px 4px #ffffff; font-family: "Gotham-Book";
span { text-shadow: 2px 2px 4px #ffffff;
font-size: 60px; 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%; .title {
text-align: center; height: 53px;
color: #fb7c76; margin-top: 41px;
font-size: 26px; color: #fb7c76;
margin-top: 20px; font-size: 46px;
font-weight: bolder; font-weight: bolder;
&.underline { .icon {
text-decoration: underline; width: 69px;
} height: 45px;
} }
.record { }
margin-top: 100px; .subTitle {
margin-bottom: 100px; width: 100%;
width: 559px; text-align: center;
height: 96px; color: #fb7c76;
line-height: 96px; font-size: 26px;
border-radius: 48px 48px; margin-top: 20px;
font-size: 34.67px; font-weight: bolder;
color: #999999; &.underline {
background-color: #f5f5f5; text-decoration: underline;
text-align: center;
text-shadow: 2px 2px 4px #ffffff;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
} }
} }
.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) { .mobile {
.page { .main_content {
.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
View file @ 25e57a3c
This diff is collapsed.
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