cyzh-park/src/views/dashboard/environmentmng/comps/warning-information.vue

<template>
  <div class="page animate__animated animate__faster animate__fadeInRight">
    <more title="设备告警"></more>
    <!-- 工单列表 -->
    <div style="padding-top: 0.8rem;">
      <div class="card" v-for="(item,index) in list" :key="index">
        <div class="left">
          <div class="title">{{item.title}}</div>
          <div class="position">
            {{item.position}}
          </div>
        </div>
        <div class="right">
          <div class="data" :class="item.isHigh?'highColor':'lowColor'">
            <img :src="item.isHigh?'/img/environment/xs.png':'/img/environment/xx.png'" />
            <span >{{item.data}}</span>
          </div>
          <div class="time">{{item.time}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import more from "@/components/more.vue"
  export default {
    components: {
      more
    },
    data() {
      return {
        tabList: [{
            label: '设备工单',
            value: 0
          },
          {
            label: '保修工单',
            value: 1
          }
        ],
        list:[{
          title:"温度",
          position:'A1栋工业楼3号车间',
          isHigh:true,
          data:'15.3rh',
          time:'2021-03-15 22:40'
        },
        {
          title:"温度",
          position:'A1栋工业楼3号车间',
          isHigh:false,
          data:'15.3rh',
          time:'2021-03-15 22:40'
        },
        {
          title:"温度",
          position:'A1栋工业楼3号车间',
          isHigh:true,
          data:'15.3rh',
          time:'2021-03-15 22:40'
        },
        {
          title:"温度",
          position:'A1栋工业楼3号车间',
          isHigh:false,
          data:'15.3rh',
          time:'2021-03-15 22:40'
        },
        {
          title:"温度",
          position:'A1栋工业楼3号车间',
          isHigh:false,
          data:'15.3rh',
          time:'2021-03-15 22:40'
        },
        {
          title:"温度",
          position:'A1栋工业楼3号车间',
          isHigh:true,
          data:'15.3rh',
          time:'2021-03-15 22:40'
        },
        {
          title:"温度",
          position:'A1栋工业楼3号车间',
          isHigh:true,
          data:'15.3rh',
          time:'2021-03-15 22:40'
        },
        {
          title:"温度",
          position:'A1栋工业楼3号车间',
          isHigh:true,
          data:'15.3rh',
          time:'2021-03-15 22:40'
        },
        {
          title:"温度",
          position:'A1栋工业楼3号车间',
          isHigh:true,
          data:'15.3rh',
          time:'2021-03-15 22:40'
        }]
      };
    },
    methods: {

    }
  };
</script>


<style lang="scss" scoped>
  .page {
    box-sizing: border-box;
    background-color: #FFFFFF;
    padding: 1rem;
  }

  .center{
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .lowColor{
    color:#3B8FF4
  }

  .highColor{
    color:#EB653C
  }

  .card {
    cursor: pointer;
    box-sizing: border-box;
    background-color: #F5F5F5;
    display: flex;
    justify-content: space-between;
    margin: 15px 5px;
    padding: 15px;

    .left {
      text-align: left;

      .title {
        font-size: 0.8rem;
        font-weight: 800;
        color: #000000;
      }

      .position {
        margin-top: 0.375rem;
        font-size: 13px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #666666;
      }
    }

    .right {
      text-align: right;

      .data {
        justify-content: flex-end;
        display: flex;
        font-size: 13px;
        font-family: Microsoft YaHei;
        font-weight: bold;

        img{
          width: 1rem;
          height: 1rem;
          border-radius: 50%;
          margin-right: 4px;
        }
      }

      .time {
        margin-top: 0.375rem;
        font-size: 13px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #666666;
      }
    }
  }
</style>