VParking.vue 1.42 KB
<template>
    <div class="theme-wrap">
        <card-title> <span>停车场消息</span></card-title>
        <div class="theme-body">
            <div class="total-wrap">
                <span>总计</span>
                <div class="total-main">
                    <div class="eleNumBg">1</div><div class="eleNumBg">3</div><div class="eleNumBg">5</div><div class="eleNumBg">8</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import CardTitle from './base/CardTitle'
export default {
  name: 'VParking',
  components: {
    CardTitle
  }
}
</script>

<style scoped lang="scss">
    .theme-wrap {
        height: 100%;
    }
    .theme-body {
        height: calc(100% - 30px);
        margin-left: 20px;
    }
    .total-wrap{
        height: 30%;
        display: flex;
        align-items: center;
        .total-main{
            margin-left: 10px;
            padding: 5px 5px 5px 0;
            background: url("../images/content/numBorder.svg") no-repeat;
            background-size: 100% 100%;
        }
        .eleNumBg{
            width: 20px;
            height: 30px;
            display: inline-block;
            margin-left: 5px;
            line-height: 30px;
            font-size: 22px;
            font-weight: 600;
            text-align: center;
            background: url("../images/content/numBg.svg") no-repeat;
            background-size: 100% 100%;
        }
    }
</style>