侧边栏的打开与收起

侧边栏的打开与收起

在这里插入图片描述
在这里插入图片描述

<template><div class="box"><div class="sideBar" :class="showBox ? '' : 'controller-box-hide'"><div class="showBnt" @click="showBox=!showBox"><i class="el-icon-arrow-right" v-show="showBox"></i><i class="el-icon-arrow-left" v-show="!showBox"></i></div></div></div>
</template><script>
export default {data() {return {showBox: true,}}}
</script><style lang="scss" scoped>
.sideBar {width: 368px;height: 82%;background-color: rgba(7, 20, 35, 0.7);position: fixed;top: 8%;right: 0px;transition: right 0.5s;
}
.showBnt {position: absolute;top: calc(50% - 82px);right: 368px;width: 20px;height: 82px;z-index: 99;background: url("../assets/img/right.png");font-size: 20px;color: #f0f0f0;display: flex;justify-content: center;align-items: center;
}
.controller-box-hide {right: -368px !important;transition: right 0.5s;
}
</style>

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

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

相关文章

天气API强势对接

&#x1f935;‍♂️ 个人主页&#xff1a;香菜的个人主页&#xff0c;加 ischongxin &#xff0c;备注csdn ✍&#x1f3fb;作者简介&#xff1a;csdn 认证博客专家&#xff0c;游戏开发领域优质创作者,华为云享专家&#xff0c;2021年度华为云年度十佳博主 &#x1f40b; 希望…

分布式系统的 38 个知识点

天天说分布式分布式&#xff0c;那么我们是否知道什么是分布式&#xff0c;分布式会遇到什么问题&#xff0c;有哪些理论支撑&#xff0c;有哪些经典的应对方案&#xff0c;业界是如何设计并保证分布式系统的高可用呢&#xff1f; 1. 架构设计 这一节将从一些经典的开源系统架…

sqlite 踩坑

内存数据库 强制SQLite数据库单纯的存在于内存中的常用方法是使用特殊文件名“ &#xff1a;memory&#xff1a; ” db QSqlDatabase::addDatabase("QSQLITE", "MEMORY"); db.setDatabaseName(":memory:"); 调用此接口完成后&#xff0c;不…

P1629邮递员送信

邮递员送信 题目描述 有一个邮递员要送东西&#xff0c;邮局在节点 1 1 1。他总共要送 n − 1 n-1 n−1 样东西&#xff0c;其目的地分别是节点 2 2 2 到节点 n n n。由于这个城市的交通比较繁忙&#xff0c;因此所有的道路都是单行的&#xff0c;共有 m m m 条道路。这…

RISC-V基础指令之addi与lui(生成一个更大的立即数,包含负数符号拓展的特殊情况)

这两条指令都是RISC-V体系结构中的整数指令&#xff0c;它们的功能和格式如下&#xff1a; lui指令的全称是Load Upper Immediate&#xff0c;它的功能是把一个20位的立即数加载到寄存器的高20位&#xff0c;低12位为0。它的格式是&#xff1a; lui rd, imm 其中&#xff0c;rd…

spring boot 集成rocketmq

集成Spring Boot和RocketMQ 在现代的微服务架构中&#xff0c;消息队列已经成为一种常见的异步处理模式&#xff0c;它能解决服务间的同步调用、耦合度高、流量高峰等问题。RocketMQ是阿里巴巴开源的一款消息中间件&#xff0c;性能优秀&#xff0c;功能齐全&#xff0c;被广泛…

静态路由下一跳地址怎么确定(静态路由配置及讲解)

一、用到的所有命令及功能 ①ip route-static 到达网络地址 子网掩码 下一跳 // 配置静态路由下一跳指的是和当前网络直接连接的路由器的接口地址非直连网段必须全部做路由路径是手工指定的&#xff0c;在大规模网络上不能用&#xff0c;效率低&#xff0c;路径是固定的稳定的…

瑞吉外卖实战-笔记

软件开发的流程 角色分工 软件环境 开发环境的搭建 数据库环境 maven环境 1.创建完成后&#xff0c;需要检查一下编码、maven仓库、jdk等 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</a…

Python实现GA遗传算法优化卷积神经网络分类模型(CNN分类算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 遗传算法&#xff08;Genetic Algorithm&#xff0c;GA&#xff09;最早是由美国的 John holland于20世…

TSINGSEE青犀视频安防监控EasyCVR视频汇聚平台电子地图定位偏移的排查与解决

安防监控EasyCVR视频汇聚综合管理平台具有强大的数据接入、处理及分发能力&#xff0c;平台可提供视频监控直播、云端录像、云存储、录像检索与回看、告警上报与查询、平台级联、云台控制、语音对讲、电子地图、轨迹跟踪、H.265自动转码等视频能力。 在视频监控管理平台TSINGSE…

ios微信分享的时候每次都连接,而且有时候成功有时候不成功

第一步:检查是否有被释放的局部变量,如果有局部变量提前释放,那么就会分享不成功 第二步:AppDelegat里打开日志, [WXApi startLogByLevel:WXLogLevelDetail logBlock:^(NSString *log) { NSLog("WeChatSDK: %", log); }]; //向微信注册 务必…

word转pdf两种方式(免费+收费)

一、免费方式 优点&#xff1a;1、免费&#xff1b;2、在众多免费中挑选出的转换效果相对较好&#xff0c;并且不用像openOffice那样安装服务 缺点&#xff1a;1、对字体支持没有很好&#xff0c;需要安装字体库或者使用宋体&#xff08;对宋体支持很好&#xff09;2、对于使…

2023 电赛 E 题 K210 方案--K210实现矩形识别

相关库介绍 sensor&#xff08;摄像头&#xff09; sensor.reset() sensor.set_pixformat(sensor.RGB565) sensor.set_framesize(sensor.QVGA) sensor.skip_frames(10) reset()&#xff1a;重置并初始化单目摄像头 set_pixformat()&#xff1a;设置摄像头输出格式&#xff0c…

中小学分班查询系统如何制作?这个方法值得借鉴

暑假即将结束&#xff0c;新学年即将开始&#xff0c;学校面临着一个重要的任务&#xff0c;那就是学生的分班问题。这个问题涉及到新生入学的分班&#xff0c;以及低年级学生升入高年级时的分班。对于负责分班的老师们来说&#xff0c;这无疑增加了不少工作量和挑战。 在开学…

上榜 Gartner | 中国领先的实时数据管理厂商 DolphinDB

在 Gartner 近日发布的 Hype Cycle for Data, Analytics and AI in China, 2023 报告中&#xff0c;DolphinDB 位列实时数据管理代表厂商。这是自去年 DolphinDB 入选 Gartner《中国数据库管理系统供应商甄选》后&#xff0c;又一次凭借领先的产品能力获得国际权威第三方分析机…

C++ Rule of Three/Five

文章目录 问题特殊的成员函数隐式的定义 资源管理显示定义异常安全不可复制资源 rule of threerule of five参考 问题 拷贝对象意味着什么拷贝构造和赋值拷贝有什么区别如何声明拷贝构造和赋值拷贝如何防止对象被拷贝 class person {std::string name;int age;public:person(…

P2P网络NAT穿透原理(打洞方案)

1.关于NAT NAT技术&#xff08;Network Address Translation&#xff0c;网络地址转换&#xff09;是一种把内部网络&#xff08;简称为内网&#xff09;私有IP地址转换为外部网络&#xff08;简称为外网&#xff09;公共IP地址的技术&#xff0c;它使得一定范围内的多台主机只…

python算法指南程序员经典,python算法教程pdf百度云

大家好&#xff0c;小编来为大家解答以下问题&#xff0c;你也能看懂的python算法书 pdf&#xff0c;python算法教程这本书怎么样&#xff0c;现在让我们一起来看看吧&#xff01; 给大家带来的一篇关于算法相关的电子书资源&#xff0c;介绍了关于算法、详解、算法基础方面的内…

Kaggle狗图像分类实战

文章目录 Kaggle狗图像分类实战d2l安装问题python语法学习os.path.joind2l 数据加载streamlit Kaggle狗图像分类实战 d2l安装问题 d2l安装失败&#xff0c;报错如上图 去下面的网站下载到该项目文件目录下再pip install即可 Python d2l项目安装包(第三方库)下载详情页面 - …

ATFX汇评:英央行利率决议来袭,大概率加息25基点

ATFX汇评&#xff1a;今日19:00&#xff0c;英国央行公布利率决议、会议纪要和货币政策报告&#xff1b;半小时后&#xff0c;英国央行行长贝利召开货币政策新闻发布会。当前英国央行基准利率5%&#xff0c;市场预期将加息25基点至5.25%&#xff0c;假若符合预期&#xff0c;则…