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

<template>
  <cover-view class="wrapper">
    <cover-view class="header">
      <title-header />
    </cover-view>
      <cover-view class="div info-wrap">

          <cover-view class="left">
            <!-- 主播信息 -->
            <cover-view class="div an-infos" v-if="ownerInfo&&ownerInfo.avatar">
                <cover-image mode="aspectFit" :src="ownerInfo.avatar" class="img avtar" />
                <cover-view class="div info">
                    <cover-view><text class="div an-name">{{ownerInfo.nick}}</text></cover-view>
                    <cover-view><text class="div an-fans">{{ownerInfo.fans}}粉丝</text></cover-view>
                </cover-view>
                <text class="div attention" @click="attentionBtn">{{ifLike?'已关注':'关注'}}</text>
            </cover-view>
            <!-- 直播间信息 -->
            <cover-view class="room-id-info-wrapper" style="margin:20rpx 0"><text class="div room-id-info" v-if="groupInfo&&groupInfo.groupID">直播间ID：{{groupInfo.groupID}}</text><cover-view style="flex:1"></cover-view></cover-view>
            <!-- 区域信息 -->
            <!-- 观看人数信息 -->
            <cover-view class="room-id-info-wrapper"><text class="div room-id-info" v-if="groupInfo.memberNum">{{groupInfo.memberNum}}人在看</text><cover-view style="flex:1"></cover-view></cover-view>
            <!-- 退出直播 end -->
          </cover-view>
          
          <cover-view class="right">
            <!-- 退出直播 start -->
            <cover-view class="right-wrapper">
              <cover-image mode="aspectFit" src="@/static/image/live/refresh.png" class="img refresh" @click="refresh"/>
              <back class="back" @quitGroup="quitGroup"></back>
            </cover-view>
          </cover-view>
          
          <!-- 优惠券 -->
          <cover-image mode="aspectFit" v-if="showcoupon" src="@/static/image/live/red-pack.png" class="img red-pack" @click="coupon"/>
      </cover-view>
  </cover-view>
</template>

<script>
  import TitleHeader from '../../../TitleHeader'
import back from './back'
export default {
  props: {
    groupInfo: {},
    ownerInfo: {},
    showcoupon: {},
    ifLike: {}
  },
  data () {
    return {
    }
  },
  methods: {
    coupon () {
      this.$emit('coupon')
    },
    quitGroup () {
      this.$emit('quitGroup')
    },
    attentionBtn () {
      this.$emit('attention')
    },
    refresh () {
      location.reload()
    }
  },
  components: {
    TitleHeader,
    back
  },
  computed: {},
  created () {
  }
}
</script>
<style lang="scss" scoped>
  .wrapper{flex:1}
  .header{
    /*  #ifndef  APP-PLUS-NVUE  */
    padding-top:var(--status-bar-height);
    /*  #endif  */
    background-color: #fff;
    }
    .back{

    }
    .refresh{
        width: 32px;
        height: 32px;
        margin-right: 20rpx;
    }
    .avtar {
        width: 72rpx;
        height: 72rpx;
        border-radius: 36rpx;
        overflow: hidden;
    }
    .info {
        flex:1;
        color: #000;
        padding-left: 10rpx;
    /*  #ifndef  APP-PLUS-NVUE  */
        max-width: 140rpx;
    /*  #endif  */
    }
    .attention {
        width: 94rpx;
        height: 60rpx;
        background: rgba(255,255,255,.5);
        border-radius: 30rpx;
        font-family: PingFangSC-Medium;
        font-size:12px;
        color: #FFF;
        /*  #ifndef  APP-PLUS-NVUE  */
        letter-spacing: 0;
        /*  #endif  */
        text-align: center;
        padding: 0;
        line-height: 60rpx;
    }
    .an-infos {
      /*  #ifndef  APP-PLUS-NVUE  */
      display: flex;
      /*  #endif  */
      /*  #ifdef  APP-PLUS-NVUE  */
      flex-direction: row;
      /*  #endif  */
      align-items: center;
        background: rgba(0, 0, 0, 0.25);
        border-radius: 40rpx;
        width: 322rpx;
        height: 72rpx;
        padding: 4rpx;
    }
    .an-name {
        font-family: PingFangSC-Medium;
        font-size:12px;
        color: #FFFFFF;
        /*  #ifndef  APP-PLUS-NVUE  */
        letter-spacing: 0;
        /*  #endif  */
        text-align: left;
        text-overflow: ellipsis;
        lines:1;
    }
    .an-fans {
        font-family: PingFangSC-Regular;
        font-size:10px;
        color: #FFFFFF;
        /*  #ifndef  APP-PLUS-NVUE  */
        letter-spacing: 0;
        /*  #endif  */
        text-align: left;
        margin-top: 10rpx;
        text-overflow: ellipsis;
        overflow: hidden;
        /*  #ifndef  APP-PLUS-NVUE  */
        white-space: nowrap
        /*  #endif  */
    }
    .info-wrap {
        padding: 92rpx 22rpx;
        /*  #ifndef  APP-PLUS-NVUE  */
        display: flex;
        /*  #endif  */
        /*  #ifdef  APP-PLUS-NVUE  */
        flex-direction: row;
        /*  #endif  */
    }
    .left{
      flex:1
    }
    .right-wrapper{
      /*  #ifndef  APP-PLUS-NVUE  */
      display: flex;
      /*  #endif  */
      /*  #ifdef  APP-PLUS-NVUE  */
      flex-direction: row;
      /*  #endif  */
      justify-content: flex-end;
    }
    .right{
       
    }
    .room-id-info-wrapper{
       /*  #ifndef  APP-PLUS-NVUE  */
       display: flex;
       /*  #endif  */
       /*  #ifdef  APP-PLUS-NVUE  */
       flex-direction: row;
       /*  #endif  */
    }
    .room-id-info {
      /*  #ifndef  APP-PLUS-NVUE  */
      display: block;
      /*  #endif  */
        background: rgba(0, 0, 0, 0.25);
        border-radius: 40rpx;
        font-family: PingFangSC-Regular;
        font-size:10px;
        color: #FFFFFF;
        text-align: center;
        line-height: 40rpx;
        height: 40rpx;
        padding:0 20rpx;
    }
    .red-pack {
        /* background-image: linear-gradient(180deg, #FF9C9C 8%, #F37474 100%); */
        border-radius: 4rpx;
        height: 109rpx;
        width: 83rpx;
        position: absolute;
        right: 24rpx;
        top: 270rpx;
        z-index: 1000;
    }
</style>