From a63152f73c4353b36c1c93fb3a03fbfd3e2bbf90 Mon Sep 17 00:00:00 2001
From: quantulr <35954003+quantulr@users.noreply.github.com>
Date: Thu, 20 Jun 2024 00:09:38 +0800
Subject: [PATCH] init

---
 src/App.vue | 113 ++++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 97 insertions(+), 16 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 55df315..c44068f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,28 +1,109 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <h2 class="title">设备基本信息</h2>
+    <table class="swt-table">
+      <tbody>
+        <tr>
+          <td>电池类型</td>
+          <td>锂电池</td>
+          <td>电芯封装</td>
+          <td>placeholder</td>
+          <td>电池串数</td>
+          <td>placeholder</td>
+          <td>电池并数</td>
+          <td>placeholder</td>
+        </tr>
+        <tr>
+          <td>电池类型</td>
+          <td>placeholder</td>
+          <td>电芯封装</td>
+          <td>placeholder</td>
+          <td>电池串数</td>
+          <td>placeholder</td>
+          <td>电池并数</td>
+          <td>placeholder</td>
+        </tr>
+        <tr>
+          <td>单体额定电压</td>
+          <td>placeholder</td>
+          <td>网络连接状态</td>
+          <td>placeholder</td>
+          <td>系统故障状态</td>
+          <td>placeholder</td>
+          <td>额定电流</td>
+          <td>placeholder</td>
+        </tr>
+      </tbody>
+    </table>
+    <h2 class="title">设备运行状态</h2>
+    <table class="swt-table">
+      <tbody>
+        <tr>
+          <td>系统工作模式</td>
+          <td>放电</td>
+          <td>网络连接状态</td>
+          <td>在线</td>
+          <td>系统故障状态</td>
+          <td>placeholder</td>
+          <td>4G模块状态</td>
+          <td>placeholder</td>
+        </tr>
+        <tr>
+          <td>电池类型</td>
+          <td>placeholder</td>
+          <td>电芯封装</td>
+          <td>placeholder</td>
+          <td>电池串数</td>
+          <td>placeholder</td>
+          <td>电池并数</td>
+          <td>placeholder</td>
+        </tr>
+        <tr>
+          <td>电池类型</td>
+          <td>placeholder</td>
+          <td>电芯封装</td>
+          <td>placeholder</td>
+          <td>电池串数</td>
+          <td>placeholder</td>
+          <td>电池并数</td>
+          <td>placeholder</td>
+        </tr>
+      </tbody>
+    </table>
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
-
-export default {
-  name: 'App',
-  components: {
-    HelloWorld
-  }
-}
 </script>
 
 <style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+body {
+  background-color: rgb(240, 240, 240);
+}
+
+.title {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.swt-table {
+  width: 100%;
+  border: 1px solid rgb(200, 200, 200);
+  table-layout: fixed;
+  border-collapse: collapse;
+}
+
+.swt-table tbody tr td {
   text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+  border: 1px solid rgb(200, 200, 200);
+  height: 40px;
+}
+
+.swt-table tbody tr td:nth-child(odd) {
+  background-color: rgb(240, 240, 240);
+}
+
+.swt-table tbody tr td:nth-child(even) {
+  background-color: white;
 }
 </style>