移动端适配

src/pages/media/index.vue

@@ -113,12 +113,13 @@
 
 <style scoped lang="less">
 	.media {
+		--bg-height: 464px;
 		> * {
 			position: relative;
 			z-index: 1;
 		}
 		> .bg {
-			height: 464px;
+			height: var(--bg-height);
 			width: 100%;
 			object-fit: cover;
 			position: fixed;
@@ -126,7 +127,7 @@
 			z-index: 0;
 		}
 		> .header {
-			height: 464px;
+			height: var(--bg-height);
 			display: flex;
 			align-items: center;
 			justify-content: center;
@@ -140,10 +141,11 @@
 		> .content {
 			width: 100%;
 			padding: 100px 0;
-			background-color: #fff;
+			background-color: #f9f9f9;
 			font-size: 14px;
 			> .box {
 				max-width: 1140px;
+				padding: 0 20px;
 				margin: 0 auto;
 				> .nav {
 					display: flex;
@@ -174,5 +176,31 @@
 				}
 			}
 		}
+		@media (max-width: 800px) {
+			--bg-height: 239px;
+			> .content {
+				padding: 30px 0;
+				> .box {
+					> .nav {
+						margin-bottom: 20px;
+					}
+					> .list {
+						padding: 0;
+						> div {
+							> .date {
+								min-width: 0;
+								width: 25%;
+								margin-right: 10px;
+								color: #999;
+								flex-shrink: 0;
+							}
+							> .text {
+								color: #222;
+							}
+						}
+					}
+				}
+			}
+		}
 	}
 </style>