vue项目中css样式如何使用data中定义的动态变量

直接上代码：
在这里是因为需要根据接口返回的数据控制对应父级盒子的高度以及子级盒子的宽度，所以需要用到动态样式。具体代码如下：

<template>
  <el-row class="el-row-flex" :style="styleVar" :gutter="10">
    <el-col v-for="item in list" :key="item.id" :span="24" class="caa" :style="styleVar1">
      <el-card class="component-card" shadow="never">
        <div class="data-panel-body" >
          <img class="imgborer" :src="item.logoUrl"/>
          <div class="summary">
            <p class="count">{{ item.countUrl }}</p>
            <p class="title">{{ item.name }}</p>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import { queryCustomData , queryDataPanel } from "@/api/system/..";
export default {
  props: {
    url: String,
    dataList: {
      type: Array,
      default: () => defaultDataList,
    },
    isReal:String
  },
  data() {
    return {
      list: [],
      dialogVisible:false,
      src:'',
      title:'',
      height:100,// 初始值
      flexBasis:100 // 初始值
    };
  },
  computed:{
    styleVar(){
      return {
        'height':this.height+'%'
      }
    },
    styleVar1(){
      return {
        'flex-basis':this.flexBasis+'%'
      }
    },
  },
  mounted() {
    if(this.isReal=='1'){
      queryCustomData(this.url).then((res) => {
        this.list = res.data;
        if(this.list.length<=5){
          this.height=100
          this.flexBasis = this.list.length/5 == 0 ? 20 : 100/this.list.length
        }else{
          var hs  = this.list.length/5 == 0 ? this.list.length/5 : Math.floor(this.list.length/5)+1
          this.flexBasis = 20
          this.height=this.height/hs
        }
      });
    }else{
      queryDataPanel().then((res)=>{
        this.list = res.data;
        if(this.list.length<=5){
          this.height=100
          this.flexBasis = this.list.length/5 == 0 ? 20 : 100/this.list.length
        }else{
          var hs  = this.list.length/5 == 0 ? this.list.length/5 : Math.floor(this.list.length/5)+1
          this.flexBasis = 20
          this.height=this.height/hs
        }
      })
    }
  },
};
</script>

<style scoped lang="scss">
.el-row-flex {
  display: flex;
  //动态样式
  height: var('height');
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:flex-start;
  padding-bottom: 10px;
}
.caa{
   //动态样式
  flex-basis: var('flex-basis');
  margin-bottom:10px;
}
.context{
  width: 100%;
  height: 500px;
  overflow-y: scroll;
}
.iframe{
  width: 100%;
  height: 100%;
}
.el-col {
  height: 100%;
}
.el-dialog__wrapper >>> .el-dialog__body{
  padding: 10px 20px !important;
}
.el-dialog__wrapper >>> .el-dialog__footer{
  text-align: center !important;
}
.component-card ::v-deep  .el-card__body {
  padding: 0;
  height: 100%;
}

.data-panel-body {
  padding-left: 30px;
  height: 100%;
  display: flex;
  align-items: center;
}

.data-panel-body img {
  width: 66px;
  height: 66px;
  margin-right: 16px;
  border-radius: 50%;
  text-align: center;
  line-height: 66px;
  font-size: 36px;
  flex-shrink: 0;
}

.data-panel-body .summary {
  margin-top: -10px;
}
.data-panel-body .count {
  font-size: 18px;
  line-height: 46px;
  height: 46px;
  font-weight: bold;
  margin: 0px;
  padding: 0px;
}

.data-panel-body .title {
  font-size: 14px;
  color: #666;
  line-height: 18px;
  margin: 0px;
  padding: 0px;
}
.data-panel-body .imgborer:hover{
  border: 2px solid #ffffff;
}
/* 设置滚动条的样式 */
::-webkit-scrollbar {
  width: 2px;
  height: 2px;
  background-color: transparent;
}

::-webkit-scrollbar:hover {
  background-color: rgb(255, 255, 255);
}

/* 滚动槽/外层轨道 */
::-webkit-scrollbar-track {
  width: 2px;
  height: 2px;
  border-radius: 2px;
  -webkit-box-shadow: inset 0 0 2px  rgb(255, 255, 255);
  background-color: transparent;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  min-height: 2px;
  min-width: 2px;
  border-radius: 2px;
  -webkit-box-shadow: inset 0 0 2px  rgb(255, 255, 255);
}

</style>