Skip to content

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

移动端PC端样式优化

parent ea111868
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
<template> <template>
<div class="page"> <div class="page" :class="{'mobile':_isMobile,'pc':!_isMobile}" :style="{'height':pageHeight}">
<div class="main_content"> <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="page_title">{{$t('strings.homeTitle')}}</div>
<div class="picture-box"> <div class="picture-box">
<img class="page_bg2" src="../assets/images/gesture/swiper1big_new.png" alt srcset /> <img class="page_bg2" src="../assets/images/gesture/swiper1big_new.png" alt srcset />
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
<div class="bottom"> <div class="bottom">
<div class="info" :style="{'marginTop':cT,'marginLeft':cL, 'marginRight':cL, 'marginBottom':cT}"> <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="title" :style="{'margin-bottom':cTb}">{{$t('strings.homeText4')}}</div>
<div class="content"> <div class="content" v-if="_isMobile">
<div class="item"></div> <div class="item"></div>
</div> </div>
</div> </div>
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
</template> </template>
<script> <script>
import { calcAdapt, isBigScreen, authCamera } from "../common/util"; import { calcAdapt, isBigScreen, authCamera, isMobile } from "../common/util";
import lightButton from "../components/lightButton.vue"; import lightButton from "../components/lightButton.vue";
let calcs = calcAdapt(); let calcs = calcAdapt();
...@@ -58,13 +58,17 @@ const calcCoord = function () { ...@@ -58,13 +58,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);
...@@ -90,7 +94,9 @@ export default { ...@@ -90,7 +94,9 @@ export default {
cB: calcCoord({ minTop: 40, maxTop: 80 }).top + "px", cB: calcCoord({ minTop: 40, maxTop: 80 }).top + "px",
cTs: calcCoord({ minTop: 40, maxTop: 60 }).top + "px", // title fontsize cTs: calcCoord({ minTop: 40, maxTop: 60 }).top + "px", // title fontsize
cTb: calcCoord({ minTop: 30, maxTop: 30 }).top + "px", // title bottom 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: { components: {
...@@ -603,16 +609,37 @@ export default { ...@@ -603,16 +609,37 @@ export default {
} }
let { camera } = await authCamera(0); let { camera } = await authCamera(0);
if (camera) { if (camera) {
localStorage.setItem("backUrl", "https://bfai-service-uat.d-lab-services.danone.com/demo/#/complete"); let openDev = this.$route.query.openDev;
window.location.href = "https://bfai-service-uat.d-lab-services.danone.com/sdk/#/?camera=1&lying=0"; 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 { } else {
this.showNoCameraDialog = true; this.showNoCameraDialog = true;
} }
} }
}, },
created() { created() {
this.topHeiht = calcCoord({ minTop: 618, maxTop: 1142.6 }).top; this.$i18n.locale = "en";
if (document.body.clientWidth > 750) { 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.topHeiht = this.topHeiht + "px";
this.cL = calcCoord({ minTop: 47, maxTop: 51 }).top + "px"; this.cL = calcCoord({ minTop: 47, maxTop: 51 }).top + "px";
this.cT = calcCoord({ minTop: 47, maxTop: 67 }).top + "px"; this.cT = calcCoord({ minTop: 47, maxTop: 67 }).top + "px";
...@@ -630,7 +657,11 @@ export default { ...@@ -630,7 +657,11 @@ export default {
this.cCs = calcCoord({ minTop: 20, maxTop: 40 }).top / 75 + "rem"; // content this.cCs = calcCoord({ minTop: 20, maxTop: 40 }).top / 75 + "rem"; // content
} }
}, },
mounted() {} mounted() {
window.onresize = () => {
return (() => {})();
};
}
}; };
</script> </script>
...@@ -639,542 +670,538 @@ export default { ...@@ -639,542 +670,538 @@ 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;
width: 750px; min-height: 1334px;
background: #ffffff; background: #ffffff;
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.global_box { .global_box {
width: 62px; width: 62px;
position: absolute; position: absolute;
right: 18px; right: 18px;
top: 62px; top: 62px;
z-index: 10; z-index: 10;
.global_img { .global_img {
width: 100%; width: 100%;
} }
.popup-box { .popup-box {
width: 140px; width: 140px;
height: 150px; height: 150px;
position: absolute;
right: -9px;
top: 72px;
padding-top: 12px;
box-sizing: border-box;
overflow: hidden;
border-radius: 12px;
.popup_bg {
position: absolute; position: absolute;
right: -9px; left: 0;
top: 72px; top: 0;
padding-top: 12px; width: 140px;
box-sizing: border-box; }
overflow: hidden; .poup-item {
border-radius: 12px; position: relative;
.popup_bg { height: 45px;
position: absolute; font-size: 20px;
left: 0; font-family: Source Han Sans SC;
top: 0; font-weight: 500;
width: 140px; 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;
} }
.poup-item { &.active {
position: relative; color: #f68682;
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; .top {
position: relative;
width: 100%;
background: url("../assets/images/gesture/introduceBg.png") no-repeat
top center;
overflow: hidden;
.page_bg {
width: 100%; width: 100%;
background: url("../assets/images/gesture/introduceBg.png") no-repeat position: absolute;
top center; left: 0;
overflow: hidden; top: 0;
.page_bg { }
.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%; width: 100%;
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 100px;
} }
.page_title { .page_tips {
font-size: 53px; font-size: 24px;
font-family: Source Han Sans SC; color: #7d7c7a;
text-align: left;
font-weight: bold; font-weight: bold;
color: #f68682; white-space: pre-line;
line-height: 60px; &.page_tips_1 {
-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; position: absolute;
left: 0; top: 330px;
top: 100px; left: 100px;
width: 260px;
} }
&.page_tips_2 {
.page_tips { position: absolute;
font-size: 24px; width: 430px;
color: #7d7c7a; left: 310px;
text-align: left; top: 712px;
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;
}
} }
&.page_tips_3 {
position: absolute;
width: 530px;
left: 110px;
top: 890px;
}
}
}
&.small {
.page_title {
top: 40px;
} }
&.small { .page_bg2 {
.page_title { width: 60%;
top: 40px; 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_bg2 { &.page_tips_2 {
width: 60%;
position: absolute; position: absolute;
left: 20%; width: 430px;
top: 60px; left: calc(20% + 184px);
top: 424px;
} }
.page_tips { &.page_tips_3 {
font-size: 20px; position: absolute;
&.page_tips_1 { width: 530px;
position: absolute; left: calc(20% + 60px);
top: 192px; top: 528px;
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; .bottom {
width: 750px; 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; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: center;
align-items: center; align-items: center;
position: relative; position: absolute;
.info { bottom: 30px;
align-self: flex-start; left: 50%;
color: #999; transform: translateX(-50%);
font-size: 29.6px; .bottom-tips {
.title { margin-top: 20px;
color: #fb7c76; font-size: 24px;
font-size: 44.5px; color: #999999;
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; .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; left: 0;
top: 0; top: 0;
width: 100vw; width: 100vw;
height: 100vh; 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; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
&_mask { position: relative;
&_bg {
width: 100%;
height: 100%;
position: absolute; position: absolute;
left: 0; left: 0;
top: 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 { &_text {
font-size: 46px; font-size: 33px;
line-height: 1.2;
font-family: Source Han Sans SC; font-family: Source Han Sans SC;
font-weight: 500; font-weight: 500;
color: #000000; color: #ffffff;
width: 456px; z-index: 1;
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;
}
} }
} }
} }
} }
} }
.mobile {
.main_content {
width: 10rem;
background: #ffffff;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
@media screen and (max-width: 750px) { .global_box {
.page { width: 0.8267rem;
.main_content { position: absolute;
width: 10rem; right: 0.24rem;
background: #ffffff; top: 0.8267rem;
position: relative; z-index: 10;
display: flex; .global_img {
flex-direction: column; width: 100%;
justify-content: center; }
align-items: center;
.global_box { .popup-box {
width: 0.8267rem; width: 1.8667rem;
height: 2rem;
position: absolute; position: absolute;
right: 0.24rem; right: -0.12rem;
top: 0.8267rem; top: 0.96rem;
z-index: 10; padding-top: 0.16rem;
.global_img { box-sizing: border-box;
width: 100%; overflow: hidden;
} border-radius: 0.16rem;
.popup_bg {
.popup-box {
width: 1.8667rem;
height: 2rem;
position: absolute; position: absolute;
right: -0.12rem; left: 0;
top: 0.96rem; top: 0;
padding-top: 0.16rem; width: 1.8667rem;
box-sizing: border-box; }
overflow: hidden; .poup-item {
border-radius: 0.16rem; position: relative;
.popup_bg { height: 0.6rem;
position: absolute; font-size: 0.2667rem;
left: 0; font-family: Source Han Sans SC;
top: 0; font-weight: 500;
width: 1.8667rem; 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;
} }
.poup-item { &.active {
position: relative; color: #f68682;
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; .top {
position: relative;
width: 100%;
background: url("../assets/images/gesture/introduceBg.png") no-repeat top
center;
overflow: hidden;
.page_bg {
width: 100%; width: 100%;
background: url("../assets/images/gesture/introduceBg.png") no-repeat position: absolute;
top center; left: 0;
overflow: hidden; top: 0;
.page_bg { }
.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%; width: 100%;
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 1.3333rem;
} }
.page_title { .page_tips {
font-size: 0.7067rem; font-size: 0.32rem;
font-family: Source Han Sans SC; color: #7d7c7a;
text-align: left;
font-weight: bold; font-weight: bold;
color: #f68682; white-space: pre-line;
line-height: 0.8rem; &.page_tips_1 {
-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; position: absolute;
left: 0; top: 4.4rem;
top: 1.3333rem; left: 1.3333rem;
width: 3.4667rem;
} }
&.page_tips_2 {
.page_tips { position: absolute;
font-size: 0.32rem; width: 5.7333rem;
color: #7d7c7a; left: 4.1333rem;
text-align: left; top: 9.4933rem;
font-weight: bold; }
white-space: pre-line; &.page_tips_3 {
&.page_tips_1 { position: absolute;
position: absolute; width: 7.0667rem;
top: 4.4rem; left: 1.4667rem;
left: 1.3333rem; top: 11.8667rem;
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 { &.small {
top: 0.5333rem; .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_bg2 { &.page_tips_2 {
width: 60%;
position: absolute; position: absolute;
left: 20%; width: 5.7333rem;
top: 0.8rem; left: calc(20% + 2.4533rem);
top: 5.6533rem;
} }
.page_tips { &.page_tips_3 {
font-size: 0.2667rem; position: absolute;
&.page_tips_1 { width: 7.0667rem;
position: absolute; left: calc(20% + 0.8rem);
top: 2.56rem; top: 7.04rem;
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; .bottom {
width: 10rem; 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; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: center;
align-items: center; align-items: center;
position: relative; position: absolute;
.info { bottom: 0.4rem;
align-self: flex-start; left: 50%;
color: #999; transform: translateX(-50%);
font-size: 0.3947rem; .bottom-tips {
.title { margin-top: 0.2667rem;
color: #fb7c76; font-size: 0.32rem;
font-size: 0.5933rem; color: #999999;
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; .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; left: 0;
top: 0; top: 0;
width: 100vw; width: 100vw;
height: 100vh; 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; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
&_mask { position: relative;
&_bg {
width: 100%;
height: 100%;
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
z-index: 0;
} }
&_content { &_text {
width: 7.9067rem; font-size: 0.44rem;
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-family: Source Han Sans SC;
font-weight: 500; font-weight: 500;
color: #000000; color: #ffffff;
width: 6.08rem; z-index: 1;
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;
}
} }
} }
} }
......
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