yanglijie/smart-large-screen-light-zphg
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

浅色版

Browse Source
This commit is contained in:
lnljyang
2026-01-07 11:16:44 +08:00
parent 717791a492
commit d3214acc9c
20 changed files with 213 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
package-lock.json generated
View File

@@ -608,6 +608,94 @@
"webpack-chain": "^6.4.0", "webpack-chain": "^6.4.0",
"webpack-dev-server": "^3.11.0", "webpack-dev-server": "^3.11.0",
"webpack-merge": "^4.2.2" "webpack-merge": "^4.2.2"
},
"dependencies": {
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.2",
"resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true,
"optional": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"optional": true
},
"json5": {
"version": "2.2.3",
"resolved": "https://registry.npmmirror.com/json5/-/json5-2.2.3.tgz",
"integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
"dev": true,
"optional": true
},
"loader-utils": {
"version": "2.0.4",
"resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.4.tgz",
"integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
"dev": true,
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
},
"vue-loader-v16": {
"version": "npm:vue-loader@16.8.3",
"resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-16.8.3.tgz",
"integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
}
}
} }
}, },
"@vue/cli-shared-utils": { "@vue/cli-shared-utils": {
@@ -10423,94 +10511,6 @@
} }
} }
}, },
"vue-loader-v16": {
"version": "npm:vue-loader@16.8.3",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
"integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
},
"dependencies": {
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"color-name": {
"version": "1.1.4",
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
"dev": true,
"optional": true
},
"has-flag": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
"dev": true,
"optional": true
},
"json5": {
"version": "2.2.3",
"resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
"integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
"dev": true,
"optional": true
},
"loader-utils": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
"integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
"dev": true,
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"supports-color": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
"dev": true,
"optional": true,
"requires": {
"has-flag": "^4.0.0"
}
}
}
},
"vue-router": { "vue-router": {
"version": "3.6.5", "version": "3.6.5",
"resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-3.6.5.tgz", "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-3.6.5.tgz",

2
src/App.vue
View File

@@ -15,7 +15,7 @@
#app { #app {
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background-color: #091a40; background-color: #fafafa;
// overflow: hidden; // overflow: hidden;
} }
</style> </style>

10
src/assets/css/index.scss
View File

@@ -99,7 +99,7 @@
background: transparent; background: transparent;
border: 1px solid rgba(255, 255, 255, .53); border: 1px solid rgba(255, 255, 255, .53);
border-radius: 4px; border-radius: 4px;
color: #fff; color: #333;
padding: 6px 10px; padding: 6px 10px;
font-size: 14px; font-size: 14px;
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
@@ -120,7 +120,7 @@
background-color: transparent; background-color: transparent;
font-size: 14px; font-size: 14px;
line-height: 1; line-height: 1;
color: #fff; color: #333;
&:hover{ &:hover{
border-color: rgba(255, 255, 255, .8); border-color: rgba(255, 255, 255, .8);
} }
@@ -142,7 +142,7 @@
border-width: 1px; border-width: 1px;
border: none; border: none;
cursor: pointer; cursor: pointer;
color: #fff; color: #333;
font-size: 15px; font-size: 15px;
&:hover, &:hover,
@@ -230,7 +230,7 @@
th.ve-table-header-th { th.ve-table-header-th {
background: #04004E; background: #04004E;
color: #FFF; color: #333;
border-color: $border-color; border-color: $border-color;
box-sizing: border-box; box-sizing: border-box;
line-height: 1; line-height: 1;
@@ -244,7 +244,7 @@
tr.ve-table-body-tr td.ve-table-expand-td, tr.ve-table-body-tr td.ve-table-expand-td,
tr.ve-table-expand-tr td.ve-table-expand-td { tr.ve-table-expand-tr td.ve-table-expand-td {
background: transparent; background: transparent;
color: #FFF; color: #333;
border-color: $border-color; border-color: $border-color;
box-sizing: border-box; box-sizing: border-box;
} }

14
src/assets/css/variable.scss
View File

@@ -1,12 +1,12 @@
// 颜色 // 颜色 - 浅色主题
$primary-color: #1890ff; $primary-color: #1890ff;
$primary-color-hl: rgb(41, 52, 67); $primary-color-hl: #40a9ff;
$default-color: #006569; $default-color: #1890ff;
$link: #1890ff; $link: #1890ff;
$active-color: rgb(0, 101, 105); $active-color: #096dd9;
$del-color: #ff1839; $del-color: #ff4d4f;
$content-background: #f3f5fa; $content-background: #ffffff;
$table-header-background: #d8eaff; $table-header-background: #f0f7ff;
$primary-color-rgba: rgba($color: $primary-color, $primary-color-rgba: rgba($color: $primary-color,
$alpha: 0.1, $alpha: 0.1,

BIN
src/assets/img/hg10.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 30 KiB

After

Width:  |  Height:  |  Size: 18 KiB

BIN
src/assets/img/hg110.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 30 KiB

BIN
src/assets/img/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 38 KiB

6
src/components/item-wrap/item-wrap.vue
View File

@@ -76,9 +76,9 @@ $item_title_content-height: calc(100% - 38px);
letter-spacing: 2px; letter-spacing: 2px;
background: linear-gradient( background: linear-gradient(
92deg, 92deg,
#acb1b7 0%, #1890ff 0%,
#00eaff 48.8525390625%, #40a9ff 48.8525390625%,
#01aaff 100% #096dd9 100%
); );
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;

2
src/views/dishboard.vue
View File

@@ -146,7 +146,7 @@
<style scoped> <style scoped>
.dashboard { .dashboard {
background: #0a1931; background: #0a1931;
color: white; color: #333;
padding: 20px; padding: 20px;
} }
.header { .header {

35
src/views/home.scss
View File

@@ -1,8 +1,9 @@
.scale-wrap { .scale-wrap {
color: #d3d6dd; color: #333333;
width: 1920px; width: 1920px;
height: 1080px; height: 1080px;
overflow: hidden; overflow: hidden;
// &.pageisScale { // &.pageisScale {
// position: absolute; // position: absolute;
// top: 50%; // top: 50%;
@@ -15,7 +16,7 @@
height: 100%; height: 100%;
padding: 16px 16px 10px 16px; padding: 16px 16px 10px 16px;
box-sizing: border-box; box-sizing: border-box;
background-image: url("../assets/img/u0.svg"); background-color: #f5f7fa;
background-size: cover; background-size: cover;
background-position: center center; background-position: center center;
} }
@@ -40,10 +41,10 @@
height: 56px; height: 56px;
.imgs { .imgs {
width: 240px; width: 177px;
height: 113px; /* height: 113px; */
margin-top: -1%; margin-top: 4px;
margin-left: 100px; margin-left: 150px;
} }
} }
@@ -71,11 +72,13 @@
right: 0; right: 0;
top: 30px; top: 30px;
font-size: 18px; font-size: 18px;
color: #000000;
display: flex; display: flex;
align-items: center; align-items: center;
.blq-icon-shezhi02 { .blq-icon-shezhi02 {
cursor: pointer; cursor: pointer;
color: #000000;
} }
} }
} }
@@ -94,7 +97,7 @@
font-weight: 900; font-weight: 900;
letter-spacing: 6px; letter-spacing: 6px;
width: 100%; width: 100%;
background: linear-gradient(92deg, #0072FF 0%, #00EAFF 48.8525390625%, #01AAFF 100%); background: linear-gradient(92deg, #1890ff 0%, #40a9ff 48.8525390625%, #096dd9 100%);
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
@@ -114,12 +117,12 @@
width: 130px; width: 130px;
height: 36px; height: 36px;
border-radius: 18px 0px 0px 18px; border-radius: 18px 0px 0px 18px;
color: #00FBF8; color: #1890ff;
text-indent: 26px; text-indent: 26px;
line-height: 36px; line-height: 36px;
font-size: 16px; font-size: 16px;
margin-right: 20px; margin-right: 20px;
background: linear-gradient(to right, rgba(76, 245, 255, .5), rgba(76, 245, 255, 0)); background: linear-gradient(to right, rgba(24, 144, 255, .1), rgba(24, 144, 255, 0));
} }
} }
} }
@@ -138,6 +141,7 @@
position: relative; position: relative;
text-indent: 10px; text-indent: 10px;
padding: 16px 0 10px 0; padding: 16px 0 10px 0;
&::before { &::before {
display: block; display: block;
content: " "; content: " ";
@@ -162,19 +166,19 @@
.setting_inner { .setting_inner {
box-sizing: border-box; box-sizing: border-box;
background: #FFF; background: #ffffff;
width: 340px; width: 340px;
height: 100%; height: 100%;
position: absolute; position: absolute;
right: 0px; right: 0px;
top: 0; top: 0;
z-index: 1; z-index: 1;
color: #000000; color: #333333;
box-shadow: 0 8px 10px -5px rgba(0, 0, 0, .2), 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12); box-shadow: 0 2px 8px rgba(0, 0, 0, .1), 0 4px 16px rgba(0, 0, 0, .08);
.setting_header { .setting_header {
font-size: 20px; font-size: 20px;
color: rgb(0, 0, 0); color: #333333;
font-weight: 900; font-weight: 900;
text-align: center; text-align: center;
line-height: 40px; line-height: 40px;
@@ -192,11 +196,12 @@
// display: flex; // display: flex;
.setting_label { .setting_label {
color: #555454; color: #666666;
} }
.setting_label_tip { .setting_label_tip {
font-size: 12px; font-size: 12px;
color: #838282; color: #999999;
} }
} }
} }

2
src/views/home.vue
View File

@@ -116,7 +116,7 @@ export default {
} }
.title-name{ .title-name{
color: white; color: #333;
font-size: 30px; font-size: 30px;
font-weight: 600; font-weight: 600;
margin-left: 20px; margin-left: 20px;

4
src/views/indexs/center-bottom.vue
View File

@@ -56,7 +56,7 @@ export default {
text: '', text: '',
left: 'center', left: 'center',
textStyle: { textStyle: {
color: '#DDDDDD', // 将原来的 #999 改为更亮的灰色 color: '#333', // 修改为深色
fontWeight: 'normal', fontWeight: 'normal',
fontSize: 12 fontSize: 12
} }
@@ -84,7 +84,7 @@ export default {
rich: { rich: {
name: { // 新增 name 样式 name: { // 新增 name 样式
fontSize: 14, fontSize: 14,
color: 'yellow', // 使用亮白色 color: '#333', // 修改为深色
padding: [0, 0, 5, 0] padding: [0, 0, 5, 0]
}, },
value: { value: {

44
src/views/indexs/center-map.vue
View File

@@ -307,7 +307,7 @@ export default {
], ],
}, },
textStyle: { textStyle: {
color: "#fff", color: "#333",
}, },
}, },
geo: { geo: {
@@ -348,7 +348,7 @@ export default {
backgroundColor: "rgba(0,0,0,.6)", backgroundColor: "rgba(0,0,0,.6)",
borderColor: "rgba(147, 235, 248, .8)", borderColor: "rgba(147, 235, 248, .8)",
textStyle: { textStyle: {
color: "#FFF", color: "#333",
}, },
}, },
label: { label: {
@@ -433,7 +433,7 @@ export default {
backgroundColor: "rgba(0,0,0,.6)", backgroundColor: "rgba(0,0,0,.6)",
borderColor: "rgba(147, 235, 248, .8)", borderColor: "rgba(147, 235, 248, .8)",
textStyle: { textStyle: {
color: "#FFF", color: "#333",
}, },
}, },
label: { label: {
@@ -445,11 +445,11 @@ export default {
fontSize: 11, fontSize: 11,
offset: [0, 2], offset: [0, 2],
position: "bottom", position: "bottom",
textBorderColor: "#fff", textBorderColor: "#333",
textShadowColor: "#000", textShadowColor: "#000",
textShadowBlur: 10, textShadowBlur: 10,
textBorderWidth: 0, textBorderWidth: 0,
color: "#FFF", color: "#333",
show: true, show: true,
}, },
// colorBy: "data", // colorBy: "data",
@@ -510,7 +510,7 @@ export default {
], ],
}, },
textStyle: { textStyle: {
color: "#fff", color: "#333",
}, },
}, },
geo: { geo: {
@@ -551,7 +551,7 @@ export default {
backgroundColor: "rgba(0,0,0,.6)", backgroundColor: "rgba(0,0,0,.6)",
borderColor: "rgba(147, 235, 248, .8)", borderColor: "rgba(147, 235, 248, .8)",
textStyle: { textStyle: {
color: "#FFF", color: "#333",
}, },
}, },
label: { label: {
@@ -636,7 +636,7 @@ export default {
backgroundColor: "rgba(0,0,0,.6)", backgroundColor: "rgba(0,0,0,.6)",
borderColor: "rgba(147, 235, 248, .8)", borderColor: "rgba(147, 235, 248, .8)",
textStyle: { textStyle: {
color: "#FFF", color: "#333",
}, },
}, },
label: { label: {
@@ -648,11 +648,11 @@ export default {
fontSize: 11, fontSize: 11,
offset: [0, 2], offset: [0, 2],
position: "bottom", position: "bottom",
textBorderColor: "#fff", textBorderColor: "#333",
textShadowColor: "#000", textShadowColor: "#000",
textShadowBlur: 10, textShadowBlur: 10,
textBorderWidth: 0, textBorderWidth: 0,
color: "#FFF", color: "#333",
show: true, show: true,
}, },
// colorBy: "data", // colorBy: "data",
@@ -719,9 +719,9 @@ export default {
letter-spacing: 6px; letter-spacing: 6px;
background: linear-gradient( background: linear-gradient(
92deg, 92deg,
#0072ff 0%, #1890ff 0%,
#00eaff 48.8525390625%, #40a9ff 48.8525390625%,
#01aaff 100% #096dd9 100%
); );
-webkit-background-clip: text; -webkit-background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
@@ -731,7 +731,7 @@ export default {
font-size: 28px; font-size: 28px;
font-weight: 900; font-weight: 900;
letter-spacing: 6px; letter-spacing: 6px;
color: white; color: #333;
margin: 0 10px; margin: 0 10px;
} }
.zuo, .zuo,
@@ -764,9 +764,9 @@ export default {
top: -25px; top: -25px;
width: 80px; width: 80px;
height: 28px; height: 28px;
border: 1px solid #00eded; border: 1px solid #1890ff;
border-radius: 10px; border-radius: 10px;
color: #00f7f6; color: #1890ff;
text-align: center; text-align: center;
line-height: 26px; line-height: 26px;
letter-spacing: 6px; letter-spacing: 6px;
@@ -781,9 +781,9 @@ export default {
top: 24px; top: 24px;
width: 100px; width: 100px;
height: 28px; height: 28px;
border: 1px solid #00eded; border: 1px solid #1890ff;
border-radius: 10px; border-radius: 10px;
color: white; color: #333;
text-align: center; text-align: center;
line-height: 26px; line-height: 26px;
letter-spacing: 6px; letter-spacing: 6px;
@@ -798,9 +798,9 @@ export default {
top: 24px; top: 24px;
width: 100px; width: 100px;
height: 28px; height: 28px;
border: 1px solid #00eded; border: 1px solid #1890ff;
border-radius: 10px; border-radius: 10px;
color: white; color: #333;
text-align: center; text-align: center;
line-height: 26px; line-height: 26px;
letter-spacing: 6px; letter-spacing: 6px;
@@ -816,9 +816,9 @@ export default {
top: 60px; top: 60px;
width: 100px; width: 100px;
height: 28px; height: 28px;
border: 1px solid #00eded; border: 1px solid #1890ff;
border-radius: 10px; border-radius: 10px;
color: white; color: #333;
text-align: center; text-align: center;
line-height: 26px; line-height: 26px;
letter-spacing: 6px; letter-spacing: 6px;

26
src/views/indexs/chart/baseChart.vue
View File

@@ -39,7 +39,7 @@ export default {
}, },
legend: { legend: {
data: ['碳减排量(kg)', '行驶里程(km)'], data: ['碳减排量(kg)', '行驶里程(km)'],
textStyle: { color: '#fff' } textStyle: { color: '#333' }
}, },
grid: { grid: {
left: '18%', left: '18%',
@@ -50,15 +50,15 @@ export default {
xAxis: { xAxis: {
type: 'category', type: 'category',
data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'], data: ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
axisLine: { lineStyle: { color: '#fff' } }, axisLine: { lineStyle: { color: '#333' } },
axisLabel: { color: '#fff' } axisLabel: { color: '#333' }
}, },
yAxis: [ yAxis: [
{ {
type: 'value', type: 'value',
// name: '碳减排量', // name: '碳减排量',
axisLine: { lineStyle: { color: '#fff' } }, axisLine: { lineStyle: { color: '#333' } },
axisLabel: { color: '#fff' }, axisLabel: { color: '#333' },
splitLine: { show: false }, splitLine: { show: false },
axisLabel: { axisLabel: {
formatter: '{value}kg' formatter: '{value}kg'
@@ -67,8 +67,8 @@ export default {
{ {
type: 'value', type: 'value',
// name: '行驶里程', // name: '行驶里程',
axisLine: { lineStyle: { color: '#fff' } }, axisLine: { lineStyle: { color: '#333' } },
axisLabel: { color: '#fff' }, axisLabel: { color: '#333' },
splitLine: { show: false }, splitLine: { show: false },
axisLabel: { axisLabel: {
formatter: '{value}km' formatter: '{value}km'
@@ -108,8 +108,8 @@ export default {
//subtext: '年度碳减排量', //subtext: '年度碳减排量',
left: 'center', left: 'center',
top: '40%', top: '40%',
textStyle: { color: '#fff', fontSize: 18 }, textStyle: { color: '#333', fontSize: 18 },
subtextStyle: { color: '#fff', fontSize: 18} subtextStyle: { color: '#333', fontSize: 18}
}, },
graphic: [ graphic: [
{ {
@@ -118,7 +118,7 @@ export default {
top: 'center', // 垂直居中 top: 'center', // 垂直居中
style: { style: {
text: '年\n度\n碳\n减\n排\n量', // 每个字符换行显示 text: '年\n度\n碳\n减\n排\n量', // 每个字符换行显示
fill: '#fff', fill: '#333',
font: '16px sans-serif', font: '16px sans-serif',
} }
} }
@@ -148,8 +148,8 @@ export default {
//subtext: '年度行驶里程', //subtext: '年度行驶里程',
left: 'center', left: 'center',
top: '40%', top: '40%',
textStyle: { color: '#fff', fontSize: 18 }, textStyle: { color: '#333', fontSize: 18 },
subtextStyle: { color: '#fff', fontSize: 12 } subtextStyle: { color: '#333', fontSize: 12 }
}, },
graphic: [ graphic: [
{ {
@@ -158,7 +158,7 @@ export default {
top: 'center', // 垂直居中 top: 'center', // 垂直居中
style: { style: {
text: '年\n度\n行\n驶\n里\n程', // 每个字符换行显示 text: '年\n度\n行\n驶\n里\n程', // 每个字符换行显示
fill: '#fff', fill: '#333',
font: '16px sans-serif', font: '16px sans-serif',
} }
} }

16
src/views/indexs/left-bottom.vue
View File

@@ -39,8 +39,8 @@ export default {
//subtext: '月度用氢量', //subtext: '月度用氢量',
left: 'center', left: 'center',
top: '40%', top: '40%',
textStyle: { color: '#fff', fontSize: 18 }, textStyle: { color: '#333', fontSize: 18 },
subtextStyle: { color: '#fff', fontSize: 18} subtextStyle: { color: '#333', fontSize: 18}
}, },
graphic: [ graphic: [
{ {
@@ -49,7 +49,7 @@ export default {
top: 'center', // 垂直居中 top: 'center', // 垂直居中
style: { style: {
text: '月\n度\n用\n氢\n量', // 每个字符换行显示 text: '月\n度\n用\n氢\n量', // 每个字符换行显示
fill: '#fff', fill: '#333',
font: '16px sans-serif', font: '16px sans-serif',
} }
} }
@@ -79,8 +79,8 @@ export default {
//subtext: '年度用氢量', //subtext: '年度用氢量',
left: 'center', left: 'center',
top: '40%', top: '40%',
textStyle: { color: '#fff', fontSize: 18 }, textStyle: { color: '#333', fontSize: 18 },
subtextStyle: { color: '#fff', fontSize: 12 } subtextStyle: { color: '#333', fontSize: 12 }
}, },
graphic: [ graphic: [
{ {
@@ -89,7 +89,7 @@ export default {
top: 'center', // 垂直居中 top: 'center', // 垂直居中
style: { style: {
text: '年\n度\n用\n氢\n量', // 每个字符换行显示 text: '年\n度\n用\n氢\n量', // 每个字符换行显示
fill: '#fff', fill: '#333',
font: '16px sans-serif', font: '16px sans-serif',
} }
} }
@@ -165,13 +165,13 @@ export default {
legend: { legend: {
//data: ['用氢量', '用电量', '行驶里程'], //data: ['用氢量', '用电量', '行驶里程'],
data: ['用氢量(kg)', '行驶里程(km)'], data: ['用氢量(kg)', '行驶里程(km)'],
textStyle: { color: '#eee' } textStyle: { color: '#333' }
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
axisLine: { lineStyle: { color: '#fff' } } axisLine: { lineStyle: { color: '#333' } }
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',

8
src/views/indexs/left-center.vue
View File

@@ -142,13 +142,13 @@ export default {
textStyle: { textStyle: {
rich: { rich: {
value: { value: {
color: "#ffffff", color: "#333",
fontSize: 24, fontSize: 24,
fontWeight: "bold", fontWeight: "bold",
lineHeight: 20, lineHeight: 20,
}, },
name: { name: {
color: "#ffffff", color: "#333",
lineHeight: 20, lineHeight: 20,
}, },
}, },
@@ -159,7 +159,7 @@ export default {
backgroundColor: "rgba(0,0,0,.6)", backgroundColor: "rgba(0,0,0,.6)",
borderColor: "rgba(147, 235, 248, .8)", borderColor: "rgba(147, 235, 248, .8)",
textStyle: { textStyle: {
color: "#FFF", color: "#333",
}, },
}, },
legend: { legend: {
@@ -177,7 +177,7 @@ export default {
// position: "outside", // position: "outside",
rich: { rich: {
b: { b: {
color: "#fff", color: "#333",
fontSize: 12, fontSize: 12,
lineHeight: 26, lineHeight: 26,
}, },

2
src/views/indexs/left-top.vue
View File

@@ -212,7 +212,7 @@
position: relative; position: relative;
width: 180px; width: 180px;
text-align: center; text-align: center;
color: #fff; color: #333;
} }
/* 卡片信息区域 */ /* 卡片信息区域 */

44
src/views/indexs/right-bottom.vue
View File

@@ -11,7 +11,11 @@
</thead> </thead>
</table> </table>
<div class="scroll-wrapper"> <div class="scroll-wrapper">
<vue-seamless-scroll :data="tableData" :class-option="scrollOptions" class="scroll-container"> <vue-seamless-scroll
:data="tableData"
:class-option="scrollOptions"
class="scroll-container"
>
<table> <table>
<tbody> <tbody>
<tr v-for="(item, index) in tableData" :key="index"> <tr v-for="(item, index) in tableData" :key="index">
@@ -29,7 +33,7 @@
<script> <script>
import vueSeamlessScroll from "vue-seamless-scroll"; import vueSeamlessScroll from "vue-seamless-scroll";
import { currentGET } from 'api/modules' import { currentGET } from "api/modules";
export default { export default {
components: { vueSeamlessScroll }, components: { vueSeamlessScroll },
data() { data() {
@@ -54,7 +58,6 @@ export default {
// { exchange: "英国碳市场", project: "CER", price: "87", region: "英国", exchangeColor: "#ffcc00", priceColor: "#ffcc00", regionColor: "#ffffff" }, // { exchange: "英国碳市场", project: "CER", price: "87", region: "英国", exchangeColor: "#ffcc00", priceColor: "#ffcc00", regionColor: "#ffffff" },
// { exchange: "热田碳排放交易所", project: "CER", price: "86", region: "韩国", exchangeColor: "#00ffcc", priceColor: "#ffffff", regionColor: "#ffffff" }, // { exchange: "热田碳排放交易所", project: "CER", price: "86", region: "韩国", exchangeColor: "#00ffcc", priceColor: "#ffffff", regionColor: "#ffffff" },
], ],
}; };
}, },
mounted() { mounted() {
@@ -62,33 +65,26 @@ export default {
}, },
methods: { methods: {
getExchangeData() { getExchangeData() {
currentGET("big4").then(res => { currentGET("big4").then((res) => {
console.log("交易所数据："); console.log("交易所数据：");
//console.log(this.tableData1); //console.log(this.tableData1);
console.log(res.data); console.log(res.data);
this.tableData = res.data; this.tableData = res.data;
this.tableData.forEach((item, index) => { this.tableData.forEach((item, index) => {
if (index % 2 !== 0) {
if(index % 2 !== 0) item.exchangeColor = "rgb(0, 186, 255)";
{ item.priceColor = "rgb(26, 26, 26)";
item.regionColor = "rgb(26, 26, 26)";
item.exchangeColor = "#00ffcc";
item.priceColor = "#ffffff";
item.regionColor = "#ffffff";
this.$set(this.tableData, index, item); this.$set(this.tableData, index, item);
} } else {
else
{
//console.log("偶数index: " + index); //console.log("偶数index: " + index);
item.exchangeColor = "#ffcc00"; item.exchangeColor = "rgb(221, 160, 221)";
item.priceColor = "#ffcc00"; item.priceColor = "rgb(221, 160, 221)";
item.regionColor = "#ffcc00"; item.regionColor = "rgb(221, 160, 221)";
this.$set(this.tableData, index, item); this.$set(this.tableData, index, item);
//this.$set(this.tableData, index, modifiedItem); //this.$set(this.tableData, index, modifiedItem);
} }
}); });
}); });
// console.log("转换后交易所数据："); // console.log("转换后交易所数据：");
// console.log(this.tableData); // console.log(this.tableData);
@@ -111,16 +107,20 @@ table {
text-align: left; text-align: left;
} }
th, td { th,
td {
padding: 12px; padding: 12px;
color: #fff; color: #333;
font-size: 14px; font-size: 14px;
width: 25%; width: 25%;
} }
thead { thead {
background: #013f6a; background: linear-gradient(135deg, #f8faff, #e6f3ff);
padding: 10%; padding: 10%;
color: #2c3e50;
border-bottom: 2px solid #3498db;
font-weight: 600;
} }
.scroll-wrapper { .scroll-wrapper {

4
src/views/indexs/right-center.vue
View File

@@ -21,13 +21,13 @@ export default {
type: 'category', type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
axisLabel: { axisLabel: {
color: 'white' color: '#333'
} }
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',
axisLabel: { axisLabel: {
color: 'white', color: '#333',
formatter: '{value}kg' formatter: '{value}kg'
}, },
splitLine: { splitLine: {

6
src/views/indexs/right-top.vue
View File

@@ -33,7 +33,7 @@ export default {
itemHeight: .0, itemHeight: .0,
itemGap: 10, itemGap: 10,
textStyle: { textStyle: {
color: 'white', color: '#333',
fontSize: 16, fontSize: 16,
fontWeight: 'normal', fontWeight: 'normal',
fontFamily: 'Arial, sans-serif' fontFamily: 'Arial, sans-serif'
@@ -58,7 +58,7 @@ export default {
name: '', name: '',
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'white' color: '#333'
} }
}, },
splitLine: { lineStyle: { color: '#081b42' } }, splitLine: { lineStyle: { color: '#081b42' } },
@@ -71,7 +71,7 @@ export default {
name: '', name: '',
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: 'white' color: '#333'
} }
}, },
splitLine: { lineStyle: { color: '#081b42' } }, splitLine: { lineStyle: { color: '#081b42' } },