BJ_web_developers / lzsandtable

  <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|formatDate}}</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'

  import { formatDate } from '../utils/date'
  

  export default {
    name: 'VInout',
    components: {
      CardTitle,
      AccountNum
    },

    props:['inoutmsg','inouttime','imgUrl'],

    data(){
      return{

      }

    },
    filters:{
      formatDate(time){
        var date = new Date(time)
        return formatDate(date, 'yyyy-MM-dd hh:mm');
      }

    }
  }
  </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>