48 lines
763 B
Vue
48 lines
763 B
Vue
<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>
|