.XcontainerR { padding: 8px 6px; height: 100%; display: flex; flex-direction: column; .warningBox { width: 100%; background-color: #FFF3CD; border: 1px solid #F4E3AE; border-radius: 4px; padding: 8px 20px; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; .warningIcon { width: 18px; height: 18px; } .warningText { color: #8C6C0B; font-size: 12px; line-height: 1.4; } } .containerOne { height: 40%; flex-shrink: 0; display: flex; margin-bottom: 10px; gap: 10px; .containerOneLeft { background-color: white; width: calc(50% - 5px); display: flex; flex-direction: column; padding: 5px 15px; border: 1px solid #f0f0f0; border-radius: 4px; .leftTopSection { display: flex; justify-content: space-between; align-items: center; // margin-bottom: 15px; .titleLeft { 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; } } .buttonGroup { display: flex; gap: 8px; .actionBtn { display: flex; align-items: center; gap: 4px; height: 28px; border: 1px solid #DFE4F6; border-radius: 4px; color: #2E4CD4; font-weight: 500; font-size: 12px; padding: 0px 8px; background: transparent; cursor: pointer; transition: all 0.2s; &:hover { background-color: #F0F2FF; border-color: #2E4CD4; } .btnIcon { width: 12px; height: 12px; } } } } .leftBottomSection { flex: 1; display: flex; align-items: center; justify-content: center; .imagePlaceholder { display: flex; flex-direction: column; align-items: center; .imageIcon1 { transform: scale(0.9) translateY(-5px); // 稍微向上移动 object-fit: contain; } .imageRow { display: flex; justify-content: space-between; // width: 100%; margin-bottom: 10px; // padding-bottom: 20px; // gap: 12px; .imageIcon2 { height: 55%; transform: scale(0.7) translateY(-25%) translateX(20%); // 稍微向上移动 object-fit: contain; background-color: #EFF5FE; // padding-bottom: 20px; } .imageIcon3 { height: 40%; transform: scale(0.65) translateY(-32%) translateX(4%); // 向上移动10px object-fit: contain; padding-bottom: 20px; // background-color: #EFF5FE; } } .imageText { font-size: 12px; font-weight: 400; } } } } .containerOneRight { background-color: white; width: calc(50% - 5px); display: flex; flex-direction: column; padding: 5px 15px; border: 1px solid #f0f0f0; border-radius: 4px; .rightTopSection { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; .rightTopLeft { display: flex; align-items: center; .titleLeft { 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; } } } .rightTopRight { .searchGroup { display: flex; gap: 8px; align-items: center; .searchInput { width: 200px; height: 32px; :global(.ant-input) { height: 32px; border-radius: 4px; border: 1px solid #d9d9d9; font-size: 14px; &:focus { border-color: #2E4CD4; box-shadow: 0 0 0 2px rgba(46, 76, 212, 0.2); } } :global(.ant-input-suffix) { color: #999999; font-size: 14px; } } .organizationSelect { width: 120px; height: 32px; :global(.ant-select-selector) { height: 32px !important; border-radius: 4px !important; border: 1px solid #d9d9d9 !important; &:hover { border-color: #2E4CD4 !important; } &:focus { border-color: #2E4CD4 !important; box-shadow: 0 0 0 2px rgba(46, 76, 212, 0.2) !important; } } :global(.ant-select-selection-item) { line-height: 30px !important; font-size: 14px !important; } } } } } .rightBottomSection { flex: 1; padding: 5px 15px; width: 100%; height: 100%; .threeBlocksContainer { display: flex; gap: 20px; width: 100%; height: 100%; .blockItem { width: 100%; height: 100%; flex: 1; display: flex; justify-content: center; background: url('@/assets/business_basic/background1.png') no-repeat center center; background-size: 100% auto; .blockContent { // background-color: pink; font-size: 12px; color: #666666; font-weight: 400; width: 100%; height: 100%; } // 新的6个横向块样式 .backgroundContainer { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 8px; .infoBlock { width: 100%; display: flex; justify-content: flex-start; white-space: nowrap; .nameText { font-size: 12px; font-weight: 500; color: #333333; margin-left: 10px; margin-right: 10px; margin-top: 15px; } .unitText { font-size: 10px; font-weight: 400; color: #666666; margin-top: 18px; } .infoIcon { font-size: 10px; color: #666666; margin-left: 10px; margin-right: 10px; } .infoText { font-size: 10px; font-weight: 400; color: #666666; } } .tagContainer { display: flex; gap: 8px; align-items: center; } .tagBlue1 { background-color: #D5E5FF; color: #1269FF; font-size: 10px; font-weight: 400; padding: 4px 8px; border-radius: 4px; white-space: nowrap; margin-left: 10px; } .tagBlue2 { background-color: #D5E5FF; color: #1269FF; font-size: 10px; font-weight: 400; padding: 4px 8px; border-radius: 4px; white-space: nowrap; } .tagBlue3 { background-color: #D5E5FF; color: #1269FF; font-size: 10px; font-weight: 400; padding: 4px 8px; border-radius: 4px; white-space: nowrap; margin-left: 10px; } .tagYellow { background-color: #FFF8E2; color: #FFC403; font-size: 10px; font-weight: 400; padding: 4px 8px; border-radius: 4px; white-space: nowrap; } .actionBlock { width: 100%; height: 50%; background-color: #BDD6FDCC; display: flex; align-items: center; justify-content: center; } .buttonContainer { display: flex; gap: 15px; align-items: center; justify-content: center; width: 100%; .editBtn { height: 80%; background-color: #1269FF; color: #fff; font-size: 10px; font-weight: 400; border: none; border-radius: 2px; cursor: pointer; padding: 2px 15px; &:hover { background-color: #0f5ae0; } } .deleteBtn { height: 80%; background-color: #FF5F60; color: #fff; font-size: 10px; font-weight: 400; border: none; border-radius: 2px; cursor: pointer; padding: 2px 15px; &:hover { background-color: #ff4a4b; } } } } // 第二个块的样式 .backgroundContainer2 { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 8px; .infoBlock2 { width: 100%; display: flex; justify-content: flex-start; white-space: nowrap; .nameText2 { font-size: 12px; font-weight: 500; color: #333333; margin-left: 10px; margin-right: 10px; margin-top: 15px; } .unitText2 { font-size: 10px; font-weight: 400; color: #666666; margin-top: 18px; } .infoIcon2 { font-size: 10px; color: #666666; margin-left: 10px; margin-right: 10px; } .infoText2 { font-size: 10px; font-weight: 400; color: #666666; } } .tagContainer2 { display: flex; gap: 8px; align-items: center; } .tagBlue4 { background-color: #D5E5FF; color: #1269FF; font-size: 10px; font-weight: 400; padding: 4px 8px; border-radius: 4px; white-space: nowrap; margin-left: 10px; } .tagBlue5 { background-color: #D5E5FF; color: #1269FF; font-size: 10px; font-weight: 400; padding: 4px 8px; border-radius: 4px; white-space: nowrap; } .tagBlue6 { background-color: #D5E5FF; color: #1269FF; font-size: 10px; font-weight: 400; padding: 4px 8px; border-radius: 4px; white-space: nowrap; margin-left: 10px; } .tagGreen { background-color: #E8F5E8; color: #52C41A; font-size: 10px; font-weight: 400; padding: 4px 8px; border-radius: 4px; white-space: nowrap; } .actionBlock2 { width: 100%; height: 50%; background-color: #BDD6FDCC; display: flex; align-items: center; justify-content: center; } .buttonContainer2 { display: flex; gap: 15px; align-items: center; justify-content: center; width: 100%; .editBtn2 { height: 80%; background-color: #1269FF; color: #fff; font-size: 10px; font-weight: 400; border: none; border-radius: 2px; cursor: pointer; padding: 2px 15px; &:hover { background-color: #0f5ae0; } } .deleteBtn2 { height: 80%; background-color: #FF5F60; color: #fff; font-size: 10px; font-weight: 400; border: none; border-radius: 2px; cursor: pointer; padding: 2px 15px; &:hover { background-color: #ff4a4b; } } } } // 第三个块的样式 .backgroundContainer3 { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 8px; .infoBlock3 { width: 100%; display: flex; justify-content: flex-start; white-space: nowrap; .nameText3 { font-size: 12px; font-weight: 500; color: #333333; margin-left: 10px; margin-right: 10px; margin-top: 15px; } .unitText3 { font-size: 10px; font-weight: 400; color: #666666; margin-top: 18px; } .infoIcon3 { font-size: 10px; color: #666666; margin-left: 10px; margin-right: 10px; } .infoText3 { font-size: 10px; font-weight: 400; color: #666666; } } .tagContainer3 { display: flex; gap: 8px; align-items: center; } .tagBlue7 { background-color: #D5E5FF; color: #1269FF; font-size: 10px; font-weight: 400; padding: 4px 8px; border-radius: 4px; white-space: nowrap; margin-left: 10px; } .tagBlue8 { background-color: #D5E5FF; color: #1269FF; font-size: 10px; font-weight: 400; padding: 4px 8px; border-radius: 4px; white-space: nowrap; } .tagBlue9 { background-color: #D5E5FF; color: #1269FF; font-size: 10px; font-weight: 400; padding: 4px 8px; border-radius: 4px; white-space: nowrap; margin-left: 10px; } .tagOrange { background-color: #FFF2E8; color: #FF7A00; font-size: 10px; font-weight: 400; padding: 4px 8px; border-radius: 4px; white-space: nowrap; } .actionBlock3 { width: 100%; height: 50%; background-color: #BDD6FDCC; display: flex; align-items: center; justify-content: center; } .buttonContainer3 { display: flex; gap: 15px; align-items: center; justify-content: center; width: 100%; .editBtn3 { height: 80%; background-color: #1269FF; color: #fff; font-size: 10px; font-weight: 400; border: none; border-radius: 2px; cursor: pointer; padding: 2px 15px; &:hover { background-color: #0f5ae0; } } .deleteBtn3 { height: 80%; background-color: #FF5F60; color: #fff; font-size: 10px; font-weight: 400; border: none; border-radius: 2px; cursor: pointer; padding: 2px 15px; &:hover { background-color: #ff4a4b; } } } } } } } } } .containerTwo { flex: 1; background-color: white; display: flex; flex-direction: column; padding: 5px 15px; border: 1px solid #f0f0f0; border-radius: 4px; .containerTwoTitle { margin-top: 5px; margin-bottom: 15px; .titleLeft { 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; } } } .containerTwoActions { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; padding: 0px 20px; .searchSection { flex: 1; max-width: 300px; :global(.ant-input) { height: 32px; border-radius: 4px 0px 0px 4px; border: 1px solid #d9d9d9; &:focus { border-color: #2E4CD4; box-shadow: 0 0 0 2px rgba(46, 76, 212, 0.2); } } } .buttonSection { display: flex; gap: 8px; :global(.ant-btn) { height: 28px; padding: 0 16px; border-radius: 4px; font-size: 14px; border: 1px solid #d9d9d9; background-color: #fff; color: #333; &:hover { border-color: #2E4CD4; color: #2E4CD4; } &:focus { border-color: #2E4CD4; color: #2E4CD4; } } .addBtn { display: flex; align-items: center; gap: 4px; height: 28px; border: 1px solid #DFE4F6; border-radius: 4px; color: #2E4CD4; font-weight: 500; font-size: 12px; padding: 0px 8px; background: transparent; cursor: pointer; transition: all 0.2s; &:hover { background-color: #F0F2FF; border-color: #2E4CD4; } .addIcon { width: 12px; height: 12px; font-size: 12px; } } .importBtn { display: flex; align-items: center; gap: 4px; height: 28px; border: 1px solid #DFE4F6; border-radius: 4px; color: #2E4CD4; font-weight: 500; font-size: 12px; padding: 0px 8px; background: transparent; cursor: pointer; transition: all 0.2s; &:hover { background-color: #F0F2FF; border-color: #2E4CD4; } .importIcon { width: 12px; height: 12px; } } .exportBtn { display: flex; align-items: center; gap: 4px; height: 28px; border: 1px solid #DFE4F6; border-radius: 4px; color: #2E4CD4; font-weight: 500; font-size: 12px; padding: 0px 8px; background: transparent; cursor: pointer; transition: all 0.2s; &:hover { background-color: #F0F2FF; border-color: #2E4CD4; } .exportIcon { width: 12px; height: 12px; } } } } .containerTwoTable { flex: 1; overflow: hidden; padding: 0px 20px; :global(.ant-table) { font-size: 12px; } :global(.ant-pagination-options-quick-jumper input) { text-align: center !important; } :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; } :global(.ant-table-tbody > tr:hover > td) { // background-color: #f5f5f5; } :global(.ant-pagination) { margin-top: 16px; text-align: right; } } } } .rightTopSelect { // 下拉框本身的样式 :global(.ant-select-selector) { background-color: #f8f9fa !important; border: 1px solid #d9d9d9 !important; border-radius: 6px !important; height: 32px !important; min-height: 32px !important; &:hover { border-color: #2E4CD4 !important; } &:focus { border-color: #2E4CD4 !important; box-shadow: 0 0 0 2px rgba(46, 76, 212, 0.2) !important; } } // 下拉框内的文字样式 :global(.ant-select-selection-item) { color: #333333 !important; font-size: 14px !important; font-weight: 500 !important; line-height: 30px !important; } // 下拉箭头样式 :global(.ant-select-arrow) { color: #666666 !important; font-size: 12px !important; } // 下拉菜单容器样式 :global(.ant-select-dropdown) { background-color: #ffffff !important; border: 1px solid #e8e8e8 !important; border-radius: 8px !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; padding: 4px 0 !important; } // 下拉选项样式 :global(.ant-select-item) { color: #333333 !important; font-size: 14px !important; padding: 8px 12px !important; border-radius: 4px !important; margin: 2px 8px !important; &:hover { background-color: #f0f2ff !important; color: #2E4CD4 !important; } &.ant-select-item-option-selected { background-color: #e6f7ff !important; color: #2E4CD4 !important; font-weight: 600 !important; } } // 选中状态的样式 :global(.ant-select-focused .ant-select-selector) { border-color: #2E4CD4 !important; box-shadow: 0 0 0 2px rgba(46, 76, 212, 0.2) !important; } } // 自定义选项样式 .customOption { display: flex; align-items: center; gap: 8px; padding: 4px 0; .optionIcon { font-size: 16px; color: #2E4CD4; } .optionText { font-size: 14px; color: #333333; font-weight: 500; } }