deviceManageDaPing/src/views/main.vue

<template>
  <div class="layout-main">
    <Scale-box >
		<template v-slot:default="scalebox">
			<div class="app-layout">
			  <app-header></app-header>
			  <router-view :scale='scalebox.scale'/>
			</div>
		</template>
      
    </Scale-box>
  </div>
</template>

<script>
import ScaleBox from './pages/common/ScaleBox'
import AppHeader from '@/components/AppHeader'
export default {
  components:{ ScaleBox, AppHeader },
  data(){
    return{

    }
  },
}
</script>

<style lang="less" scoped>
.layout-main{
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  background-color: #00365A;
  .app-layout {
    padding: 10px 0px 14px;
    height: 100%;
    display: flex;
    flex-direction: column;
	background: url('~@/assets/images/header-bg.png') no-repeat;
	background-size: contain;
	background-position: center center;
    .app-body {
      flex: 1;
    }
  }
}
  
</style>