动态style定义背景渐变

<template>

  <div class="hotBar">

    <div v-for="(item, index) in data" :key="index" class="item">

    <!-- { {item}} -->

      <div

        :style="{

          color: setfontColor(index),

        }"

        class="title"

      >

        <span class="index">

          { { index + 1 }}

        </span>

        <span class="name"> { { item.name }}</span>

      </div>

      <div class="bar">

        <div

          class="main"

          :style="{

            background: `linear-gradient(to right,${setbgc(index)},${setBto(

              index

            )})`,

            width: setWidth(data[0].data, item.data),

          }"

        ></div>

        <div

          :style="{

            color: setfontColor(index),

          }"

          class="fontsize"

        >

          { { item.data }}件

        </div>

        <!-- <div>  <span>{ {item.data}}件</span></div> -->

      </div>

    </div>

  </div>

</template>

<script>

export default {

  components: {},

  props: {

    data: Array,

  },

  data() {

    return {

      sum: 0,

      dataList: this.data.data,

      color: [

        'rgba(241,149,32,1)',

        'rgba(7,246,255,1)',

        'rgba(249,213,137,1)',

        'rgba(4,198,120,1)',

        'rgba(172,108,224,1)',

        'rgba(255,137,137,1)',

        'rgba(25,153,213,1)',

        'rgba(115,160,250,1)',

        'rgba(47,255,254,1)',

        'rgba(56,154,255,1)',

      ],

      colorBottom: [

        'rgba(241,149,32,0.2)',

        'rgba(7,246,255,0.2)',

        'rgba(249,213,137,0.2)',

        'rgba(4,198,120,0.2)',

        'rgba(172,108,224,0.2)',

        'rgba(255,137,137,0.2)',

        'rgba(25,153,213,0.2)',

        'rgba(115,160,250,0.2)',

        'rgba(47,255,254,0.2)',

        'rgba(56,154,255,0.2)',

      ],

    }

  },

  methods: {

    setWidth(total, num) {

        // console.log('total',total)

      // var sum = 0

      // total.forEach((element) => {

      //   return (sum += Number(element.data))

      // })

      return ((num * 100) / total).toFixed(5) + '%'

    },

    setbgc(item) {

      return this.color[item]

    },

    setBto(item) {

      return this.colorBottom[item]

    },

    setfontColor(item) {

      return this.color[item]

    },

  },

}

</script>

<style lang="less" scoped>

.hotBar {

  width: 100%;

  height: 120px;

  padding-right: 20px;

  overflow-x: hidden;

  overflow-y: auto;

  margin-left: 10px;

  .item {

margin-top: 10px;

.title {

      .index {

        display: inline-block;

        width: 23px;

        height: 23px;

        background: url('../../../../assets/mokuai/huan.png');

        background-size: 100% 100%;

        text-align: center;

        line-height: 23px;

      }

      .name {

        margin-left: 15px;

        font-size: 17px;

        font-family: Adobe Heiti Std;

        font-weight: normal;

      }

    }

    .bar {

      position: relative;

      .fontsize {

        position: absolute;

        right: 15px;

        top: -10px;

        font-size: 24px;

        font-family: YouSheBiaoTiHei;

        font-weight: 400;

        color: #f6951c;

      }

    }

    .main {

      height: 18px;

      border-radius: 5px;

      margin-top: 7px;

      margin-bottom: 12px;

      overflow: hidden;

    }

  }

}

</style>