You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
62 lines
1.2 KiB
62 lines
1.2 KiB
<template> |
|
<div class="datav-card"> |
|
<div class="datav-card_content"> |
|
<header class="flex between" v-if="title"> |
|
<div class="datav-card_title">{{ title }}</div> |
|
<div class="datav-card_sub-title">{{ subTitle }}</div> |
|
</header> |
|
<slot></slot> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
|
|
<script setup> |
|
defineProps({ |
|
title: { |
|
type: String, |
|
}, |
|
subTitle: { |
|
type: String, |
|
default: "" |
|
} |
|
}); |
|
</script> |
|
|
|
|
|
<style lang="scss" scoped> |
|
.datav-card { |
|
padding: 12px; |
|
margin-bottom: 20px; |
|
position: relative; |
|
z-index: 1; |
|
&::before { |
|
display: block; |
|
content: ""; |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
right: 0; |
|
bottom: 0; |
|
background: linear-gradient( |
|
180deg, |
|
rgba(8, 69, 180, 0.86) 0%, |
|
rgba(13, 51, 185, 0.42) 100% |
|
); |
|
opacity: 0.2; |
|
} |
|
.datav-card_content { |
|
position: relative; |
|
} |
|
.datav-card_title { |
|
font-size: 23px; |
|
color: #fff; |
|
margin-top: 0; |
|
margin-bottom: 8px; |
|
} |
|
.datav-card_sub-title { |
|
color: #597AE9; |
|
font-size: 14px; |
|
} |
|
} |
|
</style> |