123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170 |
- <template>
- <div id="userLayout" :class="['user-layout-wrapper', device]">
- <canvas id="canvas"></canvas>
- <div class="container">
- <div class="top">
- <div class="header">
- <a href="/">
- <img :src="logo" class="logo" alt="logo">
- <!-- <span class="title">{{logo}}</span> -->
- </a>
- </div>
- <div class="desc">
- {{ title }}
- </div>
- </div>
- <route-view></route-view>
- <div class="footer">
- <!-- <div class="links">
- <a href="_self">帮助</a>
- <a href="_self">隐私</a>
- <a href="_self">条款</a>
- </div> -->
- <div class="copyright">
- Copyright © {{new Date().getFullYear()}} {{ company }} <a href="http://beian.miit.gov.cn/" target="_blank">{{ icp }}</a>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- import RouteView from './RouteView'
- import { mixinDevice } from '@/utils/mixin'
- import { bgStart } from '@/utils/bg/bg2'
- export default {
- name: 'UserLayout',
- components: { RouteView },
- mixins: [mixinDevice],
- data () {
- return {
- title: process.env.VUE_APP_PRO_NAME,
- company: process.env.VUE_APP_COM_NAME, // 公司
- icp: process.env.VUE_APP_ICP, // 备案号
- logo: require(process.env.VUE_APP_LOGO) // logo
- }
- },
- mounted () {
- document.body.classList.add('userLayout')
- bgStart()
- },
- beforeDestroy () {
- document.body.classList.remove('userLayout')
- }
- }
- </script>
- <style lang="less" scoped>
- #userLayout.user-layout-wrapper {
- height: 100%;
- overflow: hidden;
- &.mobile {
- .container {
- .main {
- max-width: 368px;
- width: 98%;
- }
- }
- }
- canvas {
- width: 100%;
- min-height: 100%;
- }
- .container {
- width: 100%;
- min-height: 100%;
- // background: #f0f2f5 url(~@/assets/background.svg) no-repeat 50%;
- background-size: 100%;
- padding: 150px 0 144px;
- position: absolute;
- left:0;
- top:0;
- 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: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif;
- font-weight: 600;
- position: relative;
- top: 2px;
- }
- }
- .desc {
- font-size: 24px;
- color: rgba(255, 255, 255, 0.8);
- margin-top: 12px;
- margin-bottom: 40px;
- }
- }
- .main {
- min-width: 260px;
- width: 368px;
- margin: 0 auto;
- }
- .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(255, 255, 255, 0.45);
- font-size: 14px;
- a{
- text-decoration: none;
- color: rgba(255, 255, 255, 0.5);
- margin: 0 15px;
- &:hover{
- color: #FFFFFF;
- }
- }
- }
- }
- }
- }
- </style>
|