Skip to content

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

pc 样式调整为375*667

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