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

vue适配各个屏幕

1:不是响应式,只是用缩放来适配各个pc

2:使用中会出现由于 transform  属性导致的定位问题,具体的需要针对性的处理

App.vue

<div id="app" ><div class="app-view" :style="{'--scale':scale}"><div class="position-relative w-100"><router-view /><theme-picker /></div></div><login-index-view></login-index-view><sing-view></sing-view><wx-login></wx-login>
</div>

3:从上述代码中可以看出,我在App.vue中多添加了几行用来包裹 router-view,那是因为问题2导致的,我需要将页面的定位进行一次重新的指向

缩放的方法

data() {return {scale: window.innerWidth / 1920}},mounted() {window.addEventListener('resize', this.resize)},methods: {resize() {this.scale = window.innerWidth / 1920;}}

css部分 

<style scoped>#app {width: 1920px;}.app-view{transform: scale(var(--scale));transform-origin: left top;}#app .theme-picker {display: none;}
</style>

固定导航栏部分(可不必,整个缩放在上面,如果你不需要做固定导航栏,可在原有的app.vue id="app"这个div上面加缩放,就不需要套那么多层了,如果涉及到全局的弹窗登录就必须做多层,不然就会出现2的问题) 

4:由于顶部导航栏是做了固定在上面的

<template><div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}"><div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/><div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container"><!-- 导航栏 --><div :class="{'fixed-header':fixedHeader}"><navbar/></div><app-main/><my-footer/></div></div>
</template>.fixed-header {position: sticky;//本来是固定定位的,由于上面缩放的问题不得已改动top: 0;right: 0;z-index: 999;width: 100%;// width: calc(100% - #{$base-sidebar-width});transition: width 0.28s;}

一开始是使用固定布局,由于加了缩放的原因导致固定布局失效了

所以将固定布局改为粘性布局即可

如果有其他问题自己可进行修改,有更好的方法可留言评论

相关文章:

vue适配各个屏幕

1:不是响应式&#xff0c;只是用缩放来适配各个pc 2&#xff1a;使用中会出现由于 transform 属性导致的定位问题&#xff0c;具体的需要针对性的处理 App.vue <div id"app" ><div class"app-view" :style"{--scale:scale}"><…...

在conda创建的虚拟环境中安装jupyter以及使用

1. 进入你的虚拟环境 conda activate conda_env_name 2. 安装jupyter notebook conda install -y jupyter 3. 启动jupyter jupyter notebook 4. 将conda环境添加到jupyter的内核中 conda install ipykernel python -m ipykernel install --name conda_env_namepython -m…...

【Java 8的新特性】

引言 Java 8是Java编程语言的一个重要里程碑&#xff0c;它引入了许多令人兴奋的新特性和改进。这些新特性不仅使Java编程更加简洁和高效&#xff0c;还提供了更多的功能和灵活性。在本文中&#xff0c;我们将探讨Java 8的一些重要新特性&#xff0c;并展示它们是如何改变我们…...

Android+Appium自动化测试环境搭建及实操

1、Appium简介1.1 Appium概念1.2 Appium工作原理 2、Appium Server环境搭建2.1 Java JDK2.1.1 下载JDK2.1.2 运行exe安装JDK&#xff0c;设置安装路径2.1.3 设置环境变量2.1.4 验证安装结果 2.2 Android SDK2.2.1 下载安装Android SDK安装包2.2.2 下载platform-tools&#xff0…...

NetSuite ERP系统健康检查

这个题目来自最近的一个项目感受&#xff0c;“上线即停滞”。这是在中小型企业十分普遍的一个情况&#xff0c;一旦上线后&#xff0c;基本上信息化的建设就停止了。这是一个中小企业信息化的一个特点&#xff0c;因为其IT力量比较弱&#xff0c;所以在信息化的推动中缺乏话语…...

常用的数字格式代码

文章目录 数值占位符文本占位符 两类占位符: 数值占位符, 文本占位符. 数值占位符 有三种&#xff1a;0&#xff0c;#&#xff0c;&#xff1f; 0 是强制的占位符。 文本占位符 文本占位符只有一个&#xff1a; : 作用于文本的占位符&#xff0c;可以用英文引号" &quo…...

GitLab使用步骤

GitLab使用步骤 1 注册用户 1 访问&#xff1a;http://10.0.0.203/users/sign_up地址 2 填入注册信息&#xff0c;注册成功&#xff0c;需要管理员审核 3 用root登录&#xff0c;地址&#xff1a;http://10.0.0.203/users/sign_in账号&#xff1a;root密码&#xff1a;xxxx…...

基于MindSpore的llama微调在OpenI平台上运行

基于MindSpore的llama微调在OpenI平台上运行 克隆预训练模型 克隆chatglm-6b代码仓&#xff0c;下载分布式的模型文件 git lfs install git clone https://huggingface.co/openlm-research/open_llama_7b准备环境 安装Transformer pip install transformers执行转换脚本 …...

P34~36第八章相量法

8.1复数 复数可表示平面矢量、也可表示正弦量。特别是: 当复数表示正弦量的时候&#xff0c;此时复数称为相量。 8.2复数运算 复数除法也可看做乘法&#xff0c;乘法的几何意义是旋转&#xff08;辐角相加&#xff09;( e^x e^y e^xy)&#xff0c;同时伸缩&#xff08;模变…...

WAF绕过-漏洞发现之代理池指纹探针 47

工具 工具分为综合性的&#xff0c;有awvs&#xff0c;xray&#xff0c;单点的比如wpscan专门扫描wordpress的。而我们使用工具就可能会触发waf&#xff0c; 触发点 第一个就是扫描速度&#xff0c;太快了&#xff0c;可以通过演示&#xff0c;开代理池&#xff0c;白名单绕…...

模型预测控制(MPC)中考虑约束中的不确定性(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

校招C#面试题整理—Unity客户端

前言 博客已经1年多没有更新了&#xff0c;这一年主要在实习并准备秋招和春招&#xff0c;目前已经上岸Unity客户端岗位&#xff0c;现将去年校招遇到的一些面试题的事后整理分享出来。答案是笔者自己整理的不一定保证准确&#xff0c;欢迎大家在评论区指出。 Unity客户端岗的…...

【数字IC设计】利用Design Compiler评估动态功耗

利用DC对RTL设计的动态功耗进行评估,主要可以分为以下步骤: 用vcs编译运行testbench,生成.saif文件(Switching Activity Interchange Format)在Design Compiler编译前,读入.saif文件Design Compiler编译完设计文件后,输出功耗报告 下面通过一个计数器的设计,来演示该过程…...

Docker Compose命令讲解+文件编写

docker compose的用处是对 Docker 容器集群的快速编排。&#xff08;源码&#xff09; 一个 Dockerfile 可以定义一个单独的应用容器。但我们经常碰到需要多个容器相互配合来完成某项任务的情况&#xff08;如实现一个 Web 项目&#xff0c;需要服务器、数据库、redis等&#…...

Linux bash: ipconfig: command not found解决方法

安装完centos7运行ifconfig命令发现找不到 安装相关工具 yum install net-tools.x86_64 无脑yes即可...

【面试算法——动态规划 21】正则表达式匹配(hard) 交错字符串

10. 正则表达式匹配 链接: 10. 正则表达式匹配 给你一个字符串 s 和一个字符规律 p&#xff0c;请你来实现一个支持 ‘.’ 和 ‘*’ 的正则表达式匹配。 ‘.’ 匹配任意单个字符 ‘*’ 匹配零个或多个前面的那一个元素 所谓匹配&#xff0c;是要涵盖 整个 字符串 s的&#xf…...

基于Python实现的神经网络分类MNIST数据集

神经网络分类MNIST数据集 目录 神经网络分类MNIST数据集 1 一 、问题背景 1 1.1 神经网络简介 1 前馈神经网络模型&#xff1a; 1 1.2 MINST 数据说明 4 1.3 TensorFlow基本概念 5 二 、实现说明 5 2.1 构建神经网络模型 5 为输入输出分配占位符 5 搭建分层的神经网络 6 处理预…...

设计模式之是简单工厂模式

分类 设计模式一般分为三大类&#xff1a;创建型模式、结构型模式、行为型模式。 创建型模式&#xff1a;用于创建对象&#xff0c;共五种&#xff0c;包括单例模式、简单工厂模式、工厂方法模式、抽象工厂模式、建造者模式、原型模式。结构型模式&#xff1a;用于处理类或对…...

Java应用的混淆、加密以及加壳

文章目录 前言问题代码混淆存在的问题Java类文件加密存在的问题虚拟化保护存在的问题AOT编译存在的问题 Java应用的打包混淆器类加载与类加密Bootstrap Class LoaderExtension Class LoaderSystem Class Loader自定义ClassLoaderprotector4j 加壳采用Golang打包Java程序xjar 参…...

【Linux】:Linux中Shell命令及其运行原理/权限的理解

Shell命令以及运行原理 Linux严格意义上说的是一个操作系统&#xff0c;我们称之为“核心&#xff08;kernel&#xff09;“ &#xff0c;但我们一般用户&#xff0c;不能直接使用kernel 而是通过kernel的“外壳”程序&#xff0c;也就是所谓的shell&#xff0c;来与kernel沟通…...

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数&#xff0c;对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销&#xff0c;平衡网络负载&#xff0c;延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

连锁超市冷库节能解决方案:如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

智能在线客服平台:数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

今日学习:Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...

Golang——9、反射和文件操作

反射和文件操作 1、反射1.1、reflect.TypeOf()获取任意值的类型对象1.2、reflect.ValueOf()1.3、结构体反射 2、文件操作2.1、os.Open()打开文件2.2、方式一&#xff1a;使用Read()读取文件2.3、方式二&#xff1a;bufio读取文件2.4、方式三&#xff1a;os.ReadFile读取2.5、写…...

通过MicroSip配置自己的freeswitch服务器进行调试记录

之前用docker安装的freeswitch的&#xff0c;启动是正常的&#xff0c; 但用下面的Microsip连接不上 主要原因有可能一下几个 1、通过下面命令可以看 [rootlocalhost default]# docker exec -it freeswitch fs_cli -x "sofia status profile internal"Name …...

无需布线的革命:电力载波技术赋能楼宇自控系统-亚川科技

无需布线的革命&#xff1a;电力载波技术赋能楼宇自控系统 在楼宇自动化领域&#xff0c;传统控制系统依赖复杂的专用通信线路&#xff0c;不仅施工成本高昂&#xff0c;后期维护和扩展也极为不便。电力载波技术&#xff08;PLC&#xff09;的突破性应用&#xff0c;彻底改变了…...