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

   }
}
相关推荐
Hinton_6 分钟前
实用的网站
css·ai
都适、隶仁ミ19 分钟前
常见漏洞之XSS
运维·服务器·开发语言·前端·javascript·安全·xss
小白探索世界欧耶！~25 分钟前
使用patch-package自动修改node_modules中的内容/打补丁
前端·经验分享·笔记
工头阿乐43 分钟前
Python游戏脚本开发之大漠插件
前端·python·游戏
小小20171 小时前
【前端】HTML+CSS复习记录【5】
前端·css·html
小小20171 小时前
【前端】HTML+CSS复习记录【3】
前端·css·html
不爱敲代码的南兮1 小时前
Echarts热力图关闭初始化时动画效果（由左至右渐进加载动画)
前端·javascript·echarts
karshey1 小时前
【前端】上传和下载zip文件，有进度条（el-progess）
前端
F2E_Zhangmo2 小时前
vue长列表，虚拟滚动
前端·javascript·vue.js
睿智的海鸥2 小时前
html+css+js气泡弹窗
javascript·css·html
热门推荐
01Coze扣子平台完整体验和实践（附国内和国际版对比）02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）03【经验分享】Ubuntu22.04安装微信(linux官方版)04yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）052025张宇考研数学，百度网盘视频课+36讲PDF讲义+真题06【立创EDA-PCB设计基础】6.布线铺铜实战及细节详解0751-2 万字长文，深度解读端到端自动驾驶的挑战和前沿08通达信神奇九转指标原理及选股公式，无未来函数，数字不消失09浏览器插件——ModHeader 的分享和学习10＜工控＞＜PLC＞汇川Easy521系列PLC与汇川SV630N伺服进行EtherCat通讯的相关配置及指令编写