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

elment-ui的侧边栏 开关及窗口联动

请添加图片描述

<template><div class="asders"><el-aside width="200px"><div class="boxbody"><div>源码外卖</div><el-switch v-model="isCollapse" :active-value="true" :inactive-value="false"></el-switch></div><el-menu:collapse="isCollapse"routerunique-opened:default-active="$router.path"class="el-menu-vertical-demo"background-color="rgba(220,38,38,0.2)"text-color="#fff"active-text-color="#ffd04b"><el-menu-item index="/last"><i class="el-icon-menu"></i><span slot="title">后台首页</span></el-menu-item><el-menu-item index="/order"><i class="el-icon-menu"></i><span slot="title">订单管理</span></el-menu-item><el-submenu index="/goods"><template slot="title"><i class="el-icon-location"></i><span>商品管理</span></template><el-menu-item-group><el-menu-item index="/goods/list">商品列表</el-menu-item><el-menu-item index="/goods/add">商品添加</el-menu-item><el-menu-item index="/goods/index">商品分类</el-menu-item></el-menu-item-group></el-submenu><el-menu-item index="/shop"><i class="el-icon-menu"></i><span slot="title">店铺管理</span></el-menu-item><el-submenu index="/account"><template slot="title"><i class="el-icon-location"></i><span>账号管理</span></template><el-menu-item-group><el-menu-item index="/account/list">账号列表</el-menu-item><el-menu-item index="/account/add">添加账号</el-menu-item><el-menu-item index="/account/index">修改密码</el-menu-item></el-menu-item-group></el-submenu><el-submenu index="/sale"><template slot="title"><i class="el-icon-location"></i><span>销售统计</span></template><el-menu-item-group><el-menu-item index="/sale/goods">商品统计</el-menu-item><el-menu-item index="/sale/index">销售统计</el-menu-item></el-menu-item-group></el-submenu></el-menu></el-aside></div>
</template><script>
export default {data() {return {isCollapse: false};},methods: {change() {this.isCollapse = !this.isCollapse;},handleResize() {console.log(document.body.offsetWidth);if (document.body.offsetWidth <= 700) {this.isCollapse = true;} else {this.isCollapse = false;}}},created() {this.handleResize;window.addEventListener("resize", this.handleResize);}
};
</script><style lang="scss" scoped>
.asders {height: 100%;background: url("../../assets/OIP-C.jpg") center, center/cover;
}
.el-menu {height: 100%;transition: all linear 0.3s;
}
.boxbody {height: 50px;display: flex;padding: 30px;align-items: center;background: url("../../assets/OIP-C.jpg") center center/cover;div {text-align: center;color: rgb(83, 50, 50);font-size: 18px;font-weight: bold;}
}
.el-aside {color: #333;text-align: center;line-height: 200px;height: 100%;
}
</style>

相关文章:

elment-ui的侧边栏 开关及窗口联动

<template><div class"asders"><el-aside width"200px"><div class"boxbody"><div>源码外卖</div><el-switch v-model"isCollapse" :active-value"true" :inactive-value"fals…...

【从零开始学习JAVA | 第三十二篇】 异常(下)新手必学!

目录 前言&#xff1a; Exceptions&#xff08;异常&#xff09;&#xff1a; 异常的两大作用&#xff1a; 异常的处理方式&#xff1a; 1.JVM默认处理 2.自己捕获异常 3.抛出处理 自定义异常&#xff1a; 异常的优点&#xff1a; 总结&#xff1a; 前言&#xff1a; 前…...

onnxruntime (C++/CUDA) 编译安装

一、克隆及编译 git clone --recursive https://github.com/Microsoft/onnxruntime cd onnxruntime/ git checkout v1.8.0如果克隆的时候报错&#xff1a; 执行以下&#xff1a; apt-get install gnutls-bin git config --global http.sslVerify false git config --global h…...

第三篇-Tesla P40+CentOS-7+CUDA 11.7 部署实践

第一篇-ChatGLM-webui-Windows安装部署-CPU版 第二篇-二手工作站配置 第三篇-Tesla P40CentOS-7CUDA 11.7 部署实践 硬件环境 系统&#xff1a;CentOS-7 CPU: 14C28T 显卡&#xff1a;Tesla P40 24G 准备安装 驱动: 515 CUDA: 11.7 cuDNN: 8.9.2.26 安装依赖 yum clean al…...

Unity游戏源码分享-ARPG游戏Darklight.rar

Unity游戏源码分享-ARPG游戏Darklight.rar 玩法 项目地址&#xff1a;https://download.csdn.net/download/Highning0007/88105464...

类型转换运算符

当我们想要将自定义类的对象转换为目标类型时&#xff0c;我们可以通过重载类型转换运算符&#xff08;conversion operator&#xff09;来实现。 以下是一个示例代码&#xff0c;展示了如何在 C 中定义一个自定义类&#xff0c;并重载类型转换运算符将对象转换为目标类型&…...

Kafka 入门到起飞系列 - 消费者组管理、位移管理

消费者组 - Consumer Group 上文我们已经讲过消费者组了&#xff0c;我们知道消费组的存在可以保证一个主题下一个分区的消息只会被组内一个消费者消费&#xff0c;从而避免了消息的重复消费 什么是消费组 - Consumer Group&#xff1f; 消费者组是Kafka 提供的可扩展且具有容…...

SpringBoot——数据层三组件之间的关系

简单介绍 在之前的文章中&#xff0c;我们介绍了一下SpringBoot中内置的几种数据层的解决方案&#xff0c;在数据层由三部分组成&#xff0c;分别是数据库&#xff0c;持久化技术以及数据源&#xff0c;但是我今天写着写着&#xff0c;突然就想不起来这三部分到底是干什么的了…...

LeetCode647.Palindromic-Substrings<回文子串>

题目&#xff1a; 思路&#xff1a; 错误代码&#xff1a;&#xff08;缺少部分判断&#xff09; 使用的是寻找回文子串的方法。以一个点为中心向两边扫描。但是有一点小问题。 因为回文子串是分奇偶的&#xff0c;所以需要两种判断方式。 看了下答案后发现我的代码距离答案一…...

React的hooks---useContext

Context 提供了一个无需为每层组件手动添加 props &#xff0c;就能在组件树间进行数据传递的方法&#xff0c;useContext 用于函数组件中订阅上层 context 的变更&#xff0c;可以获取上层 context 传递的 value prop 值 useContext 接收一个 context 对象&#xff08;React.…...

【Terraform学习】TerraformCloud入门介绍(快速入门)

TerraformCloud入门介绍 什么是 TerraformCloud&#xff1f; Terraform Cloud是Hashicorp Terraform的SaaS版本。 免费版功能 免费版功能包括版本控制集成、远程计划和实施远程计划和实施、通知及webhook、全http API驱动、状态管理、模拟计划、私有化模块注册器以及全HTTP界…...

linux实现运行java分包部署

1.打好包之后 找到bin文件夹下的 startup.sh文件 2.cd 进入bin文件夹下 3.执行 sh startup.sh 运行命令 4.如果出现此错误 是Windows和Linux的.sh脚本文件格式不同&#xff0c;如果在脚本中有空行&#xff0c;脚本是在Windows下进行编辑之后上传到linux上去执行的话&#xff0c…...

数据安全之全景图系列——数据分类分级落地实践

1、数据分类分级现状 我们正处于一个数据爆炸式增长的时代&#xff0c;随着产业数字化转型升级的推进&#xff0c;数据已被国家层面纳入生产要素&#xff0c;并且成为企业、社会和国家层面重要的战略资源。数据分类分级管理不仅是加强数据交换共享、提升数据资源价值的前提条件…...

C++实现MySQL数据库连接池

C实现MySQL数据库连接池 涉及技术 MySQL数据库编程、单例模式、STL容器、C11多线程&#xff08;线程互斥、线程互斥、线程同步通信和unique_lock&#xff09;、智能指针shared_ptr、lambda表达式、生产者-消费者线程模型。 项目背景 为了提升MySQL数据库&#xff08;基于C/…...

day4 驱动开发 c语言学习

不利用系统提供的register_chrdev&#xff0c;自己实现字符设备的注册 底层代码 led.c #include <linux/init.h> #include <linux/module.h> #include <linux/fs.h> #include <linux/uaccess.h> #include <linux/io.h> #include "head.h…...

history命令:显示命令执行时间

1.修改配置文件 vim /etc/profile 添加内容 export HISTTIMEFORMAT"%Y-%m-%d %H:%M:%S " ​ #注意&#xff1a;在末尾的“引号”与“S”之间&#xff0c;加入一位空格&#xff0c;将日期时间和历史命令用空格相隔开来。 你也可以换一种清晰的形式&#xff0c;效果…...

Django接口返回JSON格式数据报文

目录 遇到问题 Django返回json结构报文 不可行方式python json 可行方式JsonResponseQuerySet.values()。 python的两个web框架&#xff0c;flask和django&#xff0c;两者都具有view 模板的章节&#xff0c;但是当前开发一个应用&#xff0c;大部分采用前后端分离的合作方式。…...

OBS 迁移--华为云

一、创建迁移i任务 1. 登录管理控制台。 2. 单击管理控制台左上角的 在下拉框中选择区域。 3. 单击“ 服务列表 ”&#xff0c;选择“ 迁移 > 对象存储迁移服务 OMS ”&#xff0c;进入“ 对象存储迁移服务 ”页面。 4. 单击页面右上角“ 创建迁移任务 ”。 5. 仔细阅读…...

【Docker consul的容器服务更新与发现】

文章目录 一、Consul 的简介&#xff08;1&#xff09;什么是服务注册与发现&#xff08;2&#xff09;什么是consul 二、consul 部署1、consul服务器1. 建立 Consul 服务2. 查看集群信息3. 通过 http api 获取集群信息 2、registrator服务器1. 安装 Gliderlabs/Registrator2. …...

MFC第二十天 数值型关联变量 和单选按钮与复选框的开发应用

文章目录 数值型关联变量数值型关联变量的种类介绍 单选按钮与复选框单选按钮的组内选择原理解析单选按钮和复选框以及应用数值型关联变量的开发CMainDlg.cppCInputDlg.hCInputDlg.cpp 附录 数值型关联变量 数值型关联变量的种类介绍 1、 数值型关联变量&#xff1a; a)控件型…...

从代码到部署:手把手复现CenterPoint(PyTorch版)在KITTI数据集上的完整流程

从零实现CenterPoint&#xff1a;KITTI数据集3D目标检测全流程实战指南 为什么选择CenterPoint进行3D目标检测&#xff1f; 在自动驾驶和机器人感知领域&#xff0c;3D目标检测一直是核心技术难题。传统基于锚框&#xff08;Anchor-based&#xff09;的方法在处理旋转物体时表现…...

别再只看波形了!用Maxwell+Matlab深度分析电机空载气隙磁密的谐波极对数分布

电机电磁设计进阶&#xff1a;从Maxwell FFT到Matlab谐波极对数分析的工程实践 在电机设计领域&#xff0c;空载气隙磁密的谐波分析一直是评估电磁性能的核心手段。传统方法往往止步于波形观察和简单频谱分析&#xff0c;却忽略了谐波极对数分布这一关键维度——它直接关联着电…...

原创:第三篇(工程落地・首个抓手)电磁筑基:无线充电工程落地总案

第三篇&#xff08;工程落地・首个抓手&#xff09;电磁筑基&#xff1a;无线充电工程落地总案 作者&#xff1a;华夏之光永存 总摘要 当前人类电磁学应用仍处于婴孩阶段&#xff0c;现有电磁能量传输技术多局限于有线模式&#xff0c;存在传输损耗高、场景适配性差、灵活性不足…...

快速部署MinerU镜像:开箱即用的PDF提取方案,告别繁琐配置

快速部署MinerU镜像&#xff1a;开箱即用的PDF提取方案&#xff0c;告别繁琐配置 1. 引言&#xff1a;为什么你需要一个“开箱即用”的PDF提取工具&#xff1f; 如果你曾经尝试过从一份复杂的PDF文档里提取文字、表格和公式&#xff0c;你大概率经历过这样的痛苦&#xff1a;…...

RK3568交叉编译环境搭建:ARM官方GCC 8.3与Linaro版本到底怎么选?我的踩坑与选择心得

RK3568交叉编译环境搭建&#xff1a;ARM官方GCC 8.3与Linaro版本深度对比与实战选择指南 在嵌入式开发领域&#xff0c;交叉编译环境的搭建往往是项目启动的第一道门槛。对于RK3568这样的高性能ARM处理器&#xff0c;选择合适的交叉编译器不仅关系到开发效率&#xff0c;更直接…...

手把手教你用ENA-TDR实测USB3.0线:阻抗、延时、串扰一个不漏

深度解析USB3.0线缆全参数测试&#xff1a;从TDR原理到实战报告解读 在高速数据传输领域&#xff0c;一根优质USB3.0线缆的价值往往被严重低估。当工程师们为系统稳定性问题焦头烂额时&#xff0c;很少有人会想到问题可能出在那根不起眼的连接线上。事实上&#xff0c;根据行业…...

uniapp集成腾讯地图:从marker点聚合到轨迹回放的跨端实战与性能调优

1. uniapp集成腾讯地图SDK的核心步骤 第一次在uniapp里用腾讯地图SDK时&#xff0c;我踩了个大坑——直接在H5端跑代码发现地图出不来。后来才明白&#xff0c;腾讯地图在H5端需要单独配置安全域名。具体操作是在腾讯地图开放平台申请key时&#xff0c;必须把H5的域名加入白名单…...

厦门选117E还是120E?手把手教你为你的城市选择正确的高斯克吕格投影坐标系

厦门GIS项目实战&#xff1a;如何精准选择高斯克吕格投影坐标系 第一次在ArcGIS里看到上百个坐标系选项时&#xff0c;我的鼠标指针在列表上方徘徊了整整十五分钟——就像站在自动售货机前不知道按哪个按钮的新手。特别是当项目 deadline 临近&#xff0c;而厦门市规划局的Shap…...

从电子管到全固态:中波广播发射机核心技术演进与选型指南

1. 中波广播发射机的前世今生 第一次见到中波发射机是在十年前参观某省级广播电台时&#xff0c;那座两层楼高的电子管设备让我印象深刻——嗡嗡作响的风扇、散发着热量的金属外壳、闪烁着微光的电子管&#xff0c;活像科幻电影里的场景。如今这种"大家伙"已经逐渐被…...

DanKoe 视频笔记:原创思维指南:如何进行原创思考

在本教程中&#xff0c;我们将学习如何摆脱思维定式&#xff0c;培养真正的原创思考能力。我们将探讨为何独立思考如此困难&#xff0c;并提供一套实用的方法来帮助你形成自己的观点、连接不同领域的知识&#xff0c;并最终创造出有价值的内容。 概述 每个人都希望成为一个原创…...