src/components/VInout.vue

<template>
    <div class="theme-wrap">
        <card-title> <span>进出场消息</span></card-title>
        <div class="theme-body">
            <div class="access-title">
                <p><span><span class="access-icon"></span>{{inoutmsg}} 进场</span> <span>{{inouttime}}</span></p>
            </div>
            <div class="access-img" :style="{backgroundImage:'url('+imgUrl+')'}"></div>
        </div>
    </div>
</template>
<script>
import CardTitle from './base/CardTitle'
import AccountNum from './base/AccountNum'
export default {
  name: 'VInout',
  components: {
    CardTitle,
    AccountNum
  },
  props:['inoutmsg','inouttime','imgUrl'],
  data(){
    return{
    }
  }
}
</script>
<style scoped lang="scss">
    .theme-wrap {
        height: 100%;
    }
    .theme-body {
        height: calc(100% - 30px);
        margin-left: 20px;
    }
    .access-title{
        height: 30% ;
        display: flex;
        align-items: center;
        p {
            width: 99%;
            padding-right: 20px;
            height: 26px;
            line-height: 26px;
            display: flex;
            justify-content: space-between;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            background: linear-gradient(to right, rgba(0, 45, 140, .1) , rgba(0, 45, 140, .7));
        }
        .access-icon{
            display: inline-block;
            vertical-align: middle;
            width: 22px;
            height: 26px;
            margin-right: 10px;
            background: url("../images/content/access-icon.png") no-repeat 0 center;
            background-size: 22px 22px;
        }
    }
    .access-img{
        width: 93%;
        height: 60%;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
</style>