<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>万达停车场  京A243547 进场</span> <span>07:20</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
  },
  data(){
    return{
      sideNum: 23454,
      closeNum: 23454,
      imgUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1552297151876&di=fcc094f43d6caaf4b9526dabbefd1243&imgtype=0&src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20190124%2F1fc9d7e14be54986b9e2e055a2b5ccc1.jpeg'}
  }
}
</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;
            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>
