邓洁: 优化界面

src/components/content/usedEle/UsedEle.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="used-ele" :style="{ backgroundImage: 'url(' +getImageUrl(bgImage)+')' }" @click="handleOpenChart">
+  <div id="used-ele" :style="{ backgroundColor: bgImage }" @click="handleOpenChart">
     <div class="content">
       <div class="item">
         <div class="container" ref="length">
@@ -19,6 +19,8 @@
           <span>当月节省量：{{ monthlySavings }}kwh</span>
         </div>
       </div>
+      <div class="ele-left-bottom-icon"></div>
+      <div class="ele-right-bottom-icon"></div>
     </div>
     <div class="digital-tunnel">
       <el-dialog :close-on-click-modal="false" v-model="isVisited" width="2175px" :modal="false">
@@ -39,7 +41,7 @@
           </div>
         </div>
         <div class="loading-block" v-if="showLoading">
-          <div class="loading" ></div>
+          <div class="loading"></div>
           <span>加载中...</span>
         </div>
         <div class="chat-dialog" v-else>
@@ -56,6 +58,7 @@
 <script setup>
 import * as echarts from 'echarts';
 import {dateFormat} from "@/utils/date.js";
+
 const props = defineProps({
   list: Array,
   eleData: Array
@@ -67,17 +70,17 @@ const electricityConsumptionMonthly = ref(0)
 const monthlySavings = ref(4000)
 const length = ref(null);
 const valueA = ref();
-const month = ref(dateFormat('',true));
+const month = ref(dateFormat('', true));
 const valueB = ref(monthlySavings.value);
 const bgImage = computed(() =>
     isVisited.value
-        ? "bpq_active.png"
-        : "bg.png"
+        ? "#2E5589"
+        : "rgba(6,34,71,0.78)"
 );
 watch(() => props.eleData, (now) => {
-  if(now.frequencyChangerList.length===0){
-    electricityConsumptionMonthly.value=0
-  }else {
+  if (now.frequencyChangerList.length === 0) {
+    electricityConsumptionMonthly.value = 0
+  } else {
     getBasicData(now.frequencyChangerList)
   }
   setValueA()
@@ -113,7 +116,7 @@ const setValueB = () => {
   valueB.value.style.height = `${width}px`;
 }
 const getBasicData = (data) => {
-    electricityConsumptionMonthly.value = data[0].electricityConsumptionMonthly
+  electricityConsumptionMonthly.value = data[0].electricityConsumptionMonthly
 }
 const handleOpenChart = () => {
   console.log('用电量弹窗')
@@ -238,12 +241,31 @@ const getImageUrl = (name) => {
   width: 830px;
   //height: 373px;
   color: aliceblue;
-  //position: absolute;
-  //top: 1220px;
-  //top: 1680px;
-  //left: 68px;
-  background-image: url(../../../assets/images/usedEle/bg.png);
+  border: 2px solid #0f82af;
+  background: rgba(6, 34, 71, 0.78);
+  border-radius: 20px;
   padding: 21px 62px 35px 62px;
+  position: relative;
+
+  .ele-left-bottom-icon {
+    position: absolute;
+    bottom: -3px;
+    left: -3px;
+    width: 41px;
+    height: 41px;
+    background-image: url(@/assets/images/badGasInfo/sp_jz.png);
+    transform: rotate(-90deg);
+  }
+
+  .ele-right-bottom-icon {
+    position: absolute;
+    bottom: -3px;
+    right: -3px;
+    width: 41px;
+    height: 41px;
+    background-image: url(@/assets/images/badGasInfo/sp_jz.png);
+    transform: rotate(180deg);
+  }
 
   .title {
     width: 96px;
@@ -274,7 +296,7 @@ const getImageUrl = (name) => {
         width: 60px;
         height: 210px;
         border-radius: 31px;
-        border: 1px solid #0f82af;
+        border: 1px solid rgba(105, 231, 253, 1);
         position: relative;
         margin-bottom: 20px;
 
@@ -283,7 +305,7 @@ const getImageUrl = (name) => {
           bottom: 0;
           width: 60px;
           height: inherit;
-          background: #60ddde;
+          background: linear-gradient(180deg, #38CAFB 0%, #2775E7 100%);
           border-radius: 31px;
           transition: width 0.5s linear 0s;
         }