@@ -349,6 +352,7 @@
console.log('工业园区数据:', industrialParkData)
const option = {
+
tooltip: {
trigger: 'item',
formatter: function(params) {
@@ -445,7 +449,9 @@
if (this.mapChartInstance) this.mapChartInstance.resize()
// fieldChart 使用 CSS 实现，不需要 resize
})
- }
+ },
+
+
}
}
@@ -462,6 +468,8 @@
font-family: 'Microsoft YaHei', sans-serif;
}
+
+
.screen-header {
position: relative;
z-index: 10;
@@ -581,6 +589,38 @@
justify-content: center;
}
+ .chart-title span {
+ font-size: 1.2vw;
+ margin-bottom: 2.5vh;
+ min-font-size: 14px;
+ padding: 2.5vh 0;
+ display: inline-block;
+ width: 80%;
+ text-align: center;
+ position: relative;
+
+ /* 移除原来的border-bottom */
+ border-bottom: none;
+
+ /* 使用伪元素创建更漂亮的横线 */
+ &::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 100%;
+ height: 1px;
+ background: linear-gradient(90deg,
+ transparent 0%,
+ #8edbef 20%,
+ #8edbef 50%,
+ #8edbef 80%,
+ transparent 100%);
+ border-radius: 1px;
+ }
+ }
+
.pie-chart {
height: 20vh;
min-height: 200px;
@@ -597,7 +637,7 @@
display: flex;
align-items: center;
font-size: 0.8vw;
- color: #94a3b8;
+ color: #35d4dd;
min-font-size: 10px;
}
@@ -618,6 +658,47 @@
align-items: center;
justify-content: center;
padding: 2vh 1.5vw;
+ position: relative;
+
+ /* 增强立体效果 */
+ background: linear-gradient(135deg,
+ rgba(14, 87, 180, 0.1) 0%,
+ rgba(109, 205, 230, 0.05) 50%,
+ rgba(14, 87, 180, 0.1) 100%);
+ border-radius: 12px;
+
+ /* 多层阴影创造立体感 */
+ box-shadow:
+ inset 0 1px 0 rgba(255, 255, 255, 0.1),
+ inset 0 -1px 0 rgba(0, 0, 0, 0.1),
+ 0 8px 32px rgba(14, 87, 180, 0.3),
+ 0 4px 16px rgba(109, 205, 230, 0.2),
+ 0 2px 8px rgba(0, 0, 0, 0.1);
+
+ /* 边框渐变 */
+ border: 1px solid;
+ border-image: linear-gradient(135deg,
+ rgba(109, 205, 230, 0.6),
+ rgba(14, 87, 180, 0.8),
+ rgba(109, 205, 230, 0.6)) 1;
+
+ /* 内部光晕 */
+ &::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: radial-gradient(
+ circle at 30% 20%,
+ rgba(109, 205, 230, 0.1) 0%,
+ transparent 50%
+ );
+ border-radius: 12px;
+ pointer-events: none;
+ z-index: 1;
+ }
}
.map-container {
@@ -627,11 +708,84 @@
flex-direction: column;
align-items: center;
justify-content: center;
- // background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(99, 102, 241, 0.05) 100%);
- // border: 1px solid rgba(59, 130, 246, 0.2);
- // border-radius: 8px;
padding: 1.5vh 1vw;
- // backdrop-filter: blur(10px);
+ position: relative;
+ z-index: 2;
+
+ /* 内部容器立体效果 */
+ // background: linear-gradient(135deg,
+ // rgba(255, 255, 255, 0.05) 0%,
+ // rgba(109, 205, 230, 0.02) 50%,
+ // rgba(255, 255, 255, 0.05) 100%);
+ // border-radius: 8px;
+
+ // /* 内部阴影 */
+ // box-shadow:
+ // inset 0 2px 4px rgba(255, 255, 255, 0.1),
+ // inset 0 -2px 4px rgba(0, 0, 0, 0.1);
+
+ // /* 边框高光 */
+ // border: 1px solid rgba(109, 205, 230, 0.3);
+
+ /* 内部光晕效果 */
+ // &::after {
+ // content: '';
+ // position: absolute;
+ // top: 2px;
+ // left: 2px;
+ // right: 2px;
+ // bottom: 2px;
+ // background: linear-gradient(45deg,
+ // transparent 0%,
+ // rgba(109, 205, 230, 0.05) 50%,
+ // transparent 100%);
+ // border-radius: 6px;
+ // pointer-events: none;
+ // }
+ }
+
+ .map-title {
+ color: #93ccfd;
+ font-size: 1.2vw;
+ text-align: center;
+ margin-bottom: 1.5vh;
+ min-font-size: 14px;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ z-index: 4;
+
+ span {
+ font-size: 1.2vw;
+ padding: 1.5vh 0;
+ display: inline-block;
+ width: 80%;
+ text-align: center;
+ position: relative;
+
+ /* 移除原来的border-bottom */
+ border-bottom: none;
+
+ /* 使用伪元素创建更漂亮的横线 */
+ &::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 100%;
+ height: 1px;
+ background: linear-gradient(90deg,
+ transparent 0%,
+ #8edbef 20%,
+ #8edbef 50%,
+ #8edbef 80%,
+ transparent 100%);
+ border-radius: 1px;
+ }
+ }
}
.map-tabs {
@@ -666,6 +820,43 @@
display: flex;
align-items: center;
justify-content: center;
+ position: relative;
+ z-index: 3;
+
+ /* 地图内容立体效果 */
+ // &::before {
+ // content: '';
+ // position: absolute;
+ // top: 0;
+ // left: 0;
+ // right: 0;
+ // bottom: 0;
+ // background: radial-gradient(
+ // circle at 30% 20%,
+ // rgba(109, 205, 230, 0.08) 0%,
+ // transparent 60%
+ // );
+ // border-radius: 6px;
+ // pointer-events: none;
+ // z-index: 1;
+ // }
+
+ /* 地图内容立体阴影 */
+ // &::after {
+ // content: '';
+ // position: absolute;
+ // top: 1px;
+ // left: 1px;
+ // right: 1px;
+ // bottom: 1px;
+ // background: linear-gradient(135deg,
+ // rgba(255, 255, 255, 0.03) 0%,
+ // transparent 50%,
+ // rgba(0, 0, 0, 0.03) 100%);
+ // border-radius: 4px;
+ // pointer-events: none;
+ // z-index: 2;
+ // }
}
/* 右侧区域 */
@@ -756,7 +947,7 @@
.card-number {
color: #dc9c61;
- font-size: 1.1vw;
+ font-size: 2.5vw;
font-weight: bold;
text-shadow: 0 0 10px rgba(59, 130, 246, 0.6);
margin-bottom: 0.5vh;
@@ -797,7 +988,7 @@
flex-direction: column;
align-items: center;
justify-content: center;
- gap: 1.5vh;
+ gap: 2.5vh;
padding: 1vh 0;
}
@@ -832,7 +1023,7 @@
.item-name {
color: #fff;
- font-size: 12px;
+ font-size: 13px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -848,9 +1039,9 @@
.bar-container {
flex: 1;
- height: 8px;
+ height: 12px;
background: rgba(255, 255, 255, 0.1);
- border-radius: 4px;
+ border-radius: 12px;
overflow: hidden;
}
@@ -865,7 +1056,7 @@
color: #fff;
font-size: 11px;
font-weight: bold;
- min-width: 40px;
+ min-width: 30px;
text-align: right;
flex-shrink: 0;
}