@@ -143,7 +144,7 @@ const schemaForm: FormProps = {
labelWidth: 90,
schemas: [
{
- label: '年份',
+ label: '年份',
field: 'reqParam',
defaultValue: new Date().getFullYear().toString(),
component: 'Select',
@@ -163,7 +164,7 @@ const schemaForm: FormProps = {
};
const fetchDataList = async () => {
- try {
+ try {
const reqParams = {
xAxis: getCurrentMonth(),
reqParam: String(currentSystemYear),
@@ -190,24 +191,26 @@ onMounted(() => {
.erp-green-page-container {
height: calc(100vh - 100px);
margin: 0;
- padding: 0;
+ padding: 0 4px 4px 4px;
display: flex;
flex-direction: column;
overflow: hidden;
- background-color: #e6f7ff;
+ background: #051937;
+ gap: 4px;
}
+/* 头部区域不变 */
.header-section {
height: 10%;
display: flex;
gap: 4px;
padding: 1px;
box-sizing: border-box;
- border: 1px solid #e5e7eb;
+ background: rgba(12, 44, 85, 0.6);
+ border: 1px solid rgba(32, 160, 255, 0.3);
border-radius: 4px;
- background-color: #f9fafb;
- margin: 0 2px 4px 2px;
overflow: hidden;
+ box-shadow: inset 0 0 8px rgba(32, 160, 255, 0.2);
}
.header-left {
@@ -217,10 +220,10 @@ onMounted(() => {
justify-content: space-between;
padding: 0 8px;
box-sizing: border-box;
- background-color: #f0f8fb;
+ background: rgba(9, 30, 58, 0.8);
border-radius: 4px;
overflow: hidden;
- border: 1px solid #b3d9f2;
+ border: 1px solid rgba(32, 160, 255, 0.2);
}
.card-item {
@@ -231,27 +234,37 @@ onMounted(() => {
display: flex;
align-items: center;
gap: 8px;
- background-color: #fff;
+ background: rgba(18, 60, 110, 0.7);
+ border: 1px solid rgba(32, 160, 255, 0.3);
border-radius: 8px;
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
cursor: pointer;
box-sizing: border-box;
min-width: 0;
+ box-shadow: 0 0 10px rgba(32, 160, 255, 0.1);
}
+
.card-item:hover {
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
transform: translateY(-2px);
- border: 1px solid #1890ff;
+ border: 1px solid #20a0ff;
+ box-shadow: 0 0 15px rgba(32, 160, 255, 0.3);
}
.card-icon {
flex-shrink: 0;
- width: 60px;
- height: 100%;
+ width: 50px;
+ height: 50px;
display: flex;
align-items: center;
justify-content: center;
+ background: rgba(32, 160, 255, 0.15);
+ border-radius: 8px;
+ border: 1px solid rgba(32, 160, 255, 0.4);
+}
+
+:deep(.card-icon svg) {
+ color: #40c4ff !important;
+ fill: #40c4ff !important;
}
.card-content {
@@ -266,15 +279,17 @@ onMounted(() => {
.card-value {
font-size: 14px;
font-weight: 600;
- color: #1890ff;
+ color: #40c4ff;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.2;
+ text-shadow: 0 0 5px rgba(64, 196, 255, 0.5);
}
+
.card-desc {
font-size: 11px;
- color: #666;
+ color: #a0cfff;
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
@@ -288,11 +303,11 @@ onMounted(() => {
flex-direction: column;
gap: 6px;
overflow: hidden;
- border: 1px solid #b3d9f2;
+ border: 1px solid rgba(32, 160, 255, 0.3);
border-radius: 4px;
box-sizing: border-box;
padding: 6px;
- background-color: #f8fcff;
+ background: rgba(9, 30, 58, 0.8);
}
.header-right-top {
@@ -301,22 +316,20 @@ onMounted(() => {
align-items: center;
justify-content: center;
border-radius: 6px;
- background-color: #e6f7ff;
+ background: rgba(18, 60, 110, 0.7);
+ border: 1px solid rgba(32, 160, 255, 0.3);
overflow: hidden;
padding: 0 10px;
- border: 1px solid #91d5ff;
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.header-right-top h2 {
font-size: clamp(14px, 1.8vw, 18px);
font-weight: 700;
- color: #0958d9;
+ color: #20a0ff;
letter-spacing: 0.5px;
margin: 0;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+ text-shadow: 0 0 8px rgba(32, 160, 255, 0.4);
text-align: center;
white-space: nowrap;
overflow: hidden;
@@ -329,12 +342,12 @@ onMounted(() => {
align-items: center;
justify-content: center;
border-radius: 6px;
- background-color: #f0f8fb;
+ background: rgba(18, 60, 110, 0.7);
overflow: hidden;
padding: 8px 12px;
box-sizing: border-box;
- border: 1px solid #b3d9f2;
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+ border: 1px solid rgba(32, 160, 255, 0.3);
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
:deep(.header-right-bottom .search-form) {
@@ -352,47 +365,58 @@ onMounted(() => {
:deep(.header-right-bottom .ant-select) {
width: 100% !important;
}
+:deep(.ant-select-selector) {
+ background: rgba(9, 30, 58, 0.9) !important;
+ border: 1px solid rgba(32, 160, 255, 0.5) !important;
+ color: #a0cfff !important;
+}
+:deep(.ant-select-selection-item) {
+ color: #a0cfff !important;
+}
+:deep(.ant-select-arrow) {
+ color: #20a0ff !important;
+}
+/* 以下高度 100% 还原你最初的布局 */
.top-section {
height: 30%;
display: flex;
gap: 4px;
- padding: 2px;
- box-sizing: border-box;
}
.top-left, .top-middle, .top-right {
flex: 1;
- border: 1px solid #e5e7eb;
+ border: 1px solid rgba(32, 160, 255, 0.3);
border-radius: 4px;
- background-color: #f9fafb;
+ background: #062044;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
+ box-shadow: inset 0 0 8px rgba(32, 160, 255, 0.1);
}
+
.middle-section {
height: 30%;
display: flex;
gap: 4px;
- padding: 2px;
- box-sizing: border-box;
}
.middle-left {
flex: 1;
- border: 1px solid #e5e7eb;
+ border: 1px solid rgba(32, 160, 255, 0.3);
border-radius: 4px;
- background-color: #f9fafb;
+ background: #062044;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
+ box-shadow: inset 0 0 8px rgba(32, 160, 255, 0.1);
}
.middle-right {
flex: 1;
- border: 1px solid #e5e7eb;
+ border: 1px solid rgba(32, 160, 255, 0.3);
border-radius: 4px;
- background-color: #f9fafb;
+ background: #062044;
overflow: hidden;
display: flex;
gap: 4px;
@@ -402,35 +426,36 @@ onMounted(() => {
.middle-right-1, .middle-right-2 {
flex: 1;
border-radius: 4px;
- background-color: #f0f8fb;
+ background: #072955;
+ border: 1px solid rgba(32, 160, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
+
.bottom-section {
height: 30%;
display: flex;
gap: 4px;
- padding: 2px;
- box-sizing: border-box;
}
.bottom-left {
flex: 1;
- border: 1px solid #e5e7eb;
+ border: 1px solid rgba(32, 160, 255, 0.3);
border-radius: 4px;
- background-color: #f9fafb;
+ background: #062044;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
+ box-shadow: inset 0 0 8px rgba(32, 160, 255, 0.1);
}
.bottom-right {
flex: 1;
- border: 1px solid #e5e7eb;
+ border: 1px solid rgba(32, 160, 255, 0.3);
border-radius: 4px;
- background-color: #f9fafb;
+ background: #062044;
overflow: hidden;
display: flex;
gap: 4px;
@@ -440,12 +465,14 @@ onMounted(() => {
.bottom-right-1, .bottom-right-2 {
flex: 1;
border-radius: 4px;
- background-color: #f0f8fb;
+ background: #072955;
+ border: 1px solid rgba(32, 160, 255, 0.2);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
+
:deep(.top-middle) {
height: 100%;
width: 100%;