首选商

src/components/Summarize.vue

@@ -1,30 +1,38 @@
 <template>
   <div class="summarize_container">
     <div class="title_wrap">
-      <h5 class="small_tag">品质的设计服务于临床</h5>
-      <h1 class="main_title">医疗产品设计首选服务商</h1>
-      <p class="desc">
+      <h1 class="main_title">
+        产品设计<span class="theme_color">首选服务商</span>
+      </h1>
+      <p class="desc mb">
         专注医疗器械一站式高品质的创新设计服务，从概念导入到产品现实加工落地
         为企业精准制定，快速截获市场先机
       </p>
-      <div class="number_wrap mb">
-        <div class="text_wrap">
-          <span class="blue">15</span>
-          <span>年历程</span>
+      <div class="four">
+        <div class="number_wrap mb">
+          <div class="text_wrap">
+            <div class="first">
+              <span class="blue">15</span>
+              <span>年发展</span>
+            </div>
+            <p class="two">历程</p>
+          </div>
+          <div class="text_wrap">
+            <div class="first">
+              <span class="blue">100W+</span>
+            </div>
+            <span class="two">量产</span>
+          </div>
         </div>
-        <div class="text_wrap">
-          <span class="blue">300+</span>
-          <span>客户</span>
-        </div>
-      </div>
-      <div class="number_wrap">
-        <div class="text_wrap">
-          <span class="blue">100W+</span>
-          <span>量产</span>
-        </div>
-        <div class="text_wrap">
-          <span class="blue">500+</span>
-          <span>项目</span>
+        <div class="number_wrap">
+          <div class="text_wrap">
+            <div class="first"><span class="blue">300+</span></div>
+            <span class="two">客户</span>
+          </div>
+          <div class="text_wrap">
+            <div class="first"><span class="blue">500+</span></div>
+            <span class="two">项目</span>
+          </div>
         </div>
       </div>
     </div>
@@ -35,8 +43,9 @@
 
 <style lang="scss" scoped>
 .summarize_container {
-  padding: 29px 48px 43px 48px;
-  background: #f1f1f1;
+  padding: 43px 0 49px 0;
+  box-sizing: border-box;
+  background: #fff;
   .title_wrap {
     display: flex;
     flex-direction: column;
@@ -49,42 +58,63 @@
       margin-bottom: 16px;
     }
     .main_title {
-      font-size: 17px;
-      font-family: Alibaba PuHuiTi;
-      font-weight: 400;
+      font-size: 15px;
+      font-family: Source Han Sans CN;
+      font-weight: 500;
       color: #262626;
-      margin-bottom: 18px;
+      margin-bottom: 27px;
+      .theme_color {
+        color: #f94622;
+      }
     }
     .desc {
       font-size: 7px;
-      font-family: Alibaba PuHuiTi;
-      font-weight: 400;
+      font-family: Source Han Sans CN;
+      font-weight: 300;
       color: #959595;
       line-height: 16px;
       text-align: center;
-      margin-bottom: 41px;
+      padding: 0 10px;
     }
     .mb {
       margin-bottom: 50px;
     }
-    .number_wrap {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
+    .four {
+      padding: 0 48px;
+      box-sizing: border-box;
       width: 100%;
-      .text_wrap {
+
+      .number_wrap {
         display: flex;
         align-items: center;
-        font-size: 17px;
-        font-family: Source Han Sans CN;
-        font-weight: 400;
-        color: #000000;
-        .blue {
-          font-size: 23px;
-          font-family: Zona Pro;
-          font-weight: 900;
-          color: #283fe7;
-          margin-right: 9px;
+        justify-content: space-between;
+        width: 100%;
+        .text_wrap {
+          display: flex;
+          align-items: center;
+          flex-direction: column;
+          font-size: 16px;
+          font-family: Source Han Sans CN;
+          font-weight: bold;
+          color: #000000;
+          .first {
+            display: flex;
+            align-items: center;
+            margin-bottom: 14px;
+            .blue {
+              font-size: 24px;
+              font-family: Zona Pro;
+              font-weight: 900;
+              color: #000000;
+              margin-right: 6px;
+            }
+          }
+          .two {
+            font-size: 13px;
+            font-family: Source Han Sans CN;
+            font-weight: 400;
+            color: #000000;
+          }
         }
       }
     }