UserLayout.vue 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
  1. <template>
  2. <div id="userLayout" :class="['user-layout-wrapper', device]">
  3. <div class="container">
  4. <div class="container">
  5. <!-- 萃颠logo -->
  6. <div class="logo">
  7. <!-- 技能博物馆 -->
  8. <img src="../../assets/logo-cd-left1.png" alt="" />
  9. <!-- <img src="../../assets/logo-blue.png" alt="" /> -->
  10. </div>
  11. <!-- 放表单的盒子 -->
  12. <div class="formBox">
  13. <img src="../../assets/white-bg.png" alt="" />
  14. <route-view></route-view>
  15. </div>
  16. </div>
  17. <!-- <div class="top">
  18. <div class="header">
  19. <a href="/">
  20. <img src="~@/assets/logo-cd.png" class="logo" alt="logo">
  21. <span class="title">上海萃颠信息科技有限公司</span>
  22. </a>
  23. </div>
  24. <div class="desc"> -->
  25. <!-- Jeecg Boot 是中国最具影响力的 企业级 快速开发平台 -->
  26. <!-- </div>
  27. </div> -->
  28. <!-- -->
  29. <!-- <route-view></route-view> -->
  30. <!-- <div class="footer">
  31. <div class="links">
  32. <a href="http://doc.jeecg.com" target="_blank">帮助</a>
  33. <a href="https://github.com/zhangdaiscott/jeecg-boot" target="_blank">隐私</a>
  34. <a href="https://github.com/zhangdaiscott/jeecg-boot/blob/master/LICENSE" target="_blank">条款</a>
  35. </div>
  36. <div class="copyright">
  37. Copyright &copy; 2019 <a href="http://www.jeecg.com" target="_blank">JEECG开源社区</a> 出品
  38. </div>
  39. </div> -->
  40. </div>
  41. </div>
  42. </template>
  43. <script>
  44. import RouteView from '@/components/layouts/RouteView'
  45. import { mixinDevice } from '@/utils/mixin.js'
  46. export default {
  47. name: 'UserLayout',
  48. components: { RouteView },
  49. mixins: [mixinDevice],
  50. data () {
  51. return {}
  52. },
  53. mounted () {
  54. document.body.classList.add('userLayout')
  55. },
  56. beforeDestroy () {
  57. document.body.classList.remove('userLayout')
  58. }
  59. }
  60. </script>
  61. <style lang="less" scoped>
  62. #userLayout.user-layout-wrapper {
  63. height: 100%;
  64. &.mobile {
  65. .container {
  66. .main {
  67. max-width: 368px;
  68. width: 98%;
  69. }
  70. }
  71. }
  72. .container {
  73. width: 100%;
  74. min-height: 100%;
  75. // background: #f0f2f5 url(~@/assets/background.svg) no-repeat 50%;
  76. background-image: url('../../assets/bg.png');
  77. background-size: cover;
  78. background-position: center center;
  79. background-size: 100%;
  80. padding: 110px 0 144px;
  81. position: relative;
  82. .main {
  83. position: absolute;
  84. top: 14%;
  85. left: 58%;
  86. }
  87. .logo {
  88. position: absolute;
  89. top: -80px;
  90. left: 42px;
  91. // 技能博物馆
  92. img {
  93. height: 78px
  94. }
  95. }
  96. // 放表单的背景
  97. .formBox {
  98. position: absolute;
  99. left: 50%;
  100. top: 10px;
  101. transform: translate(-50%);
  102. }
  103. // .top {
  104. // text-align: center;
  105. // .header {
  106. // height: 44px;
  107. // line-height: 44px;
  108. // .badge {
  109. // position: absolute;
  110. // display: inline-block;
  111. // line-height: 1;
  112. // vertical-align: middle;
  113. // margin-left: -12px;
  114. // margin-top: -10px;
  115. // opacity: 0.8;
  116. // }
  117. // .logo {
  118. // height: 44px;
  119. // vertical-align: top;
  120. // margin-right: 16px;
  121. // border-style: none;
  122. // }
  123. // .title {
  124. // font-size: 33px;
  125. // color: rgba(0, 0, 0, .85);
  126. // 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";
  127. // font-weight: 600;
  128. // position: relative;
  129. // top: 2px;
  130. // }
  131. // }
  132. // .desc {
  133. // font-size: 14px;
  134. // color: rgba(0, 0, 0, 0.45);
  135. // margin-top: 12px;
  136. // margin-bottom: 40px;
  137. // }
  138. // }
  139. a {
  140. text-decoration: none;
  141. }
  142. .main {
  143. min-width: 260px;
  144. width: 368px;
  145. // margin: 0 auto;
  146. }
  147. // .footer {
  148. // position: absolute;
  149. // width: 100%;
  150. // bottom: 0;
  151. // padding: 0 16px;
  152. // margin: 48px 0 24px;
  153. // text-align: center;
  154. // .links {
  155. // margin-bottom: 8px;
  156. // font-size: 14px;
  157. // a {
  158. // color: rgba(0, 0, 0, 0.45);
  159. // transition: all 0.3s;
  160. // &:not(:last-child) {
  161. // margin-right: 40px;
  162. // }
  163. // }
  164. // }
  165. // .copyright {
  166. // color: rgba(0, 0, 0, 0.45);
  167. // font-size: 14px;
  168. // }
  169. // }
  170. }
  171. }
  172. </style>