| commit | author | age | ||
| 9bcb19 | 1 | <template> |
| I | 2 | <div id="userLayout" :class="['user-layout-wrapper', device]"> |
| 3 | <div class="container"> | |
| 4 | <div class="top"> | |
| 5 | <div class="header"> | |
| 6 | <a href="/"> | |
| 7 | <img src="~@/assets/logo.png" class="logo" alt="logo"> | |
| 8 | <span class="title">Snowy快速开发平台</span> | |
| 9 | </a> | |
| 10 | </div> | |
| 11 | <div class="desc"> | |
| 12 | ||
| 13 | </div> | |
| 14 | </div> | |
| 15 | ||
| 16 | <route-view></route-view> | |
| 17 | ||
| 18 | <div class="footer"> | |
| 19 | <div class="links"> | |
| 20 | <a href="_self">帮助</a> | |
| 21 | <a href="_self">隐私</a> | |
| 22 | <a href="_self">条款</a> | |
| 23 | </div> | |
| 24 | <div class="copyright"> | |
| 25 | Copyright © 2020 <a target="_blank" href="https://www.xiaonuo.vip/">小诺开源技术</a> All rights reserved. Snowy 1.8 | |
| 26 | </div> | |
| 27 | </div> | |
| 28 | </div> | |
| 29 | </div> | |
| 30 | </template> | |
| 31 | ||
| 32 | <script> | |
| 33 | import RouteView from './RouteView' | |
| 34 | import { mixinDevice } from '@/utils/mixin' | |
| 35 | ||
| 36 | export default { | |
| 37 | name: 'UserLayout', | |
| 38 | components: { RouteView }, | |
| 39 | mixins: [mixinDevice], | |
| 40 | data () { | |
| 41 | return {} | |
| 42 | }, | |
| 43 | mounted () { | |
| 44 | document.body.classList.add('userLayout') | |
| 45 | }, | |
| 46 | beforeDestroy () { | |
| 47 | document.body.classList.remove('userLayout') | |
| 48 | } | |
| 49 | } | |
| 50 | </script> | |
| 51 | ||
| 52 | <style lang="less" scoped> | |
| 53 | #userLayout.user-layout-wrapper { | |
| 54 | height: 100%; | |
| 55 | ||
| 56 | &.mobile { | |
| 57 | .container { | |
| 58 | .main { | |
| 59 | max-width: 368px; | |
| 60 | width: 98%; | |
| 61 | } | |
| 62 | } | |
| 63 | } | |
| 64 | ||
| 65 | .container { | |
| 66 | width: 100%; | |
| 67 | min-height: 100%; | |
| 68 | background-color: #ffffff; | |
| 69 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='800' height='800' viewBox='0 0 200 200'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='88' y1='88' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%23064e77'/%3E%3Cstop offset='1' stop-color='%230a7dbe'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='75' y1='76' x2='168' y2='160'%3E%3Cstop offset='0' stop-color='%238f8f8f'/%3E%3Cstop offset='0.09' stop-color='%23b3b3b3'/%3E%3Cstop offset='0.18' stop-color='%23c9c9c9'/%3E%3Cstop offset='0.31' stop-color='%23dbdbdb'/%3E%3Cstop offset='0.44' stop-color='%23e8e8e8'/%3E%3Cstop offset='0.59' stop-color='%23f2f2f2'/%3E%3Cstop offset='0.75' stop-color='%23fafafa'/%3E%3Cstop offset='1' stop-color='%23FFFFFF'/%3E%3C/linearGradient%3E%3Cfilter id='c' x='0' y='0' width='200%25' height='200%25'%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='12' /%3E%3C/filter%3E%3C/defs%3E%3Cpolygon fill='url(%23a)' points='0 174 0 0 174 0'/%3E%3Cpath fill='%23000' fill-opacity='.5' filter='url(%23c)' d='M121.8 174C59.2 153.1 0 174 0 174s63.5-73.8 87-94c24.4-20.9 87-80 87-80S107.9 104.4 121.8 174z'/%3E%3Cpath fill='url(%23b)' d='M142.7 142.7C59.2 142.7 0 174 0 174s42-66.3 74.9-99.3S174 0 174 0S142.7 62.6 142.7 142.7z'/%3E%3C/svg%3E"); | |
| 70 | background-attachment: fixed; | |
| 71 | background-repeat: no-repeat; | |
| 72 | background-position: top left; | |
| 73 | padding: 110px 0 144px; | |
| 74 | position: relative; | |
| 75 | ||
| 76 | a { | |
| 77 | text-decoration: none; | |
| 78 | } | |
| 79 | ||
| 80 | .top { | |
| 81 | text-align: center; | |
| 82 | ||
| 83 | .header { | |
| 84 | height: 44px; | |
| 85 | line-height: 44px; | |
| 86 | ||
| 87 | .badge { | |
| 88 | position: absolute; | |
| 89 | display: inline-block; | |
| 90 | line-height: 1; | |
| 91 | vertical-align: middle; | |
| 92 | margin-left: -12px; | |
| 93 | margin-top: -10px; | |
| 94 | opacity: 0.8; | |
| 95 | } | |
| 96 | ||
| 97 | .logo { | |
| 98 | height: 44px; | |
| 99 | vertical-align: top; | |
| 100 | margin-right: 16px; | |
| 101 | border-style: none; | |
| 102 | } | |
| 103 | ||
| 104 | .title { | |
| 105 | font-size: 33px; | |
| 106 | color: rgba(0, 0, 0, .85); | |
| 107 | font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif; | |
| 108 | font-weight: 600; | |
| 109 | position: relative; | |
| 110 | top: 2px; | |
| 111 | } | |
| 112 | } | |
| 113 | .desc { | |
| 114 | font-size: 14px; | |
| 115 | color: rgba(0, 0, 0, 0.45); | |
| 116 | margin-top: 12px; | |
| 117 | margin-bottom: 40px; | |
| 118 | } | |
| 119 | } | |
| 120 | ||
| 121 | .main { | |
| 122 | min-width: 260px; | |
| 123 | width: 368px; | |
| 124 | margin: 0 auto; | |
| 125 | } | |
| 126 | ||
| 127 | .footer { | |
| 128 | position: absolute; | |
| 129 | width: 100%; | |
| 130 | bottom: 0; | |
| 131 | padding: 0 16px; | |
| 132 | margin: 48px 0 24px; | |
| 133 | text-align: center; | |
| 134 | ||
| 135 | .links { | |
| 136 | margin-bottom: 8px; | |
| 137 | font-size: 14px; | |
| 138 | a { | |
| 139 | color: rgba(0, 0, 0, 0.45); | |
| 140 | transition: all 0.3s; | |
| 141 | &:not(:last-child) { | |
| 142 | margin-right: 40px; | |
| 143 | } | |
| 144 | } | |
| 145 | } | |
| 146 | .copyright { | |
| 147 | color: rgba(0, 0, 0, 0.45); | |
| 148 | font-size: 14px; | |
| 149 | } | |
| 150 | } | |
| 151 | } | |
| 152 | } | |
| 153 | </style> | |
