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>
<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>