<template>
    <view class="container">
        <view class="navBarBox">
            <!-- 状态栏占位 -->
            <view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
            <!-- 真正的导航栏内容 -->
            <view class="navBar">
                个人中心
            </view>
        </view>

        <view class="pdx-30 mgt-30 flex fd_c">
            <view class="flex ai_center">
                <image class="w-120 h-120 radio-circle" src="/static/logo.png" mode="scaleToFill" />
                <view class="mgl-30 text-400 text-36">我是用户名字啊</view>
            </view>
            <view class="flex ai_center fd_c mgt-100">
                <view class="w flex ai_center jc_between mgb-40">
                    <view class="flex ai_center">
                        <svg t="1752219774861" class="w-50 h-50" fill="#fd8280" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="14904" width="128" height="128">
                            <path
                                d="M919.6 405.6l-57.2-8c-12.7-1.8-23-10.4-28-22.1-11.3-26.7-25.7-51.7-42.9-74.5-7.7-10.2-10-23.5-5.2-35.3l21.7-53.5c6.7-16.4 0.2-35.3-15.2-44.1L669.1 96.6c-15.4-8.9-34.9-5.1-45.8 8.9l-35.4 45.3c-7.9 10.2-20.7 14.9-33.5 13.3-14-1.8-28.3-2.8-42.8-2.8-14.5 0-28.8 1-42.8 2.8-12.8 1.6-25.6-3.1-33.5-13.3l-35.4-45.3c-10.9-14-30.4-17.8-45.8-8.9L230.4 168c-15.4 8.9-21.8 27.7-15.2 44.1l21.7 53.5c4.8 11.9 2.5 25.1-5.2 35.3-17.2 22.8-31.7 47.8-42.9 74.5-5 11.8-15.3 20.4-28 22.1l-57.2 8C86 408 72.9 423 72.9 440.8v142.9c0 17.7 13.1 32.7 30.6 35.2l57.2 8c12.7 1.8 23 10.4 28 22.1 11.3 26.7 25.7 51.7 42.9 74.5 7.7 10.2 10 23.5 5.2 35.3l-21.7 53.5c-6.7 16.4-0.2 35.3 15.2 44.1L354 927.8c15.4 8.9 34.9 5.1 45.8-8.9l35.4-45.3c7.9-10.2 20.7-14.9 33.5-13.3 14 1.8 28.3 2.8 42.8 2.8 14.5 0 28.8-1 42.8-2.8 12.8-1.6 25.6 3.1 33.5 13.3l35.4 45.3c10.9 14 30.4 17.8 45.8 8.9l123.7-71.4c15.4-8.9 21.8-27.7 15.2-44.1l-21.7-53.5c-4.8-11.8-2.5-25.1 5.2-35.3 17.2-22.8 31.7-47.8 42.9-74.5 5-11.8 15.3-20.4 28-22.1l57.2-8c17.6-2.5 30.6-17.5 30.6-35.2V440.8c0.2-17.8-12.9-32.8-30.5-35.2z m-408 245.5c-76.7 0-138.9-62.2-138.9-138.9s62.2-138.9 138.9-138.9 138.9 62.2 138.9 138.9-62.2 138.9-138.9 138.9z"
                                fill="" p-id="14905"></path>
                        </svg>
                        <view class="mgl-10 text-32">设置</view>
                    </view>
                    <svg t="1752219361738" class="w-40 h-40" fill="#b9b7c1" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="12887" width="128" height="128">
                        <path
                            d="M782.8 511.1 351.9 942c-22.8 22.8-59.8 22.8-82.6 0-22.8-22.8-22.8-59.8 0-82.6L617.5 511.1 269.2 162.8c-22.8-22.8-22.8-59.8 0-82.6 22.8-22.8 59.8-22.8 82.6 0L782.8 511.1 782.8 511.1zM782.8 511.1"
                            p-id="12888"></path>
                    </svg>
                </view>
                <view class="w flex ai_center jc_between">
                    <view class="flex ai_center">
                        <svg t="1752219672812" class="w-50 h-50" fill="#b9b7c1" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="13913" width="128" height="128">
                            <path
                                d="M525.114692 102.747105c-229.821269-10.861372-423.249677 177.584558-422.435125 411.555333 1.042749 299.32218 315.278593 496.418117 585.234955 366.94123 12.599969-6.043646 25.337061-12.55392 36.337603-21.018709 19.457144-14.97097 23.509437-35.908838 11.616572-53.267181-12.465916-18.196431-29.881564-21.423939-49.390897-13.489222-10.04989 4.088108-19.052938 10.685363-28.967752 15.182794-126.787638 57.521065-248.039189 46.335305-355.218234-41.801035-108.74368-89.421612-144.92574-208.296023-109.187795-344.739579 43.652196-166.649508 217.050408-270.850731 384.180869-234.679927 176.101787 38.110993 290.045909 200.222137 259.848143 374.825804-7.028067 40.643676-25.908066 79.379908-40.653909 118.495788-10.066263 26.705222-6.712889 45.458331 13.204743 56.787354 19.540032 11.113105 38.753629 4.527107 55.148018-19.23611 3.52222-5.107321 6.251378-10.778484 9.18622-16.275685 24.530696-45.954635 39.492456-95.109148 44.947701-146.652058C944.04704 318.377164 766.000971 114.13241 525.114692 102.747105z"
                                p-id="13914"></path>
                            <path
                                d="M564.213175 499.078713c9.115612-42.580794-12.606109-62.342884-55.298444-52.902884-9.091052 2.009773-18.232247 4.457522-26.803459 8.018627-28.460192 11.822257-37.786605 32.769334-20.583804 59.119469 12.263301 18.784832 9.471722 34.17638 4.28663 52.447513-10.187013 35.894512-20.615527 71.786976-28.817326 108.159372-7.235798 32.092929 10.072403 52.812833 42.718941 52.507888 4.3951-0.730641 10.57587-1.528819 16.657378-2.805906 51.978838-10.915607 60.285015-28.485775 38.650275-76.800153-3.864004-8.629541-3.364631-20.741393-1.065262-30.332842C543.375591 577.188698 555.760666 538.560936 564.213175 499.078713z"
                                p-id="13915"></path>
                            <path
                                d="M589.758991 342.949816c0.511653-24.560372-23.067368-47.913243-47.544853-47.087435-25.408693 0.858554-45.788859 24.127514-43.774993 49.985438 1.906419 24.486694 22.179139 42.670845 46.632063 41.827641C568.862056 386.854768 589.268828 366.4306 589.758991 342.949816z"
                                p-id="13916"></path>
                        </svg>
                        <view class="mgl-10 text-32">关于我们</view>
                    </view>
                    <svg t="1752219361738" class="w-40 h-40" fill="#b9b7c1" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="12887" width="128" height="128">
                        <path
                            d="M782.8 511.1 351.9 942c-22.8 22.8-59.8 22.8-82.6 0-22.8-22.8-22.8-59.8 0-82.6L617.5 511.1 269.2 162.8c-22.8-22.8-22.8-59.8 0-82.6 22.8-22.8 59.8-22.8 82.6 0L782.8 511.1 782.8 511.1zM782.8 511.1"
                            p-id="12888"></path>
                    </svg>
                </view>
            </view>
        </view>
    </view>

    <!-- 引入自定义 TabBar -->
    <custom-tabbar :currentIndex='2' />
</template>

<script setup>
import { ref, onBeforeMount } from "vue";
import CustomTabbar from "@/components/custom-tabbar.vue";

// 状态栏高度
let statusBarHeight = ref(0);
// 导航栏高度
let navBarHeight = ref(0);
onBeforeMount(() => {
    statusBarHeight.value = uni.getSystemInfoSync()['statusBarHeight'];
	// #ifndef H5
	const custom = uni.getMenuButtonBoundingClientRect();
	// 导航栏的高度 = 胶囊的高度 + （胶囊距离顶部的距离 - 状态栏的高度）* 2
	//                                   即胶囊的上下边距
	navBarHeight.value = custom.height + (custom.top - statusBarHeight.value) * 2;
	// #endif
});



</script>

<style lang="scss" scoped>
.container {
    .navBarBox {
        .navBar {
            width: 100%;
            height: 80rpx !important;
            line-height: 80rpx;
            padding-left: 30rpx;
            font-size: 32rpx;
            color: #333;
        }
    }
}
</style>
