处理底部兼容

src/components/Bottom.vue

@@ -50,7 +50,6 @@ import Logo from '@/static/img/index/12.png'
 
 <style lang="scss" scoped>
 .bottom_text_container {
-  height: 300px;
   box-sizing: border-box;
   background: url(../static/img/index/11.png) no-repeat;
   background-size: 100% 100%;
@@ -69,6 +68,7 @@ import Logo from '@/static/img/index/12.png'
       align-items: center;
       justify-content: space-between;
       width: 611px;
+      white-space: nowrap;
       font-size: 14px;
       font-weight: 300;
       color: #e3e3e3;
@@ -111,6 +111,9 @@ import Logo from '@/static/img/index/12.png'
     flex-direction: column;
     justify-content: space-between;
     word-break: break-all;
+    .text1 {
+      margin-bottom: 66px;
+    }
   }
 }
 </style>

src/components/Header.vue

@@ -2,7 +2,9 @@
   <div
     id="header_container_height"
     :class="
-      detail
+      overview
+        ? 'header_container over_header'
+        : detail
         ? 'header_container detail_header'
         : noFirst
         ? 'header_container noFirst_header'
@@ -176,6 +178,9 @@ const props = defineProps({
   noFirst: {
     type: Boolean,
   },
+  overview: {
+    type: Boolean,
+  },
 })
 onMounted(() => {
   const path = route.path
@@ -275,6 +280,9 @@ const toHome = () => {
     color: #000;
   }
 }
+.over_header {
+  position: static;
+}
 .noFirst_header {
   background: #ffffff;
   border-bottom: solid 1px #ededed;

src/components/about/About.vue

@@ -6,11 +6,41 @@
       line2="软件研发团队、结构研发团队、外观研发团队也能帮您研发设计其他产品。"
     />
     <div class="idea_cards">
-      <div class="one_card"></div>
-      <div class="one_card"></div>
-      <div class="one_card"></div>
-      <div class="one_card"></div>
-      <div class="one_card"></div>
+      <div class="one_card">
+        <p class="title">文档是我们宝贵的财富</p>
+        <p class="content">
+          需求文档、研发文档、实验文档、 会议记录、量产文档每个项目的
+          历史错误总结文档。
+        </p>
+      </div>
+      <div class="one_card">
+        <p class="title">文档是我们宝贵的财富</p>
+        <p class="content">
+          需求文档、研发文档、实验文档、 会议记录、量产文档每个项目的
+          历史错误总结文档。
+        </p>
+      </div>
+      <div class="one_card">
+        <p class="title">文档是我们宝贵的财富</p>
+        <p class="content">
+          需求文档、研发文档、实验文档、 会议记录、量产文档每个项目的
+          历史错误总结文档。
+        </p>
+      </div>
+      <div class="one_card">
+        <p class="title">文档是我们宝贵的财富</p>
+        <p class="content">
+          需求文档、研发文档、实验文档、 会议记录、量产文档每个项目的
+          历史错误总结文档。
+        </p>
+      </div>
+      <div class="one_card">
+        <p class="title">文档是我们宝贵的财富</p>
+        <p class="content">
+          需求文档、研发文档、实验文档、 会议记录、量产文档每个项目的
+          历史错误总结文档。
+        </p>
+      </div>
     </div>
   </div>
 </template>
@@ -29,7 +59,26 @@ import HeadLine from '@/components/HeadLine'
     margin: 0 auto;
     margin-top: 77px;
     height: 479px;
-    background: #5064f4;
+    background: #5d77a8;
+    .one_card {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 80px 70px;
+      height: 100%;
+      box-sizing: border-box;
+      font-size: 16px;
+      font-weight: 400;
+      color: #ffffff;
+      border: solid 1px #ddd;
+      .title {
+        margin-bottom: 80px;
+      }
+      .content {
+        line-height: 27px;
+      }
+    }
   }
 }
 </style>

src/components/about/Overview.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="about_overview_container">
-    <Header />
+    <Header :overview="true" />
     <h1 class="en">ABOUT US</h1>
   </div>
 </template>