<!--  -->
<template>
  <div class='bar'>
    <div class="bar-line">
      <div v-for="(item,i) in data" :key="i" class="bar-item" :style="item.sty">
        <div class="bar-num">
          <span class="num">{{item.num}}</span>
          <span>{{item.name}}</span>
        </div>
      </div>
      <div class="bottm-title" style="width:11rem;right:9.5rem;">
        <div class="num">{{(34.7 + 112.33 + 1.77)+'亿元'}}</div>
        <div style="color:#ffb64d">本地生产增加值本年累计</div>
      </div>
    </div>
    <!-- <div class="bar-line" style="margin-left: 1rem;margin-right:0;height:60%;">
      <div v-for="(item,i) in zcArr" :key="i" class="bar-item" :style="item.sty">
        <div class="bar-num" style="left:2rem;right:0">
          <span class="num" style="text-align: left;width: 5rem;">{{item.num}}</span>
          <span>{{item.name}}</span>
        </div>
      </div>
      <div class="bottm-title" style="left:0">
        <div style="text-align:left" class="num">62亿</div>
        <div style="color:#24a5f8">固定资产投资</div>
      </div>
    </div> -->
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
const cyArr = [{
  num: '22亿',
  name: '第一产业',
  sty: {
    height: '34%',
    backgroundColor: '#ffb64d',
    color: '#ffb64d'
  }
}, {
  num: '22亿',
  name: '第二产业',
  sty: {
    height: '33%',
    backgroundColor: '#fd6c12',
    color: '#fd6c12'
  }
}, {
  num: '22亿',
  name: '第三产业',
  sty: {
    height: '33%',
    backgroundColor: '#f13800',
    color: '#f13800'
  }
}]

const zcArr = [{
  num: '12亿',
  name: '工业投资',
  sty: {
    height: '20%',
    backgroundColor: '#24a5f8',
    color: '#24a5f8'
  }
}, {
  num: '18亿',
  name: '技改投资',
  sty: {
    height: '30%',
    backgroundColor: '#007dcd',
    color: '#007dcd'
  }
}, {
  num: '24亿',
  name: '装备投资',
  sty: {
    height: '40%',
    backgroundColor: '#5763d9',
    color: '#5763d9'
  }
}, {
  num: '8亿',
  name: '其他',
  sty: {
    height: '10%',
    backgroundColor: '#1328d3',
    color: '#1328d3'
  }
} ]

export default {
// import引入的组件需要注入到对象中才能使用
  props: {
    data: {
      default: []
    }
  },
  components: {},
  data () {
    // 这里存放数据
    return {
      cyArr,
      zcArr
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {

  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style scoped>
.bar{
  display: flex;
  justify-content: flex-end;
  box-sizing: border-box;
  padding-right: 85px;
  height: 90%;
  align-items: flex-end;
}
.bar .bar-line{
  height: 85%;
  width: 20px;
  /* margin-right: 1rem; */
}

.bar .bar-line .bar-item{
  transition: all 0.3s ease;
}
.bar .bar-line .bar-item .bar-num{
  position: relative;
  /* right: 5rem; */
  /* width: 4rem;   */
  right: 13rem;
  width: 12rem;
  text-align: right;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
}
.num{
  color: #fff;
  font-size: 1.5rem;
  text-align: right;
  line-height: 1.5;
}
.bottm-title{
  text-align: right;
  width: 6rem;
  position: relative;
  right: 4.5rem;
  margin-top: 1rem;
}
.bottm-title div:last-child{
  font-weight: bold;
}
</style>
