<template> <div id="app"> <div _tmplitem="56" class="dv-full-screen-container" :style="css"> <div _tmplitem="56" style="position: absolute;width:1920px;height:1080px; background-size: contain;" class="div-full-screen"> <router-view/> <theme-picker/> </div> </div> </div> </template> <script> import ThemePicker from "@/components/ThemePicker"; export default { name: "App", data() { return { css: '', } }, components: {ThemePicker}, metaInfo() { return { title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title, titleTemplate: title => { return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE } } } , methods: { created_sys() { let $this = this; this.w = this.w === undefined ? 1920 : this.w; this.h = this.h === undefined ? 1080 : this.h; // 设置默认高度为 1080,可以根据实际情况修改 $this.css = `width: ${$this.w}px; height: ${$this.h}px; ${$this.bg === "" ? "" : "background-image:url(" + $this.bg + "); background-size: contain;"} transform: scale(${document.body.clientWidth / $this.w}, ${document.body.clientHeight / $this.h}); ${$this.bgColor === "" ? "" : "background-color:" + $this.bgColor + "; left:calc( 50% - " + $this.w / 2 + "px);"}` window.addEventListener("resize", () => { $this.css = `width: ${$this.w}px; height: ${$this.h}px; ${$this.bg === "" ? "" : "background-image:url(" + $this.bg + "); background-size: contain;"} transform: scale(${document.body.clientWidth / $this.w}, ${document.body.clientHeight / $this.h}); ${$this.bgColor === "" ? "" : "background-color:" + $this.bgColor + ";"}` }); $this.css = `transform: scale(${document.body.clientWidth / $this.w}, ${document.body.clientHeight / $this.h})`; }, }, created() { this.created_sys(); } }; </script> <style scoped> .dv-full-screen-container { transform: scale(1); position: absolute; top: 0px; left: 0px; overflow: hidden; transform-origin: left top; z-index: 499; font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; width: 1920px; height: 1080px; background-size: cover; background-repeat: no-repeat; } #app .theme-picker { display: none; } </style>
10-27
374
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
09-07
268
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)