hlm_pl_mall_h5/pages/member/live/child/gifts.vue

<template>
    <cover-view class="div gifts-inner">
        <text class="div gifts-title">给主播送礼物</text>
        <cover-image mode="aspectFit" src="@/static/image/live/close.png" class="img close" @click="hide"/>
        <cover-view class="div gift-box">
            <cover-view class="div gift-item" @click="sendgift">
                <cover-image mode="aspectFit" src="@/static/image/live/gift-item.png" class="img gift-item-img" />
                <text class="div gift-text">100积分</text>
            </cover-view>
        </cover-view>
    </cover-view>
</template>

<script>
export default {
  props: {},
  data () {
    return {}
  },
  methods: {
    hide () {
      this.$emit('hideGift')
    },
    sendgift () {
      this.$emit('sendgift')
    }
  },
  computed: {}
}
</script>
<style lang="scss" scoped>
    .gifts-inner {
        padding: 0 24rpx;
        /*  #ifndef  APP-PLUS-NVUE  */
        box-sizing: border-box;
        /*  #endif  */
    }
    .gifts-title {
        height: 114rpx;
        line-height: 114rpx;
        font-family: PingFangSC-Medium;
        font-size:16px;
        color: #111111;
        /*  #ifndef  APP-PLUS-NVUE  */
        letter-spacing: 0;
        /*  #endif  */
        text-align: left;
        /*  #ifndef  APP-PLUS-NVUE  */
        display: block;
        /*  #endif  */
        border-bottom: 1px solid #DBDBDB;
    }
    .close {
        height: 64rpx;
        width: 64rpx;
        position: absolute;
        right: 24rpx;
        top: 24rpx;
    }
    .gift-item {
        width: 218rpx;
        height: 218rpx;
        /*  #ifndef  APP-PLUS-NVUE  */
        float: left;
        /*  #endif  */
        background: rgba(0, 0, 0, 0.10);
        border-radius: 8rpx;
        text-align: center;
        margin-bottom: 50rpx;
        margin-right: 25rpx;
        position:relative;
    }
    .gift-text{font-size:12px;position: absolute;right:10rpx;bottom:10rpx;color:$primaryColor}
    .gift-box{
        overflow: hidden;
        padding: 24rpx;
    }
    .gift-item-img{
      margin-left:67rpx;
        width: 84rpx;
        height: 171rpx;
        margin-top: 24rpx
    }
</style>