|
|
@@ -296,7 +296,7 @@ let fromRoute = null;
|
|
|
let inApp = /#cordova#/i.test(navigator.userAgent);
|
|
|
export default {
|
|
|
name: 'Hall',
|
|
|
- inject: ['setKeeps'],
|
|
|
+ inject: ['setKeeps', 'appHeight'],
|
|
|
components: {
|
|
|
Post
|
|
|
},
|
|
|
@@ -382,18 +382,18 @@ export default {
|
|
|
if (!this.isVertical) {
|
|
|
return '35vw';
|
|
|
} else if (!this.windowVertical) {
|
|
|
- return '35vh';
|
|
|
+ return this.accMul(0.35, this.pageHeight);
|
|
|
} else {
|
|
|
- return '15vh';
|
|
|
+ return this.accMul(0.15, this.pageHeight);
|
|
|
}
|
|
|
},
|
|
|
blindWidth() {
|
|
|
if (!this.isVertical) {
|
|
|
return '11vw';
|
|
|
} else if (!this.windowVertical) {
|
|
|
- return '11vh';
|
|
|
+ return this.accMul(0.11, this.pageHeight);
|
|
|
} else {
|
|
|
- return '10vh';
|
|
|
+ return this.accMul(0.1, this.pageHeight);
|
|
|
}
|
|
|
},
|
|
|
showMore() {
|
|
|
@@ -484,6 +484,10 @@ export default {
|
|
|
return name.split('·')[0];
|
|
|
}
|
|
|
return this.blindCollectionInfo.name;
|
|
|
+ },
|
|
|
+ pageHeight() {
|
|
|
+ let height = this.appHeight.replace(/px/, '');
|
|
|
+ return Number(height);
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
@@ -531,11 +535,11 @@ export default {
|
|
|
};
|
|
|
} else if (!this.windowVertical) {
|
|
|
return {
|
|
|
- height: 32 + 'vh'
|
|
|
+ height: this.accMul(0.32, this.pageHeight) + 'px'
|
|
|
};
|
|
|
} else {
|
|
|
return {
|
|
|
- height: 35 + 'vh'
|
|
|
+ height: this.accMul(0.35, this.pageHeight) + 'px'
|
|
|
};
|
|
|
}
|
|
|
},
|
|
|
@@ -548,13 +552,13 @@ export default {
|
|
|
};
|
|
|
} else if (!this.windowVertical) {
|
|
|
return {
|
|
|
- width: '210vh',
|
|
|
- paddingRight: '20.3vh'
|
|
|
+ width: this.accMul(2.1, this.pageHeight) + 'px',
|
|
|
+ paddingRight: this.accMul(0.203, this.pageHeight) + 'px'
|
|
|
};
|
|
|
} else {
|
|
|
return {
|
|
|
- width: '200vh',
|
|
|
- paddingRight: '20.5vh'
|
|
|
+ width: this.accMul(2, this.pageHeight) + 'px',
|
|
|
+ paddingRight: this.accMul(0.205, this.pageHeight) + 'px'
|
|
|
};
|
|
|
}
|
|
|
} else {
|
|
|
@@ -565,13 +569,19 @@ export default {
|
|
|
};
|
|
|
} else if (!this.windowVertical) {
|
|
|
return {
|
|
|
- width: num * 49 + 'vh',
|
|
|
- paddingRight: num == 4 ? '26.5vh' : '10vh'
|
|
|
+ width: this.accMul((num * 49) / 100, this.pageHeight) + 'px',
|
|
|
+ paddingRight:
|
|
|
+ num == 4
|
|
|
+ ? this.accMul(0.265, this.pageHeight) + 'px'
|
|
|
+ : this.accMul(0.1, this.pageHeight) + 'px'
|
|
|
};
|
|
|
} else {
|
|
|
return {
|
|
|
- width: Math.round(num / 2) * 22 + 'vh',
|
|
|
- paddingRight: Math.round(num / 2) == 9 ? '23vh' : '10vh'
|
|
|
+ width: this.accMul((Math.round(num / 2) * 22) / 100, this.pageHeight) + 'px',
|
|
|
+ paddingRight:
|
|
|
+ Math.round(num / 2) == 9
|
|
|
+ ? this.accMul(0.23, this.pageHeight) + 'px'
|
|
|
+ : this.accMul(0.1, this.pageHeight) + 'px'
|
|
|
};
|
|
|
}
|
|
|
}
|
|
|
@@ -620,18 +630,20 @@ export default {
|
|
|
if (!this.isVertical) {
|
|
|
return num * 49 + 'vw';
|
|
|
} else if (!this.windowVertical) {
|
|
|
- return num * 49 + 'vh';
|
|
|
+ return this.accMul((num * 49) / 100, this.pageHeight) + 'px';
|
|
|
} else {
|
|
|
- return Math.round(num / 2) * 22 + 'vh';
|
|
|
+ return this.accMul((Math.round(num / 2) * 22) / 100, this.pageHeight) + 'px';
|
|
|
}
|
|
|
},
|
|
|
getRight(num = 1) {
|
|
|
if (!this.isVertical) {
|
|
|
return '36vw';
|
|
|
} else if (!this.windowVertical) {
|
|
|
- return num == 4 ? '26.5vh' : '10vh';
|
|
|
+ return num == 4 ? this.accMul(0.265, this.pageHeight) : this.accMul(0.1, this.pageHeight);
|
|
|
} else {
|
|
|
- return Math.round(num / 2) == 9 ? '23vh' : '10vh';
|
|
|
+ return Math.round(num / 2) == 9
|
|
|
+ ? this.accMul(0.23, this.pageHeight)
|
|
|
+ : this.accMul(0.1, this.pageHeight);
|
|
|
}
|
|
|
},
|
|
|
share() {
|
|
|
@@ -884,7 +896,6 @@ export default {
|
|
|
background-color: #1c1c1c;
|
|
|
overflow: auto;
|
|
|
width: 100vw;
|
|
|
- height: 100vh;
|
|
|
height: var(--app-height);
|
|
|
}
|
|
|
.swiper-content {
|
|
|
@@ -894,7 +905,6 @@ export default {
|
|
|
& > div {
|
|
|
flex-shrink: 0;
|
|
|
}
|
|
|
- height: 100vh;
|
|
|
height: var(--app-height);
|
|
|
}
|
|
|
.user-bg {
|
|
|
@@ -911,7 +921,7 @@ export default {
|
|
|
}
|
|
|
.user {
|
|
|
width: 130px;
|
|
|
- padding: 23vh 0 0 30px;
|
|
|
+ padding: calc(0.23 * var(--app-height)) 0 0 30px;
|
|
|
position: absolute;
|
|
|
left: 0;
|
|
|
background-image: none;
|
|
|
@@ -1020,23 +1030,23 @@ export default {
|
|
|
flex-wrap: wrap;
|
|
|
// padding: 0 10vw;
|
|
|
// width: 259vh;
|
|
|
- height: 45vh;
|
|
|
- padding: 0 10vh 0 23vh;
|
|
|
- margin-top: 18.5vh;
|
|
|
- min-width: calc(100vw - 33vh);
|
|
|
+ height: calc(var(--app-height) * 0.45);
|
|
|
+ padding: 0 calc(var(--app-height) * 0.1) 0 calc(var(--app-height) * 0.23);
|
|
|
+ margin-top: calc(var(--app-height) * 0.185);
|
|
|
+ min-width: calc(100vw - calc(var(--app-height) * 0.33));
|
|
|
&.blindContent {
|
|
|
- margin-top: 22vh;
|
|
|
+ margin-top: calc(var(--app-height) * 0.22);
|
|
|
}
|
|
|
.icon {
|
|
|
- padding: 3vh 0;
|
|
|
+ padding: calc(var(--app-height) * 0.03) 0;
|
|
|
|
|
|
.flex();
|
|
|
justify-content: center;
|
|
|
- width: 22vh;
|
|
|
+ width: calc(var(--app-height) * 0.22);
|
|
|
box-sizing: border-box;
|
|
|
position: relative;
|
|
|
&.blind {
|
|
|
- width: 205vh;
|
|
|
+ width: calc(var(--app-height) * 2.05);
|
|
|
justify-content: flex-start;
|
|
|
}
|
|
|
img {
|
|
|
@@ -1088,13 +1098,13 @@ export default {
|
|
|
border-radius: 12px;
|
|
|
border: 1px solid #ffffff;
|
|
|
backdrop-filter: blur(30px);
|
|
|
- padding: 2vh 0 2vh 2vh !important;
|
|
|
+ padding: calc(var(--app-height) * 0.02) 0 calc(var(--app-height) * 0.02) calc(var(--app-height) * 0.02) !important;
|
|
|
align-items: flex-start !important;
|
|
|
.boxs {
|
|
|
- padding-left: 5vh;
|
|
|
+ padding-left: calc(var(--app-height) * 0.05);
|
|
|
flex-grow: 1;
|
|
|
.boxs-text {
|
|
|
- padding-right: 8vh;
|
|
|
+ padding-right: calc(var(--app-height) * 0.08);
|
|
|
}
|
|
|
}
|
|
|
.boxs-text {
|
|
|
@@ -1112,7 +1122,7 @@ export default {
|
|
|
overflow: hidden;
|
|
|
align-items: flex-start;
|
|
|
.blind-img {
|
|
|
- margin: 0 5vh 2vh 0;
|
|
|
+ margin: 0 calc(var(--app-height) * 0.05) calc(var(--app-height) * 0.02) 0;
|
|
|
position: relative;
|
|
|
.blind-price {
|
|
|
padding: 4px;
|
|
|
@@ -1232,16 +1242,16 @@ export default {
|
|
|
}
|
|
|
.windowHorizontal {
|
|
|
.user {
|
|
|
- width: 95vh;
|
|
|
+ width: calc(var(--app-height) * 0.95);
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
position: relative;
|
|
|
- padding: 22vh 0 0 60px;
|
|
|
+ padding: calc(var(--app-height) * 0.22) 0 0 60px;
|
|
|
box-sizing: border-box;
|
|
|
.sub-box {
|
|
|
position: absolute;
|
|
|
bottom: 0px;
|
|
|
- left: calc(35vh + 70px);
|
|
|
+ left: calc(var(--app-height) * 0.35 + 70px);
|
|
|
.sub {
|
|
|
padding-top: 0;
|
|
|
}
|
|
|
@@ -1249,8 +1259,8 @@ export default {
|
|
|
.name {
|
|
|
margin-left: 10px;
|
|
|
padding-top: 0;
|
|
|
- font-size: 6.4vh;
|
|
|
- line-height: 8vh;
|
|
|
+ font-size: calc(var(--app-height) * 0.064);
|
|
|
+ line-height: calc(var(--app-height) * 0.08);
|
|
|
display: block;
|
|
|
overflow: hidden;
|
|
|
& > div {
|
|
|
@@ -1270,34 +1280,34 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.imgs {
|
|
|
- height: 42vh;
|
|
|
+ height: calc(var(--app-height) * 0.42);
|
|
|
flex-direction: row;
|
|
|
- padding: 0 23vh;
|
|
|
- min-width: calc(100vw - 128vh);
|
|
|
- margin-top: 20vh;
|
|
|
+ padding: 0 calc(var(--app-height) * 0.23);
|
|
|
+ min-width: calc(100vw - var(--app-height) * 1.28);
|
|
|
+ margin-top: calc(var(--app-height) * 0.2);
|
|
|
&.blindContent {
|
|
|
- padding: 0 15vh;
|
|
|
+ padding: 0 calc(var(--app-height) * 0.15);
|
|
|
}
|
|
|
.icon {
|
|
|
// padding: 15vh 0;
|
|
|
padding: 0 0;
|
|
|
- width: 49vh;
|
|
|
- padding-bottom: 4vh;
|
|
|
+ width: calc(var(--app-height) * 0.49);
|
|
|
+ padding-bottom: calc(var(--app-height) * 0.04);
|
|
|
|
|
|
&.blind {
|
|
|
- width: 88vh;
|
|
|
- padding: 12px 0 12px 6vh !important;
|
|
|
+ width: calc(var(--app-height) * 0.88);
|
|
|
+ padding: 12px 0 12px calc(var(--app-height) * 0.06) !important;
|
|
|
align-items: center !important;
|
|
|
.boxs {
|
|
|
- padding-left: 6vh;
|
|
|
+ padding-left: calc(var(--app-height) * 0.06);
|
|
|
.boxs-text {
|
|
|
- padding-bottom: 3vh;
|
|
|
+ padding-bottom: calc(var(--app-height) * 0.03);
|
|
|
}
|
|
|
}
|
|
|
- width: 210vh;
|
|
|
+ width: calc(var(--app-height) * 2.1);
|
|
|
.blind-imgs {
|
|
|
.blind-img {
|
|
|
- margin: 0 5vh 5vh 0;
|
|
|
+ margin: 0 calc(var(--app-height) * 0.05) calc(var(--app-height) * 0.05) 0;
|
|
|
|
|
|
.blind-price {
|
|
|
font-size: 12px;
|
|
|
@@ -1305,9 +1315,9 @@ export default {
|
|
|
line-height: 10px;
|
|
|
position: absolute;
|
|
|
padding: 0;
|
|
|
- top: 11vh;
|
|
|
+ top: calc(var(--app-height) * 0.11);
|
|
|
left: 0;
|
|
|
- width: 11vh;
|
|
|
+ width: calc(var(--app-height) * 0.11);
|
|
|
text-align: center;
|
|
|
background-color: transparent;
|
|
|
transform: scale(0.8);
|
|
|
@@ -1322,7 +1332,7 @@ export default {
|
|
|
|
|
|
.user-bg {
|
|
|
.user-bg-img {
|
|
|
- width: calc(95vh + 0.5px);
|
|
|
+ width: calc(calc(var(--app-height) * 0.95) + 0.5px);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -1331,7 +1341,7 @@ export default {
|
|
|
left: 60px;
|
|
|
}
|
|
|
.img-bg {
|
|
|
- min-width: calc(100vw - 95vh);
|
|
|
+ min-width: calc(100vw - var(--app-height) * 0.95);
|
|
|
}
|
|
|
|
|
|
.parallax-bg-img {
|
|
|
@@ -1356,14 +1366,13 @@ export default {
|
|
|
height: 600%;
|
|
|
}
|
|
|
.parallax-bg-img {
|
|
|
- width: 600vh;
|
|
|
+ width: calc(var(--app-height) * 6);
|
|
|
height: 100vw;
|
|
|
transform: rotate(90deg) translateX(-100vw);
|
|
|
transform-origin: left bottom;
|
|
|
}
|
|
|
.img-bg {
|
|
|
- min-height: calc(100vh - 95vw);
|
|
|
- min-height: calc(var(--app-height) - 95vh);
|
|
|
+ min-height: calc(var(--app-height) - 95vw);
|
|
|
}
|
|
|
.user-bg {
|
|
|
height: 95vw;
|
|
|
@@ -1509,7 +1518,6 @@ export default {
|
|
|
// transform-origin: bottom;
|
|
|
top: 0;
|
|
|
left: auto;
|
|
|
- height: 100vh;
|
|
|
height: var(--app-height);
|
|
|
width: 40px;
|
|
|
flex-direction: column;
|
