头部和mixi适配移动端

src/pages/mixi/index.vue

@@ -123,9 +123,9 @@
 			z-index: 1;
 			background-color: #f9f9f9;
 		}
-
+		--bg-height: 500px;
 		> .bg {
-			height: 500px;
+			height: var(--bg-height);
 			width: 100%;
 			object-fit: cover;
 			position: fixed;
@@ -133,7 +133,7 @@
 			z-index: 0;
 		}
 		> .header {
-			height: 500px;
+			height: var(--bg-height);
 			display: flex;
 			align-items: center;
 			justify-content: center;
@@ -238,7 +238,8 @@
 					height: auto;
 				}
 				> .panel {
-					width: 400px;
+					max-width: 400px;
+					width: 60%;
 					height: auto;
 					position: absolute;
 					right: 80px;
@@ -304,7 +305,7 @@
 		}
 		> .email-input {
 			position: relative;
-			padding-bottom: 250px;
+			padding-bottom: 100px;
 			> img {
 				width: 100%;
 				height: auto;
@@ -314,10 +315,80 @@
 			}
 			> .email-box {
 				max-width: 860px;
-				position: absolute;
-				bottom: 100px;
-				left: 50%;
-				transform: translateX(-50%);
+				position: relative;
+				margin-top: -150px;
+			}
+		}
+		@media (max-width: 800px) {
+			--bg-height: 275px;
+			> .introduce {
+				padding: 20px;
+				> .box {
+					> .tip {
+						font-size: 12px;
+					}
+				}
+			}
+			> .video {
+				padding: 40px 20px;
+			}
+			> .key-features {
+				flex-direction: column;
+				align-items: inherit;
+				padding: 20px;
+				> .left {
+					> .bg {
+						max-width: inherit;
+					}
+					> .panel {
+						right: 50px;
+						bottom: 0px;
+					}
+				}
+				> .right {
+					> .title {
+						font-size: 36px;
+					}
+					> ul > li {
+						font-size: 12px;
+					}
+				}
+			}
+			> .industry {
+				padding: 20px;
+				> .content {
+					> .title {
+						font-size: 36px;
+					}
+					> .box {
+						flex-direction: column;
+						gap: 0;
+						> div {
+							padding: 20px;
+							> img {
+								width: 100px;
+								height: 100px;
+								margin-top: 0;
+								margin-bottom: 0;
+							}
+						}
+					}
+				}
+			}
+			> .email-input {
+				position: relative;
+				padding-bottom: 50px;
+				> img {
+					width: 100%;
+					height: auto;
+					max-height: 500px;
+					object-fit: cover;
+					display: block;
+				}
+				> .email-box {
+					width: 90%;
+					margin-top: -100px;
+				}
 			}
 		}
 	}