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

# 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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