从零开始手把手Vue3+TypeScript+ElementPlus管理后台项目实战十(整体布局03之界面美化)

删除style.css

删除style.css(和main.ts同级)

并且注释掉main.ts中对style.css的导入。

1717572096528.png

修改App.vue

添加样式设置高度100%

1717572184793.png

安装sass

pnpm install -D sass

修改PageSidebar.vue

1717572379171.png

修改index.vue

修改src/layout/index.vue

1717572450826.png

src/layout/index.vue添加样式

<style lang="scss">
.page-container {display: flex;flex-direction: column;height: 100%;overflow: hidden;> header {height: 54px;background: #000;color: #fff;}> main {display: flex;flex: 1;overflow: auto;> .left {height: 100%;background-color: #000;color: #fff;}> .right {flex: 1;overflow: hidden;background-color: #f5f7f9;> .main-body {padding: 16px 16px 30px;overflow: auto;height: 100%;box-sizing: border-box;}}}
}
</style>

最终效果

1717572536522.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/348476.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

pyinstaller打包exe多种失败原因解决方法

pyinstaller打包exe多种失败原因解决方法 目录 pyinstaller打包exe多种失败原因解决方法1、pyinstaller安装有问题1.1 安装pyinstaller1.2 采用anconda的环境启动 2、pyqt5与pyside6冲突2.1 打包生成.spec文件2.2 编辑spec文件 3、打包成功后打不开exe&#xff0c;exe闪退3.1 s…

用表头设置控制表格内列的排序和显示隐藏

项目背景 : react ant 需求 : 点击表头设置弹窗 , 拖拽可控制外部表格列的排序 , 开关可控制外部表格列的显示和隐藏 实现效果如下 :注意 : 1. 拖拽效果参考了ant-table中的拖拽效果(这块代码放最后) 2. 后台反了json格式(用is_show控制显示和隐藏 , 我给他传…

把Vue文件转至树莓派上遇到的问题和解决方案

把整个文件夹复制进树莓派后&#xff0c;运行 npm run dev ,报错sh: 1: vite: Permission denied 解决方案&#xff1a;删除项目里的 node_modules 重新 npm install 再运行即可 rm -rf node_modules/ npm install 在安装过程中&#xff0c;遇到下图问题&#xff0c;vulnerabi…

一二三应用开发平台应用开发示例(2)——创建应用、模块、实体及配置模型

创建应用 文档管理系统对于开发平台是一个业务应用。 业务应用是通过平台内置的数据字典来维护的&#xff0c;因此访问系统管理模块下的数据字典管理功能&#xff0c;在实体配置分组下找到“应用编码”&#xff0c;点击行记录上的“字典项”。 在打开的新窗口中&#xff0c;在…

CTFHUB-SQL注入-MySQL结构

目录 sqlmap工具夺flag 查看数据库名 查看数据库中表名 查看第一个表中数据 查看第二个表的数据 手动注入 判断是否存在注入 判断字段数量 查询注入点 查询数据库版本 查询数据库名 查看所有数据库 查看表名 查看表中字段 查看表中数据 本题用到sqlmap工具&…

采用ava+B/S架构开发的工业级UWB(Ultra-Wideband)室内定系统源码UWB定位系统技术接口及技术特点

采用avaB/S架构开发的工业级UWB&#xff08;Ultra-Wideband&#xff09;室内定系统源码UWB定位系统技术接口及技术特点 UWB&#xff08;Ultra-Wideband&#xff09;定位技术本身并不直接连接蓝牙或其他无线通信技术进行定位。然而&#xff0c;在实际应用中&#xff0c;UWB定位技…

鸿蒙轻内核A核源码分析系列五 虚实映射(5)虚实映射解除

虚实映射解除函数LOS_ArchMmuUnmap解除进程空间虚拟地址区间与物理地址区间的映射关系&#xff0c;其中参数包含MMU结构体、解除映射的虚拟地址和解除映射的数量count,数量的单位是内存页数。 ⑴处函数OsGetPte1用于获取指定虚拟地址对应的L1页表项数据。⑵处计算需要解除的无效…

使用MATLAB对地铁站、公交站等求解最短路径

使用MATLAB对城市的地铁站、公交站等站点&#xff0c;根据站点的经纬度坐标和彼此之间的权重&#xff0c;求解其最短路径、途径站点和路程 已知的数据如图&#xff0c;是西安市地铁站点的数据&#xff0c;保存在一个Excel里 如图&#xff0c;每列的内容都在上面&#xff0c;不…

Go singlefight 源码详解|图解

写在前面 通俗的来说就是 singleflight 将相同的并发请求合并成一个请求&#xff0c;进而减少对下层服务的压力&#xff0c;通常用于解决缓存击穿的问题。 详解 基础结构 golang.org/x/sync/singleflight singleflight结构体&#xff1a; type call struct {wg sync.WaitGro…

Tabby:一款革新的Mac/Win现代化终端模拟器

在信息技术日新月异的今天&#xff0c;终端操作已成为众多开发者、系统管理员和技术爱好者的日常必备工具。然而&#xff0c;传统的终端模拟器往往功能单一、界面陈旧&#xff0c;无法满足用户对于高效、便捷操作体验的追求。Tabby应运而生&#xff0c;作为一款现代化、功能强大…

基于多传感器数据和周期性采样的滚动轴承故障诊断方法(Python)

代码较为简单&#xff0c;算法结构如下&#xff1a; from scipy.io import loadmat import numpy as np import os from sklearn import preprocessing # 0-1编码 import torch from torch.utils import data as da# 用训练集标准差标准化训练集以及测试集 def scalar_stand(d…

【Android面试八股文】1. 你说一说Handler机制吧 2. 你知道Handler的同步屏障吗? 3. Looper一直在循环,会造成阻塞吗?为什么?

文章目录 一. 你说一说Handler机制吧二、你知道Handler的同步屏障吗&#xff1f;2.1 Handler消息的分类2.2 什么是同步屏障2.3 为什么要设计同步屏障2.4 同步屏障的用法 三、Looper一直在循环&#xff0c;会造成阻塞吗&#xff1f;为什么&#xff1f;扩展阅读 一. 你说一说Hand…

现货黄金交易多少克一手?国内外情况大不同

如果大家想参与国际市场上的现货黄金交易&#xff0c;就应该从它交易细则的入手&#xff0c;先彻底认识这个品种&#xff0c;因为它是来自欧美市场的投资方式&#xff0c;所以无论是从合约的计的单位&#xff0c;计价的货币&#xff0c;交易的具体时间&#xff0c;以及买卖过程…

AI大模型在健康睡眠监测中的深度融合与实践案例

文章目录 1. 应用方案2. 技术实现2.1 数据采集与预处理2.2 构建与训练模型2.3 个性化建议生成 3. 优化策略4. 应用示例&#xff1a;多模态数据融合与实时监测4.1 数据采集4.2 实时监测与反馈 5. 深入分析模型选择和优化5.1 LSTM模型的优势和优化策略5.2 CNN模型的优势和优化策略…

【安装笔记-20240612-Linux-内网穿透服务之cpolar极点云】

安装笔记-系列文章目录 安装笔记-20240612-Linux-内网穿透服务之 cpolar 极点云 文章目录 安装笔记-系列文章目录安装笔记-20240612-Linux-内网穿透服务之 cpolar 极点云 前言一、软件介绍名称&#xff1a;cpolar极点云主页官方介绍 二、安装步骤测试版本&#xff1a;openwrt-…

0601 模拟集成电路中的直流偏置技术

模拟集成电路中的直流偏置技术 6.1.1 BJT 电流源6.1.2 FET电流源6.1.3电流源做作有源负载![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/c5381fff64bd48a1b28ba9bee179b18f.png) 6.1.1 BJT 电流源 6.1.2 FET电流源 6.1.3电流源做作有源负载

tmega128单片机控制的智能小车设计

第1章 绪论1.1 选题背景和意义 自第一台工业机器人诞生以来,机器人的民展已经遍及机械、电子、冶金、交通、宇航、国防等领域。近年来机器人的智能水平不断提高,并且迅速地改变着人们的生活方式。人们在不断探讨、改造、认识自然的过程中,制造能替代人工作的机器一…

2.线性神经网络

目录 1.线性回归一个简化模型线性模型&#xff1a;可以看做是单层神经网络衡量预估质量训练数据参数学习显示解总结 2.基础优化方法小批量随机梯度下降总结 3.Softmax回归&#xff1a;其实是一个分类问题回归VS分类从回归到多类分类---均方损失Softmax和交叉熵损失 4.损失函数L…

阿里云香港服务器怎么样?

大家都知道阿里云是国内最受欢迎的云服务商&#xff0c;那么阿里云香港服务器究竟怎么样呢&#xff1f;和硅云的香港服务器用于做外贸网站等业务相比各有哪些优缺点呢&#xff1f; 阿里云和硅云在香港云服务领域有着广泛的应用和良好的口碑。然而&#xff0c;它们各自的特点和…

借助大语言模型快速学习金仓数据库 KES

基础概念 KES 人大金仓数据库管理系统 KingbaseES&#xff08;KES&#xff09; 是由 北京人大金仓信息技术股份有限公司 (以下简称“人大金仓”)自主研发的面向全行业、全客户关键应用的企业级大型通用数据库管理系统。产品融合了人大金仓在数据库领域几十年的产品研发和企业级…