案例展示

src/components/CaseShow.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="case_show_container">
+    <HeadLine />
+    <div class="line_cards">
+      <div class="card"></div>
+      <div class="card"></div>
+    </div>
+    <div class="line_cards nomg">
+      <div class="card"></div>
+      <div class="card"></div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import HeadLine from 'cpns/HeadLine'
+</script>
+
+<style lang="scss" scoped>
+.case_show_container {
+  .line_cards {
+    margin-top: 35px;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    .card {
+      flex: 1;
+      height: 162px;
+      background: #000;
+    }
+  }
+  .nomg {
+    margin-top: 0;
+  }
+}
+</style>

src/components/HeadLine.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="headline_container">
+    <h2 class="title_h2">案例展示</h2>
+    <p class="line1">医疗健康、智能硬件、工业设备、高铁设备、户外设备</p>
+    <p class="line2">特种设备、智能家居、实验仪器、消费电子</p>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.headline_container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .title_h2 {
+    font-size: 13px;
+    font-family: Alibaba PuHuiTi;
+    font-weight: 500;
+    color: #000000;
+    margin-bottom: 9px;
+  }
+  .line1 {
+    font-size: 7px;
+    font-family: Alibaba PuHuiTi;
+    font-weight: 300;
+    color: #595959;
+    line-height: 9px;
+  }
+  .line2 {
+    font-size: 7px;
+    font-family: Alibaba PuHuiTi;
+    font-weight: 300;
+    color: #595959;
+    line-height: 9px;
+    margin-top: 4px;
+  }
+}
+</style>

src/components/Summarize.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="summarize_container">
+    <div class="title_wrap">
+      <h5 class="small_tag">品质的设计服务于临床</h5>
+      <h1 class="main_title">医疗产品设计首选服务商</h1>
+      <p class="desc">
+        专注医疗器械一站式高品质的创新设计服务，从概念导入到产品现实加工落地
+        为企业精准制定，快速截获市场先机
+      </p>
+      <div class="number_wrap mb">
+        <div class="text_wrap">
+          <span class="blue">15</span>
+          <span>年历程</span>
+        </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>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.summarize_container {
+  padding: 29px 48px 43px 48px;
+  background: #f1f1f1;
+  .title_wrap {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .small_tag {
+      font-size: 7px;
+      font-family: Alibaba PuHuiTi;
+      font-weight: 400;
+      color: #959595;
+      margin-bottom: 16px;
+    }
+    .main_title {
+      font-size: 17px;
+      font-family: Alibaba PuHuiTi;
+      font-weight: 400;
+      color: #262626;
+      margin-bottom: 18px;
+    }
+    .desc {
+      font-size: 7px;
+      font-family: Alibaba PuHuiTi;
+      font-weight: 400;
+      color: #959595;
+      line-height: 16px;
+      text-align: center;
+      margin-bottom: 41px;
+    }
+    .mb {
+      margin-bottom: 50px;
+    }
+    .number_wrap {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      .text_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;
+        }
+      }
+    }
+  }
+}
+</style>

src/pages/index.vue

@@ -1,9 +1,13 @@
 <template>
-  <div>index</div>
+  <div>
+    <Summarize />
+    <CaseShow />
+  </div>
 </template>
 
-<script>
-export default {}
+<script setup>
+import Summarize from 'cpns/Summarize'
+import CaseShow from 'cpns/CaseShow'
 </script>
 
 <style></style>

vite.config.js

@@ -35,7 +35,7 @@ export default defineConfig({
         }),
         postcsspxtoviewport({
           unitToConvert: 'px', // 要转化的单位
-          viewportWidth: 1080, // UI设计稿的宽度
+          viewportWidth: 375, // UI设计稿的宽度
           unitPrecision: 6, // 转换后的精度，即小数点位数
           propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
           viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw