stocktaking/pages/profile/profile.vue

<template>
  <view class="profile-container">
    <view class="avatar-section">
      <image class="avatar" src="/static/avatar.png" mode="aspectFill"></image>
      <text class="username">管理员</text>
    </view>
    <view class="info-section">
      <view class="info-item">
        <text class="label">账号：</text>
        <text class="value">admin</text>
      </view>
      <view class="info-item">
        <text class="label">角色：</text>
        <text class="value">系统管理员</text>
      </view>
    </view>
    <button class="logout-btn" @click="logout">退出登录</button>
  </view>
</template>

<script>
export default {
  methods: {
    logout() {
      uni.reLaunch({ url: '/pages/login/login' });
    }
  }
}
</script>

<style>
.profile-container {
  min-height: 100vh;
  background: #f5f6fa;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 80rpx;
}
.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40rpx;
}
.avatar {
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
  background: #fff;
  margin-bottom: 20rpx;
}
.username {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
}
.info-section {
  width: 80%;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
  padding: 30rpx;
  margin-bottom: 60rpx;
}
.info-item {
  display: flex;
  flex-direction: row;
  margin-bottom: 20rpx;
}
.info-item:last-child {
  margin-bottom: 0;
}
.label {
  color: #888;
  font-size: 28rpx;
  width: 120rpx;
}
.value {
  color: #333;
  font-size: 28rpx;
}
.logout-btn {
  width: 80%;
  height: 90rpx;
  line-height: 90rpx;
  background: #ff4d4f;
  color: #fff;
  font-size: 32rpx;
  border-radius: 45rpx;
  font-weight: bold;
  margin-top: 40rpx;
}
.logout-btn:active {
  background: #d9363e;
}
</style>