<template> <div class="card-list"> <div class="card-list-line"> <span class="card-list-title">{{ cardListTitle }}</span> <div> <slot name="right" /> </div> </div> <div class="card-list-content"> <slot name="content" /> </div> </div> </template> <script> export default { name: 'cardList', props: { cardListTitle: { type: String, default: '能耗统计' } }, data() { return {} } } </script> <style lang="scss" scoped> .card-list { width: 100%; height: 80%; background: #fff; // box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); &-line { display: flex; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid #d9d9d9; background: #f2faff; height: 45px; line-height: 45px; .card-list-title { display: flex; justify-content: center; align-items: center; font-size: 16px; font-family: Microsoft YaHei; font-weight: 600; color: #000000; } .card-list-title::before { content: ""; display: inline-block; padding-right: 5px; margin-right: 10px; height: 16px; background: #21acfc; } } // &-line::before{ // content: ''; // display: inline-block; // height: 16px; // background: #1890ff; // } .card-list-content { padding: 20px; height: calc(100% - 50px); } } </style>