Skip to content

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

pc 样式调整为375*667

parent 17449d5e
Show whitespace changes
Inline Side-by-side
Showing with 130 additions and 126 deletions
src/common/util.js
View file @ 748b9b11
......@@ -49,8 +49,8 @@ export const getSystemInfo = () => {
let width = 0;
let height = 0;
if (!isMobile()) {
width = 750;
height = document.body.clientHeight > 1334 ? document.body.clientHeight : 1334;
width = 375;
height = document.body.clientHeight > 667 ? document.body.clientHeight : 667;
} else {
width = document.body.clientWidth;
height = document.body.clientHeight;
......@@ -59,7 +59,7 @@ export const getSystemInfo = () => {
if (height === 0) {
height = window.innerHeight;
if (!isMobile()) {
height = window.innerHeight > 1334 ? window.innerHeight : 1334;
height = window.innerHeight > 667 ? window.innerHeight : 667;
}
}
let scale = height / width;
......
src/components/lightButton.vue
View file @ 748b9b11
......@@ -46,9 +46,9 @@ export default {
top: 0;
}
&.pc {
width: 436px;
height: 77.7px;
line-height: 77.7px;
width: 218px;
height: 38.85px;
line-height: 38.85px;
}
&.mobile {
width: 5.8133rem;
......@@ -60,11 +60,11 @@ export default {
.btn-text {
width: 100%;
text-align: center;
font-size: 44px;
font-size: 22px;
letter-spacing: 0.2em;
font-weight: bold;
&.len {
font-size: 24px;
font-size: 12px;
}
}
.btn-img {
......
src/views/complete.vue
View file @ 748b9b11
......@@ -33,9 +33,9 @@ const calcCoord = function () {
let width = 0;
let height = 0;
if (!isMobile()) {
width = 750;
width = 375;
height =
document.body.clientHeight > 1334 ? document.body.clientHeight : 1334;
document.body.clientHeight > 667 ? document.body.clientHeight : 667;
} else {
width = document.body.clientWidth;
height = document.body.clientHeight;
......@@ -43,7 +43,7 @@ const calcCoord = function () {
if (height === 0) {
height = window.innerHeight;
if (!isMobile()) {
height = window.innerHeight > 1334 ? window.innerHeight : 1334;
height = window.innerHeight > 667 ? window.innerHeight : 667;
}
}
scale = height / width;
......@@ -107,9 +107,11 @@ export default {
height: 100%;
}
.pc {
height: 100vh;
align-items: center;
.main_content {
width: 750px;
min-height: 1334px;
width: 375px;
height: 667px;
background: #ffffff;
position: relative;
display: flex;
......@@ -120,72 +122,72 @@ export default {
position: absolute;
left: 0;
top: 0;
width: 750px;
width: 375px;
z-index: 0;
}
}
.massage-complete-modal {
box-sizing: border-box;
width: 660px;
min-height: 620px;
padding: 80px 0 125px;
width: 330px;
min-height: 310px;
padding: 40px 0 62.5px;
background: #fff;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 14px 14px;
border-radius: 7px 7px;
margin: 0 auto;
position: relative;
z-index: 1;
&.noBaby {
height: 420px;
height: 210px;
.bottom {
margin-top: 100px;
margin-top: 50px;
}
}
.nickname {
font-size: 46px;
font-size: 23px;
color: #fb7c76;
font-family: "Gotham-Book";
text-shadow: 2px 2px 4px #ffffff;
text-shadow: 1px 1px 2px #ffffff;
span {
font-size: 60px;
font-size: 30px;
}
}
.title {
margin-top: 41px;
margin-top: 20.5px;
color: #fb7c76;
font-size: 46px;
height: 53px;
font-size: 23px;
line-height: 26.5012px;
font-weight: bolder;
.icon {
width: 69px;
height: 45px;
width: 34.5px;
height: 22.5px;
}
}
.subTitle {
width: 100%;
text-align: center;
color: #fb7c76;
font-size: 26px;
margin-top: 20px;
font-size: 13px;
margin-top: 10px;
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;
margin-top: 50px;
margin-bottom: 50px;
width: 280px;
height: 48px;
line-height: 48px;
border-radius: 24px 24px;
font-size: 17.3362px;
color: #999999;
background-color: #f5f5f5;
text-align: center;
text-shadow: 2px 2px 4px #ffffff;
text-shadow: 1px 1px 2px #ffffff;
display: flex;
flex-direction: row;
justify-content: center;
......
src/views/index.vue
View file @ 748b9b11
......@@ -62,9 +62,9 @@ const calcCoord = function () {
let width = 0;
let height = 0;
if (!isMobile()) {
width = 750;
width = 375;
height =
document.body.clientHeight > 1334 ? document.body.clientHeight : 1334;
document.body.clientHeight > 667 ? document.body.clientHeight : 667;
} else {
width = document.body.clientWidth;
height = document.body.clientHeight;
......@@ -72,7 +72,7 @@ const calcCoord = function () {
if (height === 0) {
height = window.innerHeight;
if (!isMobile()) {
height = window.innerHeight > 1334 ? window.innerHeight : 1334;
height = window.innerHeight > 667 ? window.innerHeight : 667;
}
}
scale = height / width;
......@@ -95,12 +95,12 @@ export default {
currentLanguage: 0,
showPopup: false,
languageList: ["English", "Français", "Español"],
cL: calcCoord({ minTop: 47, maxTop: 51 }).top + "px",
cT: calcCoord({ minTop: 47, maxTop: 67 }).top + "px",
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
cL: calcCoord({ minTop: 23.5, maxTop: 15.5 }).top + "px",
cT: calcCoord({ minTop: 23.5, maxTop: 33.5 }).top + "px",
cB: calcCoord({ minTop: 20, maxTop: 40 }).top + "px",
cTs: calcCoord({ minTop: 20, maxTop: 30 }).top + "px", // title fontsize
cTb: calcCoord({ minTop: 15, maxTop: 15 }).top + "px", // title bottom
cCs: calcCoord({ minTop: 10, maxTop: 20 }).top + "px", // content
pageHeight: "",
_isMobile: false,
scale: 0
......@@ -676,20 +676,20 @@ export default {
this._isMobile = isMobile();
if (!isMobile()) {
document.getElementsByTagName("body")[0].style.minWidth = "750px";
this.topHeiht = calcCoord({ minTop: 918, maxTop: 1142.6 }).top;
this.topHeiht = 1042.6;
this.topHeiht = calcCoord({ minTop: 459, maxTop: 571.3 }).top;
this.topHeiht = 521.3;
} else {
this.topHeiht = calcCoord({ minTop: 918, 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";
this.cB = calcCoord({ minTop: 40, maxTop: 80 }).top + "px";
this.cTs = calcCoord({ minTop: 40, maxTop: 60 }).top + "px"; // title fontsize
this.cTb = calcCoord({ minTop: 30, maxTop: 30 }).top + "px"; // title bottom
this.cCs = calcCoord({ minTop: 20, maxTop: 40 }).top + "px"; // content
this.cL = calcCoord({ minTop: 23.5, maxTop: 25.5 }).top + "px";
this.cT = calcCoord({ minTop: 23.5, maxTop: 33.5 }).top + "px";
this.cB = calcCoord({ minTop: 20, maxTop: 40 }).top + "px";
this.cTs = calcCoord({ minTop: 20, maxTop: 30 }).top + "px"; // title fontsize
this.cTb = calcCoord({ minTop: 15, maxTop: 15 }).top + "px"; // title bottom
this.cCs = calcCoord({ minTop: 10, maxTop: 20 }).top + "px"; // content
} else {
this.topHeiht = this.topHeiht / 75 + "rem";
this.cL = calcCoord({ minTop: 47, maxTop: 51 }).top / 75 + "rem";
......@@ -716,9 +716,11 @@ export default {
height: 100%;
}
.pc {
height: 100vh;
align-items: center;
.main_content {
width: 750px;
min-height: 1334px;
width: 375px;
height: 667px;
background: #ffffff;
position: relative;
display: flex;
......@@ -727,52 +729,52 @@ export default {
align-items: center;
.global_box {
width: 62px;
width: 31px;
position: absolute;
right: 18px;
top: 62px;
right: 9px;
top: 31px;
z-index: 10;
.global_img {
width: 100%;
}
.popup-box {
width: 140px;
height: 150px;
width: 70px;
height: 75px;
position: absolute;
right: -9px;
top: 72px;
padding-top: 12px;
right: -4.5px;
top: 36px;
padding-top: 6px;
box-sizing: border-box;
overflow: hidden;
border-radius: 12px;
border-radius: 6px;
.popup_bg {
position: absolute;
left: 0;
top: 0;
width: 140px;
width: 70px;
}
.poup-item {
position: relative;
height: 45px;
font-size: 20px;
height: 22.5px;
font-size: 10px;
font-family: Source Han Sans SC;
font-weight: 500;
color: #303030;
line-height: 45px;
line-height: 22.5px;
display: flex;
align-items: center;
justify-content: start;
cursor: pointer;
img {
width: 14px;
margin-left: 19px;
margin-right: 11px;
width: 7px;
margin-left: 9.5px;
margin-right: 5.5px;
}
div {
width: 14px;
margin-left: 19px;
margin-right: 11px;
width: 7px;
margin-left: 9.5px;
margin-right: 5.5px;
}
&.active {
color: #f68682;
......@@ -794,17 +796,17 @@ export default {
}
.page_title {
font-size: 53px;
font-size: 26.5px;
font-family: Source Han Sans SC;
font-weight: bold;
color: #f68682;
line-height: 60px;
-webkit-text-stroke: 2px #fff9fb;
text-stroke: 2px #fff9fb;
line-height: 30px;
-webkit-text-stroke: 1px #fff9fb;
text-stroke: 1px #fff9fb;
width: 100%;
position: absolute;
left: 0;
top: 116px;
top: 58px;
z-index: 2;
}
.picture-box {
......@@ -817,71 +819,71 @@ export default {
width: 100%;
position: absolute;
left: 0;
top: 100px;
top: 50px;
}
.page_tips {
font-size: 24px;
font-size: 12px;
color: #7d7c7a;
text-align: left;
font-weight: bold;
white-space: pre-line;
&.page_tips_1 {
position: absolute;
top: 330px;
left: 100px;
width: 260px;
top: 165px;
left: 50px;
width: 130px;
}
&.page_tips_2 {
position: absolute;
width: 430px;
left: 310px;
top: 712px;
width: 215px;
left: 155px;
top:356px;
}
&.page_tips_3 {
position: absolute;
width: 530px;
left: 110px;
top: 890px;
width: 265px;
left: 55px;
top: 445px;
}
}
}
&.small {
.page_title {
top: 40px;
top: 20px;
}
.page_bg2 {
width: 60%;
position: absolute;
left: 20%;
top: 60px;
top: 30px;
}
.page_tips {
font-size: 20px;
font-size: 10px;
&.page_tips_1 {
position: absolute;
top: 192px;
left: calc(20% + 55px);
width: 260px;
top: 96px;
left: calc(20% + 27.4987px);
width: 130.0012px;
}
&.page_tips_2 {
position: absolute;
width: 430px;
left: calc(20% + 184px);
top: 424px;
width: 215px;
left: calc(20% + 92px);
top: 212px;
}
&.page_tips_3 {
position: absolute;
width: 530px;
left: calc(20% + 60px);
top: 528px;
width: 265px;
left: calc(20% + 30px);
top: 264px;
}
}
}
}
.bottom {
flex: 1;
width: 750px;
width: 375px;
display: flex;
flex-direction: column;
justify-content: flex-start;
......@@ -890,16 +892,16 @@ export default {
.info {
align-self: flex-start;
color: #999;
font-size: 29.6px;
font-size: 14.8px;
.title {
color: #fb7c76;
font-size: 32px;
font-size: 16px;
line-height: 1.2;
font-weight: bold;
}
.item {
min-height: 44.5px;
line-height: 44.6px;
min-height: 22.25px;
line-height: 22.3px;
}
}
.bottomBtn {
......@@ -908,12 +910,12 @@ export default {
justify-content: center;
align-items: center;
position: absolute;
bottom: 30px;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
.bottom-tips {
margin-top: 20px;
font-size: 24px;
margin-top: 10px;
font-size: 12px;
color: #999999;
}
}
......@@ -938,41 +940,41 @@ export default {
z-index: 0;
}
&_content {
width: 593px;
min-height: 496px;
width: 296.5px;
min-height: 248px;
background: #ffffff;
border-radius: 16px;
border-radius: 8px;
z-index: 1;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
padding: 44px 0 64px 0;
padding: 22px 0 32px 0;
}
&_title {
font-size: 46px;
font-size: 23px;
line-height: 1.2;
font-family: Source Han Sans SC;
font-weight: 500;
color: #000000;
width: 456px;
width: 228px;
text-align: center;
margin-bottom: 52px;
margin-bottom: 26px;
}
&_text_content {
width: 500px;
width: 250px;
text-align: left;
font-size: 40px;
font-size: 20px;
font-family: Source Han Sans SC;
font-weight: 400;
color: #010101;
line-height: 66px;
margin-bottom: 83px;
line-height: 33px;
margin-bottom: 41.5px;
}
&_button {
width: 431px;
height: 69px;
width: 215.5px;
height: 34.5px;
display: flex;
align-items: center;
justify-content: center;
......@@ -985,7 +987,7 @@ export default {
top: 0;
}
&_text {
font-size: 33px;
font-size: 16.5px;
font-family: Source Han Sans SC;
font-weight: 500;
color: #ffffff;
......
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