fix: 首页移动端适配

src/components/HomePageFooter.vue

@@ -116,4 +116,29 @@ export default {
   height: 90px;
   margin-left: 20px;
 }
+
+@media screen and (max-width: 1000px) {
+  .home-page-footer {
+    flex-direction: column-reverse;
+  }
+
+  .footer-link-item {
+    margin-right: 10px;
+    font-size: 12px;
+    padding-bottom: 8px !important;
+  }
+
+  .footer-text {
+    font-size: 12px;
+  }
+
+  .footer-left {
+    border-right: none;
+  }
+
+  .footer-right {
+    padding-left: 0;
+    margin-bottom: 20px;
+  }
+}
 </style>

src/components/HomePageHeader.vue

@@ -80,7 +80,7 @@ export default {
 <style lang="scss" scoped>
 .home-page-header {
   width: 100%;
-  height: 70px;
+  height: var(--header-height);
   position: fixed;
   top: 0;
   left: 0;
@@ -214,4 +214,15 @@ export default {
   cursor: pointer;
   transition: 0.3s;
 }
+
+@media screen and (max-width: 1000px) {
+  .home-page-header {
+    justify-content: flex-start;
+    padding-left: 5%;
+  }
+
+  .header-nav {
+    display: none;
+  }
+}
 </style>

src/styles/index.scss

@@ -3,6 +3,13 @@
 
 :root {
   --primary-color: #e28e39;
+  --header-height: 70px;
+}
+
+@media screen and (max-width: 1000px) {
+  :root {
+    --header-height: 50px;
+  }
 }
 
 html,

src/views/Home/HomePageWrapper.vue

@@ -28,6 +28,6 @@ export default {
 </script>
 <style lang="scss">
 .home-page-content {
-  padding-top: 70px;
+  padding-top: var(--header-height);
 }
 </style>

src/views/Home/IndexPage.vue

@@ -331,4 +331,78 @@ export default {
   text-decoration: none;
   cursor: pointer;
 }
+
+@media screen and (max-width: 1000px) {
+  .intro-video-wrapper {
+    background-image: none;
+    padding-top: 20px;
+  }
+
+  .intro-wrapper {
+    position: static;
+    color: #000;
+    padding: 0 5%;
+  }
+
+  .intro-content {
+    color: #787878;
+    width: unset;
+  }
+
+  .services-intro {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto auto;
+
+    .left-image {
+      grid-row: 1 / 2;
+      grid-column: 1 / 2;
+    }
+
+    .services-intro-text {
+      grid-row: 2 / 3;
+      grid-column: 1 / 3;
+      padding: 30px 5%;
+    }
+
+    .right-image {
+      grid-row: 1 / 2;
+      grid-column: 2 / 3;
+    }
+  }
+
+  .news-report {
+    padding: 30px 5%;
+    align-items: stretch;
+  }
+
+  .news-item {
+    flex: unset;
+    width: 100%;
+    padding-top: 72%;
+  }
+
+  .news-report-title,
+  .news-wrapper {
+    width: unset;
+  }
+
+  .news-wrapper {
+    gap: 10px;
+  }
+
+  .news-title {
+    font-size: 14px;
+  }
+
+  .news-brief {
+    display: block !important;
+    opacity: 1 !important;
+    font-size: 12px;
+  }
+
+  .news-summary::before {
+    display: none;
+  }
+}
 </style>