You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
999 lines
34 KiB
Plaintext
999 lines
34 KiB
Plaintext
.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;
|
|
}
|
|
}
|
|
|