Vue 大画面データ表示例

 <スクリプト>
        //ページの拡大縮小 public function resizePage() {
          // ウィンドウの高さを取得します var clientW = window.innerWidth
          var clientH = window.innerHeight
          // 初期ウィンドウ対ボディ比 var bi = clientW / 1920
          // 本文の幅と高さを設定します - 実際の状況に応じて調整できます document.getElementsByTagName('body')[0].style.width = "1920px"
          document.getElementsByTagName('body')[0].style.height = "1080px"
          document.getElementsByTagName('body')[0].style.transform = 'scale(' + bi + ',' + bi + ')'
          document.getElementsByTagName('body')[0].style.transformOrigin = '左上 0'
          
        }
        ページサイズを変更する()
        // ページのサイズを変更します。
        window.onresize = 関数 () {
          タイムアウトを設定します(()=>{
          ページのサイズを変更します。

          },200)  
        }        
    </スクリプト>

<テンプレート>
  <div id="dv-full-screen-container">
    <テンプレート>
      <スロット></スロット>
    </テンプレート>
  </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  
  マウントされた(){
  }
}
</スクリプト>

<スタイル lang="less">
#dvフルスクリーンコンテナ{
  位置: 固定;
  上: 0px;
  左: 0px;
  オーバーフロー: 非表示;
  変換の原点: 左上;
  zインデックス: 999;
  幅:100%;
  高さ:1080pxee
}
</スタイル>

<テンプレート>
  <div class="full">
    <dv-フルスクリーンコンテナref="full">
       コンテンツ
    </dv-フルスクリーンコンテナ>
  </div>
</テンプレート>
<スクリプト>
 
'./fullscreen' から fullScreenContainer をインポートします。
エクスポートデフォルト{
  コンポーネント:{
    'dv-フルスクリーンコンテナ':fullScreenContainer
  },
  マウントされた(){
   
  },
  作成された(){
  },
  方法:{
    
  }
}
</スクリプト>
<スタイル lang="less">
。満杯 {
  #dvフルスクリーンコンテナ{
    背景:#000222 url(../assets/images/bg.png);
    背景サイズ: 100% 100%;
    オーバーフロー:自動;
    
    .full-big-border {
      。コンテンツ {
        パディング: 0 38px 0 38px;
        幅: calc(100% - 76px);
        ディスプレイ: フレックス;
      }
    }
  }
  
}
</スタイル>