laws_weilai/jero-web/src/components/layouts/UserLayout.vue

<template>
  <div id="userLayout" :class="['user-layout-wrapper',device]">
    <div :class="!mobile ? 'container' : 'container-mobile'">
      <div class="top" id="top" v-if="!mobile">
        <div class="logo">
<!--          <img id="logo" src="~@/assets/logo.png" alt="">-->
        </div>
        <div id="company">
<!--          <span id="c-company">合众未来</span>-->
<!--          <span id="p-company">HEZHONGWEILAI</span>-->
        </div>
      </div>
      <div v-if="mobile">
        <span class="top-bg"><img src="~/@assets/mobileBg.png" alt=""></span>
        <span class="btm-bg"><img src="~/@assets/mobileHome.png" alt=""></span>
      </div>
      <div v-if="mobile" class="mobile">
        <div class="logo">
          <img src="~@/assets/logo.png" alt="">
        </div>
        <div class="company">
          <span>合众未来</span>
          <span>HEZHONGWEILAI</span>
        </div>
      </div>
      <div class="illustration" v-if="!mobile">
        <img src="@/assets/home.png" alt="">
      </div>
      <route-view></route-view>
    </div>
  </div>
</template>

<script>
  import RouteView from "@/components/layouts/RouteView"
  import { mixinDevice } from '@/utils/mixin.js'

  export default {
    name: "UserLayout",
    components: { RouteView },
    mixins: [mixinDevice],
    data () {
      return {
        mobile:isMobile() //是否是mobile
      }
    },
    mounted () {
      document.body.classList.add('userLayout')
    },
    beforeDestroy () {
      document.body.classList.remove('userLayout')
    },
  }
  // 判断当前设备
  function isMobile() {
    var userAgentInfo = navigator.userAgent;

    var mobileAgents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];

    var mobile_flag = false;

    //根据userAgent判断是否是手机
    for (var v = 0; v < mobileAgents.length; v++) {
      if (userAgentInfo.indexOf(mobileAgents[v]) > 0) {
        mobile_flag = true;
        break;
      }
    }
    var screen_width = window.screen.width;
    var screen_height = window.screen.height;

    //根据屏幕分辨率判断是否是手机
    if (screen_width < 500 && screen_height < 800) {
      mobile_flag = true;
    }
    return mobile_flag;
  }
</script>
<style lang="less" >
  #userLayout.user-layout-wrapper{
    height: 100%;
    background: #4daaff;
    overflow: auto;
    .container {
      width: 100%;
      min-width: 770px;
      min-height: 500px;
      height: 100%;
      position: relative;
      .top {
        position: absolute;
        left: 2%;
        top: 3%;
        min-width: 100px;
        max-height: 50px;
        z-index: 9;
        .logo {
          width: 100%;
          display: flex;
          align-items: center;
          position: absolute;
          overflow: hidden;
          img {
            display: block;
            max-width: 100%;
            min-height: 30px;
          }
        }
        #company {
          position: absolute;
          max-height: 62px;
          left: 5.5rem;
          min-height: 61px;
          color: #000;
          white-space: nowrap;
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          span {
            display: block;
            &:first-child {
              font-size: 1.8rem;
              font-weight: 700;
              letter-spacing: 0.3rem;
            }
            &:last-child {
              font-size: 0.9rem;
              line-height: 0.9rem;
              letter-spacing: 0.06rem;
              font-weight: 700;
            }
          }
        }
      }

      .illustration{
        position: absolute;
        max-width: 50%;
        max-height: 100%;
        height: 100%;
        min-width: 400px;
        display: flex;
        justify-content: center;
        align-items: center;
        img{
          max-width: 70%;
        }
      }
    }
    .container-mobile{
      /*移动端的logo样式*/
      .top-bg{
        width: 100%;
        position: absolute;
        top: -3.5rem;
        img{
          width: 100%;
        }
      }
      .btm-bg{
        position: absolute;
        bottom: 0;
        left: 0;
        max-width: 75%;
        overflow: hidden;
        img{
          margin-left: -5rem;
          max-width: 100%;
          margin-bottom: -3rem;
        }
      }
      background: #f0f2f5;
      width: 100%;
      height: 100%;
      .mobile{
        position: absolute;
        top: 6rem;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .logo{
          max-width: 4rem;
          img{
            max-width: 100%;
            margin-bottom: 0.5rem;
          }
        }
        .company{
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
          span:first-child{
            color: #000;
            font-size: 1.6rem;
            font-weight: bold;
            letter-spacing: 0.3rem;
          }
          span:last-child{
            color: #000;
            font-size: 0.8rem;
            line-height: 1.2rem;
            font-weight: bold;
          }
        }
      }
    }
  }
</style>