From bbc3b7e9f89369a26eb12deeb10cbd113e6dc02a Mon Sep 17 00:00:00 2001
From: web <candymxq888@outlook.com>
Date: 星期一, 30 六月 2025 17:29:08 +0800
Subject: [PATCH] fix:修改模板那
---
src/views/screen/device.vue | 129 ++++++++++++++++++++++++++++++++++++++++++
1 files changed, 127 insertions(+), 2 deletions(-)
diff --git a/src/views/screen/device.vue b/src/views/screen/device.vue
index 74184ac..6e39e63 100644
--- a/src/views/screen/device.vue
+++ b/src/views/screen/device.vue
@@ -1,6 +1,49 @@
<template>
<div class="device">
- 设备
+ <div class="device-l">
+ <div class="left">
+ <div class="left-item">
+ <div class="item-t">设备时长</div>
+ <div class="item-c"></div>
+ </div>
+ <div class="left-item">
+ <div class="item-t">风机管理</div>
+ <div class="item-c"></div>
+ </div>
+ <div class="left-item">
+ <div class="item-t">工单处理</div>
+ <div class="item-c"></div>
+ </div>
+ <div class="left-item">
+ <div class="item-t">设备状态</div>
+ <div class="item-c"></div>
+ </div>
+ </div>
+ </div>
+ <div class="device-c">
+ <div class="center">
+ <div class="center-item">
+ <div class="item-t">实时数据</div>
+ <div class="item-c"></div>
+ </div>
+ <div class="center-item">
+ <div class="item-t">终端监控分类曲线</div>
+ <div class="item-c"></div>
+ </div>
+ </div>
+ </div>
+ <div class="device-r">
+ <div class="right">
+ <div class="right-item">
+ <div class="item-t">风机状态</div>
+ <div class="item-c"></div>
+ </div>
+ <div class="right-item">
+ <div class="item-t">设备报警</div>
+ <div class="item-c"></div>
+ </div>
+ </div>
+ </div>
</div>
</template>
@@ -9,5 +52,87 @@
</script>
<style scoped lang="scss">
-
+ .device{
+ height: 100%;
+ color: #fff;
+ display: flex;
+ justify-content: space-between;
+ &-l{
+ width: 25%;
+ height: 100%;
+ .left{
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ .left-item{
+ width: 100%;
+ height: 24%;
+ background-image: url('@/assets/images/screen/ct-small.png');
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ .item-t{
+ width: 100%;
+ height: 3rem;
+ line-height: 3rem;
+ padding-left: 3.5rem;
+ }
+ .item-c{
+ height: calc(100% - 3rem);
+ padding: 0.5rem;
+ }
+ }
+ }
+ }
+ &-c{
+ width: 49%;
+ height: 100%;
+ .center{
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ .center-item{
+ height: 49%;
+ background-image: url('@/assets/images/screen/ct-large.png');
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ .item-t{
+ height: 3rem;
+ line-height: 3rem;
+ padding-left: 4.5rem;
+ }
+ .item-c{
+ height: calc(100% - 3rem);
+ padding: 0.5rem;
+ }
+ }
+ }
+ }
+ &-r{
+ width: 25%;
+ height: 100%;
+ .right{
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ .right-item{
+ height: 49%;
+ background-image: url('@/assets/images/screen/ct-default.png');
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ .item-t{
+ height: 3rem;
+ line-height: 3rem;
+ padding-left: 3rem;
+ }
+ .item-c{
+ height: calc(100% - 3rem);
+ padding: 0.5rem;
+ }
+ }
+ }
+ }
+ }
</style>
\ No newline at end of file
--
Gitblit v1.9.3