css-Ant-Menu 导航菜单更改为左侧列表行选中

1.Ant-Menu导航菜单

        导航菜单是一个网站的灵魂,用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航,顶部导航提供全局性的类目和功能,侧边导航提供多级结构来收纳和排列网站架构。

2.具体代码

html

 <!-- 左侧切换 --><div class="fileLeft"><div class="content_left_name">类型</div><a-menu style="width: 100%" mode="vertical"><a-menu-item v-for="(item, index) in componentList" :key="index"><div class="content_left_select"  @click="handleClick(item.id)"><IconComponent :statues="item.statues" style="width:35px"></IconComponent><div class="content_left_title">{{item.name}}</div></div></a-menu-item></a-menu></div>

css

// 左侧结构
.fileLeft {width: 20%;height: 100%;float: left;background-color: #ffffff;border-radius: 8px;
}
// 左侧name
.content_left_name{height:40px;width: 100%;padding-left: 2%;line-height:40px;text-align:left;background-color: #fafafa;font-weight: 600;font-size: 15px;border-bottom: 1px solid #e8e8e8;
}
// icon与文本
.content_left_select{display:flex;flex-direction:row;
}
//文本
.content_left_title{height:40px;width:60px
}

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

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

相关文章

15、matlab绘图汇总(图例、标题、坐标轴、线条格式、颜色和散点格式设置)

1、plot()函数默认格式画图 代码: x=0:0.1:20;%绘图默认格式 y=sin(x); plot(x,y) 2、X轴和Y轴显示范围/axis()函数 代码: x=0:0.1:20;%绘图默认格式 y=sin(x); plot(x,y) axis([0 21 -1.1 1.1])%设置范围 3、网格显示/grid on函数 代码: x=0:0.1:20;%绘图默认格式 …

CXL (1)

为什么有CXL CXL说到底 是为了打破内存墙而生的 CXL全称是Compute Express Link&#xff0c; 可以用来连接CPU&#xff0c;以及其他任何计算单元&#xff0c;比如GPU。 CXL和PCIe跑在一样的physical layer上&#xff0c;与PCIe不一样的是&#xff0c;CXL允许CPU和连接的设备共…

(文章复现)基于主从博弈的售电商多元零售套餐设计与多级市场购电策略

参考文献&#xff1a; [1]潘虹锦,高红均,杨艳红,等.基于主从博弈的售电商多元零售套餐设计与多级市场购电策略[J].中国电机工程学报,2022,42(13):4785-4800. 1.摘要 随着电力市场改革的发展&#xff0c;如何制定吸引用户选择的多类型零售套餐成为提升售电商利润的研究重点。为…

wms中对屏幕进行修改wm size设置屏幕宽高原理剖析

背景&#xff1a; 上面是正常屏幕1440x2960的屏幕大小&#xff0c;如果对display进行相关的修改&#xff0c;可以使用如下命令&#xff1a; adb shell wm size 1080x1920 得出如下的画面 明显看到差异就是屏幕上下有黑边了&#xff0c;那么下面就来调研这个wm size是怎么做的…

水库大坝安全监测系统建设方案

一、背景 随着自动化技术的进步&#xff0c;大部分水库大坝不同程度地实现了安全监测自动化。但仍存在以下问题&#xff1a; 1、重建轻管&#xff0c;重视安全监测系统建设&#xff0c;不够重视运行维护。 2、缺乏系统性、综合性及相关性的资料分析功能。 3、软件大多为数据…

harbor 只读模式修改

The system is in read only mode. Any modification is prohibited。 使用harbor时&#xff0c;做了一个定时清理任务&#xff0c;可能是因为任务失败或者某种原因导致的&#xff0c;系统一直处于只读模式&#xff0c;以为是要看一些表结构&#xff0c;然后去修改参数&#xf…

2.2数据的表示和运算--原码、反码、补码、移码

2.数据的表示和运算 2.2原码、反码、补码、移码 &#x1f53a;问题&#xff1a;真值与对应的原码、反码、补码变换规则&#xff1f; 答&#xff1a; 正数&#xff1a;原码、反码、补码都一样。 负数&#xff1a;原码不变、反码除符号位其它各位取反、补码在反码基础上再加…

结合视差补偿与3D数据处理的盲光场图像质量评价

摘要&#xff1a;与传统的2D图像相比&#xff0c;光场图像记录了场景中光线的强度和方向信息&#xff0c;在多媒体技术应用领域中占据着重要的地位。但在光场图像的产生、传输等处理过程中会不可避免地引入失真&#xff0c;影响用户视觉体验&#xff0c;因而需构建有效、准确的…

从 0 到 1 带你认识 Git 在个人和企业开发中的原理及应用

文章目录 学习目标Git 初识提出问题如何解决&#xff1f;—— 版本控制器注意事项 Git 安装Linux CentOSLinux UbuntuWindows Git 基本操作创建 Git 本地仓库配置 Git 认识工作区、暂存区、版本库添加文件——场景一查看 .git 文件 添加文件——场景二 修改文件版本回退 学习目…

浏览器渲染优--防抖节流懒加载

合理选择css选择器 相比于.content-title-span&#xff0c;使用.content .title span时&#xff0c;浏览器计算样式所要花费的时间更多。使用后面一种规则&#xff0c;浏览器必须遍历页面上所有 span 元素&#xff0c;先过滤掉祖先元素不是.title的&#xff0c;再过滤掉.title…

SpringBoot接口防抖(防重复提交)

TOC 啥是防抖 所谓防抖&#xff0c;一是防用户手抖&#xff0c;二是防网络抖动。在Web系统中&#xff0c;表单提交是一个非常常见的功能&#xff0c;如果不加控制&#xff0c;容易因为用户的误操作或网络延迟导致同一请求被发送多次&#xff0c;进而生成重复的数据记录。要针对…

学习小心意——python的构造方法和析构方法

构造方法和析构方法分别用于初始化对象的属性和释放类占有的资源 构造方法_init_() 语法格式如下&#xff1a; class 类名:def __init__(self, 参数1, 参数2, ...):# 初始化代码self.属性1 参数1self.属性2 参数2# ... 示例代码如下 class Student:def __init__(self):s…

如何利用CXL技术突破内存墙?-2

为了解决这些问题&#xff0c;业界正积极寻求新的技术和标准&#xff0c;比如Compute Express Link (CXL)&#xff0c;它旨在通过提供标准化的高速互连来提高内存带宽、降低延迟&#xff0c;并简化内存扩展的软件集成&#xff0c;从而有效地打破内存墙的限制。 通过使用CXL&am…

uniapp3步使用goeasy完成本地消息推送

1.注册登录goeasy&#xff0c;下载测试demo 2.替换demo中main.js中的key 3.打包一个H5&#xff0c;一个自定义基座。 h5发消息&#xff0c;app收消息&#xff0c;然后创建消息通知就好了。记得打开app的消息通知 demo很简单&#xff0c;demo都跑通了&#xff0c;在搬到自己项目…

NAVICAT从MYSQL链接到ORCAL数据库

1、工具-选线 2、环境&#xff0c;将原有的mysql的oci.dll文件改为oracle的 3、新建连接 填写对应数据

axios拦截器

定义 在客户端通过axios发送请求或响应被 then 或 catch 处理前拦截它们。顾名思义&#xff0c;在axios发送请求之前在请求数据内添加条件或者验证&#xff0c;并通过函数返回错误。在收到服务器的响应数据进行返回&#xff0c;遇到无法响应的情况在catch之前拦截错误信息进行…

迈普 多业务融合网关 send_order.cgi 前台RCE漏洞复现

0x01 产品简介 迈普多业务融合网关是迈普通信技术股份有限公司自主研发的多业务无线融合网关&#xff0c;拥有融合网关功能、精准流控、上网行为管理、智能选路…等强大功能&#xff0c;并支持对接迈普云平台&#xff0c;实现远程运维和集中管理&#xff0c;很好的满足了医疗/…

python API自动化(Jsonpath断言、接口关联及加密处理)

JsonPath应用及断言 重要 自动化要解决的核心问题 &#xff1a;进行自动测试-自动校验&#xff08;进行结果的校验 主要能够通过这个方式提取数据业务场景&#xff1a;断言 、接口关联 {key:value}网址&#xff1a;附&#xff1a;在线解析 JSONPath解析器 - 一个工具箱 - 好用…

2024年【N2观光车和观光列车司机】考试报名及N2观光车和观光列车司机最新解析

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 N2观光车和观光列车司机考试报名考前必练&#xff01;安全生产模拟考试一点通每个月更新N2观光车和观光列车司机最新解析题目及答案&#xff01;多做几遍&#xff0c;其实通过N2观光车和观光列车司机很简单。 1、【多…