src/components/VEquipment.vue

<template>
    <div class="theme-wrap">
        <card-title> <span>设备监控消息</span></card-title>
        <ul class="theme-body" style="padding: 10px 20px 20px 0;">
            <li class="equipment-section">
                <div class="normal-status front">
                    <p class="text-blue">{{equipment.pdaper}}%</p>
                    <p>PDA在线率</p>
                </div>
                <div class="rotate-status back">
                    <p class="text-blue">{{equipment.PDA}}/{{equipment.PDATotal}}</p>
                    <p>PDA/PDA在线</p>
                </div>
            </li>
            <li class="equipment-section" >
                <div class="normal-status front">
                    <p class="text-blue">{{equipment.berthper}}%</p>
                    <p>地磁在线率</p>
                </div>
                <div class="rotate-status back">
                    <p class="text-blue">{{equipment.berth}}/{{equipment.berthTotal}}</p>
                    <p>地磁/地磁</p>
                </div>
            </li>
            <li class="equipment-section" >
                <div class="normal-status front">
                    <p class="text-orange">{{equipment.daozhaper}}%</p>
                    <p>道闸在线率</p>
                </div>
                <div class="rotate-status back">
                    <p class="text-orange">{{equipment.daozha}}/{{equipment.daozhaTotal}}</p>
                    <p>道闸/道闸在线</p>
                </div>
            </li>
            <li class="equipment-section" >
                <div class="normal-status front">
                    <p class="text-orange">{{equipment.ydpper}}%</p>
                    <p>诱导屏在线率</p>
                </div>
                <div class="rotate-status back">
                    <p class="text-orange">{{equipment.ydp}}/{{equipment.ydpTotal}}</p>
                    <p>诱导屏/诱导屏在线</p>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
import CardTitle from './base/CardTitle'
export default {
  name: 'VEquipment',
  components: {
    CardTitle
  },
  props:['equipment'],
  data() {
    return {
        equipvalue:''
    }
  },
  mounted(){
  },
  watch:{
    equipment:{//深度监听，可监听到对象、数组的变化
      handler(val){
      },
      deep:true
    }
  },
  methods: {
  }
}
</script>
<style scoped lang="scss">
    .theme-wrap {
        height: 100%;
    }
    .theme-body {
        height: calc(100% - 30px);
        margin-left: 20px;
    }
    .equipment-section{
        float: left;
        width: 46%;
        height: 46%;
        margin: 2%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        background: url("../images/content/deviceBg.png") no-repeat;
        background-size: 100% 100%;
        transform-style:preserve-3d;
        /*transition:1s;*/
        animation:myfirst  6s  linear  infinite;
        div{
            width: 95%;
            height: 95%;
            position: absolute;
            left:0;top:0;
            backface-visibility:hidden;
            padding: 15px 0 10px 0;
            text-align: center;
            p{
                height: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .text-blue{
                @include fontStyle(24px);
                color: $fontBlue;
            }
            .text-orange{
                @include fontStyle(24px);
                color: $fontOrange;
            }
        }
        .normal-status{
        }
        .rotate-status{
            transform: rotateY(180deg);
        }
    }
    /*.equipment-section:hover{*/
        /*transform: rotateY(180deg);*/
    /*}*/
    @keyframes myfirst{
        0%{
            transform: rotateY(0)
        }
        30%{
            transform: rotateY(0)
        }
        50%{
            transform: rotateY(180deg)
        }
        80%{
            transform: rotateY(180deg)
        }
        100% {
               transform: rotateY(360deg)
        }
    }
</style>