main
wangyunfei 2 weeks ago
parent 5fb53e93ee
commit f311f38761

@ -0,0 +1,4 @@
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.0557 4.50423H7.19076V3.72046C7.19076 2.38804 8.20966 1.36914 9.54208 1.36914H12.6771C14.0095 1.36914 15.0284 2.38804 15.0284 3.72046V4.50423H18.1635C18.6338 4.50423 18.9473 4.81773 18.9473 5.28802C18.9473 5.75828 18.6338 6.07178 18.1635 6.07178H15.0284H7.19074H4.05568C3.58541 6.07178 3.27191 5.75828 3.27191 5.28802C3.27193 4.81775 3.58543 4.50423 4.0557 4.50423ZM13.4609 4.50423V3.72046C13.4609 3.2502 13.1474 2.93667 12.6772 2.93667H9.54211C9.07184 2.93667 8.75832 3.25017 8.75832 3.72046V4.50423H13.4609Z" fill="#FF7E72"/>
<path d="M5.62433 7.64062H16.5971C17.0674 7.64062 17.3809 7.95413 17.3809 8.42441V19.3972C17.3809 19.8674 17.0674 20.1809 16.5971 20.1809H5.62433C5.15407 20.1809 4.84056 19.8674 4.84056 19.3972V8.42441C4.84056 7.95413 5.15409 7.64062 5.62433 7.64062ZM11.8945 16.2621C11.8945 16.7324 12.208 17.0459 12.6783 17.0459C13.1485 17.0459 13.462 16.7324 13.462 16.2621V11.5595C13.462 11.0892 13.1485 10.7757 12.6783 10.7757C12.208 10.7757 11.8945 11.0892 11.8945 11.5595V16.2621ZM8.75942 16.2621C8.75942 16.7324 9.07292 17.0459 9.54321 17.0459C10.0135 17.0459 10.327 16.7324 10.327 16.2621V11.5595C10.327 11.0892 10.0135 10.7757 9.54321 10.7757C9.07294 10.7757 8.75942 11.0892 8.75942 11.5595V16.2621Z" fill="#FF7E72"/>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

@ -0,0 +1,4 @@
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.13234 17.6341L2.30859 18.5304L3.28109 13.7616L7.13234 17.6341ZM14.6998 2.27539L12.9711 4.01289L16.8223 7.88664L18.5511 6.14914L14.6998 2.27539ZM4.14484 12.8929L7.99609 16.7666L15.9598 8.75664L12.1086 4.88164L4.14484 12.8929Z" fill="#67B3FF"/>
<path d="M8.5 17.25H11V19.75H8.5V17.25ZM12.3287 17.25H14.8287V19.75H12.3287V17.25ZM16.0787 17.25H18.5525V19.75H16.0787V17.25Z" fill="#67B3FF"/>
</svg>

After

Width:  |  Height:  |  Size: 502 B

@ -0,0 +1,3 @@
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11 17C18.5 17 21 10.75 21 10.75C21 10.75 18.5 4.5 11 4.5C3.5 4.5 1 10.75 1 10.75C1 10.75 3.625 17 11 17ZM11 7.125C13 7.125 14.75 8.75 14.75 10.875C14.75 12.875 13.125 14.625 11 14.625C9 14.625 7.25 13 7.25 10.875C7.375 8.75 9 7.125 11 7.125ZM11 13.25C12.375 13.25 13.5 12.125 13.5 10.75H11L12.875 9.125C12.375 8.625 11.75 8.375 11 8.375C9.625 8.375 8.5 9.5 8.5 10.875C8.625 12.25 9.625 13.25 11 13.25Z" fill="#86F278"/>
</svg>

After

Width:  |  Height:  |  Size: 533 B

@ -37,7 +37,10 @@
&.block1 {
background:
url('@/assets/business_envinformation/background1.svg'),
linear-gradient(180deg, #DBEBFF 0%, #DBEBFF 12.5%, rgba(255, 255, 255, 0.700824) 56%, rgba(255, 255, 255, 0.01) 100%);
linear-gradient(180deg, #DBEBFF 0%, #DBEBFF 12.5%, rgba(255, 255, 255, 0.700824) 56%, rgba(255, 255, 255, 0.01) 100%),
linear-gradient(0deg, #FFFFFF, #FFFFFF);
// linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center;
@ -117,6 +120,31 @@
font-size: 24px;
color: #333333;
line-height: 1.2;
// 特定数字颜色
&.number258 {
color: #0080FF;
}
&.number58 {
color: #EFB700;
}
&.number51 {
color: #00DA86;
}
&.number28 {
color: #00DA86;
}
&.number50 {
color: #FD0404;
}
&.number58Second {
color: #A318E4;
}
}
.blockTime {
@ -177,224 +205,215 @@
flex: 1; // 占满剩余空间
display: flex;
flex-direction: column;
background-color: #fff;
padding: 15px;
.sectionContent {
display: flex;
flex-direction: row;
gap: 10px;
padding: 0;
.leftBlock {
width: 28%;
flex-shrink: 0;
height: 100%;
background: #fff;
// background-size: cover;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
padding: 15px;
gap: 15px;
.leftBlockTitle {
// 第一行 - 表单控件
.formRow {
display: flex;
align-items: center;
gap: 8px;
font-family: PingFang SC;
font-weight: 500;
font-size: 14px;
color: #333333;
margin-bottom: 10px;
.titleIcon {
width: 3px;
height: 16px;
background-color: #2E4CD4;
}
}
.developmentContainer {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
gap: 8px;
gap: 15px;
flex-shrink: 0;
.developmentBlock1 {
flex: 1;
background-color: #F1F7FF;
border-radius: 4px;
padding: 15px 20px;
.addButton {
display: flex;
align-items: center;
width: 100%;
.leftContent {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
gap: 4px;
height: 28px;
border: 1px solid #00D48A;
border-radius: 2px;
color: #fff;
font-weight: 400;
font-size: 12px;
padding: 0 10px;
background: #00D48A;
cursor: pointer;
transition: all 0.2s ease;
.mainText {
color: #333333;
font-size: 14px;
font-weight: 500;
font-family: PingFang SC;
width: 100%;
max-width: 500px;
&:hover {
background-color: #00B875;
border-color: #00B875;
}
.subText {
color: #666666;
font-size: 12px;
font-weight: 400;
font-family: PingFang SC;
width: 100%;
max-width: 400px;
.buttonIcon {
font-size: 16px;
font-weight: bold;
}
}
.rightContent {
flex: 0 0 auto;
.rightControls {
display: flex;
justify-content: flex-end;
align-items: center;
padding-right: 10px;
min-width: 80px;
gap: 15px;
margin-left: auto;
.importantTag {
background-color: #FFE0E2;
color: #FF3E48;
font-size: 14px;
font-weight: 500;
font-family: PingFang SC;
width: 45px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
.filterLabel {
font-size: 13px;
color: #333333;
white-space: nowrap;
}
.normalTag {
background-color: #DAF3FF;
color: #00AAFA;
font-size: 14px;
font-weight: 500;
font-family: PingFang SC;
width: 45px;
height: 25px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
}
}
// Select组件样式
:global(.ant-select) {
font-size: 12px;
height: 28px !important;
}
:global(.ant-select .ant-select-selector) {
height: 28px !important;
font-size: 12px;
border-radius: 2px !important;
display: flex !important;
align-items: center !important;
padding: 0 11px !important;
}
:global(.ant-select .ant-select-selection-item) {
line-height: 1.5714285714285714;
font-size: 12px;
}
.rightBlock {
width: calc(100% - 28% - 10px);
height: 100%;
background-color: #fff;
padding: 0;
display: flex;
flex-direction: column;
:global(.ant-select .ant-select-selection-placeholder) {
line-height: 1.5714285714285714;
font-size: 12px;
color: #00000040 !important;
}
.tableHeader {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 15px 5px 15px;
.searchInput {
width: 150px;
height: 28px;
border: 1px solid #d9d9d9;
border-radius: 2px;
padding: 0 12px;
font-size: 12px;
.tableTitle {
display: flex;
align-items: center;
gap: 8px;
font-family: PingFang SC;
font-weight: 500;
font-size: 14px;
color: #333333;
&:focus {
border-color: #2E4CD4;
outline: none;
}
.titleIcon {
width: 3px;
height: 16px;
background-color: #2E4CD4;
&::placeholder {
color: #00000040;
}
}
.tableActions {
display: flex;
gap: 8px;
margin-top: 5px;
.actionButton {
display: flex;
align-items: center;
gap: 4px;
.queryButton, .resetButton {
height: 28px;
border: 1px solid #DFE4F6;
border: 1px solid #d9d9d9;
border-radius: 4px;
color: #2E4CD4;
font-weight: 500;
padding: 0 16px;
font-size: 12px;
padding: 0px 8px;
background: transparent;
cursor: pointer;
transition: all 0.2s ease;
&:hover {
background-color: #f0f2ff;
border-color: #2E4CD4;
color: #2E4CD4;
}
}
&:active {
background-color: #e6ebff;
.queryButton {
background-color: #00D48A;
color: #fff;
border-color: #00D48A;
&:hover {
background-color: #00B875;
border-color: #00B875;
color: #fff;
}
}
.buttonIcon {
font-size: 14px;
font-weight: bold;
.resetButton {
background-color: #fff;
color: #666;
&:hover {
background-color: #f5f5f5;
}
}
}
}
.tableContainer {
// 第二行 - 表格
.tableSection {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
margin: 10px 15px 0 15px; // 上边距10px左右边距15px
:global(.ant-table) {
font-size: 12px;
:global {
.ant-spin-nested-loading {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
.ant-spin-container {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
.ant-table-wrapper {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
.ant-table {
flex: 1;
overflow: auto;
}
: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;
.ant-table-pagination {
flex-shrink: 0;
margin: 16px 0 0 0;
padding: 0;
}
}
}
}
.ant-table {
font-size: 12px;
.ant-table-thead > tr > th {
background-color: #fafafa;
font-weight: 400;
color: #000000D9;
border-right: none;
text-align: center;
}
:global(.ant-table-tbody > tr > td) {
padding: 8px 12px;
border-bottom: 1px solid #f0f0f0;
.ant-table-tbody > tr > td {
border-right: none;
color: #000000D9;
font-weight: 400;
text-align: center;
color: #666666;
}
:global(.ant-table-tbody > tr:hover > td) {
.ant-table-tbody > tr:hover > td {
background-color: #f5f5f5;
}
:global(.ant-pagination) {
margin-top: 16px;
a {
color: #1890ff;
text-decoration: none;
&:hover {
color: #40a9ff;
}
}
}
.ant-pagination {
text-align: right;
}
}
@ -402,3 +421,94 @@
}
}
}
// 操作按钮图标样式
.eye-icon {
width: 20px;
height: 12.5px;
position: relative;
display: inline-block;
&::before {
content: '';
position: absolute;
width: 20px;
height: 12.5px;
border: 2px solid #86F278;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
top: 0;
left: 0;
transform: rotate(-180deg);
opacity: 1;
}
&::after {
content: '';
position: absolute;
width: 6px;
height: 6px;
background-color: #86F278;
border-radius: 50%;
top: 3.5px;
left: 7px;
transform: rotate(-180deg);
}
}
.edit-icon {
width: 16px;
height: 16px;
position: relative;
display: inline-block;
&::before {
content: '';
position: absolute;
width: 12px;
height: 2px;
background-color: #1890ff;
top: 3px;
left: 2px;
transform: rotate(45deg);
}
&::after {
content: '';
position: absolute;
width: 2px;
height: 12px;
background-color: #1890ff;
top: 2px;
left: 7px;
transform: rotate(45deg);
}
}
.delete-icon {
width: 16px;
height: 16px;
position: relative;
display: inline-block;
&::before {
content: '';
position: absolute;
width: 12px;
height: 2px;
background-color: #ff4d4f;
top: 7px;
left: 2px;
transform: rotate(45deg);
}
&::after {
content: '';
position: absolute;
width: 12px;
height: 2px;
background-color: #ff4d4f;
top: 7px;
left: 2px;
transform: rotate(-45deg);
}
}

@ -5,6 +5,8 @@
background-color: #fff;
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
.searchSection {
// margin-bottom: 20px;
@ -52,7 +54,7 @@
display: flex;
flex-direction: column;
overflow: hidden;
padding: 0 20px 20px;
padding: 0 20px 0;
:global {
.ant-spin-nested-loading {
@ -60,28 +62,34 @@
display: flex;
flex-direction: column;
overflow: hidden;
margin: 0;
padding: 0;
.ant-spin-container {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
margin: 0;
padding: 0;
.ant-table-wrapper {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
margin: 0;
padding: 0;
.ant-table {
flex: 1;
overflow: auto;
margin: 0;
}
.ant-table-pagination {
flex-shrink: 0;
margin: 16px 0 0 0;
padding: 0;
}
}
}
@ -121,6 +129,7 @@
.ant-pagination {
text-align: right;
margin-top: 70px !important;
}
}
}

Loading…
Cancel
Save