| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657 |
- <template>
- <div class="basic-card">
- <div v-if="title" class="basic-card__title">
- <span class="divider"></span>
- <span class="title">{{ title }}</span>
- <div class="actions">
- <slot name="actions"></slot>
- </div>
- </div>
- <div class="basic-card__content">
- <slot></slot>
- </div>
- </div>
- </template>
- <script>
- export default {
- name: "BasicCard",
- props: {
- title: String,
- },
- };
- </script>
- <style lang="scss" scoped>
- @import "~@/styles/variables.scss";
- .basic-card {
- background: #fff;
- border-radius: 3px;
- padding: 5px 20px 20px;
- box-sizing: border-box;
- &__title {
- padding-bottom: 5px;
- line-height: 40px;
- .divider {
- display: inline-block;
- width: 4px;
- height: 20px;
- background-color: $mainBg;
- margin-right: 10px;
- vertical-align: middle;
- }
- .title {
- display: inline-block;
- color: #333;
- font-weight: 600;
- vertical-align: middle;
- font-size: 16px;
- margin-bottom: 2px;
- }
- .actions {
- float: right;
- }
- }
- }
- </style>
|