当前位置: 首页 > 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和…...

蓝牙 BLE 扫描面试题大全(2):进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2(Navigation2)的行为树框架中,行为树节点插件按照功能分为 Action(动作节点)、Condition(条件节点)、Control(控制节点) 和 Decorator(装饰节点) 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务,直接与硬件、传感器或外部系统…...

第一篇:Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

智能仓储的未来:自动化、AI与数据分析如何重塑物流中心

当仓库学会“思考”&#xff0c;物流的终极形态正在诞生 想象这样的场景&#xff1a; 凌晨3点&#xff0c;某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径&#xff1b;AI视觉系统在0.1秒内扫描包裹信息&#xff1b;数字孪生平台正模拟次日峰值流量压力…...

高防服务器能够抵御哪些网络攻击呢?

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

Mac下Android Studio扫描根目录卡死问题记录

环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中&#xff0c;提示一个依赖外部头文件的cpp源文件需要同步&#xff0c;点…...

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件&#xff0c;所以得把软件用docker打包起来&#xff0c;大部分功能都没问题&#xff0c;出了一个奇怪的事情。同样的代码&#xff0c;在本机上用vscode可以运行起来&#xff0c;但是打包之后在docker里出现了问题。使用的是dialog组件&#xff0c;…...

Hive 存储格式深度解析:从 TextFile 到 ORC,如何选对数据存储方案?

在大数据处理领域&#xff0c;Hive 作为 Hadoop 生态中重要的数据仓库工具&#xff0c;其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式&#xff0c;很多开发者常常陷入选择困境。本文将从底…...

Linux 内存管理实战精讲:核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...