<template>
	<div class="h-card">
		<div class="title">
			<i>{{ title }}</i>
		</div>
		<div class="content">
			<slot></slot>
		</div>
	</div>
</template>

<script>
import { ref } from "vue";
export default {
	props: ["title"],
	setup(props) {
		return {};
	}
};
</script>

<style lang="scss" scoped>
.h-card {
	width: 100%;
	height: 100%;
	.title {
		height: 15%;
		line-height: 4vh;
		text-align: left;
		font-size: 18px;
		color: #ffffff;
		background: url("@/assets/images/titleBig.webp") no-repeat;
		background-size: 100% 100%;

		i {
			margin-left: 45px;
			font-family: OPPOSansH;
		}
	}
	.content {
		margin-top: 12px;
		height: calc(100% - 34px);
		background: url("@/assets/images/cardImg.png") no-repeat;
		background-size: 100% 100%;
	}
}
</style>
