fix: 优化移动端布局

content/main.js

@@ -22,7 +22,7 @@ class Home {
 					this.init();
 				}
 			}
-		}, 100);
+		}, 233);
 	}
 
 	static async init() {
@@ -154,13 +154,13 @@ class Home {
 		// 只判断第一张海报加载完毕, 优化加载速度
 		await new Promise((resolve, reject) => {
 			let waitLoading = setInterval(() => {
-				if (document.querySelector(".misty-banner-cover").complete) {
+				if (document.querySelector(".misty-banner-cover")?.complete) {
 					clearInterval(waitLoading);
 					resolve();
 				}
 			}, 16);
 		});
-		
+
 		// 判断section0加载完毕
 		await new Promise((resolve, reject) => {
 			let waitsection0 = setInterval(() => {
@@ -170,15 +170,17 @@ class Home {
 				}
 			}, 16);
 		});
-		
+
 		$(".view:not(.hide) .section0 .emby-scrollbuttons").remove();
 		const items = $(".view:not(.hide) .section0 .emby-scroller .itemsContainer")[0].items;
-		$(".view:not(.hide) .section0").detach().appendTo(".view:not(.hide) .misty-banner-library");
-		
+		if (CommonUtils.checkType() === 'pc') {
+			$(".view:not(.hide) .section0").detach().appendTo(".view:not(.hide) .misty-banner-library");
+		}
+
 		$(".misty-loading").fadeOut(500, () => $(".misty-loading").remove());
 		await CommonUtils.sleep(150);
 		$(".view:not(.hide) .section0 .emby-scroller .itemsContainer")[0].items = items;
-		
+
 		// 置入场动画
 		let delay = 80; // 动媒体库画间隔
 		let id = $(".misty-banner-item").eq(0).addClass("active").attr("id"); // 初次信息动画

static/css/style.css

@@ -197,7 +197,8 @@
 	height: -webkit-fill-available;
 	display: flex;
 	flex-direction: column;
-	justify-content: center
+	justify-content: center;
+	box-sizing: border-box;
 }
 
 .misty-banner-info > * {
@@ -226,10 +227,9 @@
 	text-shadow: 0 4px 10px rgb(0 0 0 / 20%);
 	/* margin-bottom: clamp(0rem, -.545rem + 2.73vw, 1.5rem); */
 	max-width: 80%;
-	display: -webkit-box !important;
-	-webkit-box-orient: vertical;
-	-webkit-line-clamp: 1;
+	white-space: nowrap;
 	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 .misty-banner-info p {
@@ -269,23 +269,33 @@
 
 @media screen and (max-width: 62.5em) {
 	.misty-banner-info button {
-		margin-top: 0;
-	}
-}
-@media screen and (max-width: 52em) {
-	.misty-banner-info button,
-	.misty-banner-info p {
-		display: none;
+		position: absolute;
+		right: 2rem;
+		bottom: 2rem;
 	}
 }
 
 @media screen and (max-width: 35em) {
-	.misty-banner-info,
+	.misty-banner-info{
+		height: auto;
+		bottom: 0;
+		top: unset;
+
+		> div > p {
+			font-size: 1rem;
+		}
+
+		button{
+			transition-duration: 0s;
+			transition-delay: 0s;
+		}
+	}
 	.misty-banner-logo 	{
 		display: none !important;
 	}
-	.misty-banner-body{
-		opacity: 0;
+
+	.section0>div>div>.backdropCard {
+		--backdrop-cards: 1.5;
 	}
 }
 

static/js/common-utils.js

@@ -60,4 +60,16 @@ class CommonUtils {
 			}, ms);
 		});
 	}
+
+	static checkType() {
+		if (navigator && navigator.userAgent && /Mobi|Android|iPhone/i.test(navigator.userAgent)) {
+			if (navigator && navigator.userAgent && /(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
+				return 'ios';
+			} else {
+				return 'android';
+			}
+		} else {
+			return 'pc';
+		}
+	};
 }