|
@@ -2,26 +2,6 @@
|
|
|
<div class="view-container">
|
|
|
<div class="title"><span>2G04</span><span>10KV联合动力2#变压器</span></div>
|
|
|
<div class="content">
|
|
|
- <div class="info">
|
|
|
- <span class="top-left"></span><span class="top-right"></span><span class="bottom-left"></span><span class="bottom-right"></span>
|
|
|
- <div style="font-size: 40px;font-weight: bold; margin-bottom:50px;"><span style="padding-right:30px;">2G04</span><span> 变压器详细信息</span></div>
|
|
|
- <div style="text-align:center;">
|
|
|
- <img src="../../assets/bgView/luogan.png" width="400px" alt="">
|
|
|
- </div>
|
|
|
- <div style="padding-top:70px">
|
|
|
- <a-row type="flex" justify="space-around" :gutter="[0,25]">
|
|
|
- <a-col :span="5" v-for="(detail, index) in details" :key="index">
|
|
|
- <div class="sb-proportion-info">
|
|
|
- <span class="top-left-two"></span><span class="top-right-two"></span><span class="bottom-left-two"></span><span class="bottom-right-two"></span>
|
|
|
- <div style="font-size: 36px;color: #BDD4FF;">
|
|
|
- {{detail.value}}
|
|
|
- </div>
|
|
|
- <div> {{detail.title}}</div>
|
|
|
- </div>
|
|
|
- </a-col>
|
|
|
- </a-row>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
<div class="history">
|
|
|
<span class="top-left"></span><span class="top-right"></span><span class="bottom-left"></span><span class="bottom-right"></span>
|
|
|
<div class="history-title">
|
|
@@ -51,15 +31,17 @@
|
|
|
<thead>
|
|
|
<tr style="display: flex;justify-content: space-between;width: 100%;">
|
|
|
<th class="list-header" style="color:#fff">时间</th>
|
|
|
- <th class="list-header" style="color:#fff">正向有功(kwh)</th>
|
|
|
- <th class="list-header" style="color:#fff">正向无功(kwh)</th>
|
|
|
+ <th class="list-header" style="color:#fff">编号</th>
|
|
|
+ <th class="list-header" style="color:#fff">名称</th>
|
|
|
+ <th class="list-header" style="color:#fff">有功电度</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody>
|
|
|
<tr v-for="i in 24" :key="i" style="display: flex;justify-content: space-between;">
|
|
|
<td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;">{{ (i-1) + ':00' }}</td>
|
|
|
- <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;">{{ 443520.00 }}</td>
|
|
|
- <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;">{{ 219040.00 }}</td>
|
|
|
+ <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;">{{ '2G94' }}</td>
|
|
|
+ <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;">{{ '变压器' }}</td>
|
|
|
+ <td class="list-header" style="box-shadow:none; background: rgba(2, 205, 255, 0.1);font-size: 16px;font-weight: 400;">{{ 219040.00 }}W</td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
</table>
|
|
@@ -125,37 +107,14 @@ padding: 15px 37px;
|
|
|
-webkit-background-clip: text;
|
|
|
-webkit-text-fill-color: transparent;
|
|
|
}
|
|
|
-.content{
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
-}
|
|
|
-.info{
|
|
|
- color:#5ACCF8;
|
|
|
- width: 766px;
|
|
|
- height:950px;
|
|
|
- position: relative;
|
|
|
- border: 2px solid #045693;
|
|
|
- padding:30px;
|
|
|
- margin-top:30px;
|
|
|
- .sb-proportion-info{
|
|
|
- position: relative;
|
|
|
-display: flex;
|
|
|
-flex-direction:column;
|
|
|
-align-items: center;
|
|
|
-justify-content:center;
|
|
|
-position: relative;
|
|
|
-// width: 141px;
|
|
|
-height: 150px;
|
|
|
-background: rgba(0, 186, 255, 0.1);
|
|
|
- }
|
|
|
-}
|
|
|
+
|
|
|
.history{
|
|
|
color:#A8E6F3 ;
|
|
|
- width: 1041px;
|
|
|
+ width: 1838px;
|
|
|
height:950px;
|
|
|
position: relative;
|
|
|
border: 2px solid #045693;
|
|
|
- padding:30px;
|
|
|
+ padding:60px;
|
|
|
margin-top:30px;
|
|
|
.history-title{
|
|
|
display: flex;
|
|
@@ -207,7 +166,7 @@ background: rgba(0, 186, 255, 0.1);
|
|
|
.list-header{
|
|
|
margin:0;
|
|
|
padding: 0;
|
|
|
- width: 180px;
|
|
|
+ width: 280px;
|
|
|
height: 35px;
|
|
|
font-size: 16px;
|
|
|
font-weight: bold;
|