27 行
591 B
Vue
27 行
591 B
Vue
<template>
|
|
<div class="content-card" :class="{ 'content-card--hoverable': hoverable }">
|
|
<slot />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
defineProps({
|
|
hoverable: { type: Boolean, default: true },
|
|
})
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.content-card {
|
|
background: @color-bg-white;
|
|
border: 1px solid @color-border;
|
|
border-radius: @border-radius-lg;
|
|
padding: @space-xl;
|
|
transition: box-shadow 0.3s cubic-bezier(0.23, 1, 0.32, 1), transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
|
|
|
|
&--hoverable:hover {
|
|
box-shadow: @shadow-md;
|
|
transform: translateY(-3px);
|
|
}
|
|
}
|
|
</style>
|