HomePage
772 电力
772 电力
772 电力
772 电力
772 电力
772 电力
772 电力
html,
body {
height: 100%;
}
.wrapper {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.top {
width: 100%;
height: 50px;
overflow: hidden;
box-sizing: border-box;
}
.top-left {
float: left;
background: rgb(50, 135, 255);
width: 228px;
height: 50px;
}
.top-left p {
font-size: 24px;
color: #fff;
line-height: 50px;
text-align: center;
}
.top-right {
margin-left: 228px;
height: 50px;
border-bottom: 1px solid #bbb;
}
.daily {
margin-left: 70px;
display: inline-block;
line-height: 50px;
font-size: 16px;
font-weight: 600;
}
.nav {
position: absolute;
right: 30px;
top: 0;
display: inline-block;
height: 50px;
}
.nav li {
display: inline-block;
list-style: none;
line-height: 50px;
margin-right: 10px;
}
.nav li a {
display: inline-block;
list-style: none;
text-decoration: none;
}
.ellipsis {
display: inline-block;
line-height: 50px;
font-size: 20px;
font-weight: 600;
text-align: center;
}
.content {
width: 100%;
height: 100%;
}
.content .content-left {
float: left;
width: 228px;
height: 100%;
background: rgb(33, 77, 150);
}
.content .content-left .img-box {
width: 100%;
height: 80px;
margin: 30px 0 10px;
}
.content .content-left .img-box img {
width: 80px;
height: 80px;
margin-left: 74px;
border-radius: 50%;
}
.content-left .name {
width: 100%;
text-align: center;
color: rgb(141, 168, 212);
}
.content-left .information {
width: 100%;
margin-top: 30px;
}
.information .down {
position: absolute;
top: 18px;
right: 15px;
display: inline-block;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid rgb(141, 168, 212);
}
.content-left .information li {
display: block;
position: relative;
box-sizing: border-box;
width: 100%;
list-style: none;
padding: 10px 25px;
}
.content-left .information .authority {
/* position: absolute;
top: 30px;
left: 10px; */
display: none;
overflow: hidden;
}
.content-left .information li a {
display: block;
text-decoration: none;
color: rgb(141, 168, 212);
}
.information li:hover .authority {
display: block;
}
.content-left .information .a:hover {
background: rgb(23, 56, 109);
border-left: 2px solid rgb(50, 135, 255);
width: 100%;
}
.content .main-part {
margin-left: 228px;
height: 100%;
background: rgb(234, 240, 240);
}
.main-part .all-type {
box-sizing: border-box;
width: 100%;
background: #fbfcfc;
border-top: 1px solid #e4e8eb;
}
.main-part .all-type .all {
padding-left: 70px;
border-bottom: 1px dotted #e4e4e4;
}
.main-part .all-type .all div {
width: 13.9%;
padding: 22px 0;
display: inline-block;
}
.main-part .all-type .all div p {
margin-top: 16px;
font-size: 12px;
color: #333;
}
.main-part .all-type .all div p strong {
margin-right: 2px;
font-size: 24px;
font-weight: 500;
}
.main-part .all-type .alarm {
position: relative;
width: 100%;
height: 48px;
}
.all-type .alarm .all-alarm {
margin-left: 42px;
line-height: 48px;
}
.all-type .alarm .all-alarm .img-box {
margin-left: 50px;
}
.alarm .all-alarm .img-box span {
margin-right: 50px;
}
.alarm .all-alarm .img-box span i {
font-style: normal;
font-size: 14px;
color: #333;
}
.all-type .alarm .shield {
position: absolute;
right: 42px;
top: 16px;
}
.all-type .alarm .shield p {
font-size: 14px;
color: #333;
}
.all-type .alarm .shield p i {
font-style: normal;
font-size: 14px;
color: #de0000;
}
/* 选项卡 */
.tab-wrap {
height: 140px;
}
.layui-tab-title {
margin-left: 10px;
border-bottom: 2px solid #dedede;
}
.layui-tab-title li {
width: 157px;
/* height: 78px; */
margin-right: 26px;
font-size: 16px;
color: #000;
}
.layui-tab-title {
color: #3285ff;
}
.layui-tab-content .layui-tab-item .ayui-tab-title .this {
border-bottom: none;
}
.layui-tab-content {
padding: 0 15px;
}
.layui-tab-item .layui-tab .title {
border-bottom: 0;
margin-left: 10px;
}
.layui-tab .title li {
width: 80px;
/* height: 78px; */
font-size: 14px;
color: #333;
}
.layui-tab .title .layui-this {
color: #3285ff;
}
/* 表格 */
table {
width: 100%;
margin-left: 15px;
border: 1px solid #ddd;
border-collapse: collapse;
text-align: center;
}
.head {
background: rgb(62,179,111);
color: #fff;
}
td {
height: 40px;
border: 1px solid #ddd;
}
input {
width: 100px;
border: 1px solid #ddd;
outline: none;
padding: 6px;
border-radius: 4px;
display: none;
}
.btn {
border: none;
outline: none;
cursor: pointer;
padding: 2px 5px;
background: none;
border-radius: 4px;
}
.que_change {
display: none;
background: #9e9e9e;
}
.del_change {
background: #FF6428;
}
.btn-add {
background: green;
width: 200px;
}
layui.use('element', function () {
var element = layui.element;
});
// $.ajax({
// type: "get",
// url: "./data.json",
// dataType:"json",
// success: function(res) {
// var str = ""
// for(var i = 0; i < res.length; i++) {
// str += '' + res[i].time + ' ' + res[i].equipment + ' ' + res[i].isTest + '' + res[i].alarm +'' + res[i].state +' 修改 确定 删除 '
// }
// $("tbody").append(str)
// }
// })
// 修改
var arrInfo = []
$(document).on("click", ".change", function() {
arrInfo = []
$(this).hide()
$(this).siblings(".que_change").show()
$(this).parent().siblings().find("span").each(function() {
arrInfo.push($(this).text())
})
$(this).parent().siblings().find("input").each(function(i) {
$(this).val(arrInfo[i])
})
$(this).parent().siblings().find("span").hide()
$(this).parent().siblings().find("input").show()
})
// 确定
var arrList = []
$(document).on("click", ".que_change", function() {
arrList = []
$(this).hide()
$(this).siblings(".change").show()
$(this).parent().siblings().find("input").each(function() {
arrList.push($(this).val())
})
$(this).parent().siblings().find("span").each(function(i) {
$(this).text(arrList[i])
})
$(this).parent().siblings().find("span").show()
$(this).parent().siblings().find("input").hide()
})
// 增加
$(".btn-add").click(function() {
var str = '修改 确定 删除 '
$("tbody").append(str)
$(this).parents("tr").prev().find(".que_change").text("确定")
$(this).parents("tr").prev().find(".re_name").show().siblings().hide()
$(this).parents("tr").prev().find(".re_age").show().siblings().hide()
$(this).parents("tr").prev().find(".re_score").show().siblings().hide()
})
//删除
$(function() {
$(document).on("click", ".del_change", function() {
$(this).parents("tr").remove()
})
})
//分页
layui.use('laypage', function(){
var laypage = layui.laypage;
//执行一个laypage实例
laypage.render({
elem: 'test1' //注意,这里的 test1 是 ID,不用加 # 号
,count: 50 //数据总数,从服务端得到
});
});