<script> | |
import Page from './utils/Page.vue'; | |
export default { | |
props: [ | |
'icon', | |
], | |
components: { | |
Page, | |
}, | |
}; | |
</script> | |
<template> | |
<page mini> | |
<div class="layout"> | |
<mcw-material-icon class="main-icon" :icon="icon" /> | |
<span class="label"><slot></slot></span> | |
</div> | |
</page> | |
</template> | |
<style lang="scss" scoped> | |
@use "@material/theme/color-palette" as palette; | |
.layout { | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
margin: 16px 0; | |
} | |
.main-icon { | |
font-size: 75px; | |
color: palette.$grey-800; | |
} | |
.label { | |
margin-top: 14px; | |
text-align: center; | |
} | |
</style> |