large_screen/src/components/newmain/item2/CaiMeiJi.vue

<template>
  <div class="container">
      <div class="fankui">{{info_number}}采煤机运行反馈&nbsp;<i id="green" v-show="true" class="fa fa-circle"></i> <i id="red" v-show="false" class="fa fa-circle"></i></div>
      <div class="bgi"></div> 
      <!-- @click="change" -->
      <div class="info">{{info_number}}采煤区</div>
      <ul class="msg" :style="{height:h}">
          <li v-for="(value,key) in msg" :key="key">{{key}}:{{value}}</li>
      </ul>
  </div>
</template>

<script>
export default {
    name:'CaiMeiJi',
    data() {
        return {
            h:"0px",
            show:false,
            msg:{
                '割煤刀数':2,
                '回采米数':1300,
                '出煤量':2
            }
        }
    },
    props:['info_number'],
    methods:{
        change(){
            if(this.h==="0px"){
                this.h = "200px"
            }else if(this.h = "200px"){
                this.h = "0px"
            }
        },
        getData(msg){
            this.msg = msg
        }
    }
}
</script>

<style lang='less' scoped>
.container{
    width: 100%;
    height: 100%;
    position: relative;
    color: #fff;
    left:60px;
    .fankui{
        text-align: center;
        font-size: 12px;
        padding-bottom: 2px;
    }
    .bgi{
        height: 60px;
        background-size:cover;
        background-image: url(采煤机.png);
    }
    .info{
        box-sizing: border-box;
        height: 50px;
        font-size: 14px;
        border: 2px solid rgb(219,208,10);
        padding-top: 12%;
        text-align: center;
        color: rgb(219,208,10);
    }
    .msg{
        padding: 0;
        list-style: none;
        position: absolute;
        overflow: hidden;
        width: 200px;
        height: 0;
        top:-10px;
        right: -220px;
        border-radius: 20%;
        background-color: rgba(88, 240, 227, 1);
        box-shadow: 0 0 10px rgba(255, 255, 255, 1);
        transition: 0.5s;
        li{
            color: rgb(236, 74, 74);
            font-size: 20px;
            text-align: center;
            padding: 20px 0;
        }
    }
}
#green{
        color: green;
    }
#red{
    color: red;
}
</style>