From 3adc08e618d22238117c913bf709faae6a04e4c0 Mon Sep 17 00:00:00 2001
From: maochaoying <925670706@qq.com>
Date: Thu, 21 Sep 2023 10:15:08 +0800
Subject: [PATCH] info title

---
 src/components/Tabs.vue | 24 +++++++++++++++++++++++-
 src/pages/Home.vue      | 35 ++++++++++++++++++++++++++++++++++-
 2 files changed, 57 insertions(+), 2 deletions(-)

diff --git a/src/components/Tabs.vue b/src/components/Tabs.vue
index f7b33f3..984fa10 100644
--- a/src/components/Tabs.vue
+++ b/src/components/Tabs.vue
@@ -1,6 +1,14 @@
 <template>
   <div class="tabs_container">
-    <div class="tab_wrap active"></div>
+    <div class="tab_wrap active">
+      <p class="text">操作</p>
+    </div>
+    <div class="tab_wrap active">
+      <p class="text">测试</p>
+    </div>
+    <div class="tab_wrap active">
+      <p class="text">排液氮</p>
+    </div>
   </div>
 </template>
 
@@ -21,12 +29,26 @@
     height: 70px;
     border-radius: 35px;
     box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .text {
+      font-family: Source Han Sans CN;
+      font-size: 24px;
+      font-weight: 500;
+      line-height: normal;
+      letter-spacing: 0.04em;
+      color: #565ee4;
+    }
   }
   .active {
     background: linear-gradient(180deg, #616af6 15%, #424bde 87%);
     border: 2px solid #6e75f2;
     box-shadow: 0px 4px 6px 0px rgba(30, 39, 122, 0.3),
       inset 0px 4px 10px 0px rgba(30, 46, 186, 0.3);
+    .text {
+      color: #fff;
+    }
   }
 }
 </style>
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index 55757aa..fdcf9ed 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -1,7 +1,13 @@
 <template>
   <div class="home_container">
     <div class="header_card_wrap">
-      <div class="header_info"></div>
+      <div class="header_info">
+        <p class="machine_title">A18000</p>
+        <div class="status_wrap">
+          <img :src="Ok" class="status_img" alt="" />
+          <p class="status_text">密封良好</p>
+        </div>
+      </div>
       <Tube />
     </div>
     <div class="content_card_wrap">
@@ -13,6 +19,7 @@
 </template>
 
 <script setup>
+import Ok from '@/assets/img/ok.png'
 import Tube from 'cpns/Tube'
 import Steps from 'cpns/Steps'
 import LiquidInjection from 'cpns/operation/LiquidInjection'
@@ -40,6 +47,32 @@ import Tabs from 'cpns/Tabs'
       align-items: center;
       justify-content: space-between;
       margin-bottom: 32px;
+      padding: 0 45px;
+      .machine_title {
+        font-family: Poppins;
+        font-size: 36px;
+        font-weight: bold;
+        line-height: normal;
+        letter-spacing: 0.02em;
+        color: #08092c;
+      }
+      .status_wrap {
+        display: flex;
+        align-items: center;
+        .status_img {
+          width: 28px;
+          height: 28px;
+        }
+        .status_text {
+          font-family: Poppins;
+          font-size: 22px;
+          font-weight: bold;
+          line-height: normal;
+          letter-spacing: 0.02em;
+          color: #9395a0;
+          margin-left: 9px;
+        }
+      }
     }
   }
   .content_card_wrap {