使用vue和element_ui搭建后端页面

使用vue和element_ui搭建后台管理页面

  • 效果顶部和左侧内容固定,中间内容滚动
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="element_ui/index.css"><style>body {margin:0px;}.is-vertical {height: 100vh;}.top {height: calc(100vh - 80px) ;}.el-aside {background-color: yellow;}.log-header {display: flex;justify-content:flex-start;align-items: center;height: 64px;margin:0 20px;border-bottom: 1px solid red;}.el-scrollbar__wrap {margin-right: 0px !important;margin-bottom: 0px !important;overflow-x: hidden !important;overflow-y: auto !important;}.el-header {background-color: red;position: fixed;left:220px;width: calc( 100vw - 220px );}.el-main {padding-top: 0px;padding-bottom: 20px;padding-left: 20px;padding-right: 20px;width: calc( 100vw - 220px );}.el-header .row-bg {height: 100%;}.ab {flex:  0 0 auto;}</style>
</head>
<body><div id="app"><el-container><el-container direction="horizontal" class="top"><el-aside width="220px" style="position: fixed;"><div class="log-header"><div class="log" style="margin-right: 5px;">log</div><div class="title">title</div></div><el-scrollbar style="height: calc(100vh - 115px );width:100%"><el-menu default-active="activeMenu" class="el-menu-vertical-demo" background-color="#ffffff" :collapse="isCollapse"><el-submenu index="1"><template slot="title"><i class="el-icon-location"></i><span slot="title">导航一</span></template><el-menu-item-group><span slot="title">分组一</span><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="1-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><span slot="title">选项4</span><el-menu-item index="activeMenu">选项1</el-menu-item></el-submenu></el-submenu><el-menu-item index="2"><i class="el-icon-menu"></i><span slot="title">导航二</span></el-menu-item><el-menu-item index="3" disabled><i class="el-icon-document"></i><span slot="title">导航三</span></el-menu-item><el-menu-item index="4"><i class="el-icon-setting"></i><span slot="title">导航四</span></el-menu-item><el-menu-item index="5"><i class="el-icon-setting"></i><span slot="title">导航5</span></el-menu-item><el-menu-item index="6"><i class="el-icon-setting"></i><span slot="title">导航6</span></el-menu-item><el-menu-item index="7"><i class="el-icon-setting"></i><span slot="title">7</span></el-menu-item></el-menu></el-scrollbar></el-aside><el-main style="background-color: yellow;;overflow: hidden;height: 1600px;"><el-header height="65"><el-row type="flex" class="row-bg" align="middle"><el-col class="ab" :span="10"><el-breadcrumb separator="/"><el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item><el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item><el-breadcrumb-item>活动列表</el-breadcrumb-item><el-breadcrumb-item>活动详情</el-breadcrumb-item></el-breadcrumb></el-col><el-col :offset="6" :span="6"> <el-inputplaceholder="请输入内容"prefix-icon="el-icon-search"></el-input></el-col><el-col :span="2"><i class="el-icon-question"></i>帮助</el-col></el-row></el-header><el-main style="margin-top: 65px !important;margin-left: 200px;padding-top:10px">dsfdsfsd</el-main></el-main></el-container><el-footer height="50px">底部</el-footer></el-container></div><!-- import Vue before Element --><script src="js/vue.js"></script><script src="js/vue-router.min.js"></script><!-- import JavaScript --><script src="element_ui/index.js"></script><script>new Vue({el: '#app',data: function() {return { visible: false }}})</script>
</body>
</html>

在这里插入图片描述

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

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

相关文章

汽车生产线中的工业机器人应用HT3S-PNS-ECS(EtherCAT/Profinet)协议转换通讯方案案例分析

汽车生产线中的工业机器人应用HT3S-PNS-ECS(EtherCAT/Profinet)协议转换通讯方案案例分析 ——北京中科易联科技有限公司供稿—— 一、摘要 随着工业自动化的快速发展&#xff0c;汽车生产线对工业机器人的依赖日益增加。HT3S-PNS-ECS作为工业机器人中的关键组件&#xff0c;其…

GPIO模拟spi时序点亮数码管

目录 spi.h spi.c main.c 实验效果 spi.h #ifndef __SPI_H__ #define __SPI_H__#include "stm32mp1xx_gpio.h" #include "stm32mp1xx_rcc.h"//spi初始化 void spi_init(); //spi写入数据 void spi_write(unsigned char data);#endif spi.c #include…

c++和Lua交互

lua vm Lua VM&#xff08;虚拟机&#xff09;是指运行Lua脚本的执行环境。Lua VM负责将Lua脚本编译成中间代码&#xff0c;然后将该中间代码解释执行或者编译成本地代码执行。在虚拟机之外&#xff0c;Lua的脚本代码并不能直接被计算机指令执行。因此&#xff0c;必须有想办法…

git分支常用命令

最近在用git提交代码的时候&#xff0c;发现有些命令不是很会&#xff0c;先记录几个常用分支命令&#xff0c;后续再补充&#xff0c;在执行git push命令提交代码的时候遇到报错&#xff0c;一并记录下。 1.git常用命令 新建分支&#xff1a; git branch <分支名称> 比…

Vue3组件通讯有哪些方式

目前最常用是props/$emit 和 vuex/pinia ,接下来是 provide/inject,其他不建议使用; 实际项目中&#xff0c;简单父子组件传递采用props/$emit &#xff0c;涉及全局共享的数据一般采用 vuex/pinia 结合存储对象localStorage/sessionStorage使用 1.props/$emit 1.props 单向数…

Python——基于共享单车使用量数据的可视化分析(1)

目录 &#x1f9fe; 1、数据集&#xff08;部分数据&#xff09; ✏️ 2、导入数据集与必要模块 1️⃣ 2.1 导入库以及字体包 2️⃣ 2.2 读取数据集 3️⃣ 2.3 查看数据集基本信息 ⌨️ 3、数据预处理 1️⃣ 3.1删除无关字段 2️⃣ 3.2对各字段进行中文标识 3️⃣ 3.3…

Open3D-Geometry-3:RGBD图像的数据处理

文章目录 0. 引言1. Redwood 数据集2. SUN 数据集3. NYU 数据集4. TUM 数据集0. 引言 Open3D 有图像的数据结构。它支持各种功能,例如read_image、write_image、filter_image和draw_geometries。 Open3D 图像可以直接与 numpy 数组相互转换。 Open3D RGBDImage由两个图像组成…

EI会议的社交活动有哪些?

EI会议&#xff08;Engineering Index会议&#xff09;不仅是一个展示最新研究成果的平台&#xff0c;也为与会者提供了丰富的社交活动机会。以下是一些常见的社交活动形式及其内容&#xff1a; 常见社交活动 1. 欢迎酒会&#xff08;Welcome Reception&#xff09; 时间和地…

图像超分辨率重建相关概念、评价指标、数据集、模型

1、图像超分辨率概念 1.1 基本定义 超分辨率&#xff08;Super-Resolution&#xff09;&#xff0c;简称超分&#xff08;SR&#xff09;。是指利用光学及其相关光学知识&#xff0c;根据已知图像信息恢复图像细节和其他数据信息的过程&#xff0c;简单来说就是增大图像的分辨…

【openpcdet中yaml文件的MODEL学习】

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、代码二、详细解释MODEL: NAME: PointPillarMAP_TO_BEV (Mapping to Birds Eye View):BACKBONE_2D (2D Backbone Network): 总结 前言 提示&#xff1a;这里…

光照模型技术在AI去衣中的重要作用

引言&#xff1a; 在数字图像处理和计算机视觉领域&#xff0c;AI去衣技术正逐渐成为研究和应用的热点。这项技术依赖于人工智能算法&#xff0c;尤其是深度学习模型&#xff0c;来识别和处理图像或视频中的衣物。在这个过程中&#xff0c;光照模型技术扮演着至关重要的角色。本…

派可数据助力制造企业数字化生产管理新能力提升

生产管理是现代企业运营的核心之一&#xff0c;它决定了产品的质量、生产效率和企业的竞争力。在一个日益竞争激烈、市场需求多变的商业环境中&#xff0c;如何高效地组织和管理生产过程成为了企业不容忽视的重要课题。 过去&#xff0c;生产管理可能主要侧重于物理工厂的运作…

2024-5-6-从0到1手写配置中心Config之实现配置中心客户端

配置加载原理 在Spring中PropertySource类实现了所有属性的实例化。 启动赋值&#xff1a; 定义自定义属性配置源&#xff0c;从config-server获取全局属性&#xff1b;Spring启动时&#xff0c;插入自定义属性配置源&#xff1b;绑定属性会优先使用&#xff0c;给自定义属性…

宁盾与深信服发布联合方案,解决云桌面及微软AD完整替代

自 Citrix 退出中国市场后&#xff0c;不少中大型企业关心国产云桌面脱离微软 AD 域是否还能正常工作。在2024年3月初&#xff0c;宁盾身份目录与深信服桌面云完成兼容互认证&#xff0c;对于企业的疑问给出了官方回应。 5月10日&#xff0c;在深信服《Citrix离场背景下&#…

【设计模式】JAVA Design Patterns——Balking(止步模式)

&#x1f50d;目的 止步模式用于防止对象在不完整或不合适的状态下执行某些代码。 &#x1f50d;解释 真实世界例子 洗衣机中有一个开始按钮&#xff0c;用于启动衣物洗涤。当洗衣机处于非活动状态时&#xff0c;按钮将按预期工作&#xff0c;但是如果已经在洗涤&#xff0c;则…

类中属性赋值的过程——Java学习笔记

类中属性赋值过程 非静态属性的赋值 可以通过: 默认初始化显示初始化构造器中初始化通过对象.属性或对象.方法的方法进行赋值代码块中初始化 执行先后顺序&#xff1a;默认初始化–>显式初始化–>代码块中初始化–>构造器初始化–>通过方法进行赋值 关于字节码…

Spring中Bean的作用域有哪些?

在Spring框架中&#xff0c;Bean的作用域定义了由Spring IoC容器创建的Bean实例的可见范围和生命周期。Spring提供了几种不同的Bean作用域供我们根据需求选择使用&#xff0c;每种作用域都有其特定的用途。常用的作用域包括&#xff1a; Singleton&#xff08;单例&#xff09;…

企业签名有什么优点?

企业签名具有以下优点&#xff1a; 1.自定义企业分发&#xff1a;为企业提供更大的灵活性和控制权 2.加强企业安全性&#xff1a; 控制分发 减少潜在风险、数据泄露 3.内部应用更新和管理&#xff1a;企业可自主更新和管理内部分发。灵活发布新版本应用程序&#xff0c;修复bug…

大型语言模型(LLM)论文串烧

近期把各家大型语言模型的论文过了一遍&#xff0c;包括&#xff1a; Qwen Llama 2 BlueLM GLM-130B Baichuan2 Yi 刚好趁着刚看完还有印象稍微做下总结。

「动态规划」地下城游戏

力扣原题链接&#xff0c;点击跳转。 有一个地下城&#xff0c;我们用mn大小的二维数组dungeon表示。dungeon[i][j]如果为正&#xff0c;该位置有血包&#xff0c;可以加血量&#xff1b;如果为负&#xff0c;该位置有恶魔&#xff0c;会扣掉相应的血量。有一个骑士在左上角&a…