diff --git a/screen.png b/screen.png new file mode 100644 index 0000000..558cca2 Binary files /dev/null and b/screen.png differ diff --git a/src/assets/css/index.scss b/src/assets/css/index.scss index 169a45c..f968826 100644 --- a/src/assets/css/index.scss +++ b/src/assets/css/index.scss @@ -47,7 +47,7 @@ &::-webkit-scrollbar-thumb { //滚动条的设置 - background-color: rgba(25, 118, 210, 0); + background-color: rgba(0, 212, 170, 0); background-clip: padding-box; border-radius: 4px; } @@ -55,7 +55,7 @@ &:hover { &::-webkit-scrollbar-thumb { //滚动条的设置 - background-color: rgba(25, 118, 210, 0.3); + background-color: rgba(0, 212, 170, 0.3); background-clip: padding-box; border-radius: 4px; } @@ -75,7 +75,7 @@ &::-webkit-scrollbar-thumb:hover { - background-color: rgba(25, 118, 210, .5); + background-color: rgba(0, 212, 170, .5); } } @@ -106,7 +106,7 @@ &:focus { outline: none; - border-color: #1976d2; + border-color: #00D4AA; } } @@ -126,7 +126,7 @@ } &:focus { outline: none; - border-color: #1976d2; + border-color: #00D4AA; } } @@ -136,9 +136,9 @@ .yh-big-button { width: 53px; height: 26px; - background: #1976d2; + background: #00D4AA; border-radius: 4px; - // border-color: #1976d2; + // border-color: #00D4AA; border-width: 1px; border: none; cursor: pointer; @@ -147,8 +147,8 @@ &:hover, &:focus { - // border-color: #1565c0; - background: #1565c0; + // border-color: #00bfa5; + background: #00bfa5; } } @@ -195,13 +195,13 @@ &::-webkit-scrollbar-thumb { //滚动条的设置 - background-color: rgba(25, 118, 210, 0.3); + background-color: rgba(0, 212, 170, 0.3); background-clip: padding-box; border-radius: 4px; } &::-webkit-scrollbar-thumb:hover { - background-color: rgba(25, 118, 210, .5); + background-color: rgba(0, 212, 170, .5); } .ve-table-content { @@ -256,7 +256,7 @@ } &.ve-table-row-hover tr.ve-table-body-tr:hover td { - background-color: rgba(25, 118, 210, 0.08); + background-color: rgba(0, 212, 170, 0.08); box-sizing: border-box; } } diff --git a/src/assets/css/modules/variables.scss b/src/assets/css/modules/variables.scss index 23140e0..2a40683 100644 --- a/src/assets/css/modules/variables.scss +++ b/src/assets/css/modules/variables.scss @@ -1,104 +1,109 @@ -// 颜色 +// 颜色 - 亮绿色主题 $colors: ( - "primary": #1976d2, - "info-1": #2196f3, - "info": #1e88e5, - "white": #ffffff, - "light": #f5f7fa, - "grey-1": #999999, - "grey": #666666, - "dark-1": #333333, - "dark": #222222, - "black-1": #333333, - "black": #000000, - "icon": #1976d2, - // 新增浅色主题专用颜色 - "bg-light": #fafbfc, - "bg-lighter": #ffffff, - "border-light": #e4e7ed, - "text-secondary": #606266, - "text-regular": #909399 + "primary": #00D4AA, + "info-1": #1de9b6, + "info": #00bfa5, + "white": #ffffff, + "light": #f5f7fa, + "grey-1": #999999, + "grey": #666666, + "dark-1": #333333, + "dark": #222222, + "black-1": #333333, + "black": #000000, + "icon": #00D4AA, + // 新增浅色主题专用颜色 + "bg-light": #f7f9fb, + "bg-lighter": #ffffff, + "border-light": #e4e7ed, + "text-secondary": #606266, + "text-regular": #909399 ); // 字体大小 $base-font-size: 0.2rem; $font-sizes: ( - xxs: 0.1, - //8px + xxs: 0.1, + //8px xs: 0.125, - //10px + //10px sm: 0.2875, - //12px + //12px md: 0.1625, - //13px + //13px lg: 0.175, - //14px + //14px xl: 0.2, - //16px + //16px xxl: 0.225, - //18px + //18px xxxl: 0.25 //20px,,,, ); // 宽高 .w-100 { - width: 100%; + width: 100%; } + .h-100 { - height: 100%; + height: 100%; } //flex .flex { - display: flex; + display: flex; } + .flex-column { - flex-direction: column; + flex-direction: column; } + .flex-wrap { - flex-wrap: wrap; + flex-wrap: wrap; } + .flex-nowrap { - flex-wrap: nowrap; + flex-wrap: nowrap; } + $flex-jc: ( - start: flex-start, - end: flex-end, - center: center, - between: space-between, - around: space-around, - evenly: space-evenly, + start: flex-start, + end: flex-end, + center: center, + between: space-between, + around: space-around, + evenly: space-evenly, ); $flex-ai: ( - start: flex-start, - end: flex-end, - center: center, - stretch: stretch, + start: flex-start, + end: flex-end, + center: center, + stretch: stretch, ); .flex-1 { - flex: 1; + flex: 1; } //.mt-1 => margin top //spacing $spacing-types: ( - m: margin, - p: padding, + m: margin, + p: padding, ); $spacing-directions: ( - t: top, - r: right, - b: bottom, - l: left, + t: top, + r: right, + b: bottom, + l: left, ); $spacing-base-size: 0.5rem; $spacing-sizes: ( - 0: 0, - 1: 0.5, - 2: 1, - 3: 1.5, - 4: 2, - 5: 2.5, -); + 0: 0, + 1: 0.5, + 2: 1, + 3: 1.5, + 4: 2, + 5: 2.5, +); \ No newline at end of file diff --git a/src/assets/css/variable.scss b/src/assets/css/variable.scss index 6541052..ff19c9c 100644 --- a/src/assets/css/variable.scss +++ b/src/assets/css/variable.scss @@ -1,12 +1,12 @@ -// 颜色 -$primary-color: #1890ff; -$primary-color-hl: rgb(41, 52, 67); -$default-color: #006569; -$link: #1890ff; -$active-color: rgb(0, 101, 105); +// 颜色 - 亮绿色主题 +$primary-color: #00D4AA; +$primary-color-hl: rgb(0, 212, 170); +$default-color: #00bfa5; +$link: #00D4AA; +$active-color: rgb(0, 191, 165); $del-color: #ff1839; -$content-background: #f3f5fa; -$table-header-background: #d8eaff; +$content-background: #f8fafb; +$table-header-background: #d0f4ea; $primary-color-rgba: rgba($color: $primary-color, $alpha: 0.1, diff --git a/src/assets/img/new/banner.png b/src/assets/img/new/banner.png new file mode 100644 index 0000000..a5d1b8e Binary files /dev/null and b/src/assets/img/new/banner.png differ diff --git a/src/assets/img/new/btn.png b/src/assets/img/new/btn.png new file mode 100644 index 0000000..ffdd871 Binary files /dev/null and b/src/assets/img/new/btn.png differ diff --git a/src/assets/img/new/car.png b/src/assets/img/new/car.png new file mode 100644 index 0000000..8c2c8d5 Binary files /dev/null and b/src/assets/img/new/car.png differ diff --git a/src/assets/img/new/chat.png b/src/assets/img/new/chat.png new file mode 100644 index 0000000..b99528f Binary files /dev/null and b/src/assets/img/new/chat.png differ diff --git a/src/assets/img/new/chilun.png b/src/assets/img/new/chilun.png new file mode 100644 index 0000000..67ecf96 Binary files /dev/null and b/src/assets/img/new/chilun.png differ diff --git a/src/assets/img/new/dot.png b/src/assets/img/new/dot.png new file mode 100644 index 0000000..4736e8c Binary files /dev/null and b/src/assets/img/new/dot.png differ diff --git a/src/assets/img/new/logo.png b/src/assets/img/new/logo.png new file mode 100644 index 0000000..f9ad2e1 Binary files /dev/null and b/src/assets/img/new/logo.png differ diff --git a/src/assets/img/new/yezi.png b/src/assets/img/new/yezi.png new file mode 100644 index 0000000..df8e3f2 Binary files /dev/null and b/src/assets/img/new/yezi.png differ diff --git a/src/components/item-wrap/item-wrap.vue b/src/components/item-wrap/item-wrap.vue index b0aa262..7d887da 100644 --- a/src/components/item-wrap/item-wrap.vue +++ b/src/components/item-wrap/item-wrap.vue @@ -6,18 +6,17 @@ * @FilePath: \web-pc\src\pages\big-screen\components\item-wrap\item-wrap.vue --> - \ No newline at end of file + diff --git a/src/views/home.scss b/src/views/home.scss index 672e628..c6b70da 100644 --- a/src/views/home.scss +++ b/src/views/home.scss @@ -14,9 +14,9 @@ .bg { width: 100%; height: 100%; - padding: 16px 16px 10px 16px; + padding: 16px; box-sizing: border-box; - background-color: #fafbfc; + background-color: #f7f9fb; background-image: none; background-size: cover; background-position: center center; @@ -25,88 +25,77 @@ .host-body { height: 100%; + .d-flex { + display: flex; + justify-content: space-between; + } + .title_wrap { - height: 60px; - background-image: url("../assets/img/top.png"); - background-size: cover; - background-position: center center; + height: 66px; position: relative; - margin-bottom: 4px; + margin-bottom: 16px; + display: flex; + align-items: center; + background-color: #fff; + padding: 0 24px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); - .guang { - position: absolute; - bottom: -26px; - background-image: url("../assets/img/guang.png"); - background-position: 80px center; - width: 100%; - height: 56px; + .logo { + flex: 1; + display: flex; + justify-content: flex-start; - .imgs { - width: 320px; - height: 35px; - margin-top: -0.6%; - } - - .imgs2 { - width: 236px; - /* height: 60px; */ - margin-left: 150px; - margin-top: -9px; + img { + height: 40px; + width: auto; } } - .zuojuxing, - .youjuxing { - position: absolute; - top: -2px; - width: 140px; - height: 6px; - background-image: url("../assets/img/headers/juxing1.png"); - } + .title { + flex: 0 0 auto; + text-align: center; - .zuojuxing { - - left: 11%; - } - - .youjuxing { - right: 11%; - transform: rotate(180deg); + .title-text { + color: #00D4AA; + font-family: Audiowide, sans-serif; + font-weight: 400; + font-size: 32px; + letter-spacing: 2px; + } } .timers { - position: absolute; - right: 0; - top: 30px; - font-size: 18px; + display: flex; + justify-content: flex-end; + border: 1px solid #d1fae5; + box-sizing: border-box; + background: #ecfdf5; + padding: 8px 20px; + border-radius: 36px; + align-items: center; + width: fit-content; + margin-left: auto; display: flex; align-items: center; + color: #065f46; + font-family: "PingFang TC"; + font-weight: 600; + font-size: 14px; + line-height: 17px; .blq-icon-shezhi02 { cursor: pointer; + font-size: 18px; + color: #00D4AA; + transition: all 0.3s ease; + + &:hover { + color: #00bfa5; + transform: rotate(90deg); + } } } } - - .title { - position: relative; - // width: 500px; - text-align: center; - background-size: cover; - color: transparent; - height: 60px; - line-height: 46px; - - .title-text { - font-size: 38px; - font-weight: 900; - letter-spacing: 6px; - width: 100%; - background: linear-gradient(92deg, #1976d2 0%, #2196f3 48.8525390625%, #42a5f5 100%); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - } - } } @@ -122,12 +111,12 @@ width: 130px; height: 36px; border-radius: 18px 0px 0px 18px; - color: #1976d2; + color: #00D4AA; text-indent: 26px; line-height: 36px; font-size: 16px; margin-right: 20px; - background: linear-gradient(to right, rgba(25, 118, 210, 0.15), rgba(25, 118, 210, 0)); + background: linear-gradient(to right, rgba(0, 212, 170, 0.15), rgba(0, 212, 170, 0)); } } } diff --git a/src/views/home.vue b/src/views/home.vue index 8c5fac8..2116a22 100644 --- a/src/views/home.vue +++ b/src/views/home.vue @@ -18,29 +18,23 @@
-
-
-
- - - + -
-
- - - - Lingniu ESG Link +
+ Lingniu ESG Link +
+
+
+ {{ dateYear }} {{ dateWeek }} {{ dateDay }} +
-
-
- {{ dateYear }} {{ dateWeek }} {{ dateDay }} - - + alt="" + />
diff --git a/src/views/indexs/center-bottom.vue b/src/views/indexs/center-bottom.vue index 9af4250..14d0a38 100644 --- a/src/views/indexs/center-bottom.vue +++ b/src/views/indexs/center-bottom.vue @@ -7,6 +7,7 @@ diff --git a/src/views/indexs/index.vue b/src/views/indexs/index.vue index f3a9c02..df22e1c 100644 --- a/src/views/indexs/index.vue +++ b/src/views/indexs/index.vue @@ -6,65 +6,122 @@ * @FilePath: \web-pc\src\pages\big-screen\view\indexs\index.vue --> diff --git a/src/views/indexs/left-bottom.vue b/src/views/indexs/left-bottom.vue index ec87843..c67c338 100644 --- a/src/views/indexs/left-bottom.vue +++ b/src/views/indexs/left-bottom.vue @@ -32,8 +32,20 @@ export default { }, mounted() { this.getMonthData(); + window.addEventListener("resize", this.handleResize); + }, + beforeDestroy() { + window.removeEventListener("resize", this.handleResize); + if (this.chart) { + this.chart.dispose(); + } }, methods: { + handleResize() { + if (this.chart) { + this.chart.resize(); + } + }, getMonthData() { currentGET("big2").then((res) => { console.log("月度碳减排"); @@ -55,91 +67,97 @@ export default { }); }, initChart() { - let chart = echarts.init(this.$refs.chart); - let option = { - grid:{ - left:'13%' - }, - tooltip: { - trigger: "axis", - backgroundColor: "rgba(0, 0, 0, 0.8)", - borderColor: "#333333", - textStyle: { color: "#ffffff" }, - // formatter: (params) => { - // console.log(params) - // return `用氢量：${params[0].value}kg
用电量：${params[1].value}kWh
行驶里程：${params[2].value}km`; - // } - formatter: (params) => { - console.log(params); - return `用氢量：${params[0].value}kg
行驶里程：${params[1].value}km`; + this.$nextTick(() => { + if (!this.$refs.chart) return; + + const chart = echarts.init(this.$refs.chart); + let option = { + grid: { + left: "13%", }, - }, - legend: { - //data: ['用氢量', '用电量', '行驶里程'], - data: ["用氢量", "行驶里程"], - //data: ['用电量', '行驶里程'], - textStyle: { color: "#333333" }, - }, - xAxis: { - type: "category", - boundaryGap: false, - data: [ - "1月", - "2月", - "3月", - "4月", - "5月", - "6月", - "7月", - "8月", - "9月", - "10月", - "11月", - "12月", + tooltip: { + trigger: "axis", + backgroundColor: "rgba(0, 0, 0, 0.8)", + borderColor: "#333333", + textStyle: { color: "#ffffff" }, + // formatter: (params) => { + // console.log(params) + // return `用氢量：${params[0].value}kg
用电量：${params[1].value}kWh
行驶里程：${params[2].value}km`; + // } + formatter: (params) => { + console.log(params); + return `用氢量：${params[0].value}kg
行驶里程：${params[1].value}km`; + }, + }, + legend: { + //data: ['用氢量', '用电量', '行驶里程'], + data: ["用氢量", "行驶里程"], + //data: ['用电量', '行驶里程'], + textStyle: { color: "#333333" }, + }, + xAxis: { + type: "category", + boundaryGap: false, + data: [ + "1月", + "2月", + "3月", + "4月", + "5月", + "6月", + "7月", + "8月", + "9月", + "10月", + "11月", + "12月", + ], + axisLine: { lineStyle: { color: "#666666" } }, + axisLabel: { color: "#333333" }, + }, + yAxis: { + type: "value", + axisLine: { lineStyle: { color: "#666666" } }, + splitLine: { lineStyle: { color: "#e0e0e0" } }, + axisLabel: { + color: "#333333", + //align: 'left', + // margin:70, + //width: 100, //将内容的宽度固定 + // overflow: 'truncate', //超出的部分截断 + formatter: "{value}kg", + }, + }, + series: [ + { + name: "用氢量", + type: "line", + //data: [5000, 7000, 10000, 8000, 6000, 11000, 9000, 7000, 5000, 7050, 10020, 8900], + data: this.monthHydrogen, + // data: [11865.86,11687.64,18874.66,11311.62, 0, 0, 0, 0, 0, 0, 0, 0], + itemStyle: { color: "#3399FF" }, + }, + // { + // name: '用电量', + // type: 'line', + // //data: [6000, 8000, 12000, 10000, 5000, 10000, 9500, 7200, 5000, 3000, 10000, 8500], + // data: [60, 80, 120, 0, 0, 0, 0, 0, 0, 0, 0, 0], + // itemStyle: { color: '#3f89ff' } + // }, + { + name: "行驶里程", + type: "line", + //data: [4000, 9000, 9500, 7000, 9000, 12000, 10000, 8000, 5000, 7000, 10000, 8000], + data: this.monthMileage, + //data: [20219.1,332767.1,1671592.3,330955, 0, 0, 0, 0, 0, 0, 0, 0], + itemStyle: { color: "#a060ff" }, + }, ], - axisLine: { lineStyle: { color: "#666666" } }, - axisLabel: { color: "#333333" }, - }, - yAxis: { - type: "value", - axisLine: { lineStyle: { color: "#666666" } }, - splitLine: { lineStyle: { color: "#e0e0e0" } }, - axisLabel: { - color: "#333333", - //align: 'left', - // margin:70, - //width: 100, //将内容的宽度固定 - // overflow: 'truncate', //超出的部分截断 - formatter: "{value}kg", - }, - }, - series: [ - { - name: "用氢量", - type: "line", - //data: [5000, 7000, 10000, 8000, 6000, 11000, 9000, 7000, 5000, 7050, 10020, 8900], - data: this.monthHydrogen, - // data: [11865.86,11687.64,18874.66,11311.62, 0, 0, 0, 0, 0, 0, 0, 0], - itemStyle: { color: "#3399FF" }, - }, - // { - // name: '用电量', - // type: 'line', - // //data: [6000, 8000, 12000, 10000, 5000, 10000, 9500, 7200, 5000, 3000, 10000, 8500], - // data: [60, 80, 120, 0, 0, 0, 0, 0, 0, 0, 0, 0], - // itemStyle: { color: '#3f89ff' } - // }, - { - name: "行驶里程", - type: "line", - //data: [4000, 9000, 9500, 7000, 9000, 12000, 10000, 8000, 5000, 7000, 10000, 8000], - data: this.monthMileage, - //data: [20219.1,332767.1,1671592.3,330955, 0, 0, 0, 0, 0, 0, 0, 0], - itemStyle: { color: "#a060ff" }, - }, - ], - }; - chart.setOption(option); + }; + chart.setOption(option); + this.chart = chart; + this.chart.resize(); + }); }, }, }; diff --git a/src/views/indexs/left-center.vue b/src/views/indexs/left-center.vue index 26facee..a25c8b9 100644 --- a/src/views/indexs/left-center.vue +++ b/src/views/indexs/left-center.vue @@ -6,14 +6,20 @@ * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue --> - \ No newline at end of file + diff --git a/src/views/indexs/left-top.vue b/src/views/indexs/left-top.vue index 62b8692..6ca0f5a 100644 --- a/src/views/indexs/left-top.vue +++ b/src/views/indexs/left-top.vue @@ -1,100 +1,64 @@