hlm_pl_mall_h5/pages/member/live/child/gift-animation.vue

<template>
    <cover-view>
      <cover-view class="div gift-ani">
          <cover-image mode="aspectFit" :src="avatar" class="img avatar"/>
          <cover-view class="div info-name">
              <cover-view><text class="div nick">{{nick}}</text></cover-view>
              <cover-view><text class="div gift">送出 火箭X1</text></cover-view>
          </cover-view>
      </cover-view>
      <cover-image mode="aspectFit" src="@/static/image/live/gift-item.png" class="img gitf-item"/>
    </cover-view>
</template>

<script>
export default {
  props: {
    nick: {},
    avatar: {}
  },
  data () {
      return {}
  },
  methods: {
    showgift () {
      this.$emit('showGift')
    }
  },
  computed: {},
  created () {
    setTimeout(() => {
      this.$emit('hideani')
    }, 1000)
  }
}
</script>
<style lang="scss" scoped>
    .gift-ani {
        background-color: rgba(0, 0, 0, 0.18);
        border-radius: 40rpx;
        width: 330rpx;
        height: 80rpx;
        position: relative;
        /*  #ifndef  APP-PLUS-NVUE  */
        display: flex;
        /*  #endif  */
        flex-direction: row;
        align-items: center;
    }
    .info-name{
    }
    .avatar{
        height: 72rpx;
        width: 72rpx;
        border-radius: 36rpx;
        margin: 4rpx;
    }
    .nick{
        font-family: PingFangSC-Medium;
        font-size: 12px;
        color: #FFFFFF;
        /*  #ifndef  APP-PLUS-NVUE  */
        letter-spacing: 0;
        /*  #endif  */
        text-align: left;
        line-height: 24rpx;
    }
    .gift{
        font-family: PingFangSC-Regular;
        font-size:12px;
        color: #FFFFFF;
        /*  #ifndef  APP-PLUS-NVUE  */
        letter-spacing: 0;
        /*  #endif  */
        text-align: left;
        line-height: 44rpx;
    }
    .gitf-item{
        height: 170rpx;
        width: 93rpx;
        position: absolute;
        left: 230rpx;
        top: 0;
    }
</style>