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

<template>
    <cover-view class="div room-bottom">
        <!-- 当前商品 start -->
        <goods class="goods" @showgoods="showgoods"></goods>
        <!-- 当前商品 end -->
        <!-- 消息输入 start -->
        <message class="message" @send-message="sendMessage" :isTimReady="isTimReady"></message>
        <!-- 消息输入 end -->
        <!-- 送礼物 start -->
        <gift class="gift" @showGift="showGift"></gift>
        <!-- 送礼物 end -->
        <!-- 点赞 start -->
        <like class="like" @like="like"></like>
        <!-- 点赞 end -->
    </cover-view>
</template>

<script>

import goods from './goods'
import gift from './gift'
import like from './like'
import message from './message'
export default {
  props: {
    header: {},
    isTimReady: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {}
  },
  components: {
    goods,
    gift,
    like,
    message
  },
  methods: {
    showgoods () {
      this.$emit('showgoods')
    },
    showGift () {
      this.$emit('showGift')
    },
    sendMessage (data) {
      this.$emit('send-message', data)
    },
    like () {
      this.$emit('like')
    }
  },
  created () {},
  mounted () {}
}
</script>
<style lang="scss" scoped>
    .room-bottom{
      /*  #ifndef  APP-PLUS-NVUE  */
      display: flex;
      overflow: visible;
      /*  #endif  */
      /*  #ifdef  APP-PLUS-NVUE  */
      flex-direction: row;
      /*  #endif  */
      align-items: flex-end;
      }
    .goods {
        margin: 0 32rpx 0 32rpx;
    }
    .gift {
        margin-left: 32rpx;
    }
    .like {
    }
    .message {
        flex:1;
        /*width: 266rpx;*/
        height: 66rpx;
        background: rgba(0, 0, 0, 0.25);
        border-radius: 40rpx;
        border-radius: 40rpx;
    }
</style>