<template> <div ref="appRef" class="app-viewport" id="appRef"> </div> </template> <script> let loading = null; // import drawMixin from '../libs/drawMixin'; import headBar from './components/headBar.vue'; import { mapGetters } from 'vuex'; import autofit from 'autofit.js' export default { name: 'Layout', components: { headBar, }, // mixins: [drawMixin], data() { return { isIndex: true, screenRatioByDesign: 1920 / 1080, currentPath: '/home', menuIndex: 0, }; }, computed: { ...mapGetters(['moduleTypeControl']), }, watch: { currentPath: { handler() { this.changeMenu(); }, }, }, beforeCreate() { loading = this.$loading({ lock: true, text: 'Loading', spinner: 'el-icon-loading', background: 'rgba(0, 0, 0, 0.7)', }); }, mounted() { // this.setHtmlFontSize(); // window.addEventListener('resize', this.setHtmlFontSize.bind(this)); autofit.init({ dh: 1080, dw: 1920, el: "#appRef", resize: true, }); }, created() { loading.close(); }, methods: { setHtmlFontSize() { const html = document.getElementsByTagName('html')[0]; const width = document.body.clientWidth; const height = document.body.clientHeight; const screenRatio = width / height; var fontSize = ((screenRatio > this.screenRatioByDesign ? this.screenRatioByDesign / screenRatio : 1) * width) / 10; /* const scale = height / 1080 var fontSize = (192 * Math.min(scale, 1)) */ html.style.setProperty('font-size', `${fontSize}px`); }, }, }; </script> <style lang="scss" scoped> .app-viewport { //width: 1920px; //height: 100%; //position: absolute; //top: 50%; //left: 50%; //transform: translate(-50%, -50%); //transform-origin: left top; //overflow: hidden; //background: #010816; //transition: all 0.3s linear; //=======用于px转rem 用 pxtorem 插件 配合 setHtmlFontSize 方法
//position: absolute;
//margin: auto; //top: 0; //bottom: 0; //left: 0; //right: 0; //width: 100%; //height: 100%; //background: url(../assets/imgs/big_background.png) no-repeat center center; //background-size: 100% 100%; //transition: all 0.3s linear; //============20240117 用 drawMixin 样式引用
//width: 1920px; //height: 1080px; //position: absolute; //top: 50%; //left: 50%; //transform: translate(-50%, -50%); //transform-origin: left top; //overflow: hidden; //background: url(../assets/imgs/big_background.png) no-repeat center center; //background-size: 100% 100%; //transition: all 0.3s linear; //=========== 用 插件 autofit 一行搞定
background: url(../assets/imgs/big_background.png) no-repeat center center; background-size: 100% 100%; transition: all 0.3s linear; .main-box { width: 100%; height: 100%; color: #fff; padding: 17px 24px; } .menu-box { position: absolute; bottom: 16px; left: 50%; display: flex; width: 1156px; height: 88px; margin-left: -578px; background: url(../assets/imgs/bottom_frame.png) no-repeat center center; background-size: 100% 100%; display: flex; justify-content: center; align-items: center; .menu-box-sub { width: 134px; height: 60px; background: url('../assets/imgs/button_no.png') no-repeat center center; background-size: 100% 100%; margin: 0 5px; display: flex; align-items: center; justify-content: center; font-size: 18px; font-family: PingFang SC; font-weight: 400; color: #9bb9e0; line-height: 23px; text-shadow: 0px 0px 8px #06293e; cursor: pointer; &.active { color: #ffffff; line-height: 25px; background: linear-gradient(180deg, #ffffff 0%, #4bd8ff 100%); -webkit-background-clip: text; background: url('../assets/imgs/button_had.png') no-repeat center center; background-size: 100% 100%; } } } } </style>
// 屏幕适配 mixin 函数 // * 默认缩放值 const scale = { width: '1', height: '1', } // * 设计稿尺寸(px) const baseWidth = 1920 const baseHeight = 1080 // * 需保持的比例(默认1.77778) const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5)) export default { data() { return { // * 定时函数 drawTiming: null } }, mounted () { this.calcRate() window.addEventListener('resize', this.resize) }, beforeDestroy () { window.removeEventListener('resize', this.resize) }, methods: { calcRate () { let _this = this const appRef = this.$refs["appRef"] //console.log(appRef) if (!appRef) return // 当前宽高比 const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5)) if (appRef) { if (currentRate > baseProportion) { // 表示更宽 scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5) scale.height = (window.innerHeight / baseHeight).toFixed(5) appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)` } else { // 表示更高 scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5) scale.width = (window.innerWidth / baseWidth).toFixed(5) appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)` } } // _this.$store.dispatch('app/set_scale', scale.width) }, resize () { clearTimeout(this.drawTiming) this.drawTiming = setTimeout(() => { this.calcRate() }, 200) } }, }
postcss: { plugins: [ pxtorem({ rootValue: 192, propList: ['*'] }) ] },
标签:方案,scale,center,适配,100%,height,width,background,大屏 From: https://www.cnblogs.com/Byme/p/17970677