<script> | |
export default { | |
props: { | |
'mini': Boolean, | |
}, | |
}; | |
</script> | |
<template> | |
<div class="page-content"> | |
<div class="main mdc-elevation--z4" :class="{'main--mini': mini}"> | |
<slot></slot> | |
</div> | |
</div> | |
</template> | |
<style scoped> | |
.main { | |
position: relative; | |
display: block; | |
width: Calc(100% - 64px); | |
max-width: 1024px; | |
margin: 20px auto; | |
padding: 16px 16px 16px 16px; | |
border-radius: 2px; | |
background: #FFFFFF; | |
font-family: "Roboto", "Helvetica", "Arial", sans-serif; | |
} | |
.main.main--mini { | |
max-width: 400px; | |
} | |
</style> |