123

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

@@ -1,38 +1,40 @@
 <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="content">
-        <div class="main" id="servive_big_title_ani">
-          <h1 class="big_title">
-            <span class="blue_font"
-              >产品研发&nbsp;/&nbsp;设计&nbsp;/&nbsp;量产</span
-            >&nbsp;&nbsp;一站式服务
-          </h1>
-          <p class="article">
-            产品梦工厂一家公司全部帮您搞定<br />减少供应商数量就能有效防止供应商
-            <span class="blue_font">扯皮/推诿</span><br />不仅帮您<span
-              class="blue_font"
-              >省心、省力</span
-            ><br />还能帮您 &nbsp;
-            <span class="blue_font">节省30%的资金投入</span>
-          </p>
+      <div class="service_container" id="service_container">
+        <div class="content">
+          <div class="main" id="servive_big_title_ani">
+            <h1 class="big_title">
+              <span class="blue_font"
+                >产品研发&nbsp;/&nbsp;设计&nbsp;/&nbsp;量产</span
+              >&nbsp;&nbsp;一站式服务
+            </h1>
+            <p class="article">
+              产品梦工厂一家公司全部帮您搞定<br />减少供应商数量就能有效防止供应商
+              <span class="blue_font">扯皮/推诿</span><br />不仅帮您<span
+                class="blue_font"
+                >省心、省力</span
+              ><br />还能帮您 &nbsp;
+              <span class="blue_font">节省30%的资金投入</span>
+            </p>
+          </div>
+        </div>
+        <div class="card_wrapper">
+          <Card title="工业设计" title_en="INDUSTRIAL DESIGN" i="1" />
+          <Card title="结构设计" title_en="STRUCTURAL DESIGN" i="2" />
+          <Card title="硬件研发" title_en="HARDWARE DEVELOPMENT" i="4" />
+          <Card title="软件研发" title_en="SOFTWARE DEVELOPMENT" i="3" />
+          <Card title="样机制作" title_en="PROTOTYPE PRODUCTION" i="5" />
+          <Card title="产品量产" title_en="VOLUME PRODUCTION" i="6" />
+        </div>
+        <div class="bottom_container" id="bottom_container">
+          <p id="bottom_font_save">Save 30%</p>
         </div>
-      </div>
-      <div class="card_wrapper">
-        <Card title="工业设计" title_en="INDUSTRIAL DESIGN" i="1" />
-        <Card title="结构设计" title_en="STRUCTURAL DESIGN" i="2" />
-        <Card title="硬件研发" title_en="HARDWARE DEVELOPMENT" i="4" />
-        <Card title="软件研发" title_en="SOFTWARE DEVELOPMENT" i="3" />
-        <Card title="样机制作" title_en="PROTOTYPE PRODUCTION" i="5" />
-        <Card title="产品量产" title_en="VOLUME PRODUCTION" i="6" />
-      </div>
-      <div class="bottom_container" id="bottom_container">
-        <p id="bottom_font_save">Save 30%</p>
       </div>
     </div>
   </div>
@@ -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,73 +99,85 @@ const showEmpty = ref(true)
         }
       }
     }
-    .content {
-      flex: 1;
+    .service_container {
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      top: 90px;
       display: flex;
-      justify-content: flex-start;
-      align-content: center;
-      position: relative;
-      .main {
-        position: absolute;
-        left: 182px;
-        top: 180px;
-        font-size: 30px;
-        font-weight: bold;
-        color: #000000;
-        font-family: 'SourceHanSans';
-        .big_title {
-          transform-style: preserve-3d;
-        }
-        // .big_title::before {
-        //   content: 'ONE STOP SERVICE';
-        //   position: absolute;
-        //   font-size: 34px;
-        //   font-family: 'ZonaPro';
-        //   transform: translateZ(-1px);
-        //   font-weight: 800;
-        //   color: #f1f1f1;
-        //   left: 0;
-        //   top: -20px;
-        //   white-space: nowrap;
-        // }
-        .article {
-          margin-top: 34px;
-          font-size: 20px;
-          font-weight: 800;
-          color: #808080;
-          line-height: 38px;
-          font-family: 'SourceHanSansLight';
-        }
-        .blue_font {
-          color: $theme_color;
+      flex-direction: column;
+      .empty {
+        min-height: 90px;
+      }
+
+      .content {
+        flex: 1;
+        display: flex;
+        justify-content: flex-start;
+        align-content: center;
+        position: relative;
+        .main {
+          position: absolute;
+          left: 182px;
+          top: 180px;
+          font-size: 30px;
+          font-weight: bold;
+          color: #000000;
+          font-family: 'SourceHanSans';
+          .big_title {
+            transform-style: preserve-3d;
+          }
+          // .big_title::before {
+          //   content: 'ONE STOP SERVICE';
+          //   position: absolute;
+          //   font-size: 34px;
+          //   font-family: 'ZonaPro';
+          //   transform: translateZ(-1px);
+          //   font-weight: 800;
+          //   color: #f1f1f1;
+          //   left: 0;
+          //   top: -20px;
+          //   white-space: nowrap;
+          // }
+          .article {
+            margin-top: 34px;
+            font-size: 20px;
+            font-weight: 800;
+            color: #808080;
+            line-height: 38px;
+            font-family: 'SourceHanSansLight';
+          }
+          .blue_font {
+            color: $theme_color;
+          }
         }
       }
-    }
-    .card_wrapper {
-      z-index: 5;
-      position: absolute;
-      bottom: 160px;
-      right: 181px;
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      grid-template-rows: repeat(3, 1fr);
-      grid-row-gap: 17px;
-      grid-column-gap: 19px;
-    }
-    .bottom_container {
-      position: absolute;
-      bottom: 105px;
-      overflow: hidden;
-      left: 0;
-      right: 0;
-      background: url(../../../../assets/img/tech/1.gif) no-repeat;
-      background-size: 100% 100%;
-      font-size: 92px;
-      font-family: 'ZonaPro';
-      font-weight: 800;
-      color: #f1f1f1;
-      white-space: nowrap;
-      padding: 79px 177px;
+      .card_wrapper {
+        z-index: 5;
+        position: absolute;
+        bottom: 160px;
+        right: 181px;
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        grid-template-rows: repeat(3, 1fr);
+        grid-row-gap: 17px;
+        grid-column-gap: 19px;
+      }
+      .bottom_container {
+        position: absolute;
+        bottom: 105px;
+        overflow: hidden;
+        left: 0;
+        right: 0;
+        background: url(../../../../assets/img/tech/1.gif) no-repeat;
+        background-size: 100% 100%;
+        font-size: 92px;
+        font-family: 'ZonaPro';
+        font-weight: 800;
+        color: #f1f1f1;
+        white-space: nowrap;
+        padding: 79px 177px;
+      }
     }
   }
 }