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 = () => {
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
<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;
if (document.body.clientWidth > 750) {
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,542 +670,538 @@ export default {
background: #000;
display: flex;
justify-content: center;
height: 100vh;
height: 100%;
}
@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;
.pc {
.main_content {
width: 750px;
min-height: 1334px;
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%;
}
.global_box {
width: 62px;
position: absolute;
right: 18px;
top: 62px;
z-index: 10;
.global_img {
width: 100%;
}
.popup-box {
width: 140px;
height: 150px;
.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;
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;
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;
}
.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;
}
&.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%;
background: url("../assets/images/gesture/introduceBg.png") no-repeat
top center;
overflow: hidden;
.page_bg {
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: 0;
top: 100px;
}
.page_title {
font-size: 53px;
font-family: Source Han Sans SC;
.page_tips {
font-size: 24px;
color: #7d7c7a;
text-align: left;
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%;
white-space: pre-line;
&.page_tips_1 {
position: absolute;
left: 0;
top: 100px;
top: 330px;
left: 100px;
width: 260px;
}
.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;
}
&.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;
}
&.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_bg2 {
width: 60%;
&.page_tips_2 {
position: absolute;
left: 20%;
top: 60px;
width: 430px;
left: calc(20% + 184px);
top: 424px;
}
.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;
}
&.page_tips_3 {
position: absolute;
width: 530px;
left: calc(20% + 60px);
top: 528px;
}
}
}
.bottom {
flex: 1;
width: 750px;
}
.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: flex-start;
justify-content: center;
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;
}
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;
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;
&_mask {
position: relative;
&_bg {
width: 100%;
height: 100%;
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;
&_text {
font-size: 33px;
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;
}
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) {
.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%;
}
.global_box {
width: 0.8267rem;
.popup-box {
width: 1.8667rem;
height: 2rem;
position: absolute;
right: 0.24rem;
top: 0.8267rem;
z-index: 10;
.global_img {
width: 100%;
}
.popup-box {
width: 1.8667rem;
height: 2rem;
right: -0.12rem;
top: 0.96rem;
padding-top: 0.16rem;
box-sizing: border-box;
overflow: hidden;
border-radius: 0.16rem;
.popup_bg {
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;
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;
}
.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;
}
&.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%;
background: url("../assets/images/gesture/introduceBg.png") no-repeat
top center;
overflow: hidden;
.page_bg {
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: 0;
top: 1.3333rem;
}
.page_title {
font-size: 0.7067rem;
font-family: Source Han Sans SC;
.page_tips {
font-size: 0.32rem;
color: #7d7c7a;
text-align: left;
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%;
white-space: pre-line;
&.page_tips_1 {
position: absolute;
left: 0;
top: 1.3333rem;
top: 4.4rem;
left: 1.3333rem;
width: 3.4667rem;
}
.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;
}
&.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;
}
&.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_bg2 {
width: 60%;
&.page_tips_2 {
position: absolute;
left: 20%;
top: 0.8rem;
width: 5.7333rem;
left: calc(20% + 2.4533rem);
top: 5.6533rem;
}
.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;
}
&.page_tips_3 {
position: absolute;
width: 7.0667rem;
left: calc(20% + 0.8rem);
top: 7.04rem;
}
}
}
.bottom {
flex: 1;
width: 10rem;
}
.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: flex-start;
justify-content: center;
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;
}
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;
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;
&_mask {
position: relative;
&_bg {
width: 100%;
height: 100%;
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;
&_text {
font-size: 0.44rem;
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;
}
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