// 重点部位列表样式
.keypartsList {
display: flex;
flex-direction: column;
gap: 10px;
margin: 35px 0 0 0;
overflow: auto;
}
.keypartsCard {
background: #f9fbff;
border: 1px solid #ECEDFC;
border-radius: 4px;
padding: 8px 12px 6px 12px;
box-shadow: 0 1px 4px 0 rgba(46, 76, 212, 0.03);
transition: border-color 0.2s, box-shadow 0.2s;
position: relative;
// min-height: 44px;
max-width: 300px;
width: 100%;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.keypartsCardActive {
border-color: #75A7FF;
background: #F6F7FF;
box-shadow: 0 2px 8px 0 rgba(46, 76, 212, 0.10);
}
.keypartsCardHeader {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 3px;
}
.keypartsCardTitle {
font-size: 12px;
font-weight: 600;
color: #333;
margin-bottom: 8px;
}
.keypartsRiskTag {
display: inline-block;
min-width: 40px;
height: 30px;
line-height: 30px;
text-align: center;
font-size: 13px;
font-weight: 500;
border-radius: 5px;
padding: 0 8px;
box-shadow: 0 1px 3px 0 rgba(46, 76, 212, 0.05);
}
.keypartsCardSub {
font-size: 12px;
color: #666;
font-weight: 400;
letter-spacing: 0.5px;
}
.Rcontainer {
padding: 8px 6px 0px 6px;
height: 100%;
display: flex;
flex-direction: column;
gap: 10px;
// 第一个div - 高度20%
.RcontainerTop {
height: 16%;
// background-color: #fff;
border-radius: 4px;
display: flex;
flex-direction: column;
.sectionContent {
height: 100%;
display: flex;
flex-direction: column;
// padding: 15px;
.blocksContainer {
flex: 1;
display: flex;
gap: 10px;
height: 100%;
.blockItem {
flex: 1;
height: 100%;
display: flex;
background: linear-gradient(170.5deg, #F5F7FF 6.87%, #FFFFFF 47.65%);
border-radius: 2px;
// border: 2px solid #FFFFFF;
&.bgBlock1 {
background: url('@/assets/business_firekeynotearea/keyparts_bg.png') no-repeat center center, linear-gradient(170.5deg, #F5F7FF 6.87%, #FFFFFF 47.65%);
background-size: cover;
}
&.bgBlock2 {
background: url('@/assets/business_firekeynotearea/keyparts_bg.png') no-repeat center center, linear-gradient(170.5deg, #F5F7FF 6.87%, #FFFFFF 47.65%);
background-size: cover;
}
&.bgBlock3 {
background: url('@/assets/business_firekeynotearea/keyparts_bg.png') no-repeat center center, linear-gradient(170.5deg, #F5F7FF 6.87%, #FFFFFF 47.65%);
background-size: cover;
}
&.bgBlock4 {
background: url('@/assets/business_firekeynotearea/keyparts_bg.png') no-repeat center center, linear-gradient(170.5deg, #F5F7FF 6.87%, #FFFFFF 47.65%);
background-size: cover;
}
&.bgBlock5 {
background: url('@/assets/business_firekeynotearea/keyparts_bg.png') no-repeat center center, linear-gradient(170.5deg, #F5F7FF 6.87%, #FFFFFF 47.65%);
background-size: cover;
}
.blockLeft {
width: 60%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
padding: 15px;
padding-left: 20px;
gap: 15px;
.blockTitle {
font-family: PingFang SC;
font-weight: 400;
font-size: 12px;
color: #333333;
line-height: 1.2;
}
.blockNumber {
font-family: PingFang SC;
font-weight: 700;
font-size: 24px;
color: #333333;
line-height: 1.2;
}
.blockChange {
font-family: PingFang SC;
font-weight: 400;
font-size: 12px;
color: #1269FF;
line-height: 1.2;
display: flex;
align-items: center;
gap: 4px;
.arrow {
font-size: 14px;
font-weight: bold;
}
.checkIcon {
font-size: 16px;
color: #1269FF;
}
}
}
.blockRight {
flex: 1;
height: 100%;
background-color: transparent;
border-radius: 0 4px 4px 0;
display: flex;
align-items: center;
justify-content: center;
.blockImage {
// width: 80%;
height: 65%;
// height: 80%;
object-fit: contain;
margin-right: -5px;
}
}
}
}
}
}
// 第二个div - 高度39%
.RcontainerMiddle {
height: 100%;
border-radius: 4px;
display: flex;
flex-direction: column;
.sectionContent {
height: 100%;
display: flex;
display: flex;
gap: 10px;
height: 100%;
.middleBlock1 {
// flex: 3;
width: 28%;
height: 100%;
background: #fff;
border: 2px solid #fff;
// border-radius: 4px;
position: relative;
padding: 0px 10px 10px 2px;
font-family: PingFang SC;
font-size: 14px;
color: #333333;
.block1Header {
position: absolute;
top: 5px;
left: 10px;
right: 10px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 10;
height: 28px;
line-height: 28px;
.block1Title {
display: flex;
align-items: center;
gap: 8px;
font-weight: 500;
font-size: 14px;
color: #333333;
.titleIcon {
width: 3px;
height: 14px;
background-color: #2E4CD4;
}
}
.block1Segmented {
padding: 0;
margin: 0;
border: 1px solid #E3E3E3;
border-radius: 4px;
height: 28px;
:global(.ant-segmented) {
padding: 0;
margin: 0;
height: 28px;
}
:global(.ant-segmented-item) {
font-size: 12px;
// padding: 2px 8px;
height: 26px;
line-height: 26px;
display: flex;
align-items: center;
justify-content: center;
}
:global(.ant-segmented-item-selected) {
background-color: #2E4CD4;
color: #fff;
}
}
}
.deviceStatusChart {
position: absolute;
top: 35px;
left: 10px;
right: 10px;
bottom: 10px;
z-index: 10;
}
}
.middleBlock2 {
flex: 6;
height: 100%;
// background: linear-gradient(170.5deg, #EBEFF4 6.87%, #FFFFFF 53.01%);
// border: 2px solid #fff;
background-color: #fff;
// border-radius: 4px;
display: flex;
flex-direction: column;
font-family: PingFang SC;
font-size: 14px;
color: #333333;
padding: 5px 10px 5px 10px;
.middleBlock2Title {
display: flex;
justify-content: space-between;
align-items: center;
line-height: 28px;
height: 28px;
// margin-bottom: 10px;
.titleLeft {
display: flex;
align-items: center;
gap: 8px;
font-weight: 500;
font-size: 14px;
color: #333333;
.titleIcon {
width: 3px;
height: 14px;
background-color: #2E4CD4;
}
}
.titleRight {
font-size: 12px;
width: 60px;
height: 20px;
line-height: 20px;
background-color: #E6E9FB;
color: #2E4CD4;
text-align: center;
border-radius: 2px;
}
}
.middleBlock2Chart {
width: 100%;
height: 100%;
padding: 5px;
// min-height: 200px;
}
}
}
}
// 第三个div - 高度不超过45%
.RcontainerBottom {
height: 45%; // 限制高度不超过45%
max-height: 45%; // 确保最大高度不超过45%
// display: flex;
// flex-direction: column;
.sectionContent {
// display: flex;
// flex-direction: row;
// gap: 10px;
padding: 0;
.tableBlock {
width: 100%;
height: 100%;
background-color: #fff;
padding: 0;
display: flex;
flex-direction: column;
.tableHeader {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 15px 5px 15px;
.tableTitle {
display: flex;
align-items: center;
gap: 8px;
font-family: PingFang SC;
font-weight: 500;
font-size: 14px;
color: #333333;
.titleIcon {
width: 3px;
height: 16px;
background-color: #2E4CD4;
}
}
.tableActions {
display: flex;
gap: 8px;
margin-top: 5px;
.searchInput {
// flex: 1;
// height: 40px;
// border: 1px solid #E3E6EB;
// border-radius: 6px;
// padding: 0 16px;
// font-size: 14px;
// color: #333;
// background: #fff;
// outline: none;
// box-shadow: none;
// transition: border-color 0.2s;
}
.searchInput:focus {
border-color: #2E4CD4;
}
.selectAll {
// height: 40px;
// border: 1px solid #E3E6EB;
// border-radius: 6px;
// background: #fff;
// font-size: 14px;
// color: #333;
// padding: 0 32px 0 16px;
// margin-left: 12px;
}
.selectAll:focus {
border-color: #2E4CD4;
}
.addBtn {
background: #2E4CD4;
margin-left: 15px;
}
.addBtn:hover {
background: #1d3bb3;
}
}
}
.tableContainer {
flex: 1;
overflow: hidden;
margin: 10px 15px 0 15px; // 上边距10px，
:global(.ant-table) {
font-size: 12px;
}
:global(.ant-table-thead > tr > th) {
background-color: #f5f5fa;
font-weight: 500;
font-size: 14px;
color: #333333;
border-bottom: 1px solid #f0f0f0;
padding: 8px 12px;
text-align: center;
}
:global(.ant-table-tbody > tr > td) {
padding: 8px 12px;
border-bottom: 1px solid #f0f0f0;
text-align: center;
color: #666666;
}
:global(.ant-table-tbody > tr:hover > td) {
background-color: #f5f5f5;
}
:global(.ant-pagination) {
margin-top: 16px;
text-align: right;
}
}
}
}
}
}
