53 lines
1.1 KiB
Vue
53 lines
1.1 KiB
Vue
<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>
|