From 91ad9927f26505afe37afdbdcb566a96c6745d86 Mon Sep 17 00:00:00 2001 From: lankuixing <799745985@qq.com> Date: Mon, 19 Feb 2024 22:00:33 +0800 Subject: [PATCH] =?UTF-8?q?1=E3=80=81=E6=96=B0=E5=A2=9E=E4=B8=A4=E4=BE=A7?= =?UTF-8?q?=E7=9C=8B=E6=9D=BF=E5=B8=83=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/AirQuality.vue | 4 +++ components/CheckData.vue | 49 +++++++++++++++++++++++++++++ components/DeviceRun.vue | 31 ++++++++++++++++++ components/EnergyUse.vue | 33 +++++++++++++++++++ components/EnterpriseOperations.vue | 33 +++++++++++++++++++ components/LatestWarning.vue | 32 +++++++++++++++++++ components/OverviewPollutants.vue | 29 +++++++++++++++++ components/PollutantTrends.vue | 13 ++++++-- components/SecondaryTitle.vue | 16 +++++----- components/WarningStatistics.vue | 32 +++++++++++++++++++ pages/visual/PeakCoalView.vue | 38 +++++++++++++++++++--- 11 files changed, 296 insertions(+), 14 deletions(-) create mode 100644 components/CheckData.vue create mode 100644 components/DeviceRun.vue create mode 100644 components/EnergyUse.vue create mode 100644 components/EnterpriseOperations.vue create mode 100644 components/LatestWarning.vue create mode 100644 components/OverviewPollutants.vue create mode 100644 components/WarningStatistics.vue diff --git a/components/AirQuality.vue b/components/AirQuality.vue index 97093fb..6e7244b 100644 --- a/components/AirQuality.vue +++ b/components/AirQuality.vue @@ -22,5 +22,9 @@ export default { .air-quality-content { width: 100%; height: 601px; + background-image: linear-gradient(62deg, rgba(8,31,55,0.10) 0%, rgba(18,50,81,0.10) 100%); + border: 1px solid transparent; /* 先将边框颜色设置为透明 */ + border-image: linear-gradient(rgba(79,182,238,0), rgba(39,127,216,1)); /* 使用线性渐变作为边框图片 */ + border-image-slice: 1; /* 指定切分边框图像的位置 */ } diff --git a/components/CheckData.vue b/components/CheckData.vue new file mode 100644 index 0000000..044920f --- /dev/null +++ b/components/CheckData.vue @@ -0,0 +1,49 @@ + + + + + + diff --git a/components/DeviceRun.vue b/components/DeviceRun.vue new file mode 100644 index 0000000..3ca370a --- /dev/null +++ b/components/DeviceRun.vue @@ -0,0 +1,31 @@ + + + + + + diff --git a/components/EnergyUse.vue b/components/EnergyUse.vue new file mode 100644 index 0000000..aba9f0d --- /dev/null +++ b/components/EnergyUse.vue @@ -0,0 +1,33 @@ + + + + + + diff --git a/components/EnterpriseOperations.vue b/components/EnterpriseOperations.vue new file mode 100644 index 0000000..ce3c622 --- /dev/null +++ b/components/EnterpriseOperations.vue @@ -0,0 +1,33 @@ + + + + + + diff --git a/components/LatestWarning.vue b/components/LatestWarning.vue new file mode 100644 index 0000000..1755247 --- /dev/null +++ b/components/LatestWarning.vue @@ -0,0 +1,32 @@ + + + + + + diff --git a/components/OverviewPollutants.vue b/components/OverviewPollutants.vue new file mode 100644 index 0000000..3015270 --- /dev/null +++ b/components/OverviewPollutants.vue @@ -0,0 +1,29 @@ + + + + + + diff --git a/components/PollutantTrends.vue b/components/PollutantTrends.vue index 8158b39..5b7510f 100644 --- a/components/PollutantTrends.vue +++ b/components/PollutantTrends.vue @@ -1,13 +1,18 @@ @@ -15,5 +20,9 @@ export default { .pollutant-trends{ width: 100%; height: 601px; + background-image: linear-gradient(62deg, rgba(8,31,55,0.10) 0%, rgba(18,50,81,0.10) 100%); + border: 1px solid transparent; /* 先将边框颜色设置为透明 */ + border-image: linear-gradient(rgba(79,182,238,0), rgba(39,127,216,1)); /* 使用线性渐变作为边框图片 */ + border-image-slice: 1; /* 指定切分边框图像的位置 */ } diff --git a/components/SecondaryTitle.vue b/components/SecondaryTitle.vue index 9efa89c..9e95929 100644 --- a/components/SecondaryTitle.vue +++ b/components/SecondaryTitle.vue @@ -33,26 +33,28 @@ export default { background: url("assets/peakCoalImages/coommon/small-seconfary-title-bg.png") no-repeat; background-size: 100% 100%; .clear-fix; - &.longBg{ + + &.longBg { width: 100%; height: 84px; background: url("assets/peakCoalImages/coommon/long-seconfary-title-bg.png") no-repeat; background-size: 100% 100%; } - ._title{ + + ._title { padding-left: 100px; float: left; font-family: AlimamaShuHeiTi-Bold; font-size: 46.24px; - color: transparent; + color: #D8F0FF; letter-spacing: 3.04px; + text-shadow: 0 0 25px rgba(0, 145, 255, 0.50); font-weight: 700; - background-image: linear-gradient(rgba(0,145,255,1), rgba(0,145,255,0.5),rgba(216,240,255,1)); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; } - ._right{ + + ._right { float: right; + height: 100%; } } diff --git a/components/WarningStatistics.vue b/components/WarningStatistics.vue new file mode 100644 index 0000000..b9ead60 --- /dev/null +++ b/components/WarningStatistics.vue @@ -0,0 +1,32 @@ + + + + + + diff --git a/pages/visual/PeakCoalView.vue b/pages/visual/PeakCoalView.vue index 3409026..7aaa5de 100644 --- a/pages/visual/PeakCoalView.vue +++ b/pages/visual/PeakCoalView.vue @@ -8,11 +8,19 @@
- + - + + + + + + + + +
@@ -24,7 +32,23 @@
- + + + + + + + + + + + + + + + + +
@@ -136,12 +160,12 @@ body, html, #__nuxt, #__layout { width: 2935px; height: 2721px; background: url("assets/peakCoalImages/left/left-content-bg.png") no-repeat center 60px; - padding: 206px 476px 100px 412px; + padding: 300px 476px 100px 412px; .left-data-panel { height: 100%; width: 100%; - + transform: rotate(2deg); } } @@ -152,8 +176,12 @@ body, html, #__nuxt, #__layout { width: 2935px; height: 2721px; background: url("assets/peakCoalImages/right/right-content-bg.png") no-repeat center 60px; + padding: 300px 476px 100px 480px; .right-data-panel { + height: 100%; + width: 100%; + transform: rotate(-2deg); } }