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

element左侧导航栏

由element组件搭建的左侧导航栏

预览:

html代码:

 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>首页</title><style>
/*<!--        调整页面背景颜色-->*/body{background-color: #eef1f6;}.el-row {display: flex;height: 100vh; /* 设置高度为视口高度 */}.el-col {display: flex;flex-direction: column;}.el-menu {flex-grow: 1;}</style>
</head>
<body>
<div id="app"><el-row>
<!--     导航页   --><el-col :span="3"><el-menudefault-active="0"class="el-menu-vertical-demo"@select="handleSelect"background-color="#303133"text-color="#fff"active-text-color="#ffd04b"><h3 style="text-align: center; background-color: yellow">酒店客房管理系统</h3><el-menu-item index="0">首页</el-menu-item><el-submenu index="1"><template slot="title"><span>系统管理</span></template><el-menu-item index="1-1">用户管理</el-menu-item><el-menu-item index="1-2">日志管理</el-menu-item></el-submenu><el-submenu index="2"><template slot="title"><span>报表管理</span></template><el-menu-item index="2-1">预定客人报表</el-menu-item><el-menu-item index="2-2">在线客人报表</el-menu-item><el-menu-item index="2-3">离店客人报表</el-menu-item><el-menu-item index="2-4">财务进账报表</el-menu-item></el-submenu><el-submenu index="3"><template slot="title"><span>房客管理</span></template><el-menu-item index="3-1">客房预定管理</el-menu-item><el-menu-item index="3-2">入住登记管理</el-menu-item><el-menu-item index="3-3">预定转入住</el-menu-item><el-menu-item index="3-4">换房管理</el-menu-item><el-menu-item index="3-5">结账管理</el-menu-item></el-submenu><el-submenu index="4"><template slot="title"><span>客房管理</span></template><el-menu-item index="4-1">客房信息管理</el-menu-item></el-submenu><el-submenu index="5"><template slot="title"><span>消费管理</span></template><el-menu-item index="5-1">附加消费入账</el-menu-item></el-submenu><el-submenu index="6"><template slot="title"><span>基础信息管理</span></template><el-menu-item index="6-1">客房类型管理</el-menu-item><el-menu-item index="6-2">楼层管理</el-menu-item><el-menu-item index="6-3">商品类别管理</el-menu-item><el-menu-item index="6-4">商品管理</el-menu-item><el-menu-item index="6-5">会员管理管理</el-menu-item></el-submenu><el-menu-item index="7"><span><a href="index.html">退出登录</a></span></el-menu-item></el-menu></el-col>
<!--    首页  --><el-col :span="21" v-if="this.page == 0"><center><h1>欢迎使用酒店客房管理系统</h1></center><h2>你是{{user.position}}</h2></el-col>
<!--客房管理 --><el-col :span="21" v-if="this.page == '6-1'"><h1>客房管理</h1><el-divider></el-divider><el-button style="width: 150px" type="primary" @click="addRoomType()">新增客房类型</el-button><el-table:data="roomTypeTableData"borderstyle="width: 100%"><el-table-columntype="index"width="100"></el-table-column><el-table-columnprop="type"label="客房类型"align="center"></el-table-column><el-table-columnprop="capacity"label="额定容量"align="center"></el-table-column><el-table-columnprop="note"label="备注"align="center"></el-table-column><el-table-column label="操作" width="200" align="center"><template slot-scope="scope"><el-button type="primary" size="mini" @click="editRoomType(scope.row)">编辑</el-button><el-button type="danger" size="mini" @click="deleteRoomType(scope.row)">删除</el-button></template></el-table-column></el-table></el-col></el-row><div id="dialog">
<!--     新增客房类型对话框   --><el-dialog title="新增客房类型" :visible.sync="addRoomTypeFormVisible"><el-form :model="roomType"><el-form-item  label="类型名" label-width="120px" :rules="[{ required: true, message: '请输入客房类型名', trigger: 'blur' }]"><el-input v-model="roomType.type"></el-input></el-form-item><el-form-item label="额定人数" label-width="120px" :rules="[{ required: true, message: '请输入额定人数', trigger: 'blur' }]"><el-input v-model="roomType.capacity"></el-input></el-form-item><el-form-item label="备注" label-width="120px"><el-input type="textarea" v-model="roomType.note"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="addRoomTypeFormVisible = false">取 消</el-button><el-button type="primary" @click="summitRoomType">提 交</el-button></div></el-dialog><el-dialog title="编辑客房类型" :visible.sync="editRoomTypeFormVisible"><el-form :model="roomType"><el-form-item  label="类型名" label-width="120px" ><el-input v-model="roomType.type"></el-input></el-form-item><el-form-item label="额定人数" label-width="120px"><el-input v-model="roomType.capacity"></el-input></el-form-item><el-form-item label="备注" label-width="120px"><el-input type="textarea" v-model="roomType.note"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="editRoomTypeFormVisible = false">取 消</el-button><el-button type="primary" @click="updateRoomType">确 定</el-button></div></el-dialog></div></div><script src="js/vue.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script>new Vue({el: '#app',data() {return {},methods: {handleSelect(key,keyPath){this.page = key;if(key=='6-1'){this.selectAll();}}},mounted(){this.$message({message: '欢迎使用酒店管理系统',type: 'success'})}})
</script>
</body>
</html>

需要引入vue.js文件和饿了么组件包,需要文件的话可以去官网获得,也可以加我v : LXY_OvO_

相关文章:

element左侧导航栏

由element组件搭建的左侧导航栏 预览: html代码: <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>首页</title><style> /*<!-- 调整页面背景颜色-->*/body{background-colo…...

【金融贷后】贷后运营精细化管理

文章目录 一、贷后专业术语讲解① 什么是贷后&#xff0c;贷后部是干什么的&#xff1f;② 贷后部门常见组织架构&#xff1f;③ 贷后专业术语有哪些&#xff1f; 二、贷后常用作业手段介绍① 贷后产品形态介绍&#xff1f;② 催收常用的方法&#xff1f; 三、贷后策略岗位介绍…...

学习CSS第七天

学习文章目录 一.交集选择器 一.交集选择器 使用多个条件符合的元素&#xff0c;可提高区分的精准度 元素配合类名是使用场景最多的 &#xff08;元素必须是第一位&#xff0c;ID一般不写&#xff09; <!DOCTYPE html> <html lang"zh-CN"> <head>…...

Image Stitching using OpenCV

文章目录 简介图像拼接管道特征检测和提取特征检测特征提取 特征匹配强力匹配FLANN&#xff08;近似最近邻快速库&#xff09;匹配 单应性估计扭曲和混合结论 使用opencv进行图像拼接 原为url: https://medium.com/paulsonpremsingh7/image-stitching-using-opencv-a-step-by-s…...

CentOS7 安装Selenium(使用webdriver_manager自动安装ChromeDriver)

在 CentOS 7 上安装 Selenium 通常涉及几个步骤&#xff0c;包括安装 Python、安装 Selenium 库、安装 WebDriver 以及配置环境。以下是详细的步骤&#xff1a; 1. 安装 Python 和 pip 如果你的系统中还没有安装 Python 和 pip&#xff0c;可以使用以下命令进行安装&#xff…...

鸿蒙手机文件目录

最近在开发鸿蒙&#xff0c;想把文件从电脑上发送到鸿蒙上我的手机APP的根目录&#xff0c;但是试了几次目录都不对&#xff0c;最后终于找到了&#xff0c;在这里记录一下 鸿蒙手机路径: /storage/media/100/local/files/Docs 将文件从电脑发送到手机&#xff1a;hdc file s…...

泷羽Sec学习笔记-Bp中ip伪造、爬虫审计

ip伪造与爬虫审计 ip伪造 下载插件&#xff1a;burpFakeIP 地址&#xff1a;GitHub - TheKingOfDuck/burpFakeIP: 服务端配置错误情况下用于伪造ip地址进行测试的Burp Suite插件 python版需要配置jython&#xff1a;下载地址&#xff1a;Maven Central: org.python:jython-…...

电子电工一课一得

首语 在现代社会中&#xff0c;电子电工技术已经渗透到我们生活的方方面面&#xff0c;从家用电器到工业自动化&#xff0c;从通信设备到智能系统&#xff0c;无一不依赖于电子电工技术。因此&#xff0c;掌握电子电工的基础知识&#xff0c;不仅对理工科学生至关重要&#xf…...

Cesium 限制相机倾斜角(pitch)滑动范围

1.效果 2.思路 在项目开发的时候&#xff0c;有一个需求是限制相机倾斜角&#xff0c;也就是鼠标中键调整视图俯角时&#xff0c;不能过大&#xff0c;一般 pitch 角度范围在 0 至 -90之间&#xff0c;-90刚好为正俯视。 在网上查阅了很多资料&#xff0c;发现并没有一个合适的…...

配置ssh-key连接github

GitHub 通过在 2022 年 3 月 15 日删除旧的、不安全的密钥类型来提高安全性。 具体内容参考如下链接 https://docs.github.com/zh/authentication/connecting-to-github-with-ssh/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent mac配置 ssh-keygen -t ed25519 -C …...

Linux——进程控制模拟shell

1.进程创建 我们在之前的文章中介绍过进程创建的方法&#xff0c;可以通过系统调用接口fork来创建新的进程。 fork在创建完新的子进程之后&#xff0c;返回值是一个pid&#xff0c;对于父进程返回子进程的pid&#xff0c;对于子进程返回0。fork函数后父子进程共享代码&#xff…...

【HarmonyOS】鸿蒙应用实现手机摇一摇功能

【HarmonyOS】鸿蒙应用实现手机摇一摇功能 一、前言 手机摇一摇功能&#xff0c;是通过获取手机设备&#xff0c;加速度传感器接口&#xff0c;获取其中的数值&#xff0c;进行逻辑判断实现的功能。 在鸿蒙中手机设备传感器ohos.sensor (传感器)的系统API监听有以下&#xf…...

Kael‘thas Sunstrider Ashes of Al‘ar

Kaelthas Sunstrider 凯尔萨斯逐日者 <血精灵之王> Kaelthas Sunstrider - NPC - 魔兽世界怀旧服TBC数据库_WOW2.43数据库_70级《燃烧的远征》数据库 Ashes of Alar 奥的灰烬 &#xff08;凤凰 310%速度&#xff09; Ashes of Alar - Item - 魔兽世界怀旧服TBC数据…...

CNCF云原生生态版图

CNCF云原生生态版图 概述什么是云原生生态版图如何使用生态版图 项目和产品&#xff08;Projects and products&#xff09;会员&#xff08;Members&#xff09;认证合作伙伴与提供商&#xff08;Certified partners and providers&#xff09;无服务&#xff08;Serverless&a…...

渐冻症:真的无药可治?

“渐冻症”&#xff0c;这个令人闻之色变的疾病&#xff0c;仿佛是生命的冷酷冰封者。一提到渐冻症&#xff0c;很多人脑海中立刻浮现出绝望的画面&#xff0c;认为它无药可治。但事实真的如此吗&#xff1f; 渐冻症&#xff0c;医学上称为肌萎缩侧索硬化症&#xff0c;是一种渐…...

`pg_wal` 目录

在 PostgreSQL 中&#xff0c;自动清理 pg_wal 目录主要通过配置参数 min_wal_size、max_wal_size 和 wal_keep_size 来实现。以下是如何配置 PostgreSQL 以自动清理 WAL 文件的详细步骤和建议&#xff1a; 配置 min_wal_size 和 max_wal_size&#xff1a; min_wal_size&#x…...

【信息系统项目管理师】论文:论信息系统项目的整合管理

文章目录 正文一、制定项目章程二、指定项目管理计划三、指导与管理项目工作四、管理项目知识五、监控项目工作六、实施整体变更控制七、结束项目或阶段 正文 根据省自然资源厅的总体部署&#xff0c;XX市决定于2023年8月开始全市不动产登记系统建设&#xff0c;要求在2024年8…...

MATLAB深度学习(七)——ResNet残差网络

一、ResNet网络 ResNet是深度残差网络的简称。其核心思想就是在&#xff0c;每两个网络层之间加入一个残差连接&#xff0c;缓解深层网络中的梯度消失问题 二、残差结构 在多层神经网络模型里&#xff0c;设想一个包含诺干层自网络&#xff0c;子网络的函数用H(x)来表示&#x…...

freeswitch(配置event_socket连接)

亲测版本centos 7.9系统–》 freeswitch1.10.9 本人freeswitch安装路径(根据自己的路径进入) /usr/local/freeswitch/etc/freeswitch场景说明: 如果想使用代码进行控制freeswitch添加账号、获取注册信息、强拆等,可以使用ESL控制vim autoload_configs/event_socket.conf.x…...

C++ SQLite轻量化数据库使用总结

官网下载&#xff1a;https://www.sqlite.org/download.html 示例1 #include <iostream> #include <sqlite3.h>int main() {sqlite3* db;char* zErrMsg 0;int rc;// 打开数据库连接&#xff08;如果数据库不存在&#xff0c;则会自动创建&#xff09;rc sqlite…...

中南大学无人机智能体的全面评估!BEDI:用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

使用Matplotlib创建炫酷的3D散点图:数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例(带样式)应用场景在数据科学和可视化领域,三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

推荐 github 项目:GeminiImageApp(图片生成方向,可以做一定的素材)

推荐 github 项目:GeminiImageApp(图片生成方向&#xff0c;可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...

Go 并发编程基础:通道(Channel)的使用

在 Go 中&#xff0c;Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式&#xff0c;用于在多个 Goroutine 之间传递数据&#xff0c;从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...

基于IDIG-GAN的小样本电机轴承故障诊断

目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) ​梯度归一化(Gradient Normalization)​​ (2) ​判别器梯度间隙正则化(Discriminator Gradient Gap Regularization)​​ (3) ​自注意力机制(Self-Attention)​​ 3. 完整损失函数 二…...

Python实现简单音频数据压缩与解压算法

Python实现简单音频数据压缩与解压算法 引言 在音频数据处理中&#xff0c;压缩算法是降低存储成本和传输效率的关键技术。Python作为一门灵活且功能强大的编程语言&#xff0c;提供了丰富的库和工具来实现音频数据的压缩与解压。本文将通过一个简单的音频数据压缩与解压算法…...

在RK3588上搭建ROS1环境:创建节点与数据可视化实战指南

在RK3588上搭建ROS1环境:创建节点与数据可视化实战指南 背景介绍完整操作步骤1. 创建Docker容器环境2. 验证GUI显示功能3. 安装ROS Noetic4. 配置环境变量5. 创建ROS节点(小球运动模拟)6. 配置RVIZ默认视图7. 创建启动脚本8. 运行可视化系统效果展示与交互技术解析ROS节点通…...

C++--string的模拟实现

一,引言 string的模拟实现是只对string对象中给的主要功能经行模拟实现&#xff0c;其目的是加强对string的底层了解&#xff0c;以便于在以后的学习或者工作中更加熟练的使用string。本文中的代码仅供参考并不唯一。 二,默认成员函数 string主要有三个成员变量&#xff0c;…...

JS红宝书笔记 - 3.3 变量

要定义变量&#xff0c;可以使用var操作符&#xff0c;后跟变量名 ES实现变量初始化&#xff0c;因此可以同时定义变量并设置它的值 使用var操作符定义的变量会成为包含它的函数的局部变量。 在函数内定义变量时省略var操作符&#xff0c;可以创建一个全局变量 如果需要定义…...

数据库正常,但后端收不到数据原因及解决

从代码和日志来看&#xff0c;后端SQL查询确实返回了数据&#xff0c;但最终user对象却为null。这表明查询结果没有正确映射到User对象上。 在前后端分离&#xff0c;并且ai辅助开发的时候&#xff0c;很容易出现前后端变量名不一致情况&#xff0c;还不报错&#xff0c;只是单…...