邓洁: 优化界面

src/components/content/usedEle/UsedEle.vue

@@ -59,7 +59,7 @@ const props = defineProps({
 let myEcharts = reactive({});
 const isVisited = ref(false);
 const eleData = ref([])
-const electricityConsumptionMonthly = ref()
+const electricityConsumptionMonthly = ref(0)
 const monthlySavings = ref(4000)
 const length = ref(null);
 const valueA = ref();
@@ -88,16 +88,18 @@ watch(() => props.list, (now) => {
   })
   setValueA()
 }, {deep: true});
-onMounted(()=>{
+onMounted(() => {
   setValueA()
   setValueB()
 })
-const setValueA=()=> {
+const setValueA = () => {
+  if (electricityConsumptionMonthly.value === 0 || length.value === null) return
   let width = (electricityConsumptionMonthly.value * length.value.offsetHeight) / 10000;
   valueA.value.style.height = `${width}px`;
 }
-const setValueB=()=> {
-  let width = (4000 * length.value.offsetHeight) / 10000;
+const setValueB = () => {
+  if (monthlySavings.value === 0 || length.value === null) return
+  let width = (monthlySavings.value * length.value.offsetHeight) / 10000;
   valueB.value.style.height = `${width}px`;
 }
 const getBasicData = (data) => {
@@ -234,15 +236,15 @@ const getImageUrl = (name) => {
 }
 
 #used-ele {
-  //flex:1;
+  margin-top: 40px;
   cursor: pointer;
   width: 830px;
   //height: 373px;
   color: aliceblue;
-  position: absolute;
-  top: 1220px;
+  //position: absolute;
+  //top: 1220px;
   //top: 1680px;
-  left: 68px;
+  //left: 68px;
   background-image: url(../../../assets/images/usedEle/bg.png);
   padding: 21px 62px 35px 62px;
 
@@ -270,6 +272,7 @@ const getImageUrl = (name) => {
       display: flex;
       flex-direction: column;
       align-items: center;
+
       .container {
         width: 60px;
         height: 210px;
@@ -288,6 +291,7 @@ const getImageUrl = (name) => {
           transition: width 0.5s linear 0s;
         }
       }
+
       > div:nth-child(2) {
         display: flex;