当前位置: 首页 > news >正文

vue前端可视化大屏页面适配方案

参考了其他博主的代码,但发现会有滚动条,并且居中的位置不太对,所以改了一下css,修复了这些问题,直接上代码

<template>
<div class="ScaleBoxA"><divclass="ScaleBox"ref="ScaleBox":style="{width: width + 'px',height: height + 'px',}"><!--  内容  --></div>
</div>
</template>
<script>
export default {name: 'index',data() {return {scale: 0,width: 1920,height: 1080,}}, methods: {getScale() {const { width, height } = thisconst wh = window.innerHeight / heightconst ww = window.innerWidth / widthreturn ww < wh ? ww : wh},setScale() {this.scale = this.getScale()if (this.$refs.ScaleBox) {this.$refs.ScaleBox.style.setProperty('--scale', this.scale)}},debounce(fn, delay) {const delays = delay || 500let timerreturn function () {const th = thisconst args = argumentsif (timer) {clearTimeout(timer)}timer = setTimeout(function () {timer = nullfn.apply(th, args)}, delays)}},},mounted() {this.setScale()window.addEventListener('resize', this.debounce(this.setScale))},
}
<style lang="scss" scoped>
#ScaleBox {--scale: 1;
}
.ScaleBoxA {top: 0;width: 100vw;height: 100vh;position: fixed;display: flex;align-items: center;justify-content: center;
}
.ScaleBox {transform: scale(var(--scale));display: flex;flex-direction: column;transform-origin: 960px 540px;transition: 0.3s;z-index: 999;
}
</style>

相关文章:

vue前端可视化大屏页面适配方案

参考了其他博主的代码&#xff0c;但发现会有滚动条&#xff0c;并且居中的位置不太对&#xff0c;所以改了一下css&#xff0c;修复了这些问题&#xff0c;直接上代码 <template> <div class"ScaleBoxA"><divclass"ScaleBox"ref"Sca…...

Docker中安装MySql方法

使用Docker安装MySQL的详细步骤,涵盖单机部署、数据持久化、网络配置等内容: 1. 安装Docker 如果尚未安装Docker,请先安装: Windows/macOS:下载 Docker Desktop 并安装。 Linux: curl -fsSL https://get.docker.com | bash sudo systemctl start docker sudo system…...

云轴科技ZStack+神州鲲泰,全面支持企业私有化部署DeepSeek模型

如今&#xff0c;DeepSeek的影响力正呈指数级扩散。全球范围内&#xff0c;从科技巨头到初创企业&#xff0c;纷纷投身于DeepSeek系列模型的接入浪潮。为应对企业数据安全与算力高效管理的双重挑战&#xff0c;云轴科技ZStack联合神州鲲泰&#xff0c;基于昇腾算力底座共推ZSta…...

$ npx electron-forge import 一直报权限问题 resource busy or locked,

jackLAPTOP-7DHDAAL0 MINGW64 /e/project/celetron-project/my-electron-app (master) $ npx electron-forge import > Checking your system > Checking git exists > Checking node version > Checking packageManager version √ Found node22.14.0 √ Found gi…...

LLM:GPT 系列

阅读原文&#xff1a; LLM&#xff1a;Qwen 系列 GPT&#xff08;Generative Pre-trained Transformer&#xff09;是生成式预训练语言模型&#xff0c;基于 Transformer 架构&#xff0c;专注于通过自回归的方式生成自然语言文本&#xff0c;即给定一个输入序列 x { x 1 , …...

2025年:边缘计算崛起下运维应对新架构挑战

一、引言 随着科技的飞速发展&#xff0c;2025年边缘计算正以前所未有的速度崛起&#xff0c;给运维行业带来了全新的架构挑战。在这个充满机遇与挑战的时代&#xff0c;美信时代公司的美信监控易运维管理软件成为运维领域应对这些挑战的有力武器。 二、边缘计算崛起带来的运维…...

【深度学习模型分类】

深度学习模型种类繁多&#xff0c;涵盖了从基础到前沿的多种架构。以下是主要模型的分类及代表性方法&#xff1a; 1. 基础模型 1.1 多层感知机&#xff08;MLP&#xff09; 特点&#xff1a;全连接神经网络&#xff0c;适用于结构化数据。 应用&#xff1a;分类、回归任务…...

【Java报错已解决】org.springframework.beans.factory.BeanCreationException

???很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。??? 欢迎订阅本专栏 目录…...

理解 WebGPU 中的 GPUQueue:GPU 的命令队列

在现代图形编程中&#xff0c;与 GPU 的交互变得越来越高效和灵活&#xff0c;而 WebGPU API 的出现更是为 Web 开发者带来了强大的图形处理能力。其中&#xff0c; GPUQueue 作为 WebGPU 的核心接口之一&#xff0c;扮演着至关重要的角色。本文将详细介绍 GPUQueue 的概…...

电脑显示器无信号是什么原因?查看解决方法

在我们使用电脑的过程中&#xff0c;常遇到的一个问题就是&#xff0c;开机电脑显示器无信号输入。这种故障情况它会导致电脑无法正常显示图像&#xff0c;影响电脑的使用。但是电脑显示器无信号的原因可能有很多&#xff0c;我们需要一一去排除解决。下面便为大家一起来介绍下…...

Debian系发行版通用软件彻底卸载指南

1. 确定软件包名称 # 查看已安装软件列表 dpkg -l | grep 关键词 或 apt list --installed | grep 关键词# 查找二进制文件路径&#xff08;用于推测包名&#xff09; which 程序名 # 查找可执行文件路径 whereis 程序名 # 查找相关文件2. 服务检查和停止 # 检查是否有相关…...

微信小程序地图标记点,安卓手机一次性渲染不出来的问题

问题描述&#xff1a; 如果微信小程序端&#xff0c;渲染的标记物太多&#xff0c;安卓手机存在标记物不显示的问题&#xff0c;原因初步判断是地图还没有渲染完&#xff0c;标记物数据已经加载完了&#xff0c;导致没有在地图上显示。 解决办法&#xff1a; 使用map组件的b…...

LabVIEW软件需求开发文档参考

在项目开发的工作历程中&#xff0c;精准把握项目需求无疑是成功打造整个项目的首要关键步骤&#xff0c;同时也是一个至关重要且不可忽视的核心环节。明确且详尽的项目需求就如同建筑的基石&#xff0c;为后续的设计、开发、测试等一系列工作提供了坚实的支撑和清晰的指引。倘…...

MYSQL批量UPDATE的两种方式

工作中遇到批量更新的场景其实是比较常见的。 但是该如何正确的进行批量UPDATE&#xff0c;很多时候往往有点头大。 这里列2种可用的方式&#xff0c;供选择(请选择方式一&#xff0c;手动狗头。)。 如果使用了MyBatis增强组件MyBatisPlus 如果使用了MyBatisPlus&#xff0c;…...

【Viper】配置格式与支持的数据源与go案例

Viper 是一个用于 Go 应用程序的配置管理库&#xff0c;支持多种配置格式和数据源。 安装依赖 go get github.com/spf13/viper go get github.com/spf13/viper/remote go get go.etcd.io/etcd/client/v3"github.com/spf13/viper/remote"要写在etcd客户端import里 1…...

C++17 中的 std::reduce:详细教程

文章目录 1. 简介2. 函数签名3. 使用场景3.1 简单的累加操作3.2 自定义归并操作3.3 并行计算的性能优势 4. 注意事项4.1 归并操作的结合律和交换律4.2 默认值的使用 5. 总结 1. 简介 std::reduce 是 C17 标准库中引入的一个算法&#xff0c;用于对范围内的元素进行归并操作。它…...

解决 paddle ocr 遇到 CXXABI_1.3.13 not found 的问题

ImportError: /lib/x86_64-linux-gnu/libstdc.so.6: version CXXABI_1.3.13 not found (required by /home/hum/anaconda3/envs/ipc/lib/python3.11/site-packages/paddle/base/libpaddle.so) 通过命令检查 strings /lib/x86_64-linux-gnu/libstdc.so.6|grep CXXABI 而实际上我…...

探索 Text-to-SQL 技术:从自然语言到数据库查询的桥梁

亲爱的小伙伴们&#x1f618;&#xff0c;在求知的漫漫旅途中&#xff0c;若你对深度学习的奥秘、Java 与 Python 的奇妙世界&#xff0c;亦或是读研论文的撰写攻略有所探寻&#x1f9d0;&#xff0c;那不妨给我一个小小的关注吧&#x1f970;。我会精心筹备&#xff0c;在未来…...

mac搭建环境

从0-1搭建mac环境 先查看自己的芯片信息 bash uname -mbash-3.2$ uname -m arm64这里是自己的型号安装brew xcode-select --install xcode-select -p /bin/zsh -c “$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)” source /Users/lanren/.…...

算法学习笔记之贪心算法

导引&#xff08;硕鼠的交易&#xff09; 硕鼠准备了M磅猫粮与看守仓库的猫交易奶酪。 仓库有N个房间&#xff0c;第i个房间有 J[i] 磅奶酪并需要 F[i] 磅猫粮交换&#xff0c;硕鼠可以按比例来交换&#xff0c;不必交换所有的奶酪 计算硕鼠最多能得到多少磅奶酪。 输入M和…...

零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

Appium+python自动化(十六)- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

基于ASP.NET+ SQL Server实现(Web)医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上&#xff0c;开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识&#xff0c;在 vs 2017 平台上&#xff0c;进行 ASP.NET 应用程序和简易网站的开发&#xff1b;初步熟悉开发一…...

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

DBAPI如何优雅的获取单条数据

API如何优雅的获取单条数据 案例一 对于查询类API&#xff0c;查询的是单条数据&#xff0c;比如根据主键ID查询用户信息&#xff0c;sql如下&#xff1a; select id, name, age from user where id #{id}API默认返回的数据格式是多条的&#xff0c;如下&#xff1a; {&qu…...

.Net Framework 4/C# 关键字(非常用,持续更新...)

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...

力扣-35.搜索插入位置

题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

在Ubuntu24上采用Wine打开SourceInsight

1. 安装wine sudo apt install wine 2. 安装32位库支持,SourceInsight是32位程序 sudo dpkg --add-architecture i386 sudo apt update sudo apt install wine32:i386 3. 验证安装 wine --version 4. 安装必要的字体和库(解决显示问题) sudo apt install fonts-wqy…...

AGain DB和倍数增益的关系

我在设置一款索尼CMOS芯片时&#xff0c;Again增益0db变化为6DB&#xff0c;画面的变化只有2倍DN的增益&#xff0c;比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析&#xff1a; 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...