src/components/VParking.vue

<template>
    <div class="theme-wrap">
        <card-title> <span>停车场消息</span></card-title>
        <div class="theme-body">
            <account-num :totalnum="total">
                <span>总计</span>
            </account-num>
            <ul class="theme-container">
                <li class="roadside">
                    <p>{{rodeside|filterTotal}}</p>
                    <p>路侧</p>
                </li>
                <li class="roadclose">
                    <p>{{rodeclose|filterTotal}}</p>
                    <p>封闭</p>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import CardTitle from './base/CardTitle'
import AccountNum from './base/AccountNum'
export default {
  name: 'VParking',
  components: {
    CardTitle,
    AccountNum
  },
  props:['total','rodeside','rodeclose'],
  data(){
    return{
    }
  },
  created(){
  },
  watch:{
    // rodeside:function(val){
    //   //console.log(val)
    // },
    // total:function (val) {
    //   //console.log(val)
    // }
  }
}
</script>
<style scoped lang="scss">
    .theme-wrap {
        height: 100%;
    }
    .theme-body {
        height: calc(100% - 30px);
        margin-left: 20px;
    }
    .theme-container{
        height: 70%;
        display: flex;
        align-items: center;
        >li{
            flex: 1;
            height: 57px;
            padding-left: 70px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            &:nth-of-type(1){
                p{
                    &:first-child{
                        @include fontStyle(24px);
                        background-image: $fontBlue;
                    }
                    &:last-child{
                        font-size: 14px;
                    }
                }
            }
            &:nth-of-type(2){
                p{
                    &:first-child{
                        @include fontStyle(24px);
                        background-image: $fontOrange;
                    }
                    &:last-child{
                        font-size: 14px;
                    }
                }
            }
        }
        .roadside{
            background: url("../images/content/roadside.png") no-repeat 0 center;
        }
        .roadclose{
            background: url("../images/content/roadclose.png") no-repeat 0 center;
        }
    }
</style>