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
            }
        }
    }

   }
}
相关推荐
右子12 分钟前
微信小程序开发“闭坑”指南
前端·javascript·微信小程序
入秋25 分钟前
Three.js后期处理实战：噪点 景深 以及色彩调整
前端·javascript·three.js
Asort29 分钟前
JavaScript设计模式(七)——桥接模式：解耦抽象与实现的优雅之道
前端·javascript·设计模式
golang学习记31 分钟前
从0死磕全栈之Next.js 应用中的认证与授权：从零实现安全用户系统
前端
苏打水com37 分钟前
携程前端业务：在线旅游生态下的「复杂行程交互」与「高并发预订」实践
前端·状态模式·旅游
Darenm11139 分钟前
深入理解CSS BFC：块级格式化上下文
前端·css
Darenm1111 小时前
JavaScript事件流：冒泡与捕获的深度解析
开发语言·前端·javascript
@大迁世界1 小时前
第03章： Vue 3 组合式函数深度指南
前端·javascript·vue.js·前端框架·ecmascript
小白64021 小时前
前端梳理体系从常问问题去完善-框架篇（react生态）
前端·css·html·reactjs
Hy行者勇哥1 小时前
数据中台的数据源与数据处理流程
大数据·前端·人工智能·学习·个人开发
热门推荐
01两千字总结：Codex 国内如何安装和使用的教程，以及如何设置中文回答02GitHub 镜像站点03KGG转MP3工具|非KGM文件|解密音频04UV安装并设置国内源05Linux下V2Ray安装配置指南06jdk21下载、安装（Windows、Linux、macOS）07BongoCat - 跨平台键盘猫动画工具08PHP htmlspecialchars()函数详解09Claude Code & 智谱GLM-4.5 环境配置指南 (Windows/macOS/Ubuntu)1046个Nano-banana 精选提示词，持续更新中