<!--用户基础布局页面-->
<template>
  <div id="userLayout" :class="['user-layout-wrapper', isMobile && 'mobile']">
    <div class="container">
      <!-- <div class="top"> -->
        <a-row type="flex" justify="space-between" align="middle" class="top">
          <a-col  :xs="20" :sm="10" :md="10"  :lg="6">
              <img src="../assets/img/1.png" class="logo" alt="logo">
          </a-col>
          <a-col :xs="0" :sm="10" :md="6"  :lg="4">
            <div class="desc">
              郑州品传科技
            </div>
          </a-col>
        </a-row>
      <!-- </div> -->

      <router-view />

      <div class="footer">
        <div class="links">
          小白Wifi管理平台
        </div>
        <div class="copyright">
          服务热线：400-166-1687
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    deviceMixin
  } from '@/store/device-mixin'

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

<style lang="less" scoped>
  #userLayout.user-layout-wrapper {
    height: 100%;

    &.mobile {
      .container {
        .main {
          max-width: 368px;
          width: 98%;
        }
      }
    }

    .container {
      width: 100%;
      height: 100%;
      overflow: hidden;
      .top {
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin: 1rem auto;
        height: 12%;
        img {
          max-width: 100%;
          height: auto;
        }

        .desc {
          font-size: 1rem;
          color: rgba(0, 0, 0, 0.45);
        }
      }

      .main {
        height: 70%;
        width: 100%;
        margin: 0 auto;
        background: url(../assets/img/7.jpg) no-repeat 50%;
        background-size: cover;
        position: relative;
        display: flex;
        align-items: center;
      }

      .footer {
        height: 15%;
        margin-top: 1.875rem;
        line-height: 30px;
        text-align: center;
        font-size: 1rem;

        .copyright {
          color: #37b5b8;
          ;
        }
      }
    }
  }
</style>
