body, html { height: 100%; width: 100%; margin: 0; padding: 0; box-sizing: border-box; font-size: 16px; } .container { display: flex; flex-direction: column; height: 100%; width: 100%; padding: 50px 26px 20px 26px; } .travel { display: flex; width: 100%; } .travel:first-child{ margin-bottom: 8px; } .box { background-color: #FFF; border-radius: 9px; box-shadow: 0 0 5px 2px rgba(0, 0, 255, 0.05); padding: 10px; margin: 10px; } .arrange{ display: flex; height: 100px; border-radius: 5px; align-items: center; margin: 0 10px; } .div1{ color: #ffffff; flex-direction: column; justify-content: center; width: calc(30% - 20px); background-color: #28619C; } .div2{ width: calc(34% - 20px); padding-left: 20px; background-color: #FFF7F2; } .div3{ width: calc(36% - 20px); padding-left: 20px; background-color: #E9F2FD; } .cut{ color: #000000; background-color: #F7F7F7; padding: 5px 10px 5px 10px; } .cut:first-child{ border-radius: 5px 0 0 5px; } .cut:last-child{ border-radius: 0 5px 5px 0; } .cut.active{ color: #ffffff; background-color: #1a7bb9; } .tabs-container{ width: 100%; height: 100%; } .tab-content{ height: calc(100% - 50px); } .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover{ border: none!important; } .tabs-container #tab .active > a{ border-bottom: 4px solid #BE1F29!important; } .tab-pane .t3 ul{ list-style: none; padding-left: 0; } .tab-pane .t3 ul li { height: 25%; display: flex; align-items: center; padding-top: 5px; padding-left: 20px; position: relative; } .tab-pane .t3 ul li::before { content: ''; position: absolute; left: 10px; top: 30%; transform: translateY(-50%); width: 8px; height: 8px; background-color: #CCCCCC; border-radius: 50%; } .box h2{ font-weight: 500; color: #484848; font-size: 20px; margin-top: 0; } .tab-content .tab-pane .t3 ul li a{ width: 100%; } .tabs-container .nav-tabs{ border-bottom: 1px solid #F5BA62; } .wddbrw_head { width: 100%; padding-bottom: 10px; padding-left: 10px; } .wddbrw_head h1 { font-size: 18px; font-weight: bold; color: #484848; margin-top: 0; margin-bottom: 0; text-indent: 17px; } .dhl2 { width: 100%; height: 100%; } .dhl2 img{ cursor: pointer; } .dhl2 table { width: 90%; table-layout: fixed; border-spacing: 0; border-collapse: separate; margin-left: 17px; } .dhl2 td{ padding: 16px 9px; } .dhl2 span{ font-size: 16px; margin-left: 6px; } .spanStyle{ display: inline-block; height: 28px; text-align: center; line-height: 28px; padding: 0 3px; border-radius: 5px; } .fileState{ background-color: #FBE2CE; border-radius: 14px; width: 28px; color: #F5B47D; } .classifica{ background-color: #FEB9B6; color: #FB5149; } .docRa{ background-color: #C5D1DF; color: #456E9D; } .docStatus{ background-color: #7FB8C4; color: #D3FFE9; } .docStatus_1{ background-color: #7FB8C4; color: #D3FFE9; } .docStatus_2{ background-color: #FBE2CE; color: #F5B47D; } .docStatus_3{ background-color: #FED9D4; color: #FB8A79; } .otherBox{ width: 50%; height: 100%; float: left; display: flex; flex-direction: column; /* 垂直排列 */ justify-content: center; align-items: center; } .pictureLine{ width: 50%; height: 100%; float: left; display: flex; justify-content: center; align-items: center; } .pictureLine img{ width: 60px; height: 60px; } .travelPiece{ display: flex; width: 100%; height: 50%; } .showMore{ color:#828282; margin-top:20px; margin-right:22px; font-weight: bold; font-size:14px; float: right } .float-left{ float: left; } .wordSize1{ font-size: 18px; } .float-right{ float: right; } .below1 span{ margin-right: 5px; } .below2 span{ display: inline-block; width: 150px; /* 设置宽度 */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* 超出内容显示省略号 */ margin-right: 15px; color: #A5AEBE; } .badge { position: absolute; top: -6px; left: 42px; background-color: red; color: white; border-radius: 50%; padding: 5px 8px; display: none; } .docTitle{ width: 70%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }