<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; } .flex-between{ display: flex; justify-content: space-between; } .empty-placeholder{ padding: 50px; text-align: center; } /*给el-input-number一个紧凑的样式*/ .el-input-number.is-controls-right.tight .el-input__inner{ padding-right: 30px; padding-left: 5px; } $sizes: 0, 5, 10,20,30,50,75,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; } } table{ border-collapse: collapse; border-spacing: 0; } </style>