首页 > 其他分享 >大屏适配方案

大屏适配方案

时间:2024-01-17 18:12:16浏览次数:24  
标签:方案 scale center 适配 100% height width background 大屏

<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

相关文章

  • JeecgBoot与东方通TongWeb的高效部署方案
    在当前的国际形势下,信创产业已成为推动中国经济发展的重要力量,也是保障国家信息安全的重要支撑。随着技术的不断发展和应用的不断深入,信创产业将迎来更加广阔的发展前景。为此,JeecgBoot也完成了与东方通TongWeb的国产化适配。前后台项目均部署到TongWeb。后台采用war包的打包......
  • 全视通养老系统 -17年专注智慧养老守护产品-机构智慧养老解决方案
       随着人口老龄化的加剧,养老问题已经成为社会关注的焦点。传统的养老方式已经无法满足现代老年人的需求,而智慧养老作为一种新型的养老模式,正逐渐受到广泛的关注和应用。智慧养老是指利用先进的信息技术,为老年人提供更加智能化、便捷化的养老服务,从而提高老年人的生活质量。 ......
  • 微型充气泵方案芯片应用解决方案
    微型充气泵方案最开始是机械式的开发,后来慢慢地演变成由一个气缸、压力传感器和主控芯片的开发的PCBA方案,它具备小体积、智能数显、预设胎压、动态测量、精准压力检测以及过充过放等功能。其方案设计原理是利用主控芯片和压力传感器的组合设计,可以感测到轮胎里面的气压,并且利用大气......
  • 适配器模式
    定义:将一个类的接口转换成客户期望的另一个接口,使原本接口不兼容的类可以一起工作类型:结构型适用场景:已经存在的类,它的方法和需求不匹配时(方法结果相同或相似)不是软件设计阶段考虑的设计模式,是随着软件维护,由于不同产品、不同厂家造成功能类似而接口不相同情况下的......
  • 微型充气泵方案芯片应用解决方案
    微型充气泵方案最开始是机械式的开发,后来慢慢地演变成由一个气缸、压力传感器和主控芯片的开发的PCBA方案,它具备小体积、智能数显、预设胎压、动态测量、精准压力检测以及过充过放等功能。其方案设计原理是利用主控芯片和压力传感器的组合设计,可以感测到轮胎里面的气压,并......
  • 变电站电力设备数据采集联网对接API转发存储数据库服务器技术方案
    DL_FileData_CJDC文件上海致达智能科技windows/linux/arm解析本地txt和xls文件DL_ABB_API_OLE 网络 ABBDCS windows ABBDCSOLE采集,本地采集DL_KRS_TCP 网络 台山核电 windows/linux/arm 台山核电KRS系统数据采集DL_Xinhua_ASDPU_UDP 网络 新华ASDPU协议 windows/linux/arm ......
  • 这个错误可能是由于 `PyInstaller` 在打包过程中没有正确地包含 `imp` 模块。以下是一
    `PyInstaller`默认使用运行它的Python解释器来打包您的脚本¹。如果您想要指定一个不同的Python解释器,您可以使用完整路径来运行`PyInstaller`³。例如,如果您想要使用位于`/path/to/python3`的Python3解释器,您可以使用以下命令:```bash/path/to/python3-mPyInstaller......
  • 用数据说话:山海鲸可视化大屏助力金融决策
    在当今数字化的时代,数据已经成为金融机构的核心资产和决策依据。然而,如何有效地管理和分析这些数据,成为了金融机构面临的挑战。这时,一款强大的数据可视化工具显得尤为重要,山海鲸可视化正是这样一款助力金融机构轻松应对挑战的利器。 山海鲸可视化搭建的金融机构数据管理大屏采......
  • 模拟适配器设计方案:360-基于10G以太网的模拟适配器
     基于10G以太网的模拟适配器一、产品概述   基于10G以太网的模拟适配器是一款分布式高速数据采集系统,实现多路AD的数据采集,并通过10G以太网光纤远距离传输到存储计算服务器,计算控制指令能通过光纤返回给数据卡进行IO信号控制。产品基于10G太网络,可迅......
  • zabbix异常处理解决方案
                                    zabbix异常处理解决方案1、zabbix批量添加一百多台交换机导致,可以登录zabbix但是所有的监控值都无数据解决方案:       1》.查看zabbix-server.log   2......