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 = () => {
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;
}
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;
......@@ -122,4 +130,11 @@ export const authCamera = (lying) => {
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>
<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
View file @ 25e57a3c
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
View file @ 25e57a3c
......@@ -7,7 +7,7 @@ export default {
homeText4: "摇篮式哺乳",
homeText5: "常见哺乳姿势，宝宝自主寻乳，\r\n适合哺乳配合好的宝宝和妈妈。",
homeButtonText: "立即开始",
homeTips: "在使用过程中，我们不会存储您的图像。",
homeTips: "您已记录",
completeText: "恭喜你！完成了本次教学~",
cameraText: "未识别到您的摄像头，是否重新识别？",
cameraButtonText: "立即重识",
......
src/lang/zh.js
View file @ 25e57a3c
......@@ -7,7 +7,7 @@ export default {
homeText4: "摇篮式哺乳",
homeText5: "常见哺乳姿势，宝宝自主寻乳，\n适合哺乳配合好的宝宝和妈妈。",
homeButtonText: "立即开始",
homeTips: "在使用过程中，我们不会存储您的图像。",
homeTips: "您已记录",
completeText: "恭喜你！完成了本次教学~",
cameraText: "未识别到您的摄像头，是否重新识别？",
cameraButtonText: "立即重识",
......
src/views/complete.vue
View file @ 25e57a3c
<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: ""
}
},
_isMobile: false
};
},
methods: {
},
methods: {},
created() {
this._isMobile = isMobile();
let finalBabyStatus = this.$route.query.finalBabyStatus;
let lying = this.$route.query.lying;
let time = this.$route.query.time;
......@@ -82,98 +86,174 @@ export default {
background: #000;
display: flex;
justify-content: center;
height: 100vh;
height: 100%;
}
@media only screen and (min-width: 750px) {
.page {
.main_content {
.pc {
.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;
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;
}
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;
}
}
.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;
}
.subTitle {
width: 100%;
text-align: center;
color: #fb7c76;
font-size: 26px;
margin-top: 20px;
font-weight: bolder;
&.underline {
text-decoration: underline;
}
}
.title {
height: 53px;
margin-top: 41px;
color: #fb7c76;
font-size: 46px;
font-weight: bolder;
.icon {
width: 69px;
height: 45px;
}
.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;
}
.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 {
.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
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