# up base style

This commit is contained in:
xianfuxing 2018-09-07 17:25:28 +08:00
parent f584b7e435
commit 3dbeb5ae8b
1 changed files with 52 additions and 46 deletions

View File

@ -1,47 +1,51 @@
<template>
<div class="screen-wrapper">
<div class="device-base">
<ul>
<li>设备: <span>{{deviceID}}</span></li>
<li class="region">地区: <span>尖沙咀</span></li>
<li>设备名称: <span>香港大学1号机</span></li>
</ul>
<div class="app-container">
<div class="base-wrapper">
<div class="device-base">
<ul>
<li>设备: <span>{{deviceID}}</span></li>
<li class="region">地区: <span>尖沙咀</span></li>
<li>设备名称: <span>香港大学1号机</span></li>
</ul>
</div>
</div>
<div class="device-screen">
<table cellspacing="0">
<tbody>
<tr>
<td v-for="(item, index) of lastTime" :key="index">
{{item}}
</td>
</tr>
<tr>
<td v-for="(item, index) of lastCount" :key="index">
{{item}}
</td>
</tr>
</tbody>
</table>
</div>
<div class="device-status">
<ul>
<li>状态
<span
:class="status ? 'text-success' : 'text-danger'"
v-if="status == 0"
>
离线
</span>
<span
:class="status ? 'text-success' : 'text-danger'"
v-if="status == 1"
>
在线
</span>
</li>
<li class="signal">信号 <span>{{lastItem.signal}}</span></li>
<li>电量 <span>{{lastItem.energy}}</span></li>
</ul>
<div class="screen-wrapper">
<div class="device-screen">
<table cellspacing="0">
<tbody>
<tr>
<td v-for="(item, index) of lastTime" :key="index">
{{item}}
</td>
</tr>
<tr>
<td v-for="(item, index) of lastCount" :key="index">
{{item}}
</td>
</tr>
</tbody>
</table>
</div>
<div class="device-status">
<ul>
<li>状态
<span
:class="status ? 'text-success' : 'text-danger'"
v-if="status == 0"
>
离线
</span>
<span
:class="status ? 'text-success' : 'text-danger'"
v-if="status == 1"
>
在线
</span>
</li>
<li class="signal">信号 <span>{{lastItem.signal}}</span></li>
<li>电量 <span>{{lastItem.energy}}</span></li>
</ul>
</div>
</div>
</div>
</template>
@ -86,13 +90,12 @@ export default {
.text-danger {
color: #F56C6C
}
.screen-wrapper {
background: #F2F6FC;
.base-wrapper {
overflow: auto;
.device-base {
display: flex;
justify-content: center;
min-width: 600px;
min-width: 600px;
ul {
padding: 0;
li {
@ -105,6 +108,9 @@ export default {
}
}
}
}
.screen-wrapper {
background: #F2F6FC;
.device-screen {
display: flex;
justify-content: center;
@ -121,7 +127,7 @@ export default {
height: 1.5rem;
line-height: 1.5rem;
font-weight: 600;
padding: .2rem;
padding: .2rem;
}
}
}