hitch-sb-antd/src/views/statisticView/TransformerDetail.vue

<template>
  <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>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      time: '',
      dateVisual: true,
      details: [{ 'title': '状态', 'value': '开机' }, { 'title': '总电压', 'value': '220V' },
        { 'title': '电流', 'value': '30A' }, { 'title': '总能耗', 'value': '3256kwh' },
        { 'title': '日能耗', 'value': '300kwh' }, { 'title': '月能耗', 'value': '300kwh' },
        { 'title': '温度', 'value': '56度' }, { 'title': '预警次数', 'value': '10次' }]
    }
  },
  methods: {
    onDateChange (value, dateString) {
      this.dateVisual = true
    },
    onMonthChange (value, dateString) {
      this.dateVisual = false
    },
    onOk (value) {
      console.log('onOk: ', value)
    }
  }
}
</script>

<style lang="less" scoped>
.view-container {
width:1920px;
height:1080px;
font-family: PingFang SC;
padding: 15px 37px;
&::after {
  content: "";
  width:1920px;
  height:1080px;
  background: url(../../assets/bgView/TransformerDetail.png);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}
}
.title{
  display: flex;
  justify-content: space-between;
  width: 600px;
  margin:0 auto;
  font-size: 42px;
  font-weight: bold;
  text-shadow: 0px 2px 4px rgba(4,0,0,0.3);
  background: linear-gradient(0deg, #BCBCBC 1.123046875%, #FFFFFF 100%);
  -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;
   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;
   }
}
.top-left{
    width: 12px;
    height: 12px;
    display: block;
    background-color: rgba(4, 8, 20, 0.8);
    border: 2px solid #02E8FF;
    position: absolute;
    top: -6px;
    left: -6px;
  }
  .bottom-left{
    width: 12px;
    height: 12px;
    display: block;
    background-color: rgba(4, 8, 20, 0.8);
    border: 2px solid #02E8FF;
    position: absolute;
    bottom: -6px;
    left: -6px;
  }
  .top-right{
    width: 12px;
    height: 12px;
    display: block;
    background-color: rgba(4, 8, 20, 0.8);
    border: 2px solid #02E8FF;
    position: absolute;
    top: -6px;
    right: -6px;
  }
  .bottom-right {
    width: 12px;
    height: 12px;
    display: block;
    background-color: rgba(4, 8, 20, 0.8);
    border: 2px solid #02E8FF;
    position: absolute;
    bottom: -6px;
    right: -6px;
  }
    .top-left-two{
    width: 15px;
    height: 15px;
    display: block;
    border-top: 2px solid #02E8FF;
    border-left: 2px solid #02E8FF;
    position: absolute;
    top: -2px;
    left: -2px;
  }
  .bottom-left-two{
    width: 15px;
    height: 15px;
    display: block;
    border-bottom: 2px solid #02E8FF;
    border-left: 2px solid #02E8FF;
    position: absolute;
    bottom: -2px;;
    left: -2px;;
  }
  .top-right-two{
     width: 15px;
    height: 15px;
    display: block;
    border-top: 2px solid #02E8FF;
    border-right: 2px solid #02E8FF;
    position: absolute;
    top: -2px;;
    right: -2px;;
  }
  .bottom-right-two {
     width: 15px;
    height: 15px;
    display: block;
   border-bottom: 2px solid #02E8FF;
    border-right: 2px solid #02E8FF;
    position: absolute;
    bottom: -2px;;
    right: -2px;;
  }
  ::-webkit-scrollbar { width: 0; height: 0; color: transparent; }

</style>