<template> <div id="app"> <router-view /> </div> </template> <script> export default { name: 'App', metaInfo() { return { title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title, titleTemplate: title => { return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE } } } } </script> <style lang="scss"> .page-title{ font-size:16px; margin:20px 0; display:flex; align-items:center; &:before{ content: ''; width:5px; height: 15px; background:#666; margin-right:10px; } } .flex{ display: flex; } .flex-1{ flex: 1; } .center{ align-content: center; text-align: center; } .flex-center{ display: flex; align-items: center; justify-content: center; } .empty-placeholder{ padding: 50px; text-align: center; } $sizes: 0, 10,20,30,50,100,150,200,300,500,800,1000; @for $i from 1 through length($sizes){ $item: nth($sizes, $i); .ml-#{$item}{ margin-left: #{$item}px !important; } .mr-#{$item}{ margin-right: #{$item}px !important; } .mb-#{$item}{ margin-bottom: #{$item}px !important; } .mt-#{$item}{ margin-top: #{$item}px !important; } .pl-#{$item}{ margin-left: #{$item}px !important; } .pr-#{$item}{ margin-right: #{$item}px !important; } .pb-#{$item}{ margin-bottom: #{$item}px !important; } .pt-#{$item}{ margin-top: #{$item}px !important; } .w-#{$item}{ width: #{$item}px !important; } } </style>