UserLayout.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. <template>
  2. <div id="userLayout" :class="['user-layout-wrapper', device]">
  3. <canvas id='canvas'></canvas>
  4. <div class="container">
  5. <div class="top">
  6. <div class="header">
  7. <a href="/">
  8. <img src="~@/assets/logo.png" class="logo" alt="logo">
  9. <!-- <span class="title">{{logo}}</span> -->
  10. </a>
  11. </div>
  12. <div class="desc">
  13. {{title}}
  14. </div>
  15. </div>
  16. <route-view></route-view>
  17. <div class="footer">
  18. <!-- <div class="links">
  19. <a href="_self">帮助</a>
  20. <a href="_self">隐私</a>
  21. <a href="_self">条款</a>
  22. </div> -->
  23. <div class="copyright">
  24. Copyright &copy; 2020 西安车领主网络科技有限公司 <a href="http://beian.miit.gov.cn/" target="_blank">陕ICP备20006268号</a>
  25. </div>
  26. </div>
  27. </div>
  28. </div>
  29. </template>
  30. <script>
  31. import RouteView from './RouteView'
  32. import { mixinDevice } from '@/utils/mixin'
  33. import { bgStart } from '@/utils/bg/bg2'
  34. export default {
  35. name: 'UserLayout',
  36. components: { RouteView },
  37. mixins: [mixinDevice],
  38. data () {
  39. return {
  40. title: process.env.VUE_APP_PRO_NAME
  41. }
  42. },
  43. mounted () {
  44. document.body.classList.add('userLayout')
  45. bgStart()
  46. },
  47. beforeDestroy () {
  48. document.body.classList.remove('userLayout')
  49. }
  50. }
  51. </script>
  52. <style lang="less" scoped>
  53. #userLayout.user-layout-wrapper {
  54. height: 100%;
  55. overflow: hidden;
  56. &.mobile {
  57. .container {
  58. .main {
  59. max-width: 368px;
  60. width: 98%;
  61. }
  62. }
  63. }
  64. canvas {
  65. width: 100%;
  66. min-height: 100%;
  67. }
  68. .container {
  69. width: 100%;
  70. min-height: 100%;
  71. // background: #f0f2f5 url(~@/assets/background.svg) no-repeat 50%;
  72. background-size: 100%;
  73. padding: 150px 0 144px;
  74. position: absolute;
  75. left:0;
  76. top:0;
  77. a {
  78. text-decoration: none;
  79. }
  80. .top {
  81. text-align: center;
  82. .header {
  83. height: 44px;
  84. line-height: 44px;
  85. .badge {
  86. position: absolute;
  87. display: inline-block;
  88. line-height: 1;
  89. vertical-align: middle;
  90. margin-left: -12px;
  91. margin-top: -10px;
  92. opacity: 0.8;
  93. }
  94. .logo {
  95. height: 44px;
  96. vertical-align: top;
  97. margin-right: 16px;
  98. border-style: none;
  99. }
  100. .title {
  101. font-size: 33px;
  102. color: rgba(0, 0, 0, .85);
  103. font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif;
  104. font-weight: 600;
  105. position: relative;
  106. top: 2px;
  107. }
  108. }
  109. .desc {
  110. font-size: 24px;
  111. color: rgba(255, 255, 255, 0.8);
  112. margin-top: 12px;
  113. margin-bottom: 40px;
  114. }
  115. }
  116. .main {
  117. min-width: 260px;
  118. width: 368px;
  119. margin: 0 auto;
  120. }
  121. .footer {
  122. position: absolute;
  123. width: 100%;
  124. bottom: 0;
  125. padding: 0 16px;
  126. margin: 48px 0 24px;
  127. text-align: center;
  128. .links {
  129. margin-bottom: 8px;
  130. font-size: 14px;
  131. a {
  132. color: rgba(0, 0, 0, 0.45);
  133. transition: all 0.3s;
  134. &:not(:last-child) {
  135. margin-right: 40px;
  136. }
  137. }
  138. }
  139. .copyright {
  140. color: rgba(255, 255, 255, 0.45);
  141. font-size: 14px;
  142. a{
  143. text-decoration: none;
  144. color: rgba(255, 255, 255, 0.5);
  145. margin: 0 15px;
  146. &:hover{
  147. color: #FFFFFF;
  148. }
  149. }
  150. }
  151. }
  152. }
  153. }
  154. </style>