hanzhengzheng/screenFront
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

展会大屏样式修改

Browse Source
This commit is contained in:
hzz 2023-09-11 18:08:18 +08:00
parent c0c65698f7
commit 1e437cc5d7
1 changed files with 21 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/views/MicroExhibition/index.vue
View File

@ -26,15 +26,16 @@
<div class="center"> <div class="center">
<div class="ct"> <div class="ct">
<div class="top-item"> <div class="top-item">
<h2>设备总数</h2> <h2>设备在线</h2>
<div class="div_p" style="color: #ff9e5b;font-size: 40px;"> <div class="div_p" style="color: #ff9e5b;font-size: 40px;">
<!-- <i class="iconfont icon-zhengque1 div-p-tip"></i> --> <div class="dev-top" style="color: #7CFFB2;">{{ store.devnum.on + store.devnum.wait }}</div>
<h5>{{ store.devnum.all }} {{ t('messages.units') }}</h5> <div class="dev-center"></div>
<div class="dev-bottom">{{ store.devnum.all }}</div>
</div> </div>
</div> </div>
<div class="top-item"> <div class="top-item">
<h2>网关状态</h2> <h2>网关状态</h2>
<div class="div_p"> <div class="div_p" style="transform: translate(0px, 10px);">
<i :class="true <i :class="true
? 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan on' ? 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan on'
: 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan off' : 'iconfont icon-beikongshuiwupingtaimenhu-tubiao_zhinengwangguan off'
@ -404,4 +405,20 @@ h2 {
border-left: 109px solid transparent; border-left: 109px solid transparent;
border-right: 110px solid transparent; border-right: 110px solid transparent;
} }
.dev-center {
width: 3px;
height: 60px;
background-image: linear-gradient(to bottom, #2869E8, #00D0FF);
background-color: #5067BC;
transform: rotate(40deg) translate(7px, -6px);
}
.dev-top {
transform: translate(-6px, -10px);
font-size: 30px;
}
.dev-bottom {
transform: translate(15px, 15px);
font-size: 30px;
}
</style> </style>