375设计搞

src/components/AboutUs.vue

@@ -1,12 +1,16 @@
 <template>
-  <div class="about_us_card_container">about us</div>
+  <div class="about_us_card_container">
+    <HeadLine themeTitle="关于" title="我们" line1="ABOUT US" />
+  </div>
 </template>
 
-<script setup></script>
+<script setup>
+import HeadLine from 'cpns/HeadLine'
+</script>
 
 <style lang="scss" scoped>
 .about_us_card_container {
-  padding: 58px 34px 83px 34px;
-  background: #e6effc;
+  padding: 0 31px;
+  background: #ffffff;
 }
 </style>

src/components/Awards.vue

@@ -1,10 +1,13 @@
 <template>
   <div class="awards_container">
-    <div class="header_wrap">
-      <HeadLine title="荣获奖项" />
-    </div>
+    <HeadLine themeTitle="奖项" title="荣获" line1="AWARDED" />
     <div class="award_cards">
       <div class="card"></div>
+      <div class="card"></div>
+      <div class="card"></div>
+      <div class="card"></div>
+      <div class="card"></div>
+      <div class="card"></div>
     </div>
   </div>
 </template>
@@ -15,16 +18,12 @@ import HeadLine from 'cpns/HeadLine'
 
 <style lang="scss" scoped>
 .awards_container {
-  .header_wrap {
-    padding: 33px 0;
-    background: #edf0f6;
-  }
   .award_cards {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     grid-template-rows: repeat(2, 1fr);
     .card {
-      width: 100%;
+      flex: 1;
       height: 125px;
       background: #f3f4f7;
     }

src/components/CaseShow.vue

@@ -7,7 +7,17 @@
       line2="特种设备、智能家居、实验仪器、消费电子"
     />
     <div class="line_cards">
-      <div class="card"></div>
+      <div class="card">
+        <p class="title">国网照明巡检摄像头</p>
+        <div class="img_box">
+          <div class="bottom_text">
+            <p>工业设计</p>
+            <p>软硬件研发</p>
+            <p>样机制作</p>
+            <p>量产</p>
+          </div>
+        </div>
+      </div>
       <div class="card"></div>
       <div class="card"></div>
       <div class="card"></div>
@@ -40,6 +50,38 @@ import HeadLine from 'cpns/HeadLine'
       background: #ffffff;
       border-radius: 3px;
       flex: 1;
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      padding: 11px 7px 7px 7px;
+      .title {
+        font-size: 8px;
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        color: #2f2f2f;
+        padding-left: 2px;
+        margin-bottom: 11px;
+      }
+      .img_box {
+        width: 100%;
+        flex: 1;
+        position: relative;
+        .bottom_text {
+          position: absolute;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          height: 17px;
+          background: rgba(0, 0, 0, 0.2);
+          display: flex;
+          align-items: center;
+          justify-content: space-evenly;
+          font-size: 8px;
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
     }
   }
 }

src/components/Cooperation.vue

@@ -1,13 +1,31 @@
 <template>
   <div class="cooperation_container">
-    <div class="header_wrap">
-      <HeadLine
-        title="合作客户"
-        line1="医疗企业  互联网公司  智能硬件公司  科研院所  工业自动化企业"
-      />
-    </div>
+    <HeadLine
+      themeTitle="客户"
+      title="合作"
+      line1="医疗企业  互联网公司  智能硬件公司  科研院所  工业自动化企业"
+    />
     <div class="client_wrap">
       <div class="card"></div>
+      <div class="card"></div>
+      <div class="card"></div>
+      <div class="card"></div>
+      <div class="card"></div>
+      <div class="card"></div>
+      <div class="card"></div>
+      <div class="card"></div>
+      <div class="card"></div>
+      <div class="card"></div>
+      <div class="card"></div>
+      <div class="card"></div>
+      <div class="card"></div>
+      <div class="card"></div>
+      <div class="card"></div>
+      <div class="card"></div>
+      <div class="card"></div>
+      <div class="card"></div>
+      <div class="card"></div>
+      <div class="card"></div>
     </div>
   </div>
 </template>
@@ -18,15 +36,12 @@ import HeadLine from 'cpns/HeadLine'
 
 <style lang="scss" scoped>
 .cooperation_container {
-  .header_wrap {
-    padding: 37px 0 37px 0;
-  }
   .client_wrap {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     grid-template-rows: repeat(5, 1fr);
     .card {
-      width: 100%;
+      flex: 1;
       height: 94px;
       background: #f3f3f3;
     }

src/components/News.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="news_container">
-    <div class="header_wrap">
-      <HeadLine title="新闻/NEWS" line1="获取行业最新咨询" />
-    </div>
+    <HeadLine title="新闻/NEWS" line1="获取行业最新咨询" />
     <div class="card_wrap">
       <div class="card"></div>
+      <div class="card"></div>
+      <div class="card"></div>
     </div>
   </div>
 </template>
@@ -15,16 +15,16 @@ import HeadLine from 'cpns/HeadLine'
 
 <style lang="scss" scoped>
 .news_container {
-  .header_wrap {
-    padding: 26px 0 23px 0;
-  }
   .card_wrap {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
+    padding: 0 7px;
+    box-sizing: border-box;
+    column-gap: 7px;
     .card {
-      width: 100%;
+      flex: 1;
       background: #000;
-      height: 101px;
+      height: 160px;
     }
   }
 }

src/components/OneStop.vue

@@ -10,6 +10,11 @@
     </div>
     <div class="design_cards">
       <div class="card"></div>
+      <div class="card"></div>
+      <div class="card"></div>
+      <div class="card"></div>
+      <div class="card"></div>
+      <div class="card"></div>
     </div>
   </div>
 </template>
@@ -27,10 +32,15 @@ import HeadLine from 'cpns/HeadLine'
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     grid-template-rows: repeat(3, 1fr);
+    padding: 0 7px;
+    box-sizing: border-box;
+    row-gap: 7px;
+    column-gap: 7px;
     .card {
-      width: 100%;
-      height: 88px;
-      background: #ddd;
+      flex: 1;
+      height: 125px;
+      border-radius: 3px;
+      background: #fff;
     }
   }
 }

src/components/Summarize.vue

@@ -5,7 +5,7 @@
         产品设计<span class="theme_color">首选服务商</span>
       </h1>
       <p class="desc mb">
-        专注医疗器械一站式高品质的创新设计服务，从概念导入到产品现实加工落地
+        专注医疗器械一站式高品质的创新设计服务，从概念导入到产品现实加工落地<br />
         为企业精准制定，快速截获市场先机
       </p>
       <div class="four">
@@ -68,7 +68,9 @@
       }
     }
     .desc {
-      font-size: 7px;
+      transform: scale(0.5);
+      width: 200%;
+      font-size: 14px;
       font-family: Source Han Sans CN;
       font-weight: 300;
       color: #959595;

src/components/Track.vue

@@ -1,6 +1,14 @@
 <template>
   <div class="track_container">
     <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
+    <div class="card"></div>
   </div>
 </template>
 
@@ -11,10 +19,13 @@
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(3, 1fr);
+  padding: 0 7px;
+  padding-top: 7px;
+  box-sizing: border-box;
   .card {
-    width: 100%;
+    flex: 1;
+    background: #fafafa;
     height: 125px;
-    background: #4056fa;
   }
 }
 </style>

src/pages/index.vue

@@ -5,8 +5,8 @@
     <CaseShow />
     <MechanicalDrive />
     <OneStop />
-    <AboutUs />
     <Track />
+    <AboutUs />
     <News />
     <Cooperation />
     <Awards />

vite.config.js

@@ -13,6 +13,10 @@ export default defineConfig({
     },
     extensions: ['.js', '.json', '.vue'],
   },
+  server: {
+    port: 5173,
+    host: '0.0.0.0',
+  },
   plugins: [vue()],
   //配置sass
   css: {