| <template> |
| <div id="userLayout" :class="['user-layout-wrapper', device]"> |
| <div class="container"> |
| <div class="top"> |
| <div class="header"> |
| <img src="~@/assets/banner.png" class="logo" alt="logo"> |
| </div> |
| </div> |
| <route-view></route-view> |
| </div> |
| </div> |
| </template> |
| |
| <script> |
| import RouteView from '@/components/layouts/RouteView' |
| import { mixinDevice } from '@/utils/mixin.js' |
| |
| export default { |
| name: 'UserLayout', |
| components: { RouteView }, |
| mixins: [mixinDevice], |
| data () { |
| return {} |
| }, |
| mounted () { |
| document.body.classList.add('userLayout') |
| }, |
| beforeDestroy () { |
| document.body.classList.remove('userLayout') |
| } |
| } |
| </script> |
| |
| <style lang="less" scoped> |
| #userLayout.user-layout-wrapper { |
| height: 100%; |
| |
| &.mobile { |
| .container { |
| padding-top: 50px; |
| |
| .main { |
| max-width: 368px; |
| width: 98%; |
| } |
| } |
| } |
| |
| .container { |
| width: 100%; |
| min-height: 100%; |
| background: #fff; // url(~@/assets/background.svg) no-repeat 50%; |
| background-size: 100%; |
| padding-top: 75px; |
| position: relative; |
| |
| a { |
| text-decoration: none; |
| } |
| |
| .top { |
| text-align: center; |
| |
| .header { |
| |
| .badge { |
| position: absolute; |
| display: inline-block; |
| line-height: 1; |
| vertical-align: middle; |
| margin-left: -12px; |
| margin-top: -10px; |
| opacity: 0.8; |
| } |
| |
| .logo { |
| vertical-align: top; |
| border-style: none; |
| } |
| |
| .title { |
| font-size: 33px; |
| color: rgba(0, 0, 0, .85); |
| font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif; |
| font-weight: 600; |
| position: relative; |
| top: 2px; |
| } |
| } |
| .desc { |
| font-size: 14px; |
| color: rgba(0, 0, 0, 0.45); |
| margin-top: 12px; |
| margin-bottom: 40px; |
| } |
| } |
| |
| .main { |
| min-width: 260px; |
| width: 368px; |
| margin: 0 auto; |
| } |
| |
| .footer { |
| position: absolute; |
| width: 100%; |
| bottom: 0; |
| padding: 0 16px; |
| margin: 48px 0 24px; |
| text-align: center; |
| |
| .links { |
| margin-bottom: 8px; |
| font-size: 14px; |
| a { |
| color: rgba(0, 0, 0, 0.45); |
| transition: all 0.3s; |
| &:not(:last-child) { |
| margin-right: 40px; |
| } |
| } |
| } |
| .copyright { |
| color: rgba(0, 0, 0, 0.45); |
| font-size: 14px; |
| } |
| } |
| } |
| } |
| </style> |