邓洁: 用电量框样式

src/components/content/usedEle/UsedEle.vue

@@ -71,7 +71,7 @@ const bgImage = computed(() =>
 );
 watch(() => props.eleData, (now) => {
   getBasicData(now.frequencyChangerList)
-  // setValue()
+  setValue()
 }, {deep: true});
 watch(() => props.list, (now) => {
   eleData.value.forEach(item => {
@@ -86,22 +86,19 @@ watch(() => props.list, (now) => {
       }
     })
   })
-  // setValue()
+  setValue()
 }, {deep: true});
 onMounted(()=>{
-  // setValue()
+  setValueA()
+  setValueB()
 })
-const setValue=()=> {
-  let width = (electricityConsumptionMonthly.value * length.value.offsetHeight) / 10000;
-  console.log('width',electricityConsumptionMonthly.value,width)
+const setValueA=()=> {
+  let width = (5000 * length.value.offsetHeight) / 10000;
   valueA.value.style.height = `${width}px`;
-  // let flag = (params.wp.point * length.value.offsetWidth) / params.wp.max;
-  // point.value.style.left = `${flag}px`;
-  // if (width >= flag) {
-  //   value.value.style.background = "#F53839";
-  // } else {
-  //   value.value.style.background = "#60DDDE";
-  // }
+}
+const setValueB=()=> {
+  let width = (8000 * length.value.offsetHeight) / 10000;
+  valueB.value.style.height = `${width}px`;
 }
 const getBasicData = (data) => {
   let tranObj = {}
@@ -232,23 +229,6 @@ const getImageUrl = (name) => {
 </script>
 
 <style lang="scss" scoped>
-.container {
-  width: 60px;
-  height: 210px;
-  border-radius: 31px;
-  border: 1px solid #0f82af;
-  position: relative;
-  margin-bottom: 20px;
-
-  .value {
-    width: 60px;
-    height: inherit;
-    background: #60ddde;
-    border-radius: 31px;
-    transition: width 0.5s linear 0s;
-  }
-}
-
 :deep(.el-dialog__header) {
   padding: 0 !important;
 }
@@ -284,14 +264,29 @@ const getImageUrl = (name) => {
 
     .item {
       margin-top: 44px;
-      height: 37px;
       font-size: 28px;
       color: #38CAFB;
-      line-height: 37px;
       display: flex;
       flex-direction: column;
       align-items: center;
+      .container {
+        width: 60px;
+        height: 210px;
+        border-radius: 31px;
+        border: 1px solid #0f82af;
+        position: relative;
+        margin-bottom: 20px;
 
+        .value {
+          position: absolute;
+          bottom: 0;
+          width: 60px;
+          height: inherit;
+          background: #60ddde;
+          border-radius: 31px;
+          transition: width 0.5s linear 0s;
+        }
+      }
       > div:nth-child(2) {
         display: flex;