<script setup name="ycCard">
|
import { ref } from 'vue';
|
|
const props = defineProps({
|
isFull: {
|
type: Boolean,
|
default: false
|
},
|
title: {
|
type: String,
|
default: ''
|
}
|
});
|
</script>
|
|
<template>
|
<div class="hdw-card" :class="[isFull && 'is-full', title && 'is-has-title']">
|
<div v-if="title" class="hdw-card-title">
|
{{title}}
|
<div class="tools">
|
<slot name="tools"></slot>
|
</div>
|
</div>
|
<div class="hdw-card-content">
|
<slot></slot>
|
</div>
|
</div>
|
</template>
|
|
<style scoped lang="less">
|
.hdw-card {
|
box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
|
padding: 0 8px 8px 8px;
|
border-radius: 4px;
|
|
&.is-full {
|
height: 100%;
|
|
.hdw-card-content {
|
padding-top: 8px;
|
height: 100%;
|
}
|
|
&.is-has-title {
|
.hdw-card-content {
|
height: calc(100% - 30px);
|
}
|
}
|
}
|
|
.hdw-card-title {
|
// background: url("./images/card-bg.png") no-repeat 0 0 e('/') 100% 100%;
|
border-image: url('./images/card-bg.png') 36 106 4 300 fill / 36px 107px 4px 300px;
|
color: var(--light-color);
|
margin-left: -8px;
|
margin-right: -8px;
|
padding: 8px;
|
border-bottom: 1px solid #00feff30;
|
font-weight: 700;
|
font-size: 14px;
|
position: relative;
|
|
img {
|
width: auto;
|
height: 10px;
|
}
|
.tools {
|
position: absolute;
|
right: 46px;
|
top: 8px;
|
}
|
}
|
}
|
</style>
|
