cxc/sheet-demo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
quantulr
2024-06-20 00:09:38 +08:00
parent 106701f24d
commit a63152f73c
1 changed files with 97 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
src/App.vue
View File

@ -1,28 +1,109 @@
<template> <template>
<div id="app"> <div id="app">
<img alt="Vue logo" src="./assets/logo.png"> <h2 class="title">设备基本信息</h2>
<HelloWorld msg="Welcome to Your Vue.js App"/> <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> </div>
</template> </template>
<script> <script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script> </script>
<style> <style>
#app { body {
font-family: Avenir, Helvetica, Arial, sans-serif; background-color: rgb(240, 240, 240);
-webkit-font-smoothing: antialiased; }
-moz-osx-font-smoothing: grayscale;
.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; text-align: center;
color: #2c3e50; border: 1px solid rgb(200, 200, 200);
margin-top: 60px; 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> </style>