hitch-sb-antd/src/layouts/UserLayout.vue

<template>
  <div id="userLayout" :class="['user-layout-wrapper', device]">
    <div class="container">
      <!--      <div class="top">-->
      <!--        <div class="header">-->
      <!--          <a href="/">-->
      <!--            <img src="~@/assets/logo.png" class="logo" alt="logo">-->
      <!--          </a>-->
      <!--        </div>-->
      <!-- <div class="top font">
        设备管理系统平台
      </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 &copy; 2022
        </div>-->
      </div>
    </div>
  </div>
</template>

<script>
import RouteView from './RouteView'
import { mixinDevice } from '@/utils/mixin'

export default {
  name: 'UserLayout',
  components: { RouteView },
  mixins: [mixinDevice],
  data() {
    return {}
  },
  mounted() {
    document.body.classList.add('userLayout')
  },
  beforeDestroy() {
    document.body.classList.remove('userLayout')
  }
}
</script>

<style lang="less" scoped>
#userLayout.user-layout-wrapper {
  height: 100%;
  background: #f0f2f5 url(~@/assets/NewBg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  &.mobile {
    .container {
      .main {
        max-width: 368px;
        width: 98%;
      }
    }
  }
  .font {
    font-size: 50px;
    color: #00eaff;
    letter-spacing: 3px;
  }
  .container {
    width: 100%;
    min-height: 100%;
    background-size: 100%;
    position: relative;
    a {
      text-decoration: none;
    }
    .footer {
      position: absolute;
      width: 100%;
      bottom: 15%;
      padding: 0 16px;
      margin: 48px 0 24px;
      text-align: center;

      .links {
        margin-bottom: 8px;
        font-size: 14px;
        a {
          color: white;
          transition: all 0.3s;
          &:not(:last-child) {
            margin-right: 40px;
          }
        }
      }
      .copyright {
        color: #00eaff;
        font-size: 20px;
        font-weight: 500;
        font-family: PingFang SC;
      }
    }
  }
}
</style>