phe-mini/pages/personalInfo/index.vue

<template>
    <view class="personal-center">
      <!-- 用户信息卡片 -->
      <view class="user-card">
        <image class="avatar" src="/static/tabbar/personal.png" mode="aspectFill" />
      </view>
	  <view class="user-info">
	    <text class="username">用户名</text>
	    <text class="phone">138****8888</text>
	  </view>
      <button class="logout-btn" @click="logout">退出登录</button>
  </view>
</template>

<script>
export default {
  methods: {
    navigateTo(url) {
      uni.navigateTo({ url });
    },
    logout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            uni.removeStorageSync('token');
            uni.reLaunch({ url: '/pages/auth/login' });
          }
        }
      });
    }
  }
};
</script>
<style scoped>
.personal-center {
  padding: 0px;
  background-color: #f7f7f7;
  min-height: 150vh;
}

.user-card {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  padding: 20px;
  height: 9.5rem;
  background-color: #2164cb;
  /* border-radius: 10px;
  margin-bottom: 20px; */
}

.avatar {
  background-color:#f7f7f7;
  width: 80px;
  height: 80px;
  border-radius: 50%;
 /* margin-right: 15px; */
}

.user-info {
  margin-top: -20px;
  margin-left: 20px; /* 左右留白 */
  margin-right: 20px;
  border-radius: 10px;
  background-color: #fff;
  height: 200px;
  position: relative;
  z-index: 1
}

.username {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.phone {
  font-size: 14px;
  color: #999;
}

</style>