JiangningUrbanManagePc/src/views/components/mapRight/index.vue

<template>
  <div class="right-main" id="rightParent">
    <div class="header-title">
      <div>网格名称</div>
      <div>今日事件</div>
      <div>已解决</div>
      <div>未解决</div>
    </div>
    <div class="lists-main" id="rightBox" :style="{'height':(height - lists.height - 20) + 'px'}">
      <div class="main" v-for="(item,index) in rightArray" :key="index" :class="(index+1) % 2 == 0 ? 'main1':''">
        <div>
          <img src="@/assets/images/location1.png" alt="">
          {{ item.area }}
        </div>
        <div>{{ item.event }}</div>
        <div>{{ item.resolved }}</div>
        <div class="unsolved">{{ item.unsolved }}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name:'mapRight',
  data() {
    return {
      lists:{
        height:0,
      }
    }
  },
  props:{
    rightArray:{
      type:Array,
      default:[],
    },
    height:{
      type:Number,
      default:0,
    }
  },
  methods:{
  },
  mounted(){
    
    this.$nextTick(()=>{
      // 获取父级容器元素
      var parentElement = document.getElementById('rightParent');

      // 获取盒子元素
      var boxElement = document.getElementById('rightBox');

      // 获取盒子元素相对于视口的位置信息
      var boxRect = boxElement.getBoundingClientRect();

      

      // 获取盒子距离父级顶部的距离
      var distanceToTop = boxRect.top - parentElement.getBoundingClientRect().top;
      this.lists.height = distanceToTop;
      // console.log(distanceToTop,"高度")
    })
  },
}
</script>
<style lang="scss" scoped>
.right-main {
  padding: 8px 0 0 17px;
  .header-title {
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(7,127,255,0.1608);
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    border: 1px solid #077FFF;
    height: 33px;
    div {
      font-size: 14px;
      font-family: Source Han Sans CN--Bold, Source Han Sans CN-;
      font-weight: bold;
      color: #D3EEF2;
      line-height: 21px;
      min-width: 60px;
    }
  }
  .lists-main {
    overflow-y: scroll;
    // height: 99px;
  }
  .main {
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(216,216,216,0.05);
    height: 33px;
    
    div {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-family: Source Han Sans CN--Regular, Source Han Sans CN-;
      font-weight: 400;
      color: #D3EEF2;
      line-height: 21px;
      min-width: 60px;
      
      &:nth-child(1) {
        font-size: 14px;
        font-family: Source Han Sans CN--Regular, Source Han Sans CN-;
        font-weight: 400;
        color: #52B1FF;
        line-height: 21px;
      }
      
      img {
        width: 18px;
        margin-right: 8px;
      }
    }
    
    .unsolved {
      color: #FF6C6C;
      text-align: center;
    }
  }
  .main1 {
    background: rgba(187,220,255,0.16);
  }
}
</style>