| | |
| | | <template> |
| | | <div id="userLayout" :class="['user-layout-wrapper', device]"> |
| | | <div class="container"> |
| | | <div class="top"> |
| | | <div class="header"> |
| | | <a href="/"> |
| | | <img src="~@/assets/logo.svg" class="logo" alt="logo"> |
| | | <span class="title">Jeecg Boot</span> |
| | | </a> |
| | | </div> |
| | | <div class="desc"> |
| | | Jeecg Boot 是中国最具影响力的 企业级 低代码平台 |
| | | </div> |
| | | </div> |
| | | |
| | | <route-view></route-view> |
| | | |
| | | <div class="footer"> |
| | | <div class="links"> |
| | | <a href="http://doc.jeecg.com" target="_blank">帮助</a> |
| | | <a href="https://github.com/zhangdaiscott/jeecg-boot" target="_blank">隐私</a> |
| | | <a href="https://github.com/zhangdaiscott/jeecg-boot/blob/master/LICENSE" target="_blank">条款</a> |
| | | </div> |
| | | <div class="copyright"> |
| | | Copyright © 2019 <a href="http://www.jeecg.com" target="_blank">JEECG开源社区</a> 出品 |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import RouteView from "@/components/layouts/RouteView" |
| | | import RouteView from '@/components/layouts/RouteView' |
| | | import { mixinDevice } from '@/utils/mixin.js' |
| | | |
| | | export default { |
| | | name: "UserLayout", |
| | | name: 'UserLayout', |
| | | components: { RouteView }, |
| | | mixins: [mixinDevice], |
| | | data () { |
| | | data() { |
| | | return {} |
| | | }, |
| | | mounted () { |
| | | mounted() { |
| | | document.body.classList.add('userLayout') |
| | | }, |
| | | beforeDestroy () { |
| | | beforeDestroy() { |
| | | document.body.classList.remove('userLayout') |
| | | }, |
| | | } |
| | | } |
| | | </script> |
| | | |
| | |
| | | |
| | | &.mobile { |
| | | .container { |
| | | background: #f0f2f5 url(~@/assets/page/login/background.svg) no-repeat center; |
| | | background-size: cover; |
| | | padding: 110px 0 144px; |
| | | |
| | | .main { |
| | | max-width: 368px; |
| | | width: 98%; |
| | | margin: 0 auto; |
| | | } |
| | | } |
| | | } |
| | |
| | | .container { |
| | | width: 100%; |
| | | min-height: 100%; |
| | | background: #f0f2f5 url(~@/assets/background.svg) no-repeat 50%; |
| | | background-size: 100%; |
| | | padding: 110px 0 144px; |
| | | background: #f0f2f5 url(~@/assets/page/login/background.svg) no-repeat center; |
| | | background-size: cover; |
| | | padding-top: 200px; |
| | | position: relative; |
| | | |
| | | a { |
| | | text-decoration: none; |
| | | } |
| | | |
| | | .top { |
| | | text-align: center; |
| | | |
| | | .header { |
| | | height: 44px; |
| | | line-height: 44px; |
| | | |
| | | .badge { |
| | | position: absolute; |
| | | display: inline-block; |
| | | line-height: 1; |
| | | vertical-align: middle; |
| | | margin-left: -12px; |
| | | margin-top: -10px; |
| | | opacity: 0.8; |
| | | } |
| | | |
| | | .logo { |
| | | height: 44px; |
| | | vertical-align: top; |
| | | margin-right: 16px; |
| | | border-style: none; |
| | | } |
| | | |
| | | .title { |
| | | font-size: 33px; |
| | | color: rgba(0, 0, 0, .85); |
| | | font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; |
| | | 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; |
| | | } |
| | | width: 450px; |
| | | margin-left: 10%; |
| | | |
| | | .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; |
| | | } |
| | | } |
| | | } |
| | | } |