vijay
/
Mosqkiller
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

# screen 初稿

This commit is contained in:
xianfuxing 2018-08-22 00:08:25 +08:00
parent 080e696f26
commit 0f18df3e03
1 changed files with 56 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/views/counter/components/screen.vue
View File

@ -3,11 +3,34 @@
<div class="device-base">
<ul>
<li>设备: <span>{{this.$store.getters.deviceID}}</span></li>
<li>地区: <span>尖沙咀</span></li>
<li class="region">地区: <span>尖沙咀</span></li>
<li>设备名称: <span>香港大学1号机</span></li>
</ul>
</div>
<div class="device-screen"></div>
<div class="device-screen">
<table cellspacing="0">
<tbody>
<tr>
<td>2</td>
<td>0</td>
<td>1</td>
<td>8</td>
<td>-</td>
<td>0</td>
<td>8</td>
<td>-</td>
<td>2</td>
<td>2</td>
<td> </td>
<td>1</td>
<td>1</td>
<td>:</td>
<td>3</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
<div class="device-status"></div>
</div>
</template>
@ -27,15 +50,38 @@ export default {
</script>
<style lang="scss">
.device-base {
display: flex;
justify-content: center;
ul {
li {
list-style-type: none;
display: inline-block;
.screen-wrapper {
overflow: auto;
.device-base {
display: flex;
justify-content: center;
min-width: 650px;
ul {
padding: 0;
li {
font-size: .9rem;
list-style-type: none;
display: inline-block;
}
.region {
margin: 0 5rem 0 5rem;
}
}
}
.device-screen {
display: flex;
justify-content: center;
table {
border: 1px solid #666;
border-collapse: collapse;
text-align: center;
td {
border: 1px solid #666;
width: 1rem;
height: 1.5rem;
line-height: 1.5rem;
}
}
}
}
</style>