<template>
  <view class="container">
    <view class="header">
      <text class="title">会员中心</text>
    </view>
    <view class="member-info">
      <view class="avatar-section">
        <image src="/static/logo.png" class="avatar" />
        <text class="nickname">张三</text>
        <text class="level">黄金会员</text>
      </view>
      <view class="stats">
        <view class="stat-item">
          <text class="stat-value">100</text>
          <text class="stat-label">积分</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">5</text>
          <text class="stat-label">优惠券</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
// 会员中心逻辑
</script>

<style scoped>
.container {
  padding: 20rpx;
}

.member-info {
  text-align: center;
}

.avatar-section {
  margin-bottom: 40rpx;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 60rpx;
  margin-bottom: 20rpx;
}

.nickname {
  display: block;
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.level {
  display: block;
  color: #999;
}

.stats {
  display: flex;
  justify-content: space-around;
  margin-top: 40rpx;
}

.stat-item {
  text-align: center;
}

.stat-value {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #007AFF;
}

.stat-label {
  display: block;
  color: #999;
  margin-top: 10rpx;
}
</style>
