【开发实践】vue2 +mybatis + MySQL 实现房间状态图

科技前沿 • 2025-03-15 23:20 • 阅读 42

大家好，我是讯享网，很高兴认识大家。

在许多酒店项目开发中，经常离不开房态图，通过房态图能快速预览信息，或者进行房间的相关业务，如何快速地制造一个好看的房态图呢？！对于有房态图需求的，建议收藏本文，可能会有一点点的小帮助！！

一、效果预览

图标库采用fa图标库，图标库地址：FontAwesome 4.3.0

讯享网

二、代码实现

1、数据库表

后端只需要传输给前端房间信息数组的json数据。

2、房态图前端<div> css

自定义div标签，颜色自己确定，笔者房间设计5个状态，自定义5个房间状态div标签。

 .room-free { width: 110px; height: 70px; border: 1px solid #73d69b; border-radius: 5px; background: #73d69b; float: left; margin: 2px; text-align: center; color: white; cursor: pointer; } .room-occupy { width: 110px; height: 70px; border: 1px solid #f3d17a; border-radius: 5px; background: #f3d17a; float: left; margin: 2px; text-align: center; color: white; cursor: pointer; } .room-bookAhead { width: 110px; height: 70px; border: 1px solid #29b6f6; border-radius: 5px; background: #29b6f6; float: left; margin: 2px; text-align: center; color: white; cursor: pointer; } .room-repair { width: 110px; height: 70px; border: 1px solid #B5B5B5; border-radius: 5px; background: #B5B5B5; float: left; margin: 2px; text-align: center; color: white; cursor: pointer; } .room-clearing { width: 110px; height: 70px; border: 1px solid #87CEFA; border-radius: 5px; background: #87CEFA; float: left; margin: 2px; text-align: center; color: white; cursor: pointer; }

讯享网

【开发实践】vue2 +mybatis + MySQL 实现房间状态图

一、效果预览

二、代码实现

相关推荐