123

src/views/Index/components/Service/index.vue

@@ -1,11 +1,12 @@
 <template>
   <div class="wrap">
     <div class="empty" v-if="showEmpty"></div>
-    <div class="service_container" id="service_container">
+    <div id="flex_center_service" class="flex_center">
       <div class="contract_title">
         <p class="line"></p>
         <p class="title">业务范围</p>
       </div>
+      <div class="service_container" id="service_container">
         <div class="content">
           <div class="main" id="servive_big_title_ani">
             <h1 class="big_title">
@@ -36,6 +37,7 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <script setup>
@@ -55,24 +57,20 @@ const showEmpty = ref(true)
   height: 100vh;
   background: $common_bg;
   position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
   .empty {
     min-height: 90px;
   }
-  .service_container {
+  .flex_center {
     width: 100%;
     height: 100%;
-    position: absolute;
-    top: 90px;
     display: flex;
     flex-direction: column;
-    .empty {
-      min-height: 90px;
-    }
+    justify-content: space-between;
+    flex: 1;
     .contract_title {
-      position: absolute;
-      left: 50%;
-      top: -60px;
-      transform: translateX(-50%);
       display: flex;
       align-items: center;
       justify-content: center;
@@ -92,7 +90,7 @@ const showEmpty = ref(true)
         margin-bottom: 12px;
       }
       .title {
-        font-size: 30px;
+        font-size: 24px;
         font-weight: bold;
         color: #000000;
         margin-bottom: 21px;
@@ -101,6 +99,17 @@ const showEmpty = ref(true)
         }
       }
     }
+    .service_container {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 90px;
+      display: flex;
+      flex-direction: column;
+      .empty {
+        min-height: 90px;
+      }
+
       .content {
         flex: 1;
         display: flex;
@@ -171,4 +180,5 @@ const showEmpty = ref(true)
       }
     }
   }
+}
 </style>