vue外包项目要求气泡可以随机展示，但是自己并不擅长这一块的处理，网上找了几种方式都不太理想，最后想到一个办法，给每个气泡外层一个固定宽高的div,然后气泡在这个div内随机定位，这样也形成了一个所有气泡随机定位的视觉效果。

/**
* @Author: 858834013@qq.com
* @Name: item1
* @Date: 2022-09-03
* @Desc:
*/
<template>
  <div class="item1s">
    <itemTitle title="重点发展产业"></itemTitle>
    <div class="tableInfo" ref="tableInfo">
      <div class="info2" v-for="(item,index) in list">
        <div class="itemx1"
             :style="{left:item.left,top:item.top,width:width*item.guimo/3+'px',height:width*item.guimo/3+'px'}"
             :key="index">
          {{ item.name }}<br>{{ item.guimo }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import itemTitle from '@/components/itemTitle'
import {zdchanye} from '@/api/api/user'

export default {
  name: 'item1',
  components: {itemTitle},
  data() {
    return {
      list: [],
      width: 40,
      height: 40,
      radius: 100,
      offsetWidth: 0,
      offsetHeight: 0,
    }
  },
  watch: {},
  mounted() {
    this.getdata()
    this.getClient()
  },
  methods: {
    getClient() {
      // 获取html可视区域高度
      this.offsetWidth = this.$refs.tableInfo.offsetWidth - 100
      this.offsetHeight = this.$refs.tableInfo.offsetHeight - 100
    },
    getdata() {
      var that = this
      zdchanye().then(function (res) {
        that.list = res.content
        that.list.forEach((type) => {
          type.left = Math.ceil(Math.random() * 10) * 8 + 'px'
          type.top = Math.ceil(Math.random() * 10) * 8 + 'px'
        });
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.item1sBody {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
}

.item1s {
  width: calc(100% - 84px - 0px);
  margin-left: 30px;
  position: relative;
  height: 100%;
}

.tableInfo {
  position: relative;
  width: 100%;
  height: calc(100% - 40px);
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: flex-start;

  .itemx1 {
    width: 40px;
    height: 40px;
    min-height: 50px;
    max-height: 100px;
    white-space: nowrap;
    min-width: 50px;
    max-width: 100px;
    left: 48px;
    top: 40px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
    font-family: 'OPPOSans';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    text-align: center;
    color: #FFFFFF;
    background: url("../../../assets/home2/huan1.png");
    background-size: 100% 100%;
  }

  .itemx2 {
    position: absolute;
    width: 100px;
    height: 100px;
    left: 20%;
    top: 140px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;
    font-family: 'OPPOSans';
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    text-align: center;
    color: #FFFFFF;
    background: url("../../../assets/home2/huan2.png");
    background-size: 100% 100%;
  }
}

.info2 {
  width: 120px;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
  position: relative;
}

</style>