SOURCE

var vm = new Vue({
    el: '#app',
    data: {
        msg: 'Hello, world'
    }
})

<div id="app">
    <section class="gift">
      <section class="left-box">
        <div class="box time"><span>距离暂停还剩</span> <span>{{ msg }}00:00:00</span></div>
        <div class="box tips">显示打礼物才加减时间哦</div>
        <div class="box">
          <ul class="list gift-list">
            <li v-for="item in 12">
              <img src="@/assets/spring_s.jpg" alt="" />
              <div class="info">
                <p class="giftname">小心心</p>
                <span class="desc">+5秒</span>
              </div>
            </li>
          </ul>
        </div>
      </section>
      <section class="right-box">
        <div class="box fans">
          <ul class="list">
            <li v-for="item in 3">
              <img src="@/assets/spring_s.jpg" alt="" />
              <div class="info">
                <p class="giftname">昵称<i>等级</i></p>
                <span class="desc">累计加：30秒</span>
              </div>
            </li>
          </ul>
        </div>
        <div class="box">关注 xx关注了主播</div>
        <div class="box">礼物 xxxx, 送出了xx礼物， 增加了xx秒</div>
      </section>
    </section>
</app>

.gift{
  display: flex;
}
.left-box{

}
.right-box{
  margin-left: 10px;
}
.box{
  margin-top: 10px;
  padding: 6px;
  border: 2px solid #000;
}
.time{
  margin: 0;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
}
.tips{
  font-size: 16px;
  font-weight: 600;
}
.list{
  margin: 0;
  padding:0;
  list-style: none;
}
.list>li{
  display: flex;
  margin: 0;
  padding: 0;
}
.list>li img{
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.gift-list{
  display: flex;
  flex-wrap: wrap;
  width: 240px;
}
.gift-list>li{
  width: 50%;
  flex-grow: 1;
}
.fans{
  margin: 0;
}
.info{
  margin-left: 6px;
}
.giftname{
  font-weight: 600;
}
.desc{

}