<template>
	<view class="me-top">
    <view class="status-bar" :style="{height: inject('globalData').statusBarH+'px'}"></view>
    <view class="capsule flex-c" :style="{height: inject('globalData').customBarH - inject('globalData').statusBarH+'px'}">
      <view class="icon-ctr flex-c" v-if="isShowIcon">
        <image class="icon" mode="aspectFill" :src="inject('globalData').appIcon"></image>
      </view>
      <text class="title">{{title}}</text>
    </view>
	</view>
</template>

<script setup>
import {inject} from 'vue'
const props = defineProps({
  //标题
  title: {
    type: String,
    required: true,
  },
  isShowIcon: {
    type: Boolean,
    required: false,
    default: true
  }
});
</script>

<style lang="scss" scoped>
.me-top {
  .capsule {
    .icon-ctr {
      width: 60rpx;
      height: 60rpx;
      border: 1px solid #E9F1FE;
      border-radius: 50%;
      position: absolute;
      left: 0;
      .icon {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .title {
      font-weight: 500;
      font-size: 32rpx;
      color: var(--titleColor);
    }
  }
}
</style>
