cd-work-flow-web/src/components/layouts/UserLayout.vue

<template>
  <div id="userLayout" :class="['user-layout-wrapper', device]">
    <div class="container">

      <div class="container">
        <!-- 萃颠logo -->
        <div class="logo">
          <!-- 技能博物馆 -->
          <!-- <img src="../../assets/logo-cd-left1.png" alt="" /> -->
          <img :src="this.imgUrl" alt="" />
        </div>

        <!-- 放表单的盒子 -->
        <div class="formBox">
          <img src="../../assets/white-bg.png" alt="" />
          <route-view></route-view>
        </div>
      </div>

      <!-- <div class="top">
        <div class="header">
          <a href="/">
            <img src="~@/assets/logo-cd.png" class="logo" alt="logo">
            <span class="title">上海萃颠信息科技有限公司</span>
          </a>
        </div>
        <div class="desc"> -->
      <!-- Jeecg Boot 是中国最具影响力的 企业级 快速开发平台 -->
      <!-- </div>
      </div> -->
      <!--  -->
      <!-- <route-view></route-view> -->

      <!-- <div class="footer">
        <div class="links">
          <a href="http://doc.jeecg.com" target="_blank">帮助</a>
          <a href="https://github.com/zhangdaiscott/jeecg-boot" target="_blank">隐私</a>
          <a href="https://github.com/zhangdaiscott/jeecg-boot/blob/master/LICENSE" target="_blank">条款</a>
        </div>
        <div class="copyright">
          Copyright &copy; 2019 <a href="http://www.jeecg.com" target="_blank">JEECG开源社区</a> 出品
        </div>
      </div> -->
    </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 {}
    },
    created(){
      this.imgUrl = require(this.imgUrl)
    },
    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%;
      min-height: 100%;
      // background: #f0f2f5 url(~@/assets/background.svg) no-repeat 50%;
      background-image: url('../../assets/bg.png');
      background-size: cover;
      background-position: center center;
      background-size: 100%;
      padding: 110px 0 144px;
      position: relative;
    .main {
      position: absolute;
      top: 14%;
      left: 58%;
    }
    .logo {
      position: absolute;
      top: -80px;
      left: 42px;
      
      // 技能博物馆
      // img {
      //   height: 78px
      // }
    }
    // 放表单的背景
    .formBox {
      position: absolute;
      left: 50%;
      top: 10px;
      transform: translate(-50%);
    }

      // .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: "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";
      //       font-weight: 600;
      //       position: relative;
      //       top: 2px;
      //     }
      //   }
      //   .desc {
      //     font-size: 14px;
      //     color: rgba(0, 0, 0, 0.45);
      //     margin-top: 12px;
      //     margin-bottom: 40px;
      //   }
      // }

      a {
        text-decoration: none;
      }
      .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(0, 0, 0, 0.45);
      //     font-size: 14px;
      //   }
      // }
    }
  }
</style>