需要确定父组件高度,防止两个height:100%叠加第二个无效的情况,screen-wrapper类的style不生效,用v-deep修改,宽高用设计稿的宽高需要微调。

<template>
  <div class="app-container">
    <v-scale-screen width="1680" height="1000" :full-screen="false">
    </v-scale-screen>
  </div>
</template>

    "v-scale-screen": "^1.0.0",

import VScaleScreen from 'v-scale-screen'
Vue.use(VScaleScreen)


<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: calc(100vh - 86px);
  background: #fafafa;
  display: flex;
  justify-content: center;
  flex-direction: column;
  ::v-deep .screen-box {
      background: #fafafa;
  }
  ::v-deep .screen-wrapper {
      margin: 0 !important;
      // height: auto !important;
  }
  ::v-deep .screen-box {
    // width: 100%;
    // height: 100%;
  }
}
</style>

https://github.com/zhangqh22/v-scale-screen/blob/v3.0/README.md

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐