hitap-chat/components/top-title.vue

<template>
  <!--顶部-->
  <view class="TopTitleBox Width100" :class="bg" :style="'height:' + navHeight + 'rpx;top:0px;padding-top:' + topHeight + 'px;'">
    <view class="TitleContent Width90 Height100 MarginAuto PositionR">
      <view class="LeftBox PositionA Height100" v-show="isShowLeft" @click="backPage">
        <image :src="$.imgSrc + '/scimg/left1.png'" mode="aspectFit" class="Block Icon"></image>
      </view>
      <view class="Title MarginAuto TextCenter" :style="titleWidth">
        <text class="Block FontBold TextHidden" :class="[fontSize,fontColor]">{{title}}</text>
      </view>
      <view class="RightBox Height100 PositionA Flex" :style="'width:' + rightWidth + 'rpx;align-items: center'">
        <slot name="right"></slot>
      </view>
    </view>
  </view>

</template>

<script>
export default {
  name: "top-title",
  props: {
    bg:{
      type:String,
      default:''
    },
    fontSize:{
      type:String,
      default:'FontS_32rpx'
    },
    fontColor:{
      type:String,
      default:'Color_FFFFFF'
    },
    // 是否显示左边
    isShowLeft: {
      type: Boolean,
      default: true,
    },
    // 标题
    title: {
      type: String,
      default: '',
    },
    // 右侧宽度
    rightWidth: {
      type: Number,
      default: 0,
    },
    // 减去宽度
    subWidth: {
      type: Number,
      default: 200,
    },
  },
  data() {
    return {
      navHeight:88,
      topHeight:0,
    }
  },
  mounted(){
    // 状态栏高度
    uni.getSystemInfo({
      success: (e) => {
        // #ifdef APP-PLUS || MP
        this.topHeight = e.statusBarHeight
        // #endif
      }
    })
  },
  computed:{
    titleWidth(){
      return 'width:calc(100% - ' + (this.subWidth + this.rightWidth) + 'rpx);'
    },
    topBg(){
      return "background-image:url('" + this.$.imgSrc + "/images/title_bg1.png');background-repeat: no-repeat;background-position: center top;background-size:100% 100%;"
    }
  },
  methods: {
    // 获取url
    getCurPage() {
      let pages = getCurrentPages();
      let curPage = pages[pages.length - 1];
      return curPage
    },
    // 返回
    backPage(){
      // this.$emit('backPage')
      this.$.back()
    },
    // 跳转页面
    skipPage(item) {
      this.$emit('skipPage', item.pageUrl)
    },
  },
}
</script>

<style scoped lang="scss">
/*头部*/
.TopTitleBox {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
  .TitleContent {
    text {
      line-height: 88rpx;
    }
    .LeftBox{
      width: 100rpx;
      left: 0rpx;
      top: 0rpx;
      .Icon{
        width: 38rpx;
        height: 38rpx;
        margin-top: 25rpx;
      }
    }
    .RightBox{
      top: 0;
      right: 0;
    }
    .Title{
    }
  }
}
</style>