From a21f23a73b72d737d1373ce4600c1ca3254cb958 Mon Sep 17 00:00:00 2001
From: maochaoying <925670706@qq.com>
Date: Wed, 31 May 2023 17:55:56 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A1=88=E4=BE=8B=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CaseShow.vue  | 36 +++++++++++++++++
 src/components/HeadLine.vue  | 39 +++++++++++++++++++
 src/components/Summarize.vue | 93 ++++++++++++++++++++++++++++++++++++++++++++
 src/pages/index.vue          | 10 +++--
 vite.config.js               |  2 +-
 5 files changed, 176 insertions(+), 4 deletions(-)
 create mode 100644 src/components/CaseShow.vue
 create mode 100644 src/components/HeadLine.vue
 create mode 100644 src/components/Summarize.vue

diff --git a/src/components/CaseShow.vue b/src/components/CaseShow.vue
new file mode 100644
index 0000000..0247cee
--- /dev/null
+++ b/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>
diff --git a/src/components/HeadLine.vue b/src/components/HeadLine.vue
new file mode 100644
index 0000000..6f38aa0
--- /dev/null
+++ b/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>
diff --git a/src/components/Summarize.vue b/src/components/Summarize.vue
new file mode 100644
index 0000000..1b0fc0e
--- /dev/null
+++ b/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>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 981917d..2e95543 100644
--- a/src/pages/index.vue
+++ b/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>
diff --git a/vite.config.js b/vite.config.js
index 871bfdf..ea55774 100644
--- a/vite.config.js
+++ b/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