div+css 设备看板样式

xiaoshengjinbu2024-07-01 14:54

=========效果如下============
餐线一
餐线一 机器1
糖醋里脊肉
¥ 30
93克-余量低
【脱机】餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线二
餐线一 机器1
糖醋里脊肉
¥ 30
93克-余量低
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线二
餐线一 机器1
糖醋里脊肉
¥ 30
93克-余量低
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克
餐线一 机器1
糖醋里脊肉
¥ 30
4693克

====== 代码如下 ======

复制代码 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="table.css">
    <style>
        .device-list .device-meal-line-item .device-meal-line-title {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-size: 20px;
  font-weight: bold;
}
.device-list .device-meal-line-item .grid-contaniner {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.device-list .device-meal-line-item .grid-contaniner .grid-item {
  min-width: 12.44%;
  height: 200px;
  border: solid 1px #DCDFE6;
  margin: -1px 0 0 -1px;
  font-size: 16px;
  /*  余量低 */
  /*  脱机 */
}
.device-list .device-meal-line-item .grid-contaniner .grid-item .grid-item-title {
  min-width: 180px;
  padding-left: 5px;
  height: 50px;
  line-height: 50px;
  border-bottom: solid 1px #DCDFE6;
}
.device-list .device-meal-line-item .grid-contaniner .grid-item .grid-item-content {
  height: 150px;
  display: flex;
  flex-direction: column;
}
.device-list .device-meal-line-item .grid-contaniner .grid-item .grid-item-content .dish-name {
  padding-left: 5px;
  height: 50px;
  line-height: 50px;
  font-weight: bold;
}
.device-list .device-meal-line-item .grid-contaniner .grid-item .grid-item-content .dish-price {
  padding-left: 5px;
  height: 50px;
  line-height: 50px;
}
.device-list .device-meal-line-item .grid-contaniner .grid-item .grid-item-content .dish-weight {
  padding-left: 5px;
  flex: 1;
  padding-top: 13px;
  font-weight: bold;
}
.device-list .device-meal-line-item .grid-contaniner .grid-item .bg-bj {
  background-color: #fee7dc;
}
.device-list .device-meal-line-item .grid-contaniner .grid-item .bg-tj {
  background-color: #fa550c;
}

    </style>
</head>

<body>
    <div class="device-list">
        <div class="device-meal-line-item">
            <div class="device-meal-line-title">餐线一</div>
            <div class="grid-contaniner">
                <div class="grid-item">
                    <div class="grid-item-title">餐线一 机器1</div>
                    <div class="grid-item-content">
                        <div class="dish-name">糖醋里脊肉</div>
                        <div class="dish-price">¥ 30</div>
                        <div class="dish-weight bg-bj">93克-余量低</div>
                    </div>
                </div>
                <div class="grid-item">
                    <div class="grid-item-title bg-tj">【脱机】餐线一 机器1</div>
                    <div class="grid-item-content">
                        <div class="dish-name">糖醋里脊肉</div>
                        <div class="dish-price">¥ 30</div>
                        <div class="dish-weight">4693克</div>
                    </div>
                </div>
                <div class="grid-item">
                    <div class="grid-item-title">餐线一 机器1</div>
                    <div class="grid-item-content">
                        <div class="dish-name">糖醋里脊肉</div>
                        <div class="dish-price">¥ 30</div>
                        <div class="dish-weight">4693克</div>
                    </div>
                </div>
                <div class="grid-item">
                    <div class="grid-item-title">餐线一 机器1</div>
                    <div class="grid-item-content">
                        <div class="dish-name">糖醋里脊肉</div>
                        <div class="dish-price">¥ 30</div>
                        <div class="dish-weight">4693克</div>
                    </div>
                </div>
                <div class="grid-item">
                    <div class="grid-item-title">餐线一 机器1</div>
                    <div class="grid-item-content">
                        <div class="dish-name">糖醋里脊肉</div>
                        <div class="dish-price">¥ 30</div>
                        <div class="dish-weight">4693克</div>
                    </div>
                </div>
                <div class="grid-item">
                    <div class="grid-item-title">餐线一 机器1</div>
                    <div class="grid-item-content">
                        <div class="dish-name">糖醋里脊肉</div>
                        <div class="dish-price">¥ 30</div>
                        <div class="dish-weight">4693克</div>
                    </div>
                </div>
                <div class="grid-item">
                    <div class="grid-item-title">餐线一 机器1</div>
                    <div class="grid-item-content">
                        <div class="dish-name">糖醋里脊肉</div>
                        <div class="dish-price">¥ 30</div>
                        <div class="dish-weight">4693克</div>
                    </div>
                </div>
                <div class="grid-item">
                    <div class="grid-item-title">餐线一 机器1</div>
                    <div class="grid-item-content">
                        <div class="dish-name">糖醋里脊肉</div>
                        <div class="dish-price">¥ 30</div>
                        <div class="dish-weight">4693克</div>
                    </div>
                </div>
                <div class="grid-item">
                    <div class="grid-item-title">餐线一 机器1</div>
                    <div class="grid-item-content">
                        <div class="dish-name">糖醋里脊肉</div>
                        <div class="dish-price">¥ 30</div>
                        <div class="dish-weight">4693克</div>
                    </div>
                </div>
                <div class="grid-item">
                    <div class="grid-item-title">餐线一 机器1</div>
                    <div class="grid-item-content">
                        <div class="dish-name">糖醋里脊肉</div>
                        <div class="dish-price">¥ 30</div>
                        <div class="dish-weight">4693克</div>
                    </div>
                </div>
                <div class="grid-item">
                    <div class="grid-item-title">餐线一 机器1</div>
                    <div class="grid-item-content">
                        <div class="dish-name">糖醋里脊肉</div>
                        <div class="dish-price">¥ 30</div>
                        <div class="dish-weight">4693克</div>
                    </div>
                </div>
                <div class="grid-item">
                    <div class="grid-item-title">餐线一 机器1</div>
                    <div class="grid-item-content">
                        <div class="dish-name">糖醋里脊肉</div>
                        <div class="dish-price">¥ 30</div>
                        <div class="dish-weight">4693克</div>
                    </div>
                </div>
                <div class="grid-item">
                    <div class="grid-item-title">餐线一 机器1</div>
                    <div class="grid-item-content">
                        <div class="dish-name">糖醋里脊肉</div>
                        <div class="dish-price">¥ 30</div>
                        <div class="dish-weight">4693克</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="device-meal-line-item">
            <div class="device-meal-line-title">餐线二</div>
            <div class="grid-contaniner">
                <div class="grid-item">
                    <div class="grid-item-title">餐线一 机器1</div>
                    <div class="grid-item-content">
                        <div class="dish-name">糖醋里脊肉</div>
                        <div class="dish-price">¥ 30</div>
                        <div class="dish-weight bg-bj">93克-余量低</div>
                    </div>
                </div>
                <div class="grid-item">
                    <div class="grid-item-title bg-tj">餐线一 机器1</div>
                    <div class="grid-item-content">
                        <div class="dish-name">糖醋里脊肉</div>
                        <div class="dish-price">¥ 30</div>
                        <div class="dish-weight">4693克</div>
                    </div>
                </div>
                <div class="grid-item">
                    <div class="grid-item-title">餐线一 机器1</div>
                    <div class="grid-item-content">
                        <div class="dish-name">糖醋里脊肉</div>
                        <div class="dish-price">¥ 30</div>
                        <div class="dish-weight">4693克</div>
                    </div>
                </div>
                <div class="grid-item">
                    <div class="grid-item-title">餐线一 机器1</div>
                    <div class="grid-item-content">
                        <div class="dish-name">糖醋里脊肉</div>
                        <div class="dish-price">¥ 30</div>
                        <div class="dish-weight">4693克</div>
                    </div>
                </div>
                <div class="grid-item">
                    <div class="grid-item-title">餐线一 机器1</div>
                    <div class="grid-item-content">
                        <div class="dish-name">糖醋里脊肉</div>
                        <div class="dish-price">¥ 30</div>
                        <div class="dish-weight">4693克</div>
                    </div>
                </div>
                <div class="grid-item">
                    <div class="grid-item-title">餐线一 机器1</div>
                    <div class="grid-item-content">
                        <div class="dish-name">糖醋里脊肉</div>
                        <div class="dish-price">¥ 30</div>
                        <div class="dish-weight">4693克</div>
                    </div>
                </div>
                <div class="grid-item">
                    <div class="grid-item-title">餐线一 机器1</div>
                    <div class="grid-item-content">
                        <div class="dish-name">糖醋里脊肉</div>
                        <div class="dish-price">¥ 30</div>
                        <div class="dish-weight">4693克</div>
                    </div>
                </div>
                <div class="grid-item">
                    <div class="grid-item-title">餐线一 机器1</div>
                    <div class="grid-item-content">
                        <div class="dish-name">糖醋里脊肉</div>
                        <div class="dish-price">¥ 30</div>
                        <div class="dish-weight">4693克</div>
                    </div>
                </div>
                <div class="grid-item">
                    <div class="grid-item-title">餐线一 机器1</div>
                    <div class="grid-item-content">
                        <div class="dish-name">糖醋里脊肉</div>
                        <div class="dish-price">¥ 30</div>
                        <div class="dish-weight">4693克</div>
                    </div>
                </div>
                <div class="grid-item">
                    <div class="grid-item-title">餐线一 机器1</div>
                    <div class="grid-item-content">
                        <div class="dish-name">糖醋里脊肉</div>
                        <div class="dish-price">¥ 30</div>
                        <div class="dish-weight">4693克</div>
                    </div>
                </div>
                <div class="grid-item">
                    <div class="grid-item-title">餐线一 机器1</div>
                    <div class="grid-item-content">
                        <div class="dish-name">糖醋里脊肉</div>
                        <div class="dish-price">¥ 30</div>
                        <div class="dish-weight">4693克</div>
                    </div>
                </div>
                <div class="grid-item">
                    <div class="grid-item-title">餐线一 机器1</div>
                    <div class="grid-item-content">
                        <div class="dish-name">糖醋里脊肉</div>
                        <div class="dish-price">¥ 30</div>
                        <div class="dish-weight">4693克</div>
                    </div>
                </div>
                <div class="grid-item">
                    <div class="grid-item-title">餐线一 机器1</div>
                    <div class="grid-item-content">
                        <div class="dish-name">糖醋里脊肉</div>
                        <div class="dish-price">¥ 30</div>
                        <div class="dish-weight">4693克</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="device-meal-line-item">
            <div class="device-meal-line-title">餐线二</div>
            <div class="grid-contaniner">
                <div class="grid-item">
                    <div class="grid-item-title">餐线一 机器1</div>
                    <div class="grid-item-content">
                        <div class="dish-name">糖醋里脊肉</div>
                        <div class="dish-price">¥ 30</div>
                        <div class="dish-weight bg-bj">93克-余量低</div>
                    </div>
                </div>
                <div class="grid-item">
                    <div class="grid-item-title bg-tj">餐线一 机器1</div>
                    <div class="grid-item-content">
                        <div class="dish-name">糖醋里脊肉</div>
                        <div class="dish-price">¥ 30</div>
                        <div class="dish-weight">4693克</div>
                    </div>
                </div>
                <div class="grid-item">
                    <div class="grid-item-title">餐线一 机器1</div>
                    <div class="grid-item-content">
                        <div class="dish-name">糖醋里脊肉</div>
                        <div class="dish-price">¥ 30</div>
                        <div class="dish-weight">4693克</div>
                    </div>
                </div>
                <div class="grid-item">
                    <div class="grid-item-title">餐线一 机器1</div>
                    <div class="grid-item-content">
                        <div class="dish-name">糖醋里脊肉</div>
                        <div class="dish-price">¥ 30</div>
                        <div class="dish-weight">4693克</div>
                    </div>
                </div>
                <div class="grid-item">
                    <div class="grid-item-title">餐线一 机器1</div>
                    <div class="grid-item-content">
                        <div class="dish-name">糖醋里脊肉</div>
                        <div class="dish-price">¥ 30</div>
                        <div class="dish-weight">4693克</div>
                    </div>
                </div>
                <div class="grid-item">
                    <div class="grid-item-title">餐线一 机器1</div>
                    <div class="grid-item-content">
                        <div class="dish-name">糖醋里脊肉</div>
                        <div class="dish-price">¥ 30</div>
                        <div class="dish-weight">4693克</div>
                    </div>
                </div>
                <div class="grid-item">
                    <div class="grid-item-title">餐线一 机器1</div>
                    <div class="grid-item-content">
                        <div class="dish-name">糖醋里脊肉</div>
                        <div class="dish-price">¥ 30</div>
                        <div class="dish-weight">4693克</div>
                    </div>
                </div>
                <div class="grid-item">
                    <div class="grid-item-title">餐线一 机器1</div>
                    <div class="grid-item-content">
                        <div class="dish-name">糖醋里脊肉</div>
                        <div class="dish-price">¥ 30</div>
                        <div class="dish-weight">4693克</div>
                    </div>
                </div>
                <div class="grid-item">
                    <div class="grid-item-title">餐线一 机器1</div>
                    <div class="grid-item-content">
                        <div class="dish-name">糖醋里脊肉</div>
                        <div class="dish-price">¥ 30</div>
                        <div class="dish-weight">4693克</div>
                    </div>
                </div>
                <div class="grid-item">
                    <div class="grid-item-title">餐线一 机器1</div>
                    <div class="grid-item-content">
                        <div class="dish-name">糖醋里脊肉</div>
                        <div class="dish-price">¥ 30</div>
                        <div class="dish-weight">4693克</div>
                    </div>
                </div>
                <div class="grid-item">
                    <div class="grid-item-title">餐线一 机器1</div>
                    <div class="grid-item-content">
                        <div class="dish-name">糖醋里脊肉</div>
                        <div class="dish-price">¥ 30</div>
                        <div class="dish-weight">4693克</div>
                    </div>
                </div>
                <div class="grid-item">
                    <div class="grid-item-title">餐线一 机器1</div>
                    <div class="grid-item-content">
                        <div class="dish-name">糖醋里脊肉</div>
                        <div class="dish-price">¥ 30</div>
                        <div class="dish-weight">4693克</div>
                    </div>
                </div>
                <div class="grid-item">
                    <div class="grid-item-title">餐线一 机器1</div>
                    <div class="grid-item-content">
                        <div class="dish-name">糖醋里脊肉</div>
                        <div class="dish-price">¥ 30</div>
                        <div class="dish-weight">4693克</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</body>

</html>

=========== less 代码如下 =====

复制代码 
.device-list {

   .device-meal-line-item{
    .device-meal-line-title{
        padding-top:0.5rem;
        padding-bottom: 0.5rem;
        font-size: 20px;
        font-weight: bold;
    }

    .grid-contaniner {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        .grid-item {
            // min-width: 180px;
            min-width: 12.44%;
            height: 200px;
            border: solid 1px #DCDFE6;
            margin: -1px 0 0 -1px;
            font-size: 16px;
            

            .grid-item-title {
                min-width: 180px;
                padding-left: 5px;
                height: 50px;
                line-height: 50px;
                border-bottom: solid 1px #DCDFE6;
            }

            .grid-item-content {
                height: 150px;
                display: flex;
                flex-direction: column;

                .dish-name {
                    padding-left: 5px;
                    height: 50px;
                    line-height: 50px;
                    font-weight: bold;
                }

                .dish-price {
                    padding-left: 5px;
                    height: 50px;
                    line-height: 50px;
                }

                .dish-weight {
                    padding-left: 5px;
                    flex: 1;
                    padding-top: 13px;
                    font-weight: bold;

                }




            }

            /*  余量低 */
            .bg-bj {
                background-color: #fee7dc;
            }

            /*  脱机 */
            .bg-tj {
                background-color: #fa550c
            }
        }
    }

   }
}
相关推荐
yivifu2 分钟前
接近完美的HTML文本双行合一排版
前端·javascript·html·双行合一
fxshy3 分钟前
前端直连模型 vs 完整 MCP：大模型驱动地图的原理与实践（技术栈Vue + Cesium + Node.js + WebSocket + MCP）
前端·vue.js·node.js·cesium·mcp
鹏程十八少5 分钟前
10. Android Shadow是如何实现像tinker热修复动态修复so（源码解析）
android·前端·面试
destinying9 分钟前
性能优化之项目实战：从构建到部署的完整优化方案
前端·javascript·vue.js
我命由我1234512 分钟前
React - React Redux 数据共享、Redux DevTools、React Redux 最终优化
前端·javascript·react.js·前端框架·ecmascript·html5·js
Jinuss14 分钟前
源码分析之React中的createContext/useContext详解
前端·javascript·react.js
代码搬运媛15 分钟前
幽灵依赖终结者：pnpm 的 node_modules 结构隔离深度解析
前端
不喝水的鱼儿20 分钟前
KT Qwen3.5-35B-A3B 记录
java·前端·python
切糕师学AI31 分钟前
深入解析前端页面在 Safari 与 Chrome 浏览器中的差异及解决方案
前端·chrome·safari
fengtangjiang34 分钟前
tomcat和国产web中间件区别和联系
前端·中间件·tomcat
热门推荐
012026年3月AI领域大事件：DeepSeek引领开源风暴02GitHub 镜像站点03围棋-html版本04纯 HTML/CSS/JS 实现的高颜值登录页，还会眨眼睛！少女心爆棚！05“wsl --install -d Ubuntu-22.04”下载慢，中国地区离线安装 Ubuntu 22.04 WSL方法（亲测2025年5月6日）06Mac 本地部署 OMLX + 通义千问 Qwen3.5-27B 保姆级教程07OpenClaw 使用和管理 MCP 完全指南08安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）09Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services10UV安装并设置国内源