UserLayout.vue 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170
  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="logo" 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; {{new Date().getFullYear()}} {{ company }} <a href="http://beian.miit.gov.cn/" target="_blank">{{ icp }}</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. company: process.env.VUE_APP_COM_NAME, // 公司
  42. icp: process.env.VUE_APP_ICP, // 备案号
  43. logo: require(process.env.VUE_APP_LOGO) // logo
  44. }
  45. },
  46. mounted () {
  47. document.body.classList.add('userLayout')
  48. bgStart()
  49. },
  50. beforeDestroy () {
  51. document.body.classList.remove('userLayout')
  52. }
  53. }
  54. </script>
  55. <style lang="less" scoped>
  56. #userLayout.user-layout-wrapper {
  57. height: 100%;
  58. overflow: hidden;
  59. &.mobile {
  60. .container {
  61. .main {
  62. max-width: 368px;
  63. width: 98%;
  64. }
  65. }
  66. }
  67. canvas {
  68. width: 100%;
  69. min-height: 100%;
  70. }
  71. .container {
  72. width: 100%;
  73. min-height: 100%;
  74. // background: #f0f2f5 url(~@/assets/background.svg) no-repeat 50%;
  75. background-size: 100%;
  76. padding: 150px 0 144px;
  77. position: absolute;
  78. left:0;
  79. top:0;
  80. a {
  81. text-decoration: none;
  82. }
  83. .top {
  84. text-align: center;
  85. .header {
  86. height: 44px;
  87. line-height: 44px;
  88. .badge {
  89. position: absolute;
  90. display: inline-block;
  91. line-height: 1;
  92. vertical-align: middle;
  93. margin-left: -12px;
  94. margin-top: -10px;
  95. opacity: 0.8;
  96. }
  97. .logo {
  98. height: 44px;
  99. vertical-align: top;
  100. margin-right: 16px;
  101. border-style: none;
  102. }
  103. .title {
  104. font-size: 33px;
  105. color: rgba(0, 0, 0, .85);
  106. font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif;
  107. font-weight: 600;
  108. position: relative;
  109. top: 2px;
  110. }
  111. }
  112. .desc {
  113. font-size: 24px;
  114. color: rgba(255, 255, 255, 0.8);
  115. margin-top: 12px;
  116. margin-bottom: 40px;
  117. }
  118. }
  119. .main {
  120. min-width: 260px;
  121. width: 368px;
  122. margin: 0 auto;
  123. }
  124. .footer {
  125. position: absolute;
  126. width: 100%;
  127. bottom: 0;
  128. padding: 0 16px;
  129. margin: 48px 0 24px;
  130. text-align: center;
  131. .links {
  132. margin-bottom: 8px;
  133. font-size: 14px;
  134. a {
  135. color: rgba(0, 0, 0, 0.45);
  136. transition: all 0.3s;
  137. &:not(:last-child) {
  138. margin-right: 40px;
  139. }
  140. }
  141. }
  142. .copyright {
  143. color: rgba(255, 255, 255, 0.45);
  144. font-size: 14px;
  145. a{
  146. text-decoration: none;
  147. color: rgba(255, 255, 255, 0.5);
  148. margin: 0 15px;
  149. &:hover{
  150. color: #FFFFFF;
  151. }
  152. }
  153. }
  154. }
  155. }
  156. }
  157. </style>