.containerR { 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: 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; border: 1px solid #DFE4F6; border-radius: 4px; color: #2E4CD4; font-weight: 500; font-size: 12px; padding: 4px 8px; background: transparent; cursor: pointer; transition: all 0.2s; &:hover { background-color: #F0F2FF; border-color: #2E4CD4; } .btnIcon { font-size: 12px; } } } } .leftBottomSection { flex: 1; display: flex; align-items: center; justify-content: center; background-color: #fafafa; border: 1px dashed #d9d9d9; border-radius: 4px; .imagePlaceholder { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #999999; .imageIcon { font-size: 32px; opacity: 0.6; } .imageText { font-size: 14px; font-weight: 400; } } } } .containerOneRight{ background-color: white; width: calc(50% - 5px); display: flex; flex-direction: column; padding: 15px; border: 1px solid #f0f0f0; border-radius: 4px; .rightTopSection { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; .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 { .exportBtn { background-color: #2E4CD4 !important; border-color: #2E4CD4 !important; color: #fff !important; font-size: 14px !important; font-weight: 500 !important; height: 32px; padding: 0 16px; &:hover { background-color: #1e3bb8 !important; border-color: #1e3bb8 !important; } } } } .rightBottomSection { flex: 1; display: flex; align-items: center; justify-content: center; .imagePlaceholder { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; background-color: #f5f5f5; border: 2px dashed #d9d9d9; border-radius: 4px; .imageIcon { font-size: 48px; margin-bottom: 10px; } .imageText { font-size: 14px; color: #999999; } } } } } .containerTwo{ flex: 1; background-color: white; display: flex; flex-direction: column; padding: 15px; border: 1px solid #f0f0f0; border-radius: 4px; .containerTwoTitle { 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; .searchSection { flex: 1; max-width: 300px; :global(.ant-input) { height: 32px; border-radius: 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: 32px; 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; } } } } .containerTwoTable { flex: 1; overflow: hidden; :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; } :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; } }