首页编写-jsk
This commit is contained in:
skjia
parent
d04cdea89d
commit
9bdd98f2a9
|
|
@ -0,0 +1,122 @@
|
|||
.container{
|
||||
/*display: flex;*/
|
||||
/*flex-direction: column; !*用于设置一个弹性盒子的主轴方向*!*/
|
||||
height: 95vh;
|
||||
}
|
||||
.one{
|
||||
height: 4%;
|
||||
width: 100%;
|
||||
}
|
||||
.one span{
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
}
|
||||
.two{
|
||||
height: 40%;
|
||||
width: 100%;
|
||||
}
|
||||
.two table{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-collapse: separate;
|
||||
border-spacing: 20px; /* 设置边框间距为10px */
|
||||
}
|
||||
.two table td .daiban{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
.two table td .daiban div:nth-child(1){
|
||||
margin-left: 2%;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.two table td .daiban div:nth-child(2){
|
||||
margin-left: 2%;
|
||||
color: #0000FF;
|
||||
font-size: 18px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.two table td .daiban div:nth-child(3){
|
||||
margin-left: 2%;
|
||||
color: #E3E3E3;
|
||||
font-size: 18px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.three{
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
}
|
||||
.three-one{
|
||||
float: left;
|
||||
width: 70%;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.three-two{
|
||||
float: left;
|
||||
width: 26%;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
margin-left: 1%;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.three-one div:nth-child(1){
|
||||
margin-top: 1%;
|
||||
margin-left: 2%;
|
||||
height: 10%;
|
||||
}
|
||||
.three-one div:nth-child(2){
|
||||
height: 90%;
|
||||
}
|
||||
.three-one span{
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
}
|
||||
.three-two span{
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
}
|
||||
.three-one button:nth-child(2){
|
||||
float: right;
|
||||
}
|
||||
.three-one button:nth-child(3){
|
||||
float: right;
|
||||
}
|
||||
.three-two div:nth-child(1){
|
||||
margin-top: 2%;
|
||||
margin-left: 2%;
|
||||
height: 10%;
|
||||
}
|
||||
.three-two div:nth-child(2){
|
||||
width: 100%;
|
||||
height: 90%;
|
||||
}
|
||||
.four{
|
||||
height: 60%;
|
||||
width: 97.5%;
|
||||
margin-top: 1%;
|
||||
}
|
||||
.four-one{
|
||||
width: 100%;
|
||||
height: 10%;
|
||||
background-color: #fff;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.four-two{
|
||||
width: 100%;
|
||||
height: 90%;
|
||||
background-color: #fff;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.four-one div{
|
||||
height: 58%;
|
||||
margin-left: 2%;
|
||||
padding-top: 1%;
|
||||
}
|
||||
.four-one span{
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
var form,layer,table,carousel,util;
|
||||
layui.use(['form', 'layer', 'table', 'laydate','carousel','util'], function () {
|
||||
form = layui.form;
|
||||
layer = layui.layer;
|
||||
table = layui.table;
|
||||
carousel = layui.carousel;
|
||||
util=layui.util;
|
||||
console.log("测试")
|
||||
echartsone();
|
||||
echartstwo();
|
||||
iniTable();
|
||||
// layui-table-body
|
||||
})
|
||||
var data=[{"numbers":1,"username":"测试","fee":"测试","dingdan":"测试","name":"测试","phone":"测试","gettime":"测试"}
|
||||
,{"numbers":2,"username":"测试","fee":"测试","dingdan":"测试","name":"测试","phone":"测试","gettime":"测试"}
|
||||
,{"numbers":3,"username":"测试","fee":"测试","dingdan":"测试","name":"测试","phone":"测试","gettime":"测试"}
|
||||
,{"numbers":4,"username":"测试","fee":"测试","dingdan":"测试","name":"测试","phone":"测试","gettime":"测试"}
|
||||
,{"numbers":5,"username":"测试","fee":"测试","dingdan":"测试","name":"测试","phone":"测试","gettime":"测试"}
|
||||
,{"numbers":6,"username":"测试","fee":"测试","dingdan":"测试","name":"测试","phone":"测试","gettime":"测试"}
|
||||
,{"numbers":7,"username":"测试","fee":"测试","dingdan":"测试","name":"测试","phone":"测试","gettime":"测试"}
|
||||
,{"numbers":8,"username":"测试","fee":"测试","dingdan":"测试","name":"测试","phone":"测试","gettime":"测试"}
|
||||
,{"numbers":9,"username":"测试","fee":"测试","dingdan":"测试","name":"测试","phone":"测试","gettime":"测试"}
|
||||
,{"numbers":10,"username":"测试","fee":"测试","dingdan":"测试","name":"测试","phone":"测试","gettime":"测试"}
|
||||
,{"numbers":11,"username":"测试","fee":"测试","dingdan":"测试","name":"测试","phone":"测试","gettime":"测试"}
|
||||
,{"numbers":12,"username":"测试","fee":"测试","dingdan":"测试","name":"测试","phone":"测试","gettime":"测试"}
|
||||
,{"numbers":13,"username":"测试","fee":"测试","dingdan":"测试","name":"测试","phone":"测试","gettime":"测试"}
|
||||
]
|
||||
function iniTable(){
|
||||
table.render({
|
||||
elem: '#table-box',
|
||||
data:data,
|
||||
cols: [[
|
||||
{type: 'numbers', title: '排名', width: '10%',align:"center"}//序号列
|
||||
,{field: 'username', title: '用户名称', width: '20%',align:"center"}
|
||||
,{field: 'fee', title: '总金额(元)', width: '15%',align:"center"}
|
||||
,{field: 'dingdan', title: '订单量', width: '12%',align:"center"}
|
||||
,{field: 'name', title: '联系人', width: '12%',align:"center"}
|
||||
,{field: 'phone', title: '联系电话', width: '15%',align:"center"}
|
||||
,{field: 'gettime', title: '最近合作时间', width: '15%',align:"center"}
|
||||
]]
|
||||
});
|
||||
}
|
||||
function echartsone(){
|
||||
var myChart = echarts.init(document.getElementById('echartsone'));
|
||||
option = {
|
||||
title: {
|
||||
text: ''
|
||||
},
|
||||
legend: {},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
formatter: '{value}'
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '实验一班',
|
||||
type: 'line',
|
||||
data: [10, 11, 13, 11, 12, 12, 9],
|
||||
|
||||
},
|
||||
{
|
||||
name: '实验二班',
|
||||
type: 'line',
|
||||
data: [1, 2, 2, 5, 3, 2, 4],
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
}
|
||||
function echartstwo(){
|
||||
var myChart = echarts.init(document.getElementById('echartstwo'));
|
||||
option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
// legend: {
|
||||
// orient: 'vertical',
|
||||
// left: 'right'
|
||||
// },
|
||||
legend: {},
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
data: [
|
||||
{ value: 1048, name: '试验一班' },
|
||||
{ value: 735, name: '试验二班' }
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.3)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
myChart.setOption(option);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,90 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>首页</title>
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="../../js/layui-v2.6.8/css/layui.css">
|
||||
<link rel="stylesheet" type="text/css" media="screen" href="../../css/home/home.css">
|
||||
</head>
|
||||
<body style="width: 99% !important;">
|
||||
<div class="container">
|
||||
<div class="one"><span>待办任务统计</span></div>
|
||||
<div class="two">
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="daiban">
|
||||
<div><span>待派工</span></div>
|
||||
<div><span>24</span></div>
|
||||
<div><span>更新至</span><span>2024-07-18</span></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="daiban">
|
||||
<div><span>待派工</span></div>
|
||||
<div><span>24</span></div>
|
||||
<div><span>更新至</span><span>2024-07-18</span></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="daiban">
|
||||
<div><span>待派工</span></div>
|
||||
<div><span>24</span></div>
|
||||
<div><span>更新至</span><span>2024-07-18</span></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="daiban">
|
||||
<div><span>待派工</span></div>
|
||||
<div><span>24</span></div>
|
||||
<div><span>更新至</span><span>2024-07-18</span></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="daiban">
|
||||
<div><span>待派工</span></div>
|
||||
<div><span>24</span></div>
|
||||
<div><span>更新至</span><span>2024-07-18</span></div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="daiban">
|
||||
<div><span>待派工</span></div>
|
||||
<div><span>24</span></div>
|
||||
<div><span>更新至</span><span>2024-07-18</span></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div class="three">
|
||||
<div class="three-one">
|
||||
<div><span>班组工作情况统计(试验数)</span><button>近15天</button><button>本周</button></div>
|
||||
<div id="echartsone"></div>
|
||||
</div>
|
||||
<div class="three-two">
|
||||
<div><span>费用统计</span></div>
|
||||
<div id="echartstwo"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="four">
|
||||
<div class="four-one">
|
||||
<div><span>大客户信息</span></div>
|
||||
</div>
|
||||
<div class="four-two">
|
||||
<table id="table-box"></table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
<script type="text/javascript" src="../../js/libs/jquery-2.1.1.min.js"></script>
|
||||
<!--<script type="text/javascript" src="../../../js/jq.js"></script>-->
|
||||
<!--<script type="text/javascript" src="../../../js/my/permission.js"></script>-->
|
||||
<script type="text/javascript" src="../../js/layui-v2.6.8/layui.js"></script>
|
||||
<!--<script type="text/javascript" src="../../../js/publicJs.js"></script>-->
|
||||
<script type="text/javascript" src="../../js/libs/echarts.js"></script>
|
||||
<script type="text/javascript" src="../../js/home/home.js"></script>
|
||||
|
||||
Loading…
Reference in New Issue