| <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> |