|
|
@@ -22,9 +22,50 @@
|
|
|
</a-row>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="history">
|
|
|
+ <div class="detail">
|
|
|
<span class="top-left"></span><span class="top-right"></span><span class="bottom-left"></span><span class="bottom-right"></span>
|
|
|
-
|
|
|
+ <div class="detail-title">
|
|
|
+ <a-button style="background: #02E8FF;border:none;" icon="bars" size="large" @click="handleHistoryView" />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <a-row type="flex" justify="start" :gutter="[0,80]">
|
|
|
+ <a-col v-for="i in 4" :key="i" :span="12">
|
|
|
+ <div class="detail-item">
|
|
|
+ <img src="../../assets/bgView/dianyaqi.png" alt="" width="162px" >
|
|
|
+ <div class="detail-item-info">
|
|
|
+ <div style="display:flex;align-items: center;">
|
|
|
+ <div>产品名称</div>
|
|
|
+ <div style="position: relative;width: 174px;height: 64px;text-align: center;line-height: 64px;background: #0E316D;margin: 0 20px;">
|
|
|
+ <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>
|
|
|
+ </div>
|
|
|
+ <div style="display:flex;align-items: center;">
|
|
|
+ <div>电流</div>
|
|
|
+ <div style="position: relative;width: 174px;height: 64px;text-align: center;line-height: 64px;background: #0E316D;margin: 0 20px;">
|
|
|
+ <span class="top-left-two"></span><span class="top-right-two"></span><span class="bottom-left-two"></span><span class="bottom-right-two"></span>
|
|
|
+ 12A
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="display:flex;align-items: center;">
|
|
|
+ <div>电压</div>
|
|
|
+ <div style="position: relative;width: 174px;height: 64px;text-align: center;line-height: 64px;background: #0E316D;margin: 0 20px;">
|
|
|
+ <span class="top-left-two"></span><span class="top-right-two"></span><span class="bottom-left-two"></span><span class="bottom-right-two"></span>
|
|
|
+ 24V
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="display:flex;align-items: center;">
|
|
|
+ <div>温度</div>
|
|
|
+ <div style="position: relative;width: 174px;height: 64px;text-align: center;line-height: 64px;background: #0E316D;margin: 0 20px;">
|
|
|
+ <span class="top-left-two"></span><span class="top-right-two"></span><span class="bottom-left-two"></span><span class="bottom-right-two"></span>
|
|
|
+ 22℃
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -43,6 +84,9 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ handleHistoryView () {
|
|
|
+ this.$router.push('/TransformerHistoryBigScreen')
|
|
|
+ },
|
|
|
onDateChange (value, dateString) {
|
|
|
this.dateVisual = true
|
|
|
},
|
|
|
@@ -111,29 +155,31 @@ height: 150px;
|
|
|
background: rgba(0, 186, 255, 0.1);
|
|
|
}
|
|
|
}
|
|
|
-.history{
|
|
|
- color:#A8E6F3 ;
|
|
|
+.detail{
|
|
|
+ color:#02E8FF;
|
|
|
+ font-size: 24px;
|
|
|
width: 1041px;
|
|
|
height:950px;
|
|
|
position: relative;
|
|
|
border: 2px solid #045693;
|
|
|
padding:30px;
|
|
|
margin-top:30px;
|
|
|
- .list-header{
|
|
|
- margin:0;
|
|
|
- padding: 0;
|
|
|
- width: 180px;
|
|
|
-height: 35px;
|
|
|
-font-size: 16px;
|
|
|
-font-weight: bold;
|
|
|
-margin-bottom: 12px;
|
|
|
-
|
|
|
-font-family: Microsoft YaHei;
|
|
|
-background: rgba(2, 205, 255, 0);
|
|
|
-box-shadow: 0px 0px 40px 0px rgba(0, 122, 162, 0.8) inset;
|
|
|
-display: flex;
|
|
|
-justify-content: center;
|
|
|
-align-items: center;
|
|
|
+ .detail-title{
|
|
|
+ display: flex;
|
|
|
+ justify-content:flex-end;
|
|
|
+ margin-bottom:30px;
|
|
|
+ }
|
|
|
+ .detail-item{
|
|
|
+ display:flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .detail-item-info {
|
|
|
+ height: 360px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: flex-end;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.top-left{
|
