css 条形百分比2

 

 

<template>
  <module-box moduleType="ykjdl" bgType="2" :styleObj="styleObj" :cityShow="true" title="景区游客接待量 TOP 10">
    <div class="module-content">
      <div class="module-content-box">
        <div v-for="(item,index) in dataList" :key="item + index" class="module-content-list">
          <div :class="[(index == 0 || index == 1 || index == 2)?'module-content-list-l-img':'module-content-list-l-text']" class="module-content-list-l">
            <img v-if="index == 0" src="../../../assets/index/img-2-1.png" alt="">
            <img v-if="index == 1" src="../../../assets/index/img-2-2.png" alt="">
            <img v-if="index == 2" src="../../../assets/index/img-2-3.png" alt="">
            <span v-if="index != 0 && index != 1 && index != 2">{{index + 1}}</span>
          </div>
          <div class="module-content-list-r">
            <div class="module-content-list-r-t">{{ item.name }}</div>
            <div class="module-content-list-r-b">
              <div :style="{width:item.value}" :class="[index == 0?'module-content-list-r-b-color-1':(index == 1?'module-content-list-r-b-color-2':(index == 2?'module-content-list-r-b-color-3':''))]" class="module-content-list-r-b-color"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </module-box>
</template>

<script>
export default {
  components: {

  },
  props: {
    /* pageData: {
      type: Array,
      default: () => ([])
    } */

  },
  data() {
    return {
      dataList:[
        {
          name:'长白山风景区',
          value:'100%'
        },
        {
          name:'六鼎山文化旅游区',
          value:'90%'
        },
        {
          name:'长影世纪城',
          value:'80%'
        },
        {
          name:'长春世界雕塑公园',
          value:'70%'
        },
        {
          name:'六鼎山文化旅游区',
          value:'70%'
        },
        {
          name:'孔子文化园',
          value:'60%'
        },
        {
          name:'关东文化园',
          value:'50%'
        },
        {
          name:'集安高句丽文物古迹景区',
          value:'40%'
        },
        {
          name:'伪满皇宫博物院',
          value:'30%'
        },
        {
          name:'净月潭风景名胜区',
          value:'20%'
        }
      ],
      styleObj:{
        transform:'scale(1.5)',
        width:'380px',
        height:'420px'
      }
    }
  },
  computed: {

  },
  watch: {

  },
  mounted() {
  },
  created() {

  },
  methods: {

  }
}
</script>

<style lang="scss" scoped>
  .module-content{
    .module-content-box{
      padding: 12px 25px 0 15px;
      .module-content-list{
        display: flex;
        height: 22px;
        margin-bottom: 14px;
        .module-content-list-l{
          width: 18px;
          height: 22px;
        }
        .module-content-list-l-img{
          img{
            width: 100%;
            height: 100%;
          }
        }
        .module-content-list-l-text{
          width: 18px;
          height: 22px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 12px;
          font-family: BDZYJT--GB1-0, BDZYJT--GB1;
          font-weight: normal;
          color: #F7F7F7;
          background: linear-gradient(225deg, rgba(77,155,255,0.1) 0%, rgba(64, 122, 255, 1) 100%);
        }
        .module-content-list-r{
          margin-left: 8px;
          .module-content-list-r-t{
            font-size: 12px;
            font-weight: 500;
            color: #F7F7F7;
            line-height: 10px;
            margin-bottom: 6px;
          }
          .module-content-list-r-b{
            width: 314px;
            height: 6px;
            background: rgba(9,111,255,0.05);
            border-radius: 22px;
            .module-content-list-r-b-color{
              width: 100%;
              height: 100%;
              background: linear-gradient(269deg, #0080FF 0%, rgba(0,140,242,0) 100%);
              border-radius: 22px;
            }
            .module-content-list-r-b-color-1{
              background: linear-gradient(270deg, #FE3E32 0%, rgba(235,37,37,0) 100%);
            }
            .module-content-list-r-b-color-2{
              background: linear-gradient(270deg, #FFB313 0%, rgba(218,160,38,0) 100%);
            }
            .module-content-list-r-b-color-3{
              background: linear-gradient(270deg, #00F6FE 0%, rgba(30,195,212,0.1) 100%);
            }
          }
        }
      }
    }
  }
</style>