<!DOCTYPE html>
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<title></title>
|
<meta name="renderer" content="webkit">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
<!--引用layui样式文件-->
|
<link rel="stylesheet" href="../layuiadmin/layui/css/layui.css" media="all">
|
<link href="../layuiadmin/layui/css/global.css" rel="stylesheet" />
|
<!--引用layui js文件-->
|
<script src="../layuiadmin/layui/layui.js"></script>
|
|
<!--自定义样式-->
|
<style>
|
.layui-tab-card > .layui-tab-title {
|
background-color: #ffffff;
|
}
|
.layui-badge-rim, .layui-border, .layui-colla-content, .layui-colla-item, .layui-collapse, .layui-elem-field, .layui-form-pane .layui-form-item[pane], .layui-form-pane .layui-form-label, .layui-input, .layui-layedit, .layui-layedit-tool, .layui-panel, .layui-quote-nm, .layui-select, .layui-tab-bar, .layui-tab-card, .layui-tab-title, .layui-tab-title .layui-this:after, .layui-textarea {
|
border-color: #eee;
|
}
|
.layui-content {
|
height:450px;
|
}
|
.cnt {
|
border: 1px solid #5FB878;
|
height: 100px;
|
border-radius:5px;
|
}
|
</style>
|
</head>
|
|
<body>
|
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
|
<!--[if lt IE 9]>
|
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
|
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
|
<![endif]-->
|
|
<div style="margin: 0 20px;">
|
<!--<blockquote class="layui-elem-quote">注意：下述演示中的颜色只是做一个区分作用，并非栅格内置。</blockquote>-->
|
<div class="layui-row layui-col-space10">
|
<div class="layui-col-sm12 layui-col-md8">
|
<fieldset style="border: 1px solid #eee;box-shadow: 0 2px 5px 0 rgb(0 0 0 / 10%);">
|
<legend style="color: #5FB878">生产资源</legend>
|
<div class="layui-content">
|
<div class="layui-row layui-col-space10">
|
<div class="layui-col-sm12 layui-col-md3">
|
<div class="cnt">
|
|
</div>
|
</div>
|
<div class="layui-col-sm12 layui-col-md3">
|
<div class="cnt">
|
|
</div>
|
</div>
|
<div class="layui-col-sm12 layui-col-md3">
|
<div class="cnt">
|
|
</div>
|
</div>
|
<div class="layui-col-sm12 layui-col-md3">
|
<div class="cnt">
|
|
</div>
|
</div>
|
</div>
|
</div>
|
</fieldset>
|
</div>
|
<div class="layui-col-sm12 layui-col-md4">
|
<fieldset style="border: 1px solid #eee;box-shadow: 0 2px 5px 0 rgb(0 0 0 / 10%);">
|
<legend style="color: #5FB878">当前状态</legend>
|
<div class="layui-content">
|
|
</div>
|
</fieldset>
|
</div>
|
</div>
|
<div class="layui-row layui-col-space10">
|
<div class="layui-col-sm12 layui-col-md8">
|
<div class="layui-tab layui-tab-card">
|
<ul class="layui-tab-title">
|
<li class="layui-this">工单列表</li>
|
<li>效率分析</li>
|
<li>不良分析</li>
|
<li>SOP</li>
|
</ul>
|
<div class="layui-tab-content" style="height: 400px;">
|
<div class="layui-tab-item layui-show">1</div>
|
<div class="layui-tab-item">2</div>
|
<div class="layui-tab-item">3</div>
|
<div class="layui-tab-item">4</div>
|
<div class="layui-tab-item">5</div>
|
<div class="layui-tab-item">6</div>
|
</div>
|
</div>
|
</div>
|
<div class="layui-col-sm12 layui-col-md4">
|
<fieldset style="border: 1px solid #eee;box-shadow: 0 2px 5px 0 rgb(0 0 0 / 10%);">
|
<legend style="color: #5FB878">操作台</legend>
|
<div class="layui-content">
|
|
</div>
|
</fieldset>
|
</div>
|
</div>
|
</div>
|
<script>
|
//注意：选项卡 依赖 element 模块，否则无法进行功能性操作
|
layui.use('element', function () {
|
var element = layui.element;
|
});
|
</script>
|
</body>
|
</html>
|
