<template>
  <div class="my-bone">
    <div class="top">

    </div>
    <div class="list">
      <div class="list-item" v-for="item in arr" :key="item">
        <div class="left"></div>
        <div class="right">
          <div class="right_div"></div>
          <div class="right_div"></div>
          <div class="right_div"></div>
          <div class="right_div"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      arr: [1,2,3,4,5,6,7,8,9,10]
    }
  }
}
</script>

<style lang="scss">
.my-bone {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 9999;
  background: white;
  padding: 20rpx;
  overflow: hidden;
  .top {
    height: 260rpx;
    background: #eee;
  }
  .list {
    margin-top: 40rpx;
    .list-item {
      margin-top: 40rpx;
      display: flex;
      height: 260rpx;
    }
    .left {
      flex: none;
      width: 200rpx;
      margin-right: 20rpx;
      background: #eee;
    }
    .right {
      flex: auto;
      display: flex;
      flex-flow: column;
      justify-content: space-between;
      .right_div{
        height: 40rpx;
        background: #eee;
      }
      // div {
      //   height: 40rpx;
      //   background: #eee;
      // }
    }
  }
}
</style>