vue大屏的自适应

最新推荐文章于 2025-03-29 10:30:27 发布

88岁偷懒被抓

最新推荐文章于 2025-03-29 10:30:27 发布

阅读量128

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/newbaby123/article/details/145255598

版权

<template>
  <div class="app" :style="{transform: 'scale('+ scaleX + ','+ scaleY +')'}">
    <div class="app-layout">
      <!--      <app-header></app-header>-->

      <div class="app-content">
        <RouterView/>
      </div>
      <!--      <app-footer></app-footer>-->
    </div>
  </div>
</template>
<script>
import {RouterView} from 'vue-router'
// import AppHeader from '@/layouts/AppHeader/index.vue'
// import AppFooter from '@/layouts/AppFooter/index.vue'

export default {
  components: {
    // AppHeader,
    // AppFooter,
    RouterView
  },
  data() {
    return {
      scaleX: 1,
      scaleY: 1,
    }
  },

  // 监听页面分辨率变化并调用resizeScreen方法

  beforeDestroy() {
    window.removeEventListener('resize', this.resizeScreen)
  },

  mounted() {
    this.resizeScreen()
    window.addEventListener('resize', this.resizeScreen)
  },
  methods: {
    resizeScreen() {
      const screenWidth = document.body.clientWidth
      const screenHeight = document.body.clientHeight
      this.scaleX = screenWidth / 1920
      this.scaleY = screenHeight / 1080
    },
  }
}
</script>


<style lang="scss" scoped>
.app {
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  transform-origin: 0 0;

  .app-layout {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: url("@/assets/images/risk/bg.png") center center no-repeat;
    background-size: 100% 100%;

    //.app-content {
    //  position: absolute;
    //  top: 6px;
    //  bottom: 46px;
    //  left: 0;
    //  width: 100%;
    //}
  }
}
</style>