+
@@ -417,7 +418,7 @@ const handleDropdownChange = () => {
padding-top: 0px;
box-sizing: border-box;
width: 100%;
- height: 85%;
+ height: 100%;
}
@@ -461,9 +462,36 @@ const handleDropdownChange = () => {
}
}
+.header-title{
+ position: absolute;
+ top: 0;
+ height: 45px;
+ line-height: 45px;
+ left: 80px;
+ font-size: 16px;
+ font-weight: bold;
+ color: #eee;
+ font-style: italic;
+ text-shadow: 0 0 10px #00E5FF;
+ white-space: nowrap;
+}
+
+.header-title{
+ position: absolute;
+ top: 0;
+ height: 45px;
+ line-height: 45px;
+ left: 80px;
+ font-size: 16px;
+ font-weight: bold;
+ color: #eee;
+ font-style: italic;
+ text-shadow: 0 0 10px #00E5FF;
+ white-space: nowrap;
+}
+
.svg {
width: 100%;
- height: 15%;
- // background-color: #F7BDA7;
+ height: 45px;
}
\ No newline at end of file
diff --git a/src/packages/components/Charts/MyComponents/PieCenter/config.ts b/src/packages/components/Charts/MyComponents/PieCenter/config.ts
index b0bc2a2..83bb0a6 100644
--- a/src/packages/components/Charts/MyComponents/PieCenter/config.ts
+++ b/src/packages/components/Charts/MyComponents/PieCenter/config.ts
@@ -3,7 +3,6 @@ import { PieCenterConfig } from './index'
import { CreateComponentType } from '@/packages/index.d'
import cloneDeep from 'lodash/cloneDeep'
import dataJson from './data.json'
-import { zIndex } from 'html2canvas/dist/types/css/property-descriptors/z-index'
export const includes = ['legend']
diff --git a/src/packages/components/Charts/MyComponents/PieCenter/index.vue b/src/packages/components/Charts/MyComponents/PieCenter/index.vue
index 190c854..68a2dac 100644
--- a/src/packages/components/Charts/MyComponents/PieCenter/index.vue
+++ b/src/packages/components/Charts/MyComponents/PieCenter/index.vue
@@ -195,6 +195,7 @@
+
@@ -396,9 +397,22 @@ onMounted(() => {
}
}
+.header-title{
+ position: absolute;
+ top: 0;
+ height: 45px;
+ line-height: 45px;
+ left: 80px;
+ font-size: 16px;
+ font-weight: bold;
+ color: #eee;
+ font-style: italic;
+ text-shadow: 0 0 10px #00E5FF;
+ white-space: nowrap;
+}
+
.svg {
width: 100%;
- height: 15%;
- // background-color: #F7BDA7;
+ height: 45px;
}
\ No newline at end of file
diff --git a/src/packages/components/Charts/MyComponents/SceneDistribution/config.ts b/src/packages/components/Charts/MyComponents/SceneDistribution/config.ts
index cb6aa75..7a3284f 100644
--- a/src/packages/components/Charts/MyComponents/SceneDistribution/config.ts
+++ b/src/packages/components/Charts/MyComponents/SceneDistribution/config.ts
@@ -6,12 +6,12 @@ import dataJson from './data.json'
export const option = {
dataset: dataJson.source,
title: '场景分布概况',
- titleColor: '#ffffff',
- titleSize: 20,
+ titleColor: '#E6F7FF',
+ titleSize: 18,
labelColor: '#E6F7FF',
labelSize: 16,
valueColor: '#ffffff',
- valueSize: 40,
+ valueSize: 34,
linkColor: '#00E5FF',
linkText: '查看更多>>'
}
diff --git a/src/packages/components/Charts/MyComponents/SceneDistribution/data.json b/src/packages/components/Charts/MyComponents/SceneDistribution/data.json
index 655570c..85615d6 100644
--- a/src/packages/components/Charts/MyComponents/SceneDistribution/data.json
+++ b/src/packages/components/Charts/MyComponents/SceneDistribution/data.json
@@ -1,12 +1,14 @@
{
"source": [
{
+ "title":"储罐区",
"label": "场景总数",
"value": 264,
"color": "#00E5FF",
"image": "scene-total.png"
},
{
+ "title":"储罐区",
"label": "智控场景",
"value": 264,
"color": "#FFD700",
diff --git a/src/packages/components/Charts/MyComponents/SceneDistribution/index.vue b/src/packages/components/Charts/MyComponents/SceneDistribution/index.vue
index 752bf8e..2f93e7f 100644
--- a/src/packages/components/Charts/MyComponents/SceneDistribution/index.vue
+++ b/src/packages/components/Charts/MyComponents/SceneDistribution/index.vue
@@ -1,23 +1,219 @@
-
-
+
+
+
+
+
+
+
+
{{ item.title }}
{{ item.label }}
- {{ item.value }}
+ {{ item.value }}
+
+
@@ -44,41 +240,19 @@ const getImageUrl = (name: string) => {
width: 100%;
height: 100%;
background-color: #020C22;
- padding: 15px;
box-sizing: border-box;
display: flex;
flex-direction: column;
+ overflow: hidden;
- .header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- background-color: rgba(21, 44, 78, 0.5);
- border-top: 2px solid #00AFFF;
- padding: 5px 15px;
- margin-bottom: 20px;
-
- .title {
- display: flex;
- align-items: center;
- .title-icon {
- font-size: 24px;
- margin-right: 10px;
- color: #00E5FF;
- }
- }
-
- .link {
- cursor: pointer;
- font-size: 14px;
- }
- }
.content {
flex: 1;
display: flex;
justify-content: space-around;
- align-items: center;
+ align-items: stretch;
+ min-height: 0;
+ gap: 10px;
}
.scene-item {
@@ -86,20 +260,40 @@ const getImageUrl = (name: string) => {
flex-direction: column;
align-items: center;
text-align: center;
+ flex: 1;
+ max-width: 45%;
+ height: 100%;
+ justify-content: space-between;
+ padding: 10px 5px;
+ box-sizing: border-box;
+
+ .item-title {
+ margin-top:10px;
+ margin-bottom: 8px;
+ font-family: 'Microsoft YaHei', 'Arial', sans-serif;
+ line-height: 1.2;
+ flex-shrink: 0;
+ }
.item-label {
- margin-bottom: 20px;
+ margin-bottom: 0px;
font-family: 'Microsoft YaHei', 'Arial', sans-serif;
+ line-height: 1.2;
+ flex-shrink: 0;
}
.cube-container {
position: relative;
- width: 150px;
- height: 150px;
+ width: 100%;
+ max-width: 120px;
+ aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
- margin-bottom: 20px;
+ margin-bottom: 2px;
+ flex: 1;
+ min-height: 80px;
+ max-height: 120px;
.cube-image {
width: 100%;
@@ -111,17 +305,86 @@ const getImageUrl = (name: string) => {
.value-container {
background: linear-gradient(to bottom, #1E3A5E, #0F1C3D);
border: 1px solid #2A588A;
- border-radius: 10px;
- padding: 5px 30px;
+ border-radius: 8px;
+ padding: 8px 20px;
box-shadow: 0 0 10px rgba(0, 229, 255, 0.5) inset;
border-bottom: 3px solid #00E5FF;
+ flex-shrink: 0;
+ min-height: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 10px;
}
.item-value {
font-weight: bold;
- font-family: 'DS-Digital', 'Arial', sans-serif;
text-shadow: 0 0 10px #00E5FF;
+ line-height: 1;
+ white-space: nowrap;
}
}
}
+
+@include go(border-box) {
+ position: relative;
+ border-radius: 5px;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 100%;
+ height: 100%;
+ padding: 0;
+ // 不渐变
+ // background-color: #0E121B;
+ // 渐变
+ background: linear-gradient(to top,
+ rgba(14, 18, 27, 1) 0%,
+ rgba(14, 18, 27, 0.6) 100%);
+
+ &::before {
+ content: '';
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ border-radius: 5px;
+ padding: 2px;
+ /* 边框宽度 */
+ background: linear-gradient(to top,
+ rgba(128, 128, 128, 0.3),
+ rgba(128, 128, 128, 0));
+ -webkit-mask:
+ linear-gradient(#fff, #fff) content-box,
+ linear-gradient(#fff, #fff);
+ -webkit-mask-composite: xor;
+ mask-composite: exclude;
+ pointer-events: none;
+ }
+}
+
+.header-title{
+ position: absolute;
+ top: 0;
+ height: 45px;
+ line-height: 45px;
+ left: 80px;
+ font-size: 16px;
+ font-weight: bold;
+ color: #eee;
+ font-style: italic;
+ text-shadow: 0 0 10px #00E5FF;
+ white-space: nowrap;
+}
+
+.svg {
+ width: 100%;
+ height: 45px;
+}
+
+
+
diff --git a/src/styles/font/Alibaba-PuHuiTi-Bold.otf b/src/styles/font/Alibaba-PuHuiTi-Bold.otf
new file mode 100644
index 0000000..d1b5c9d
Binary files /dev/null and b/src/styles/font/Alibaba-PuHuiTi-Bold.otf differ
diff --git a/src/styles/font/font.scss b/src/styles/font/font.scss
new file mode 100644
index 0000000..13c2b8e
--- /dev/null
+++ b/src/styles/font/font.scss
@@ -0,0 +1,6 @@
+@font-face {
+ font-family: 'Alibaba-PuHuiTi-Bold';
+ src: url('./Alibaba-PuHuiTi-Bold.otf') format('opentype');
+ font-weight: normal;
+ font-style: normal;
+}
\ No newline at end of file