body{background: #f2f2f6;}
.radius{ border-radius:16px; }
.page-content{ padding:3.5%;  }
.data{ display:grid; grid-template-columns: 5fr 3fr 3fr 3fr; grid-gap:16px;margin-bottom: 16px;}
.data .item{ background:#fff; padding: 20px; border-radius: 16px;}
.data .item .title{font-size: 16px; font-weight: 500; padding-bottom: 10px; margin-bottom: 0px; border-bottom: #ececec solid 1px;}
.data .item .content ul.three{ display:grid; grid-template-columns: repeat(3, 1fr); }
.data .item .content ul.two{ display:grid; grid-template-columns: repeat(2, 1fr); }
.data .item .content ul li h3{ font-weight:normal; }
.data .item .content ul li{ line-height:1.6; font-size:14px;}
.data .item .content ul li:nth-child(1) strong{ color:#596ec2; font-size:48px; font-family: 'Barlow';}
.data .item .content ul li:nth-child(2) strong{ color:#ec6c6a; font-size:48px; font-family: 'Barlow';}
.data .item .content ul li:nth-child(3) strong{ color:#8fcb7a; font-size:48px; font-family: 'Barlow';}
.chart{ display:grid; grid-template-columns: repeat(4, 1fr); grid-gap:16px;}
.chart .item{ background:#fff; padding: 20px; border-radius: 16px;}
.chart .item .title{font-size: 16; font-weight: 500; padding-bottom: 10px; margin-bottom:0px; border-bottom: #ececec solid 1px;}
.chart .item .content{ height: 300px;}
.search{padding: 20px; margin-bottom:16px;  background:#fff; }
.search .title{font-size: 16px; font-weight: 500; padding-bottom: 10px; }
.search .title{ display:flex; justify-content:space-between; }
.search .layui-form{ padding-top:24px; border-top: #ececec solid 1px;}

.bottom-but{padding: 24px;  background: #fff; text-align: center;}

.list{padding: 24px;  background: #fff;  }
.list .title{font-size: 16px; font-weight: 500; padding-bottom: 10px; margin-bottom: 10px; border-bottom: #ececec solid 1px; display:flex; justify-content:space-between; align-items:center; }
.list .table{ overflow-x:auto; }
.list .table .ul10{ width: 100%; min-width: 1800px; display: grid;  grid-template-columns:2.0fr 2.3fr 1.2fr 1.7fr 1.2fr 1.2fr 1.5fr 1.2fr 0.8fr 1.4fr 1.6fr 1.1fr 1fr 260px; align-items:center; grid-gap:24px; }

.list .table .ul10 li.button{ display:flex; flex-wrap:wrap; gap:6px 8px; overflow:visible; -webkit-line-clamp:initial; -webkit-box-orient:initial; }



.list .table .ul6{ width: 100%; display: grid; grid-template-columns:5fr 2fr 3fr 1fr 2fr 1.5fr; align-items:center; grid-gap:24px; }
.list .table .thead{ padding-bottom:12px; }
.list .table .thead ul li{ color:#666; font-size:14px; line-height:1.4; overflow:visible; white-space:normal; word-break:break-word; }
.list .table .tbody {border-bottom: #ececec solid 1px;}
.list .table .tbody .item ul{ border-top:#ececec solid 1px; }
.list .table .tbody .item ul li{margin-top:8px; margin-bottom:8px;  color:#111; font-size:14px;line-height:1.4; overflow:visible; white-space:normal; word-break:break-word; }
.list .table .tbody .item ul li span{ display:none; }
.list .table .tbody .item ul:hover{ background:#f4f5f6 }
.list .layui-laypage{ padding-top:16px; }
.list .table .ul6 li a{ color:#01aaed }
.list .table .ul6 li a:hover{  text-decoration: underline;}

.main{padding: 20px;  background: #fff;}
.main .title{font-size: 16px; font-weight: 500; padding-bottom: 10px; margin-bottom: 10px; border-bottom: #ececec solid 1px;}
.main .layui-form-item .close a{ color:#ff5722; font-size:18px; }
.main .layui-form-item .layui-input-group{ margin-bottom:12px; }
.page-content .layui-form{  }


.state-main{ display:grid; grid-template-columns:6fr 4fr; background: #fff;border-bottom: #ececec solid 1px; }

.form_tb{}
.form_tb .layui-form-label{ float:none; text-align:left; padding-left:0; width: auto; padding-right:0; font-size:14px;color:#999 }
.form_tb .layui-input-block{ margin-left: 0;}
 
.state-main-form{background: #fff}


.form{padding: 20px;border-right: #ececec solid 1px;}
.form .title{font-size: 16px; font-weight: 500; padding-bottom: 10px; margin-bottom: 10px;border-bottom: #ececec solid 1px;  }
.state{padding: 20px; }
.state .title{font-size: 16px; font-weight: 500; padding-bottom: 10px; margin-bottom: 10px; border-bottom: #ececec solid 1px;}
.state .content .item{ margin-bottom:24px; border-bottom:#ececec solid 1px; padding-bottom:24px; }
.state .content .item .state-head{ display:flex; justify-content:left; align-items:center; grid-gap:24px; margin-bottom:12px; }
.state .content .item .state_body{ display:grid; grid-template-columns:60px auto; grid-gap:24px; }
.state .content .item .state_body .state_user{ text-align:center; }
.state .content .item .state_body .state_user .photo{ width:60px; height:60px; border-radius:50px; overflow:hidden;border:#ececec solid 1px; }
.state .content .item .state_body .state_user .photo img{ width:100%; height:100%; object-fit:cover; }
.state .content .item .state_body .state_user .name{ padding-top:6px; }
.state .content .item .state_body .state_content .message{ background:#f6f8f9; padding:12px; border-radius:6px; margin-bottom:12px; }
.state .content .item:last-child{ border-bottom:none; padding-bottom:0; margin-bottom:0 }
.state-main .layui-text ul{ padding-left:0; }
.state-main .layui-text ul li{list-style: none; margin-top: 0;} 
.state-main .layui-text ul li a{ display: grid; grid-template-columns:16px auto; align-items:center; }
.state-main .layui-text ul li span{display: -webkit-box;  -webkit-line-clamp:1;  -webkit-box-orient: vertical; overflow: hidden; }
.state-main .layui-text ul li a:hover { text-decoration:none; }


.state-main .form .state-box{ background:#f6f8f9; padding:12px 0; padding-right: 24px; border-radius:6px; margin-bottom:24px; }
.state-main .form .state-box .state_user{ display:flex; justify-content:left; grid-gap:12px; align-items:center; }
.state-main .form .state-box .state_user .photo{ width:38px; height:38px; border-radius:50px; overflow:hidden;border:#ececec solid 1px; }
.state-main .form .state-box .state_user .photo img{ width:100%; height:100%; object-fit:cover; }
.state-main .form .state-box .state_user .name{ padding-top:6px;  }
.form-edit{padding: 24px;border-right: #ececec solid 1px;}
.form-edit .title{font-size: 16px; font-weight: 500; padding-bottom: 10px; margin-bottom: 10px; border-bottom: #ececec solid 1px;}


.footer_menu{ padding: 5px; border-radius: 30px;-webkit-backdrop-filter:blur(5px); backdrop-filter: blur(5px); display: grid;grid-template-columns: repeat(3, 1fr); background: rgba(0, 0, 0, 0.4); position: fixed; z-index: 2; bottom:20px; left:50%; transform:translateX(-50%); }
.footer_menu a{ display:block; border-radius:30px; height:32px; width:100px; text-align:center; line-height:32px; color:#fff; } 
.footer_menu a.active{ background:rgba(255, 255, 255, 0.9); color:#333; }

.state-main—nostate{ display:grid;  background: #fff;}
.state-main—nostate .form { border-right:none }

.state-main—nostate .content{ width:50%; }



.state-box-detail .item{ display:grid; grid-template-columns:100px auto; grid-gap:6px; padding-top: 12px; padding-bottom: 12px;}
.state-box-detail .item .item-label{ text-align:right; }

.state-box-detail .item .item-content .state_user{ display:flex; justify-content:left; grid-gap:12px; align-items:center; }
.state-box-detail .item .item-content .state_user .photo{ width:60px; height:60px; border-radius:50px; overflow:hidden;border:#ececec solid 1px; }
.state-box-detail .item .item-content .state_user .photo img{ width:100%; height:100%; object-fit:cover; }
.state-box-detail .item .item-content .state_user .name{ padding-top:6px; }

.layui-table{ margin-top: 0!important;} 





@media screen and (max-width: 480px) {
.page-content{ padding:12px; }
.radius{ border-radius:8px;}

.layui-laypage{  text-align:center; display:block!important; }
.layui-laypage .layui-laypage-skip{ display:none;  }
.layui-laypage .layui-laypage-count{ display:none;  }
.layui-laypage .layui-laypage-limits{ display:none;  }


.layui-form-item{ margin-bottom:10px!important; }
.layui-form-label{ padding-left:0!important; text-align:left!important; float:none!important; }
.layui-input-group{ display:flex!important; justify-content:left!important; }
.layui-form-item .layui-input-inline{margin-left:0!important;}
.layui-form-item .layui-inline{ margin-bottom:12px!important }
.layui-form-item .layui-input-inline+.layui-form-mid{margin-left:0!important;margin-bottom:0!important; height: 38px!important; line-height: 38px!important; float: none!important;padding: 0!important; padding-left: 10px!important; display: inline!important; top: 0!important}
.layui-input-block{ margin-left:0!important; left:0px!important; }
.layui-laydate-range{ width:auto!important }
.layui-laydate-range .layui-laydate-main{ max-width:100%!important; display:block!important; }
.layui-table colgroup{ display:none; }
.data{ display:grid; grid-template-columns: repeat(1, 1fr); grid-gap:12px;margin-bottom: 12px;}
.data .item{ background:#fff; padding: 20px;}
.data .item .title{font-size: 16px; font-weight: 500; padding-bottom: 10px; margin-bottom: 10px; border-bottom: #ececec solid 1px;}
.data .item .content ul.three{ display:grid; grid-template-columns: repeat(3, 1fr); }
.data .item .content ul.two{ display:grid; grid-template-columns: repeat(2, 1fr); }
.data .item .content ul li h3{ font-weight:normal; }
.data .item .content ul li{ line-height:1.6; font-size:14px;}
.data .item .content ul li:nth-child(1) strong{ color:#596ec2; font-size:28px; font-family: 'Barlow';}
.data .item .content ul li:nth-child(2) strong{ color:#ec6c6a; font-size:28px; font-family: 'Barlow';}
.data .item .content ul li:nth-child(3) strong{ color:#8fcb7a; font-size:28px; font-family: 'Barlow';}
.chart{ display:grid; grid-template-columns: repeat(1, 1fr); grid-gap:12px;}
.chart .item{ background:#fff; padding: 24px;}
.chart .item .title{font-size: 16px; font-weight: 500; padding-bottom: 10px; margin-bottom: 10px; border-bottom: #ececec solid 1px;}
.chart .item .content{ height:300px;}
.search{padding: 16px;  background: #fff; margin-bottom: 16px;}
.search .title{font-size: 16px; font-weight: 500; padding-bottom: 10px;}
.search .layui-form{ padding-top:16px; border-top: #ececec solid 1px; }
.search .layui-form .layui-input-inline{ left:0; }

.bottom-but{padding: 24px;  background: #fff; text-align: center; }

.list{padding: 16px;  background: #fff;}
.list .title{font-size: 16px; font-weight: 500; padding-bottom: 10px; margin-bottom: 10px; border-bottom: #ececec solid 1px; display:flex; justify-content:space-between; align-items:center; }
.list .table .ul10{ width: 100%; display: block; grid-template-columns:1.4fr 3fr 1.2fr 2fr 1fr 1.2fr 2fr 1fr 1.2fr 2fr; align-items:center; grid-gap:24px; }
.list .table .ul10 li{ position:relative; }
.list .table .ul10 li::before{ color: #999; position: absolute;left: 0px; top: 0px; font-size: 12px;}
.list .table .ul10 li:nth-child(1)::before{content: "审批编号：";}
.list .table .ul10 li:nth-child(2)::before{content: "项目名称："}
.list .table .ul10 li:nth-child(3)::before{content: "合计平米数："}
.list .table .ul10 li:nth-child(4)::before{content: "发起人："}
.list .table .ul10 li:nth-child(5)::before{content: "发起时间："}
.list .table .ul10 li:nth-child(6)::before{content: "完工时间："}
.list .table .ul10 li:nth-child(7)::before{content: "状态："}
.list .table .ul10 li:nth-child(8)::before{content: "项目完结状态："}
.list .table .ul10 li:nth-child(9)::before{content: "管理费："}
.list .table .ul10 li:nth-child(10)::before{content: "合同提单数量占比："}
.list .table .ul10 li:nth-child(11)::before{content: "合同金额比："}
.list .table .ul10 li:nth-child(12)::before{content: "是否签合同："}
.list .table .ul10 li:nth-child(13)::before{content: "操作："}
.list .table .ul10 li{ padding-top:20px; }
.list .table .ul10 li.number{word-break: break-all;    /* 强制任何字符都换行 */
  white-space: normal;      /* 允许自动换行 */
  overflow-wrap: break-word;/* 兼容备用 */}


.list .table .ul6{ width: 100%; display: block; grid-template-columns:2fr 2fr 3fr 2fr 2fr 2fr; align-items:center; grid-gap:24px; }
.list .table .ul6 li{ position:relative; }
.list .table .ul6 li::before{ color: #999; position: absolute;left: 0px; top: 0px; font-size: 12px;}
.list .table .ul6 li:nth-child(1)::before{content: "提料单编号：";}
.list .table .ul6 li:nth-child(2)::before{content: "审批编号："}
.list .table .ul6 li:nth-child(3)::before{content: "项目名称："}
.list .table .ul6 li:nth-child(4)::before{content: "发起人："}
.list .table .ul6 li:nth-child(5)::before{content: "发起时间："}  
.list .table .ul6 li{ padding-top:20px; }
.list .table .ul6 li.number{word-break: break-all;    /* 强制任何字符都换行 */
  white-space: normal;      /* 允许自动换行 */
  overflow-wrap: break-word;/* 兼容备用 */}


.list .table .thead{ padding-bottom:12px; display:none; }
.list .table .thead ul li{ color:#666; font-size:14px; line-height:1.4; overflow:visible; white-space:normal; word-break:break-word; }
.list .table .tbody {border-bottom: #ececec solid 1px;}
.list .table .tbody .item{ border:#ececec solid 1px; padding:20px; margin-bottom:12px; }
.list .table .tbody .item ul li{margin-top:6px; margin-bottom:6px;  color:#111; font-size:14px;display: block;  -webkit-line-clamp:initial;  -webkit-box-orient: initial; overflow: initial;  }
.list .table .tbody .item ul li span{ display: inline; }
.list .table .tbody .item ul:hover{ background:none; }
.list .layui-laypage{ padding-top:16px; }

.main{padding: 16px;  background: #fff;}
.main .title{font-size: 16px; font-weight: 500; padding-bottom: 10px; margin-bottom: 10px; border-bottom: #ececec solid 1px;}
.main .layui-form-item .close a{ color:#ff5722; font-size:18px; }
.main .layui-form-item .layui-input-group{ margin-bottom:0px; }
.state-main{ display:block; grid-template-columns:6fr 4fr; background: #fff;border-bottom: #ececec solid 1px;}
.form{padding: 16px;border-right: #ececec solid 1px;}
.form .title{font-size: 16px; font-weight: 500; padding-bottom: 10px; margin-bottom: 10px; border-bottom: #ececec solid 1px;}
.state{padding: 16px;  background: #fff;}
.state .title{font-size: 16px; font-weight: 500; padding-bottom: 10px; margin-bottom: 10px; border-bottom: #ececec solid 1px;}
.state .content .item{ margin-bottom:24px; border-bottom:#ececec solid 1px; padding-bottom:24px; }
.state .content .item .state-head{ display:flex; justify-content:left; align-items:center; grid-gap:24px; margin-bottom:12px; }
.state .content .item .state_body{ display:grid; grid-template-columns:48px auto; grid-gap:12px; }
.state .content .item .state_body .state_user{ text-align:center; }
.state .content .item .state_body .state_user .photo{ width:48px; height:48px; border-radius:50px; overflow:hidden;border:#ececec solid 1px; }
.state .content .item .state_body .state_user .photo img{ width:100%; height:100%; object-fit:cover; }
.state .content .item .state_body .state_user .name{ padding-top:6px; }
.state .content .item .state_body .state_content .message{ background:#f6f8f9; padding:12px; border-radius:6px; margin-bottom:12px; }
.state .content .item:last-child{ border-bottom:none }
.state-main .layui-text ul{ padding-left:0; }
.state-main .layui-text ul li{list-style: none; margin-top: 0;} 

.state-main .form .state-box{ background:#f6f8f9; padding: 16px; border-radius:6px; margin-bottom:24px; }
.state-main .form .state-box .state_user{ display:flex; justify-content:left; grid-gap:12px; align-items:center; }
.state-main .form .state-box .state_user .photo{ width:38px; height:38px; border-radius:50px; overflow:hidden;border:#ececec solid 1px; }
.state-main .form .state-box .state_user .photo img{ width:100%; height:100%; object-fit:cover; }
.state-main .form .state-box .state_user .name{ padding-top:6px; }
.state-main .form .state-box .layui-form-item{ display:grid; grid-template-columns:70px auto; }
.state-main .form .state-box .layui-form-item .layui-input-block{ padding-top:9px; }

.form-edit{padding: 24px;border-right: #ececec solid 1px;}
.form-edit .title{font-size: 16px; font-weight: 500; padding-bottom: 10px; margin-bottom: 10px; border-bottom: #ececec solid 1px;}

.state-main—nostate .content{ width:100%; }


.state-box-detail .item{ display:grid; grid-template-columns:80px auto; grid-gap:6px; padding-top: 8px; padding-bottom: 8px;}
.state-box-detail .item .item-label{ text-align:right; }

.state-box-detail .item .item-content .state_user{ display:flex; justify-content:left; grid-gap:12px; align-items:center; }
.state-box-detail .item .item-content .state_user .photo{ width:48px; height:48px; border-radius:48px; overflow:hidden;border:#ececec solid 1px; }
.state-box-detail .item .item-content .state_user .photo img{ width:100%; height:100%; object-fit:cover; }
.state-box-detail .item .item-content .state_user .name{ padding-top:6px; font-size:12px }

.form_tb{}
.form_tb .layui-form-label{ float:none; text-align:left; padding-left:0; width: auto; padding-right:0; font-size:12px;color:#999 }
.form_tb .layui-input-block{ margin-left: 0;}
 
.layui-upload-list .layui-table tbody tr td{}
.layui-upload-list .layui-table tbody tr td:first-child{ word-break: break-all;    /* 强制任何字符都换行 */
  white-space: normal;      /* 允许自动换行 */
  overflow-wrap: break-word;/* 兼容备用 */}


}